/* AETERNA — craftsmanship page compositions. Builds only on tokens from
   site.css, and on the components in editorial.css. The ThreeUI dock keeps its
   own vendor styling in threeui-sable.css; the handful of site-side overrides
   it needs live in this file, never in the vendor one. */

/* The opener runs straight into the film with no seam, so the dark chapter
   reads as one room rather than two sections. */
.page-head--night + .film{margin-top:0}
.page-head .stats{margin-top:var(--s9)}
/* .page-head--wide releases the 22ch cap that is measured in body ems and far
   too tight for a 76px display line; the split grid holds the column instead. */
.page-head--split .page-head__in{gap:var(--s5)}

/* =========================================================== THE FILM === */
.film{background:var(--night);color:var(--night-ink-60)}
/* Half a section above, a full one below: the opener's own bottom padding
   already supplies the other half of the gap over the eyebrow. */
.film__head{padding-block:calc(var(--sec) * .5) var(--sec)}
.film__head .lede{margin-bottom:0}

/* 700svh of track, one screen of it pinned: 600svh of scrub across seven
   beats, 0.13 of progress and about five wheel flicks each. */
.film__track{height:700svh;position:relative}
.film__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--night)}
.film__poster{position:absolute;inset:0;background-size:cover;background-position:48% 52%}
.film__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 52%;
  opacity:0;transition:opacity var(--d4) var(--e-io);will-change:transform;transform:translateZ(0);
}
.film__stage.is-ready .film__video{opacity:1}
.film__stage.is-failed .film__video{display:none}

/* One left-weighted scrim, always on, so a caption never depends on what the
   footage happens to be doing behind it. The two ramps are the home hero's own
   film scrim, a little heavier on the left because seven captions have to clear
   a watch that sits further into frame than the home hero's does. They are
   light-blocking values over footage, not palette. */
.film__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,9,11,.9) 0%,rgba(10,9,11,.76) 32%,rgba(10,9,11,.22) 64%,rgba(10,9,11,0) 86%),
    linear-gradient(180deg,rgba(10,9,11,.66) 0,rgba(10,9,11,0) 20%,rgba(10,9,11,0) 70%,rgba(10,9,11,.58) 100%);
}

.film__bands{position:absolute;inset:0}
.film__band{
  position:absolute;top:50%;transform:translateY(-50%);
  left:var(--gutter);width:min(44vw,540px);
  opacity:0;visibility:hidden;
  text-shadow:0 1px 2px rgba(5,5,10,.6),0 10px 40px rgba(5,5,10,.5);
}
.film__band.is-on{visibility:visible}
.film__num{
  font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--brass-lite);margin:0;
}
.film__band .h2{color:var(--night-ink);margin-top:var(--s4);max-width:15ch}
.film__band .lede{color:var(--night-ink);opacity:.88;margin-top:var(--s5);max-width:34ch}

/* Each beat assembles in its first half and then rests: number, line, then the
   sub. --k is written by craft.js once per changed frame. */
.film__band .film__num{--k1:clamp(0,var(--k,0) * 3,1);opacity:var(--k1);transform:translateY(calc((1 - var(--k1)) * 14px))}
.film__band .h2{--k2:clamp(0,(var(--k,0) - .1) * 2.6,1);opacity:var(--k2);transform:translateY(calc((1 - var(--k2)) * 20px))}
.film__band .lede{--k3:clamp(0,(var(--k,0) - .36) * 2.4,1);opacity:calc(.88 * var(--k3));transform:translateY(calc((1 - var(--k3)) * 12px))}

.film__cue{
  position:absolute;left:var(--gutter);bottom:clamp(20px,4vh,36px);z-index:3;
  display:flex;align-items:center;gap:var(--s3);margin:0;
  font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--night-ink-60);
  transition:opacity var(--d2) var(--e-io);
}
.film__cue i{display:block;width:44px;height:1px;background:var(--brass-lite)}
.film__stage.is-past .film__cue{opacity:0}

