/* ===== Tokens — see resume-theme.css for palette; layout only here ===== */
:root {
  --content-max: 680px;
  --rail-w: 248px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink-900);
  color: var(--paper-0);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-family: var(--font-mono);
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 3px;
}

/* ===== Rail / Nav ===== */
.nav-toggle-input { display: none; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35rem 1.25rem;
  border-right: 1px solid var(--border);
  z-index: 100;
}

.rail__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rail__brand {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  border: 1.5px solid var(--brass-500);
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  overflow: visible;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.rail__brand:hover { border-color: var(--teal-600); transform: translateY(-1px); }
.rail__brand-char {
  display: inline-block;
  animation: brand-pop 0.65s var(--ease) both;
  animation-delay: calc(var(--i) * 0.14s + 0.1s);
}
.rail__brand:hover .rail__brand-char {
  animation: brand-bounce 0.55s var(--ease);
  animation-delay: calc(var(--i) * 0.09s);
}
/* Opacity deliberately stays at 1 throughout — an earlier version started
   at opacity:0 with fill-mode:both, which meant the letters were invisible
   until the animation played and finished. If that animation ever fails to
   run for any reason (CSS animations should always run without JS, but
   evidently something was stopping it on real phones), the letters were
   stuck invisible forever. Popping in via transform only means the worst
   case is "static text, no bounce" instead of "nothing visible at all." */
@keyframes brand-pop {
  0% { transform: scale(0.7) translateY(6px) rotate(-10deg); }
  65% { transform: scale(1.15) translateY(-3px) rotate(6deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}
@keyframes brand-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.18); }
  60% { transform: translateY(1px) scale(0.95); }
}
/* A small mark that idles quietly, then wakes up on hover — the résumé's
   version of the main site's blinking wordmark accent. */
.rail__brand-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-600);
  animation: brand-dot-idle 2.6s ease-in-out infinite;
}
.rail__brand:hover .rail__brand-dot { animation: brand-dot-spin 0.6s var(--ease); }
@keyframes brand-dot-idle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes brand-dot-spin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.6) rotate(180deg); background: var(--brass-500); }
  100% { transform: scale(1) rotate(360deg); }
}

.rail__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
}
.rail__burger span {
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  display: block;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.75rem;
}

.rail__link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.42rem 0.45rem;
  border-radius: 4px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.rail__num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.rail__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.rail__bottom { margin-top: 2rem; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.theme-toggle__track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  position: relative;
  flex: none;
}
.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brass-500);
  transition: transform 0.25s var(--ease);
}
:root[data-theme="dark"] .theme-toggle__thumb { transform: translateX(16px); }

/* ===== Layout ===== */
main {
  margin-left: var(--rail-w);
  padding: 0 2rem;
}
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.75rem 0;
  border-top: 1px solid var(--border);
}
#intro.section { border-top: none; padding-top: 2.5rem; }

.section__head { margin-bottom: 1.35rem; }
.section__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brass-500);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.75rem);
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.section__kicker {
  color: var(--ink-700);
  margin-top: 0.35rem;
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ===== Hero ===== */
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-500);
  margin-bottom: 0.65rem;
}
.hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.75rem + 1.6vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
  letter-spacing: -0.03em;
}
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The visible name is a row of per-letter spans (aria-hidden, since the
   u-sr-only span above carries the real text for screen readers) that pop in
   with a staggered spring — the "characters animation" for the résumé's own
   entrance, the same idea as the rail mark but bigger. Pure CSS, so it runs
   off the browser's own compositor rather than a JS animation loop. */
.hero__name-chars .char {
  display: inline-block;
  animation: name-pop 0.7s var(--ease) both;
  animation-delay: calc(var(--i) * 0.045s + 0.1s);
}
.hero__name-chars .char.space { width: 0.28em; }
/* Same fix as brand-pop above: transform-only, opacity never touched, so a
   failed/blocked animation leaves readable static text instead of a blank
   name — this was very likely the actual cause of "can't see anything" on
   the professional-background page on mobile. */
@keyframes name-pop {
  0% { transform: translateY(14px) scale(0.85) rotate(-6deg); }
  60% { transform: translateY(-3px) scale(1.04) rotate(2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.hero__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  color: var(--teal-600);
  margin-top: 0.45rem;
}

.signal { width: 100%; height: auto; max-width: 360px; margin: 1.35rem 0; display: block; }
.signal__trace {
  fill: none;
  stroke: var(--brass-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: draw 1.4s var(--ease) 0.2s forwards;
}
.js .signal__trace {
  animation: none;
}
.signal__ring {
  fill: none;
  stroke: var(--brass-500);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 500px 80px;
  animation: pulse 2.6s var(--ease) 1.4s infinite;
}
.signal__ring--2 { animation-delay: 2.7s; }
.signal__node {
  fill: var(--brass-500);
  opacity: 0;
  animation: appear 0.4s var(--ease) 1.5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes pulse {
  0% { opacity: 0.55; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .signal__trace { stroke-dashoffset: 0; }
  .signal__ring { display: none; }
  .signal__node { opacity: 1; }
}

.hero__lede { max-width: 58ch; color: var(--ink-700); font-size: 0.92rem; line-height: 1.55; }
.hero__lede strong { color: var(--ink-900); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
}
.btn--primary { background: var(--brass-500); color: var(--paper-0); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { border-color: var(--border); color: var(--ink-900); }
.btn--ghost:hover { border-color: var(--brass-500); color: var(--brass-500); transform: translateY(-2px); }
/* The download button gets its own bouncier hover than the plain ghost
   buttons — a little squash-and-stretch plus the arrow hopping downward. */
.btn--resume:hover { animation: btn-squash 0.4s var(--ease); }
@keyframes btn-squash {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-3px) scale(1.06, 0.94); }
  55% { transform: translateY(1px) scale(0.97, 1.04); }
  100% { transform: translateY(-2px) scale(1, 1); }
}
.btn--resume__arrow { display: inline-block; margin-left: 0.15rem; }
.btn--resume:hover .btn--resume__arrow { animation: arrow-hop 0.6s var(--ease) infinite; }
@keyframes arrow-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-600);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.1rem;
  display: inline-block;
  transition: opacity 0.2s var(--ease);
}
.link-arrow:hover { opacity: 0.7; }

/* ===== Timeline ===== */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1.5px;
  background: var(--border);
}
.timeline__item {
  position: relative;
  padding-bottom: 1.85rem;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute;
  left: -1.75rem;
  top: 0.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-0);
  border: 2px solid var(--brass-500);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}
