/* ============================================================
   shanbhag003.com — v3, light
   Paper-white ground, ink text, one blue for action and one
   ochre for verified numbers. Both accents contrast-checked
   against the background at small sizes.
   Type: Instrument Sans (display) / Geist (body) / Geist Mono
   ============================================================ */

:root {
  /* --ink is the page ground, --paper is the text. */
  --ink:      #f7f6f3;   /* warm white ground */
  --ink-2:    #efece5;
  --ink-3:    #e6e2d9;
  --line:     #ded9cf;
  --line-2:   #bdb6a8;
  --paper:    #0b0b0c;   /* near-black text */
  --muted:    #56534c;
  --muted-2:  #6a665e;
  --live:     #0b0b0c;   /* action = black; gold is the reveal on hover */
  --band-dark:  #0b0b0c;
  --gold:       #ecd06f; /* block colour and big figures — never small text on white */
  --gold-deep:  #8a6d10; /* same hue, dark enough for text on light (5.2:1) */
  --band-tint:  #efece5;
  --on-dark:    #f6f4ef;
  --on-dark-mu: #a5a19a;
  --data:     #8a6d10;

  --display: "Instrument Sans", system-ui, sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --wrap: 1140px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 76px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p, li, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--paper); }
code { font-family: var(--mono); font-size: .875em; color: var(--gold-deep); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- nav ---------- */

.nav { background: var(--band-dark); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255,255,255,.1); transition: background .35s var(--ease), border-color .35s; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: -.04em; text-decoration: none; line-height: 1;
  color: #fff; text-transform: lowercase;
}
.brand span { color: var(--gold); }
.nav-toggle {
  display: none; appearance: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; margin-right: -10px; padding: 0;
  align-items: center; justify-content: center;
}
.bars, .bars::before, .bars::after {
  display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s linear;
}
.bars::before, .bars::after { content: ""; position: absolute; }
.bars::before { transform: translateY(-7px); }
.bars::after  { transform: translateY(7px); }
.nav-toggle { position: relative; }
.nav.open .bars { background: transparent; }
.nav.open .bars::before { transform: rotate(45deg); }
.nav.open .bars::after  { transform: rotate(-45deg); }