.film__ring{
  position:absolute;right:var(--gutter);bottom:clamp(20px,4vh,36px);z-index:3;
  width:20px;height:20px;color:var(--brass-lite);transform:rotate(-90deg);
  opacity:1;transition:opacity var(--d2) var(--e-io);
}
.film__ring circle{transition:stroke-dashoffset var(--d1) linear}
.film__stage.is-ready .film__ring,.film__stage.is-failed .film__ring{opacity:0}

/* ----------------------------------------------- the chapter dock ------ */
/* The dock lives inside the film and nowhere else. It sits one header below
   the top of the pinned stage, so the site header never covers it. The shell
   is a fixed 38px box the dock cannot resize, which keeps its own
   ResizeObserver out of a feedback loop with the spring. */
.film__dock{
  position:absolute;left:0;right:0;top:calc(var(--header-h) + var(--s3));
  z-index:6;pointer-events:none;overflow:visible;
  display:flex;justify-content:center;
  /* The rail arrives with the film, from the IntersectionObserver in craft.js.
     Mounting happens at arm(), a screenful earlier, so revealing there would
     spend the whole entrance where nobody is looking. */
  opacity:0;transform:translateY(7px);
  transition:opacity var(--d3) var(--e-out),transform var(--d3) var(--e-out);
}
.film__dock.is-in{opacity:1;transform:none}

/* --rail-p is the head of the lit run, written on every painted frame of a
   scrubbing film. Declared here so it does NOT inherit: written at the top of
   the rail's ~105 node subtree it would invalidate all of it, every frame.
   craft.js writes it only on .rail__wire and on the live hand. */
@property --rail-p{syntax:'<number>';inherits:false;initial-value:0}
@property --near{syntax:'<number>';inherits:false;initial-value:0}

