/* ==========================================================================
   THEO VALVIS — palette
   Three grounds: marble (default), sand (warm/intimate), aegean (deep band).
   A band re-points the same token names, so components adapt with no new rules.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ palette
     Grey / navy / dark blue / white / blue.

     The page alternates LIGHT and DARK grounds so sections separate hard:
       default ground .......... white          (About, More Work)
       .band--sand ............. navy           (Selected Work)
       .band--deep ............. dark blue      (Contact, footer)

     Every ground re-points the SAME token names, so components invert
     automatically. Previous palettes: /tmp/style.pre-contrast.css (navy-only)
     and /tmp/style.pre-dark.css (original warm marble).                    */

  /* Ground 1 — white */
  --marble:     #FFFFFF;
  --ink:        #FFFFFF;
  --charcoal:   #F1F5F9;   /* raised card */
  --charcoal-2: #E2E8F0;
  --hairline:   #CBD5E1;   /* grey rules */

  /* Type on white */
  --paper:      #0F2540;   /* navy headings and body */
  --paper-dim:  #3E5266;
  --muted:      #55697E;

  /* Accents */
  --coral:      #0B5FA5;   /* blue — the action colour on light grounds */
  --coral-soft: rgba(11, 95, 165, 0.10);
  --on-accent:  #FFFFFF;   /* label colour on a filled accent button */
  --scrim:      rgba(255, 255, 255, 0.93);
  --turquoise:  #0E7C74;
  --aegean:     #071426;
  --olive:      #4E6440;

  /* Ground 2 — soft grey (plain .band, e.g. Selected Work).
     Light throughout, with a single dark anchor at the close: an
     executive scans a calm page faster than an alternating one.        */
  --navy:        #EEF2F7;
  --navy-raised: #FFFFFF;   /* cards lift white off the grey */
  --navy-line:   #D3DDE8;
  --navy-paper:  #0F2540;
  --navy-dim:    #3E5266;
  --navy-muted:  #55697E;
  --navy-blue:   #0B5FA5;

  /* Ground 3 — grey (.band--sand, e.g. More Work) */
  --sand:        #DCE4EE;
  --sand-raised: #FFFFFF;   /* cards lift white off the grey */
  --sand-line:   #C7D4E1;
  --sand-paper:  #0F2540;
  --sand-dim:    #3E5266;
  --sand-muted:  #4C6076;
  --sand-coral:  #0B5FA5;
  --sand-turq:   #0E7C74;

  /* Ground 3 — dark blue */
  --deep:        #071426;
  --deep-raised: #14293F;
  --deep-line:   #26405C;
  --deep-paper:  #FFFFFF;
  --deep-dim:    #D3DFE9;
  --deep-muted:  #9FB3C4;
  --deep-coral:  #5AB8F0;
  --deep-turq:   #3FBFB2;

  /* ------------------------------------------------------------ typefaces
     To read the site in a serif instead of a sans, swap the --body line for
     one of the alternates below. Only one --body line may be active.

     Recommended serif (Georgia first): designed for screens, tall x-height,
     sturdy strokes, installed everywhere. Times New Roman sits in the stack
     as a fallback, so you get it if Georgia is somehow missing.
       --body: Georgia, "Times New Roman", Times, serif;

     Times New Roman forced, if you want to compare directly:
       --body: "Times New Roman", Times, Georgia, serif;

     Note: Times was cut for 1930s newspaper columns in print. On screen at
     body sizes it renders thinner and narrower than Georgia, which is why
     Georgia leads the recommended stack. Try both and keep what you prefer.  */
  --display: "Fraunces", Georgia, serif;
  --body:    "Public Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;
  --radius: 3px;
}

/* Plain .band (no modifier) sits one step down from white so adjacent
   sections never share a ground. White -> grey -> navy -> dark blue. */
.band:not(.band--sand):not(.band--deep) {
  --ink:        var(--navy);
  --charcoal:   var(--navy-raised);
  --charcoal-2: #234461;
  --hairline:   var(--navy-line);
  --paper:      var(--navy-paper);
  --paper-dim:  var(--navy-dim);
  --muted:      var(--navy-muted);
  --coral:      var(--navy-blue);
  --coral-soft: rgba(11, 95, 165, 0.10);
  --on-accent:  #FFFFFF;
  --scrim:      rgba(238, 242, 247, 0.93);
  --turquoise:  #0E7C74;
  background: var(--navy);
  color: var(--navy-paper);
}

.band--sand {
  --ink:        var(--sand);
  --charcoal:   var(--sand-raised);
  --charcoal-2: #DCE5EF;
  --hairline:   var(--sand-line);
  --paper:      var(--sand-paper);
  --paper-dim:  var(--sand-dim);
  --muted:      var(--sand-muted);
  --coral:      var(--sand-coral);
  --coral-soft: rgba(11, 95, 165, 0.10);
  --on-accent:  #FFFFFF;
  --scrim:      rgba(228, 235, 242, 0.93);
  --turquoise:  var(--sand-turq);
  background: var(--sand);
  color: var(--sand-paper);
}

