/* ============================================================================
   SECTION ONE
   ----------------------------------------------------------------------------
   One rule holds this together: the section is 0.9409 as tall as it is wide,
   because that is what Adam drew — a 1924.34-wide art column, 1810.6 tall.
   Every layer below is a percentage of that box, straight off his export.
   Nothing measures anything at runtime; there is no JavaScript here at all.
   ========================================================================= */

.sec1{
  --col: 1924.34;              /* his art column, the box percentages resolve in */
  position: relative;
  width: 100%;
  /* his ocean is 1924.34 x 1810.6, plus 125.08 units of sky on top - see .page.
     A parallaxed sign needs somewhere to go: his artboard leaves the hero
     barely 123px of clearance above it, which capped how far it could travel
     before it would slide out of its own section, and anchored to the load it
     could only ever ride up. This is that room. */
  aspect-ratio: 1924.34 / 1935.68;
  /* a size container, so the type below can be a share of THIS box rather than
     of the viewport — the section is full width today and might not always be */
  container-type: inline-size;
  /* HIS OCEAN IS TWO GRADIENTS AND NO SHAPES.
     New_darker_ocean.svg is his original horizontal ramp with a second polygon
     over it: a vertical ramp from #00287d down to transparent, out at y 1796.6
     of his 1810.6 - deep water at the horizon, his own blue only at the very bottom.

     THE DARK RUN STARTS AT THE SECTION TOP, not the ocean's. His ocean begins
     at .page, 6.46pc down, and the band of sky above it is filled with the same
     water; darkening the ocean and not the band would put a hard line across
     the join. So the first 6.46pc is flat #00287d and his eight stops are
     mapped over the 92.817pc below it - his own 99.227pc, measured off .page.

     He extended the fade in a second pass: it used to run out at 72.7pc and now
     carries the deep water almost the whole way down, reaching his own blue
     just as it meets the beach - which is what section two's background was
     sampled from, so the seam is still unaffected. */
  background: var(--sec1-bg,
    linear-gradient(180deg,
      rgba(0,40,125,1) 0%,          /* flat through the band of sky */
      rgba(0,40,125,1) 6.460%,
      rgba(0,41,126,.98) 28.736%,
      rgba(0,45,131,.9) 45.443%,
      rgba(0,51,140,.78) 59.366%,
      rgba(1,61,152,.6) 72.360%,
      rgba(2,73,168,.37) 84.426%,
      rgba(3,87,188,.1) 95.564%,
      rgba(4,93,195,0) 99.277%),
    linear-gradient(90deg, #004ca2 0%, #045dc3 100%));
  overflow: hidden;            /* the bleed leaves by the left edge */
  isolation: isolate;
}

/* every piece is placed the same way, so there is one rule rather than nine */
/* his artboard, sitting under that band of sky. Everything below is a share of
   THE PAGE, not of the section, so all of his own marks stand where they were. */
.sec1 .page{ position:absolute; left:0; right:0; top:6.46%; bottom:0 }

.sec1 [data-at]{ position:absolute; display:block; }
.sec1 img[data-at], .sec1 svg[data-at]{ height:auto; }

/* --- z, as he set it: clouds over everything, the sign just under them ---- */
/* HIS TWO OCEANS ARE NOT THE SAME BLUE. Section one's is #004ca2 to #045dc3;
   the top band of section two's wave art reads #014ea5 to #055fc6. Three steps of
   255 apart - invisible on their own, a hard line across the full width where
   the sections meet. This fades section one's last stretch into section two's
   blue so there is no line to see. It sits under everything, so the road and
   the copy are untouched. */
.sec1::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14%;
  background: var(--sec1-fade,
    linear-gradient(90deg,#014ea5 0%,#055fc6 100%));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
  z-index:0; pointer-events:none;
}

.sec1 .z-ground { z-index:0 }
.sec1 .z-road   { z-index:1 }
.sec1 .z-copy   { z-index:2 }
.sec1 .z-sign   { z-index:3 }
.sec1 .z-cloud  { z-index:4 }

/* --- the gantry ----------------------------------------------------------
   His truss is 4 cells each side of the sign, stepping 129.67 — 6.738% of the
   column. Repeated as a background it fills whatever the screen is, so the
   sign stays centred and more truss appears as you zoom out, which is what he
   asked for. The cell is an image: 514 shapes each as vector would be ~7,700
   across a screen, heavier than the 32 copies baked into his export.
   ---------------------------------------------------------------------- */
.sec1 .truss{
  /* absolute+block explicitly: the shared placement rule matches [data-at] and
     this is a bare span, so without these it stays an inline box 0px wide. */
  position:absolute; display:block;
  left:0; right:0; width:100%;
  /* His tile is 131.8 x 156.57 and its X centres on the X of the cells baked
     into his section (y 311.22 + 123.7/2 = 373.07), so the band runs from
     373.07 - 156.57/2 = 294.77 for 156.57 — as shares of the section height,
     16.28% and 8.65%. background-size:auto 100% then makes each repeat 6.85%
     of the column wide, which is his own 131.8. Centred, so the four cells
     either side of the sign stay symmetrical however wide the screen is. */
  top:16.28%; height:8.65%;
  background:url("../../assets/v2/section-01/truss-cell.webp") repeat-x center;
  background-size:auto 100%;
  z-index:2;
}

/* --- the copy ------------------------------------------------------------
   His sizes and weights, read out of his export, as a share of the column: a
   size of N is N/1924.34 of it. In cqw, not px — the section is a fixed-aspect
   picture and everything in it scales together.

   His subheads are set in Highway Gothic Expanded, the road-sign face, and so
   is the plate copy. It is not a webfont we have and it is NOT on Google Fonts
   (checked: HTTP 400 for both spellings). Overpass is, and was drawn from the
   same FHWA Highway Gothic series, so it stands in until his file lands.
   ---------------------------------------------------------------------- */
.sec1 .copy{
  position:absolute;
  margin:0;
  text-align:center;
  color:#fff;
  font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
}
.sec1 .copy h1,.sec1 .copy h2,.sec1 h2.copy{ margin:0; font-weight:900; line-height:1.06 }
.sec1 .copy h1 span{ display:block }
.sec1 .l1{ font-size:2.271cqw }                 /* his 43.70 */
.sec1 .l2{ font-size:3.927cqw }                 /* his 75.56 */
.sec1 .l3{ font-size:1.621cqw }                 /* his 31.19 */
.sec1 h2.copy{ font-size:2.749cqw; white-space:nowrap }   /* his 52.90 */

/* HIS ROAD-SIGN FACE — the real one, self-hosted.
   Highway Gothic Expanded, from his own files. No stand-in and no scaling: the
   subheads are set at his size in his measure because it is his font.

   For the record, what the stand-ins cost, measured on both of his subhead
   lines: Overpass wanted 0.739 (it was drawn from the same FHWA series but is
   26% wider, which put his subhead SMALLER than his body copy when he set it
   larger), PT Sans Narrow 0.952. Neither is needed now.
   ---------------------------------------------------------------------- */
/* His subhead line breaks are explicit in his file, so they are explicit here
   too: one span per line, none of them allowed to wrap. Left to the browser a
   fraction of a percent of metric difference re-wrapped his two lines into
   three and pushed them into the copy below — and no box width is the right
   width when the breaks are already decided. */
.sec1 .sub span{ display:block; white-space:nowrap }
.sec1 .sub{
  font-size:1.230cqw;                           /* his 23.66 */
  font-weight:400; line-height:1.28;
  font-family:"Highway Gothic Expanded","Be Vietnam Pro",Arial,sans-serif;
}
.sec1 .body{ font-size:1.025cqw; font-weight:300; line-height:1.42 }  /* his 19.72 */




/* his button: the guide-sign green plate, with the copy laid over it */
.sec1 .cta{ position:relative; display:inline-block; text-decoration:none }
.sec1 .cta img,
.sec1 .cta svg.plate{ display:block; width:100%; height:auto }

/* --- THE BUTTON AT NIGHT: RED, AND LIT -----------------------------------
   His ask. The plate turns from his green to a red, and the glow is the
   plate's own shape rather than a box behind it - drop-shadow follows alpha,
   box-shadow follows the rectangle, and this plate has rounded ends and a
   triangle hanging off its left. Two shadows, a tight one and a wide one,
   which is what makes a neon tube read as a tube and not as a blur.

   Day is the fallback in both, so with no night set this is the button he
   drew, unlit. */
.sec1 .cta svg.plate [fill="#059236"]{
  fill: var(--cta-plate, #059236);
  stroke: var(--cta-line, none);
  stroke-miterlimit:10;
  transition: fill 1s linear, stroke 1s linear;
}
.sec1 .cta{
  filter: var(--cta-glow, none);
  transition: filter 1s linear;
}
/* Centred in the green plate, which starts where his triangle ends: the
   triangle runs 0–67.8 of a 290.03-wide button, so the label's space is
   23.37%–100% and its centre is 61.7%, not the 60% a naive box gave. */
.sec1 .cta span{
  /* named, not inherited - the anchor sits inside .page and nothing between it
     and <html> states the family, so it was falling back to serif */
  font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
  position:absolute; left:23.37%; right:0; top:50%; transform:translateY(-50%);
  /* his 20.52 ExtraBold — 1.066% of the column, and the button is 15.07% of
     it, so 7.07 of the button's own width */
  color:#fff; font-weight:800; font-size:7.07cqi; white-space:nowrap;
  text-align:center;
}
.sec1 svg.z-sign{ position:absolute; display:block; height:auto }

/* --- HIS HORIZONTAL SCALE ------------------------------------------------
   Every text block in his file carries a scale(k 1): the headlines .97, the
   second heading .9666, the road-sign subheads .82. He is squeezing the type,
   and it is not decoration — it is why Highway Gothic Expanded fits the
   measure he drew. Without it the subheads run 22% long and wrap into the copy
   below, which is exactly what two rounds of stand-in fonts were compensating
   for by accident.

   The box is widened by 1/k so the line breaks fall where his do, and scaleX
   brings it back to his measure. transform-origin is the centre, so a centred
   block stays on its own axis.
   ---------------------------------------------------------------------- */
.sec1 [style*="--sx"]{
  transform:scaleX(var(--sx));
  transform-origin:50% 0;
}

/* --- THE HERO SIGN'S SERVICE UNDERLINES ----------------------------------
   He drew one "Hover line" under Print Design. There is now one under each of
   the four services, each his exact rect centred on that label. Nothing shows
   until you hover the panel; then the line grows out from its own centre to
   full width, which is his "from shorter line to the wider line".

   scaleX on an SVG rect needs transform-box:fill-box, or the origin is the
   whole SVG's viewBox and the line slides across the sign instead of growing
   in place.

   The hit area is a transparent rect over the whole panel, so the words, the
   arrow above them and the space between are all one target. fill:none alone
   receives no pointer events - hence pointer-events="all" in the markup.
   ---------------------------------------------------------------------- */
.sec1 .z-sign .svc{ cursor:pointer }
.sec1 .z-sign .svc .ul{
  transform-box:fill-box; transform-origin:50% 50%;
  transform:scaleX(0.3);
  opacity:0;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s linear;
}
.sec1 .z-sign .svc:hover .ul,
.sec1 .z-sign .svc:focus-visible .ul,
.sec1 .z-sign .svc:focus-within .ul{
  transform:scaleX(1);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .sec1 .z-sign .svc .ul{ transition:opacity .18s linear; transform:scaleX(1) }
}


/* --- HIS BOAT'S CIRCUIT ---------------------------------------------------
   A lazy oval in the open water east of the road, and the boat STEERS - it is
   turned to face along the path at every step, because a boat that slides
   sideways round a bend reads as a sticker being dragged. His art points bow
   up, so 0deg is his drawing untouched.

   IT STARTS ON HIS MARK. The home position is the oval's LEFT FLANK, not its
   centre, so at first paint the boat is exactly where he placed it and swings
   up and right from there.

   The circuit is 10.4cqw across and 20cqw tall - 207 x 398px on a 1990 screen,
   which is the water he has. Measured over a full lap it never comes closer
   than 192px to the road, 69px to the right edge or 246px to the bottom, and
   touches nothing. Note that a turning boat's BOUNDING BOX swells: broadside it
   is 208px wide where bow-on it is 81px, and the widest moment is not the
   furthest-right moment, so this has to be walked rather than reasoned about -
   tools/ has the check.

   75s a lap is about 13px a second. A boat should look like it is going
   somewhere without ever seeming to hurry.

   --rx and --ry are the two numbers to turn. The @keyframes below are
   GENERATED by tools/make_cruise.js - regenerate rather than hand-edit.
   ---------------------------------------------------------------------- */
.sec1 .cruise{
  --rx: 5.2cqw; --ry: 10cqw;
  animation: cruise-move 75s linear infinite;
}
.sec1 .cruise > *{ animation: cruise-turn 75s linear infinite }

/* --- HIS SPEEDBOAT'S RUN ---------------------------------------------------
   Not a circuit. It leaves at the first road curve, opens up straight north,
   goes off the top of the section altogether, turns round out of sight and
   comes back down a parallel line - then carves a U he can see and does it
   again. A racetrack stood on its end: two straights and two half-circles.

   WHY IT HAS TO OVERSHOOT. The straight is 64cqw where the section top is only
   54.9cqw above the boat's mark, and the boat is 6.1cqw long: it is a clear
   6cqw past the edge before the turn even starts, so the whole U happens where
   nobody can see it, and it stays gone long enough to be missed. At 58cqw the
   turn was out of sight but the boat was only hidden for a second.

   THE LANE IS 7.2cqw AND IT RUNS LEFT. Broadside the boat measures 6.1cqw
   across, so the widest the run ever gets is 13.3cqw - and going left from his
   own mark rather than right puts the whole of it between 3.0% and 16.4% of
   the section. He asked for 20% at the outside; this leaves it room to spare
   and keeps his placement as the starting mark.

   24s a lap is 88px a second on a 1400px screen, against the yacht's 13. It is
   a speedboat, so it is allowed to be in a hurry.

   --lane and --run are the two numbers to turn. The @keyframes are GENERATED
   by tools/make_dash.js - regenerate rather than hand-edit.
   ---------------------------------------------------------------------- */
.sec1 .cruise-fast{
  --lane: 7.2cqw; --run: 64cqw;
  animation: dash-move 24s linear infinite;
}
.sec1 .cruise-fast > *{ animation: dash-turn 24s linear infinite }
.sec1 .cruise-fast.still, .sec1 .cruise-fast.still > *{ animation-play-state:paused }
.sec1 .fast-boat > .shade{ left:-3.450%; top:-0.055%; width:106.898% }
@media (prefers-reduced-motion: reduce){
  .sec1 .cruise-fast, .sec1 .cruise-fast > *{ animation:none }
}
.sec1 .cruise.still, .sec1 .cruise.still > *{ animation-play-state:paused }
/* his two exports were cropped to their own content, so the shadow is put back
   under the hull by matching their centres - see the markup */
.sec1 .boat > .shade{ left:3.220%; top:-4.513%; width:93.559% }
@media (prefers-reduced-motion: reduce){
  .sec1 .cruise, .sec1 .cruise > *{ animation:none }
}


@keyframes cruise-move{
        0% { translate: calc(var(--rx) * 0.00000) calc(var(--ry) * 0.00000) }
   4.1667% { translate: calc(var(--rx) * 0.03407) calc(var(--ry) * -0.25882) }
   8.3333% { translate: calc(var(--rx) * 0.13397) calc(var(--ry) * -0.50000) }
     12.5% { translate: calc(var(--rx) * 0.29289) calc(var(--ry) * -0.70711) }
  16.6667% { translate: calc(var(--rx) * 0.50000) calc(var(--ry) * -0.86603) }
  20.8333% { translate: calc(var(--rx) * 0.74118) calc(var(--ry) * -0.96593) }
       25% { translate: calc(var(--rx) * 1.00000) calc(var(--ry) * -1.00000) }
  29.1667% { translate: calc(var(--rx) * 1.25882) calc(var(--ry) * -0.96593) }
  33.3333% { translate: calc(var(--rx) * 1.50000) calc(var(--ry) * -0.86603) }
     37.5% { translate: calc(var(--rx) * 1.70711) calc(var(--ry) * -0.70711) }
  41.6667% { translate: calc(var(--rx) * 1.86603) calc(var(--ry) * -0.50000) }
  45.8333% { translate: calc(var(--rx) * 1.96593) calc(var(--ry) * -0.25882) }
       50% { translate: calc(var(--rx) * 2.00000) calc(var(--ry) * -0.00000) }
  54.1667% { translate: calc(var(--rx) * 1.96593) calc(var(--ry) * 0.25882) }
  58.3333% { translate: calc(var(--rx) * 1.86603) calc(var(--ry) * 0.50000) }
     62.5% { translate: calc(var(--rx) * 1.70711) calc(var(--ry) * 0.70711) }
  66.6667% { translate: calc(var(--rx) * 1.50000) calc(var(--ry) * 0.86603) }
  70.8333% { translate: calc(var(--rx) * 1.25882) calc(var(--ry) * 0.96593) }
       75% { translate: calc(var(--rx) * 1.00000) calc(var(--ry) * 1.00000) }
  79.1667% { translate: calc(var(--rx) * 0.74118) calc(var(--ry) * 0.96593) }
  83.3333% { translate: calc(var(--rx) * 0.50000) calc(var(--ry) * 0.86603) }
     87.5% { translate: calc(var(--rx) * 0.29289) calc(var(--ry) * 0.70711) }
  91.6667% { translate: calc(var(--rx) * 0.13397) calc(var(--ry) * 0.50000) }
  95.8333% { translate: calc(var(--rx) * 0.03407) calc(var(--ry) * 0.25882) }
      100% { translate: calc(var(--rx) * 0.00000) calc(var(--ry) * 0.00000) }
}

@keyframes cruise-turn{
        0% { rotate: -0.00deg }
   4.1667% { rotate: 15.00deg }
   8.3333% { rotate: 30.00deg }
     12.5% { rotate: 45.00deg }
  16.6667% { rotate: 60.00deg }
  20.8333% { rotate: 75.00deg }
       25% { rotate: 90.00deg }
  29.1667% { rotate: 105.00deg }
  33.3333% { rotate: 120.00deg }
     37.5% { rotate: 135.00deg }
  41.6667% { rotate: 150.00deg }
  45.8333% { rotate: 165.00deg }
       50% { rotate: 180.00deg }
  54.1667% { rotate: 195.00deg }
  58.3333% { rotate: 210.00deg }
     62.5% { rotate: 225.00deg }
  66.6667% { rotate: 240.00deg }
  70.8333% { rotate: 255.00deg }
       75% { rotate: 270.00deg }
  79.1667% { rotate: 285.00deg }
  83.3333% { rotate: 300.00deg }
     87.5% { rotate: 315.00deg }
  91.6667% { rotate: 330.00deg }
  95.8333% { rotate: 345.00deg }
      100% { rotate: 360.00deg }
}

/* the sign's shadow - see the markup for why it sits at this depth.
   THIS WENT MISSING ONCE: an edit truncated this file at the @keyframes marker
   to regenerate them, and took everything after it with them. The shadow
   element stayed in the markup and its computed style still reported a
   translate and an opacity, so it looked fine to every check I had - it just
   had no background left to paint. tools/check_shadows.js now tests the pixels. */
.sec1 .sign-shadow{
  position:absolute; z-index:2; background:#000; border-radius:1.372cqw;
  pointer-events:none;
}
@keyframes dash-move{
         0% { translate: calc(var(--lane) * 0.00000) 0 }
   21.2479% { translate: calc(var(--lane) * 0.00000) calc(var(--run) * -0.50000) }
   42.4957% { translate: calc(var(--lane) * 0.00000) calc(var(--run) * -1.00000) }
   42.8084% { translate: calc(var(--lane) * -0.00428) calc(var(--run) * -1.00000 + var(--lane) * -0.06526) }
   43.1211% { translate: calc(var(--lane) * -0.01704) calc(var(--run) * -1.00000 + var(--lane) * -0.12941) }
   43.4338% { translate: calc(var(--lane) * -0.03806) calc(var(--run) * -1.00000 + var(--lane) * -0.19134) }
   43.7465% { translate: calc(var(--lane) * -0.06699) calc(var(--run) * -1.00000 + var(--lane) * -0.25000) }
   44.0591% { translate: calc(var(--lane) * -0.10332) calc(var(--run) * -1.00000 + var(--lane) * -0.30438) }
   44.3718% { translate: calc(var(--lane) * -0.14645) calc(var(--run) * -1.00000 + var(--lane) * -0.35355) }
   44.6845% { translate: calc(var(--lane) * -0.19562) calc(var(--run) * -1.00000 + var(--lane) * -0.39668) }
   44.9972% { translate: calc(var(--lane) * -0.25000) calc(var(--run) * -1.00000 + var(--lane) * -0.43301) }
   45.3098% { translate: calc(var(--lane) * -0.30866) calc(var(--run) * -1.00000 + var(--lane) * -0.46194) }
   45.6225% { translate: calc(var(--lane) * -0.37059) calc(var(--run) * -1.00000 + var(--lane) * -0.48296) }
   45.9352% { translate: calc(var(--lane) * -0.43474) calc(var(--run) * -1.00000 + var(--lane) * -0.49572) }
   46.2479% { translate: calc(var(--lane) * -0.50000) calc(var(--run) * -1.00000 + var(--lane) * -0.50000) }
   46.5605% { translate: calc(var(--lane) * -0.56526) calc(var(--run) * -1.00000 + var(--lane) * -0.49572) }
   46.8732% { translate: calc(var(--lane) * -0.62941) calc(var(--run) * -1.00000 + var(--lane) * -0.48296) }
   47.1859% { translate: calc(var(--lane) * -0.69134) calc(var(--run) * -1.00000 + var(--lane) * -0.46194) }
   47.4986% { translate: calc(var(--lane) * -0.75000) calc(var(--run) * -1.00000 + var(--lane) * -0.43301) }
   47.8113% { translate: calc(var(--lane) * -0.80438) calc(var(--run) * -1.00000 + var(--lane) * -0.39668) }
   48.1239% { translate: calc(var(--lane) * -0.85355) calc(var(--run) * -1.00000 + var(--lane) * -0.35355) }
   48.4366% { translate: calc(var(--lane) * -0.89668) calc(var(--run) * -1.00000 + var(--lane) * -0.30438) }
   48.7493% { translate: calc(var(--lane) * -0.93301) calc(var(--run) * -1.00000 + var(--lane) * -0.25000) }
    49.062% { translate: calc(var(--lane) * -0.96194) calc(var(--run) * -1.00000 + var(--lane) * -0.19134) }
   49.3746% { translate: calc(var(--lane) * -0.98296) calc(var(--run) * -1.00000 + var(--lane) * -0.12941) }
   49.6873% { translate: calc(var(--lane) * -0.99572) calc(var(--run) * -1.00000 + var(--lane) * -0.06526) }
        50% { translate: calc(var(--lane) * -1.00000) calc(var(--run) * -1.00000 + var(--lane) * -0.00000) }
   71.2479% { translate: calc(var(--lane) * -1.00000) calc(var(--run) * -0.50000) }
   92.4957% { translate: calc(var(--lane) * -1.00000) 0 }
   92.8084% { translate: calc(var(--lane) * -0.99572) calc(var(--lane) * 0.06526) }
   93.1211% { translate: calc(var(--lane) * -0.98296) calc(var(--lane) * 0.12941) }
   93.4338% { translate: calc(var(--lane) * -0.96194) calc(var(--lane) * 0.19134) }
   93.7465% { translate: calc(var(--lane) * -0.93301) calc(var(--lane) * 0.25000) }
   94.0591% { translate: calc(var(--lane) * -0.89668) calc(var(--lane) * 0.30438) }
   94.3718% { translate: calc(var(--lane) * -0.85355) calc(var(--lane) * 0.35355) }
   94.6845% { translate: calc(var(--lane) * -0.80438) calc(var(--lane) * 0.39668) }
   94.9972% { translate: calc(var(--lane) * -0.75000) calc(var(--lane) * 0.43301) }
   95.3098% { translate: calc(var(--lane) * -0.69134) calc(var(--lane) * 0.46194) }
   95.6225% { translate: calc(var(--lane) * -0.62941) calc(var(--lane) * 0.48296) }
   95.9352% { translate: calc(var(--lane) * -0.56526) calc(var(--lane) * 0.49572) }
   96.2479% { translate: calc(var(--lane) * -0.50000) calc(var(--lane) * 0.50000) }
   96.5605% { translate: calc(var(--lane) * -0.43474) calc(var(--lane) * 0.49572) }
   96.8732% { translate: calc(var(--lane) * -0.37059) calc(var(--lane) * 0.48296) }
   97.1859% { translate: calc(var(--lane) * -0.30866) calc(var(--lane) * 0.46194) }
   97.4986% { translate: calc(var(--lane) * -0.25000) calc(var(--lane) * 0.43301) }
   97.8113% { translate: calc(var(--lane) * -0.19562) calc(var(--lane) * 0.39668) }
   98.1239% { translate: calc(var(--lane) * -0.14645) calc(var(--lane) * 0.35355) }
   98.4366% { translate: calc(var(--lane) * -0.10332) calc(var(--lane) * 0.30438) }
   98.7493% { translate: calc(var(--lane) * -0.06699) calc(var(--lane) * 0.25000) }
    99.062% { translate: calc(var(--lane) * -0.03806) calc(var(--lane) * 0.19134) }
   99.3746% { translate: calc(var(--lane) * -0.01704) calc(var(--lane) * 0.12941) }
   99.6873% { translate: calc(var(--lane) * -0.00428) calc(var(--lane) * 0.06526) }
       100% { translate: calc(var(--lane) * 0.00000) calc(var(--lane) * 0.00000) }
}

@keyframes dash-turn{
         0% { rotate: -14.35deg }
   21.2479% { rotate: -14.35deg }
   42.4957% { rotate: -14.35deg }
   42.8084% { rotate: -21.85deg }
   43.1211% { rotate: -29.35deg }
   43.4338% { rotate: -36.85deg }
   43.7465% { rotate: -44.35deg }
   44.0591% { rotate: -51.85deg }
   44.3718% { rotate: -59.35deg }
   44.6845% { rotate: -66.85deg }
   44.9972% { rotate: -74.35deg }
   45.3098% { rotate: -81.85deg }
   45.6225% { rotate: -89.35deg }
   45.9352% { rotate: -96.85deg }
   46.2479% { rotate: -104.35deg }
   46.5605% { rotate: -111.85deg }
   46.8732% { rotate: -119.35deg }
   47.1859% { rotate: -126.85deg }
   47.4986% { rotate: -134.35deg }
   47.8113% { rotate: -141.85deg }
   48.1239% { rotate: -149.35deg }
   48.4366% { rotate: -156.85deg }
   48.7493% { rotate: -164.35deg }
    49.062% { rotate: -171.85deg }
   49.3746% { rotate: -179.35deg }
   49.6873% { rotate: -186.85deg }
        50% { rotate: -194.35deg }
   71.2479% { rotate: -194.35deg }
   92.4957% { rotate: -194.35deg }
   92.8084% { rotate: -201.85deg }
   93.1211% { rotate: -209.35deg }
   93.4338% { rotate: -216.85deg }
   93.7465% { rotate: -224.35deg }
   94.0591% { rotate: -231.85deg }
   94.3718% { rotate: -239.35deg }
   94.6845% { rotate: -246.85deg }
   94.9972% { rotate: -254.35deg }
   95.3098% { rotate: -261.85deg }
   95.6225% { rotate: -269.35deg }
   95.9352% { rotate: -276.85deg }
   96.2479% { rotate: -284.35deg }
   96.5605% { rotate: -291.85deg }
   96.8732% { rotate: -299.35deg }
   97.1859% { rotate: -306.85deg }
   97.4986% { rotate: -314.35deg }
   97.8113% { rotate: -321.85deg }
   98.1239% { rotate: -329.35deg }
   98.4366% { rotate: -336.85deg }
   98.7493% { rotate: -344.35deg }
    99.062% { rotate: -351.85deg }
   99.3746% { rotate: -359.35deg }
   99.6873% { rotate: -366.85deg }
       100% { rotate: -374.35deg }
}



/* --- HIS MOON -----------------------------------------------------------
   Night only, at HIS position and HIS size, read straight out of artboard
   one: his halo circle is r 23.9 centred on 1452.23, 42.75 of his 1920 x
   1808 board, and ui-moon.svg is that circle exactly - 47.8 square, halo
   included. So the three numbers in the markup are his, not a placement.

   THE COLUMN OF LIGHT ON THE WATER IS GONE. It was mine, not his - there is
   no reflection in any of his five artboards - and it read as pasted on.
   Its blend went with it, which leaves the page with no mix-blend-mode at
   all: the one thing that could reach back into daylight and cost his body
   copy its subpixel antialiasing. */
.sec1 .moon{
  position:absolute; display:block; height:auto; z-index:4;
  opacity:var(--night, 0);
  transition:opacity 1s linear;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .sec1 .moon{ transition:none }
}