.rail-nav{
  position:relative;pointer-events:auto;
  --rail-h:104px;--rail-cell:104px;--rail-a:0;
  height:var(--rail-h);
  display:inline-block;
  color:var(--night-ink-60);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
@media (max-width:1080px){.rail-nav{--rail-h:92px;--rail-cell:92px}}

/* -- the capsule ---------------------------------------------------------
   Three pieces so the ends can be drawn rather than stretched: a flat middle
   and two tapered caps, each an <svg> whose path craft.js rewrites when the
   height steps. The frost is ONE element masked to the whole silhouette --
   filling the ends separately leaves a visible seam where the two tones meet. */
.rail__shell{position:absolute;inset:0;pointer-events:none}
.rail__frost{
  position:absolute;inset:0;
  background:rgba(14,12,15,.80);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  -webkit-mask-image:var(--cap-s),linear-gradient(#000,#000),var(--cap-e);
  mask-image:var(--cap-s),linear-gradient(#000,#000),var(--cap-e);
  -webkit-mask-size:78px 100%,calc(100% - 156px) 100%,78px 100%;
  mask-size:78px 100%,calc(100% - 156px) 100%,78px 100%;
  -webkit-mask-position:left top,center top,right top;
  mask-position:left top,center top,right top;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.rail__cap{position:absolute;top:0;width:78px;height:100%;overflow:visible}
.rail__cap--s{left:0}
.rail__cap--e{right:0;transform:scaleX(-1)}
.rail__cap path{fill:none;stroke:rgba(201,152,122,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.rail__mid{
  position:absolute;top:0;bottom:0;left:78px;right:78px;
  border-top:1px solid rgba(201,152,122,.34);
  border-bottom:1px solid rgba(201,152,122,.34);
}

/* -- the rail itself -----------------------------------------------------
   Four layers on one line: the quiet scale, a wide soft glow, the lit run,
   and the head. The glow is what makes the run read against a cinematic
   frame -- a 1px brass line alone measured barely twice the quiet rail's
   luminance, where the reference's whole point is a luminous segment. */
.rail__wire{
  position:absolute;left:var(--rail-x0,0px);top:var(--rail-y,50%);
  width:var(--rail-len,0px);height:0;pointer-events:none;
}
.rail__base,.rail__glow,.rail__hot,.rail__tip{position:absolute;top:0;left:0}
.rail__base{
  width:100%;height:1px;margin-top:-.5px;
  background:linear-gradient(to right,rgba(201,152,122,.10),rgba(201,152,122,.24) 12%,
             rgba(201,152,122,.24) 88%,rgba(201,152,122,.10));
}
.rail__hot{
  height:1px;margin-top:-.5px;
  left:calc(var(--rail-a) * 100%);
  width:max(0px,calc((var(--rail-p) - var(--rail-a)) * 100%));
  /* Solid at the origin. An earlier cut faded in from transparent exactly
     where the run leaves its own medallion, which is the one place it has to
     be bright. */
  background:linear-gradient(to right,var(--brass-lite),var(--brass-lite) 72%,rgba(201,152,122,.55));
  box-shadow:0 0 6px rgba(201,152,122,.55);
  transition:left var(--d2) var(--e-io);
}
.rail__glow{
  height:5px;margin-top:-2.5px;border-radius:var(--r-full);
  left:calc(var(--rail-a) * 100%);
  width:max(0px,calc((var(--rail-p) - var(--rail-a)) * 100%));
  background:linear-gradient(to right,rgba(201,152,122,.34),rgba(201,152,122,.20));
  filter:blur(3px);
  transition:left var(--d2) var(--e-io);
}
.rail__tip{
  left:calc(var(--rail-p) * 100%);
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:var(--r-full);
  background:var(--brass-lite);box-shadow:0 0 8px rgba(201,152,122,.8);
}

/* -- the row ------------------------------------------------------------- */
.rail__row{position:relative;display:flex;align-items:center;height:100%;padding:0 26px}
.rail__roundel{flex:none;width:24px;height:24px;color:rgba(201,152,122,.42)}
.rail__roundel svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.rail__roundel--s{margin-right:14px}
.rail__roundel--e{margin-left:14px;color:rgba(201,152,122,.55)}
/* the far dial is a power reserve: its hand sweeps 240 degrees across the film */
.rail__hand{transform:rotate(calc(-120deg + var(--rail-p,0) * 240deg));transform-origin:12px 12px;
  transition:transform 120ms linear}

.rail__item{
  flex:none;width:var(--rail-cell);height:100%;
  display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:center;gap:5px;
  padding:0;border:0;background:none;cursor:pointer;color:inherit;
  position:relative;
}
/* One tick per division, on the boundary between two cells -- not three per
   cell, which put 21 marks across the bar. The first cell draws none at its
   left edge and the last none at its right: there is no division there. */
.rail__item+.rail__item::before{
  content:"";position:absolute;left:0;top:calc(var(--rail-y,50%) - 3px);
  width:1px;height:6px;background:rgba(201,152,122,.22);
}
.rail__disc{
  width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:rgba(9,8,10,.72);
  border:1px solid rgba(201,152,122,.26);
  box-shadow:0 0 0 0 rgba(201,152,122,0);
  transform:translateY(calc(var(--near,0) * -2px));
  transition:border-color var(--d2) var(--e-out),box-shadow var(--d2) var(--e-out),
             transform var(--d2) var(--e-out),background-color var(--d2) var(--e-out);
}
.rail__art{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  opacity:calc(.68 + var(--near,0) * .32);transition:opacity var(--d2) var(--e-out)}
.rail__label{font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);
  color:rgba(242,237,229,.66);transition:color var(--d2) var(--e-out)}
.rail__n{font:400 9px/1 var(--f-mono);letter-spacing:.14em;
  color:rgba(242,237,229,.40);transition:color var(--d2) var(--e-out)}

.rail__item:hover .rail__disc,
.rail__item:focus-visible .rail__disc{border-color:rgba(201,152,122,.5)}
.rail__item:focus-visible{outline:none}
.rail__item:focus-visible .rail__disc{box-shadow:0 0 0 2px var(--brass-lite)}

/* the chapter you are in */
.rail__item[aria-current=true]{color:var(--brass-lite)}
.rail__item[aria-current=true] .rail__disc{
  border-color:var(--brass-lite);
  background:rgba(32,22,16,.78);
  box-shadow:0 0 0 1px rgba(201,152,122,.34),0 0 18px rgba(201,152,122,.34);
}
.rail__item[aria-current=true] .rail__art{opacity:1}
.rail__item[aria-current=true] .rail__label{color:var(--brass-lite)}
.rail__item[aria-current=true] .rail__n{color:rgba(201,152,122,.8)}

@media (prefers-reduced-motion:reduce){
  /* the head still reports, it just does not glide there */
  .rail__hand{transition:none}
}
@media (forced-colors:active){
  /* Everything here is drawn out of backgrounds, gradients and shadows, all of
     which resolve away. The shell keeps a real border so the bar still exists,
     and the ticks are decorative, so they are simply allowed to go. */
  .rail__frost{background:Canvas}
  .rail__mid{border-color:CanvasText}
  .rail__cap path{stroke:CanvasText}
  .rail__disc{border-color:CanvasText;background:Canvas}
  .rail__item[aria-current=true] .rail__disc{border-color:Highlight;box-shadow:none}
  .rail__item[aria-current=true],.rail__item[aria-current=true] .rail__label{color:Highlight}
  .rail__base,.rail__glow,.rail__hot,.rail__tip,.rail__item+.rail__item::before{display:none}
  .rail__item:focus-visible .rail__disc{box-shadow:0 0 0 2px Highlight}
}

/* -------------------------------------- the composed static chapters --- */
.film__static{display:none;padding-block:var(--s7) var(--sec)}
/* margin-block only: .wrap-wide needs its auto inline margins to stay. */
.chapters{list-style:none;margin-block:0;padding:0;display:grid;gap:var(--s9)}
.chapter{display:grid;gap:var(--s5);align-items:center}
.chapter__media{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--night-2)}
.chapter__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.chapter__text{display:grid;gap:var(--s3);align-content:start}
.chapter__num{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);color:var(--brass-lite);margin:0}
.chapter__text .body{color:var(--night-ink-60);max-width:var(--measure)}
@media (min-width:821px){
  .chapter{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,5vw,96px)}
  .chapter:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .chapter:nth-child(even) .chapter__media{order:2}
  /* Square at this width: a portrait plate next to four lines of caption leaves
     half a screen of nothing between the two. */
  .chapter__media img{aspect-ratio:1}
}

/* The five gates, character for character the ones craft.js watches. Phones,
   portrait tablets, coarse landscape and reduced motion read the chapters. */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .film__track{display:none}
  .film__static{display:block}
}
/* Nothing scrubs without JavaScript, and 700svh of empty black is not a page.
   The same seven chapters carry the film instead. */
html:not(.js) .film__track{display:none}
html:not(.js) .film__static{display:block}
/* The dock is a fine-pointer control: its cells are 28px tall and cannot meet
   the 44px target minimum, so a coarse pointer never sees it. */
@media (pointer:coarse),(prefers-reduced-motion:reduce){
  .film__dock{display:none}
}

/* ======================================================= EIGHT PARTS === */
.parts__layout{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(40px,5vw,110px);margin-top:var(--s9)}

.parts__index{position:sticky;top:calc(var(--header-h) + var(--s6));align-self:start}
.parts__index ol{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
.parts__index li{border-bottom:1px solid var(--rule)}
.parts__index a{
  display:flex;align-items:baseline;gap:var(--s3);min-height:44px;padding-block:var(--s3);
  font:500 var(--t-sm)/1.2 var(--f-sans);color:var(--ink-45);text-decoration:none;
  transition:color var(--d1) var(--e-micro);
}
.parts__index a span{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-45)}
.parts__index a:hover{color:var(--ink)}
.parts__index a[aria-current=true]{color:var(--ink)}
.parts__index a[aria-current=true] span{color:var(--brass)}

.parts__list{list-style:none;margin:0;padding:0;display:grid}
/* Rows alternate, and the plate keeps the narrower track on both sides so the
   photographs stay one size down the column rather than swapping width. */
.part-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  padding-block:var(--s9);border-top:1px solid var(--rule);
  scroll-margin-top:calc(var(--header-h) + var(--s6));
}
.part-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.part-row:first-child{border-top:0;padding-top:0}
.part-row:last-child{padding-bottom:0}
.part-row:nth-child(even) .part-row__media{order:2}
.part-row__media{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-sunk)}
.part-row__media{position:relative}
.part-row__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* ------------------------------------------------------- THE CALLOUTS --
   Each photograph is annotated: a target on the component, a leader, and the
   name on a plate at the edge of the frame.

   The plate is pinned to the EDGE rather than offset from the target. That is
   what makes the thing robust: the leader stretches to reach it, so a long name
   can never shove the plate out of frame, and the target is free to sit exactly
   on the part instead of wherever there happened to be room for the text.

   Direction comes from the same nth-child that alternates the columns, so the
   annotation always runs towards the words and never away from them. */
