/* ==========================================================================
   Kenneth Dulfo — site layer
   Loaded after styles.css. The home view is built here; the case studies keep
   their own rules in styles.css and take the new faces and colours through
   the token bridge in section 2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --dark:        #181818;
  --dark-2:      #212121;
  --light:       #faf9f7;
  --light-2:     #efede8;

  --on-dark:       #faf9f7;
  --on-dark-soft:  rgba(250, 249, 247, 0.62);
  --on-dark-faint: rgba(250, 249, 247, 0.48);
  --on-light:      #2b2b2b;
  --on-light-soft: #5f5f5f;
  --on-light-faint:#6e6e6e;

  --line-dark:  rgba(250, 249, 247, 0.12);
  --line-light: rgba(24, 24, 24, 0.1);

  /* The one colour. Everything else is charcoal and paper. */
  --accent:     #1584ff;
  --live:       #6fe39a;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:      1120px;
  --wrap-wide: 1440px;
  --gutter:    clamp(20px, 5vw, 72px);
  --nav-h:     88px;
  /* The home page's one grid: a narrow rail for labels, numbers and years on
     the outer edge, then the content on a single inner edge. */
  --rail:     14rem;
  --rail-gap: clamp(32px, 7vw, 120px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Token bridge — the case studies were written against the old names.
   They read as light pages: paper ground, charcoal type.
   -------------------------------------------------------------------------- */
:root {
  --bg:           var(--light);
  --fg:           var(--on-light);
  --card:         #ffffff;
  --card-fg:      var(--on-light);
  --muted:        var(--light-2);
  --muted-fg:     var(--on-light-soft);
  --primary:      var(--dark);
  --primary-fg:   var(--light);
  --secondary:    var(--light-2);
  --secondary-fg: var(--on-light);
  --accent-fg:    var(--on-light);
  --border:       var(--line-light);
  --input-bg:     #ffffff;
  --ring:         var(--accent);
  --result:       var(--on-light);
  --beat:         var(--on-light-soft);
  --say-dim:      transparent;

  --font-display: var(--sans);
  --font-ui:      var(--sans);

  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 16px;
  --text-lg:   18px;

  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 48px -24px rgba(24, 24, 24, 0.25);

  --dock-h:     var(--nav-h);
  --dock-clear: calc(var(--nav-h) + 40px);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html { background: var(--dark); }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-light);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: none;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

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

.dot { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--wide { max-width: calc(var(--wrap-wide)); }

/* Small uppercase label above a section heading */
.label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h-lg,
.h-md,
.cta__title,
.job__role {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h-lg { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.18; }
/* Keeps a closing word with its accent dot when a heading is split by line */
.nowrap { white-space: nowrap; }
/* Headings break into even lines and paragraphs never end on one stranded
   word; narrow screens are where both show */
.h-lg, .h-md, .cta__title, .hero__title, .index__title { text-wrap: balance; }
.hero__intro, .index__desc, .about__lead, .about__quote p, .proof__lead { text-wrap: pretty; }
.h-md { font-size: clamp(24px, 2vw, 28px); line-height: 1.22; }

/* Hover never moves the words. Text links get an underline that draws in
   beneath them; buttons fill; the nav pill lights the word's own capsule. */
.link-text,
.footer__links a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; /* taste-skill-ignore: an underline that draws in, not a fill */
  transition: background-size 0.35s var(--ease), color 0.25s var(--ease);
}
a:hover > .link-text,
a:focus-visible > .link-text,
.footer__links a:hover,
.footer__links a:focus-visible { background-size: 100% 1px; }

/* Buttons: one shape, a pill with a hairline edge */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn--pill { border-color: var(--line-dark); }
.btn--pill:hover,
.btn--pill:focus-visible { border-color: var(--on-dark); background: var(--on-dark); color: var(--dark); }
.btn:active { transform: translateY(1px); }

/* Case-study buttons keep their own markup; this gives them the same shape */
.btn--primary { background: var(--dark); color: var(--light); border-color: var(--dark); }
.btn--primary:hover { background: #000; }
.btn--outline { border-color: var(--line-light); color: var(--on-light); }
.btn--outline:hover { border-color: var(--on-light); background: transparent; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}
.arrow-link .ic {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  transition: transform 0.35s var(--ease);
}
.arrow-link:hover .ic { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   4. Navigation: one dark pill floating at the bottom of the screen. Nothing
   sits over the top of the page, so the reel and the case studies open
   clean. It reads over light sections and dark ones alike.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  transform: translateX(-50%);
}
.nav__pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(24, 24, 24, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line-dark), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  color: var(--on-dark);
  white-space: nowrap;
}
.nav__pill > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--sans);
  color: var(--on-dark-soft);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__pill > a:hover,
.nav__pill > a.is-active { color: var(--on-dark); background: rgba(250, 249, 247, 0.08); }
.nav__pill > .brand { padding: 0 16px 0 14px; font: 600 17px/1 var(--serif); color: var(--on-dark); }
.nav__pill > .brand:hover { background: none; }

.brand {
  font: 600 22px/1 var(--serif);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Available for work: a live dot beside the name */
.nav__live {
  position: relative;
  top: -0.15em; /* centre on the capitals, not the line box */
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 9px; /* spacing lives here, not as a flex gap, so the "." hugs the name */
  border-radius: 50%;
  background: var(--live);
}
.nav__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Hero, with the first look at the work sliding over it
   -------------------------------------------------------------------------- */
/* Loading screen, as Onda does it: the dark of the reel, one quiet line, and
   the real percentage for slow connections. It exists only while script runs,
   and the failsafe clears it even if main.js never finishes. */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center; justify-items: center; gap: 28px;
  padding: 0 24px;
  background: var(--dark); color: var(--on-dark); text-align: center;
  animation: loader-failsafe 0.4s linear 12s forwards;
}
.loader__text { font: 400 clamp(18px, 1.5vw, 22px)/1.3 var(--serif); }
.loader__text em { font-style: italic; }
.loader__count { font: 400 13px/1 var(--sans); letter-spacing: 0.06em; color: var(--on-dark-faint); font-variant-numeric: tabular-nums; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* Showreel: full screen on arrival, then pinned (sticky) for one screen of
   scrolling while it shrinks to 40%. main.js sets --reel from 0 to 1. */
.reel { position: relative; height: 200vh; background: var(--dark); }
.reel__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.reel__frame {
  position: absolute;
  /* Nothing sits over the top of the page now (the nav is a pill at the
     bottom), so the frame is even on all sides */
  inset: 16px;
  overflow: hidden;
  background: var(--dark-2);
  transform: scale(calc(1 - 0.6 * var(--reel, 0)));
}
.reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__toggle {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 9px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(24, 24, 24, 0.6);
  color: var(--on-dark);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.reel__toggle:hover { border-color: currentColor; }
/* With the reel above it, the hero's arrival waits until it is reached */
.has-reel .hero:not(.is-in) .hero__title .line > span,
.has-reel .hero:not(.is-in) .hero__hello,
.has-reel .hero:not(.is-in) .hero__foot { animation-play-state: paused; }

.stack { position: relative; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 24px) 0 clamp(48px, 8vh, 88px);
  background: var(--dark);
  color: var(--on-dark);
}
.hero__inner { position: relative; }

.hero__hello {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--on-dark-soft);
}

.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(56px, 10.4vw, 158px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: inline-block; }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: clamp(32px, 5vh, 56px);
}
.hero__stats { display: flex; gap: clamp(32px, 4vw, 64px); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font: 500 clamp(40px, 3.5vw, 52px)/1 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.hero__intro {
  max-width: 34em;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--on-dark-soft);
}

