@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-400.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-600.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600.woff2) format("woff2")}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/azeretmono-400.woff2) format("woff2")}
/* ==========================================================================
   ENTROPY - HOME PAGE WIREFRAME
   Every colour and type value below resolves from brand/tokens.css. The token
   block is pasted here ONLY because an artifact is a single file; the real
   build imports brand/tokens.css so there is one palette, not two.
   ========================================================================== */
:root{
  --ink:#081A22; --ink-mid:#12333F; --bone:#F4EBDC; --press:#E5D6BE;
  --ember:#C74D14; --ember-deep:#8F3A0E; --slate:#7E8F92; --ember-mid:#E0742A;

  --ground:var(--ink); --figure:var(--bone); --field:var(--ink);
  --accent:var(--ember); --accent-quiet:var(--ember);
  --subordinate:var(--slate); --tone:var(--ink-mid); --recess:var(--ink-mid);
  --figure-quiet:color-mix(in srgb, var(--press) 90%, var(--ink));
  --figure-faint:color-mix(in srgb, var(--press) 78%, var(--ink));
  --rule:color-mix(in srgb, var(--bone) 22%, transparent);
  --edge:color-mix(in srgb, var(--bone) 40%, transparent);

  --face-display:Jost, system-ui, sans-serif;
  --face-lede:Archivo, system-ui, sans-serif;
  --face-body:Jost, system-ui, sans-serif;
  --face-data:"Azeret Mono", ui-monospace, monospace;
  --w-regular:400; --w-medium:500; --w-semibold:600;
  /* NEW WEIGHT, FLAGGED. The repo ships archivo-600 only. A headline that is
     a whole column wants the next step up; this needs archivo-700.woff2 in
     assets/fonts and a --w-bold token in brand/tokens.css to become real. */
  --w-bold:700;

  /* SITE SCALE - fluid, floored at the document scale. The headline ceiling is
     well past the deck's 40px because a section headline is now a column of
     its own rather than a line over a paragraph. */
  --t-heading:clamp(38px, 5.6vw, 96px);
  --t-subheading:clamp(19px, 1.1vw + 12px, 26px);
  --t-figure:clamp(52px, 5.4vw, 92px);
  --t-body:clamp(16px, .3vw + 15px, 20px);
  --t-secondary:clamp(14px, .18vw + 13px, 16px);
  --t-note:clamp(13px, .16vw + 12px, 15px);
  --t-fine:clamp(12.5px, .14vw + 12px, 14px);
  --t-label:clamp(12px, .1vw + 11.5px, 13px);
  --t-data:clamp(11px, .1vw + 10.5px, 12px);
  --t-name:clamp(19px, .5vw + 16px, 26px);
  --t-role:clamp(10.5px, .1vw + 10px, 12px);
  --t-micro:clamp(10px, .1vw + 9.5px, 11px);

  --lh-display:1.06; --lh-tight:1.02; --lh-snug:1.25;
  --lh-copy:1.5; --lh-body:1.62; --lh-wall:2.05;
  --track-display:-.028em; --track-tight:-.03em; --track-fine:-.01em;
  --track-label:.22em; --track-role:.16em; --track-wide:.24em; --track-micro:.18em;

  --s-1:8px; --s-2:14px; --s-3:18px; --s-4:26px; --s-5:34px; --s-6:46px;
  --rule-opacity:.22;
  --wave-weight:2.2;    /* the v2 masters author 3.13; pulled back to a hairline */

  --gutter:clamp(22px, 5vw, 92px);
  --measure:58ch;
  --nav-h:78px;
}

[data-palette="press"]{
  --ground:var(--bone); --figure:var(--ink); --field:var(--press);
  --accent:var(--ember); --accent-quiet:var(--ember-deep);
  --subordinate:var(--slate); --tone:var(--press); --recess:var(--ink-mid);
  --figure-quiet:var(--ink); --figure-faint:var(--ink);
  --rule:color-mix(in srgb, var(--ink) 22%, transparent);
  --edge:color-mix(in srgb, var(--ink) 40%, transparent);
}