.part-pin{
  position:absolute;inset:0;pointer-events:none;
  --edge:clamp(10px,1.6vw,18px);
}

/* -- the target ---------------------------------------------------------- */
.part-pin__node{
  position:absolute;left:var(--px);top:var(--py);
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:var(--r-full);
  border:2px solid var(--brass-lite);
  /* Three shadows, and each is load-bearing: a dark ring immediately outside
     the brass so it separates from gold, a wider soft one so it separates from
     marble, and an inner dark ring so the centre dot never merges with a
     highlight behind it. Without them the ring vanishes on half the frames. */
  box-shadow:0 0 0 1.5px rgba(11,11,12,.72),0 2px 14px rgba(11,11,12,.6),
             inset 0 0 0 1.5px rgba(11,11,12,.5);
  opacity:0;transform:scale(.3);
  transition:opacity var(--d2) var(--e-out),transform var(--d2) var(--e-out);
}
.part-pin__node::before{
  content:"";position:absolute;inset:0;margin:auto;
  width:5px;height:5px;border-radius:var(--r-full);
  background:var(--brass-lite);box-shadow:0 0 7px rgba(11,11,12,.85);
}
/* One slow ring leaving the target when the row arrives. It runs three times
   and stops: a marker that pulses forever is a notification, not an annotation. */