/* Arrival: the headline rises line by line, then the rest settles in */
.js .hero__title .line > span { animation: rise 1.1s var(--ease) both; }
.js .hero__title .line:nth-child(2) > span { animation-delay: 0.08s; }
.js .hero__title .line:nth-child(3) > span { animation-delay: 0.16s; }
.js .hero__hello,
.js .hero__foot { animation: fade-up 1s var(--ease) 0.45s both; }
.js .nav { animation: nav-in 0.9s var(--ease) 0.9s both; }
@keyframes nav-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rise    { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.showcase {
  position: relative;
  z-index: 1;
  background: var(--light);
  padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 9vw, 128px);
  overflow: hidden;
}
.fan {
  --spread: 1;
  position: relative;
  max-width: 1440px;
  height: clamp(220px, 34vw, 500px);
  margin: 0 auto;
}
.fan__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 680px);
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--light-2);
  box-shadow: 0 30px 70px -30px rgba(24, 24, 24, 0.35);
  transform: translate(-50%, -50%);
  transition: box-shadow 0.4s var(--ease);
}
.fan__card video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.fan__card:hover video { transform: scale(1.03); }
.fan__card--left  { transform: translate(calc(-50% - 50% * var(--spread)), calc(-50% + 7%)) scale(0.82); }
.fan__card--right { transform: translate(calc(-50% + 50% * var(--spread)), calc(-50% + 7%)) scale(0.82); }
.fan__card--center { z-index: 2; box-shadow: 0 40px 90px -30px rgba(24, 24, 24, 0.45); }

