@font-face{font-family:"Atlas Grotesk";src:url("fonts/AtlasGrotesk-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atlas Grotesk";src:url("fonts/AtlasGrotesk-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Druk";src:url("fonts/Druk-Heavy.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}

:root{
  --paper:#161616; --ink:#f2f2f2; --green:#00ff00; --muted:#8a8a8a;
  --line:rgba(242,242,242,.18);
  --sans:"Atlas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Druk","Atlas Grotesk",Helvetica,Arial,sans-serif;
  --pad:26px; --nav-h:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* never let the browser fake a bold or italic — if a face is missing we want
     to SEE it, not get a smeared synthetic version of Druk */
  font-synthesis:none}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--green);color:#161616}

header.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--pad);background:var(--paper);border-bottom:1px solid var(--line)}
.nav .mark{display:flex;align-items:center}
.nav .mark img{height:22px;width:auto}
.nav ul{display:flex;gap:22px;list-style:none;font-size:13px}
.nav a{opacity:.55;transition:opacity .18s,color .18s}
.nav a:hover{opacity:1;color:var(--green)}
.nav a.on{opacity:1;color:var(--green)}

main{padding:0 var(--pad)}
html{scroll-behavior:smooth}
section{padding:64px 0;border-top:1px solid var(--line);scroll-margin-top:var(--nav-h)}
section:first-child{border-top:0;padding-top:56px}
.split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}
h2.sect{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* homepage top: copy left, logo right */
.home-top{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(40px,6vw,90px);align-items:start}
/* first-visit intro overlay */
#intro{position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;align-items:center;justify-content:flex-start;
  padding:6vh var(--pad);overflow-y:auto;transition:opacity .55s ease}
#intro.done{opacity:0;pointer-events:none}
#intro .inner{width:100%;max-width:none}
#intro h1,#intro p{font-family:var(--display);font-weight:900;
  font-size:clamp(21px,3.1vw,48px);line-height:1.05;letter-spacing:-.008em;margin:0}
#intro .intro > * + *{margin-top:1.4em}
#intro.ready{cursor:pointer}
#intro .g{color:var(--green)}
#intro span{transition:opacity .2s ease}
body.locked{overflow:hidden}
.home-copy{max-width:48ch}
.intro h1,.intro p{font-family:var(--display);font-weight:900;text-transform:none;
  font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-.005em;margin:0}
.intro h1 + p,.intro p + p{margin-top:1.5em}
.intro .g{color:var(--green)}
/* logo top-aligns with the first line of copy; the O's tail hangs into the
   space below, which is the lockup doing its own thing rather than dead air */
.logo-block{display:flex;justify-content:flex-end;align-items:flex-start}
.logo-block img{width:100%;max-width:300px;height:auto}

/* section rows: label left, content right */
.row2{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:start}
.row2 .big{font-size:clamp(19px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em;max-width:34ch}
.row2 .big p + p{margin-top:1em}
.namelist{columns:3;column-gap:32px}
.namelist span{display:block;break-inside:avoid;font-size:clamp(16px,1.5vw,20px);line-height:1.75}

.prose{max-width:66ch}
.prose p{font-size:16px;line-height:1.6}
.prose p + p{margin-top:1.1em}
.prose a{color:var(--green);border-bottom:1px solid rgba(0,255,0,.35)}
.prose a:hover{border-color:var(--green)}

/* simple two/three/four-column lists */
.cols-2{columns:2;column-gap:26px}
.cols-3{columns:3;column-gap:26px}
.cols-4{columns:4;column-gap:26px}
.cols-2 span,.cols-3 span,.cols-4 span{display:block;break-inside:avoid;line-height:1.75}

/* work index table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);padding-bottom:10px}
.tbl td{padding:18px 18px 18px 0;vertical-align:top;font-size:14px;
  border-top:1px solid var(--line)}
.tbl tbody tr:first-child td{border-top:0;padding-top:10px}
.tbl .proj-cell{width:20%;font-weight:500;font-size:15px}
.tbl .proj-cell a{display:block}
.tbl .about{width:34%;color:var(--muted);line-height:1.5;max-width:46ch}
.tbl .svc{width:26%}

/* thumbnail sits in its own reserved column and fades in on row hover, so
   nothing reflows */
.tbl .thumb{width:150px;padding-right:22px}
.tbl .tw{display:block;width:150px;aspect-ratio:4/3;overflow:hidden;background:transparent}
.tbl .tw img{width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.04);transition:opacity .3s ease,transform .5s ease}
.tbl tbody tr:hover .tw img{opacity:1;transform:scale(1)}

