/* ============================================================================
   SECTION EIGHT - THE CLOSE

   THIS IS HIS FIRST SITE'S SECTION 09, MOVED ACROSS, NOT REDRAWN. The band,
   the destination plate over the headline, the copy, the five fields, the
   24-hour promise and the yellow warning-triangle button are all his - lifted
   out of index.html and assets/css/highway19.css and scoped under .sec8 so
   they cannot reach the rest of this page. Nothing here was invented; what
   changed is only what had to, to sit under a drive that did not exist when
   he wrote it.

   IT RIDES UP OVER THE END OF THE DRIVE. A whole viewport of negative margin,
   so the band climbs into frame across the last screen of road with the
   fireworks still going above it, instead of waiting for the road to run out
   first. That, and the padding taken out from over the headline, is what puts
   his form on screen about a thousand pixels of scroll earlier than it was.

   AND IT IS TRANSPARENT ALL THE WAY DOWN TO HIS FORM. That is what makes the
   join work
   at ANY scroll position rather than one. The old top strip was the drive's
   last row, sampled and repainted - which is exact only while the two edges
   actually meet. Once the section rides up over the road it meets a different
   row every frame, and a repainted one would be wrong in all of them. A ramp
   from nothing to his interstate blue is right in all of them: whatever is
   behind shows through the top of it and there is no edge to match.

   AND IT STAYS CLEAR, it does not fade the whole way. A ramp that starts
   closing at the seam has the blue at half strength by the headline, which is
   most of the fireworks gone before you have read a word. So it holds at
   nothing until 150px short of the card and closes there: the sign, the
   headline, the subhead and the copy are all read against the live sky with
   the show still going behind them, and the blue arrives just in time to be
   the ground the form stands on.

   HOW FAR DOWN IS MEASURED, NOT PICKED. --sec8-fade is written on the section
   by the drive, which measures where his form card actually starts - so the
   sky runs out exactly where the reading starts, at any width, and the same
   number ends the fireworks. One measurement, so the paint and the show can
   never disagree. 180px is the fallback if the script never runs.

   NOTHING SHOWS THROUGH THAT SHOULD NOT. The section rides a whole viewport up
   into the road, so the drive's stage is behind every pixel of the clear part
   - the page's own ground can never appear there.
      ========================================================================= */
.sec8{
  --blue-900:#062f5e; --blue-700:#12569f; --blue-100:#e6effa;
  --sign-green:#1c9022; --green-800:#0d5c12; --green-500:#059236;
  --yellow-500:#ffc72c; --yellow-600:#e9a800;
  --ink:#12161c; --ink-soft:#454c57; --paper:#fff;
  --font-sign:"Be Vietnam Pro","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --shell:1200px; --gutter:clamp(20px,4vw,48px);

  position:relative;
  color:#fff;
  font-family:var(--font-sign);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62; font-weight:450;
  margin-top:-100vh;
  padding:clamp(26px,2.4vw,36px) 0 clamp(88px,10vw,140px);
  /* the ramp's last stop holds to the foot of the section, so one gradient is
     both the join and the ground */
  background:var(--sec8-band,
    linear-gradient(180deg,
      rgba(18,86,159,0) 0,
      rgba(18,86,159,0) calc(var(--sec8-fade,180px) - 150px),
      #12569f var(--sec8-fade,180px), #12569f 100%));
}
.sec8 *,.sec8 *::before,.sec8 *::after{ box-sizing:border-box }
.sec8 img{ max-width:100%; display:block }
.sec8 a{ color:inherit }

.sec8 .inner{
  position:relative; z-index:3;
  max-width:var(--shell); margin:0 auto; padding:0 var(--gutter);
}
.sec8 .head{ text-align:center; max-width:44ch; margin:0 auto }

/* his green route plate, in the yellow he set on this one section */
.sec8 .eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.735rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow-500);
  padding:.5em .95em; border-radius:5px;
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1.5px var(--yellow-600);
  margin:0 0 .8em;
}
.sec8 .eyebrow::before{
  content:""; width:.62em; height:.62em; flex:none;
  background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%);
}

/* HIS DESTINATION PLATE, ABOVE THE HEADLINE NOT BESIDE IT. Centred sections
   stack it: sitting it to one side pulls the whole block off the axis. Sized
   by HEIGHT, because his signs run from a 0.65 portrait plate to a 1.13
   triangle and equal widths would make the tall ones tower. */