*{box-sizing:border-box}
/* Snap. A jump-menu that eases through six screens reads as a long fall;
   landing on the section reads as opening a page. */
html{scroll-behavior:auto; scroll-padding-top:var(--nav-h)}
body{
  margin:0; background:var(--ink); color:var(--figure);
  font-family:var(--face-body); font-size:var(--t-body);
  font-weight:var(--w-regular); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px}

/* ---- marks --------------------------------------------------------------- */
.wm-letters{fill:var(--figure)}
.wm-descriptor{fill:var(--accent-quiet)}
/* Every part of the v2 masters draws in currentColor, so the split is made by
   setting `color` on the two halves rather than by overriding fills. */
.dv-sun,.dv-rings{color:var(--ember)}
.dv-wave{color:var(--figure); stroke-width:var(--wave-weight)}
/* No vector-effect. At full width the wave wants its authored 3.13 units,
   which is the master's own hairline. Small placements raise the token. */
svg[class^="asset-"]{display:block; width:100%; height:auto}

/* ---- the nav ------------------------------------------------------------- */
body{overflow-x:hidden}
.nav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  background:var(--ink); display:flex; align-items:center; gap:var(--s-4);
  padding:0 var(--gutter);
}
.nav::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--bone); opacity:var(--rule-opacity);
}
/* The lockup is in the masthead one screen down, so the bar does not repeat it
   until you have scrolled past it. */
/* The full lockup, so "a creative house" is in the bar. At this width the
   descriptor draws at roughly 4.5px: it reads as texture under the wordmark
   rather than as a line you read, which is what a lockup at bar size is. */
.nav .brand{width:190px; flex:0 0 auto; line-height:0; opacity:0; transition:opacity .3s}
.nav.past .brand{opacity:1}
.nav .links{margin-left:auto; min-width:0; display:flex; gap:clamp(10px,1.4vw,26px); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav .links a{
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-micro); text-transform:uppercase;
  color:var(--subordinate); text-decoration:none; white-space:nowrap;
  padding:6px 0; transition:color .18s;
}
.nav .links a i{font-style:normal; color:var(--ink-mid); margin-right:7px}
.nav .links a:hover{color:var(--figure)}
.nav .links a.on,.nav .links a.on i{color:var(--ember)}

/* ---- the phone menu -------------------------------------------------------
   A horizontally scrolling strip of seven labels is not a menu on a phone, so
   below the break the strip becomes a panel. Same rows, same numbering. */
.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  padding:10px 0 10px 14px; color:var(--accent);
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
}
/* A panel the width of its longest row, hung off the right edge under the
   Menu button rather than a full-width curtain. */
.menu{
  display:none; position:fixed; top:var(--nav-h); right:var(--gutter); left:auto;
  z-index:19; width:max-content; max-width:calc(100vw - var(--gutter) * 2);
  background:var(--ink); border:1px solid var(--rule);
  padding:var(--s-1) var(--s-4) var(--s-3);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu.open{opacity:1; visibility:visible; transform:none}
@media (prefers-reduced-motion:reduce){ .menu{transition:none} }
/* Left-justified inside the panel, so the numbers make the vertical edge. */
.menu a{
  display:flex; gap:14px; align-items:baseline; justify-content:flex-start;
  text-align:left; text-decoration:none; white-space:nowrap;
  padding:14px 0; border-bottom:1px solid var(--rule);
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--figure);
}
.menu a:last-child{border-bottom:0}
.menu a i{font-style:normal; color:var(--accent)}

/* ---- the masthead ---------------------------------------------------------
   One screen: the lockup, the wave, the line. Nothing else. */