.part-pin__node::after{
  content:"";position:absolute;inset:-2px;border-radius:var(--r-full);
  border:1px solid var(--brass-lite);opacity:0;
}
.part-row.is-live .part-pin__node::after{animation:part-ping 2.6s var(--e-out) 3}
@keyframes part-ping{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

/* -- the leader ---------------------------------------------------------- */
.part-pin__lead{
  position:absolute;top:var(--py);height:1px;
  left:var(--px);right:var(--edge);
  transform:scaleX(0);transform-origin:left center;
  /* brighter where it leaves the target, quieter as it crosses the picture, so
     it reads as an instrument line and not as a scratch on the photograph */
  background:linear-gradient(to right,var(--brass-lite) 0 14%,rgba(214,178,122,.5) 14% 100%);
  box-shadow:0 1px 6px rgba(11,11,12,.55);
  transition:transform var(--d3) var(--e-out) 90ms;
}

/* -- the plate ----------------------------------------------------------- */
.part-pin__tag{
  position:absolute;top:var(--py);right:var(--edge);transform:translateY(-50%);
  display:inline-flex;align-items:baseline;gap:var(--s2);
  padding:7px 11px;border-radius:var(--r-xs);
  font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--night-ink);white-space:nowrap;
  /* Frosted rather than solid: solid reads as a UI chip pasted on top, frosted
     keeps the photograph present underneath while still guaranteeing contrast.
     The background alone carries it where backdrop-filter is unsupported. */
  background:rgba(14,13,14,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(242,237,229,.16);
  box-shadow:0 10px 30px rgba(11,11,12,.5),inset 0 1px 0 rgba(242,237,229,.1);
  opacity:0;transform:translate(8px,-50%);
  transition:opacity var(--d2) var(--e-out) 200ms,transform var(--d2) var(--e-out) 200ms;
}
.part-pin__tag em{font-style:normal;color:var(--brass-lite);letter-spacing:.1em}
/* Where the leader lands, and only there. This was a full-height brass edge,
   which is the same shape as a decorative side-tab and says nothing: the line
   arrives at one point, not along the whole side. A short tick on the plate's
   centre line -- which is where the leader is, since both are placed at --py --
   marks the actual join. */
.part-pin__tag::before{
  content:"";position:absolute;left:-1px;top:50%;
  width:2px;height:13px;margin-top:-6.5px;border-radius:1px;
  background:var(--brass-lite);
}

.part-row.is-live .part-pin__node{opacity:1;transform:none}
.part-row.is-live .part-pin__lead{transform:none}
.part-row.is-live .part-pin__tag{opacity:1;transform:translate(0,-50%)}

/* Mirrored where the picture is on the right and the words are on the left. */
.part-row:nth-child(even) .part-pin__lead{
  left:var(--edge);right:calc(100% - var(--px));
  transform-origin:right center;
  background:linear-gradient(to left,var(--brass-lite) 0 14%,rgba(214,178,122,.5) 14% 100%);
}
.part-row:nth-child(even) .part-pin__tag{
  right:auto;left:var(--edge);
  flex-direction:row-reverse;
  transform:translate(-8px,-50%);
}
.part-row:nth-child(even) .part-pin__tag::before{left:auto;right:-1px}
.part-row:nth-child(even).is-live .part-pin__tag{transform:translate(0,-50%)}

@media (prefers-reduced-motion:reduce){
  .part-row.is-live .part-pin__node::after{animation:none}
}

.part-row__text{display:grid;gap:var(--s3);align-content:center}
.part-row__n{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);color:var(--brass);margin:0}
.part-row__text .body{max-width:var(--measure);margin-top:var(--s1)}
.part-row__fact{
  margin:var(--s3) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule);
  font:400 var(--t-xs)/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
}

