/* ==========================================================================
   Jack Ranch Cafe & Market — History page
   Loaded after style.css; only page-specific blocks live here. Topbar, header,
   buttons, display headings (.hd), reveal helper and footer come from the
   shared sheet.
   ========================================================================== */

/* ============================================================== PROGRESS = */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--brick));
  box-shadow:0 0 12px -2px rgba(125,31,31,.9);
  transition:width .12s linear;
}

/* ================================================================== HERO = */
.hhero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--wood-3);color:var(--cream);
  min-height:var(--hero-h);display:flex;align-items:center;
}
.hhero__bg{
  position:absolute;inset:-4% 0;z-index:0;transform-origin:60% 62%;
  background-color:var(--wood-3);
  background-image:url("../img/hero-bg.png");
  background-image:image-set(url("../img/hero-bg.webp") type("image/webp"),
                             url("../img/hero-bg.png")  type("image/png"));
  background-size:cover;background-position:58% 62%;background-repeat:no-repeat;
  transform:translate3d(0,var(--py,0px),0);
  animation:hheroZoom 34s ease-in-out infinite alternate;
  will-change:transform;
  /* Aged down hard: this is the one page where the photograph should read as
     archive rather than advertising. */
  filter:sepia(.42) saturate(.8) contrast(1.05) brightness(.86);
}
@keyframes hheroZoom{from{scale:1}to{scale:1.1}}
.hhero__wash{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(98deg,rgba(16,10,5,.94) 0%,rgba(20,12,7,.86) 34%,
                          rgba(24,14,8,.6) 62%,rgba(20,12,7,.5) 100%),
    radial-gradient(110% 90% at 50% 120%,rgba(10,6,3,.8),transparent 62%);
}
.hhero__inner{position:relative;z-index:3;padding-block:clamp(1.1rem,2.4vw,1.9rem)}
.hhero__title{
  font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;--hd-pitch:1.06em;
}
.hhero__text{
  max-width:36rem;margin-top:1.3rem;color:#efe0c6;
  font-size:clamp(1rem,1.3vw,1.16rem);
}
/* chapter jump list */
.hhero__jump{
  list-style:none;margin:1.9rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem .55rem;
}
.hhero__jump a{
  display:inline-block;padding:.45rem .85rem;border-radius:999px;
  border:1px solid rgba(211,164,92,.45);
  font-family:var(--f-cond);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#e9d6b4;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.hhero__jump a:hover{
  background:var(--gold-lt);border-color:var(--gold-lt);color:var(--wood-3);
  transform:translateY(-2px);
}
.hhero .mote{background:radial-gradient(circle,rgba(255,214,152,.5),rgba(255,214,152,0) 70%)}
.hhero .scroll-cue{border-color:rgba(232,194,131,.6)}
.hhero .scroll-cue span{background:var(--gold-lt)}
.hhero .scroll-cue:hover{border-color:var(--gold-lt)}

/* ============================================================== THREADS = */
/* The two storylines, signposted before either one starts. */
.threads{
  background:linear-gradient(180deg,#f7efdd,#efe2c6);
  border-bottom:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.threads__lead{
  max-width:44rem;margin:0 auto 2.4rem;text-align:center;
  font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--wood);
}
.threads__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.9rem)}
.thread{
  position:relative;display:block;padding:1.9rem 1.7rem 1.6rem;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,251,242,.96),rgba(244,232,207,.9));
  border:1px solid rgba(125,31,31,.18);
  box-shadow:0 20px 36px -28px rgba(43,26,18,.75);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.thread:hover{
  transform:translateY(-7px);border-color:rgba(211,164,92,.85);
  box-shadow:0 30px 48px -28px rgba(43,26,18,.8);
}
.thread__no{
  display:block;font-family:var(--f-west);font-size:1.5rem;color:var(--brick);
  -webkit-text-stroke:.7px rgba(92,20,20,.45);margin-bottom:.55rem;
}
.thread h2{
  font-family:var(--f-cond);font-weight:600;font-size:1.06rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wood);
}
.thread h2::after{
  content:"";display:block;width:26px;height:2px;margin:.6rem 0 .8rem;
  background:var(--brick);border-radius:2px;
  transition:width .45s var(--ease),background .45s;
}
.thread:hover h2::after{width:54px;background:var(--gold)}
.thread p{font-size:.95rem;color:var(--ink-soft);max-width:24rem}
.thread__go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-family:var(--f-cond);font-weight:600;font-size:.76rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brick);
}
.thread__go i{font-style:normal;transition:transform .3s var(--ease)}
.thread:hover .thread__go i{transform:translateX(5px)}

