/* ============================================================
   SAFER 17
   Paste into Squarespace: Design → Custom CSS
   No JavaScript anywhere. Works on the Personal plan.
   ============================================================

   TWO VOICES
   ----------
   This site is an argument between a person and an institution,
   so it is set in two typefaces and they are never mixed.

   OVERPASS is the road's voice — drawn from the FHWA Highway
   Gothic lettering on US road signs. It carries anything
   institutional: data, mileposts, labels, the asks, navigation.

   INSTRUMENT SERIF is Chrissy's voice. Anything written in the
   first person, anything about her father, every sentence a
   person would say out loud rather than publish.

   NEWSREADER carries long-form prose.

   NIGHT TO DAWN
   -------------
   Nine of the ten people killed on this corridor died in the
   dark. The homepage opens at night and lightens as you scroll,
   arriving at daylight on the page where we ask for lighting.
   The logo is a sunrise. The scroll is the argument.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;800;900&family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&display=swap');

.s17{
  /* colours sampled from the logo */
  --night:#060F1A;         /* deeper than the logo — this is 3am */
  --navy:#0B1C2C;
  --dusk:#132A3E;
  --indigo:#2C3877;
  --teal:#4FC5B2;
  --teal-dk:#2E8F82;
  --gold:#FCCD70;
  --gold-lt:#FCEBBD;
  --gold-dk:#C98F28;
  --cream:#F8F2DE;
  --road:#D0CCC6;

  --paper:#F7F3E8;
  --paper-2:#EFE9DA;
  --ink:#111C26;
  --slate:#4A5A67;
  --faint:#95A0A9;
  --rule:#D8D0BE;
  --signal:#B8462C;

  font-family:'Newsreader',Georgia,serif;
  font-optical-sizing:auto;
  color:var(--ink);
  background:var(--paper);
  font-size:19px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.s17 *,.s17 *::before,.s17 *::after{box-sizing:border-box;}
.s17 p{margin:0 0 1.35em;}
.s17 p:last-child{margin-bottom:0;}
.s17 a{color:inherit;}
.s17 img{max-width:100%;display:block;}

/* ---------------- the two voices ---------------- */
.s17 .road-voice,.s17 .label,.s17 .milepost,.s17 .figure,.s17 .ask h3,.s17 nav{
  font-family:'Overpass',Arial,sans-serif;
}
.s17 .her-voice,.s17 .say{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;letter-spacing:-.012em;
}

/* institutional labels — small, tracked, unmistakably signage */
.s17 .label{
  font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal-dk);display:block;margin-bottom:1.6rem;
}
.s17 .label.on-dark{color:var(--gold);}
.s17 .label.mono{color:var(--faint);font-weight:600;letter-spacing:.18em;}

/* ---------------- type scale — deliberately extreme ---------------- */
.s17 .say-xxl{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(3.1rem,9.2vw,8.6rem);line-height:.92;letter-spacing:-.028em;
  margin:0;
}
.s17 .say-xl{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.022em;margin:0;
}
.s17 .say-lg{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.14;letter-spacing:-.014em;margin:0;
}
.s17 .road-xl{
  font-family:'Overpass',Arial,sans-serif;font-weight:900;
  font-size:clamp(2.1rem,5vw,4rem);line-height:.98;letter-spacing:-.03em;
  text-transform:uppercase;margin:0;
}
.s17 .road-lg{
  font-family:'Overpass',Arial,sans-serif;font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.16;letter-spacing:-.01em;margin:0;
}
.s17 em.slant{font-style:italic;}

/* ---------------- measure & asymmetry ----------------
   Content sits on a 12-column field. Almost nothing is
   centred and almost nothing is full width. */
.s17 .field{
  max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.4vw,32px);
}
.s17 .col-narrow{grid-column:2 / span 6;}
.s17 .col-mid{grid-column:2 / span 7;}
.s17 .col-wide{grid-column:1 / span 9;}
.s17 .col-full{grid-column:1 / -1;}
.s17 .col-right{grid-column:6 / span 6;}
.s17 .col-off{grid-column:4 / span 8;}
.s17 .margin-note{grid-column:9 / span 4;align-self:start;}

.s17 .band{padding:clamp(72px,11vh,148px) 0;}
.s17 .band-tight{padding:clamp(44px,7vh,84px) 0;}

/* prose */
.s17 .prose{font-size:1.16rem;line-height:1.72;}
.s17 .prose p{margin-bottom:1.5em;}
.s17 .prose p.lead{
  font-size:1.42rem;line-height:1.5;color:var(--ink);
}
.s17 .prose p.lead::first-letter{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:4.6rem;float:left;line-height:.78;
  padding:.1em .12em 0 0;color:var(--signal);
}

/* marginalia — annotations in the outer column, like a marked-up document */
.s17 .note-margin{
  font-family:'Overpass',Arial,sans-serif;font-size:.78rem;line-height:1.5;
  color:var(--faint);border-top:2px solid var(--ink);padding-top:.7rem;
  letter-spacing:.01em;
}
.s17 .note-margin strong{
  display:block;color:var(--ink);font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;margin-bottom:.4rem;
}
.s17 .note-margin.on-dark{color:rgba(248,242,222,.55);border-top-color:var(--gold);}
.s17 .note-margin.on-dark strong{color:var(--gold);}