.band--deep {
  --ink:        var(--deep);
  --charcoal:   var(--deep-raised);
  --charcoal-2: #1D3852;
  --hairline:   var(--deep-line);
  --paper:      var(--deep-paper);
  --paper-dim:  var(--deep-dim);
  --muted:      var(--deep-muted);
  --coral:      var(--deep-coral);
  --coral-soft: rgba(90, 184, 240, 0.16);
  --on-accent:  #08192B;
  --scrim:      rgba(7, 20, 38, 0.93);
  --turquoise:  var(--deep-turq);
  background: var(--deep);
  color: var(--deep-paper);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--marble);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.0rem + 0.35vw, 1.1875rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection { background: var(--coral); color: var(--ink); }

a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: var(--gutter); top: .6rem; }

/* ---------- Type scale ---------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem);
  line-height: 1.02;
}

h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

/* Small uppercase metadata — the editorial connective tissue */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.eyebrow--accent { color: var(--coral); }

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* Section numbering, editorial-menu style */
.section-mark {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
}
.section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.section-mark b { color: var(--coral); font-weight: 400; }

/* ---------- Layout -------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(4rem, 9vw, 8.5rem); background: var(--ink); }


/* Asymmetric two-column, the workhorse */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; align-items: center; }
  .split--reverse > *:first-child { order: 2; }
  .split--narrow { grid-template-columns: 4fr 8fr; align-items: start; }
}

/* ---------- Navigation ---------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--deep) 94%, transparent);
  color: var(--deep-paper);
  --paper: var(--deep-paper); --paper-dim: var(--deep-dim); --muted: var(--deep-muted);
  --hairline: var(--deep-line); --coral: var(--deep-coral); --turquoise: var(--deep-turq);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
}
.nav__id { text-decoration: none; line-height: 1.15; }
.nav__name {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__role {
  font-size: 0.8125rem;
  color: var(--deep-muted);
  letter-spacing: 0.04em;
}
.nav__links { display: none; gap: clamp(1rem, 2.2vw, 2.1rem); }
@media (min-width: 880px) { .nav__links { display: flex; } }
.nav__links a { color: var(--deep-dim); }
.nav__links a {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--paper); border-color: var(--turquoise); }

.nav__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; color: var(--deep-paper);
  border: 1px solid var(--deep-line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: .5rem .8rem; cursor: pointer;
}
@media (min-width: 880px) { .nav__toggle { display: none; } }

.nav__drawer { display: none; border-top: 1px solid var(--deep-line); }
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 880px) { .nav__drawer { display: none !important; } }
.nav__drawer a {
  display: block;
  padding: .95rem 0;
  border-bottom: 1px solid var(--deep-line);
  font-family: var(--mono);
  font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--deep-dim);
}

/* ---------- Hero ---------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem); }

.hero__status {
  font-family: var(--mono);
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.8rem;
}
.hero__status i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--turquoise);
  flex: none;
}
.hero__lede {
  color: var(--paper-dim);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  margin-top: 1.8rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono);
  font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: .85rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--hairline);
  color: var(--paper);
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { border-color: var(--paper-dim); }
.btn--primary { background: var(--coral); border-color: var(--coral); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.06); }
.band--deep .btn--primary { background: var(--coral); border-color: var(--coral); color: var(--on-accent); }

/* Portrait frame with restrained terracotta glow */
.portrait { position: relative; justify-self: center; width: 100%; max-width: 460px; }
.portrait::before {
  content: "";
  position: absolute; inset: 12% -14% -10% -14%;
  background: radial-gradient(60% 50% at 50% 60%, var(--coral-soft), transparent 72%);
  filter: blur(26px);
  z-index: 0;
}
.portrait__frame {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--charcoal);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__frame:hover { border-color: color-mix(in srgb, var(--turquoise) 50%, var(--hairline)); }

.portrait__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  padding: 1.5rem;
}

.portrait__overlay {
  position: absolute; z-index: 2;
  left: 0; bottom: 1.6rem;
  transform: translateX(-8%);
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--coral);
  border-radius: var(--radius);
  padding: .8rem 1.1rem;
  max-width: 78%;
}
.portrait__overlay span {
  display: block;
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.portrait__overlay b { font-weight: 500; font-size: 0.9rem; }

/* ---------- Signature builds --------------------------------------------- */

.build { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--hairline); }
.build:first-of-type { border-top: 0; }

.build__no {
  font-family: var(--mono);
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  display: flex; gap: .9rem; align-items: baseline; margin-bottom: 1rem;
}
.build__no b { color: var(--coral); font-weight: 400; }

.build__title { margin-bottom: .9rem; }
.build__title a { text-decoration: none; background-image: linear-gradient(var(--turquoise), var(--turquoise));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s; }
.build__title a:hover { background-size: 100% 1px; }

