/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:     #121110;
  --bg-2:   #1a1917;
  --bg-3:   #201e1b;
  --fg:     #efe9dc;
  --fg-2:   #a39d8f;
  --muted:  #94907f;
  --rule:   #2b2925;
  --accent: #d7a85a;
  --bg-bright: #f0e8d5;

  /* Typography — font stacks */
  --font-sans:    'Libre Franklin', 'Helvetica Neue', sans-serif;
  --font-body:    'Eczar', 'Georgia', serif;

  /* Typography — display variant */
  --display-weight-lg: 300;
  --display-weight-md: 400;
  --display-style:     normal;
  --display-spacing:   -0.01em;

  /* Typography — scale */
  --text-xs:   clamp(9px,  0.7vw, 11px);
  --text-sm:   clamp(10px, 0.8vw, 12px);
  --text-base: clamp(12px, 1vw,   16px);
  --text-md:   clamp(15px, 1.3vw, 19px);
  --text-nav:  clamp(11px, 0.85vw, 13px);
  --text-card: clamp(11px, 0.9vw,  14px);

  /* Typography — heading scale */
  --fs-h1: clamp(54px, 8vw, 132px);
  --fs-h2: clamp(24px, 6vw, 64px);
  --fs-h3: clamp(36px, 4.5vw, 48px);
  --fs-h4: clamp(20px, 2.5vw, 32px);
  --fs-h5: clamp(16px, 1.8vw, 24px);
  --fs-h6: clamp(13px, 1.4vw, 18px);

  /* Typography — line heights */
  --leading-none:    0.95;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.55;
  --leading-body:    1.6;
  --leading-relaxed: 1.65;

  /* Typography — letter spacing */
  --tracking-widest: 0.14em;
  --tracking-wider:  0.12em;
  --tracking-wide:   0.06em;
  --tracking-normal: 0.02em;
  --tracking-tight:  -0.02em;
  --tracking-tighter: -0.025em;

  /* Spacing */
  --px:         56px;   /* horizontal page padding */
  --section-py: 140px;  /* section vertical padding */
  --col:        240px;  /* left label column width */
  --gap:        32px;   /* standard grid gap */
  --gap-sm:     20px;   /* tighter grid gap */

  /* Padding scale (multiples of 8px) */
  --pad-xs: 8px;   /*  1×8 */
  --pad-sm: 16px;  /*  2×8 */
  --pad-md: 32px;  /*  4×8 */
  --pad-lg: 64px;  /*  8×8 */
  --pad-xl: 96px;  /* 12×8 */

  /* Motion */
  --duration-fast: .2s;
  --duration-base: .3s;
  --duration-slow: .7s;
  --ease:          cubic-bezier(.2,.7,.2,1);
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ────────────────────────────────────────────────────────────────── */
html {
  background: var(--bg);
}

body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  max-width: 1800px;
  margin-inline: auto;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.mono { font-family: var(--font-sans); }