/* On a screen big enough to hold it, the hero stays put and the work slides
   up over it. A phone just scrolls: a pinned hero taller than the screen
   would hide its own bottom half. */
@media (min-width: 900px) and (min-height: 620px) {
  .hero { position: sticky; top: 0; z-index: 0; }
  /* A held beat before the work arrives: the hero's own entrance takes about
     1.5s, and without this the panel covered it before it could be read. */
  .showcase { margin-top: 60vh; }
}

/* --------------------------------------------------------------------------
   6. About
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 11vw, 160px) 0;
  background: var(--dark);
  color: var(--on-dark);
}
.about .label { color: var(--on-dark-faint); }
/* Held in place while the story lights: main.js adds .about--pin where the
   whole section fits on screen, and scrolling moves on once it is lit. */
.about--pin { height: 220vh; padding: 0; }
.about--pin .about__pin { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; }
/* A narrow facts column beside one story set large. On narrow screens the
   facts drop under the story (document order). */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--rail-gap);
}
.about__label { grid-column: 1; grid-row: 1; }
.about__facts { grid-column: 1; grid-row: 2; }
.about__story {
  --lead: clamp(24px, 2.4vw, 36px);
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 64rem;
}

/* The portrait spans exactly the opening paragraph, however many lines it
   runs to: the grid row stretches the frame to the paragraph's height, and
   the margins trim it to the first line's capitals and the last baseline. */
.about__open {
  display: grid;
  grid-template-columns: clamp(200px, 19vw, 290px) minmax(0, 1fr);
  column-gap: calc(var(--lead) * 0.65);
}
/* Phones pin just the photo and story (main.js adds .about--lit); everywhere
   else these two wrappers step aside and the grid lays out as if they weren't there. */
.about__track, .about__lit { display: contents; }
/* The quote and the link run under both, from the photo's left edge */
.about__open > .about__quote,
.about__open > .arrow-link { grid-column: 1 / -1; justify-self: start; }
.about__cap {
  position: relative;
  margin: calc(var(--lead) * 0.24) 0 calc(var(--lead) * 0.36);
  overflow: hidden;
  background: var(--dark-2);
}
.about__cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about__lead {
  margin: 0;
  font: 350 var(--lead)/1.28 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--on-dark-soft);
}
.about__lead strong { font-weight: 400; color: var(--on-dark); }
/* Words light up as the story crosses the screen (main.js) */
.about__lead .word { opacity: 0.2; transition: opacity 0.35s ease; }
.about__lead .word.is-lit { opacity: 1; }
/* In his own voice: the opening mark hangs outside the text's left edge so
   the lines stay flush; both marks take the accent, like the heading dots. */
.about__quote {
  max-width: 30em;
  margin: 44px 0 0;
  font: italic 350 clamp(20px, 1.75vw, 26px)/1.5 var(--serif);
  font-optical-sizing: auto;
  color: var(--on-dark-soft);
}
.about__quote p { margin: 0; text-indent: -0.48em; }
/* Upright and heavier than the italic around them, or they vanish on dark */
.about__quote p::before,
.about__quote p::after { font-style: normal; font-weight: 650; color: var(--accent); }
.about__quote p::before { content: "\201C"; }
.about__quote p::after { content: "\201D"; }
.about__story .arrow-link { margin-top: 28px; }

.about__facts { display: grid; align-content: start; gap: 24px; margin: 0; }
.about__facts dt { margin-bottom: 6px; font-size: 13px; color: var(--on-dark-faint); }
.about__facts dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-dark); }

/* --------------------------------------------------------------------------
   7. Work
   -------------------------------------------------------------------------- */
.work {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 11vw, 160px) 0 clamp(120px, 14vw, 220px);
  background: var(--light);
  color: var(--on-light);
}
.work .label { color: var(--on-light-faint); }
.work__head { margin-bottom: clamp(56px, 7vw, 96px); }

/* The work index: one row per project, and every row shows the work. The
   number and the name share a baseline at the top; the cover fills the
   right-hand column; the title and description settle at the foot of the
   row, so the name's top and the cover's top line up, and the last line of
   text sits level with the cover's bottom edge. Pointing at a row plays its
   clip inside the cover (main.js). */