.top{
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(30px,5vh,74px);
  padding:clamp(40px,7vh,90px) var(--gutter);
  background:var(--ink); overflow:hidden;
}
.top .asset-wm{width:clamp(300px,58vw,900px); max-width:100%}
.mastwrap{container-type:inline-size}
.mast{
  margin:0; font-family:var(--face-display); font-weight:var(--w-semibold);
  font-size:6.5cqw; line-height:var(--lh-display); letter-spacing:var(--track-display);
}
.mast span{display:block; white-space:nowrap}
.mast .turn{color:var(--accent)}

/* The one gesture. The wave draws itself in once, on load. 1600ms and this
   easing are the two values that do not exist in the system yet. */
@media (prefers-reduced-motion:no-preference){
  .top .asset-hero .dv-wave.draw{animation:draw 1600ms cubic-bezier(.22,.61,.36,1) forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- a band is a screenful ------------------------------------------------
   The numbering pins to the top the way it does on a slide; the content sits
   in the middle of the frame. A section that needs two screens takes two, and
   keeps its number on both. */
/* Grid, not absolute positioning. The rule is a row of the band, so it moves
   with the layout instead of sitting at a fixed offset the content can run
   into halfway through a resize. */
.band{
  min-height:100svh;
  display:grid; grid-template-rows:auto 1fr;
  row-gap:clamp(30px,5vh,74px);
  background:var(--ground); color:var(--figure);
  padding:clamp(30px,5vh,60px) var(--gutter) clamp(50px,8vh,110px);
}
.band > .inner{width:100%; max-width:1560px; margin:0 auto; align-self:center; min-width:0}
.sechead{position:relative; display:flex; align-items:center}
.sechead::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:currentColor; opacity:var(--rule-opacity);
}
.sechead .num,.sechead .sec{position:relative; background:var(--ground)}
.sechead .num{
  font-family:var(--face-display); font-weight:var(--w-semibold);
  font-size:32px; line-height:1; letter-spacing:-.02em;
  color:var(--tone); padding-right:16px;
}
.sechead .sec{
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--subordinate); padding-right:14px;
}

/* ---- the split: headline one side, sentence the other ---------------------
   The headline is a column now, not a line over a paragraph. Which is why it
   can be this size: it has its own measure and nothing flows under it. */
.split.solo{grid-template-columns:1fr}
.split{
  display:grid; grid-template-columns:52% 1fr;
  gap:clamp(30px,4.6vw,88px); align-items:start;
  container-type:inline-size;
}
.split > *{min-width:0}
.split .body{padding-top:.7em}

.hl{
  font-family:var(--face-lede); font-weight:var(--w-bold);
  font-size:var(--t-heading); line-height:var(--lh-tight);
  letter-spacing:var(--track-tight); margin:0; text-wrap:balance;
}
.hl .hold,.hl .turn{display:block}
.hl.inline .hold,.hl.inline .turn{display:inline}
.hl.inline .hold::after{content:' '}
.hl .turn{color:var(--accent)}

.copy{max-width:var(--measure)}
.copy p{margin:0 0 16px; color:var(--figure-quiet)}
.copy p:last-child{margin-bottom:0}
.kicker{color:var(--accent); font-weight:var(--w-medium)}
.copy .crewlab{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--rule)}
.lab{
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--accent-quiet); margin:0 0 var(--s-2);
}

/* ---- the lattice: the brand's bento ---------------------------------------
   Cells divided by a hairline of the ground's own ink, not by cards floating
   on it. Square corners, no shadow, no fill change. The seam is the design. */
.lattice{
  display:grid; gap:1px; background:var(--rule);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-top:clamp(40px,5.5vh,80px);
}
.lattice .cell{background:var(--ground); padding:var(--s-4) var(--s-4) var(--s-5)}
.cols-3{grid-template-columns:repeat(3,1fr)}