/* ── SKIP LINK ───────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--pad-sm);
  left: var(--px);
  z-index: 9999;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: var(--pad-xs) var(--pad-sm);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  translate: 0 -8px;
  transition: opacity var(--duration-fast), translate var(--duration-fast);
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

main:focus-visible { outline: none; }

/* ── FOCUS ───────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.nav-hud {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  transition: background var(--duration-base), box-shadow var(--duration-base);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pad-md) - var(--pad-xs)) var(--px);
  transition: opacity var(--duration-base) var(--ease);
}

.nav-mark {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--duration-base);
}

.nav-logo {
  height: 42px;
  width: auto;
  display: block;
  position: relative;
  top: 2px;
  transition: height var(--duration-base) var(--ease), opacity var(--duration-base);
}


.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.nav-links a:hover,
.nav-links a.active { color: var(--fg); }

.nav-sep {
  display: block;
  width: 1px;
  height: 16px;
  background: var(--rule);
}

.nav-cta {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  padding: var(--pad-xs) var(--pad-sm);
  text-decoration: none;
  border-radius: 10px;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-cta:hover { background: var(--accent); }
.nav-cta .arr { display: inline-block; transform: rotate(-45deg); transition: transform var(--duration-base) var(--ease); }
.nav-cta:hover .arr { transform: rotate(-45deg) translate(3px, -3px); }

/* ── NAV COLLAPSED STATE ─────────────────────────────────────────────────── */
.nav-hud.nav--collapsed {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.nav-hud.nav--collapsed .nav-inner {
  opacity: 0;
  pointer-events: none;
}

/* ── FLOATING MENU PILL ──────────────────────────────────────────────────── */
.nav-float {
  display: none;
  position: fixed;
  top: var(--pad-md);
  right: var(--px);
  z-index: 300;
  align-items: center;
  background: var(--fg);
  color: var(--bg);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: calc(var(--pad-xs) + var(--pad-xs) / 4) calc(var(--pad-sm) - var(--pad-xs) / 4);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: background var(--duration-fast);
}

.nav-float:hover { background: var(--accent); color: var(--bg); }

.nav-float.is-visible {
  display: flex;
}

/* ── FLOATING PANEL ──────────────────────────────────────────────────────── */
.nav-float-panel {
  position: fixed;
  top: calc(var(--pad-md) + 42px + 8px);
  right: var(--px);
  z-index: 299;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--pad-md);
  display: flex;
  flex-direction: column;
  gap: var(--pad-sm);
  min-width: 180px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.nav-float-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-float-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  gap: var(--pad-sm);
}

.nav-float-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.nav-float-links a:hover,
.nav-float-links a.active { color: var(--fg); }

.nav-float-cta {
  margin-top: var(--pad-xs);
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.nav-float-cta:hover { color: var(--accent); }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100vh - var(--nav-height, 76px));
}


/* ── HERO SHAPES ─────────────────────────────────────────────────────────── */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  animation: hs-appear 1.6s ease-out .3s both;
}

@keyframes hs-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hs {
  position: absolute;
  color: var(--accent);
  will-change: transform;
}

/* positions, sizes, opacities, animations */
.hs-1  { width: 110px; height: 110px; top: 11%;  right:  8%;  opacity: .40; animation: hs-drift-a 9s   ease-in-out infinite; }
.hs-2  { width:  28px; height:  28px; top: 22%;  left:  38%;  opacity: .55; animation: hs-spin   14s  linear     infinite; }
.hs-3  { width:  44px; height:  40px; top: 40%;  right: 21%;  opacity: .35; animation: hs-drift-b 7.5s ease-in-out infinite;        color: var(--fg-2); }
.hs-4  { width:  80px; height:  24px; top: 17%;  right: 33%;  opacity: .30; animation: hs-drift-c 11s  ease-in-out infinite;        color: var(--fg-2); }
.hs-5  { width:  44px; height:  14px; top: 56%;  right: 10%;  opacity: .60; animation: hs-drift-a  8s  ease-in-out infinite    1s; }
.hs-6  { width:  34px; height:  34px; top:  8%;  left:  22%;  opacity: .35; animation: hs-spin   18s  linear     infinite reverse; color: var(--fg-2); }
.hs-7  { width:  70px; height:  56px; top: 44%;  left:  56%;  opacity: .32; animation: hs-drift-b 10s  ease-in-out infinite    2s; }
.hs-8  { width:  72px; height:  22px; top: 65%;  left:  18%;  opacity: .25; animation: hs-drift-c 8.5s ease-in-out infinite  1.5s; color: var(--fg-2); }
.hs-9  { width:  24px; height:  24px; top:  5%;  right: 27%;  opacity: .35; animation: hs-spin   22s  linear     infinite;         color: var(--fg-2); }
.hs-10 { width:  14px; height:  14px; top: 32%;  right:  6%;  opacity: .65; animation: hs-pulse   4s  ease-in-out infinite; }
.hs-11 { width:  16px; height:  42px; top: 50%;  left:   8%;  opacity: .25; animation: hs-drift-a 11s  ease-in-out infinite    3s; color: var(--fg-2); }
.hs-12 { width:  40px; height:  40px; top: 73%;  right: 30%;  opacity: .32; animation: hs-drift-b  9s  ease-in-out infinite   .5s; }