.timeline__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.timeline__org { color: var(--teal-600); margin-top: 0.1rem; font-size: 0.85rem; }
.timeline__list { margin-top: 0.55rem; display: flex; flex-direction: column; gap: 0.35rem; max-width: 58ch; }
.timeline__list li {
  padding-left: 1rem;
  position: relative;
  color: var(--ink-700);
  font-size: 0.86rem;
  line-height: 1.5;
}
.timeline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--ink-500);
}

/* ===== Venture ===== */
.venture {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--brass-500);
  border-radius: 6px;
  padding: 1.35rem 1.5rem;
}
.venture__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.venture__founded {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brass-500);
  margin-top: 0.35rem;
}
.venture__body { color: var(--ink-700); margin-top: 0.65rem; font-size: 0.86rem; line-height: 1.55; }
.venture__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: start;
  border-left: 1px solid var(--border);
  padding-left: 1.25rem;
}
.stat__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 0.68rem;
  color: var(--ink-500);
  margin-top: 0.15rem;
  max-width: 16ch;
}

/* ===== Skills ===== */
.skill-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.75rem;
}
.skill-group__title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.55rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  font-family: var(--font-mono);
  border-radius: 3px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* ===== Credentials ===== */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}
.credential-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}
.credential-card--education { border-color: var(--brass-500); }
.credential-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-500);
}
.credential-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 0.35rem;
}
.credential-card__org, .credential-card__date { color: var(--ink-700); font-size: 0.8rem; margin-top: 0.2rem; }
.credential-card__desc { color: var(--ink-700); font-size: 0.78rem; line-height: 1.5; margin-top: 0.45rem; }
.credential-card__list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.credential-card__list li {
  font-size: 0.78rem;
  color: var(--ink-700);
  padding-left: 0.75rem;
  position: relative;
}
.credential-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--ink-500);
}

/* ===== Project & Achievements ===== */
.project-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
}
.project-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.project-card__body { color: var(--ink-700); margin-top: 0.45rem; max-width: 58ch; font-size: 0.86rem; line-height: 1.55; }

.achievements { margin-top: 1.5rem; }
.achievements__title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.65rem;
}
.achievements__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
}
.achievements__list li {
  color: var(--ink-700);
  font-size: 0.82rem;
  padding-left: 0.85rem;
  position: relative;
  line-height: 1.45;
}
.achievements__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--teal-600);
}

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.contact-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  position: relative;
}
.contact-card__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.4rem;
}
.contact-card__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-card__value:hover { border-color: currentColor; color: var(--brass-500); }
.copy-btn {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
  border: 1px solid var(--border);
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.copy-btn:hover { color: var(--brass-500); border-color: var(--brass-500); }
.copy-btn.is-copied { color: var(--teal-600); border-color: var(--teal-600); }

/* ===== Footer ===== */
.footer {
  margin-left: var(--rail-w);
  padding: 1.75rem 2rem 2.5rem;
  max-width: calc(var(--content-max) + 4rem);
  color: var(--ink-500);
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===== Reveal on scroll — see resume-theme.css for visibility safety ===== */
.reveal { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .rail {
    position: fixed;
    /* Must reset `bottom`. The desktop rule is `inset: 0 auto 0 0`, so leaving
       bottom at 0 kept this pinned top-and-bottom — `height: auto` is ignored
       when both edges are set, leaving a full-height opaque panel at z-index
       100 that covered the entire page on every screen under 900px. */
    inset: 0 0 auto 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.25rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* Sole in-flow child — fill the bar so the burger sits at the far right. */
  .rail__top { flex: 1; }
  .rail__burger { display: flex; }
  .rail__nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--paper-0);
    flex-direction: column;
    margin-top: 0;
    padding: 1rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .rail__bottom { position: fixed; top: 14px; right: 60px; margin-top: 0; }
  .nav-toggle-input:checked ~ .rail .rail__nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-toggle-input:checked ~ .rail .rail__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .rail .rail__burger span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .rail .rail__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  main, .footer { margin-left: 0; padding-left: 1.25rem; padding-right: 1.25rem; }
  main { padding-top: 64px; }
  .section { padding: 2.25rem 0; }
  #intro.section { padding-top: 2rem; }
}

@media (max-width: 640px) {
  .venture { grid-template-columns: 1fr; }
  .venture__stats { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
  .skill-groups { grid-template-columns: 1fr; }
  .achievements__list { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
}