/* ============================================================= CHAPTERS = */
.chapter{
  position:relative;
  background-color:#eddfc0;
  background-image:url("../img/story-bg.png");
  background-image:image-set(url("../img/story-bg.webp") type("image/webp"),
                             url("../img/story-bg.png")  type("image/png"));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-bottom:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
/* the second chapter sits on the plaster instead, so the two do not merge */
.chapter--flip{
  background-color:#e4d0b3;
  background-image:url("../img/background.png");
  background-image:image-set(url("../img/background.webp") type("image/webp"),
                             url("../img/background.png")  type("image/png"));
}
.chapter__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,3.8rem);
  align-items:center;
}
/* alternate which side the photograph takes */
.chapter--flip .chapter__copy{order:2}
.chapter--flip .plate{order:1}
.chapter__no{
  font-family:var(--f-cond);font-weight:600;font-size:.76rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brick);margin-bottom:.7rem;
}
.chapter__no--light{color:var(--gold-lt)}
.chapter__copy h2{font-size:clamp(1.6rem,3vw,2.5rem);text-transform:uppercase}
.chapter__rule{display:flex;align-items:center;gap:.7rem;max-width:9rem;margin:.7rem 0 1.3rem}
.chapter__rule i{height:1px;flex:1;background:linear-gradient(90deg,rgba(125,31,31,.55),transparent)}
.chapter__rule i:first-child{background:linear-gradient(270deg,rgba(125,31,31,.55),transparent)}
.chapter__rule b{color:var(--brick);font-size:.66rem}
.chapter__rule--gold i{background:linear-gradient(90deg,var(--gold),transparent)}
.chapter__rule--gold i:first-child{background:linear-gradient(270deg,var(--gold),transparent)}
.chapter__rule--gold b{color:var(--gold-lt)}
.chapter__rule--wide{max-width:14rem;margin-inline:auto}
.chapter__copy>p:not(.chapter__no){color:var(--ink-soft);margin-bottom:1rem;max-width:34rem}
.chapter__copy b{color:var(--wood);font-weight:600}
.chapter__quote{
  margin-top:1.6rem!important;padding-left:1.1rem;border-left:3px solid rgba(125,31,31,.35);
  font-family:var(--f-script);font-size:1.42rem;color:var(--brick)!important;line-height:1.5;
}
.chapter__quote span{font-size:1.6rem;opacity:.55;margin-right:.1rem}

/* ---- fact row ---- */
.facts{
  list-style:none;margin:1.6rem 0 0;padding:1.1rem 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  border-top:1px dashed rgba(125,31,31,.3);
}
.facts li{position:relative;padding-right:.8rem}
.facts li+li{padding-left:1rem}
.facts li+li::before{
  content:"";position:absolute;left:0;top:.1rem;bottom:.3rem;width:1px;
  background:repeating-linear-gradient(180deg,rgba(125,31,31,.4) 0 4px,transparent 4px 9px);
}
.facts b{
  display:block;font-family:var(--f-west);font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1;color:var(--brick);-webkit-text-stroke:.7px rgba(92,20,20,.45);
  margin-bottom:.35rem;
}
.facts span{
  display:block;font-family:var(--f-cond);font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.5;
}