/* ---- 02 the three phases --------------------------------------------------
   A column per stage of a show rather than a list of capabilities, so the offer
   reads along the thing it is attached to.

   This band leaves the lattice. Everywhere else on the page a group of cells is
   one grid with a 1px gap and the ground's own hairline showing through; here
   the three stages are separate boxes with a real gap, because each one carries
   its own ground and a seam between two different grounds is not a hairline, it
   is just where one colour stops. Corners stay square and there is no shadow -
   the box is made by the fill, not by an effect. The gap is --s-4.

   The grounds are the three palette roles in order: the band's own Ink, then
   Press, then Solar. The band warms as the show moves, which is the same shape
   as the copy - the earlier we are in, the less it costs. Box 01 sits on the
   band's own ground, so it takes a hairline to become a box at all; 02 and 03
   are defined by their fill and need no edge.

   Note --tone was the obvious ground for box 01 and is wrong: ember on ink-mid
   measures 2.86:1, and the phase summary is set in the accent. */
/* The wave, running the width of the band above the three stages. It is the
   line the phone version turns into a rail - one object, two orientations. */
/* The headline above this drags 120px and the wave does not move at all, so
   the wave needs that much clear or the second line lands on it as the band
   comes up. Same arithmetic as the split gap and the poster wall. */
.spine{margin-top:clamp(124px,13vh,164px); margin-bottom:calc(var(--s-4) * -1)}
.closer .copy{margin-top:clamp(66px,8vh,92px)}
/* Any grid that sits directly under a headline needs to clear the drag
   differential - 120px on the headline against 26px on the grid. The bands
   whose split carries a sentence beside the headline already clear it by
   accident; this makes it deliberate everywhere. */
.split + .lattice, .split + .crew, .split + .places,
.split + .workrow, .split + .figrow, .split + .phases{
  margin-top:clamp(104px,11vh,140px);
}
.asset-spine{width:100%; height:auto; display:block; overflow:visible}
.asset-spine .dv-wave{color:var(--rule); stroke:currentColor; stroke-width:var(--wave-weight)}

.phases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4)}
.phase{display:flex; gap:0}
.pbox{
  flex-grow:1; min-width:0; display:flex; flex-direction:column;
  padding:var(--s-4); overflow:hidden;
}
.p1 .pbox{border:1px solid var(--rule)}
.p2 .pbox{background:var(--bone); --figure:var(--ink); --figure-quiet:color-mix(in srgb,var(--ink) 72%,transparent);
          --accent:var(--ember-deep); --rule:color-mix(in srgb,var(--ink) 22%,transparent)}
.p3 .pbox{background:var(--ember); --figure:var(--bone); --figure-quiet:var(--bone);
          --accent:var(--bone); --rule:color-mix(in srgb,var(--bone) 22%,transparent)}

/* The well is the slot the stills land in, set in --recess - the token that
   exists for an image well before the art arrives. It is flush to the box's top
   three edges so it reads as a frame rather than a thumbnail.

   A different ground per stage, so the frames carry the warming as well as the
   boxes do. Press is --field, the deeper paper, so a light well on the Bone box
   is a step in the same family rather than a new surface.

   The ghost is the whole mark, not just the wave. Every part of the v2 master
   draws in currentColor, so the two-tone split is made by setting colour on each
   half rather than overriding fills, and a ghost is the pigment dissolved into
   its ground - the move tokens already makes for --figure-quiet. The three
   alphas differ on purpose: slate on press is 2.36:1 at full strength, quiet by
   nature, so it needs 62% where bone on ink-mid needs 38% to weigh the same. */