.nav ul { list-style: none; display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); margin: 0; padding: 0; -webkit-overflow-scrolling: touch; }
.nav a:not(.brand) {
  font-family: var(--body); font-size: 1.0625rem; letter-spacing: -.01em;
  text-decoration: none; color: var(--on-dark-mu); padding: .4rem 0;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.nav a:not(.brand):hover { color: #fff; border-bottom-color: #3a3a3d; }
.nav a[aria-current="page"] { color: #fff; font-weight: 500; border-bottom-color: var(--gold); }

/* ---------- type ---------- */

.eyebrow { font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }

/* section-level labels get real presence: larger, darker, with a gold rule */
.wrap > .eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-size: .9375rem; letter-spacing: .08em; font-weight: 500;
  color: var(--paper); margin-bottom: 1.4rem;
}
.wrap > .eyebrow::before {
  content: ""; flex: 0 0 auto; width: 2.25rem; height: 2px; background: var(--gold-deep);
}
.band-dark .wrap > .eyebrow, .band-dark .wrap > .eyebrow.data,
.band-dark .wrap > .eyebrow.live { color: #fff; }
.band-dark .wrap > .eyebrow::before { background: var(--gold); }
.band-gold .wrap > .eyebrow { color: var(--paper); }
.band-gold .wrap > .eyebrow::before { background: var(--paper); }
@media (max-width: 620px) {
  .wrap > .eyebrow { font-size: .8125rem; gap: .65rem; }
  .wrap > .eyebrow::before { width: 1.5rem; }
}
.eyebrow.data { color: var(--gold-deep); }
.eyebrow.live { color: var(--paper); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 1rem; }
h1 { font-size: clamp(2.6rem, 7.6vw, 5.6rem); font-weight: 700; letter-spacing: -.045em; }
h2 { font-size: clamp(1.95rem, 4.6vw, 3.4rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15rem; }
p.lede { font-size: clamp(1.1rem, 1.75vw, 1.3rem); color: #33312c; line-height: 1.55; }
.measure { max-width: 68ch; }
strong { color: #000; font-weight: 600; }
em { color: #2c2a25; }

section { padding: clamp(3.75rem, 9vw, 7.5rem) 0; }
section + section { border-top: 1px solid var(--line); }

/* Every section gets its own ground. Four families, deliberately different
   in hue rather than four shades of the same grey:
     default  near-white cool
     tint     cool blue-grey
     warm     warm cream
     dark     deep navy                                                */
.band-tint { background: var(--band-tint); border-top: 0; }
.band-warm { background: var(--ink-2); border-top: 0; }
.band-gold { background: var(--gold); color: var(--paper); border-top: 0; }
.band-gold h2, .band-gold strong { color: var(--paper); }
.band-gold p { color: rgba(11,11,12,.8); }
.band-gold .eyebrow { color: rgba(11,11,12,.62); }
.band-gold .btn { background: transparent; border-color: rgba(11,11,12,.4); color: var(--paper); }
.band-gold .btn:hover { background: #fff; border-color: #fff; color: var(--paper); }
.band-gold .btn-live { background: var(--paper); border-color: var(--paper); color: var(--gold); }
.band-gold .btn-live:hover { background: #fff; border-color: #fff; color: var(--paper); }
.band-white { background: #fff; border-top: 0; }
section.band-tint + section, section.band-warm + section, section.band-gold + section,
section.band-white + section, section.band-dark + section { border-top: 0; }
.band-gold, section.band-gold { border-top: 0; }
.band-warm .card, .band-tint .card { background: #fff; }
.band-dark { background: var(--band-dark); color: var(--on-dark); border-top: 0; }
.band-dark h2, .band-dark strong { color: #fff; }
.band-dark p { color: #b9b9bd; }
.band-dark .eyebrow { color: var(--gold); }
.band-dark a:not(.btn) { color: var(--gold); }
.band-dark em { color: #dcdcdf; }
section.band-dark + section { border-top: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ---------- hero ---------- */

.hero { padding-top: clamp(4rem, 11vw, 9rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.hero h1 { max-width: 24ch; }
.hero h1 .sub {
  display: block; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400;
  color: var(--muted); letter-spacing: -.015em; margin-top: 1.15rem;
  line-height: 1.4; max-width: 46ch;
}
.hero .lede { margin-top: 2rem; }

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn {
  font-family: var(--body); font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; padding: .85rem 1.5rem; border: 1px solid var(--line-2);
  color: var(--paper); background: #fff; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .6rem;
  transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s, color .2s;
}
.btn::after {
  content: "\2192"; font-size: 1.05em; line-height: 1;
  transition: transform .28s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn:hover { border-color: var(--paper); background: var(--gold); color: var(--paper); transform: translateY(-2px); box-shadow: none; }
.btn-live { background: var(--paper); border-color: var(--paper); color: #fff; font-weight: 500; box-shadow: none; }
.band-dark .btn, .foot .btn { background: transparent; color: #fff; border-color: #3a3a3d; }
.band-dark .btn:hover, .foot .btn:hover { border-color: #fff; box-shadow: none; }
.band-dark .btn-live, .foot .btn-live { background: var(--gold); border-color: var(--gold); color: var(--paper); font-weight: 600; }
.band-dark .btn-live:hover, .foot .btn-live:hover { background: #fff; border-color: #fff; color: var(--paper); }
.btn-live:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); box-shadow: none; }

/* ---------- claim cards ---------- */

.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

/* below three-across, the cards become a swipeable carousel */
@media (max-width: 980px) {
  .claims {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut)); padding: .25rem var(--gut) 1rem;
  }
  .claims::-webkit-scrollbar { display: none; }
  .claim { flex: 0 0 min(20rem, 80vw); scroll-snap-align: start; min-height: 20rem; }
}
.claim {
  background: var(--gold); color: var(--paper); border-radius: 18px;
  padding: clamp(1.6rem, 2.6vw, 2.15rem); display: flex; flex-direction: column;
  min-height: 22rem; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.claim:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,11,12,.18); }
.claim-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2.75rem; }
.claim-n { font-family: var(--mono); font-size: .875rem; color: rgba(11,11,12,.55); }
.claim-tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(11,11,12,.72); text-align: right; }
.claim h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.14; letter-spacing: -.03em; color: var(--paper); margin-bottom: .9rem; }
.claim p { font-size: .9375rem; color: rgba(11,11,12,.78); margin-bottom: 1.6rem; line-height: 1.55; }
.claim .go {
  font-family: var(--body); font-size: .875rem; font-weight: 600; color: var(--paper);
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
  border-top: 1px solid rgba(11,11,12,.28); padding-top: 1.1rem; width: 100%;
}
.claim .go::after { content: "\2192"; margin-left: auto; transition: transform .28s var(--ease); }
.claim:hover .go::after { transform: translateX(5px); }

/* ---------- clients ---------- */

.clients { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.clients li {
  font-family: var(--mono); font-size: .8125rem; border: 1px solid var(--line);
  padding: .55rem .85rem; color: #3a4553; background: #fff;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.clients li:hover { border-color: var(--paper); color: #000; box-shadow: none; }

/* ---------- project rail ----------
   A segmented control, not a row of outline pills. The active
   state is a solid pill that slides between items; the CSS
   fallback below keeps it visible with JavaScript off.
   ------------------------------------------------------------ */

.prail {
  position: sticky; top: var(--nav-h); z-index: 30;
  background: rgba(247,246,243,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.prail .wrap { padding-top: .85rem; padding-bottom: .85rem; overflow-x: auto; scrollbar-width: none; }
.prail .wrap::-webkit-scrollbar { display: none; }

.prail-track {
  position: relative; display: inline-flex; gap: .25rem;
  background: var(--ink-3); border-radius: 999px; padding: 5px;
  width: max-content;
}
.prail-ind {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
  background: var(--paper); border-radius: 999px; opacity: 0;
  transition: transform .38s var(--ease), width .38s var(--ease), opacity .2s;
  pointer-events: none;
}
.prail-track.js .prail-ind { opacity: 1; }

.prail a {
  position: relative; z-index: 1;
  font-family: var(--body); font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; color: var(--muted);
  padding: .72rem 1.35rem; border-radius: 999px; transition: color .22s;
}
.prail a:hover { color: var(--paper); }
.prail a[aria-current="true"] { color: #fff; }

/* fallback: without the sliding indicator, fill the active item directly */
.prail-track:not(.js) a[aria-current="true"] { background: var(--paper); }

@media (max-width: 620px) {
  .prail .wrap { padding-top: .6rem; padding-bottom: .6rem; }
  .prail a { font-size: .875rem; padding: .65rem 1.05rem; }
}

/* ---------- case blocks ---------- */

.case { padding: clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top: calc(var(--nav-h) + 4.5rem); }
.case-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.case.flip .case-grid { grid-template-columns: 1.15fr 0.85fr; }
.case.flip .case-media { order: 2; }
@media (max-width: 900px) {
  .case-grid, .case.flip .case-grid { grid-template-columns: 1fr; }
  .case.flip .case-media { order: 0; }
}

.case-media { position: sticky; top: calc(var(--nav-h) + 5rem); }
@media (max-width: 900px) { .case-media { position: static; } }

.screen { display: block; border: 1px solid #26262e; border-radius: 14px; overflow: hidden; background: #14141a; }
.screen-bar {
  display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  font-family: var(--mono); font-size: .6875rem; color: #8b8780;
  border-bottom: 1px solid #26262e; background: #0e0e12; white-space: nowrap; overflow: hidden;
}
.screen-bar span { overflow: hidden; text-overflow: ellipsis; }
.screen-bar .live-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2.8s var(--ease) infinite; }
.screen-img { display: block; aspect-ratio: 4 / 5; background: #08080b; }
.screen-img img { width: 100%; height: 100%; object-fit: contain; }

.case-body > h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.02; margin-bottom: .9rem; }
.stackline { font-family: var(--mono); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.5rem; }
.footnote { font-size: .875rem; color: var(--muted-2); margin-top: 1.25rem; max-width: 54ch; }

/* ---------- metrics ----------
   No boxes. A hairline above each figure and nothing else — the
   bordered grid was a table in disguise.
   ------------------------------------------------------------ */

.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.75rem); row-gap: 0;
  margin: 2.5rem 0 2.75rem;
}
.metric { display: flex; flex-direction: column; border-top: 1.5px solid var(--paper); padding: 1rem 0 1.6rem; }
.mval {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 3.8vw, 3.1rem); letter-spacing: -.045em; line-height: .95;
  color: var(--paper); margin-bottom: .7rem; font-variant-numeric: tabular-nums;
}
.mlab { font-size: .9375rem; font-weight: 500; color: var(--paper); line-height: 1.35; margin-bottom: .45rem; }
.mnote { font-family: var(--mono); font-size: .6875rem; color: var(--muted-2); line-height: 1.55; margin-top: auto; }

/* ---------- the rejected ledger ----------
   Each item struck through, with the reason beside it. No fill,
   no border box — a gold rule and hairline rows.
   ------------------------------------------------------------ */

.rejected { border-top: 1.5px solid var(--gold-deep); padding-top: 1.1rem; margin: 2.5rem 0; }
.rejected > .eyebrow { color: var(--gold-deep); margin-bottom: 1rem; }
.rej-list { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.rej-list li {
  display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1.25rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
@media (max-width: 620px) { .rej-list li { grid-template-columns: 1fr; gap: .2rem; } }
.rej-list s {
  font-family: var(--mono); font-size: .8125rem; color: var(--muted-2);
  text-decoration-thickness: 1.5px; text-decoration-color: var(--gold-deep);
}
.rej-list span { font-size: .9375rem; color: var(--muted); }
.rejected > p { font-size: .9375rem; }
.rejected > p:last-child { margin-bottom: 0; }

/* ---------- an honest note, no box ---------- */
.note { border-left: 2px solid var(--gold-deep); padding: .1rem 0 .1rem 1.35rem; margin: 2.5rem 0; }
.note > .eyebrow { color: var(--gold-deep); }
.note p:last-child { margin-bottom: 0; }

.field { margin: 2.5rem 0; }
.field > .eyebrow { margin-bottom: .6rem; }

/* the rejected ledger — signature element */
.ledger {
  border: 1px solid var(--paper); border-left-width: 4px;
  background: #fdf7e6;
  padding: clamp(1.25rem, 3vw, 2rem); margin: 2.5rem 0;
}
.ledger > .eyebrow { color: var(--live); }
.ledger p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .8125rem; margin: 1.25rem 0 1.5rem; background: #fff; }
caption { text-align: left; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding-bottom: .7rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--muted-2); font-weight: 400; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--line-2); }
td:not(:first-child) { font-variant-numeric: tabular-nums; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--ink-2); }
tbody tr.win td, tbody tr.win td strong { color: var(--gold-deep); }
tbody tr.win { background: #fdf3d8; }
.wrap-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wrap-table table { min-width: 30rem; }

figure { margin: 2.5rem 0; }
figure img { border: 1px solid var(--line); }
figcaption { font-family: var(--mono); font-size: .8125rem; color: var(--muted-2); padding-top: .8rem; line-height: 1.6; }

.callout { border-left: 4px solid var(--gold); padding: .15rem 0 .15rem 1.35rem; margin: 2.25rem 0; }
.callout p:last-child { margin-bottom: 0; }
.quote { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.3; color: #000; }

ul.plain { list-style: none; padding: 0; margin: 0 0 1.15rem; }
ul.plain li { padding-left: 1.35rem; position: relative; margin-bottom: .6rem; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: .74em; width: 7px; height: 1px; background: var(--line-2); }

/* ---------- experience ---------- */

.cap { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1rem, 3vw, 3rem); padding: 2rem 0; border-top: 1px solid var(--line); }
.cap:first-of-type { border-top: 0; }
@media (max-width: 780px) { .cap { grid-template-columns: 1fr; gap: .5rem; } }
.cap h3 { margin-bottom: .4rem; }
.cap > div > p:last-child { margin-bottom: 0; }

.year { margin-top: 3rem; }
.year > h3 { font-family: var(--mono); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: .7rem; margin-bottom: 0; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
@media (max-width: 680px) { .log li { grid-template-columns: 1fr; gap: .3rem; } }
.log .when { font-family: var(--mono); font-size: .8125rem; text-transform: uppercase; color: var(--muted-2); padding-top: .22rem; }
.log .what { color: #2c2a25; }
.log .what b { color: #000; font-weight: 600; }
.log .who { font-family: var(--mono); font-size: .75rem; color: var(--gold-deep); display: block; margin-top: .3rem; }

/* ---------- cards ---------- */

.cards { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.card {
  flex: 1 1 320px; max-width: 100%;
  background: #fff; border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column;
  text-decoration: none; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.card:hover { border-color: var(--paper); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11,11,12,.10); }
.card .kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .9rem; }
.card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: .7rem; }
.card p { font-size: .9375rem; color: var(--muted); margin-bottom: 1.3rem; }
.card .go { font-family: var(--mono); font-size: .75rem; color: var(--gold-deep); margin-top: auto; }
.card:hover .go { color: var(--gold-deep); }

/* ---------- footer ---------- */

.foot { background: var(--band-dark); color: var(--on-dark); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.foot h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); max-width: 22ch; color: #fff; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.foot-links a { font-family: var(--mono); font-size: .875rem; color: var(--on-dark-mu); text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #2a2a2c; font-family: var(--mono); font-size: .75rem; color: #7b8a9c; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- motion ---------- */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s }
.reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s }

.rise { opacity: 0; transform: translateY(24px); animation: rise .85s var(--ease) forwards; }
.rise.r1 { animation-delay: .05s } .rise.r2 { animation-delay: .17s }
.rise.r3 { animation-delay: .29s } .rise.r4 { animation-delay: .41s }
@keyframes rise { to { opacity: 1; transform: none } }

.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); width: 0; z-index: 60; }

/* ---------- a11y floor ---------- */

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--paper); color: var(--gold); padding: .7rem 1rem; font-family: var(--mono); font-size: .8125rem; }

/* ============================================================
   MOBILE — nav collapses at 860px (brand + 5 links + CTA need ~800px)
   ============================================================ */

@media (max-width: 860px) {
  .nav .wrap { flex-wrap: wrap; row-gap: 0; min-height: 64px; }
  .brand { font-size: 1.35rem; }
  .nav-toggle { display: inline-flex; }

  /* the stage normally sits behind the nav; while the menu is open it must
     drop below it, or the panel covers the hero instead of pushing it */
  .nav.open + main .stage { margin-top: 0; }

  /* the menu is part of the header, in normal flow — opening it pushes the
     page down rather than covering what you were reading */
  .nav ul {
    order: 3; flex: 1 0 100%; display: none; flex-direction: column; gap: .1rem;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) .6rem;
    border-top: 1px solid #242426;
  }
  .nav.open ul { display: flex; }
  .nav ul li { width: 100%; }
  .nav a:not(.brand) {
    font-family: var(--display); font-size: 1.35rem; font-weight: 600;
    letter-spacing: -.03em; display: block; width: 100%;
    padding: .6rem 0; border-bottom: 0; border-top: 0;
  }
  .nav ul li:last-child a { border-bottom: 0; }
  .nav a:not(.brand):hover { border-bottom-color: #1e1e20; }
  .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: #1e1e20; }
  .nav { background: var(--band-dark); }
  .subnav { background: rgba(239,236,229,.98); }

  section { padding: 2.75rem 0; }
  .hero { padding-top: 2.25rem; padding-bottom: 2.25rem; }

  h1 { font-size: clamp(1.95rem, 9.5vw, 2.6rem); }
  h2 { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
  .hero h1 .sub { font-size: 1.1rem; margin-top: .8rem; }
  p.lede { font-size: 1.0625rem; }
  .quote { font-size: 1.1rem; }

  .actions { gap: .6rem; }
  .btn { padding: .95rem 1.4rem; flex: 1 1 auto; min-height: 50px;
         display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
  .btn:hover { transform: none; box-shadow: none; }
  .btn::after { margin-left: .15rem; }
  .proj-index { display: none; }
  .proj-head { gap: 0; }

  .field, .ledger, figure, .callout { margin: 1.75rem 0; }
  .ledger { padding: 1.15rem; }
  .callout { padding-left: 1rem; }
  .cards { gap: 1rem; }
  .card { flex: 1 1 100%; padding: 1.35rem; }
  .claim { padding: 1.5rem; border-radius: 16px; }
  .claim-top { margin-bottom: 1.75rem; }
  .claim h3 { font-size: 1.3rem; }

  .wrap-table { position: relative; }
  .wrap-table::after {
    content: ""; position: absolute; top: 0; right: 0; width: 2.25rem; height: 100%;
    background: linear-gradient(90deg, rgba(247,246,243,0), var(--ink)); pointer-events: none;
  }
  table { font-size: .75rem; }
  th, td { padding: .55rem .6rem; }

  .log li { padding: .8rem 0; }
  .log .when { color: var(--gold-deep); font-size: .75rem; }
  .year { margin-top: 2.25rem; }
  .cap { padding: 1.5rem 0; }

  .foot-grid { gap: 1.75rem; }
  .foot-base { margin-top: 2rem; flex-direction: column; gap: .5rem; }

  .reveal { transform: translateY(16px); }
  .rise { transform: translateY(14px); }
}

/* scroll affordance on the two horizontally scrolling rows */
@media (max-width: 860px) {
  .subnav::after {
    content: ""; position: absolute; right: 0; bottom: 1px; width: 2.5rem;
    background: linear-gradient(90deg, rgba(239,236,229,0), rgba(239,236,229,.98));
    pointer-events: none; z-index: 1;
  }
  .subnav::after { height: calc(100% - 2px); }
}

/* tablet band: desktop structure, less dead air */
@media (max-width: 900px) and (min-width: 861px) {
  section { padding: 3.25rem 0; }
  .hero { padding-top: 3rem; padding-bottom: 2.5rem; }
}

@media (max-width: 380px) {
  h1 { font-size: 1.8rem; }
  .btn { flex: 1 1 100%; }
  .nav a:not(.brand) { font-size: 1.25rem; }
}

/* touch devices: tap targets and no hover artefacts, at any width */
@media (hover: none) {
  .btn:hover, .card:hover, .claim:hover { transform: none; box-shadow: none; }

  .foot-links { gap: 0; }
  .foot-links a { min-height: 44px; display: flex; align-items: center; }
  .claim a, .card .go { padding: .35rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .rise { opacity: 1; transform: none; }
  .progress { display: none; }
}

/* ============================================================
   CLIENT MARQUEE
   Continuous left-to-right drift. Each name is set differently
   so the row reads as a set of wordmarks rather than a row of
   identical chips — typographic variation only, no logos.
   ============================================================ */

.marquee { position: relative; overflow: hidden; padding: .5rem 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; width: 5rem; height: 100%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), rgba(239,236,229,0)); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), rgba(239,236,229,0)); }

.marquee-track {
  display: flex; width: max-content; gap: 2.75rem; align-items: center;
  animation: drift 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(-50%) } to { transform: none } }

.wm { white-space: nowrap; color: #2a2823; line-height: 1; }
.wm-a { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.045em; }
.wm-b { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; }
.wm-c { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: .01em; text-transform: uppercase; }
.wm-d { font-family: var(--body); font-weight: 500; font-size: 1.4rem; letter-spacing: -.02em; }
.wm-e { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; font-style: italic; }
.wm-f { font-family: var(--mono); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; }

@media (max-width: 860px) {
  .marquee-track { gap: 1.9rem; animation-duration: 34s; }
  .marquee::before, .marquee::after { width: 2.5rem; }
  .wm-a { font-size: 1.2rem } .wm-b { font-size: .85rem } .wm-c { font-size: 1.1rem }
  .wm-d { font-size: 1.15rem } .wm-e { font-size: 1.15rem } .wm-f { font-size: .95rem }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; gap: 1.5rem 2.25rem; }
  .marquee-dup { display: none; }
  .marquee::before, .marquee::after { display: none; }
}



/* ============================================================
   WORK NUMBERS
   Oversized figures on black with hairline rules — the Bazil
   treatment. The first stat spans the row as a feature.
   ============================================================ */

.stats { display: block; }
.stat {
  display: grid; grid-template-columns: 9rem 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 0;
  align-items: start; border-top: 1px solid #2a2a2c; padding: 2rem 0;
}
.stat:first-child { border-top: 1.5px solid var(--gold-deep); }
.stat-n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 5.2vw, 4.4rem); line-height: .88; letter-spacing: -.05em;
  color: var(--gold-deep); font-variant-numeric: tabular-nums;
}
.stat-n { grid-column: 1; grid-row: 1 / span 2; }
.stat h3 { grid-column: 2; grid-row: 1; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.025em; margin-bottom: .55rem; color: var(--paper); }
.stat p { grid-column: 2; grid-row: 2; font-size: .9375rem; color: var(--muted); margin: 0; max-width: 62ch; }

/* on a dark ground the same component flips */
.band-dark .stat { border-top-color: #2a2a2c; }
.band-dark .stat:first-child { border-top-color: var(--gold); }
.band-dark .stat-n { color: var(--gold); }
.band-dark .stat h3 { color: #fff; }
.band-dark .stat p { color: #a9a59e; }

@media (max-width: 620px) {
  .stat { grid-template-columns: 1fr; column-gap: 0; row-gap: .3rem; padding: 1.5rem 0; }
  .stat-n, .stat h3, .stat p { grid-column: 1; grid-row: auto; }
  .stat-n { font-size: 3rem; }
  .stat h3 { font-size: 1.15rem; }
}

/* ============================================================
   CLIENT MARQUEE
   Continuous left-to-right drift. Each name is set differently
   so the row reads as a set of wordmarks rather than a row of
   identical chips — typographic variation only, no logos.
   ============================================================ */

.marquee { position: relative; overflow: hidden; padding: .5rem 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; width: 5rem; height: 100%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), rgba(239,236,229,0)); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), rgba(239,236,229,0)); }

.marquee-track {
  display: flex; width: max-content; gap: 2.75rem; align-items: center;
  animation: drift 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(-50%) } to { transform: none } }

.wm { white-space: nowrap; color: #2a2823; line-height: 1; }
.wm-a { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.045em; }
.wm-b { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; }
.wm-c { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: .01em; text-transform: uppercase; }
.wm-d { font-family: var(--body); font-weight: 500; font-size: 1.4rem; letter-spacing: -.02em; }
.wm-e { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; font-style: italic; }
.wm-f { font-family: var(--mono); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; }

@media (max-width: 860px) {
  .marquee-track { gap: 1.9rem; animation-duration: 34s; }
  .marquee::before, .marquee::after { width: 2.5rem; }
  .wm-a { font-size: 1.2rem } .wm-b { font-size: .85rem } .wm-c { font-size: 1.1rem }
  .wm-d { font-size: 1.15rem } .wm-e { font-size: 1.15rem } .wm-f { font-size: .95rem }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; gap: 1.5rem 2.25rem; }
  .marquee-dup { display: none; }
  .marquee::before, .marquee::after { display: none; }
}




/* Footer social links.
   The brand marks stay monochrome white — every one of these companies
   permits their mark in official colour, solid black or solid white, and
   nothing else. Only the text label takes the gold hover, so the marks
   themselves are never recoloured. */
.foot-links a { display: inline-flex; align-items: center; gap: .6rem; }
.foot-links .ico { flex: 0 0 auto; color: #fff; opacity: .7; transition: opacity .18s; }
.foot-links a:hover .ico { opacity: 1; }
.foot-links a:hover { color: var(--gold); }/* ============================================================
   PROJECT CARDS (home)
   Each screenshot sits in a dark bezel with a live-host status
   bar — a wall of screens, which is the environment the work
   actually runs in. Images are CONTAINED, not cropped, so the
   4:5 posters and the landscape console share one frame without
   either being mangled.
   ============================================================ */

.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.pcard {
  display: flex; flex-direction: column; text-decoration: none;
  background: #14141a; border: 1px solid #26262e; border-radius: 14px;
  overflow: hidden; color: var(--on-dark);
  transition: border-color .22s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,.5); }

/* status bar */
.pcard-bar {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .6875rem; color: #7e7a72;
  padding: .7rem .9rem; border-bottom: 1px solid #26262e; background: #0e0e12;
  white-space: nowrap; overflow: hidden;
}
.pcard-bar .live-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: pulse 2.8s var(--ease) infinite;
}
.pcard-bar span { overflow: hidden; text-overflow: ellipsis; }

/* the screen itself */
.pcard-media { display: block; aspect-ratio: 4 / 5; background: #08080b; overflow: hidden; }
.pcard-media img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform .55s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.02); }

.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.25rem 1.35rem; }
.pcard-meta { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .7rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.pcard-n { color: var(--gold); }
.pcard-tag { color: #8b8780; }
.pcard h3 { font-size: 1.15rem; letter-spacing: -.03em; margin-bottom: .45rem; color: #fff; }
.pcard p { font-size: .9375rem; color: #a9a59e; margin-bottom: 1.2rem; }
.pcard .go {
  font-family: var(--body); font-size: .875rem; font-weight: 500; color: #fff;
  margin-top: auto; display: flex; align-items: center; width: 100%;
  border-top: 1px solid #26262e; padding-top: .95rem;
}
.pcard .go::after { content: "\2192"; margin-left: auto; transition: transform .28s var(--ease); }
.pcard:hover .go::after { transform: translateX(5px); }
.pcard:hover .go { color: var(--gold); }

/* below three-across, swipe them */
@media (max-width: 980px) {
  .pcards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut)); padding: .25rem var(--gut) 1rem;
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(20rem, 80vw); scroll-snap-align: start; }
}
@media (hover: none) {
  .pcard:hover { transform: none; box-shadow: none; border-color: #26262e; }
  .pcard:hover .pcard-media img { transform: none; }
}


/* ============================================================
   CUSTOM CURSOR
   Fine pointers only. Black arrow by default, gold over anything
   clickable — the state change is the point, or links stop
   feeling clickable.
   ============================================================ */

@media (pointer: fine) {
  body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5%202.5%20L5%2020.5%20L9.8%2016%20L12.9%2023%20L16.3%2021.5%20L13.2%2014.6%20L20%2014.3%20Z%22%20fill%3D%22%230b0b0c%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 4 2, auto; }
  a, button, .prail a, summary, label { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5%202.5%20L5%2020.5%20L9.8%2016%20L12.9%2023%20L16.3%2021.5%20L13.2%2014.6%20L20%2014.3%20Z%22%20fill%3D%22%23ecd06f%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 4 2, pointer; }
  input, textarea, select { cursor: text; }

  .cursor-ring {
    position: fixed; top: 0; left: 0; width: 34px; height: 34px;
    margin: -17px 0 0 -17px; border: 1.5px solid rgba(11,11,12,.45);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    opacity: 0; transition: opacity .25s, width .25s var(--ease), height .25s var(--ease),
                            margin .25s var(--ease), border-color .25s, background .25s;
    will-change: transform;
  }
  .cursor-ring.on { opacity: 1; }
  .cursor-ring.hot {
    width: 56px; height: 56px; margin: -28px 0 0 -28px;
    border-color: var(--paper); background: rgba(236,208,111,.3);
  }
  .cursor-ring.dark { border-color: rgba(236,208,111,.6); }
  .cursor-ring.dark.hot { border-color: var(--gold); background: rgba(236,208,111,.22); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none !important; }
}

/* ---------- name / skill tags ----------
   Subtle fills, no outlines. Outlined pills read as 2018; a soft
   fill is how current interfaces label things.
   ------------------------------------------------------------ */

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.tags li {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .01em;
  background: var(--ink-3); color: #34322c; padding: .38rem .65rem; border-radius: 6px;
}
.band-dark .tags li { background: #1c1c22; color: #c8c4bc; }
.tags.gold li { background: rgba(138,109,16,.12); color: var(--gold-deep); }

/* ---------- awards ---------- */
.awards { list-style: none; margin: 0; padding: 0; }
.awards li {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.awards li:first-child { border-top: 1px solid var(--line); }
.awards .yr { font-family: var(--mono); font-size: .8125rem; color: var(--gold-deep); }
.awards .aw { font-size: 1rem; font-weight: 500; }
@media (max-width: 520px) { .awards li { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- capability rows ---------- */
.cap { display: grid; grid-template-columns: 16rem 1fr; gap: clamp(1rem, 3vw, 3.5rem); padding: 2.25rem 0; border-top: 1px solid var(--line); }
.cap h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.025em; margin-bottom: .3rem; }
.cap .cap-kind { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 0; }
.cap > div > p { margin-bottom: .7rem; }
.cap > div > p:last-of-type { margin-bottom: 0; }
@media (max-width: 780px) { .cap { grid-template-columns: 1fr; gap: .8rem; } }

/* ============================================================
   CAPABILITY PANELS (experience)
   Four substantial panels rather than plain rows, with a large
   gold ordinal and a lift on hover.
   ============================================================ */

.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .caps { grid-template-columns: 1fr; } }

.capx {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column;
  transition: border-color .22s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.capx:hover { border-color: var(--paper); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11,11,12,.09); }
.capx-n {
  font-family: var(--mono); font-size: .8125rem; color: var(--gold-deep);
  display: block; margin-bottom: .8rem;
}
.capx h3 { font-size: clamp(1.3rem, 2.1vw, 1.65rem); letter-spacing: -.03em; margin-bottom: 1.1rem; }
.capx ul.lines { list-style: none; margin: 0; padding: 0; }
.capx ul.lines li {
  font-size: .9375rem; color: var(--muted); line-height: 1.5;
  padding: .6rem 0; border-top: 1px solid var(--line);
}
.capx ul.lines li b { color: var(--paper); font-weight: 600; }
.capx .tags { margin-top: 1.35rem; }
@media (hover: none) { .capx:hover { transform: none; box-shadow: none; border-color: var(--line); } }

/* ============================================================
   CLIENT WALL
   Every client set the way that brand sets its own name —
   typographic treatment only, never a reproduced logo.
   ============================================================ */

.cwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0; }
.cwall li {
  list-style: none; border-top: 1px solid var(--line);
  padding: 1.05rem .5rem 1.05rem 0; color: #2a2823; line-height: 1.1;
  transition: color .2s;
}
.cwall li:hover { color: var(--gold-deep); }
.cl-a { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.045em; }
.cl-b { font-family: var(--mono); font-weight: 500; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; }
.cl-c { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: .02em; text-transform: uppercase; }
.cl-d { font-family: var(--body); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; }
.cl-e { font-family: var(--display); font-weight: 400; font-size: 1.3rem; font-style: italic; letter-spacing: -.01em; }
.cl-f { font-family: var(--mono); font-weight: 400; font-size: 1rem; letter-spacing: .03em; }
@media (max-width: 620px) {
  .cwall { grid-template-columns: 1fr 1fr; }
  .cl-a { font-size: 1.05rem } .cl-b { font-size: .8rem } .cl-c { font-size: .95rem }
  .cl-d { font-size: 1rem } .cl-e { font-size: 1.05rem } .cl-f { font-size: .85rem }
}

/* ============================================================
   LIVE MODEL READOUT
   Values fetched from the forecast's own output file. Bars are
   set from the real probabilities, so the motion carries data
   rather than decorating.
   ============================================================ */

.live { margin-top: 2.5rem; border-top: 1.5px solid var(--gold); }
.live-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 0 1.25rem;
  font-family: var(--mono); font-size: .75rem; color: #8b8780;
}
.live-status { display: inline-flex; align-items: center; gap: .55rem; }
.live-head .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2.8s var(--ease) infinite; }
.live-when { color: var(--gold); }
.live-meta { color: #8b8780; }

.live-rows { list-style: none; margin: 0; padding: 0; }
.live-rows li {
  display: grid; grid-template-columns: 2rem minmax(8rem, 13rem) 1fr 4.5rem;
  gap: .9rem; align-items: center;
  padding: .8rem 0; border-top: 1px solid #242426;
  font-size: .9375rem;
}
.live-pos { font-family: var(--mono); font-size: .8125rem; color: #6f6b64; }
.live-team { color: #fff; font-weight: 500; letter-spacing: -.01em; }
.live-bar { height: 7px; background: #242426; border-radius: 999px; overflow: hidden; }
.live-bar i {
  display: block; height: 100%; width: 0; background: var(--gold); border-radius: 999px;
  transition: width 1.1s var(--ease);
}
.live-val { font-family: var(--mono); font-size: .8125rem; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }

.live-foot { margin: 1.5rem 0 0; font-size: .875rem; }
.ilink { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(236,208,111,.4); }
.ilink:hover { border-bottom-color: var(--gold); }

.live.is-error .live-when { color: #b9b9bd; }
.live.is-error .live-head .live-dot { background: #6f6b64; animation: none; }

@media (max-width: 620px) {
  .live-rows li { grid-template-columns: 1.6rem 1fr 4.5rem; gap: .6rem; font-size: .875rem; }
  .live-bar { display: none; }
  .live-head { font-size: .6875rem; }
}

/* ---------- faint grid on the dark grounds ---------- */
.band-dark, .foot {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}
.band-gold {
  background-image:
    linear-gradient(to right, rgba(11,11,12,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- architecture diagrams (projects) ---------- */
.diagram { margin: 1.25rem 0 0; }
.diagram img { border: 1px solid var(--line); border-radius: 12px; background: #08080b; }
.diagram figcaption {
  font-family: var(--mono); font-size: .6875rem; color: var(--muted-2);
  padding-top: .7rem; line-height: 1.6;
}

/* ============================================================
   ARTICLES
   One featured piece, then a grid. Images are covers, so they
   crop; the label rail carries the dashboard link where one
   exists.
   ============================================================ */

.feat {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  text-decoration: none; margin-bottom: 1.5rem;
  transition: border-color .22s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feat:hover { border-color: var(--paper); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,11,12,.11); }
.feat-media { aspect-ratio: 16/10; overflow: hidden; background: var(--ink-3); }
.feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.feat:hover .feat-media img { transform: scale(1.04); }
.feat-body { padding: clamp(1.6rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.feat-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.035em; line-height: 1.08; margin-bottom: .85rem; }
.feat-body p { color: var(--muted); margin-bottom: 1.4rem; }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; } }

.arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.art {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: border-color .22s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.art:hover { border-color: var(--paper); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11,11,12,.1); }
.art-media { aspect-ratio: 16/10; overflow: hidden; background: var(--ink-3); }
.art-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.art:hover .art-media img { transform: scale(1.05); }
.art-body { padding: 1.3rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.art-body h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: .55rem; }
.art-body p { font-size: .9375rem; color: var(--muted); margin-bottom: 1.2rem; }

.art-rail, .feat-rail {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: .9rem;
}
.art-rail .rank, .feat-rail .rank { color: var(--gold-deep); }
.art-rail .viz, .feat-rail .viz {
  background: rgba(138,109,16,.12); color: var(--gold-deep);
  padding: .25rem .5rem; border-radius: 5px; letter-spacing: .06em;
}
.art-go, .feat-go {
  font-family: var(--body); font-size: .875rem; font-weight: 600; color: var(--paper);
  margin-top: auto; display: flex; align-items: center; width: 100%;
  border-top: 1px solid var(--line); padding-top: .95rem;
}
.art-go::after, .feat-go::after { content: "\2192"; margin-left: auto; transition: transform .28s var(--ease); }
.art:hover .art-go::after, .feat:hover .feat-go::after { transform: translateX(5px); }
.art:hover .art-go, .feat:hover .feat-go { color: var(--gold-deep); }

/* the paired dashboard sits outside the card link, so it's its own target */
.pair { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.pair a {
  font-family: var(--mono); font-size: .75rem; text-decoration: none;
  color: var(--paper); background: var(--ink-3); padding: .5rem .8rem; border-radius: 8px;
  transition: background .18s, color .18s;
}
.pair a:hover { background: var(--paper); color: var(--gold); }

@media (hover: none) {
  .feat:hover, .art:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .feat:hover .feat-media img, .art:hover .art-media img { transform: none; }
}

/* ============================================================
   ROW LIST (articles)
   Full-width rows that expand. Uniform by construction, so no
   ragged card heights — and the dark ground gives the page a
   surface instead of a sheet of paper.
   ============================================================ */

.rowlist { border-top: 1px solid #2a2a2c; }
.row { border-bottom: 1px solid #2a2a2c; }

.row-head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 3.5rem 1fr auto 2.5rem;
  gap: 1.25rem; align-items: center;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  color: var(--on-dark); transition: color .22s;
}
.row-head:hover { color: #fff; }
.row-n { font-family: var(--mono); font-size: .8125rem; color: #6f6b64; transition: color .22s; }
.row:hover .row-n, .row.open .row-n { color: var(--gold); }
.row-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.5vw, 1.95rem); letter-spacing: -.035em; line-height: 1.1;
  color: #fff;
}
.row-meta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8b8780; display: flex; gap: .6rem; align-items: center; white-space: nowrap;
}
.row-meta .viz { background: rgba(236,208,111,.16); color: var(--gold); padding: .25rem .5rem; border-radius: 5px; letter-spacing: .06em; }

/* the plus/cross */
.row-ico { position: relative; width: 20px; height: 20px; justify-self: end; }
.row-ico::before, .row-ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform .3s var(--ease), opacity .2s;
}
.row-ico::before { width: 18px; height: 1.5px; }
.row-ico::after { width: 1.5px; height: 18px; }
.row.open .row-ico::after { transform: rotate(90deg); opacity: 0; }

/* the expanding panel */
.row-body > div {
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ease);
}
.row.open .row-body > div { max-height: 2000px; }
.row-inner {
  display: grid; grid-template-columns: 22rem 1fr; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: 0 0 2rem; align-items: start;
}
@media (max-width: 780px) { .row-inner { grid-template-columns: 1fr; } }
.row-img { border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; background: #14141a; }
.row-img img { width: 100%; height: 100%; object-fit: cover; }
.row-dek { font-size: 1.0625rem; color: #b9b9bd; margin: 0 0 1.35rem; max-width: 54ch; }
.row-acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.row-acts a {
  font-family: var(--mono); font-size: .75rem; text-decoration: none;
  padding: .6rem .95rem; border-radius: 999px; transition: background .18s, color .18s, border-color .18s;
}
.band-dark .row-acts .primary, .row-acts .primary { background: var(--gold); color: var(--paper); font-weight: 500; }
.band-dark .row-acts .primary:hover, .row-acts .primary:hover { background: #fff; color: var(--paper); }
.band-dark .row-acts .ghost, .row-acts .ghost { border: 1px solid #3a3a3d; color: #fff; }
.band-dark .row-acts .ghost:hover, .row-acts .ghost:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 620px) {
  .row-head { grid-template-columns: 2rem 1fr 1.5rem; gap: .8rem; }
  .row-meta { display: none; }
  .row-ico { width: 16px; height: 16px; }
  .row-ico::before { width: 15px } .row-ico::after { height: 15px }
}

/* reduced motion: no height animation, just show/hide */
@media (prefers-reduced-motion: reduce) {
  .row-body { transition: none; }
}

/* ============================================================
   THE STAGE — full-viewport hero
   Composition taken from the reference: transparent nav over a
   full-bleed backdrop, a hairline under it, small intro left,
   a stacked capability list right, an oversized wordmark on the
   baseline, and a thumbnail strip bottom-right.
   The backdrop images are Kartik's own project output, darkened.
   ============================================================ */

.stage {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; background: #07070a; color: #fff;
  margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h);
}
.stage-bg { position: absolute; inset: 0; z-index: 0; }
.stage-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease);
  transform: scale(1.08); filter: blur(3px) saturate(.85);
}
.stage-bg img.on { opacity: 1; }
.stage-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(7,7,10,.7) 0%, rgba(7,7,10,.5) 45%, rgba(7,7,10,.92) 100%),
    linear-gradient(to right, rgba(7,7,10,.55), rgba(7,7,10,.1) 70%);
}
.stage > .wrap { position: relative; z-index: 1; }

.stage-top {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem;
  padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: 0;
}
.stage-intro {
  max-width: 34ch; margin: 0; color: #fff;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 2.15vw, 1.95rem); line-height: 1.24; letter-spacing: -.03em;
}
.stage-intro b { font-weight: 700; }
.stage-list { list-style: none; margin: 0; padding: 0; text-align: right; }
.stage-list li {
  font-family: var(--mono); font-size: clamp(.75rem, 1vw, .9375rem);
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  padding: .34rem 0;
}

.stage-bottom { padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.stage-mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.55rem, 11.4vw, 10.5rem); line-height: .84; white-space: nowrap;
  letter-spacing: -.055em; margin: 0; color: #fff;
  text-transform: lowercase;
}
.stage-mark sup { font-size: .26em; vertical-align: super; letter-spacing: 0; color: var(--gold); }

.stage-thumbs { display: flex; gap: .5rem; align-items: flex-end; }
.stage-thumb {
  appearance: none; padding: 0; cursor: pointer; background: none;
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px; overflow: hidden;
  width: 92px; opacity: .55; transition: opacity .25s, border-color .25s, transform .25s var(--ease);
}
.stage-thumb img { display: block; width: 100%; height: auto; }
.stage-thumb:hover { opacity: .85; transform: translateY(-2px); }
.stage-thumb[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.stage-ticks { display: flex; gap: 4px; margin-top: .5rem; }
.stage-ticks i { display: block; width: 26px; height: 2px; background: rgba(255,255,255,.28); }
.stage-ticks i.on { background: var(--gold); }



@media (max-width: 780px) {
  /* space-between across a tall narrow viewport left a hole in the middle,
     so the content groups at the top and the backdrop takes the rest */
  /* let the content define the height — a fixed viewport height on a tall
     narrow screen just leaves a hole under the wordmark */
  .stage { justify-content: flex-start; min-height: 0; }
  .stage-top { grid-template-columns: 1fr; gap: 1rem; }
  .stage-list { text-align: left; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
  .stage-intro { font-size: clamp(1.2rem, 5.4vw, 1.6rem); max-width: none; }
  .stage-bottom { margin-top: clamp(2rem, 8vw, 3rem); padding-bottom: clamp(2.75rem, 9vw, 4rem); }
  .stage-mark { font-size: clamp(1.9rem, 10.6vw, 3.6rem); }
}

/* nav sits over the stage until you scroll */
.nav.over { background: transparent; border-bottom: 0; }

.nav.over .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* but the open mobile menu needs it back, or the panel has a bald corner */
.nav.over.open .brand { opacity: 1; transform: none; pointer-events: auto; }
.nav.over.open { background: var(--band-dark); }
.brand { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.nav.over::after { content: none; }

/* ---------- statement marquee ---------- */
.smq { overflow: hidden; padding: clamp(2rem, 4vw, 3.25rem) 0; background: var(--gold); }
.smq-track { display: flex; width: max-content; gap: 2.5rem; align-items: center; animation: drift 32s linear infinite; }
.smq-track span {
  font-family: var(--display); font-weight: 700; white-space: nowrap;
  font-size: clamp(1.8rem, 5vw, 4rem); letter-spacing: -.045em; color: var(--paper);
}
.smq-track b { color: rgba(11,11,12,.35); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .smq-track { animation: none; } }

/* ============================================================
   CASE STUDIES ON DARK
   The project screens are dark images in dark bezels — on white
   they float, on a dark ground they read as screens. Every
   component in a case block gets a dark counterpart here.
   ============================================================ */

.case.alt { background: #101016; }          /* a perceptible step between cases */
.case + .case { border-top: 1px solid #24242a; }
.band-dark .screen { background: #16161d; border-color: #30303a; }
.band-dark .screen-bar { background: #101017; border-bottom-color: #30303a; }

/* the rail joins the nav as one dark header stack */
.prail { background: rgba(13,13,16,.94); border-bottom: 1px solid #26262e; }
.prail a { color: #8b8780; border-color: transparent; }
.prail a:hover { color: #fff; }
.prail-track { background: #1b1b21; }
.prail-ind { background: var(--gold); }
.prail a[aria-current="true"] { color: var(--paper); background: transparent; border-color: transparent; }
.prail-track:not(.js) a[aria-current="true"] { background: var(--gold); color: var(--paper); }

/* metrics */
.band-dark .metric { border-top-color: var(--gold); }
.band-dark .mval { color: #fff; }
.band-dark .mlab { color: #fff; }
.band-dark .mnote { color: #8b8780; }

/* the rejected ledger */
.band-dark .rejected { border-top-color: var(--gold); }
.band-dark .rejected > .eyebrow { color: var(--gold); }
.band-dark .rej-list li { border-bottom-color: #26262e; }
.band-dark .rej-list s { color: #8b8780; text-decoration-color: var(--gold); }
.band-dark .rej-list span { color: #b9b9bd; }

/* honest notes */
.band-dark .note { border-left-color: var(--gold); }
.band-dark .note > .eyebrow { color: var(--gold); }
.band-dark .quote { color: #fff; }

.band-dark .stackline { color: #8b8780; }
.band-dark .footnote { color: #8b8780; }
.band-dark .diagram img { border-color: #26262e; }
.band-dark .diagram figcaption { color: #8b8780; }
.band-dark code { color: var(--gold); }

/* the case hero sits on the warm ground, so the rail needs the dark
   treatment only once it's over a dark case — it always is */


/* ============================================================
   SURFACE
   The dark bands already had a grid; the light grounds had
   nothing, so they read as blank paper. Three layers, all CSS:
   a fine grain, the same 56px grid, and a soft gold haze at the
   top of each hero so the empty area isn't a flat field.
   ============================================================ */

:root { --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.5%22/%3E%3C/svg%3E"); }

body {
  background-image:
    var(--grain),
    linear-gradient(to right, rgba(11,11,12,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.03) 1px, transparent 1px);
  background-size: 180px 180px, 56px 56px, 56px 56px;
}

/* light bands: grain + grid */
.band-white, .band-warm, .band-tint {
  background-image:
    var(--grain),
    linear-gradient(to right, rgba(11,11,12,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.035) 1px, transparent 1px);
  background-size: 180px 180px, 56px 56px, 56px 56px;
}

/* dark bands keep their grid, and pick up the grain too */
.band-dark, .foot {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
}
.band-gold {
  background-image:
    linear-gradient(to right, rgba(11,11,12,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.045) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
}

/* a soft gold haze behind every hero, so the whitespace has depth */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; top: -1px; bottom: 0;
  left: calc(-50vw + 50%); right: calc(-50vw + 50%);
  background:
    radial-gradient(72rem 34rem at 12% -12%, rgba(236,208,111,.20), transparent 62%),
    radial-gradient(48rem 26rem at 88% 8%, rgba(11,11,12,.045), transparent 60%);
  pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

.live-legend {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .35rem;
}

/* ============================================================
   LIGHTBOX
   Every content image opens full-size. Closes on the backdrop,
   the close button, or Escape. Focus returns to the image that
   opened it.
   ============================================================ */

@media (pointer: fine) {
  .zoomable { cursor: zoom-in; }
}

.lb {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7,7,10,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lb.on { display: flex; }
.lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: .85rem; }
.lb-fig img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border: 1px solid #30303a; border-radius: 10px; background: #08080b;
  animation: lbIn .32s var(--ease) both;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.lb-cap {
  font-family: var(--mono); font-size: .75rem; line-height: 1.6;
  color: #a9a59e; max-width: 74ch; margin: 0 auto; text-align: center;
}
.lb-close {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid #3a3a3d; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1; transition: background .18s, border-color .18s;
}
.lb-close:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .lb-fig img { animation: none; } }

/* ---------- row variant with no image: lines left, names right ---------- */
.row-inner.cols { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .row-inner.cols { grid-template-columns: 1fr; } }

.lines-d { list-style: none; margin: 0; padding: 0; }
.lines-d li {
  font-size: 1rem; color: #c3c0b9; line-height: 1.5;
  padding: .8rem 0; border-top: 1px solid #26262e;
}
.lines-d li:first-child { border-top: 0; padding-top: 0; }
.lines-d li b { color: #fff; font-weight: 600; }

/* client and event names, set the way each brand sets its own */
.names-h {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem;
}
.names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.35rem; align-items: baseline; }
.names li { color: #e4e1da; line-height: 1.15; transition: color .2s; }
.names li:hover { color: var(--gold); }

/* client wall on the gold band */
.band-gold .cwall li { border-top-color: rgba(11,11,12,.16); color: var(--paper); }
.band-gold .cwall li:hover { color: #fff; }

/* ============================================================
   NAV
   Brand left, links grouped in the centre. A three-column grid
   centres the link group on the page regardless of how wide the
   brand is, which edge-to-edge spacing could not do.
   ============================================================ */

.nav a:not(.brand) { position: relative; border-bottom: 0; }
.nav a:not(.brand)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .32s var(--ease);
}
.nav a:not(.brand):hover::after { right: 0; }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { right: 0; }

@media (min-width: 861px) {
  .nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav .brand { grid-column: 1; justify-self: start; }
  .nav ul { grid-column: 2; justify-self: center; gap: clamp(1.5rem, 2.6vw, 2.4rem); margin: 0; }
  .nav.over .brand { position: static; }
  .nav .nav-cta { display: none; }   /* desktop: no pill; mobile keeps it */
}



/* ============================================================
   CONTACT PILL — mobile only
   Desktop hides it (see the nav grid block above). In the mobile
   panel it's a full-width gold pill with a pulsing dot.
   ============================================================ */

.cta-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--paper);
  flex: 0 0 auto; animation: pulse 2.8s var(--ease) infinite;
}

@media (max-width: 860px) {
  .nav ul li.nav-cta { margin: 1rem 0 .35rem; }
  .nav .nav-cta a {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%; padding: 1rem 1.2rem;
    background: var(--gold); border: 1px solid var(--gold); border-radius: 999px;
    color: var(--paper); font-family: var(--body); font-size: 1.0625rem; font-weight: 600;
    border-bottom: 0;
    transition: background .2s, color .2s;
  }
  .nav .nav-cta a::after { content: none; }
  .nav .nav-cta a:active { background: #fff; }
}

/* ============================================================
   EVENT TIMELINE (experience)
   One month per row, newest first. Months with two events show the
   month once and both events together. Rows fade in and out as they
   cross the middle of the screen, in either scroll direction.
   ============================================================ */

.tl { margin-top: 2.75rem; border-top: 1px solid var(--line-2); }

.tl-yr {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.04em;
  color: var(--gold-deep); margin: 0; padding: 2.4rem 0 .4rem;
}

.tl-row {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  padding: clamp(1.4rem, 2.8vw, 2.2rem) 0; border-bottom: 1px solid var(--line);
}
.tl-when {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -.02em;
  color: var(--paper);
}

.tl-events { display: flex; flex-direction: column; gap: .7rem; }

/* event and its auction/draft on the left, sport pinned right */
.tl-line { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; }
.tl-name { min-width: 0; }
.tl-sport {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); background: rgba(138,109,16,.14);
  padding: .34rem .6rem; border-radius: 5px; white-space: nowrap; align-self: center;
}
/* base sets size and colour; the ev-* modifiers carry each brand's own
   typographic treatment, the same system as the client wall */
.tl-event { font-size: clamp(1.2rem, 2.7vw, 2.05rem); line-height: 1.12; color: var(--paper); }
.ev-a { font-family: var(--display); font-weight: 700; letter-spacing: -.042em; }
.ev-b { font-family: var(--mono); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; font-size: clamp(.95rem, 2vw, 1.5rem); }
.ev-c { font-family: var(--display); font-weight: 600; letter-spacing: .005em; text-transform: uppercase; font-size: clamp(1.05rem, 2.35vw, 1.78rem); }
.ev-d { font-family: var(--body); font-weight: 500; letter-spacing: -.02em; }
.ev-e { font-family: var(--display); font-weight: 400; font-style: italic; letter-spacing: -.015em; }
.ev-f { font-family: var(--mono); font-weight: 400; letter-spacing: .02em; font-size: clamp(.95rem, 1.95vw, 1.42rem); }
.tl-kind {
  font-family: var(--body); font-style: italic; font-weight: 500;
  font-size: clamp(.9rem, 1.5vw, 1.15rem); color: var(--gold-deep);
  letter-spacing: -.01em; margin-left: .35rem; white-space: nowrap;
}

@media (max-width: 680px) {
  .tl-row { grid-template-columns: 1fr; gap: .45rem; padding: 1.25rem 0; }
  .tl-yr { font-size: 1.5rem; padding-top: 1.9rem; }
  .tl-kind { display: inline-block; margin-left: .3rem; }
  /* the sport drops under the event rather than squeezing beside it */
  .tl-line { grid-template-columns: 1fr; gap: .45rem; }
  .tl-sport { justify-self: start; }
}

/* older years stay collapsed until asked for — the list is long */
.tl-more { display: none; }
.tl.show-all .tl-more { display: grid; }
.tl.show-all p.tl-more { display: block; }
.tl-toggle-wrap { margin-top: 2rem; }
.tl-toggle { cursor: pointer; }

.ilink-d { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(138,109,16,.4); }
.ilink-d:hover { border-bottom-color: var(--gold-deep); }