@media (max-width:1040px){
  .parts__layout{grid-template-columns:1fr;gap:var(--s7)}
  .parts__index{position:static}
  .parts__index ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
  .part-row{padding-block:var(--s8)}
}
@media (max-width:720px){
  .part-row,.part-row:nth-child(even){grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .part-row:nth-child(even) .part-row__media{order:0}
  .part-row__media img{aspect-ratio:3/2}
  /* The pictures are cut at 4:5 and the pin coordinates are measured against
     that. Here the frame is 3:2, so cover re-crops the picture and the ring
     would point at whatever happened to move under it. The name sits directly
     beneath the photograph in this layout anyway, which is what the leader was
     drawing the eye towards in the first place. */
  .part-pin{display:none}
}
@media (max-width:480px){
  .parts__index ol{grid-template-columns:1fr}
}

/* ========================================================= THE BENCH === */
.bench{background:var(--paper-sunk)}
.bench__figure{align-self:start}
.bench__figure img{aspect-ratio:3/4;object-fit:cover;width:100%}
.bench__copy .dl-spec{margin-top:var(--s2)}

/* ============================================================ WIND IT === */
.wind{background:var(--night)}
.wind__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center}
.wind__copy .meta{color:var(--night-ink-60)}
.wind__control{display:grid;justify-items:center}

/* The crown: two space tokens wide, which lands the dial at 224px. It has to
   read as a control from across the section and sits far above any target
   minimum, and no single space token is close to that size. */
