/* Wolf Road. The Door: black ground, white Compacta at statement scale, Inter small and calm,
   Wolf Red on the mark and the one live line. No rules, no cards, no boxes. */

@font-face { font-family: "Compacta"; src: url("../fonts/Compacta-BT.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Compacta"; src: url("../fonts/CompactaBT-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
/* The mono (2026-10-01): Martian Mono, variable in weight and width, registered as "Digital" so every instrument
   picks it up. Set a step narrower than its default (87.5%) so the labels keep their old measure. OFL, self-hosted. */
@font-face { font-family: "Digital"; src: url("../fonts/martian-mono-wdth.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Digital"; src: url("../fonts/martian-mono-ext-wdth.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --black: #000000;
  --white: #ffffff;
  --red: #D70029;
  --red-text: #FF2E55;
  --hairline: rgba(255, 255, 255, 0.16);        /* rules, underlines, the send bar at rest */
  --hairline-strong: rgba(255, 255, 255, 0.3);
  --text-soft: rgba(255, 255, 255, 0.82);      /* secondary copy on black */
  --ring: rgba(255, 255, 255, 0.7);             /* the play button's ring */
  --shade: rgba(0, 0, 0, 0.55);                 /* a veil behind type over pictures */
  --shade-deep: rgba(0, 0, 0, 0.94);            /* the top bar's fade on phones */
  --shade-bar: rgba(0, 0, 0, 0.7);              /* the top bar's fade; shadows under type on pictures */
  --red-wash: rgba(215, 0, 41, 0.08);           /* the send bar's hover */
  --red-glow: rgba(215, 0, 41, 0.34);           /* the light behind the hero W */
  --red-glow-soft: rgba(215, 0, 41, 0.12);
  --map-glow: rgba(215, 0, 41, 0.8);            /* the hologram's type, projected */
  --map-glow-us: rgba(255, 46, 85, 0.7);
  --scanline: rgba(0, 0, 0, 0.28);
  --grey: #8f8f8f;
  --frame: #050505;                             /* the dark behind a picture before it loads */
  --scrollbar: #2a2a2a;
  --mark-rest: rgba(255, 255, 255, 0.45);       /* the ruler's numbers at rest */
  --shade-hero: rgba(0, 0, 0, 0.6);             /* the hero's floor under the words */
  --shade-top: rgba(0, 0, 0, 0.4);              /* the hero's fade under the header */
  --shade-frame: rgba(0, 0, 0, 0.42);           /* the work window's left edge, under the name */
  --cursor-fill: rgba(150, 150, 150, 0.35);     /* the square cursor */
  --cursor-edge: rgba(200, 200, 200, 0.35);
  --dim: #5c5c5c;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: cubic-bezier(0.65, 0, 0.35, 1);
  --display: "Compacta", "Impact", "Arial Narrow", sans-serif;
  /* the wordmark's own setting (measured 2026-10-02 against assets/brand/wordmark-white.svg): Compacta Light, letters
     drawn in about 1.7% of the size closer than the font sets them, and the word space about 40% narrower */
  --display-weight: 300;
  --display-track: -0.017em;
  --display-word: -0.085em;
  /* the headings' face: Compacta Light, set as the wordmark is (back from the Antonio trial, 2026-10-02). Every heading
     on the --head tokens takes the wordmark's measured tracking and word space. */
  --head: var(--display);
  --head-weight: var(--display-weight);
  --head-track: var(--display-track);
  --head-word: var(--display-word);
  --head-case: uppercase;
  --head-leading: 0.88;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --digital: "Digital", ui-monospace, Menlo, monospace;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 46ch;
  --statement: clamp(3.2rem, 6vw, 8.2rem);
  --row: clamp(1.8rem, 2.9vw, 3.3rem);
  --h2: clamp(2.4rem, 4.4vw, 5rem);
  --ui: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
  --text: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked, html.is-screening { overflow: hidden; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--body); font-size: var(--text); line-height: 1.5; letter-spacing: -0.005em; font-stretch: 87.5%;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--red); color: var(--white); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border: 3px solid var(--black); border-radius: 999px; }
* { scrollbar-color: var(--scrollbar) var(--black); scrollbar-width: thin; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p, ul, ol, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 4px; border-radius: 2px; }

/* No film grain (removed 2026-10-01 at Daniel's call). */

/* Header: the mark and four quiet words. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(1.4rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.4rem;
  font-size: var(--ui);
  background: linear-gradient(to bottom, var(--shade-bar), transparent);
}
.top__brand { display: inline-flex; align-items: center; padding: 0.6rem; margin: -0.6rem; } /* a 44px hit area on the small mark */
.top__brand img { height: 1.6rem; width: auto; }
.top__clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; color: var(--grey); white-space: nowrap; }
.top__clock #clock { color: var(--white); font-variant-numeric: tabular-nums; }
/* The nav reads as one short line, in Inter: "Work, Services, Studio, Contact". */
.top .top__nav { display: flex; gap: 0.32em; font-family: var(--body); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; line-height: 1.2; }
.top__nav a { color: var(--white); transition: color 0.4s var(--ease); padding: 0.85rem 0.15rem; margin: -0.85rem -0.15rem; } /* a 44px hit area on the word */
.top__nav a:not(:last-child)::after { content: ","; color: var(--white); }
.top__nav a:hover { color: var(--red-text); }

/* The digital face: every label, bracket and counter on the page. */
.mono { font-family: var(--digital); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
.is-decoding { color: var(--grey); }


/* Shared controls: the ghost pill (world.html) and text for screen readers only. */
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 6rem; padding: 1.1rem 1.9rem; background: transparent; border: 1px solid var(--white); border-radius: 999px; color: var(--white); font-family: var(--body); font-weight: 400; font-size: 0.9rem; line-height: 1; cursor: pointer; transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease); }
.pill:hover { background: var(--white); color: var(--black); }
.pill:active { transform: scale(0.97); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip to content: out of sight until a keyboard reaches it, then a plain mono label at the top left, above everything. */
.skip { position: fixed; left: var(--gutter); top: 0.6rem; z-index: 400; padding: 0.8rem 1rem; background: var(--black); color: var(--white); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; transform: translateY(-200%); }
.skip:focus, .skip:focus-visible { transform: none; outline: 1px solid var(--red-text); }

/* The door and the screen. */
.door { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh; pointer-events: none; display: block; }
.screen { outline: none; position: fixed; inset: 0; z-index: 200; background: var(--black); display: grid; place-items: center; padding: var(--gutter); }
.screen__frame { width: min(100%, calc((100vh - 2 * var(--gutter)) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--frame); }
.screen__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.screen__meta { position: absolute; left: var(--gutter); bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); color: var(--grey); font-size: var(--ui); }
.screen__close { position: absolute; right: var(--gutter); top: calc(1.4rem + env(safe-area-inset-top, 0px)); background: none; border: 0; color: var(--white); font: inherit; font-size: var(--ui); cursor: pointer; padding: 0.4em 0; }
.screen__close:hover { color: var(--red-text); }

.studio__w { width: 100%; aspect-ratio: 1; max-height: 48vh; display: block; margin: 0 auto; opacity: 0; transition: opacity 1.2s var(--slow); }
.studio__w.is-drawing { opacity: 1; }
/* The footer, in the contact's HUD voice: a hairline, two keyed rows of mono links, a base line. */
.foot { position: relative; margin-top: clamp(6rem, 13vh, 13rem); padding: 0 var(--gutter) clamp(2rem, 4vh, 3rem); }
.foot__links { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.foot__group { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.5rem); }
.foot__k { margin: 0; color: var(--red-text); font-size: 0.7rem; }
.foot__col { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(1.2rem, 2.2vw, 2.2rem); }
.foot__col a { display: inline-block; padding: 0.8rem 0.35rem; margin: 0 -0.35rem; font-family: var(--digital); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--white); transition: color 0.4s var(--ease); }
.foot__col a:hover { color: var(--red-text); }
.foot__col a span { color: var(--grey); transition: color 0.4s var(--ease); }
.foot__col a:hover span { color: var(--red-text); }
.foot__base { display: flex; justify-content: space-between; margin: 1.2rem 0 0; color: var(--grey); font-size: 0.7rem; }

@media (max-width: 1023px) {
  .top__clock { display: none; }
}

@media (max-width: 767px) {
  .foot { grid-template-columns: 1fr; }
  .top { background: linear-gradient(to bottom, var(--shade-deep) 55%, transparent); padding-bottom: 2.2rem; } /* on phones the page runs under the bar */
  .foot__links { flex-direction: column; align-items: start; gap: 0.6rem; }
  .foot__group { align-items: start; flex-direction: column; gap: 0; }
  .top { padding-top: calc(1.1rem + env(safe-area-inset-top, 0px)); }
  .top .top__nav { gap: 0.28em; font-size: 0.88rem; }
  .screen { padding: 0; align-content: center; }
  .screen__frame { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none; }
}

/* Crossing between pages: the chosen still travels from the frame on the home into the film on its case page, and
   from a case page's next-project still into the next. Everything else fades. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.5s; animation-timing-function: var(--slow); }
::view-transition-group(film) { animation-duration: 0.9s; animation-timing-function: var(--slow); }
::view-transition-old(film), ::view-transition-new(film) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; overflow: hidden; }
/* Arriving from a name or a link, nothing flies in: the case film fades with the page instead of popping in. */
::view-transition-new(film):only-child { animation: vtIn 0.5s var(--slow) both; }
@keyframes vtIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } }

/* A case page: strategy on the left, what it produced on the right. The left column holds the title, one line and
   the scope of the engagement, and stays pinned. The right column scrolls the assets one after another, each large,
   each labelled in mono; the asset nearest the middle of the screen is lit and its scope word lights with it, so the
   page reads as one piece of thinking and everything that came out of it. */
body.case-page { background: var(--black); }
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 5rem); align-items: start; padding: calc(6.6rem + env(safe-area-inset-top, 0px)) var(--gutter) clamp(3rem, 6vh, 5rem); max-width: 1600px; margin: 0 auto; }
.case__side { position: sticky; top: calc(6.2rem + env(safe-area-inset-top, 0px)); }
.case__back { display: inline-block; color: var(--grey); transition: color 0.4s var(--ease); padding: 0.8rem 0; margin: -0.8rem 0 0.6rem; }
.case__back:hover { color: var(--white); }
.case__title { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(2.4rem, 4.6vw, 5.2rem); line-height: var(--head-leading); letter-spacing: var(--head-track); word-spacing: var(--head-word); text-transform: var(--head-case); text-wrap: balance; color: var(--white); }
.case__line { margin: 1rem 0 0; color: var(--grey); line-height: 1.8; }
.case__line b { font-weight: 400; color: var(--white); }
/* Sentences in the mono face read in normal case; only the keys and short labels stay in capitals. */
.case__line.mono, .index__line.mono, .index__meta.mono, .case__assets figcaption.mono { text-transform: none; letter-spacing: 0.04em; font-size: 0.82rem; }
/* The overview: Problem, Solution, Result in Inter under mono labels, then the scope. */
.case__psr { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.5rem; margin: clamp(1.2rem, 3vh, 2rem) 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.case__psr dt { color: var(--red-text); padding-top: 0.2em; }
.case__psr dd { margin: 0; font-family: var(--body); font-size: clamp(0.86rem, 0.8rem + 0.2vw, 0.95rem); line-height: 1.4; color: var(--text-soft); max-width: 48ch; }
.case__psr dd.is-result { color: var(--white); }
.case__scope { list-style: none; margin: clamp(1rem, 2.4vh, 1.6rem) 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem;  font-family: var(--digital); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.14em; }
.case__scope li { color: var(--grey); line-height: 1.8; transition: color 0.5s var(--ease); }
.case__scope li::before { content: "/ "; color: var(--dim); }
.case__scope li.is-on { color: var(--white); }
.case__scope li.is-on::before { color: var(--red-text); }
.case__assets { display: grid; gap: clamp(2.4rem, 7vh, 5rem); }
.asset { margin: 0; opacity: 0.45; transition: opacity 0.7s var(--slow); }
.asset.is-current { opacity: 1; }
.asset__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--frame); }
.asset__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asset figcaption { margin-top: 0.7rem; color: var(--grey); }
.asset figcaption b { font-weight: 400; color: var(--white); }
.case__film .asset__media { cursor: pointer; }
.case__film img { view-transition-name: film; }
.case__film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case__film.is-playing img, .case__film.is-playing .case__play { display: none; }
/* The film's label on the frame: a round play button, what it is in bold, how long, so nobody mistakes it for a still. */
.case__play { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2; display: flex; align-items: center; gap: 0.9rem; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--white); text-align: left; }
.case__play-icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--shade); box-shadow: inset 0 0 0 1px var(--ring); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.case__play-icon svg { margin-left: 3px; }
.case__play-text { display: grid; gap: 0.2rem; text-shadow: 0 1px 14px var(--shade-bar); }
.case__play-text b { font-family: var(--body); font-weight: 700; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; line-height: 1; }
.case__play-text span { font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.case__film .asset__media:hover .case__play-icon, .case__play:focus-visible .case__play-icon { color: var(--red-text); box-shadow: inset 0 0 0 1.5px var(--red-text); transform: scale(1.06); } /* red as line and light, never as fill */
.case__film .asset__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--shade), transparent 45%); z-index: 1; }
.case__film.is-playing .asset__media::after { display: none; }
.case__next { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); align-items: center; column-gap: 2rem; margin-top: clamp(3rem, 8vh, 6rem); padding-top: 1.4rem; border-top: 1px solid var(--hairline); color: var(--white); }
.case__next-label { display: block; margin: 0 0 0.8rem; color: var(--grey); }
.case__next-title { display: block; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: var(--head-leading); text-transform: var(--head-case); letter-spacing: var(--head-track); word-spacing: var(--head-word); transition: color 0.5s var(--ease); }
.case__next:hover .case__next-title { color: var(--red-text); }
.case__next img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-page .foot { margin-top: clamp(3rem, 6vh, 5rem); }
@media (max-width: 1023px) {
  .case { grid-template-columns: 1fr; row-gap: 2rem; }
  .case__side { position: static; }
  .case__scope { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
  .asset { opacity: 1; }
  .case__next { grid-template-columns: 1fr; row-gap: 1rem; }
}


/* The work index: every project as a row under hairlines. Hovering a row lights its name red and dissolves its
   still in behind the page at low brightness; choosing one carries the still into the case page's film. */
.index-page { background: var(--black); }
.index__still { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--slow); }
.index__still.is-on { opacity: 1; }
.index__still img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32) saturate(0.85); }
.index { position: relative; z-index: 1; padding: calc(7rem + env(safe-area-inset-top, 0px)) var(--gutter) clamp(3rem, 6vh, 5rem); max-width: 1600px; margin: 0 auto; min-height: 100svh; }
.index__head { display: flex; flex-direction: column; align-items: start; justify-content: end; gap: 1rem; min-height: min(24vw, 34vh); margin: 0 0 clamp(1.6rem, 4vh, 3rem); padding-right: min(26vw, 36vh); } /* the head is as tall as the wire W beside it */
.index__title { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(3rem, 8.4vw, 9.4rem); line-height: var(--head-leading); text-transform: var(--head-case); letter-spacing: var(--head-track); word-spacing: var(--head-word); color: var(--white); }
.index__line { margin: 0; color: var(--grey); }
.index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.index__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name year" "meta year"; align-items: center; column-gap: 2rem; row-gap: 0.4rem; padding: clamp(1.2rem, 2.6vh, 2rem) 0; border-bottom: 1px solid var(--hairline); color: var(--white); }
.index__name { grid-area: name; font-family: var(--body); font-weight: 600; font-size: clamp(1.8rem, 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--dim); transition: color 0.5s var(--slow); }
.index__row:hover .index__name, .index__row:focus-visible .index__name, .index__row.is-on .index__name { color: var(--red-text); }
.index__meta { grid-area: meta; color: var(--grey); }
.index__year { grid-area: year; color: var(--grey); }
.index-page .foot { position: relative; z-index: 1; }
/* The wire W from the studio keeps the work index company, top right beside the title. */
.index__w { position: absolute; right: var(--gutter); top: calc(5.2rem + env(safe-area-inset-top, 0px)); width: min(24vw, 34vh); max-height: none; margin: 0; z-index: 0; pointer-events: auto; }
@media (max-width: 1023px) { .index__w { display: none; } }
@media (max-width: 767px) {
  .index__head { min-height: 0; padding-right: 0; gap: 0.8rem; }
  .index__row { grid-template-columns: 1fr; grid-template-areas: "name" "meta" "year"; row-gap: 0.3rem; }
  .index__name { color: var(--white); }
}