.well{
  margin:calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4);
  aspect-ratio:16 / 9; background:var(--wg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.well .asset-ghost{width:74%; height:auto; display:block; overflow:visible}
.well .asset-ghost .dv-wave{color:var(--gw); stroke-width:5}
.well .asset-ghost .dv-sun,
.well .asset-ghost .dv-rings{color:var(--gm)}
.p1{--wg:var(--ink-mid); --gw:color-mix(in srgb,var(--bone) 18%,transparent);
    --gm:color-mix(in srgb,var(--ember) 38%,transparent)}
.p2{--wg:var(--press);   --gw:color-mix(in srgb,var(--slate) 42%,transparent);
    --gm:color-mix(in srgb,var(--slate) 62%,transparent)}
.p3{--wg:var(--ember-deep); --gw:color-mix(in srgb,var(--bone) 18%,transparent);
    --gm:color-mix(in srgb,var(--bone) 32%,transparent)}

/* The sun marks the stage. On a wide screen it sits in the box, under the wave
   that runs across the band; on a phone the wave cannot run across anything, so
   the marker moves out to a rail and the hairline between the dots becomes the
   line the band lost. Same object, two widths - not two layouts. */
.dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
.boxdot{margin-bottom:var(--s-3)}
.rail{display:none}

.phases .no{
  font-family:var(--face-display); font-weight:var(--w-semibold);
  font-size:56px; line-height:1; letter-spacing:var(--track-display);
  color:var(--accent); margin:0;
}
.phases h4{
  font-family:var(--face-lede); font-weight:var(--w-semibold);
  font-size:var(--t-subheading); line-height:var(--lh-snug);
  margin:var(--s-2) 0 0; color:var(--figure);
}
.phases .phasesub{
  margin:6px 0 var(--s-4); padding-bottom:var(--s-4);
  border-bottom:1px solid var(--rule);
  font-size:var(--t-secondary); line-height:var(--lh-copy); color:var(--accent);
}
.phases .item + .item{margin-top:var(--s-4)}
.phases .item h5{
  margin:0 0 4px; font-family:var(--face-lede); font-weight:var(--w-semibold);
  font-size:var(--t-body); line-height:var(--lh-snug); color:var(--figure);
}
.phases .item p{
  margin:0; font-size:var(--t-secondary); line-height:var(--lh-copy);
  color:var(--figure-quiet);
}

/* ---- 03 process ----------------------------------------------------------- */
/* The three figures read as one row of evidence, so they are centred as a set
   and each figure is centred in its own track. When the row stacks they keep
   that centre instead of falling to the left edge of a column. */
.figrow{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:center;
  justify-items:center; text-align:center;
  gap:clamp(30px,5vw,90px);
  background:var(--ink); color:var(--bone);
  padding:clamp(34px,4vw,60px) clamp(24px,3vw,48px);
  margin-top:clamp(40px,5.5vh,80px);
}
.figrow > div{max-width:24ch}
.figrow .fig{
  display:block; font-family:var(--face-display); font-weight:var(--w-semibold);
  font-size:var(--t-figure); line-height:1; letter-spacing:-.03em; color:var(--ember);
}
.figrow .cap{
  display:block; margin-top:12px;
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-role); text-transform:uppercase;
  color:var(--slate); line-height:1.7;
}
.netline{font-size:var(--t-note); color:var(--subordinate); margin:var(--s-4) 0 0; text-align:center}
.steps .cell .no{
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:.2em; color:var(--accent-quiet); margin:0 0 var(--s-1);
}
.steps .cell h4{
  font-family:var(--face-lede); font-weight:var(--w-semibold);
  font-size:var(--t-subheading); line-height:var(--lh-snug); margin:0 0 10px;
}
.steps .cell .txt{font-size:var(--t-secondary); line-height:var(--lh-copy); margin:0}

/* ---- 04 team --------------------------------------------------------------
   Square portraits at full cell width. Three of the six masters are cut out on
   bone, so the square reads as a bone plate on the ink; a circle was throwing
   most of that plate away. */
.crew{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3vw,52px) clamp(20px,2.4vw,40px);
  margin-top:clamp(40px,5.5vh,80px);
}
.person .portrait{aspect-ratio:1; background:var(--bone); overflow:hidden; margin-bottom:var(--s-4)}
.person .portrait img{width:100%; height:100%; object-fit:cover; display:block}
.person h3{
  font-family:var(--face-lede); font-weight:var(--w-semibold);
  font-size:var(--t-name); margin:0; color:var(--figure); letter-spacing:var(--track-fine);
}
.person .role{
  font-family:var(--face-data); font-size:var(--t-role);
  letter-spacing:var(--track-role); text-transform:uppercase;
  color:var(--accent); margin:8px 0 0;
}
.person .loc{
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--subordinate); margin:6px 0 var(--s-3);
}
.person .more{
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--accent); text-decoration:none; display:inline-block;
  border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .18s;
}
.person .more:hover{border-bottom-color:var(--accent)}
.person .more i{font-style:normal; margin-left:6px}

