/* ── fonts ──────────────────────────────────────────────────────────────
   Georgia is a system serif and is never downloaded. Everything else is
   self-hosted from npm (@fontsource), 148 KB total.                      */
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-900-normal.woff2)format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(../fonts/nunito-sans-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(../fonts/nunito-sans-latin-800-normal.woff2)format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Cousine;src:url(../fonts/cousine-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f5f4f1;
  --ink:#07172f;
  --ink-2:#2d3b4e;
  --ink-3:#526071;
  --ink-4:#788397;
  --blue:#1281fa;
  --blue-link:#2f5bff;
  --rule:rgba(7,23,47,.13);
  --hair:rgba(7,23,47,.08);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Nunito Sans",var(--sans);
  --frame:1420px;   /* outer rule / footer width  (130 → 1550 in Figma) */
  --col:1308px;     /* content column             (186 → 1494 in Figma) */

  /* ── header, one spec for every page ──────────────────────────────────
     Home, gallery and both case studies used to carry their own height,
     container width, gutter, background and wordmark size, which is why
     the bar shifted when you moved between them. Everything below is now
     the single source of truth; no page overrides it. */
  --topbar-h:88px;
  --topbar-w:1499px;        /* max width of the bar's inner row — same as the
                               home content column, so the wordmark and the
                               hero stay on one line at any viewport */
  --topbar-gutter:32px;     /* distance to the viewport edge  */
  --topbar-bg:rgba(255,253,248,.88);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit}

.frame{width:min(100% - var(--topbar-gutter) * 2,var(--frame));margin-inline:auto}
.col{width:min(100% - var(--topbar-gutter) * 2,var(--col));margin-inline:auto}

/* ── topbar ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--topbar-h);
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
}
/* .case__bar is the case-study markup for the same row. Same rule, so the
   two never drift apart again. */
.topbar__in,.case__bar{
  height:100%;display:flex;align-items:center;gap:24px;
  width:min(100% - var(--topbar-gutter) * 2,var(--topbar-w));margin-inline:auto;
}
.wordmark{
  font-family:var(--display);font-weight:800;font-size:28px;line-height:38px;
  letter-spacing:-1.7px;text-decoration:none;white-space:nowrap;
}
/* colour and the holographic sweep: assets/css/wordmark.css */
.disciplines{
  display:flex;align-items:center;gap:16px;
  padding:9px 16px;border:1px solid #e4e4e4;border-radius:999px;background:#fff;
  font-family:var(--display);font-weight:700;font-size:13px;line-height:18px;
}
.disciplines i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:30px}
.navlinks a{
  font-family:var(--display);font-weight:700;font-size:16px;line-height:22px;
  letter-spacing:-.2px;text-decoration:none;
}
.navlinks a[aria-current]{color:var(--blue)}
.navlinks a[download]{color:inherit}

/* ── eyebrow ────────────────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:42px;height:3px;background:var(--blue);flex:none}
.eyebrow span{
  font-family:var(--sans);font-weight:900;font-size:11px;line-height:15.9px;
  letter-spacing:1.93px;color:var(--ink-3);text-transform:none;
}
.backlink{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:13px;line-height:18px;letter-spacing:-.2px;color:rgba(82,97,116,.64);
}
.backlink b{font-weight:900;color:rgba(82,97,116,.78)}

/* ── closing band + footer ──────────────────────────────────────────── */
.closer{
  border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:40px;padding:35px 56px 0;
}
.closer p{
  margin:0;font-family:var(--serif);font-weight:700;font-size:52px;line-height:1;
  max-width:760px;
}
.pill{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:12px;
  background:var(--blue-link);color:#fff;border-radius:999px;padding:14px 19px;
  font-weight:900;font-size:13px;line-height:18.9px;letter-spacing:-.08px;
  text-decoration:none;
}
.sitefoot{
  border-top:1px solid var(--rule);margin-top:63px;padding:27px 56px 40px;
  display:flex;justify-content:space-between;
  font-size:12px;line-height:17.4px;color:#7d8aa0;
}

/* The case pages give 264px to the sidebar, so their bar runs out of room
   for the disciplines pill 264px earlier than the full-width pages do.
   Without this the nav ran off the right edge at 1280. */
@media (max-width:1364px){
  .case .disciplines{display:none}
}
@media (max-width:1100px){
  .disciplines{display:none}
  .closer{flex-direction:column;align-items:flex-start;gap:24px;padding-inline:0}
  .closer p{font-size:38px}
  .pill{margin-left:0}
  .sitefoot{padding-inline:0}
}

/* ── scroll reveal ──────────────────────────────────────────────────────
   Only ever hides content once reveal.js has confirmed it can bring it
   back: the .js-reveal class is set by the script itself.               */
.js-reveal .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.js-reveal .reveal.is-in{opacity:1;transform:none;will-change:auto}

/* ── image hover ────────────────────────────────────────────────────────
   One behaviour everywhere: the image grows a little, smoothly. Cards clip
   their own image so the zoom happens inside the frame.                   */
.zoomable,
figure.wide img,.ctx__art img,.field img,.duo img,.press img,.rhythm img,
.trio img,.print > img,.freeform > img,.stack img,.show > img,.crow img,
.wire__shots img,.wire--card > img,.phones img,.scard__shot img,.pillar img,
.closing__art img,.webrow__screen,.webrow__mock,.card img,.about__photo{
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.zoomable:hover,
figure.wide img:hover,.ctx__art img:hover,.field img:hover,.duo img:hover,
.press img:hover,.rhythm img:hover,.trio img:hover,.print > img:hover,
.freeform > img:hover,.stack img:hover,.show > img:hover,
.wire__shots img:hover,.wire--card > img:hover,.phones img:hover,
.pillar:hover img,.closing__art img:hover,.webrow__screen:hover,
.webrow__mock:hover,.card:hover img,.about__photo:hover,
.crow figure:hover img,.scard:hover .scard__shot img{
  transform:scale(1.035);
}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  [class] img{transition:none!important}
  img:hover{transform:none!important}
}

/* Avoid persistent compositing layers and sticky-page flicker in iOS Safari.
   Hover zoom has no useful interaction on a touch-only device. */
@media (hover:none) and (pointer:coarse){
  .js-reveal .reveal{opacity:1;transform:none;transition:none;will-change:auto}
  [class] img{transition:none!important;will-change:auto!important}
  img:hover{transform:none!important}
}