.chip{display:inline-block;border:1px solid var(--line);border-radius:2px;
  padding:3px 9px;margin:0 5px 6px 0;font-size:12px;color:var(--ink);
  transition:border-color .15s ease,color .15s ease}
.tbl tbody tr{transition:color .15s}
.tbl tbody tr:hover .proj-cell a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.tbl tbody tr:hover .about{color:var(--ink)}
.tbl tbody tr:hover .chip{border-color:var(--green);color:var(--green)}

/* press */
.list{border-top:1px solid var(--line)}
.list a.item{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:color .15s}
.list a.item:hover{color:var(--green)}
.list .o{font-size:13px;font-weight:500;color:var(--ink);text-align:right}
.list a.item:hover .o{color:var(--green)}
.list .q{font-weight:400}
.qa-intro{max-width:56ch;margin-bottom:20px;font-size:clamp(17px,1.7vw,21px);line-height:1.4}

/* Q&A hover index. Quote sits beside the names rather than above them, so the
   two halves read as one unit and the section stops being a tall column. */
.qa-wrap{--qsize:clamp(20px,2.4vw,32px);margin-top:0}

/* Quote runs the full width of the column, so most land on one line and the
   longest on two. Height is fixed at two lines + attribution so swapping
   quotes never shifts the list underneath. */
/* Content sits at the BOTTOM of the reserved box. The box has to stay a fixed
   height so a two-line quote doesn't shove the list, but bottom-aligning means
   the slack falls above the quote as breathing room instead of stranding the
   name in the middle of nowhere. */
/* Every quote is forced onto a single line (JS shrinks the few long ones to
   fit), so the block is naturally the same height for all of them. No
   reserved space, no gap, and nothing shifts when the quote changes. */
.qa-stage{margin-bottom:18px}
.qa-stage blockquote{font-family:var(--display);font-weight:900;
  font-size:var(--qsize);letter-spacing:-.008em;
  /* line-height is a fixed pixel value, NOT a multiple of font-size. The
     auto-fit shrinks long quotes, and a relative line-height would shrink
     the block with them — moving the list under the cursor. */
  line-height:calc(var(--qsize) * 1.15);
  margin:0;white-space:nowrap;overflow:hidden;transition:opacity .18s ease}
.qa-who{margin-top:10px;font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);transition:opacity .18s ease}

.qa-index{columns:3;column-gap:30px;border-top:1px solid var(--line);padding-top:22px}
.qa-index .qname{display:block;break-inside:avoid;padding:5px 0;font-size:14px;
  line-height:1.35;color:var(--muted);transition:color .15s ease}
.qa-index .qname:hover,.qa-index .qname.on{color:var(--ink)}
.qa-index .qname.on{font-weight:500}
.qa-intro a{color:var(--green);border-bottom:1px solid rgba(0,255,0,.35)}
.qa-intro a:hover{border-color:var(--green)}

/* project page */
.crumb{font-size:13px;color:var(--muted)}
.crumb:hover{color:var(--green)}
h1.proj{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,42px);line-height:1;letter-spacing:-.005em;margin:22px 0 22px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  padding-top:16px;border-top:1px solid var(--line);margin-top:32px}
.facts h4{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:9px}
.facts li{list-style:none;font-size:14px;line-height:1.55}
.facts a{border-bottom:1px solid var(--line)}
.facts a:hover{color:var(--green);border-color:var(--green)}
figure{margin:0}
figure img{width:100%}