/* ---- 05 places ------------------------------------------------------------ */
.places{
  display:grid; grid-template-columns:repeat(6,1fr); gap:0 20px;
  margin-top:clamp(44px,6vh,86px); padding-top:30px; border-top:1px solid var(--rule);
}
.places .city{
  display:block; font-family:var(--face-display); font-weight:var(--w-semibold);
  font-size:clamp(20px,1.9vw,36px); line-height:1.1; letter-spacing:-.02em; color:var(--accent);
}
.places .country{
  display:block; margin-top:8px;
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-role); text-transform:uppercase; color:var(--subordinate);
}

/* ---- 06 work -------------------------------------------------------------- */
.workrow{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:clamp(40px,5.5vh,80px)}
.poster{aspect-ratio:2/3; position:relative; overflow:hidden; background:var(--recess); display:flex; align-items:flex-end}
.poster img{width:100%; height:100%; object-fit:cover; display:block}
.poster span{
  font-family:var(--face-data); font-size:9px; line-height:1.5;
  letter-spacing:var(--track-role); text-transform:uppercase;
  color:var(--subordinate); padding:8px;
}
.wallgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-top:clamp(36px,5vh,70px)}
.note{
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-role); text-transform:uppercase;
  color:var(--subordinate); margin:0;
}

/* ---- 07 next -------------------------------------------------------------- */
.closer{display:grid; grid-template-columns:38% 1fr; gap:clamp(30px,5vw,92px); align-items:center}
.closer .markwrap{--wave-weight:3.4}
.close{border:1px solid var(--accent); padding:20px 26px; margin-top:var(--s-5); display:inline-block; text-decoration:none}
.close span{
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent);
}
footer{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-micro); text-transform:uppercase;
  color:var(--accent-quiet); border-top:1px solid var(--rule);
  padding:26px var(--gutter) 48px; background:var(--ink);
}
footer a{text-decoration:none}

/* ---- narrow --------------------------------------------------------------- */
/* ---- POSTER MODE ----------------------------------------------------------
   Once the headline stacks above the sentence it stops being a heading and
   becomes the poster on the page, so it is sized to its own measure rather
   than to a viewport step. --nw is the widest word in the headline, in em;
   dividing the container by it gives the largest size that word can be
   without breaking, and the rest of the line wraps beneath it. */
@media (max-width:1080px){
  .wallgrid{grid-template-columns:repeat(5,1fr)}
  .workrow{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr; gap:clamp(66px,8vh,92px)}
  .split .body{padding-top:0}
  .crew{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:1fr; gap:var(--s-5)}
  .split .hl{
    font-size:min(calc(100cqw / var(--nw, 6)), 12.5vw, 132px);
    line-height:1.0; letter-spacing:-.035em;
  }
}
@media (max-width:760px){
  :root{--nav-h:56px}
  /* device-xs. At 390px the artboard is a twelfth of its authored size and
     2.08 units comes out at a quarter of a pixel. */
  .top{--wave-weight:8}
  .band{min-height:0; row-gap:clamp(24px,4vh,40px); padding:clamp(44px,6vh,72px) var(--gutter) clamp(56px,8vh,88px)}
  .cols-3{grid-template-columns:1fr}
  /* The rail. The wave runs across the band on a wide screen and cannot on a
     phone, so the timeline becomes a vertical line down the outside of the
     boxes with the stage marker on it. The boxes inset from both edges - a
     bento that reaches both gutters is just a stripe. */
  .phases{gap:0}
  .phase{gap:16px}
  .phase:not(:last-child) .pbox{margin-bottom:var(--s-4)}
  .rail{
    display:flex; flex-direction:column; align-items:center;
    flex-shrink:0; width:22px; padding-top:26px;
  }
  .rail .tail{flex:1 1 0; min-height:0; width:1px; background:var(--rule); margin-top:8px}
  .phase:last-child .rail .tail{display:none}
  .boxdot{display:none}
  .pbox{padding:var(--s-3)}
  .well{margin:calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3)}
  .phases .no{font-size:46px}
  .figrow{grid-template-columns:1fr; gap:var(--s-5)}
  .crew{grid-template-columns:1fr}
  .places{grid-template-columns:repeat(2,1fr); gap:var(--s-4) 20px}
  .closer{grid-template-columns:1fr}
  .closer .markwrap{max-width:280px}
  .wallgrid{grid-template-columns:repeat(4,1fr)}
  .nav .brand{width:150px}
  .nav .links{display:none}
  .burger{display:block}
  .menu{display:block}
  /* the masthead joins poster mode too */
  .mast{font-size:min(calc(100cqw / var(--nw, 6)), 92px); line-height:1.0}
  .mast span{white-space:normal}
}