.crown{
  position:relative;width:calc(var(--s10) + var(--s9));height:calc(var(--s10) + var(--s9));
  display:grid;place-items:center;isolation:isolate;
  padding:0;border:0;border-radius:var(--r-full);background:transparent;
  color:var(--brass-lite);cursor:pointer;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.crown::before{
  content:"";position:absolute;inset:var(--s3);z-index:-1;border-radius:var(--r-full);
  /* the accent at 16%, mixed from the token rather than written out */
  background:radial-gradient(circle,color-mix(in srgb,var(--brass-lite) 16%,transparent),transparent 66%);
  opacity:.4;transition:opacity var(--d3) var(--e-out);
}
.crown:hover::before,.crown:focus-visible::before,.crown.is-holding::before{opacity:.8}
.wind.is-wound .crown::before{opacity:1}

.crown__arc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.crown__arc-track{fill:none;stroke:var(--night-rule-strong);stroke-width:1.5}
.crown__arc-fill{
  fill:none;stroke:var(--brass-lite);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--p,0));
  opacity:clamp(0,var(--p,0) * 40,1);
}

/* The drawing fills the dial rather than floating in it: 128px inside the
   224px arc, which is the same ratio the case has to its bezel. */
.crown__svg{width:var(--s10);height:var(--s10);transition:transform var(--d3) var(--e-out)}
.crown.is-holding .crown__svg{transform:scale(.94)}
.wind.is-wound .crown__svg{transform:scale(1)}
.crown__body{fill:var(--night-2);stroke:var(--brass-lite);stroke-width:1.6}
.crown__grooves{fill:none;stroke:var(--brass-lite);stroke-width:1.4;stroke-linecap:round;opacity:.55}
.crown__stem{fill:var(--brass-lite)}
.crown__cap{fill:var(--brass-lite);opacity:.5}
.crown__label{
  position:absolute;left:50%;bottom:calc(var(--s6) * -1);transform:translateX(-50%);
  white-space:nowrap;font:400 var(--t-xs)/1 var(--f-mono);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--night-ink-60);transition:color var(--d2) var(--e-micro);
}
.crown.is-holding .crown__label,.wind.is-wound .crown__label{color:var(--brass-lite)}

.wind__status{
  min-height:1.6em;margin:var(--s7) 0 0;text-align:center;
  font:400 var(--t-xs)/1.6 var(--f-mono);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--brass-lite);
}
.wind__list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2);text-align:center}
.wind__list li{transition:opacity var(--d3) var(--e-out),transform var(--d3) var(--e-out)}
.js .wind__list li{opacity:0;transform:translateY(10px)}
.js .wind.is-wound .wind__list li{opacity:1;transform:none}
/* The four numbers land one after another. The steps are the state token,
   because the whole run has to finish inside one entrance. */
.wind.is-wound .wind__list li:nth-child(1){transition-delay:calc(var(--d2) * .2)}
.wind.is-wound .wind__list li:nth-child(2){transition-delay:calc(var(--d2) * .8)}
.wind.is-wound .wind__list li:nth-child(3){transition-delay:calc(var(--d2) * 1.4)}
.wind.is-wound .wind__list li:nth-child(4){transition-delay:calc(var(--d2) * 2)}
.wind.is-wound.is-settled .wind__list li:nth-child(n){transition-delay:0s}
.wind__list li:first-child{color:var(--brass-lite)}

@media (max-width:880px){
  .wind__grid{grid-template-columns:1fr;gap:var(--s9)}
}
@media (max-width:420px){
  /* One token narrower on the smallest screens, so the label still clears the
     section padding under the dial. */
  .crown{width:var(--s10);height:var(--s10)}
  /* 72px in a 128px dial holds the same drawing-to-bezel ratio as the desktop
     crown, so the control does not change character on a phone. */
  .crown__svg{width:calc(var(--s9) - var(--s5));height:calc(var(--s9) - var(--s5))}
}

/* ============================================================== CLOSE === */
/* The measure is set for body copy; a centred close reads better a little
   wider, so the head takes one and a half times it and nothing else changes. */
.close__head{max-width:calc(var(--measure) * 1.5)}
.close__head .lede{margin-inline:auto}
.close__cta{justify-content:center;padding-top:var(--s5)}
.close__pager{margin-top:var(--sec)}
/* .pager is shared and sized for a fine pointer. Under a finger its two links
   still have to clear the 44px minimum. */
@media (pointer:coarse){
  .close__pager .pager a{min-height:44px;align-content:center}
}