.index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line-light);
}
.index__link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 46%);
  grid-template-rows: auto 1fr;
  row-gap: clamp(16px, 1.6vw, 24px);
  align-items: baseline;
  padding: clamp(32px, 3.5vw, 52px) 0;
  border-top: 1px solid var(--line-light);
  color: var(--on-light);
  transition: opacity 0.3s var(--ease);
}
.index__num {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--on-light-faint);
}
.index__name {
  grid-column: 2;
  grid-row: 1;
  font: 350 clamp(40px, 6vw, 88px)/1 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  transition: transform 0.5s var(--ease);
}
.index__text {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  max-width: 32rem;
  padding-right: clamp(16px, 3vw, 48px);
}
.index__title { display: block; font: 400 clamp(18px, 1.5vw, 21px)/1.3 var(--serif); }
.index__desc {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-light-soft);
}
.index__media {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--light-2);
}
.index__media img,
.index__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index__media img { transition: transform 0.8s var(--ease); }
.index__media video { opacity: 0; transition: opacity 0.35s var(--ease); }
.index__link.is-playing .index__media video { opacity: 1; }
.index__link:hover .index__media img { transform: scale(1.03); }
/* Pointing at one row, or tabbing to it, quiets the rest */
.index:hover .index__link,
.index:has(.index__link:focus-visible) .index__link { opacity: 0.35; }
.index .index__link:hover,
.index .index__link:focus-visible { opacity: 1; }
.index__link:hover .index__name,
.index__link:focus-visible .index__name { transform: translateX(0.12em); }

/* The dark card under the index */
.proof {
  margin-top: clamp(64px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(32px, 4.5vw, 64px);
  border-radius: 10px;
  background: var(--dark);
  color: var(--on-dark);
}
.proof__side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.proof__label {
  margin: 0;
  font: 400 22px/1.2 var(--serif);
}
.proof__note { margin: 0; font-size: 14px; color: var(--on-dark-faint); }
.proof__lead {
  margin: 0;
  font: 400 clamp(28px, 3vw, 44px)/1.18 var(--serif);
  letter-spacing: -0.01em;
}
.proof__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.proof__figures dt {
  font: 500 32px/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
.proof__figures dd {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-dark-soft);
}

/* --------------------------------------------------------------------------
   8. Experience
   -------------------------------------------------------------------------- */
.resume {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 128px);
  background: var(--dark);
  color: var(--on-dark);
}
.resume .label { color: var(--on-dark-faint); }
.resume__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.resume__head .h-lg { max-width: 15em; }
.resume__head .btn { flex: none; }

.jobs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.job {
  display: grid;
  grid-template-columns: minmax(0, var(--rail)) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px var(--rail-gap);
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-dark);
}
.job__years {
  font-size: 14px;
  color: var(--on-dark-faint);
  font-variant-numeric: tabular-nums;
}
.job__role { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; }
.job__org { margin: 6px 0 0; font-size: 15px; color: var(--on-dark-soft); }
.job__note {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-dark-soft);
}

.resume__more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: clamp(56px, 6vw, 80px);
}
.resume__sub {
  margin: 0 0 12px;
  font: 400 20px/1.3 var(--serif);
}
.resume__more p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-dark-soft);
}