/* case study */
.case{max-width:760px}
.case .prose{max-width:none}
.fig-small{max-width:520px;margin:0 0 36px}
.case .facts{grid-template-columns:repeat(3,1fr);margin-top:40px;padding-top:20px}
figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.tk{background:rgba(242,242,242,.05);border:1px dashed var(--line);padding:12px 14px;color:var(--muted);font-size:15px}

footer{border-top:1px solid var(--line);margin-top:8px;padding:26px var(--pad) 30px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}
footer h4{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.f-id{max-width:24ch;line-height:1.45}
.f-id b{display:block;font-weight:500;color:var(--green)}
footer a{opacity:.8}footer a:hover{opacity:1;color:var(--green)}

/* Narrow desktop / small laptop windows. The two-column top squeezes the copy
   badly before the mobile breakpoint kicks in, so stack it early. This is
   deliberately separate from the 820px block — the intro panel and nav logic
   shouldn't change here. */
@media(max-width:1080px){
  .home-top{grid-template-columns:1fr}
  .home-copy{max-width:62ch}
  /* The lockup only works as a counterweight beside the copy. Stacked
     underneath it just floats, so below this width it comes out entirely —
     the T.F mark in the nav still carries the identity. */
  .logo-block{display:none}
}

@media(max-width:820px){
  :root{--pad:16px}
  .split,.row2{grid-template-columns:1fr;gap:14px}
  .cols-4,.cols-3,.namelist{columns:2}
  .home-top{grid-template-columns:1fr;gap:32px}
  .home-copy{max-width:none}
  .logo-block{display:none}   /* the T.F mark in the nav carries it on mobile */
  .case .facts{grid-template-columns:1fr 1fr}
  .tbl thead{display:none}
  .tbl tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .tbl td{display:block;padding:0;width:auto!important;border-top:0}
  .tbl .thumb{display:none}          /* no hover on touch, so no thumbnail */
  .tbl .about{margin:6px 0 9px;max-width:none}
  .facts{grid-template-columns:1fr 1fr}
  .list a.item{grid-template-columns:1fr}
  .list .o{text-align:left}
  /* phones are too narrow to fit a quote on one line at a readable size,
     so let it wrap and reserve three lines instead */
  .qa-stage blockquote{white-space:normal;min-height:calc(var(--qsize) * 3.45)}
  .qa-index{columns:1}
}

/* video case studies — 16:9 box that scales with the column */
.video{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;
  margin:0 0 36px;background:#000;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Mobile vertical rhythm on the homepage. The section padding is set inline
   in index.astro for desktop, so these need !important. Scoped with :has()
   so the work and press pages keep their own spacing. */
@media(max-width:820px){
  main > section:has(.home-top){padding:36px 0 40px !important}
  #clients{padding:56px 0 !important}
  main > section:has(.big){padding:56px 0 64px !important}
}

/* Work and press pages on mobile. Desktop section padding is generous by
   design; on a phone it reads as dead scroll. */
@media(max-width:820px){
  section{padding:44px 0}
  /* No hover on touch, so the quote box doesn't need to reserve space for
     the longest quote — let it size to its content instead. */
  .qa-stage blockquote{min-height:0}
  .qa-stage{margin-bottom:20px}
  .qa-index{padding-top:18px}
}

/* Mobile only: the whole project block is tappable, and the project name is
   styled as a link permanently — there's no hover on touch, so the visual
   cue has to be always-on. */
@media(max-width:820px){
  .tbl tbody tr{position:relative}
  .tbl .proj-cell a{
    color:var(--green);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
  }
  .tbl .proj-cell a::after{content:"";position:absolute;inset:0;z-index:2}
}