/* The Wonder Shots — editorial white. Loads AFTER styles.css.
   Palette read off Bureau Nine: pure white, pure black, one red, one grey.
   The page contributes no colour of its own so the photographs are the only colour. */

@font-face{
  font-family:'Switzer';
  src:url('/fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Black, like the works-wheel reference. Achromatic on purpose — a tinted
     page would shift how the photographs read. */
  --bg:#0A0A0B; --bg-2:#101012; --bg-3:#18181B;
  --line:rgba(255,255,255,.12); --line-2:#66666C;  /* 3.47:1 — interactive borders */
  --ink:#FFFFFF;      /* 19.79:1 */
  --ink-2:#D6D6D6;    /* 13.62:1 */
  --muted:#9A9A9A;    /*  7.03:1 */
  --accent:#FE2727;   /*  5.21:1 on black — unlike on white, this one IS safe as text */
  --accent-2:#FF5A5A; /* brighter hover */
  --glass:rgba(10,10,11,.88);
  --display:'Switzer',system-ui,-apple-system,sans-serif;
  --body:'Switzer',system-ui,-apple-system,sans-serif;
  --radius:4px;
}
body{background:var(--bg);color:var(--ink-2);font-family:var(--body);
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;color:var(--ink)}

/* text on the red fill must be black (5.53:1), not white (3.79:1) */
.btn.solid,.pn-cta,.shiny-cta{background:var(--accent);border-color:var(--accent);color:#000}
.btn.solid:hover,.pn-cta:hover,.shiny-cta:hover{background:#000;border-color:#000;color:#fff}
a{color:inherit}
.lb{background:rgba(6,6,7,.975)}
.ggrid a,.pf-grid a,.xg .it,.ws-doors a{background:var(--bg-3)}

/* ---- nav: small, text-only, wordmark left / links centre / contact right ---- */
.pillnav{background:var(--glass);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(14px)}
.pillnav .pn-mark{width:auto;height:44px;padding:0 14px 0 10px;justify-items:start}
.pillnav .pn-mark strong{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.pillnav ul a{font-family:var(--body);font-weight:450;font-size:.78rem;letter-spacing:-.01em;text-transform:none;color:var(--muted)}
.pillnav ul a:hover,.pillnav ul a.on{color:var(--ink);border-bottom-color:var(--ink)}
.pillnav .pn-cta{font-weight:500;font-size:.78rem;letter-spacing:-.01em;text-transform:none}
.pillnav .pn-ig{border-color:var(--line-2)}
.pn-drop{background:rgba(255,255,255,.98);border-color:var(--line)}
@media(max-width:960px){header{margin-bottom:0}}

/* ---- home: coverflow, one project per slide ---- */
.bn-home{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 40px}
.bn-cf-wrap{width:100%}
/* fx.css names this --cf-card, not --fx-cf-card-w */
.fx-cf{--cf-card:clamp(200px,26vw,330px)}
.fx-cf-card{border-radius:2px;background:var(--bg-3)}
.fx-cf-tag{display:none}
.bn-cap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  max-width:1180px;margin:34px auto 0;padding:0 24px;flex-wrap:wrap}
.bn-cap-l{min-width:0}
.bn-cap h2{font-size:clamp(1.3rem,2.6vw,2rem);line-height:1;margin:0 0 8px}
.bn-cap .bn-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:.72rem;color:var(--muted)}
.bn-role{border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;
  font-size:.62rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.bn-role[data-r="Directed"],.bn-role[data-r="Shot & Directed"]{border-color:var(--accent);color:var(--accent-2)}
.bn-role[data-r="Featured in"]{background:var(--bg-3);border-color:transparent;color:var(--muted)}
.bn-open{font-size:.72rem;font-weight:500;border:1px solid var(--ink);border-radius:999px;
  padding:10px 20px;white-space:nowrap;transition:.2s;text-decoration:none;color:var(--ink)}
.bn-open:hover{background:var(--ink);color:#fff}
.bn-nav{display:flex;align-items:center;gap:12px;margin-top:14px}
.bn-nav button{border:1px solid var(--line-2);background:transparent;border-radius:999px;
  width:34px;height:34px;cursor:pointer;color:var(--ink);font-size:.9rem;transition:.2s}
.bn-nav button:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.bn-dots{display:flex;gap:6px}
.bn-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2);display:block;transition:.2s}
.bn-dots i.on{background:var(--accent);transform:scale(1.5)}

/* ---- work: filtered grid ---- */
.bn-head{padding:150px 0 0}
.bn-head h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin-bottom:12px}
.bn-head p{max-width:58ch;color:var(--muted);font-size:.95rem}
.bn-pills{display:flex;gap:6px;flex-wrap:wrap;margin:30px 0 26px}
.bn-pills button{border:1px solid var(--line);background:transparent;border-radius:3px;
  padding:8px 15px;font-family:var(--body);font-weight:450;font-size:.74rem;color:var(--muted);
  cursor:pointer;transition:.2s}
.bn-pills button:hover{border-color:var(--ink);color:var(--ink)}
.bn-pills button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.bn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bn-grid{grid-template-columns:1fr}}
.bn-card{display:block;text-decoration:none}
.bn-card.hide{display:none}
.bn-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--bg-3);border-radius:2px}
.bn-card img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.bn-card:hover img{transform:scale(1.04)}
.bn-card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 2px 0}
.bn-card .meta b{font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--ink)}
.bn-card .meta span{font-size:.72rem;color:var(--muted);white-space:nowrap}
.bn-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---- project page ---- */
.bn-proj{padding:150px 0 0}
.bn-proj .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.bn-proj h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin:0}
.bn-proj .facts{display:flex;gap:26px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.bn-proj .facts div b{display:block;font-family:var(--body);font-weight:500;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bn-proj .facts div span{color:var(--ink);font-size:.86rem}
.bn-summary{max-width:62ch;margin:30px 0 0;font-size:1.02rem;line-height:1.65;color:var(--ink-2)}
/* Masonry, not a grid. A 2-col grid stretches every row to its tallest item,
   so a shorter photo left a block of empty card colour underneath it — that was
   the grey squares. Columns pack each image at its own height with no gaps, and
   the anchor has no background of its own so there is nothing left to show. */
.bn-media{columns:2;column-gap:14px;margin:44px 0 80px}
@media(max-width:700px){.bn-media{columns:1}}
.bn-media a{display:block;background:none;border-radius:2px;overflow:hidden;cursor:zoom-in;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 14px}
.bn-media img{width:100%;display:block;transition:opacity .3s}
.bn-media a:hover img{opacity:.88}
.bn-prevnext{border-top:1px solid var(--line);padding:30px 0 70px;display:flex;justify-content:space-between;gap:16px}
.bn-prevnext a{font-size:.8rem;color:var(--muted);text-decoration:none;transition:.2s}
.bn-prevnext a:hover{color:var(--ink)}

/* ---- results / numbers ---- */
.bn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:38px 0}
@media(max-width:860px){.bn-stats{grid-template-columns:repeat(2,1fr)}}
.bn-stat{background:var(--bg);padding:26px 22px}
.bn-stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1;color:var(--ink);letter-spacing:-.04em}
.bn-stat span{display:block;margin-top:9px;font-size:.74rem;color:var(--muted);line-height:1.45}
.bn-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  border:1px solid var(--line);padding:26px;margin:30px 0}
@media(max-width:700px){.bn-ba{grid-template-columns:1fr;text-align:center}}
.bn-ba b{display:block;font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.bn-ba p{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin:0}
.bn-ba .arrow{color:var(--accent);font-size:1.4rem}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--bg)}
.bn-ft{grid-template-columns:1.6fr 1fr 1fr}
@media(max-width:860px){.bn-ft{grid-template-columns:1fr}}
footer h3{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--accent-2)}