/* --------------------------------------------------------------------------
   9. Closing call to action and footer
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 11vw, 150px) 0;
  background: var(--dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark);
}
.cta__inner { text-align: center; }
.cta__title {
  max-width: 21em;
  margin: 0 auto;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.28;
}
.cta__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin-top: 40px;
}

/* One line of the name, wider than any screen. main.js loops it; without
   script it simply sits there, cropped by the edge. */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(24px, 4vw, 56px) 0;
  background: var(--dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__group > span {
  padding-right: 0.5em;
  font: 300 clamp(88px, 15vw, 240px)/1 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.footer {
  position: relative;
  z-index: 1;
  /* The bottom clears the nav pill, so the last line is never under it */
  padding: 56px 0 112px;
  background: var(--dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__links { display: flex; gap: 30px; font-size: 15px; }
.footer__links a { color: var(--on-dark-soft); }
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--on-dark); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 14px;
  color: var(--on-dark-soft);
}
.footer__bottom a:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   10. Scroll reveal (timing; the observer lives in main.js)
   -------------------------------------------------------------------------- */
html:not(.js) .reveal { opacity: 1; transform: none; }
.reveal {
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* --------------------------------------------------------------------------
   11. Case studies — the same faces on a paper page
   -------------------------------------------------------------------------- */
body.is-case-study { background: var(--light); }
.cs__head { padding-top: clamp(64px, 8vw, 112px); }
.cs__title,
.prose h2,
.next-project__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cs__title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; }
.prose h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; }
.cs__sub { color: var(--on-light-soft); font-weight: 300; }
.cs__meta { border-color: var(--line-light); }
.card { box-shadow: none; }
.chip { border-radius: 999px; }

/* --------------------------------------------------------------------------
   12. Tablet and phone
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .job { grid-template-columns: 8rem minmax(0, 1fr); }
  .job__note { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --nav-h: 68px; }

  .hero__foot { grid-template-columns: 1fr; gap: 32px; }

  .about__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .about__label, .about__story, .about__facts { grid-column: auto; grid-row: auto; }
  .about__story { --lead: clamp(22px, 5.6vw, 28px); }
  /* The facts read as a short spec sheet: label left, value right */
  .about__facts { gap: 0; margin-top: 48px; }
  .about__facts > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line-dark);
  }
  .about__facts dt { margin: 0; }

  .proof { grid-template-columns: 1fr; }
  .proof__figures { grid-template-columns: 1fr; gap: 24px; }

  .resume__head { flex-direction: column; align-items: flex-start; }
  .resume__more { grid-template-columns: 1fr; gap: 28px; }

  .footer__top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  /* No room to set text beside it: the portrait leads the story full width */
  .about__open { grid-template-columns: minmax(0, 1fr); }
  .about__open > .about__quote, .about__open > .arrow-link { grid-column: auto; }
  .about__cap { width: min(70%, 18rem); aspect-ratio: 4 / 5; margin: 0 0 28px; }
  /* Held at the middle of the screen for a screen of scrolling while the words
     light, as on desktop. main.js measures the pair into --story, so the frame
     is exactly their height and nothing opens up above or below them. */
  .about--lit .about__track { display: block; height: calc(var(--story) + 110svh); }
  .about--lit .about__lit { position: sticky; top: calc((100svh - var(--story)) / 2); display: block; }
  .reel__frame { inset: 8px; }
  /* As Onda does: the name and the two links that matter; the rest is a scroll away */
  .nav { bottom: 14px; }
  .nav__pill > .nav__extra { display: none; }
  /* The nav pill takes the bottom of a phone screen, so the toggle goes up top */
  .reel__toggle { top: 16px; right: 16px; bottom: auto; left: auto; }
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 72px); }
  .hero__stats { gap: 36px; }
  .fan__card { width: 70vw; }
  .fan { height: 54vw; }
  .job { grid-template-columns: 1fr; gap: 8px; }
  .job__note { grid-column: auto; margin-top: 6px; }
  .footer__links { flex-wrap: wrap; gap: 18px 24px; }
}

/* The smallest phones (320px): a little less air so the pill keeps its margins */
@media (max-width: 360px) {
  .nav__pill > a { padding: 0 11px; }
  .nav__pill > .brand { padding: 0 12px 0 11px; font-size: 16px; }
}

/* No room beside it, or no pointer: each row stacks, the cover first, then
   the number and name, then the words. Nothing is dimmed. */
@media (max-width: 860px), (hover: none) {
  .index__link { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .index__media { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
  .index__num, .index__name { grid-row: 2; }
  .index__text { grid-row: 3; align-self: auto; padding-right: 0; }
  .index__desc { margin-top: 10px; }
  .index:hover .index__link { opacity: 1; }
}

/* Touch: every control a fingertip can land on is at least 44px, rows answer
   a press, and form fields stay at 16px so iOS does not zoom when one is
   tapped. Scoped to touch so the desktop layout is untouched. */
@media (pointer: coarse) {
  .brand { padding: 11px 0; }
  .nav__pill > a { min-height: 44px; }
  .reel__toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; }
  .arrow-link { min-height: 44px; }
  .footer__links a,
  .footer__bottom a { padding: 11px 0; }
  .rail__btn { width: 44px; height: 44px; }
  .field input,
  .field textarea { font-size: 16px; }
}
@media (hover: none) {
  .index__link:active { opacity: 0.6; transition-duration: 0s; }
}

/* Lenis, from its dist/lenis.css: the parts this site relies on */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__title .line > span,
  .js .hero__hello,
  .js .hero__foot,
  .js .nav { animation: none; }
  .nav__live::after { animation: none; }
  .link-text, .footer__links a { transition: none; }
  .reveal { transform: none; transition: opacity 0.3s; }
  .fan { --spread: 1 !important; }
  .fan__card video { transition: none; }
  .reel { height: auto; }
  .reel__pin { position: relative; }
  .index__link, .index__name, .index__media img { transition: none; }
}