.build__problem { color: var(--paper-dim); }

.build__facts {
  display: grid; gap: .55rem 2rem; margin: 1.4rem 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .build__facts { grid-template-columns: 1fr 1fr; } }
.build__facts div { border-top: 1px solid var(--hairline); padding-top: .55rem; }
.build__facts dt {
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.build__facts dd { margin: .2rem 0 0; font-size: 1rem; }

.frame {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--charcoal);
  display: flex;
}
/* Never crop a project image - show the whole frame the person shot. */
.frame img {
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  background: var(--charcoal);
}
.frame:has(.frame__ph) { aspect-ratio: 4 / 3; }
.frame__ph {
  height: 100%; display: grid; place-content: center; text-align: center; gap: .4rem;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); padding: 1.5rem;
}

.status-pill {
  display: inline-block;
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: var(--radius);
  border: 1px solid var(--coral); color: var(--coral);
}

/* ---------- Panels — What I Bring ----------------------------------------- */

.panels { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .panels { grid-template-columns: repeat(3, 1fr); } }

.panel {
  background: var(--charcoal);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .25s;
}
.panel:hover { background: var(--charcoal-2); }
.panel h3 { font-size: 1.12rem; margin-bottom: .6rem; }
.panel p { font-size: 1rem; color: var(--paper-dim); margin: 0; max-width: 60ch; line-height: 1.6; }
.panel__mark { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; display: block; }

/* The emphasised panel spans wider and gets the accent */
.panel--feature { border-left: 2px solid var(--coral); }
@media (min-width: 700px)  { .panel--feature { grid-column: span 2; } }
@media (min-width: 1080px) { .panel--feature { grid-column: span 3; } }
.panel--feature h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); }
.panel--feature .quote {
  font-family: var(--display); font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  line-height: 1.45; color: var(--paper); margin: 1rem 0 0; max-width: 58ch;
}
.panel__list { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.panel__list li { position: relative; padding-left: 1.1rem; font-size: 0.98rem; color: var(--paper-dim); }
.panel__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--coral); }

/* ---------- Journey timeline ---------------------------------------------- */

.journey { max-width: 780px; margin-inline: auto; }
.journey__item { position: relative; padding: 0 0 2.6rem 2rem; border-left: 1px solid var(--hairline); }
.journey__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.journey__item::before {
  content: ""; position: absolute; left: -4px; top: .45rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--coral);
}
.journey__item:hover::before { background: var(--turquoise); border-color: var(--turquoise); }
.journey__when { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.journey__place { font-family: var(--display); font-size: 1.35rem; margin: .3rem 0 .5rem; }
.journey__body { color: var(--paper-dim); font-size: 1rem; margin: 0; line-height: 1.6; }

/* Greek meander — used exactly once, as a section divider */
.meander { display: block; width: 100%; max-width: 260px; height: 14px; margin: 0 auto; opacity: .5; }
.meander path { stroke: var(--coral); stroke-width: 1.4; fill: none; }

/* ---------- Approach ------------------------------------------------------ */

.approach__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.approach__list li {
  border-top: 1px solid var(--hairline);
  padding: 1rem 0 1rem 2.4rem;
  position: relative;
  color: var(--paper-dim);
}
.approach__list li::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  position: absolute; left: 0; top: 1rem;
  font-family: var(--mono); font-size: 1.0rem; color: var(--coral);
}
.approach__list { counter-reset: step; }

/* ---------- Case study (recipe movements) --------------------------------- */

.movement { border-top: 1px solid var(--hairline); padding-block: clamp(1.8rem, 3.5vw, 3rem); }
.movement__label {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--coral); margin-bottom: .35rem;
}
.movement__name { font-size: clamp(1.35rem, 1.15rem + .9vw, 2rem); margin-bottom: 1.1rem; }
.movement__body p:last-child { margin-bottom: 0; }
.movement__body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.movement__body ul li { position: relative; padding-left: 1.2rem; color: var(--paper-dim); }
.movement__body ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--coral);
}

.meta-grid { display: grid; gap: .6rem 2rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .meta-grid { grid-template-columns: 1fr 1fr; } }
.meta-grid > div { border-top: 1px solid var(--hairline); padding-top: .55rem; }
.meta-grid dt { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.meta-grid dd { margin: .25rem 0 0; font-size: 1rem; line-height: 1.5; }

.todo {
  display: inline-block;
  font-family: var(--mono); font-size: 0.8125rem;
  color: var(--coral);
  border: 1px dashed var(--coral);
  border-radius: var(--radius);
  padding: .15rem .5rem;
}

/* ---------- Cards (projects index) ---------------------------------------- */

.card-grid { display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .card-grid { grid-template-columns: 1fr 1fr; } }

.card { background: var(--charcoal); padding: clamp(1.5rem, 2.6vw, 2.2rem);
  text-decoration: none; display: block; transition: background .25s; }
.card:hover { background: var(--charcoal-2); }
.card h3 { font-size: 1.3rem; margin: .5rem 0 .6rem; }
.card p { font-size: 1rem; color: var(--paper-dim); margin: 0; max-width: 62ch; line-height: 1.6; }
.card__meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem;
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }

