/* Layout: one column of full-width bands; ruled grids, a phosphor-green table band, one inverting footer button. */
:root {
  --paper: #F2F1EC;
  --ink: #0D0D0D;
  --rule: #CFCEC8;
  --mute: #66655F;
  --green: #A6FF8F;

  --display: 'Thunder', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* five sizes */
  --s-xs: 11px;
  --s-body: 16px;
  --s-lead: 24px;
  --s-title: clamp(36px, 5vw, 72px);
  --s-hero: clamp(96px, 17vw, 260px);

  --gut-l: max(24px, env(safe-area-inset-left, 0px));
  --gut-r: max(24px, env(safe-area-inset-right, 0px));
  --bar: 45px;
  color-scheme: light;
}

@font-face { font-family: 'Thunder'; src: url('fonts/thunder-black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/grotesk-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--s-body)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { padding-left: var(--gut-l); padding-right: var(--gut-r); }
.mono { font-family: var(--mono); font-size: var(--s-xs); line-height: 1.5; }
.caps { text-transform: uppercase; letter-spacing: 0.06em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: inherit;
  border-bottom: 1px solid var(--rule);
}
.bar nav { height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bar a { text-decoration: none; white-space: nowrap; }
.bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bar .links { display: flex; gap: 24px; }

/* Hero */
.hero { padding-block: 120px 0; }
.hero h1 {
  margin: 0; font: 900 var(--s-hero)/0.74 var(--display); text-transform: uppercase;
  overflow: hidden; padding-bottom: 0.04em;
}
.hero h1 span { display: block; }
.hero h1 a.name { display: block; width: fit-content; color: inherit; text-decoration: none; }
/* inline links: a soft green highlight instead of an underline */
.hl { color: inherit; text-decoration: none; background: rgb(166 255 143 / 0.5); border-radius: 4px; padding: 0 3px; margin: 0 -1px; transition: background-color 160ms ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl:hover, .hl:focus-visible { background: rgb(166 255 143 / 1); outline: none; }
.hero h1 i { font-style: normal; display: inline-block; white-space: pre; }
.hero-intro { margin-top: 32px; max-width: 46ch; }
.hero-intro p { margin: 0; }
.btn {
  display: inline-block; margin-top: 24px; padding: 14px 22px; background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none; transition: background-color 200ms ease, color 200ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--green); color: var(--ink); }

/* Logo grid */
.logos { padding-block: 96px 0; }
.logos ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.logos li {
  height: 112px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-weight: 600; color: var(--mute); line-height: 1.2;
}
.logos li.head { font: 400 var(--s-xs)/1.5 var(--mono); letter-spacing: 0.06em; }
/* Logos: one grey silhouette each (the SVG is used as a mask), sized by tools/logo_sizes.py so they read evenly */
.logos .logo {
  display: block; width: calc(var(--w) * var(--logo-k, 1)); height: calc(var(--h) * var(--logo-k, 1));
  background: #A8A7A0; transition: background-color 200ms ease; /* lighter than --mute so the grid sits back */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.logos li:hover .logo { background: var(--ink); }
.logos .logo-text { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: color 200ms ease; }
.logos li:hover .logo-text { color: var(--ink); }

/* Green table band (work history, recognition) */
.band { background: var(--green); margin-top: 160px; }
.band h2 { margin: 0; padding-block: 28px 0; display: flex; align-items: center; gap: 10px; font: 600 var(--s-lead)/1.2 var(--sans); text-transform: uppercase; }
.band h2::before { content: ""; width: 14px; height: 14px; background: var(--ink); }
.table { padding-block: 72px 96px; }
.table { --cols: 200px minmax(0, 1fr) 224px; } /* fixed Year and Agency columns, each wide enough for its label + push gap + longest value; Brand takes the rest */
.table.three { --cols: minmax(90px, 1fr) minmax(0, 3fr) minmax(0, 4.4fr); }
.thead, .row-main { display: grid; grid-template-columns: var(--cols); gap: 16px; }
/* Label row: sticks part-way down the screen, transparent, laid over the rows.
   Rows passing under it nudge their cells right so they never collide with a label (site.js sets --push). */
.thead {
  position: sticky; top: max(calc(env(safe-area-inset-top, 0px) + var(--bar) + 24px), 38vh); z-index: 2;
  /* Same line box as a row's text. Its 16px bottom padding (1px rule + 15px row padding)
     makes it come to rest on the last row's text line. */
  line-height: 1.4; padding-block: 0 16px;
  pointer-events: none;
  color: var(--green); mix-blend-mode: difference; /* reads ink on the green band, green over an inverted row */
}
/* rows and their separators run edge to edge; content stays on the page grid via padding */
.rows { margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.row { border-bottom: 1px solid var(--ink); font-size: var(--s-xs); line-height: 1.4; padding-inline: var(--gut-l) var(--gut-r); }
.row-main { padding-block: 15px; }
.row-main > span { min-width: 0; overflow: clip; overflow-clip-margin: 2px; }
.row-main .v { display: inline-block; max-width: 100%; transform: translate3d(var(--push, 0px), 0, 0); }
.row-main .y { font-family: var(--mono); }
.row-main .b { font-weight: 600; }
.detail { display: none; }
.detail .dimg { display: none; }
.row[data-detail] { cursor: default; }
.row[data-href] { cursor: pointer; }
.row.open, .row:focus-visible { background: var(--ink); color: var(--green); }
.row.open .detail, .row:focus-visible .detail { display: grid; grid-template-columns: var(--cols); column-gap: 16px; row-gap: 10px; padding-bottom: 20px; }
/* the one-liner stays inside the brand column, with room on the right for the push, so it never reaches the Agency label */
.detail p { grid-column: 2 / 3; padding-right: 96px; max-width: calc(68ch + 96px); margin: 0; line-height: 1.6; color: var(--paper); }
.detail a { grid-column: 2 / 3; justify-self: start; font-family: var(--mono); color: var(--green); }
.detail > * { transform: translate3d(var(--push, 0px), 0, 0); } /* follows the brand name when the row is pushed */
@media (hover: hover) {
  .row[data-detail]:hover { background: var(--ink); color: var(--green); }
}
.row:focus { outline: none; }
.row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* About */
.intro { padding-block: 96px 0; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.intro .portrait { position: relative; flex: 0 0 auto; width: min(420px, 100%); aspect-ratio: 1; }
.intro .portrait img { width: 100%; height: 100%; object-fit: cover; }
.intro .text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.title { margin: 0; font: 600 var(--s-title)/1 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.intro p { margin: 0; max-width: 640px; }
.band.after-intro { margin-top: 140px; }

/* Project */
.p-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 82vh; background: var(--rule); overflow: hidden; }
.p-hero img { width: 100%; height: 100%; object-fit: cover; }
.p-head { padding-block: 56px 0; display: flex; flex-direction: column; gap: 48px; }
.p-head .eyebrow { display: block; margin-bottom: 16px; }
.p-head .title { max-width: 1100px; }
.p-facts { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.p-facts div { padding: 12px 16px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.p-facts div:first-child { padding-left: 0; }
.p-facts div:last-child { border-right: 0; }
.p-facts dt { font: 400 var(--s-xs)/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.p-facts dd { margin: 6px 0 0; }
.story { padding-block: 120px 0; display: flex; flex-direction: column; gap: 80px; }
.block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.block h2 { margin: 0; font: 400 var(--s-xs)/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.block h2::before { content: "■ "; }
.lead { margin: 0; max-width: 760px; font-size: var(--s-lead); line-height: 1.4; letter-spacing: -0.01em; }
.steps { margin: 0; padding: 0; list-style: none; max-width: 760px; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding-block: 16px; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.steps li span:first-child { font: 400 var(--s-xs)/1.5 var(--mono); padding-top: 3px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pair figure { margin: 0; position: relative; aspect-ratio: 1; background: var(--rule); overflow: hidden; }
.pair img { width: 100%; height: 100%; object-fit: cover; }
.pair figcaption { margin-top: 8px; color: var(--mute); }
.gate { margin-top: 120px; }
.gate div { padding-block: 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.gate a { font-weight: 600; text-underline-offset: 4px; }

/* Footer: the whole block is the button */
.cta {
  display: flex; align-items: flex-end; min-height: min(520px, 70vh);
  padding-block: 24px max(32px, env(safe-area-inset-bottom, 0px));
  padding-left: var(--gut-l); padding-right: var(--gut-r);
  font: 600 var(--s-title)/1 var(--sans); letter-spacing: -0.04em; text-decoration: none;
  color: var(--ink); background: var(--paper);
  transition: background-color 200ms ease, color 200ms ease;
}
.ext { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.22em; vertical-align: baseline; }
.cta:hover, .cta:focus-visible { color: var(--paper); background: var(--ink); outline: none; }
footer.after { margin-top: 160px; }

/* Pixel dissolve canvas sits over its image */
.px-band { position: absolute; image-rendering: pixelated; pointer-events: none; }
.portrait, .p-hero, .pair figure { position: relative; }

/* 404 */
.lost { padding-block: 120px 0; }

/* Load sequence (home): ground fades black to paper, letters rise */
@keyframes ground { from { background-color: var(--ink); } to { background-color: var(--paper); } }
@keyframes rise { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.home { animation: ground 1000ms ease-in 500ms both; }
.home .hero h1 i { animation: rise 1400ms cubic-bezier(0.19, 1, 0.22, 1) both; animation-delay: calc(300ms + var(--i) * 30ms); }
.home .hero-intro { animation: fade 800ms ease 1400ms both; }

@media (max-width: 900px) {
  .logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-facts div, .p-facts div:first-child { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .block { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --gut-l: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px)); }
  .bar .links { gap: 16px; }
  .bar.caps { letter-spacing: 0.02em; }
  .bar .who { overflow: hidden; text-overflow: ellipsis; }
  .hero { padding-block: 72px 0; }
  .logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { height: 64px; padding: 0 8px; }
  .logos li.head { font-size: 10px; letter-spacing: 0.04em; }
  .logos { --logo-k: 0.56; }
  .band { margin-top: 112px; }
  .thead { display: none; }
  .row-main, .table.three .row-main { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); row-gap: 2px; }
  .row-main .a, .row-main .r, .row-main .c { grid-column: 2; }
  .detail p { padding-right: 0; }
  .cta { min-height: 260px; }
  .detail .dimg { display: block; position: relative; margin: 4px 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
  .detail .dimg img, .detail .dimg canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .detail .dimg canvas { image-rendering: pixelated; }
  /* rows open and close smoothly: the wrapper animates its height from 0 to the content's height */
  .row { transition: background-color 300ms ease, color 300ms ease; }
  .dwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms cubic-bezier(.3,.7,.2,1); }
  .row.open .dwrap { grid-template-rows: 1fr; }
  .row .dwrap > .detail, .row.open .dwrap > .detail, .row:focus-visible .dwrap > .detail { display: block; padding: 0 0 0 80px; min-height: 0; overflow: hidden; } /* block layout so nothing gets squashed mid-animation; 80px = year column + gap */
  .dwrap > .detail > * + * { margin-top: 10px; }
  .dwrap > .detail > :last-child { margin-bottom: 20px; }
  .dwrap > .detail > * { opacity: 0; transition: opacity 250ms ease; }
  .row.open .dwrap > .detail > * { opacity: 1; transition-delay: 120ms; }
  /* rows you've scrolled past stay open on green; only the row at the reading line is inverted */
  .row.open { background: transparent; color: inherit; }
  .row.open .detail p { color: var(--ink); }
  .row.current { background: var(--ink); color: var(--green); }
  .row.current .detail p { color: var(--paper); }
  .pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .home, .home .hero h1 i, .home .hero-intro { animation: none; }
  .cta { transition: none; }
  @view-transition { navigation: none; }
}

/* Hover card: follows the cursor over a work-history row (mouse only), with the one-liner and a project image */
.tip {
  position: fixed; left: 0; top: 0; z-index: 50; width: 320px; pointer-events: none;
  background: var(--ink); color: var(--paper); opacity: 0; transition: opacity 160ms ease;
  will-change: transform, opacity;
}
.tip.on { opacity: 1; }
.tip figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
.tip figure[hidden] { display: none; }
.tip img, .tip canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tip canvas { image-rendering: pixelated; }
.tip .body { padding: 12px 14px 14px; }
.tip p { margin: 0; font-size: var(--s-xs); line-height: 1.6; }
.tip .more { display: block; margin-top: 12px; font: 400 var(--s-xs)/1.5 var(--mono); color: var(--green); }
.tip .more:empty { display: none; }
.tip.short { width: auto; }
.tip.short .body { padding: 8px 12px 9px; }
.tip.portrait { width: 220px; }
.tip.portrait figure { aspect-ratio: 1; }
@media (prefers-reduced-motion: reduce) { .tip, .row, .dwrap, .dwrap > .detail > * { transition: none !important; } }