@keyframes hs-drift-a {
  0%, 100% { translate: 0 0; }
  40%       { translate:  4px -14px; }
  70%       { translate: -3px  -9px; }
}

@keyframes hs-drift-b {
  0%, 100% { translate: 0 0; }
  50%       { translate: -7px -11px; }
}

@keyframes hs-drift-c {
  0%, 100% { translate: 0 0; }
  30%       { translate:  6px  -8px; }
  70%       { translate: -5px -13px; }
}

@keyframes hs-spin {
  to { rotate: 360deg; }
}

@keyframes hs-pulse {
  0%, 100% { scale: 1;   opacity: .45; }
  50%       { scale: 1.6; opacity: .65; }
}

@media (max-width: 600px) {
  .hs-4, .hs-7, .hs-8, .hs-11, .hs-12 { display: none; }
  .hs-num { font-size: clamp(64px, 18vw, 96px); }
}

.hero-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.hero-caption::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--fg-2);
  flex-shrink: 0;
}

h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

h1 em {
  font-style: normal;
  font-weight: 300;
  color: var(--accent);
}

h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h2 em {
  font-style: normal;
  color: var(--accent);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h5 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h5);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h6);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-2);
  max-width: 64ch;
}

.hero h1 {
  position: absolute;
  bottom: var(--pad-lg);
  left: var(--px);
  right: var(--px);
  max-width: 15ch;
}


.hero-sub {
  height: 100vh;
  overflow: hidden;
  padding: var(--pad-lg) var(--px);
  background: var(--bg);
  color: var(--fg);
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
}

.hs-col-left {
  display: flex;
  flex-direction: column;
  gap: var(--pad-sm);
}

.hs-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
  border-left: 1px solid var(--rule);
  padding-left: var(--pad-lg);
}

.hs-num {
  font-family: var(--font-sans);
  font-size: clamp(72px, 10vw, 140px);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--accent);
}

.hs-caption {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: 28ch;
  color: var(--fg-2);
}

.hs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pad-xs);
}

.hs-list li {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--fg-2);
  padding-left: 1.6em;
  position: relative;
}

.hs-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.label-key {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

/* ── PAGE HERO ───────────────────────────────────────────────────────────── */
.page-hero {
  padding: var(--section-py) var(--px) calc(var(--pad-xl) - var(--pad-sm));
  border-bottom: 1px solid var(--rule);
  position: relative;
}


.page-hero h1 em {
  font-style: italic;
  color: var(--accent);
}

/* ── BUTTON ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-card);
  background: var(--fg);
  color: var(--bg);
  border: none;
  padding: var(--pad-sm) var(--pad-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  transition: background var(--duration-fast);
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: 10px;
}

/* Size variants */
.btn--sm {
  gap: var(--pad-xs);
}

.btn--md {
  font-size: var(--text-card);
  padding: var(--pad-sm) var(--pad-sm);
  gap: var(--pad-xs);
}

.btn:hover { background: var(--accent); }
.btn .caret { opacity: 0.5; }
.btn .arr { display: inline-block; transition: transform var(--duration-base) var(--ease); }
.btn:not(.btn--secondary) .arr { transform: rotate(-45deg); }
.btn:not(.btn--secondary):hover .arr { transform: rotate(-45deg) translate(3px, -3px); }
.btn--secondary:hover .arr { transform: translateX(4px); }

/* Secondary variant */
.btn--secondary {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--rule);
}
.btn--secondary:hover {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg-2);
}

/* ── SECTION ─────────────────────────────────────────────────────────────── */
.section {
  position: relative;
  min-height: 100vh;

  height: 100vh;
  overflow: hidden;
  padding: var(--pad-lg) var(--px);
  background: var(--bg);
  transition: background 0.8s ease, color 0.8s ease;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-head {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--gap);
  margin-bottom: 56px;
  align-items: baseline;
}

.section-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}


.section-tag .accent { color: var(--accent); }

.section-head h2 {
  max-width: 20ch;
}

/* ── HOW ─────────────────────────────────────────────────────────────────── */

.work-stage {
  display: grid;
  width: 100%;
}

