:root { --ink:#0a0a0a; --ink-2:#151515; --paper:#fffaeb; --muted:rgba(255,250,235,.66); --faint:rgba(255,250,235,.16); --tungsten:#ffbf73; --ember:#ff9a3d; --gutter:clamp(16px,4vw,48px);
          --sc-overlay:rgba(10,10,10,.94); --sc-ink:#fffaeb; --sc-bg:#0a0a0a; --sc-muted:rgba(255,250,235,.66); --sc-line:rgba(255,250,235,.16); --sc-tile:#151515; --sc-focus:#ffbf73 }
  * { box-sizing:border-box } html { background:var(--ink) }
  html { color-scheme:dark }
body { margin:0; background:var(--ink); color:var(--paper); touch-action:manipulation; -webkit-tap-highlight-color:transparent; font:16px/1.5 "Instrument Sans","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden }
  a { color:inherit } button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
  .nav { position:fixed; inset:0 0 auto 0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter) 28px; background:linear-gradient(#0a0a0ad9,#0a0a0a00) }
  .logo { display:block; width:88px; height:auto }
  .nav-links { display:flex; gap:24px; align-items:center; font-size:13px }
  .nav-links button { opacity:.72; padding:4px 0 } .nav-links button:hover { opacity:1 }
  .nav-links button { opacity:.6 } .nav-links button[aria-pressed="true"] { opacity:1; font-weight:500 }
  .nav-links button[hidden] { display:none }
  .nav-cta { border:1px solid var(--faint); padding:7px 14px; font-weight:500; font-size:13px; letter-spacing:-.005em; text-decoration:none; opacity:.85 }
  .nav-cta:hover { background:var(--tungsten); color:var(--ink); border-color:var(--tungsten) }
  .section { position:relative; padding:96px var(--gutter) 120px; max-width:1400px; margin:0 auto }
  .hero { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap }
  .filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px }
  .filters select { appearance:none; -webkit-appearance:none; font:inherit; color:var(--paper); background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fffaeb' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center; border:1px solid var(--faint); padding:8px 28px 8px 11px; min-width:160px; cursor:pointer }
  .filters select:hover { border-color:#ffbf7373 } .filters select.on { border-color:var(--tungsten) }
  .filters select option, .filters select optgroup { background:var(--ink-2); color:var(--paper) }
  .filters .count { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums }
  .filters .reset { color:var(--muted); padding:8px 4px; text-decoration:underline; text-underline-offset:3px } .filters .reset:hover { color:var(--paper) }
  .toolbar { margin-top:28px; padding:14px 0 0; border-top:1px solid var(--faint) }
  @media (max-width:720px) { .filters select { min-width:0; flex:1 1 40% } .filters .count { width:100%; margin:4px 0 0 } }
  .kicker { margin:0 0 16px; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
  .display { margin:0 0 0 -.04em; font-weight:500; font-stretch:92%; font-size:clamp(40px,5.2vw,80px); line-height:.98; letter-spacing:-.045em; max-width:14ch }
  .display em { font-style:italic; font-weight:400; color:var(--tungsten); letter-spacing:-.035em; padding-left:.04em }
  .work { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:dense; gap:28px 12px; margin-top:20px }

  .work-item { position:relative; margin:0; text-align:left; padding:0; cursor:pointer }
  .work-item .frame { position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:9/16 }
  .work-item.wide { grid-column:span 2 } .work-item.wide .frame { aspect-ratio:16/9 }
  .work-item .frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .3s; pointer-events:none }
  .work-item:hover .frame::after, .work-item:focus-visible .frame::after { box-shadow:inset 0 0 0 1px #ffbf7373 }
  .work-item video, .work-item .sc-tile { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; aspect-ratio:auto }
  .work-item video { filter:brightness(.78) saturate(.9); transition:filter .5s }
  .work-item:hover video, .work-item:focus-visible video { filter:none }
  .work-item figcaption { padding:9px 2px 0; color:var(--muted); font-size:12.5px; line-height:1.4 }
  .work-item figcaption span { display:block; color:var(--paper); font-size:14px; font-weight:500; letter-spacing:-.015em }
  .work-item figcaption .meta { display:block; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; opacity:.8; margin-top:1px }
  .work-item .pick { position:absolute; top:10px; left:10px; width:6px; height:6px; background:var(--tungsten) }
  .work-item .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:11px 18px; background:var(--tungsten); color:var(--ink); font-size:14px; font-weight:500; line-height:1; white-space:nowrap; letter-spacing:-.01em }
  .work-item .play:before { content:"▶︎ "; font-size:11px }
  .work-item .sc-tile span { display:none }
  /* playables have no still: the game's name on a warm field, so the wall never reads as empty */
  .work-item .sc-tile { background:radial-gradient(120% 70% at 50% 100%, rgba(255,191,115,.28), transparent 70%), linear-gradient(180deg, #1d1a15, var(--ink-2)); box-shadow:inset 0 0 0 1px var(--faint) }
  .work-item .sc-tile-name { position:absolute; left:16px; right:72px; top:16px; color:var(--paper); font-size:clamp(18px,1.9vw,26px); font-weight:500; line-height:1.1; letter-spacing:-.02em; text-align:left }
  .empty { margin-top:48px; color:var(--muted) }
  .footer { display:flex; align-items:center; justify-content:space-between; padding:28px var(--gutter); border-top:1px solid var(--faint); color:var(--muted); font-size:13px }
  .footer a { text-decoration:none } .footer a:hover { color:var(--paper) }
  .sc-phone { border-radius:0; padding:0 } .sc-screen { border-radius:0 } .sc-acts button, .sc-acts a, .sc-nav button { border-radius:0 }
  .sc-acts .sc-copy { background:var(--tungsten); color:var(--ink); border-color:var(--tungsten) } .sc-acts .sc-copy:hover { background:var(--paper) }
  @media (max-width:1100px) { .work { grid-template-columns:repeat(4,minmax(0,1fr)) } }
  @media (max-width:900px) { .work { grid-template-columns:repeat(3,minmax(0,1fr)) } }
  @media (max-width:720px) {
    .work { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 8px } .work-item.wide { grid-column:span 2 }
    .section { padding-top:80px } .toolbar { margin-top:20px; padding:12px 0 }
    .nav { padding:12px var(--gutter) 20px } .logo { width:64px }
    .nav-links { gap:12px; white-space:nowrap } .nav-links button { font-size:13px; padding:4px 0 }
    .nav-cta { padding:6px 10px; font-size:12px }
    .section { padding-top:88px }
    .work-item figcaption { font-size:12px } .work-item figcaption span { font-size:13px } .nav { padding:14px var(--gutter) 22px } .nav-links { gap:14px } .nav-links button { font-size:13px } }
  @media (prefers-reduced-motion:reduce) { .work-item, .work-item video { transition:none } }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--tungsten); color:var(--ink); padding:8px 12px } .skip:focus { left:12px }
.work-item { scroll-margin-top:200px } .n, .count { font-variant-numeric:tabular-nums }