/* ==========================================================================
   ENTROPY - BIO PAGE
   Everything above this block is the home page's own stylesheet, imported
   rather than copied. Only the pieces this page adds live here.
   ========================================================================== */

/* on a subpage the bar carries the mark from the first pixel - there is no
   masthead lockup below it to defer to */
.nav .brand{opacity:1}

.backlink{
  margin-left:auto; position:relative; background:var(--ground); padding-left:14px;
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-micro); text-transform:uppercase;
  color:var(--accent); text-decoration:none; white-space:nowrap;
}
.backlink:hover{color:var(--figure)}

/* ---- 01 the plate ---------------------------------------------------------
   Portrait one side, identity the other, meeting on a seam - the deck's duo
   slide, stood up. Named areas rather than source order, so that when the
   columns collapse the name and role rise above the portrait instead of being
   pushed below it. Who it is should arrive before the picture of them. */
.plate{
  display:grid; grid-template-columns:42% 1fr;
  grid-template-areas:"frame head";
  gap:clamp(18px,2.4vh,30px) clamp(30px,4.6vw,88px);
  align-items:end;
}
.plate .frame{grid-area:frame; align-self:stretch}
.idhead{grid-area:head; align-self:end; container-type:inline-size}
.plate .frame{background:var(--recess); overflow:hidden; aspect-ratio:3/4}
.plate .frame img{width:100%; height:100%; object-fit:cover; display:block}
.idhead .name{
  margin:0; font-family:var(--face-lede); font-weight:var(--w-bold);
  font-size:min(calc(100cqw / var(--nw, 8)), 104px);
  line-height:.98; letter-spacing:-.032em; color:var(--figure);
}
.idhead .name span{display:block}
/* Surname in ember, the same two-tone move the headlines make - second line
   takes the accent. A name is not a clause, so this is the device rather than
   the hold/turn rule, but it reads as the same house. */
.idhead .name .turn{color:var(--accent)}
/* The role drops to the figure colour. On a team card the role is the only
   accent on the tile and ember is right; here the surname has already taken
   it, and ember twice in four lines spends the accent on a job title. The
   ladder now reads bone, ember, bone, slate - the accent lands once. */
.idhead .role{
  margin:clamp(18px,2.6vh,30px) 0 0;
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--figure);
}
.idhead .loc{
  margin:8px 0 0; font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--subordinate);
}
/* ---- link buttons ---------------------------------------------------------
   The platforms' own marks are not drawn here. A logo is somebody else's
   trademark and the type system already has a voice for a label: Azeret Mono
   in a bordered field, the same object as the closing button. Drop the
   official press-kit assets in later if you want them. */