.work-h2,
.work-cards {
  grid-area: 1 / 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.work-h2 {
  align-self: center;
}

.work-h2.exit-up {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
}

.work-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  pointer-events: none;
}

.work-cards.is-active {
  pointer-events: auto;
}

.work-card-1,
.work-card-2 {
  opacity: 0;
  transform: translateY(30px);
}

.work-card-1.is-active,
.work-card-2.is-active {
  opacity: 1;
  transform: translateY(0);
}

.how-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: var(--px);
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-base), background var(--duration-base), opacity 0.5s ease, transform 0.5s ease;
}

.how-card .card-foot {
  margin-top: auto;
}

.how-card:hover {
  border-color: var(--fg-2);
  background: var(--bg-3);
}

.how-card .lab {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.how-card h3 {
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: var(--leading-tight);
  letter-spacing: var(--display-spacing);
  margin-bottom: 14px;
}


.divider {
  height: 1px;
  background: var(--rule);
  margin: 24px 0;
}

.how-card .foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── BRING ───────────────────────────────────────────────────────────────── */
#experience {
  height: 100vh;
  overflow: hidden;
  padding: 48px var(--px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#experience .section-head {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

#experience .section-head h2 {
  padding-bottom: var(--pad-md);
}

#experience .bring-row {
  padding: calc(var(--pad-sm) - var(--pad-xs) / 4) 0;
  align-items: center;
}

#experience .bring-n {
  font-size: 52px;
}

#experience .bring-t {
  font-size: 22px;
}

.bring {}

.bring-row {
  display: grid;
  grid-template-columns: 120px 1fr 2fr 120px;
  gap: var(--gap);
  padding: calc(var(--pad-md) + var(--pad-xs)) 0;
  align-items: baseline;
  cursor: default;
  position: relative;
}

.bring-row::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--px));
  right: calc(-1 * var(--px));
  top: 0;
  bottom: 0;
  background: var(--bg-2);
  opacity: 0;
  transition: opacity var(--duration-base);
  z-index: -1;
}

.bring-row:hover::before { opacity: 1; }

.bring-n {
  font-family: var(--font-sans);
  font-weight: var(--display-weight-lg);
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.bring-t {
  font-family: var(--font-sans);
  font-weight: var(--display-weight-md);
  font-size: 26px;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}


.bring-tok {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: right;
}

.bring-tok::before { content: '// '; opacity: 0.5; }

/* ── ABOUT ───────────────────────────────────────────────────────────────── */
#about-me {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.about-stage {
  display: grid;
  width: 100%;
}

.about-h2,
.about-main,
.about-career {
  grid-area: 1 / 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.about-h2 {
  align-self: center;
}

.about-h2.exit-up,
.about-main.exit-up {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
}

.about-main {
  opacity: 1;
  transform: translateY(0);
}

.about-main.is-hidden {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.about-career {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.about-career.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.about-body { max-width: 62ch; }

.about-body p {
  line-height: var(--leading-relaxed);
  margin-bottom: var(--gap-sm);
}

.timeline {
  margin-top: 56px;
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--gap);
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  padding: var(--pad-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--text-card);
}

.timeline-year    { color: var(--accent); }
.timeline-role    { color: var(--fg); }
.timeline-company { color: var(--muted); font-size: var(--text-sm); }

/* ── WORK ────────────────────────────────────────────────────────────────── */

/* ── WORK NOTE ───────────────────────────────────────────────────────────── */
.work-note {
  padding: calc(var(--pad-lg) - var(--pad-xs)) var(--px);
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--rule);
}

.work-note .label-key {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--pad-xs);
}

.work-note p {
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

.work-note p a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dashed var(--fg-2);
  padding-bottom: calc(var(--pad-xs) / 8);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.work-note p a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── FINAL ───────────────────────────────────────────────────────────────── */
.final {
  padding: calc(var(--pad-lg) * 2) var(--px) calc(var(--pad-xl) - var(--pad-sm));
  position: relative;
  min-height: 100vh;
}

.label-accent {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 72ch;
}

.label-accent::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.final h2 {
  font-size: clamp(56px, 7vw, 140px);
  max-width: 14ch;
}

.final-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: 40px;
}