/* ---------------- night → dawn ----------------
   Each band is a step toward sunrise. Order matters. */
.s17 .t-night{background:var(--night);color:var(--cream);}
.s17 .t-navy{background:var(--navy);color:var(--cream);}
.s17 .t-dusk{background:var(--dusk);color:var(--cream);}
.s17 .t-dawn{
  background:linear-gradient(178deg,#1E3A50 0%,#3D5468 34%,#8E8371 68%,#E8CE9C 100%);
  color:var(--cream);
}
.s17 .t-day{background:var(--paper);color:var(--ink);}
.s17 .t-paper2{background:var(--paper-2);color:var(--ink);}
.s17 .t-night *::selection,.s17 .t-navy *::selection{background:var(--gold);color:var(--night);}

.s17 [class^="t-n"] .label,.s17 .t-dusk .label,.s17 .t-dawn .label{color:var(--gold);}
.s17 [class^="t-n"] a,.s17 .t-dusk a{color:var(--cream);}

/* ---------------- the corridor ----------------
   The signature graphic. Fifteen miles, five crossings. */
.s17 .corridor{width:100%;height:auto;display:block;}
.s17 .corridor-caption{
  font-family:'Overpass',Arial,sans-serif;font-size:.74rem;letter-spacing:.06em;
  color:var(--faint);margin-top:1.4rem;max-width:62ch;line-height:1.6;
}
.s17 .t-night .corridor-caption,.s17 .t-navy .corridor-caption{color:rgba(248,242,222,.42);}

/* ---------------- big figures, set in the text flow ---------------- */
.s17 .figure{
  font-family:'Overpass',Arial,sans-serif;font-weight:900;
  font-size:clamp(4rem,15vw,13rem);line-height:.82;letter-spacing:-.05em;
  color:var(--gold);display:block;
}
.s17 .figure-sm{
  font-family:'Overpass',Arial,sans-serif;font-weight:900;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;letter-spacing:-.04em;
  color:var(--signal);display:block;
}
.s17 .figure-note{
  font-family:'Overpass',Arial,sans-serif;font-size:.82rem;line-height:1.55;
  letter-spacing:.02em;color:var(--faint);max-width:34ch;margin-top:1rem;
}
.s17 .t-night .figure-note,.s17 .t-navy .figure-note,.s17 .t-dusk .figure-note{color:rgba(248,242,222,.5);}
.s17 .src{
  display:block;font-family:'Overpass',Arial,sans-serif;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:.9rem;
}
.s17 .t-night .src,.s17 .t-navy .src{color:rgba(248,242,222,.34);}

/* ---------------- rules & the centre line ---------------- */
.s17 hr.line{border:0;border-top:1.5px solid var(--rule);margin:0;}
.s17 hr.line-dark{border:0;border-top:1px solid rgba(248,242,222,.16);margin:0;}
.s17 .centreline{
  height:4px;border:0;margin:0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 34px,transparent 34px 68px);
}

/* ---------------- the asks — a numbered list, not cards ---------------- */
/* ---------------------------------------------------------------
   THE CHART — need, action, and when it could start. Three columns
   that read straight across, one rule per row, no cards, no boxes.
   Collapses to stacked blocks on a phone with the column headings
   repeated as small labels so a row still explains itself.
   --------------------------------------------------------------- */