.group + .group { margin-top: clamp(2.5rem, 6vw, 4rem); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button {
  background: none; border: 1px solid var(--hairline); color: var(--paper-dim);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: .5rem .9rem; border-radius: var(--radius); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.filters button:hover { color: var(--paper); }
.filters button[aria-pressed="true"] { border-color: var(--coral); color: var(--coral); }

.empty { padding: 3rem 0; color: var(--muted); font-family: var(--mono); font-size: 1.0rem; }

/* ---------- Closing + footer ---------------------------------------------- */

.closing.band--deep { background: var(--aegean); }
.closing h2 { max-width: 16ch; }

.footer {
  padding-block: 2.4rem; background: var(--aegean); color: var(--deep-dim);
  --paper: var(--deep-paper); --paper-dim: var(--deep-dim); --muted: var(--deep-muted);
  --coral: var(--deep-coral); --turquoise: var(--deep-turq); --hairline: var(--deep-line);
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  align-items: baseline; font-family: var(--mono); font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer a { color: var(--paper-dim); text-decoration: none; }
.footer a:hover { color: var(--turquoise); }
.footer__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }

.banner {
  background: var(--coral); color: var(--on-accent);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: .55rem 1rem;
}

/* ---------- Motion — restrained ------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------- The Full Menu — every project, scannable ---------------------- */

.menu-section { background: var(--ink); }
.band--deep .menu__title { color: var(--deep-paper); }
.band--deep, .band--sand { border-block: 1px solid var(--hairline); }

.menu { margin-top: clamp(2rem, 4vw, 3rem); }
.menu__group + .menu__group { margin-top: 3rem; }

.menu__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no main go" ". tags go";
  gap: .25rem 1.1rem;
  align-items: start;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  transition: background .2s, padding .2s;
}
.menu__group .menu__row:last-child { border-bottom: 1px solid var(--hairline); }
.menu__row:hover { background: color-mix(in srgb, var(--paper) 4%, transparent); }

@media (min-width: 760px) {
  .menu__row {
    grid-template-columns: auto minmax(0,1fr) auto auto;
    grid-template-areas: "no main tags go";
    align-items: center;
    gap: 1.6rem;
  }
}

.menu__no {
  grid-area: no;
  font-family: var(--mono); font-size: 0.8125rem;
  color: var(--coral);
  min-width: 2ch;
}
.menu__main { grid-area: main; min-width: 0; }
.menu__title {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem);
  line-height: 1.2;
}
.menu__row:hover .menu__title { color: var(--paper); }
.menu__sub {
  display: block;
  font-size: .84rem; color: var(--muted);
  margin-top: .2rem;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.menu__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: .4rem; }
.menu__tags i {
  font-style: normal;
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .18rem .45rem;
  white-space: nowrap;
}
.menu__tags i.is-wip { color: var(--coral); border-color: var(--coral); }
.menu__go {
  grid-area: go;
  font-family: var(--mono); color: var(--muted);
  transition: transform .2s, color .2s;
}
.menu__row:hover .menu__go { color: var(--turquoise); transform: translateX(4px); }

/* ---------- Why a recipe -------------------------------------------------- */

.kitchen {
  border-block: 1px solid var(--hairline);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.kitchen__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  max-width: 22ch;
}
.kitchen__body {
  margin-top: 1.2rem;
  color: var(--paper-dim);
  max-width: 58ch;
}

/* Filter chips — count sits inside the chip, one row */
.filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.filters::-webkit-scrollbar { display: none; }
.filters button { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: .45rem; }
.filters button b { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.filters button[aria-pressed="true"] b { color: var(--coral); }
@media (min-width: 860px) { .filters { flex-wrap: wrap; overflow: visible; } }

/* ---------- The through-line: AI & digitalization arc --------------------- */

.thread { margin-top: clamp(2.5rem, 5vw, 4rem); }

.beat {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem 2rem;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 780px) { .beat { grid-template-columns: 8rem 1fr; gap: 2.5rem; } }

.beat__rail { display: flex; align-items: baseline; gap: .6rem; }
.beat__year {
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.08em; color: var(--coral);
}
.beat__where {
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .35rem;
}
.beat__title { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.5rem); margin-bottom: .7rem; }
.beat__text { color: var(--paper-dim); margin-bottom: .9rem; }
.beat__lesson {
  border-left: 2px solid var(--coral);
  padding-left: .9rem;
  font-family: var(--display);
  font-size: 1.02rem; line-height: 1.45;
  color: var(--paper);
  margin: 0 0 1rem;
  max-width: 52ch;
}
.beat__link {
  font-family: var(--mono); font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turquoise); text-decoration: none;
}
.beat__link:hover { color: var(--coral); }