/* ── FEATURED PROJECT ────────────────────────────────────────────────────── */

#latest-work .project-row {
  height: clamp(360px, 60vh, 640px);
}

.featured-project-ctas {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.project-title {
  font-size: clamp(22px, 2.4vw, 40px);
}

/* ── COPY EMAIL TOAST ────────────────────────────────────────────────────── */
.copy-toast {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.copy-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.copy-toast-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.copy-toast h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: #fff;
  text-align: center;
  max-width: 28ch;
  line-height: var(--leading-tight);
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer {
  padding: calc(var(--pad-md) - var(--pad-xs)) var(--px);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
}

footer > div:nth-child(2) { text-align: center; }
footer > div:nth-child(3) { text-align: right; }

.footer-linkedin {
  color: var(--muted);
  display: inline-flex;
  transition: color var(--duration-fast);
}
.footer-linkedin:hover { color: var(--fg); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* typography scale fix */
  h2 { font-size: clamp(28px, 7vw, 40px); }
  h3 { font-size: clamp(17px, 4vw, 22px); line-height: var(--leading-snug); }

  /* hero-sub: stack cols */
  .hero-sub         { grid-template-columns: 1fr; align-items: start; align-content: start; gap: var(--pad-sm); padding-top: var(--pad-lg); padding-bottom: var(--pad-md); }
  .hs-col-right     { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--pad-sm); gap: var(--pad-sm); }

  /* how cards: stack and fit in viewport */
  .work-cards       { grid-template-columns: 1fr; gap: var(--pad-sm); }
  #work             { padding: var(--pad-md) var(--px); }
  .how-card         { padding: var(--pad-md); }
  .how-card .lab    { margin-bottom: 12px; }
  .how-card h3      { margin-bottom: 8px; }
  .how-card .card-foot .divider { margin: 12px 0; }

  /* bring section: fit in viewport */
  #experience                { height: 100vh; overflow: hidden; padding: var(--pad-md) var(--px); }
  #experience .bring-row     { grid-template-columns: 48px 1fr; gap: var(--gap-sm); padding: var(--pad-xs) 0; }
  #experience .bring-n       { font-size: 24px; }
  #experience .bring-t       { font-size: 15px; }
  .bring-row p               { display: none; }
  .bring-tok                 { display: none; }

  .section-head     { grid-template-columns: 1fr; }

  .timeline         { grid-template-columns: 1fr; }
  .work-note        { grid-template-columns: 1fr; gap: 16px; }
  .timeline-item    { grid-template-columns: 80px 1fr; }
  .timeline-item .timeline-company { display: none; }

  .nav-inner { padding: var(--pad-md) var(--px) var(--pad-sm); }
  .nav-logo  { top: 0; }
  .nav-right { display: none; }
  .nav-float { display: flex; }
}

/* PASSWORD PROMPT UI */

/* Overlay */
.protect-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--pad-lg);
}

/* Container */
.protect-box {
  width: 100%;
  max-width: 520px; /* slightly larger to match your big type */
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
  background: var(--bg-3);
  border-radius: 10px;
  padding: var(--pad-lg);
}

/* Title */
.protect-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--display-weight-lg);
  letter-spacing: var(--display-spacing);
  line-height: var(--leading-tight);
  color: var(--fg);
}

/* Form */
.protect-form {
  display: flex;
  flex-direction: column;
  gap: var(--pad-sm);
}

/* Input */
.protect-input {
  width: 100%;
  padding: var(--pad-sm);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  border: 1px solid var(--rule);
  background: var(--bg-2);
  color: var(--fg);
}

/* Error state (restore) */
.protect-error {
  color: #b3261e;
  font-size: var(--text-md);
}

.protect-input.is-error {
  border-color: #b3261e;
}

@media (max-width: 600px) {

  .protect-overlay {

    padding: var(--pad-md);

    align-items: flex-start; /* avoids vertical squish */

  }

  .protect-box {

    max-width: none;

    width: 100%;

  }

  .protect-title {

    font-size: var(--fs-h3); /* slightly reduce for mobile readability */

  }

}