.s17 .chart{border-top:2px solid var(--ink);}
.s17 .chart-head,
.s17 .chart-row{
  display:grid;
  grid-template-columns:1fr 1.25fr max-content;
  gap:clamp(16px,2.6vw,40px);
  align-items:start;
}
.s17 .chart-head{
  padding:.8rem 0;border-bottom:1px solid rgba(17,28,38,.18);
  font-family:'Overpass',Arial,sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(17,28,38,.46);
}
.s17 .chart-row{padding:1.25rem 0;border-bottom:1px solid rgba(17,28,38,.12);}
.s17 .chart-row p{margin:0;font-size:.98rem;line-height:1.5;}
.s17 .chart-row .need{font-weight:600;color:var(--ink);}
.s17 .chart-row .did{color:rgba(17,28,38,.7);}
.s17 .when{
  display:inline-block;justify-self:end;
  font-family:'Overpass',Arial,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:.36rem .62rem;border:1.5px solid currentColor;
}
.s17 .when.now{color:var(--teal-dk);}
.s17 .when.next{color:#8A6410;}
.s17 .when.later{color:#66707C;}
.s17 .chart-note{margin-top:1.5rem;}
.s17 .chart-note strong{font-weight:700;}

@media (max-width:820px){
  .s17 .chart-head{display:none;}
  .s17 .chart-row{grid-template-columns:1fr;gap:.55rem;padding:1.15rem 0;}
  .s17 .when{justify-self:start;margin-top:.35rem;}
  .s17 .chart-row .need::before{
    content:'The need — ';font-family:'Overpass',Arial,sans-serif;
    font-size:.64rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(17,28,38,.42);
  }
  .s17 .chart-row .did::before{
    content:'Orlando — ';font-family:'Overpass',Arial,sans-serif;
    font-size:.64rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(17,28,38,.42);
  }
}

.s17 .asks{list-style:none;margin:0;padding:0;counter-reset:ask;}
.s17 .ask{
  counter-increment:ask;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,52px);
  padding:clamp(28px,4vh,44px) 0;border-top:1.5px solid var(--rule);
}
.s17 .ask:last-child{border-bottom:1.5px solid var(--rule);}
.s17 .ask::before{
  content:counter(ask,decimal-leading-zero);
  font-family:'Overpass',Arial,sans-serif;font-weight:900;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;
  color:var(--rule);letter-spacing:-.03em;
}
.s17 .ask h3{
  font-family:'Overpass',Arial,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.2;
  letter-spacing:-.01em;margin:0 0 .6rem;
}
.s17 .ask p{font-size:1.02rem;color:var(--slate);margin:0;max-width:58ch;}
.s17 .ask.first::before{color:var(--signal);}
.s17 .ask.first h3{color:var(--signal);}

/* ---------------- links & actions — underlines, not pills ---------------- */
.s17 .act{
  display:inline-block;font-family:'Overpass',Arial,sans-serif;
  font-weight:800;font-size:.98rem;letter-spacing:.02em;
  text-decoration:none;color:inherit;
  border-bottom:3px solid var(--signal);padding-bottom:.28rem;
  transition:border-color .18s ease,color .18s ease;
}
.s17 .act:hover{border-bottom-color:var(--ink);}
.s17 .act.on-dark{border-bottom-color:var(--gold);}
.s17 .act.on-dark:hover{color:var(--gold);border-bottom-color:var(--cream);}
.s17 .act-row{display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;margin-top:2.4rem;}

/* one solid button, used sparingly — Take Action only */
.s17 .act-solid{
  display:inline-block;font-family:'Overpass',Arial,sans-serif;font-weight:800;
  font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--signal);color:#fff;text-decoration:none;
  padding:1.05rem 2.1rem;border:0;
}
.s17 .act-solid:hover{background:var(--ink);color:#fff;}
.s17 .act-solid.gold{background:var(--gold);color:var(--night);}
.s17 .act-solid.gold:hover{background:var(--cream);}

/* ---------------- the disclaimer, set as what it is ---------------- */
.s17 .fineprint{
  font-family:'Overpass',Arial,sans-serif;font-size:.64rem;line-height:1.75;
  letter-spacing:.03em;color:var(--faint);max-width:44ch;
}
.s17 .fineprint-blown{
  font-family:'Overpass',Arial,sans-serif;font-weight:900;
  font-size:clamp(2rem,7.4vw,6rem);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;margin:0;
}

/* ---------------- names ---------------- */
.s17 .roll{margin:0;padding:0;list-style:none;}
.s17 .roll li{
  border-top:1px solid var(--rule);padding:1.5rem 0;
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
}
.s17 .roll li:last-child{border-bottom:1px solid var(--rule);}
.s17 .roll .nm{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-.015em;
}
.s17 .roll .mt{
  font-family:'Overpass',Arial,sans-serif;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.6;
}
.s17 .roll .unknown .nm{color:var(--faint);font-style:italic;}

/* A line held open for a family we have not met. It should read as a
   space kept on purpose, not as something unfinished — so the row is
   quiet, tighter than a named one, and marked with a small rule where
   a name would go. */
.s17 .roll li.held{padding:1.05rem 0;align-items:center;}
.s17 .roll .held .nm{
  font-family:'Overpass',Arial,sans-serif;font-style:normal;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(17,28,38,.34);
  display:flex;align-items:center;gap:1rem;
}
.s17 .roll .held .nm::after{
  content:'';flex:1 1 auto;height:1px;max-width:230px;
  background:repeating-linear-gradient(90deg,rgba(17,28,38,.26) 0 7px,transparent 7px 14px);
}
.s17 .roll .held .mt{color:rgba(17,28,38,.26);}

/* ---------------- forms (styled to disappear into the page) ---------------- */
.s17 .field-row{display:flex;gap:12px;flex-wrap:wrap;max-width:520px;margin-top:1.6rem;}
.s17 input[type=email],.s17 input[type=text],.s17 textarea{
  font-family:'Overpass',Arial,sans-serif;font-size:1rem;
  padding:.95rem 0;border:0;border-bottom:2px solid var(--rule);
  background:transparent;color:inherit;flex:1 1 220px;min-width:0;border-radius:0;
}
.s17 .t-night input,.s17 .t-navy input,.s17 .t-dusk input,.s17 .t-dawn input,
.s17 .t-night textarea{border-bottom-color:rgba(248,242,222,.3);color:var(--cream);}
.s17 input:focus,.s17 textarea:focus{outline:none;border-bottom-color:var(--gold);}
.s17 textarea{width:100%;min-height:100px;resize:vertical;flex-basis:100%;}
.s17 label{
  display:block;font-family:'Overpass',Arial,sans-serif;font-size:.7rem;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:1.6rem 0 .1rem;
}
.s17 .fine{font-family:'Overpass',Arial,sans-serif;font-size:.74rem;color:var(--faint);margin-top:1rem;}

/* Squarespace's own blocks, made to match */
.s17 .nl-zone .newsletter-form{background:transparent!important;padding:0!important;border:none!important;}
.s17 .nl-zone .newsletter-form-header{display:none!important;}
.s17 .nl-zone .newsletter-form-field-element{
  font-family:'Overpass',sans-serif!important;font-size:1rem!important;
  padding:.95rem 0!important;border:0!important;border-bottom:2px solid var(--rule)!important;
  background:transparent!important;border-radius:0!important;color:inherit!important;
}
.s17 .nl-zone .newsletter-form-button{
  font-family:'Overpass',sans-serif!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.04em!important;
  background:var(--signal)!important;color:#fff!important;
  border-radius:0!important;padding:1.05rem 2.1rem!important;border:0!important;
}

/* ---------------- images ---------------- */
.s17 figure{margin:0;}
.s17 figcaption{
  font-family:'Overpass',Arial,sans-serif;font-size:.74rem;line-height:1.6;
  letter-spacing:.02em;color:var(--faint);margin-top:.9rem;max-width:46ch;
}
.s17 .ph{
  background:var(--paper-2);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Overpass',Arial,sans-serif;font-size:.78rem;line-height:1.7;
  letter-spacing:.04em;color:var(--faint);padding:2rem;min-height:320px;
}
.s17 .t-night .ph,.s17 .t-navy .ph{
  background:rgba(248,242,222,.04);border-color:rgba(248,242,222,.18);
  color:rgba(248,242,222,.4);
}
.s17 .ph-tall{min-height:480px;}

/* ---------------- editor notes (delete before publishing) ---------------- */
.s17 .todo{
  border-left:3px solid var(--signal);padding:.9rem 0 .9rem 1.2rem;margin:2rem 0;
  font-family:'Overpass',Arial,sans-serif;font-size:.8rem;line-height:1.65;color:var(--signal);
  max-width:64ch;
}
.s17 .todo b{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;margin-bottom:.35rem;}

/* ---------------- nav (preview only — Squarespace supplies its own) ---------------- */
.s17-nav{background:var(--night,#060F1A);border-bottom:1px solid rgba(248,242,222,.14);}
.s17-nav-in{
  max-width:1240px;margin:0 auto;padding:14px clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.s17-nav .mark img{height:42px;width:auto;display:block;}
.s17-nav ul{list-style:none;display:flex;gap:clamp(14px,2.2vw,30px);margin:0;padding:0;align-items:center;flex-wrap:wrap;}
.s17-nav a{
  font-family:'Overpass',Arial,sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(248,242,222,.72);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.s17-nav a:hover,.s17-nav a[aria-current=page]{color:#FCCD70;border-bottom-color:#FCCD70;}
.s17-nav .nav-cta{color:#060F1A;background:#FCCD70;padding:.55rem 1.1rem;font-weight:800;border:0;}
.s17-nav .nav-cta:hover{background:#F8F2DE;color:#060F1A;border-bottom-color:transparent;}

/* ---------------- footer ---------------- */
.s17 .foot{background:var(--night);color:rgba(248,242,222,.6);padding:clamp(56px,8vh,88px) 0 3rem;font-size:.92rem;}
.s17 .foot a{color:rgba(248,242,222,.85);text-decoration:none;border-bottom:1px solid transparent;}
.s17 .foot a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.s17 .foot h4{
  font-family:'Overpass',Arial,sans-serif;color:var(--teal);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:800;
}
.s17 .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-family:'Overpass',Arial,sans-serif;font-size:.88rem;}
.s17 .foot-logo{width:132px;margin-bottom:1.2rem;}
.s17 .foot-btm{
  font-family:'Overpass',Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;
  color:rgba(248,242,222,.38);margin-top:3.4rem;padding-top:1.6rem;
  border-top:1px solid rgba(248,242,222,.14);
}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .s17{font-size:17px;}
  .s17 .col-narrow,.s17 .col-mid,.s17 .col-wide,.s17 .col-right,
  .s17 .col-off,.s17 .margin-note{grid-column:1 / -1;}
  .s17 .margin-note{margin-top:2.4rem;}
  .s17 .roll li{grid-template-columns:1fr;gap:.5rem;}
  .s17 .roll .mt{text-align:left;}
  .s17 .ask{grid-template-columns:1fr;gap:.6rem;}
  .s17 .prose p.lead::first-letter{font-size:3.4rem;}
}
@media (max-width:560px){
  .s17 .act-row{flex-direction:column;gap:1.4rem;align-items:flex-start;}
  .s17-nav ul{gap:12px;}
  .s17-nav a{font-size:.72rem;}
}

/* ============================================================
   MOTION
   Everything here is opt-in: the .s17-motion class is added by
   safer17.js only when it can run AND the visitor has not asked
   for reduced motion. Without JS, none of these rules apply and
   the page renders complete and static.
   ============================================================ */

/* scroll progress — a centre line drawing itself across the top */
.s17-progress{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;
  background:repeating-linear-gradient(90deg,#FCCD70 0 26px,transparent 26px 52px);
  will-change:transform;
}
.s17-motion .s17-progress{transition:transform .1s linear;}

/* reveals */
.s17-motion [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.s17-motion [data-reveal].is-in{opacity:1;transform:none;}
.s17-motion [data-reveal="fade"]{transform:none;}
.s17-motion [data-reveal="left"]{transform:translateX(-30px);}
.s17-motion [data-reveal="left"].is-in{transform:none;}

/* the corridor: lamps and marks arrive */
.s17-motion .corridor .lamp,
.s17-motion .corridor .crossing,
.s17-motion .corridor .mark,
.s17-motion .corridor .mark-john,
.s17-motion .corridor .john-label{opacity:0;transition:opacity .9s ease;}
.s17-motion .corridor .lamp.on,
.s17-motion .corridor .crossing.on,
.s17-motion .corridor .mark.on,
.s17-motion .corridor .mark-john.on{opacity:1;}
.s17-motion .corridor .mark-john.on ~ .john-label,
.s17-motion .corridor .mark-john.on .john-label{opacity:1;}
.s17-motion .corridor .crossing{transition:opacity .7s ease;}
.s17-motion .corridor .mark{transition:opacity .5s ease;}

/* hero warms as you pass it */
.s17 [data-dawn]{--dawn:0;}
.s17 [data-dawn]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 380px at 76% 116%,
    rgba(252,205,112,.34) 0%, rgba(252,205,112,.08) 46%, transparent 74%);
  opacity:calc(var(--dawn) * 1.15);
  transition:opacity .2s linear;
}

/* ---------------- media strip ---------------- */
.s17 .media{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(30px,5vh,52px) 0;overflow:hidden;position:relative;
}
.s17 .t-night .media,.s17 .t-navy .media{border-color:rgba(248,242,222,.16);}
.s17 .media-mask{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.s17 .media-track{
  display:flex;align-items:center;gap:clamp(36px,6vw,84px);
  width:max-content;
}
/* The strip never rests. Driven by plain CSS and a duplicated list in
   the HTML, so it runs even where JavaScript does not — a preview pane,
   a strict browser, a blocked script. It still stops for anyone who has
   asked their system for reduced motion, and for hover or keyboard focus
   so a name can actually be clicked. */
.s17 .media-track{animation:s17-marquee 30s linear infinite;}
@media (prefers-reduced-motion: reduce){
  .s17 .media-track{animation:none;}
}
.s17 .media:hover .media-track,
.s17 .media:focus-within .media-track{animation-play-state:paused;}
@keyframes s17-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.s17 .media-item{
  font-family:'Overpass',Arial,sans-serif;font-weight:800;
  font-size:clamp(.92rem,1.5vw,1.18rem);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--faint);text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.s17 .media-item:hover{color:var(--ink);border-bottom-color:var(--signal);}
.s17 .t-night .media-item,.s17 .t-navy .media-item{color:rgba(248,242,222,.5);}
.s17 .t-night .media-item:hover,.s17 .t-navy .media-item:hover{
  color:var(--gold);border-bottom-color:var(--gold);
}

/* pull the eye to the one line that matters */
.s17 .strike{
  display:inline;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 88%;
  background-size:0% 3px;
}
.s17-motion .strike{transition:background-size 1.1s cubic-bezier(.2,.7,.3,1) .3s;}
.s17-motion [data-reveal].is-in .strike{background-size:100% 3px;}

@media (prefers-reduced-motion: reduce){
  .s17-motion [data-reveal]{opacity:1!important;transform:none!important;}
  .s17 .media-track{animation:none!important;}
  .s17 [data-dawn]::after{display:none;}
}

/* figures sitting on a dark band */
.s17 .figure-sm.on-dark{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   MOBILE — a serious tightening pass
   ------------------------------------------------------------
   The desktop layout puts things side by side. On a phone every
   one of those pairs becomes two stacked blocks, so the page
   roughly doubles in length. Combined with generous section
   padding and very large display type, it starts to feel like
   scrolling through treacle.

   Below: less padding, smaller display type, tighter rhythm.
   Same design, less dragging.
   ============================================================ */

@media (max-width:900px){
  .s17{font-size:16.5px;line-height:1.56;}

  /* sections were 11vh top and bottom — far too much on a phone */
  .s17 .band{padding:clamp(40px,6vh,64px) 0;}
  .s17 .band-tight{padding:clamp(28px,4vh,44px) 0;}

  /* display type: still big, no longer eating whole screens */
  .s17 .say-xxl{font-size:clamp(2.3rem,9.5vw,3.3rem);line-height:.98;}
  .s17 .say-xl {font-size:clamp(1.85rem,7vw,2.5rem);line-height:1.08;}
  .s17 .say-lg {font-size:clamp(1.4rem,5.4vw,1.85rem);line-height:1.2;}
  .s17 .fineprint-blown{font-size:clamp(1.7rem,9vw,3rem);}
  .s17 .figure{font-size:clamp(3.4rem,22vw,6rem);}
  .s17 .figure-sm{font-size:clamp(2rem,11vw,3rem);}

  .s17 .label{margin-bottom:1rem;font-size:.66rem;letter-spacing:.2em;}
  .s17 .prose{font-size:1.02rem;line-height:1.62;}
  .s17 .prose p{margin-bottom:1.15em;}
  .s17 .prose p.lead{font-size:1.14rem;}
  .s17 p{margin-bottom:1.1em;}

  /* the marginalia stops being a margin and becomes a quiet aside */
  .s17 .margin-note{margin-top:1.6rem;}
  .s17 .note-margin{font-size:.74rem;}

  /* stacked figure rows shouldn't each get a full screen */
  .s17 .field{row-gap:1.6rem;}
  .s17 .figure-note{margin-top:.6rem;font-size:.78rem;}

  .s17 .ask{padding:1.2rem 0;}
  .s17 .ask p{font-size:.96rem;}
  .s17 .roll li{padding:1.05rem 0;}
  .s17 .act-row{margin-top:1.5rem;}

  /* photo placeholders were reserving huge empty boxes */
  .s17 .ph{min-height:220px!important;padding:1.4rem;font-size:.72rem;}
}

@media (max-width:620px){
  .s17 .band{padding:clamp(34px,5vh,52px) 0;}
  .s17 .say-xxl{font-size:clamp(2.05rem,10vw,2.7rem);}
  .s17 .wrap,.s17 .field{padding-left:18px;padding-right:18px;}

  /* THE CORRIDOR — the diagram is 1240 units wide. Squeezed onto a
     390px screen every label turns to mush. Let it keep its real
     size and scroll sideways instead, with a hint that it does. */
  .s17 .corridor-scroll{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:0 18px;
  }
  .s17 .corridor-scroll .corridor{min-width:660px;}
  .s17 .corridor-scroll::after{
    content:"swipe to follow the road →";
    display:block;font-family:'Overpass',Arial,sans-serif;
    font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(248,242,222,.4);margin-top:.7rem;
  }
}

/* ============================================================
   BEFORE / AFTER — drag to rebuild the road
   The composition deliberately echoes the logo: a road running
   out toward the horizon. Same road, twice. Drag the handle and
   the fixes appear on top of the road as it is now.
   ============================================================ */
.s17 .rebuild{position:relative;--wipe:50%;user-select:none;}
.s17 .rebuild-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(248,242,222,.18);background:#060F1A;
}
.s17 .rebuild-frame svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.s17 .rebuild-after{clip-path:inset(0 0 0 var(--wipe));}
.s17 .rebuild-line{
  position:absolute;top:0;bottom:0;left:var(--wipe);width:2px;
  background:var(--gold);pointer-events:none;z-index:5;
}
.s17 .rebuild-line::after{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(252,205,112,.22);
}
.s17 .rebuild-grip{
  position:absolute;top:50%;left:var(--wipe);transform:translate(-50%,-50%);
  z-index:6;pointer-events:none;
  font-family:'Overpass',Arial,sans-serif;font-weight:900;font-size:.8rem;
  color:var(--night);letter-spacing:.04em;
}
.s17 .rebuild input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;z-index:7;
}
.s17 .rebuild-tags{
  display:flex;justify-content:space-between;margin-top:1rem;
  font-family:'Overpass',Arial,sans-serif;font-size:.7rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
}
.s17 .rebuild-tags .now{color:var(--signal);}
.s17 .rebuild-tags .could{color:var(--teal);}

/* photo-based before/after: both layers are images + an overlay */
.s17 .rebuild-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.s17 .rebuild-after{position:absolute;inset:0;}

/* ============================================================
   THE CROSSING — documentary photo section
   Restrained transport-safety annotation over real photographs.
   Nothing here alters the photographs themselves.
   ============================================================ */

.s17 .doc{position:relative;width:100%;overflow:hidden;background:#050B12;}
.s17 .doc img{width:100%;height:auto;display:block;}
.s17 .doc svg.anno{position:absolute;inset:0;width:100%;height:100%;}

/* callout: a thin rule, a dot, and a label. no boxes, no drop shadows. */
.s17 .anno .pin{fill:var(--gold);}
.s17 .anno .lead{stroke:var(--gold);stroke-width:1.6;}
.s17 .anno text{
  font-family:'Overpass',Arial,sans-serif;font-weight:800;
  letter-spacing:.14em;fill:#F8F2DE;
}
.s17 .anno text.sub{font-weight:600;letter-spacing:.1em;fill:rgba(248,242,222,.62);}

/* each callout fades up in sequence once the photo is in view */
.s17-motion .anno .callout{opacity:0;transform:translateY(10px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);}
.s17-motion .anno .callout.on{opacity:1;transform:none;}

/* a soft scrim so labels stay legible over bright sky/asphalt */
.s17 .doc::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,11,18,.42) 0%,rgba(5,11,18,0) 34%,
                             rgba(5,11,18,0) 58%,rgba(5,11,18,.5) 100%);
}
.s17 .doc.plain::after{background:linear-gradient(180deg,rgba(5,11,18,.3),rgba(5,11,18,0) 40%);}

.s17 .doc-cap{
  font-family:'Overpass',Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;
  color:var(--faint);margin-top:1rem;line-height:1.6;
}

/* measurement span for the crossing-distance photo */
.s17 .span-line{stroke:var(--teal);stroke-width:2.4;}
.s17 .span-tick{stroke:var(--teal);stroke-width:2.4;}
.s17 .anno text.measure{fill:var(--teal);letter-spacing:.12em;}
.s17-motion .anno .span-grow{stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.3,1);}
.s17-motion .anno .span-grow.on{stroke-dashoffset:0;}

/* the mapped route drawing itself */
.s17-motion .route-draw{stroke-dasharray:2200;stroke-dashoffset:2200;
  transition:stroke-dashoffset 2.4s cubic-bezier(.25,.6,.3,1);}
.s17-motion .route-draw.on{stroke-dashoffset:0;}
.s17 .route-stop circle{fill:var(--signal);}

/* conceptual cross-section — visually separated from the documentary photos */
.s17 .concept{
  border:1px solid rgba(79,197,178,.3);
  background:linear-gradient(180deg,rgba(79,197,178,.05),transparent);
  padding:clamp(22px,4vw,40px);
}
.s17 .concept-tag{
  display:inline-block;font-family:'Overpass',Arial,sans-serif;font-weight:800;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(79,197,178,.45);
  padding:.45rem .9rem;margin-bottom:1.6rem;
}
.s17 .xsec{width:100%;height:auto;display:block;}
.s17 .xsec text{font-family:'Overpass',Arial,sans-serif;font-weight:700;letter-spacing:.09em;}

/* the quiet ending */
.s17 .quiet-frame{position:relative;}
.s17 .quiet-frame img{width:100%;height:auto;display:block;filter:saturate(.72) brightness(.52);}
.s17 .quiet-over{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 clamp(20px,6vw,90px);
}

/* the crossing section on small screens */
@media (max-width:900px){
  .s17 .anno text{font-size:26px;}
  .s17 .anno text.sub{font-size:20px;}
  .s17 .anno text.measure{font-size:22px;}
  .s17 .quiet-frame img{min-height:52vh;object-fit:cover;}
  .s17 .quiet-over{align-items:flex-end;padding-bottom:2rem;}
  .s17 .concept{padding:18px;}
  .s17 .xsec text{font-size:20px;}
}

/* ============================================================
   THE DARK — the section where the light comes on
   Opens almost black. A streetlight switches on as you reach it,
   and only then can you read what it says.
   ============================================================ */
/* The top padding is deliberately much larger than the bottom. The
   lamp hangs from the top of the band, and the number has to sit well
   clear of it — light falling on words, not words touching the fixture. */
.s17 .dark-band{
  position:relative;overflow:hidden;
  background:#03080E;
  padding:clamp(150px,25vh,290px) 0 clamp(80px,13vh,170px);
}
/* The pool is the ambient wash on the ground. Its focal point is
   lined up with the luminaire in the SVG below (29.6% across a
   760-unit lamp), so the light falls where the lamp is pointing. */
.s17 .dark-band .pool{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1100px,120vw);height:100%;pointer-events:none;
  background:radial-gradient(56% 66% at 14% 8%,
    rgba(252,205,112,.26) 0%, rgba(252,205,112,.09) 40%, transparent 74%);
  opacity:0;
}
.s17-motion .dark-band .pool{transition:opacity 1.6s ease .25s;}
.s17 .dark-band.lit .pool{opacity:1;}

/* The lamp is hung off the same 12-column field as the text, not off
   the middle of the screen — that is what kept the bulb drifting away
   from the number. The pole stands in the left margin, clear of every
   word, and the arm reaches right so the bulb lands over the figure.
   The beam lives inside the same SVG as the bulb, so they cannot come
   apart at any width. */
.s17 .dark-band .lamp-rig{
  position:absolute;top:0;left:0;right:0;bottom:0;
  max-width:1240px;margin:0 auto;pointer-events:none;z-index:1;
}
.s17 .lamp-post{
  position:absolute;top:0;left:clamp(20px,5vw,64px);
  width:min(560px,78vw);height:auto;pointer-events:none;
}
.s17 .lamp-post .bulb{fill:#3A4148;}
.s17 .lamp-post .beam,
.s17 .lamp-post .halo{opacity:0;}
.s17-motion .lamp-post .bulb{transition:fill .5s ease .2s;}
.s17-motion .lamp-post .beam{transition:opacity 1.8s ease .35s;}
.s17-motion .lamp-post .halo{transition:opacity 1.1s ease .25s;}
.s17 .dark-band.lit .lamp-post .bulb{fill:#FFE29A;}
.s17 .dark-band.lit .lamp-post .beam,
.s17 .dark-band.lit .lamp-post .halo{opacity:1;}

/* ---------------------------------------------------------------
   THE DISTANCES — three bars on one scale, inside the dark band.
   They draw themselves left to right when the light comes on, in
   the order you would meet them: headlights, then braking, then
   the standard the road was designed to.
   --------------------------------------------------------------- */
.s17 .dist{width:100%;height:auto;display:block;overflow:visible;}
.s17 .dist-bar{transform-box:fill-box;transform-origin:left center;}
.s17-motion .dist-bar{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.75,.3,1);}
.s17-motion .dark-band.lit .dist-bar{transform:none;}
.s17-motion .dark-band.lit .d1{transition-delay:.55s;}
.s17-motion .dark-band.lit .d2{transition-delay:.85s;}
.s17-motion .dark-band.lit .d3{transition-delay:1.15s;}
.s17-motion .dist .cutoff{opacity:0;transition:opacity .8s ease 1.5s;}
.s17-motion .dark-band.lit .dist .cutoff{opacity:.55;}
@media (max-width:820px){
  .s17 .dist text[font-size="15"]{font-size:19px;}
  .s17 .dist text[font-size="19"]{font-size:24px;}
}

.s17 .dark-band .inner{position:relative;z-index:2;}
.s17 .dark-band .src{color:rgba(248,242,222,.34);}
.s17 .dark-band .dim{opacity:.14;}
.s17-motion .dark-band .dim{transition:opacity 1.5s ease .5s;}
.s17 .dark-band.lit .dim{opacity:1;}

/* two documents at the same width, so the eye compares them rather
   than reading them one after the other */
.s17 .pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,44px);align-items:start;
}
.s17 .pair figure{margin:0;}
.s17 .pair img{width:100%;height:auto;display:block;}
.s17 .pair figcaption{margin-top:1rem;max-width:none;}
.s17 .pair figcaption strong{color:var(--ink);font-weight:700;}
.s17 .t-night .pair figcaption strong,
.s17 .t-navy .pair figcaption strong{color:var(--cream);}
@media (max-width:820px){
  .s17 .pair{grid-template-columns:1fr;gap:clamp(28px,5vh,44px);}
}

/* the aerial, front and centre */
.s17 .aerial-wrap{max-width:1120px;margin:0 auto;}
.s17 .aerial-wrap img{width:100%;height:auto;display:block;}
.s17 .legend{
  display:flex;gap:clamp(20px,4vw,44px);flex-wrap:wrap;
  margin-top:1.4rem;font-family:'Overpass',Arial,sans-serif;
  font-size:.78rem;letter-spacing:.08em;color:rgba(248,242,222,.7);
}
.s17 .legend i{display:inline-block;width:30px;height:0;vertical-align:middle;margin-right:.6rem;}
.s17 .legend .solid{border-top:4px solid #3ED14B;}
.s17 .legend .dotted{border-top:4px dotted #3ED14B;}

/* ---------------------------------------------------------------
   THE MEMORY PHOTOGRAPH — Our Story, at the top.
   Not a portrait sitting in a box. It is desaturated, warmed back
   toward the gold in the logo, and masked at every edge so it has
   no border at all and simply dissolves into the night. The real
   photograph appears once, undimmed, at the end of the page.
   --------------------------------------------------------------- */
.s17 .memory{
  position:absolute;top:42%;right:2%;transform:translateY(-50%);
  width:min(44%,510px);pointer-events:none;z-index:1;
}
.s17 .memory img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.06) brightness(.9) sepia(.32);
  opacity:.42;
  -webkit-mask-image:radial-gradient(64% 62% at 52% 44%,
    #000 26%, rgba(0,0,0,.55) 58%, transparent 92%);
          mask-image:radial-gradient(64% 62% at 52% 44%,
    #000 26%, rgba(0,0,0,.55) 58%, transparent 92%);
}
/* fade him further into the left edge so type stays readable over him */
.s17 .memory::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,#060F1A 6%,rgba(6,15,26,.55) 38%,transparent 74%);
}
/* he surfaces slowly, the way a memory does. No observer needed —
   he is at the top of the page, already on screen. Gated on
   .s17-motion so reduced-motion visitors get him straight away. */
@keyframes s17-surface{from{opacity:0;transform:scale(1.04);}to{opacity:.42;transform:none;}}
.s17-motion .memory img{
  opacity:0;animation:s17-surface 2.6s ease .35s forwards;
}

.s17 .memory-name{
  margin-top:clamp(28px,4vh,44px);
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--cream);
}
.s17 .memory-name span{
  display:block;margin-top:.5rem;
  font-family:'Overpass',Arial,sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(248,242,222,.44);
}

@media (max-width:900px){
  .s17 .memory{
    position:absolute;top:0;right:0;left:0;bottom:0;
    width:100%;transform:none;
    display:flex;align-items:center;justify-content:flex-end;
  }
  .s17 .memory img{width:78%;opacity:.2;}
  @keyframes s17-surface{from{opacity:0;transform:scale(1.04);}to{opacity:.2;transform:none;}}
  .s17 .memory::after{
    background:linear-gradient(180deg,rgba(6,15,26,.72),rgba(6,15,26,.5));
  }
}

/* ---------------------------------------------------------------
   THE CORRIDOR REPORT — a link that carries itself like the
   document it points at. Square, paper-coloured, offset shadow.
   --------------------------------------------------------------- */
.s17 .report-card{
  display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid rgba(17,28,38,.16);
  box-shadow:12px 12px 0 rgba(17,28,38,.055);
  transition:transform .28s ease, box-shadow .28s ease;
}
.s17 .report-card:hover,
.s17 .report-card:focus-visible{
  transform:translate(-4px,-4px);
  box-shadow:18px 18px 0 rgba(17,28,38,.08);
}
.s17 .report-card img{
  width:100%;height:auto;display:block;
  border-bottom:1px solid rgba(17,28,38,.14);
}
.s17 .report-rule{display:block;height:7px;background:var(--signal);}
.s17 .report-body{display:block;padding:clamp(22px,2.6vw,34px);}
.s17 .report-body .label{display:block;}
.s17 .report-title{
  display:block;margin-top:.9rem;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.16;color:var(--ink);
}
.s17 .report-sub{
  display:block;margin-top:.9rem;
  font-size:.9rem;line-height:1.5;color:rgba(17,28,38,.64);
}
.s17 .report-go{
  display:block;margin-top:1.5rem;
  font-family:'Overpass',Arial,sans-serif;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
}

/* the mark in the margin of the homepage hero — sits beside the
   headline and above "Where this happened". Small and quiet: a crest,
   not a second logo competing with the nav. */
.s17 .quiet-mark{
  display:block;width:clamp(64px,7vw,104px);height:auto;
  margin:0 0 clamp(16px,2.4vh,26px);
  opacity:.95;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.5));
}

/* In Memory — an oval, the way a portrait is set on a memorial card */
.s17 .portrait-oval{
  width:100%;max-width:290px;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 40%;
  border-radius:50%;display:block;
  box-shadow:0 0 0 1px rgba(248,242,222,.18);
}

/* dad */
.s17 .portrait-john{
  width:100%;max-width:300px;height:auto;display:block;
  border-radius:2px;
}