/* ---------- How I solve problems — the seven movements -------------------- */

.method {
  list-style: none; margin: clamp(2.2rem, 4vw, 3rem) 0 0; padding: 0;
  counter-reset: none;
  display: grid; gap: 0;
}
.method__step {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  grid-template-areas: "no name" ". body";
  gap: .2rem .9rem;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 780px) {
  .method__step {
    grid-template-columns: 2.4rem 11rem 1fr;
    grid-template-areas: "no name body";
    align-items: baseline;
    gap: 1.6rem;
  }
}
.method__no { grid-area: no; font-family: var(--mono); font-size: 0.8125rem; color: var(--coral); }
.method__name { grid-area: name; font-family: var(--display); font-size: 1.25rem; }
.method__body { grid-area: body; color: var(--paper-dim); font-size: 1rem; line-height: 1.55; }

.method__own { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.method__own .approach__list { margin-top: 1rem; }
.method__gloss { display: block; font-family: var(--body); font-style: normal;
  font-size: 1.0rem; color: var(--muted); letter-spacing: 0.0em; margin-top: .15rem; }

/* ---------- Personality details, kept small ------------------------------ */

.signoff {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  font-family: var(--display); font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--paper); margin: 1.8rem 0 0; max-width: none;
}
.signoff i { font-style: normal; color: var(--coral); font-size: .85em; }

.journey__coords {
  display: block; font-style: normal;
  font-size: 0.875rem; letter-spacing: 0.1em; color: var(--muted);
  margin-top: .2rem;
}

.footer__lang { display: block; font-style: normal; margin-top: .3rem; letter-spacing: .1em; }

/* Personality details — coordinates, multilingual sign-off */
.journey__coords { display: block; font-style: normal; font-size: 0.875rem;
  letter-spacing: 0.1em; color: var(--muted); margin-top: .2rem; opacity: .8; }
.footer__sig { display: block; font-weight: 400; color: var(--deep-turq); margin-top: .5rem;
  letter-spacing: 0.08em; font-size: 0.875rem; }

/* Glossary — expands an internal acronym so a non-specialist can read the page */
.gloss { margin: 0 0 1.5rem; padding: 1rem 1.2rem; background: var(--charcoal);
  border-left: 2px solid var(--turquoise); border-radius: 0; }
.gloss div { display: grid; gap: .2rem; }
.gloss div + div { margin-top: .7rem; }
.gloss dt { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--turquoise); }
.gloss dd { margin: 0; font-size: 1rem; color: var(--paper-dim); line-height: 1.55; }

/* Figure gallery on case-study pages */
.figs { columns: 1; column-gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 720px)  { .figs { columns: 2; } }
.fig { margin: 0 0 1.5rem; break-inside: avoid; display: inline-block; width: 100%; }
.fig img, .fig video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--charcoal);
}
.fig figcaption { margin-top: .6rem; font-family: var(--mono); font-size: 1.0rem;
  letter-spacing: 0.0em; color: var(--muted); line-height: 1.5; }
/* Diagrams and renders sit on a light card so line art stays readable */
.fig--plate img { background: #FFFFFF; padding: .8rem; }
@media (min-width: 900px) { .figs--gallery { columns: 3; } }


/* readability: cap reading measure on wide screens */
.movement__body p,
.beat__body,
.section__intro,
.about__body p { max-width: 68ch; }
@media (min-width: 720px) {
  p, .fig figcaption { max-width: 70ch; }
}

/* ============================================================ figure slideshow
   Scroll-snap track: native swipe on touch, buttons + arrow keys on desktop.
   Images keep their natural aspect ratio (no cropping of portrait photos). */
.shots { margin: 0; }

.shots__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 4px;
}
.shots__track::-webkit-scrollbar { display: none; }
.shots__track:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.shot {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.shot__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  min-height: 220px;
}
.shot--plate .shot__frame { background: #FFFFFF; }
.shot__frame img,
.shot__frame video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}
.shot figcaption {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-dim);
  padding: .7rem .1rem 0;
  max-width: 70ch;
}