.links{
  display:flex; gap:clamp(18px,2.4vw,32px); justify-content:center;
  margin-top:clamp(48px,7vh,96px);
}
.linkbtn{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; color:var(--accent); transition:color .18s;
}
.linkbtn .glyph{
  display:grid; place-items:center; width:62px; height:62px;
  border:1px solid var(--edge); transition:border-color .18s;
}
.linkbtn svg{width:24px; height:24px; display:block}
.linkbtn .lbl{
  font-family:var(--face-data); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
}
.linkbtn:hover{color:var(--figure)}
.linkbtn:hover .glyph{border-color:var(--accent)}

/* ---- 02 the biography ----------------------------------------------------- */
.longform{max-width:64ch}
.longform p{margin:0 0 18px; color:var(--figure-quiet)}
.longform p:last-child{margin-bottom:0}
/* draft copy is marked in the wireframe so nobody ships it by accident */
.longform p.draft{border-left:2px solid var(--accent-quiet); padding-left:18px}

/* ---- 03 filmography -------------------------------------------------------
   A credit list is data, not prose, so it is set as data: mono, tracked open,
   ruled. Title in the reading face because a title is still a name. */
.filmo{margin-top:clamp(106px,12vh,150px); border-top:1px solid var(--rule)}
.filmo .row{
  display:grid; grid-template-columns:1fr auto 5.5em; align-items:baseline;
  gap:clamp(14px,2vw,40px);
  padding:clamp(16px,2.2vh,24px) 0; border-bottom:1px solid var(--rule);
}
.filmo .t{
  font-family:var(--face-lede); font-weight:var(--w-semibold);
  font-size:var(--t-subheading); letter-spacing:var(--track-fine); color:var(--figure);
}
.filmo .k,.filmo .y{
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-role); text-transform:uppercase; color:var(--subordinate);
}
.filmo .y{text-align:right; color:var(--accent); font-variant-numeric:tabular-nums}
.filmonote{
  margin:0; font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-role); text-transform:uppercase; color:var(--subordinate);
}

/* ---- 04 posters ----------------------------------------------------------- */
.pgrid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(106px,12vh,150px);
}
.pgrid .poster{
  margin:0; position:relative;
  display:block; aspect-ratio:auto; overflow:visible; background:none;
}
.pgrid .poster img{
  width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:var(--recess);
}
/* Art that is on the page so the grid can be judged, not because anyone worked
   on it. Dimmed and captioned, so it can never be mistaken for a credit. */
.pgrid .poster.unconf img{opacity:.22}
.pgrid .poster.unconf figcaption{
  margin-top:7px; font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-micro); text-transform:uppercase;
  color:var(--subordinate);
}
@media (max-width:1080px){
  .plate{
    grid-template-columns:1fr;
    grid-template-areas:"head" "frame";
    gap:clamp(22px,3.4vh,38px);
    align-items:start;
  }
  .plate .frame{aspect-ratio:4/5; max-width:520px}
  .pgrid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .backlink{padding-left:10px}
}
@media (max-width:460px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
}

/* ---- the way back -----------------------------------------------------------
   Three routes to the site: the bar (the brand, and 04 marked as current), the
   backlink in the first band's head, and this row at the foot - the two
   neighbours in the team order and the team itself. Same voice as the footer
   under it: mono, tracked, ruled. */
.teamnav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:26px var(--gutter); border-top:1px solid var(--rule); background:var(--ink);
  font-family:var(--face-data); font-size:var(--t-micro);
  letter-spacing:var(--track-micro); text-transform:uppercase;
}
.teamnav a{color:var(--subordinate); text-decoration:none; white-space:nowrap; transition:color .18s}
.teamnav a:hover{color:var(--figure)}
.teamnav a i{font-style:normal; color:var(--accent)}
.teamnav .prev i{margin-right:10px}
.teamnav .next i{margin-left:10px}
.teamnav .next{text-align:right}
.teamnav .all{color:var(--accent); text-align:center}
@media (max-width:460px){
  .teamnav{grid-template-columns:1fr 1fr; row-gap:18px}
  .teamnav .all{grid-column:1/3; grid-row:1}
}