/* ---- project video: leads the page, photos sit under it ---- */
.bn-video{margin:38px 0 10px;background:#000;border-radius:2px;overflow:hidden;position:relative}
.bn-video video{display:block;width:100%;height:auto;background:#000}
.bn-video-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 2px 0;font-size:.74rem;color:var(--muted)}
.bn-video-meta b{font-family:var(--body);font-weight:500;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.bn-stills-label{margin:44px 0 14px;font-size:.62rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ============================================================
   Works wheel — ring that opens into a vertical drum.
   Geometry is written by works-wheel.js; this is only the look.
   ============================================================ */
.ww{position:relative;width:100%;height:100svh;min-height:34rem;overflow:hidden;
  background:var(--bg);color:var(--ink);user-select:none}
.ww-stage{position:absolute;inset:0;cursor:grab;touch-action:pan-x;outline:none}
.ww-stage:active{cursor:grabbing}
.ww-stage:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.ww-wheel{position:absolute;top:50%;left:50%;transform-style:preserve-3d}
.ww-card{position:absolute;backface-visibility:hidden;text-decoration:none;display:block}
.ww-card > span{position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border-radius:6px;background:var(--bg-3);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.ww-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ww-go{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.92);color:#0A0A0B;border-radius:999px;padding:5px 11px;
  font-size:.66rem;font-weight:500;backdrop-filter:blur(6px);opacity:0;transform:translateY(4px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.ww-card:hover .ww-go{opacity:1;transform:none}
.ww-go svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ring label and front-card title trade places across the transition */
.ww-label{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.ww-title{position:absolute;top:50%;left:7%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--display);font-weight:500;letter-spacing:-.04em;color:var(--ink);opacity:0;max-width:34%}

/* index down the right-hand side */
.ww-index{position:absolute;top:7.5%;right:3%;text-align:right;line-height:1.85;
  list-style:none;margin:0;padding:0;color:var(--muted)}
.ww-index button{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;transition:color .2s;text-align:right}
.ww-index button:hover{color:var(--ink)}
.ww-index button.on{color:var(--ink);font-weight:600}
.ww-index button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* scroll hint, fades once the drum is open */
.ww-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);pointer-events:none;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){
  /* index stays top-right; the title owns the bottom strip */
  .ww-index{top:auto;bottom:auto;top:12%;right:4%;line-height:1.7}
}

/* The work is portrait and the ratios vary from 0.56 to 1.00, so no single card
   box fits them. `contain` guarantees nothing is ever cut; the card sits on the
   page white so the letterboxing reads as the image floating, not as bars. */
.ww-card > span{background:transparent;box-shadow:0 22px 50px -20px rgba(0,0,0,.85)}
.ww-card img{object-fit:contain}

/* The front card is centred and at most 34% of the stage wide, so it starts at
   33% from the left. The title has to finish before that or long names collide
   with the artwork — "Puma x LaFrancé Campaign" did. */
.ww-title{left:5%;max-width:24%;font-weight:500;line-height:1.08}
@media(max-width:900px){.ww-title{left:4%;max-width:30%}}
@media(max-width:700px){
  .ww-title{position:absolute;left:0;right:0;top:auto;bottom:86px;transform:none;
    max-width:none;text-align:center;padding:0 18px;font-size:1.05rem !important}
}

/* Mobile: the drum is narrow, so the title takes the full bottom strip and the
   index sits top-right out of its way. Hint moves below the title. */
@media(max-width:700px){
  .ww-index{top:11%;right:4%;bottom:auto;font-size:.62rem}
  .ww-title{bottom:64px;font-size:1.15rem !important}
  .ww-hint{bottom:22px}
  .ww-label{font-size:1.4rem !important}
}

/* second gallery heading, e.g. "LaMelo Ball × Puma Hoops" */
.bn-extra-label{margin:8px 0 14px;font-size:.62rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ---- black-page corrections ----
   styles.css was written for a light cream page and hardcodes white in places
   :root cannot reach. Same fixes as the v1 dark build. */
.pillnav{background:var(--glass);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 40px rgba(0,0,0,.6);backdrop-filter:blur(16px)}
.pillnav .pn-cta{background:var(--accent);color:#0A0A0B}
.pillnav .pn-cta:hover{background:var(--accent-2);color:#0A0A0B}
.pillnav .pn-ig{border-color:rgba(255,255,255,.28);color:var(--ink)}
.pillnav .pn-ig:hover{background:var(--ink);color:#0A0A0B;border-color:var(--ink)}
.pillnav .pn-menu{border-color:rgba(255,255,255,.28);color:var(--ink)}
.pn-drop{background:rgba(16,16,18,.98);border-color:rgba(255,255,255,.14)}
.pn-drop a{border-top-color:rgba(255,255,255,.1)}

/* text on the red fill is black (5.21:1), never white (3.79:1) */
.btn.solid,.shiny-cta{background:var(--accent);border-color:var(--accent);color:#0A0A0B}
.btn.solid:hover,.shiny-cta:hover{background:var(--accent-2);border-color:var(--accent-2);color:#0A0A0B}
.btn{border-color:var(--line-2);color:var(--ink)}
.btn:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

/* grid cells + video letterbox read as black now, not grey */
.ggrid a,.pf-grid a,.xg .it,.bn-card .ph{background:#141416}
.bn-video{background:#000}
.bn-stat{background:var(--bg)}
.bn-stats{background:var(--line);border-color:var(--line)}
footer{border-top-color:var(--line)}

/* --ink is white on this theme, so every "ink fill + white text" pairing from
   styles.css renders white-on-white. The fill is right; the text must be the page. */
.bn-pills button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pf-pills button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mpills button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ww-index button.on{color:var(--ink)}
/* same inversion, remaining spots that actually appear on these pages */
.bn-open:hover{background:var(--ink);color:var(--bg)}
.bn-nav button:hover{background:var(--ink);color:var(--bg)}
::selection{background:var(--accent);color:#0A0A0B}
.social a:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* 3D depth: with the drum open the wheel is pushed back in Z, so cards sit
   behind the stage plane and the stage wins every real hit test — clicks never
   reached the card. Same fix as fx.css uses for the coverflow. */
.ww-wheel{pointer-events:none}
.ww-card{pointer-events:auto}

/* styles.css:721 gives .facts div a white card (background:#fff, border, padding).
   This row is meant to be plain inline text, and on the black theme the white box
   made the values invisible — white text on white. */
.bn-proj .facts div{background:none;border:0;border-radius:0;padding:0}

/* ============================================================
   Merged client-services content. One site: the wheel shows the
   craft, this tells a business owner what is actually on offer.
   ============================================================ */
.ws-pitch{border-top:1px solid var(--line);padding:70px 0 74px;background:var(--bg-2)}
.ws-pitch-lead{max-width:62ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.4;letter-spacing:-.02em;color:var(--ink-2)}
.ws-pitch-lead strong{color:var(--ink);font-weight:600}
.ws-pitch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media(max-width:820px){.ws-pitch-row{grid-template-columns:1fr}}
.ws-pitch-card{display:block;border:1px solid var(--line);border-radius:4px;padding:22px 22px 24px;
  text-decoration:none;transition:border-color .2s,background .2s}
.ws-pitch-card:hover{border-color:var(--ink);background:var(--bg-3)}
.ws-pitch-card b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:7px}
.ws-pitch-card span{display:block;font-size:.84rem;line-height:1.55;color:var(--muted)}
.ws-pitch-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* services */
.sv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:760px){.sv-grid{grid-template-columns:1fr}}
.sv-card{background:var(--bg);padding:34px 30px 38px}
.sv-num{display:block;font-family:var(--body);font-size:.62rem;font-weight:500;letter-spacing:.2em;
  color:var(--accent);margin-bottom:14px}
.sv-card h3{font-size:1.25rem;margin-bottom:12px;letter-spacing:-.02em}
.sv-card p{font-size:.92rem;line-height:1.7;color:var(--ink-2);max-width:46ch}

/* results: reel tiles + brand work */
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.rs-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.rs-grid{grid-template-columns:repeat(2,1fr)}}
.rs-tile{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:3px;background:#141416}
.rs-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.rs-tile:hover img{transform:scale(1.04);opacity:.82}
.rs-ig{position:absolute;top:9px;right:9px;color:#fff;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.rs-ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rs-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rs-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.rs-brands{grid-template-columns:1fr}}
.rs-brand{position:relative;display:block;overflow:hidden;border-radius:3px;background:#141416;aspect-ratio:4/3}
.rs-brand img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s,transform .5s}
.rs-brand:hover img{opacity:1;transform:scale(1.03)}
.rs-brand span{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;z-index:2;
  font-family:var(--display);font-weight:600;font-size:.82rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82))}
.rs-brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* "More work" / cross-link strip (used on services + results) */
.ws-more{border-top:1px solid var(--line);padding:52px 0 64px;background:var(--bg-2)}
.ws-more .wrap{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ws-more-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ws-more-nav a{display:inline-block;border:1px solid var(--line-2);border-radius:999px;
  padding:11px 22px;font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);transition:.22s;text-decoration:none}
.ws-more-nav a:hover{border-color:var(--ink);color:var(--ink)}
.ws-more-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* styles.css:721 makes every .facts div a white card. Nothing on this site wants
   that, and on black it renders white-on-white. Scoping the earlier fix to
   .bn-proj missed the Results page, so this one is unscoped. */
.facts div{background:none;border:0;border-radius:0;padding:0}

/* a 9:16 reel sits centred at a sane width instead of spanning the column */
.bn-video.bn-video-reel{max-width:360px;margin-left:0}
.bn-video.bn-video-reel + .bn-video-meta{max-width:360px}

/* three vertical reels side by side */
.lo-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 10px}
@media(max-width:760px){.lo-reels{grid-template-columns:1fr;max-width:380px}}
.lo-reel .bn-video{margin:0;max-width:none}
.lo-reel video{width:100%;height:auto;display:block}

/* ---- grain over a dark colour field --------------------------------------
   Sits behind everything. --glow is swapped by the wheel to the colour of the
   project at the front, so the page is tinted by the work being looked at.   */
:root{ --glow:#C84428; }
.bg-layer{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--bg)}
.bg-glow{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 102%, color-mix(in srgb, var(--glow) 42%, transparent) 0%,
                                           color-mix(in srgb, var(--glow) 18%, transparent) 34%,
                                           transparent 68%),
    radial-gradient(85% 70% at 50% 42%,  color-mix(in srgb, var(--glow) 20%, transparent) 0%,
                                           transparent 70%);
  transition:background 900ms ease}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;
  /* NOT overlay: overlay preserves black, so grey noise on a near-black page
     renders as nothing. Normal blending lets the grain lighten it. */
  opacity:.34}
@media(prefers-reduced-motion:reduce){.bg-grain{opacity:.26}}

/* The fixed background layers sit at z-index -1/-2, so anything above them with
   an opaque background hides them. .ww, body and the section washes all painted
   solid --bg. html keeps the base colour so nothing can flash white. */
html{background:var(--bg)}
body{background:transparent}
.ww{background:transparent}
.bn-head,.bn-proj,.page-head{background:transparent}
/* the alternating washes stay, but let the glow through */
.ws-pitch,.ws-more{background:color-mix(in srgb, var(--bg-2) 86%, transparent)}

/* ---- photography grid: every cell identical, name under the photo ----
   Uniform 2:3 cells with object-fit:cover. Two of the eight are 0.80/0.83
   rather than 0.67, so they crop slightly at the sides — the trade for a grid
   that is actually even, which is what was asked for. */
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.ph-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ph-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.ph-cell{display:block;text-decoration:none;cursor:zoom-in}
.ph-img{display:block;aspect-ratio:2/3;overflow:hidden;border-radius:3px;background:#141416}
.ph-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,opacity .3s}
.ph-cell:hover img{transform:scale(1.035);opacity:.9}
.ph-name{display:block;padding:13px 2px 0;font-family:var(--body);font-weight:500;
  font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  text-align:center;transition:color .2s}
@media(max-width:760px){.ph-name{font-size:.78rem;letter-spacing:.07em}}
.ph-cell:hover .ph-name{color:var(--ink)}
.ph-cell:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---- Photography section titles ---- */
.ph-title{margin:0 0 26px;font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.02;letter-spacing:-.025em;
  color:var(--ink)}
.ph-sec{padding:0}
.ph-sec-first{padding-top:40px}
.ph-sec-last{padding-bottom:70px}
.ph-sec + .ph-sec{padding-top:118px}
@media(max-width:760px){.ph-title{margin-bottom:18px}.ph-sec + .ph-sec{padding-top:72px}}

/* ---- Beams background (Photography only) ---- */
.bg-beams{position:fixed;inset:0;z-index:-2;pointer-events:none;
  filter:blur(15px);opacity:.9}
.bg-beams-veil{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:rgba(10,10,11,.05);backdrop-filter:blur(50px);
  animation:beamsVeil 10s ease-in-out infinite}
@keyframes beamsVeil{0%,100%{opacity:.05}50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){
  .bg-beams{display:none}.bg-beams-veil{animation:none;backdrop-filter:none}}

/* Cars: landscape subjects need landscape cells */
/* Cars: masonry — mixed orientations keep their native shape, nothing is cropped */
.ph-masonry{display:block;columns:3;column-gap:18px}
.ph-masonry .ph-cell{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;margin:0 0 18px}
.ph-masonry .ph-img{aspect-ratio:auto;height:auto}
.ph-masonry .ph-cell img{height:auto;object-fit:fill}
@media(max-width:1100px){.ph-masonry{columns:2}}
@media(max-width:760px){.ph-masonry{columns:2;column-gap:14px}
  .ph-masonry .ph-cell{margin-bottom:14px}}

/* ================= layout fixes ================= */

/* (6) Collapsed pill nav squeezed its flex children instead of clipping them,
   so the wordmark landed on top of the links. Hold natural width, let the
   pill's own overflow do the hiding. */
.pillnav .pn-in{flex:none}
.pillnav.collapsed .pn-in > ul,
.pillnav.collapsed .pn-in > .pn-acts{opacity:0;pointer-events:none;transition:opacity .18s}
.pillnav .pn-in > ul,
.pillnav .pn-in > .pn-acts{transition:opacity .25s .1s}

/* (2) Vertical swipes belong to the page; the wheel turns on horizontal drag. */
.ww-stage{touch-action:pan-y}




/* (5) Jump links so Photography isn't one long scroll. */
.ph-jump{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.ph-jump a{font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.02em;
  color:var(--ink-2);text-decoration:none;padding:7px 14px;border:1px solid var(--line-2);
  border-radius:999px;transition:color .2s,border-color .2s,background .2s}
.ph-jump a:hover{color:#0A0A0B;background:var(--ink);border-color:var(--ink)}
.ph-sec{scroll-margin-top:92px}
.ph-title{scroll-margin-top:100px}  /* anchor sits on the heading, not the section */

/* Collapsed, the pill is a 54px circle — the full wordmark got sliced mid-word
   ("Wonder S"), so it swaps to a monogram at that size. */
.pillnav .pn-short{display:none}
.pillnav.collapsed .pn-long{display:none}
.pillnav.collapsed .pn-short{display:block;font-family:var(--display);font-weight:600;
  font-size:.92rem;letter-spacing:.01em;color:var(--ink)}
.pillnav.collapsed .pn-mark{width:54px;padding:0;justify-items:center;place-items:center}
.pillnav.collapsed .pn-in{padding:0;justify-content:center;width:54px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}