.shots__bar {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: .9rem;
}
.shots__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px;      /* 44px = comfortable touch target */
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--paper-dim);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.shots__nav:hover:not(:disabled) { background: var(--charcoal-2); border-color: var(--muted); }
.shots__nav:disabled { opacity: .3; cursor: default; }
.shots__nav:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.shots__dots { display: flex; gap: .4rem; flex: 1 1 auto; }
.shots__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hairline);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.shots__dot.is-on { background: var(--coral); transform: scale(1.25); }
.shots__dot:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.shots__count {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .shot__frame { min-height: 300px; }
  .shot__frame img, .shot__frame video { max-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
  .shots__track { scroll-behavior: auto; }
  .shots__dot.is-on { transform: none; }
}

/* ===== redesigned homepage (single-page layout) ===== */
.skip:focus{left:var(--gutter); top:8px; z-index:99; background:var(--paper);
  color:var(--ink); padding:10px 16px; border-radius:var(--radius)}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--scrim); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.head-in{
  max-width:1180px; margin:0 auto; padding:0 var(--gutter);
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wm-short{display:none}
@media (max-width:560px){.wm-full{display:none} .wm-short{display:inline}}
.wordmark{
  font-family:var(--display); font-size:19px; font-weight:500;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
}
.tabs{display:flex; align-items:center; gap:6px}
.tab{
  font-family:var(--mono); font-size:13px; letter-spacing:.01em;
  text-decoration:none; color:var(--paper-dim);
  padding:8px 12px; border-radius:var(--radius); white-space:nowrap;
}
.tab:hover{color:var(--paper); background:var(--charcoal)}
.tab--cta{color:var(--ink); background:var(--paper)}
.tab--cta:hover{color:var(--ink); background:var(--coral)}

/* ------------------------------------------------------------ intro/hero */
.intro{padding:clamp(48px,7vw,84px) 0 clamp(44px,6vw,72px)}
.intro h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,4.6vw,2.85rem); line-height:1.14;
  letter-spacing:-.012em; margin:0 0 22px; max-width:26ch;
}
.intro p{font-size:17px; line-height:1.7; color:var(--paper-dim); max-width:60ch; margin:0 0 17px}
.intro p:last-of-type{margin-bottom:24px}
.intro strong{color:var(--paper); font-weight:500}
/* (homepage mobile beat rules now live in the scoped block at the end) */

/* ------------------------------------------- legacy hero (unused) */
.facts{
  display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:0; padding:0;
}
.facts li{
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  color:var(--paper-dim); background:var(--charcoal);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:6px 11px;
}

/* --------------------------------------------------------------- section */
.band--sand{background:var(--sand); color:var(--sand-dim);
  border-block:1px solid var(--sand-line)}
.band--deep{background:var(--deep); color:var(--deep-dim)}
.sec-head{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:16px; margin-bottom:34px; border-bottom:1px solid var(--hairline);
}
.band--sand .sec-head{border-color:var(--sand-line)}
.band--deep .sec-head{border-color:var(--deep-line)}
.sec-mark{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--coral);
}
.band--sand .sec-mark{color:var(--sand-coral)}
.band--deep .sec-mark{color:var(--deep-turq)}
.sec-head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.7vw,1.85rem); letter-spacing:-.005em; margin:0;
}

.sec-note{
  margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--muted);
}
.band--sand .sec-note{color:var(--sand-muted)}

/* ----------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.card{
  grid-column:span 1; display:flex; flex-direction:column;
  background:var(--charcoal); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; text-decoration:none;
  color:inherit; transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--coral); transform:translateY(-2px)}
.card--lead{grid-column:span 2; flex-direction:row}
.card__media{background:var(--charcoal-2); overflow:hidden; flex:none}
.card__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.card--lead .card__media{width:46%}
.card--lead .card__media img{height:100%; aspect-ratio:auto; min-height:270px}
.card__body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.card--lead .card__body{justify-content:center; padding:30px 34px}
.card__meta{
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:var(--muted); margin:0 0 10px;
}
.card__title{
  font-family:var(--display); font-weight:400; line-height:1.22;
  font-size:clamp(1.12rem,2vw,1.4rem); margin:0 0 12px; letter-spacing:-.005em;
}
.card--lead .card__title{font-size:clamp(1.4rem,2.8vw,1.95rem)}
.card__line{
  margin:0 0 18px; font-size:16px; line-height:1.6;
  color:var(--paper-dim); max-width:54ch;
}
.card--lead .card__line{font-size:17px}
.stats{
  display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none;
  margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--hairline);
}
.stats li{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--paper-dim);
}
.stats li + li::before{content:"·"; margin-right:8px; color:var(--hairline)}
.stats b{font-weight:500; color:var(--coral)}

/* ------------------------------------------------------------ more rows */
.rows{border-top:1px solid var(--sand-line)}
.row{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) auto;
  gap:12px 26px; align-items:baseline;
  padding:19px 4px; border-bottom:1px solid var(--sand-line);
  text-decoration:none; color:inherit; transition:background .16s ease;
}
.row:hover{background:var(--sand-raised)}
.row__title{
  font-family:var(--display); font-weight:400; font-size:1.06rem;
  line-height:1.3; margin:0; color:var(--paper);
}
.row__line{margin:0; font-size:15px; line-height:1.55; color:var(--sand-dim)}
.row__meta{
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  color:var(--sand-muted); white-space:nowrap; text-align:right;
}

/* ----------------------------------------------------------------- about */

/* --------------------------------------------------------------- contact */
.contact{background:var(--deep); color:var(--deep-dim); text-align:center;
  padding:clamp(56px,7vw,88px) var(--gutter) clamp(38px,5vw,56px); margin-top:0}