.sec8 .headline{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,1.4vw,20px);
}
.sec8 .headline > div{ min-width:0 }
.sec8 .sign{
  height:clamp(52px,5vw,78px); width:auto; flex:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
/* HIS WHITE COPY NOW STANDS ON THE SKY, not on his band - so it carries the
   weight it used to get from the band. At night the shadow is invisible; by
   day, if a reader has taken the wheel and kept the light on, it is the only
   thing between white type and a pale blue morning. */
.sec8 h2,.sec8 .sub,.sec8 .body-copy{
  text-shadow:0 0.09em 0.5em rgba(2,14,32,.55), 0 0.02em 0.12em rgba(2,14,32,.4);
}
.sec8 h2{
  margin:0; font-weight:800; line-height:1.04; letter-spacing:-.022em;
  font-size:clamp(2.05rem,4.1vw,3.35rem); text-wrap:balance;
}
.sec8 .sub{
  margin:.7em 0 0; font-weight:600; line-height:1.32; letter-spacing:-.012em;
  font-size:clamp(1.12rem,1.75vw,1.5rem);
  color:rgba(255,255,255,.94); text-wrap:balance;
}
.sec8 .body-copy{
  margin:.95em auto 0; max-width:56ch; text-align:center;
  font-size:1.055rem; line-height:1.72; color:rgba(255,255,255,.9);
}

/* ---- his form card ------------------------------------------------------ */
.sec8 .form{
  max-width:640px; margin:clamp(18px,2vw,26px) auto 0;
  background:var(--sec8-paper,var(--paper)); color:var(--sec8-ink,var(--ink));
  border-radius:12px; padding:clamp(26px,3.4vw,38px);
  border-bottom:6px solid var(--yellow-500);
  /* A HAIRLINE THAT ONLY EXISTS AFTER DARK. His card is white on blue in
     daylight and needs no edge; once the ground is the night sky the card is
     near-black on near-black, and the one thing holding it together is the
     yellow strip along the bottom. Inset, so it does not move anything. */
  box-shadow:inset 0 0 0 1px var(--sec8-edge,transparent),
             0 22px 50px rgba(3,20,42,.3);
}
.sec8 .field{ margin-bottom:1.05rem }
.sec8 .field label{
  display:block; font-size:.76rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:.5em; color:var(--sec8-label,var(--ink-soft));
}
.sec8 .field input,.sec8 .field textarea{
  width:100%; font:inherit; font-size:1rem;
  padding:.85em .95em;
  border:2px solid var(--sec8-rule,#cdd3dc); border-radius:6px;
  background:var(--sec8-field,#fff); color:var(--sec8-ink,var(--ink));
}
.sec8 .field textarea{ min-height:132px; resize:vertical }
.sec8 .field input:focus,.sec8 .field textarea:focus{
  outline:none; border-color:var(--blue-700);
  box-shadow:0 0 0 3px var(--sec8-ring,var(--blue-100));
}
.sec8 .form__promise{
  display:flex; align-items:center; gap:.6em;
  margin:0 0 1.5rem; font-size:.9rem; color:var(--sec8-label,var(--ink-soft));
}
.sec8 .form__promise b{ color:var(--sec8-ink,var(--ink)) }
.sec8 .form__alt{
  margin:1.35rem 0 0; text-align:center; font-size:.94rem;
  color:var(--sec8-label,var(--ink-soft));
}
.sec8 .form__alt a{ font-weight:700; color:var(--sec8-link,var(--blue-700)) }
.sec8 .form__status{ margin:1rem 0 0; font-size:.94rem; font-weight:600; text-align:center }
.sec8 .form__status.is-ok { color:var(--sec8-ok, #0a7d36) }
.sec8 .form__status.is-err{ color:var(--sec8-err,#c8161d) }

/* HIS BUTTON: a real warning triangle rides on it, not an arrow glyph. */
.sec8 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  width:100%;
  font-family:inherit; font-size:.95rem; font-weight:800;
  letter-spacing:.055em; text-transform:uppercase; text-decoration:none;
  padding:1.02em 1.7em; border-radius:6px; border:2px solid var(--ink);
  background:var(--yellow-500); color:var(--ink); cursor:pointer;
  box-shadow:0 4px 0 0 var(--yellow-600);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.sec8 .btn:hover{ transform:translateY(-2px); background:#ffd45a;
  box-shadow:0 6px 0 0 var(--yellow-600) }
.sec8 .btn:active{ transform:translateY(0) }
.sec8 .btn:focus-visible{ outline:3px solid var(--yellow-500); outline-offset:3px }
.sec8 .btn__sign{ width:1.35em; height:1.35em; flex:none; margin:-.15em 0 }
.sec8 .btn__tri{
  width:1.05em; height:1.05em; flex:none;
  background:currentColor; clip-path:polygon(50% 4%,100% 96%,0 96%);
}
@media (prefers-reduced-motion:reduce){
  .sec8 .btn{ transition:background .16s ease }
  .sec8 .btn:hover{ transform:none }
}
@media (max-width:900px){
  .sec8 .head,.sec8 .body-copy{ text-align:left }
  /* AND ON A PHONE THE PLATE STANDS BESIDE THE HEADLINE, NOT OVER IT. Stacked
     and centred, his sign sat on its own in the middle of the screen with the
     headline left-aligned underneath, and the two read as two things. Side by
     side is his own hero's arrangement - the shield left of "A Clear Road
     Forward", the triangle left of "Great Work, No Signage" - and it is the
     one that makes a plate and a line of type read as one object.

     align-items:center is what he means by equally high: the sign's middle on
     the headline block's middle, whether that block runs to two lines or
     three. Sized off the type rather than picked, so they stay a pair: his
     headline is 2.05rem over 1.04 and wraps to two lines, which is 4.3rem of
     cap-to-baseline, and the plate is that plus the subhead's first line. */
  .sec8 .headline{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:clamp(12px,3.6vw,20px);
  }
  .sec8 .headline > div{ flex:1 1 auto; min-width:0; text-align:left }
  .sec8 .sign{ height:clamp(62px,16.5vw,86px) }
  /* AND THE HEADLINE GIVES BACK WHAT THE PLATE TAKES. A 56-pixel plate and its
     gap is 70 of a 390 screen; at the size it was set, "Wheel?" fell to a
     third line on its own. */
  .sec8 h2{ font-size:clamp(1.68rem,7.4vw,2.3rem) }
  .sec8 .sub{ font-size:clamp(.98rem,3.9vw,1.2rem) }
}