/* ---- framed photograph ---- */
.plate{
  position:relative;margin:0;justify-self:center;width:min(100%,500px);
  padding:14px;border-radius:8px;
  background:linear-gradient(180deg,#fffdf6,#f5ead2);
  border:1px solid rgba(125,31,31,.28);
  box-shadow:0 30px 52px -30px rgba(43,26,18,.8),
             inset 0 0 0 5px rgba(255,255,255,.6),
             inset 0 0 0 6px rgba(211,164,92,.5);
  transition:box-shadow .5s var(--ease),border-color .5s;
}
.plate:hover{
  border-color:rgba(211,164,92,.85);
  box-shadow:0 36px 60px -30px rgba(43,26,18,.85),
             inset 0 0 0 5px rgba(255,255,255,.7),
             inset 0 0 0 6px rgba(211,164,92,.75);
}
.plate__corner{position:absolute;width:14px;height:14px;z-index:2;border:2px solid rgba(125,31,31,.55)}
.plate__corner--tl{left:9px;top:9px;border-right:0;border-bottom:0}
.plate__corner--tr{right:9px;top:9px;border-left:0;border-bottom:0}
.plate__corner--bl{left:9px;bottom:9px;border-right:0;border-top:0}
.plate__corner--br{right:9px;bottom:9px;border-left:0;border-top:0}
.plate__frame{position:relative;overflow:hidden;border-radius:4px;outline:1px solid rgba(43,26,18,.22)}
.plate__frame picture{display:block}
.plate__frame img{
  width:100%;height:auto;display:block;
  filter:sepia(.2) contrast(1.03);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.plate:hover .plate__frame img{transform:scale(1.03);filter:sepia(.06)}
.plate__cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:12px;padding:.6rem .9rem;border-radius:4px;
  background:linear-gradient(180deg,var(--brick),var(--brick-dk));
  box-shadow:inset 0 0 0 1px rgba(246,236,216,.22);color:var(--cream);
}
.plate__cap b{
  font-family:var(--f-cond);font-weight:600;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.plate__cap span{
  font-family:var(--f-cond);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(246,236,216,.72);
}

/* ================================================================== DAY = */
/* The one dark band. Same timber as the site's other dark sections, dropped a
   shade further so the chapter reads as evening. */
.day{
  position:relative;color:var(--cream);
  background-color:#140d07;
  background-image:url("../img/footer-bg.png");
  background-image:image-set(url("../img/footer-bg.webp") type("image/webp"),
                             url("../img/footer-bg.png")  type("image/png"));
  background-size:auto;background-position:center;background-repeat:repeat;
  padding:calc(var(--band) + .6rem) 0;
}
.day::before,.day::after{
  content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(211,164,92,.55),transparent);
}
.day::before{top:0}
.day::after{bottom:0}
/* a slow dusk wash over the timber */
.day__grain{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 70% at 22% 12%,rgba(125,31,31,.28),transparent 62%),
             radial-gradient(60% 60% at 88% 90%,rgba(211,164,92,.1),transparent 66%);
}
.day__inner{position:relative;z-index:1}
.day__head{margin-bottom:2.4rem}
.day__head h2{font-size:clamp(1.7rem,3.4vw,2.8rem);text-transform:uppercase}
.day__grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.4rem);
  align-items:center;
}
.day__copy p{color:#cbb494;font-size:1rem;margin-bottom:1rem;max-width:36rem}
.day__copy b{color:#e7d3ae;font-weight:600}
.day__copy i{color:#e2cba6}
.day__marks{display:grid;gap:1.6rem;justify-items:center}

/* the hour */
.clock{margin:0;text-align:center;width:min(100%,180px)}
.clock svg{width:100%;height:auto;fill:none}
.clock__rim{stroke:rgba(232,194,131,.65);stroke-width:3}
.clock__face{stroke:rgba(232,194,131,.22);stroke-width:1.6}
.clock__ticks path{stroke:rgba(232,194,131,.5);stroke-width:2.6;stroke-linecap:round}
.clock__hand{stroke:var(--gold-lt);stroke-width:3.4;stroke-linecap:round}
.clock__hand--h{transform:rotate(172deg);transform-origin:60px 60px}
.clock__hand--m{transform:rotate(0deg);transform-origin:60px 60px}
.clock__pin{fill:var(--gold-lt);stroke:none}
.clock figcaption,.spyder figcaption{
  margin-top:.7rem;font-family:var(--f-cond);font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:#bda684;
}

/* the car */
.spyder{margin:0;text-align:center;width:min(100%,300px)}
.spyder svg{width:100%;height:auto}
.spyder__body{fill:#d9c39c}
.spyder__screen{fill:#f2e6cc}
.spyder__line,.spyder__door{fill:none;stroke:rgba(43,26,18,.3);stroke-width:2;stroke-linecap:round}
.spyder__door{stroke-width:2.4}
.spyder__wheel{fill:#221609;stroke:#a98f6b;stroke-width:3}
.spyder__hub{fill:#cbb691}
.spyder__shadow{fill:rgba(0,0,0,.35)}
.spyder{animation:rollUp 1.4s var(--ease) both}
@keyframes rollUp{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* forever 24 */
.forever{
  display:flex;align-items:center;gap:1.2rem;margin-top:2.6rem;
  padding-top:2rem;border-top:1px dashed rgba(211,164,92,.3);
}
.forever__num{
  flex:none;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-west);font-size:2.1rem;
  color:var(--cream);background:radial-gradient(circle at 34% 28%,var(--brick-lt),var(--brick-dk));
  border:2px solid rgba(232,194,131,.55);
  box-shadow:0 16px 28px -14px #000;
  animation:foreverPulse 4.5s ease-in-out infinite;
}
@keyframes foreverPulse{
  0%,100%{box-shadow:0 16px 28px -14px #000,0 0 0 0 rgba(211,164,92,.4)}
  55%{box-shadow:0 16px 28px -14px #000,0 0 0 14px rgba(211,164,92,0)}
}
.forever__txt{
  font-family:var(--f-cond);font-size:.95rem;letter-spacing:.16em;
  text-transform:uppercase;color:#d9c19a;line-height:1.7;
}
.forever__txt b{display:block;color:var(--gold-lt);font-weight:600}

/* ============================================================= MEMORIAL = */
.memorial{
  background:linear-gradient(180deg,#f4ecd8,#ece0c4);
  border-bottom:1px solid rgba(125,31,31,.14);
  padding:var(--band) 0;
}
.memorial__grid{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4.5vw,3.6rem);
  align-items:center;
}
.memorial__copy h2{font-size:clamp(1.6rem,3vw,2.5rem);text-transform:uppercase}
.memorial__copy>p:not(.chapter__no){color:var(--ink-soft);margin-bottom:1rem;max-width:34rem}
.memorial__copy b{color:var(--wood);font-weight:600}

/* ---- the monument, drawn ---- */
/* No photograph of the monument exists in the asset set, and a drawing can
   carry the caption in the site's own lettering. The steel is a gradient, the
   stones fade in one after another. */
.monument{margin:0;justify-self:center;width:min(100%,330px);text-align:center}
.monument svg{width:100%;height:auto}
.monument__trunk{fill:none;stroke:#6b4a26;stroke-width:9;stroke-linecap:round}
.monument__branch{fill:none;stroke:#6b4a26;stroke-width:4.5;stroke-linecap:round}
.monument__canopy ellipse{fill:#7d9b62;opacity:.92}
.monument__canopy ellipse:nth-child(2),.monument__canopy ellipse:nth-child(3){fill:#6a8752}
.monument__canopy ellipse:nth-child(4){fill:#5e7a49}
.monument__steel rect,.monument__steel path{fill:url(#steel);stroke:rgba(43,26,18,.35);stroke-width:1}
.monument__plaque{fill:#8c8f93;stroke:rgba(43,26,18,.5)}
.monument__bed{fill:#d8c6a4}
.monument__stones ellipse:not(.monument__bed){fill:#b6a385;opacity:.95}
.monument figcaption{
  margin-top:.9rem;font-family:var(--f-cond);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
/* arrival: the tree, then the steel, then the stones */
.monument__tree,.monument__steel,.monument__stones{opacity:0}
.monument.is-in .monument__tree{animation:growIn .9s var(--ease) .1s forwards}
.monument.is-in .monument__steel{animation:growIn .9s var(--ease) .5s forwards}
.monument.is-in .monument__stones{animation:growIn .9s var(--ease) .8s forwards}
@keyframes growIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.monument__canopy{transform-box:fill-box;transform-origin:center;animation:leafSway 9s ease-in-out infinite}
@keyframes leafSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}

/* ================================================================ STORY = */
/* The full run of dates. One rail down the middle on wide screens, down the
   left when there is no room; history.js fills it as the list goes by. */
.story{
  background-color:#e4d0b3;
  background-image:url("../img/background.png");
  background-image:image-set(url("../img/background.webp") type("image/webp"),
                             url("../img/background.png")  type("image/png"));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:var(--band) 0;
}
.sechead--hist{text-align:center;margin-bottom:3rem}
.sechead--hist .script{color:var(--brick);opacity:.9}
.sechead--hist h2{font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase}

.road{list-style:none;margin:0;padding:0;position:relative}
.road__rail{
  position:absolute;left:50%;top:.4rem;bottom:.4rem;width:3px;translate:-50% 0;
  background:rgba(125,31,31,.18);border-radius:3px;overflow:hidden;
}
/* the filled part, driven by --fill (0-1) from history.js */
.road__rail i{
  display:block;width:100%;height:100%;transform-origin:top;
  transform:scaleY(var(--fill,0));
  background:linear-gradient(180deg,var(--gold),var(--brick));
  box-shadow:0 0 10px -1px rgba(125,31,31,.6);
  transition:transform .18s linear;
}
.stop{
  position:relative;width:50%;padding:0 clamp(1.6rem,3vw,2.8rem) 2.2rem 0;
}
.stop:nth-child(even){margin-left:50%;padding:0 0 2.2rem clamp(1.6rem,3vw,2.8rem);text-align:left}
.stop:nth-child(odd){text-align:right}
.stop:last-child{padding-bottom:0}
.stop__dot{
  position:absolute;top:.55rem;width:15px;height:15px;border-radius:50%;z-index:2;
  background:#e7dcc4;border:3px solid var(--brick);
  box-shadow:0 0 0 4px rgba(228,208,179,.9);
  transition:background .4s,transform .4s var(--ease),box-shadow .4s;
}
.stop:nth-child(odd) .stop__dot{right:clamp(-.5rem,-.55vw,-.42rem);translate:50% 0}
.stop:nth-child(even) .stop__dot{left:clamp(-.5rem,-.55vw,-.42rem);translate:-50% 0}
/* lit once the rail has passed it */
.stop.is-past .stop__dot{
  background:var(--gold-lt);transform:scale(1.16);
  box-shadow:0 0 0 4px rgba(228,208,179,.9),0 0 14px 2px rgba(211,164,92,.75);
}
.stop--key .stop__dot{border-color:var(--brick-dk);background:var(--brick-lt)}
.stop--key.is-past .stop__dot{background:var(--brick);box-shadow:0 0 0 4px rgba(228,208,179,.9),0 0 16px 3px rgba(155,42,42,.8)}
.stop__year{
  display:block;font-family:var(--f-west);font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:var(--brick);-webkit-text-stroke:.7px rgba(92,20,20,.45);
  margin-bottom:.5rem;
}
.stop__card{
  display:inline-block;text-align:left;padding:1.1rem 1.25rem;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,251,242,.96),rgba(244,232,207,.9));
  border:1px solid rgba(125,31,31,.18);
  box-shadow:0 18px 32px -26px rgba(43,26,18,.75);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.stop__card:hover{
  transform:translateY(-5px);border-color:rgba(211,164,92,.8);
  box-shadow:0 26px 42px -26px rgba(43,26,18,.8);
}
.stop__card h3{
  font-family:var(--f-cond);font-weight:600;font-size:.92rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wood);margin-bottom:.45rem;
}
.stop__card p{font-size:.93rem;color:var(--ink-soft);max-width:24rem}
.stop--key .stop__card{
  border-color:rgba(125,31,31,.5);
  box-shadow:0 22px 36px -24px rgba(43,26,18,.8),inset 0 0 0 1px rgba(211,164,92,.35);
}

/* ================================================================== CTA = */
.hcta{
  position:relative;overflow:hidden;text-align:center;color:var(--cream);
  background:linear-gradient(180deg,var(--brick),var(--brick-dk));
  border-block:3px solid rgba(211,164,92,.35);
  padding:clamp(2.4rem,4.5vw,3.6rem) 0;
}
.hcta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,226,178,.14) 50%,transparent 65%);
  transform:translateX(-100%);animation:hSweep 8s ease-in-out 2s infinite;
}
@keyframes hSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.hcta__inner{position:relative;z-index:1}
.hcta .eyebrow{display:flex;justify-content:center;gap:.5rem}
.hcta h2{font-size:clamp(1.5rem,3.2vw,2.4rem);text-transform:uppercase}
.hcta .chapter__rule{margin-inline:auto;max-width:12rem}
.hcta__sub{
  font-family:var(--f-cond);font-size:.92rem;letter-spacing:.1em;
  color:#f3ddbe;margin-top:.9rem;
}
.hcta__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.hcta .btn--outline{border-color:var(--cream)}
.hcta .btn--outline::before{background:var(--cream)}
.hcta .btn--outline:hover{color:var(--brick-dk)}

/* ============================================================ RESPONSIVE = */
@media (max-width:1080px){
  .chapter__grid,.memorial__grid,.day__grid{grid-template-columns:1fr;gap:2.4rem}
  .chapter--flip .chapter__copy,.chapter--flip .plate{order:0}
  .plate,.monument{margin-inline:auto}
  .day__marks{grid-template-columns:1fr 1fr;align-items:center}

  /* rail moves to the left and every stop lines up beside it */
  .road__rail{left:8px;translate:0 0}
  .stop,.stop:nth-child(even),.stop:nth-child(odd){
    width:100%;margin-left:0;text-align:left;
    padding:0 0 2rem 2.4rem;
  }
  .stop:nth-child(odd) .stop__dot,.stop:nth-child(even) .stop__dot{
    left:8px;right:auto;translate:-50% 0;
  }
}
@media (max-width:820px){
  .threads__grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  /* --hero-h holds at every width -- see base.css. */
  /* Tight on phones: the title wraps to three lines here and the banner still
     has to come out the same height as the other inner pages. */
  .hhero__inner{padding-block:1.1rem}
  .hhero__text{margin-top:.9rem}
  .hhero__jump{margin-top:1.2rem}
  .hhero__jump{gap:.45rem}
  .facts{grid-template-columns:1fr;gap:0}
  .facts li,.facts li+li{padding:.6rem 0}
  .facts li+li::before{
    left:0;right:auto;top:0;bottom:auto;width:100%;height:1px;
    background:repeating-linear-gradient(90deg,rgba(125,31,31,.4) 0 4px,transparent 4px 9px);
  }
  .day__marks{grid-template-columns:1fr}
  .forever{gap:.9rem}
  .forever__num{width:70px;height:70px;font-size:1.7rem}
  .forever__txt{font-size:.82rem;letter-spacing:.12em}
}

/* ============================================================ MOTION PREF = */
@media (prefers-reduced-motion:reduce){
  .hhero__bg,.hcta::after,.forever__num,.monument__canopy,.spyder{animation:none}
  .monument__tree,.monument__steel,.monument__stones{opacity:1}
  .spyder{opacity:1;transform:none}
  .road__rail i{transform:scaleY(1)}
}