.contact-in{max-width:1180px; margin:0 auto}
.contact h2{color:var(--deep-paper); 
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.3rem); margin:0 0 14px; letter-spacing:-.01em;
}
.contact p{color:var(--deep-dim); margin:0 auto 28px; max-width:46ch; font-size:17px}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .card--lead{grid-column:span 1; flex-direction:column}
  .card--lead .card__media{width:100%}
  .card--lead .card__media img{aspect-ratio:16/10; min-height:0}
  
  .row{grid-template-columns:1fr; gap:6px; padding:17px 4px}
  .row__meta{text-align:left}
}
@media (max-width:560px){
  .head-in{height:56px; gap:10px}
  .tab{padding:7px 7px; font-size:13px}
  .tabs{gap:4px}
  .wm-short{display:none}
@media (max-width:560px){.wm-full{display:none} .wm-short{display:inline}}
.wordmark{font-size:17px}
  .sec-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

.btn--ghost{background:transparent; color:var(--deep-paper); border-color:var(--deep-line)}
.btn--ghost:hover{background:var(--deep-raised); border-color:var(--deep-dim)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.shot--square img{aspect-ratio:1/1}


/* --------------------------------------------------------- homepage bands */
.band{padding:clamp(64px,8vw,112px) 0}
.sec-head{display:flex; align-items:baseline; gap:16px;
  padding-bottom:18px; margin-bottom:42px; border-bottom:1px solid var(--hairline)}
.band--sand .sec-head{border-color:var(--sand-line)}
.band--deep .sec-head{border-color:var(--deep-line)}
.sec-mark{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--coral)}
.band--sand .sec-mark{color:var(--sand-coral)}
.band--deep .sec-mark{color:var(--deep-turq)}
.sec-head h2{font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.7vw,1.85rem); letter-spacing:-.005em; margin:0}

.backlink{font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.backlink:hover{color:var(--coral); border-bottom-color:var(--coral)}


/* ==========================================================================
   HOMEPAGE LAYOUT — ported verbatim from sample-home.html.
   Appended last so it wins the cascade. Palette tokens and global resets
   are deliberately NOT included; .beat and .shot are scoped to .intro so
   they don't collide with the thread component that shares those names.
   ========================================================================== */
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--gutter)}
.site-head{position:sticky; top:0; z-index:40;
  background:var(--scrim); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);}
.head-in{max-width:1180px; margin:0 auto; padding:0 var(--gutter);
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.wm-short{display:none}
@media (max-width:560px){
.wm-full{display:none}
.wm-short{display:inline}
}
.wordmark{font-family:var(--display); font-size:19px; font-weight:500;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;}
.tabs{display:flex; align-items:center; gap:6px}
.tab{font-family:var(--mono); font-size:13px; letter-spacing:.01em;
  text-decoration:none; color:var(--paper-dim);
  padding:8px 12px; border-radius:var(--radius); white-space:nowrap;}
.tab:hover{color:var(--paper); background:var(--charcoal)}
.tab--cta{color:var(--ink); background:var(--paper)}
.tab--cta:hover{color:var(--ink); background:var(--deep-raised)}
.intro{padding:clamp(48px,7vw,84px) 0 clamp(44px,6vw,72px)}
.intro .beat{display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:clamp(28px,5vw,58px); align-items:start;}
.intro .beat + .beat{margin-top:clamp(38px,5vw,60px); padding-top:clamp(34px,4.5vw,52px);
  border-top:1px solid var(--hairline);}
.intro .beat--flip{grid-template-columns:minmax(0,1fr) 300px}
.intro .beat--flip .beat__media{order:2}
.intro .beat--flip .beat__text{order:1}
.intro .shot{position:relative; border-radius:var(--radius); overflow:hidden;
  /* the carousel .shot is flex:0 0 100%; min-width:100% — inside the About
     grid that forced the column open and pushed the section off-viewport */
  min-width:0; flex:initial; scroll-snap-align:none; display:block;
  background:var(--charcoal); border:1px solid var(--hairline);}
.intro .shot img{width:100%; aspect-ratio:4/5; object-fit:cover}
.intro .shot figcaption{font-family:var(--mono); font-size:13px; letter-spacing:.05em;
  color:var(--muted); padding:10px 12px; border-top:1px solid var(--hairline);}
.intro h1{font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,4.6vw,2.85rem); line-height:1.14;
  letter-spacing:-.012em; margin:0 0 22px; max-width:26ch;}
.intro p{font-size:17px; line-height:1.7; color:var(--paper-dim); max-width:60ch; margin:0 0 17px}
.intro p:last-of-type{margin-bottom:24px}
.intro strong{color:var(--paper); font-weight:500}
.intro .shot--square img{aspect-ratio:1/1}
@media (max-width:820px){
.intro .beat, .intro .beat--flip{grid-template-columns:1fr; gap:24px}
.intro .beat--flip .beat__media, .intro .beat--flip .beat__text{order:0}
.intro .shot{max-width:260px}
}
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px)}
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:var(--coral); margin:0 0 18px;}
.hero h1{font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:1.1;
  letter-spacing:-.01em; margin:0 0 22px; max-width:19ch;}
.hero p{font-size:clamp(1.05rem,1.9vw,1.22rem); line-height:1.6;
  color:var(--paper-dim); max-width:56ch; margin:0 0 26px;}
.facts{display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:0; padding:0;}
.facts li{font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  color:var(--paper-dim); background:var(--charcoal);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:6px 11px;}
.band{padding:clamp(52px,7vw,88px) 0}
.sec-head{display:flex; align-items:baseline; gap:16px;
  padding-bottom:16px; margin-bottom:34px; border-bottom:1px solid var(--hairline);}
.sec-mark{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--coral);}
.sec-head h2{font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.7vw,1.85rem); letter-spacing:-.005em; margin:0;}
.sec-note{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--muted);}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.card{grid-column:span 1; display:flex; flex-direction:column;
  background:var(--charcoal); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; text-decoration:none;
  color:inherit; transition:border-color .18s ease, transform .18s ease;}
.card:hover{border-color:var(--coral); transform:translateY(-2px)}
.card--lead{grid-column:span 2; flex-direction:row}
.card__media{background:var(--charcoal-2); overflow:hidden; flex:none}
.card__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.card--lead .card__media{width:46%}
.card--lead .card__media img{height:100%; aspect-ratio:auto; min-height:270px}
.card__body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.card--lead .card__body{justify-content:center; padding:30px 34px}
.card__meta{font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:var(--muted); margin:0 0 10px;}
.card__title{font-family:var(--display); font-weight:400; line-height:1.22;
  font-size:clamp(1.12rem,2vw,1.4rem); margin:0 0 12px; letter-spacing:-.005em;}
.card--lead .card__title{font-size:clamp(1.4rem,2.8vw,1.95rem)}
.card__line{margin:0 0 18px; font-size:16px; line-height:1.6;
  color:var(--paper-dim); max-width:54ch;}
.card--lead .card__line{font-size:17px}
.stats{display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none;
  margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--hairline);}
.stats li{font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--paper-dim);}
.stats li + li::before{content:"·"; margin-right:8px; color:var(--hairline)}
.stats b{font-weight:500; color:var(--coral)}
.rows{border-top:1px solid var(--sand-line)}
.row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) 190px;
  /* fixed third column: an 'auto' track sizes per-row, so rows never line up */
  gap:12px 26px; align-items:baseline;
  padding:19px 4px; border-bottom:1px solid var(--sand-line);
  text-decoration:none; color:inherit; transition:background .16s ease;}
.row:hover{background:var(--charcoal-2)}
.row__title{font-family:var(--display); font-weight:400; font-size:1.06rem;
  line-height:1.3; margin:0; color:var(--paper);}
.row__line{margin:0; font-size:15px; line-height:1.55; color:var(--sand-dim)}
.row__meta{font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  color:var(--sand-muted); white-space:nowrap; text-align:right;}
.contact{background:var(--deep); color:var(--deep-dim); text-align:center;
  padding:clamp(56px,7vw,88px) var(--gutter) clamp(38px,5vw,56px); margin-top:0}
.contact-in{max-width:1180px; margin:0 auto}
.contact h2{color:var(--deep-paper); 
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.3rem); margin:0 0 14px; letter-spacing:-.01em;}
.contact p{color:var(--deep-dim); margin:0 auto 28px; max-width:46ch; font-size:17px}.contact .btn-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}.contact .btn{font-family:var(--mono); font-size:14px; letter-spacing:.01em;
  text-decoration:none; padding:13px 22px; border-radius:var(--radius);
  border:1px solid var(--deep-turq); color:var(--deep); background:var(--coral);}.contact .btn:hover{filter:brightness(1.08); border-color:var(--coral)}.contact .btn--ghost{background:transparent; color:var(--deep-paper); border-color:var(--deep-line)}.contact .btn--ghost:hover{background:var(--deep-raised); border-color:var(--deep-dim)}
.signoff{max-width:52ch; margin-inline:auto; line-height:2; margin-top:44px; padding-top:22px; border-top:1px solid var(--deep-line);
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--deep-muted);}
@media (max-width:900px){
.cards{grid-template-columns:1fr}
.card--lead{grid-column:span 1; flex-direction:column}
.card--lead .card__media{width:100%}
.card--lead .card__media img{aspect-ratio:16/10; min-height:0}
.row{grid-template-columns:1fr; gap:6px; padding:17px 4px}
.row__meta{text-align:left}
}
@media (max-width:560px){
.head-in{height:56px; gap:10px}
.tab{padding:7px 7px; font-size:13px}
.tabs{gap:4px}
.wm-short{display:none}
@media (max-width:560px){
.wm-full{display:none}
.wm-short{display:inline}
}
.wordmark{font-size:17px}
.sec-note{display:none}
}