/* ---------------------------------------------------------------
   Beaufort Pro — self-hosted, no local() lookup: the served file is
   what every visitor gets, so a bad path fails visibly.
   Paths are relative to this stylesheet (/assets/story.css).
   --------------------------------------------------------------- */
@font-face{
  font-family:"Beaufort Pro";
  src:url("fonts/BeaufortPro-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Beaufort Pro";
  src:url("fonts/BeaufortPro-RegularItalic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Beaufort Pro";
  src:url("fonts/BeaufortPro-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Beaufort Pro";
  src:url("fonts/BeaufortPro-BoldItalic.woff2") format("woff2");
  font-weight:700;font-style:italic;font-display:swap;
}

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root{
  --display:"Beaufort Pro",Georgia,"Times New Roman",serif;
  --body:"Beaufort Pro",Georgia,"Times New Roman",serif;

  --gold-bright:#f0e6d2;
  --gold:#c8aa6e;
  --gold-deep:#785a28;
  --gold-dark:#463714;

  /* measured from the reference at a 1492px viewport (2x capture):
     reading column 598px, plate title 25.5px, rail title 24px,
     small caps 12px, rail rule 288px wide and 2px thick.        */
  --measure:600px;
  --rail-w:288px;
  --title-run:clamp(20px,1.71vw,34px);
  --title-rail:calc(var(--title-run) * .94);
  --by-run:clamp(11px,.8vw,15px);
  /* hero type measured against the running title at a 1476px viewport:
     title 62px (2.47x), byline 17px (1.45x), cue 12px (1.0x)            */
  --title-hero:calc(var(--title-run) * 2.47);
  --by-hero:calc(var(--by-run) * 1.45);
  --track-title:.04em;
  --track-caps:.08em;
  /* the hero is dark in both themes; only the reading surface changes */
  --scrim:19,20,21;
  --blend:clamp(140px,20vh,260px);
  /* the rail sits on the same inset top and left */
  --rail-inset:clamp(24px,3.2vw,54px);
  --ease:cubic-bezier(.215,.61,.355,1);
}
html[data-theme="dark"]{
  --bg:#131415;              /* sampled from the reference */
  --ink:#f0e6d2;             /* body copy is the same cream as the titles */
  --ink-strong:#f0e6d2;
  --ink-mute:#8d8878;
  --accent:var(--gold);
  --rule:#282928;            /* progress track */
  --toggle:#cdbd91;
  --rail-bg:rgba(19,20,21,.78);
  --card-bg:#0e0e10;
  --card-rule:#917246;
  --card-sub:#c3ba98;
}
html[data-theme="light"]{
  --bg:#f2efe6;
  --ink:#26282b;
  --ink-strong:#0f1418;
  --ink-mute:#6b6553;
  --accent:var(--gold-deep);
  --rule:#d6cfbd;
  --toggle:var(--gold-deep);
  --rail-bg:rgba(242,239,230,.82);
  --card-bg:#e8e2d3;
  --card-rule:#917246;
  --card-sub:#3a352b;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* the page paints its own colour past both ends, so an overscroll
     bounce reveals the page rather than the browser canvas */
  background:var(--bg);
  overscroll-behavior-y:none;
  transition:background-color .45s var(--ease);
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;
  background:var(--bg);
  overscroll-behavior-y:none;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s var(--ease),color .45s var(--ease);
}
::selection{background:var(--accent);color:var(--bg)}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{
  position:sticky;
  top:0;
  height:100vh;
  min-height:520px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:1;
  will-change:opacity;
}
.hero__media{
  position:absolute;
  inset:0;
  will-change:transform,opacity;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  display:block;
  transform:scale(1.06);
  animation:heroIn 2600ms var(--ease) forwards;
}
@keyframes heroIn{to{transform:scale(1)}}

.hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(var(--scrim),.42) 0%,
      rgba(var(--scrim),.05) 22%,
      rgba(var(--scrim),.30) 58%,
      rgba(var(--scrim),.86) 84%,
      rgba(var(--scrim),.96) 100%);
  pointer-events:none;
}

.hero__veil{
  position:absolute;
  inset:0;
  background:rgb(var(--scrim));
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}

.hero__inner{
  position:relative;
  width:100%;
  max-width:1180px;
  padding:0 32px clamp(110px,25.6vh,260px);
  text-align:center;
  will-change:transform,opacity;
}
.hero__title{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--title-hero);
  line-height:1.06;
  letter-spacing:var(--track-title);
  text-indent:var(--track-title);
  text-transform:uppercase;
  color:var(--gold-bright);
  margin:0 0 6px;
  text-shadow:0 2px 8px rgba(0,0,0,.45), 0 6px 26px rgba(0,0,0,.34);
  opacity:0;
  transform:translateY(26px);
  animation:riseIn 1100ms var(--ease) 420ms forwards;
}

.hero__byline{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-hero);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(14px);
  animation:riseIn 900ms var(--ease) 780ms forwards;
}
@keyframes riseIn{to{opacity:1;transform:none}}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%) translateY(10px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  color:#a09b8c;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  opacity:0;
  animation:cueIn 800ms var(--ease) 1400ms forwards;
  will-change:opacity;
}
/* riseIn ends on transform:none, which would drop the -50% centering */
@keyframes cueIn{to{opacity:1;transform:translateX(-50%) translateY(0)}}
.hero__scroll span{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  letter-spacing:0;
  text-transform:uppercase;
}
.hero__scroll svg{
  width:18px;height:15px;
  display:block;
  fill:none;stroke:currentColor;
  stroke-width:4.2;
  stroke-linecap:butt;stroke-linejoin:miter;
}

/* ---------------------------------------------------------------
   Story body
   --------------------------------------------------------------- */
.story{
  position:relative;
  z-index:2;
  background:var(--bg);
  padding:0 24px clamp(52px,8.5vh,96px);
  transition:background-color .45s var(--ease);
  /* the reading surface rises out of the hero rather than cutting it off */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--blend));
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--blend));
}

/* title plate: descending hairline, gem, running title */
.plate{
  text-align:center;
  padding-top:clamp(170px,27vh,320px);
  padding-bottom:134px;
}
.drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:49px;
}
.drop__line{
  width:1px;
  height:47px;
  background:var(--accent);
}
/* a 10px square rotated 45deg measures 14px across, matching the source;
   the hairline runs straight into the top vertex with no gap */
.gem{
  width:10px;height:10px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}
.plate__title{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--title-run);
  letter-spacing:var(--track-title);
  text-indent:var(--track-title);
  text-transform:uppercase;
  color:var(--ink-strong);
  margin:0 0 14px;
}
.plate__by{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}

.story__inner{
  max-width:var(--measure);
  margin:0 auto;
}

/* ---------------------------------------------------------------
   Sticky left rail: running title, byline, read progress, theme
   --------------------------------------------------------------- */
.rail-l{
  position:fixed;
  top:var(--rail-inset);
  left:var(--rail-inset);
  width:var(--rail-w);
  z-index:20;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.rail-l.is-on{opacity:1;transform:none;pointer-events:auto}
.rail-l__kicker{
  margin:0 0 3px;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  line-height:1.2;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--ink-strong);
}
.rail-l__title{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--title-rail);
  line-height:1.15;
  letter-spacing:var(--track-title);
  text-transform:uppercase;
  color:var(--ink-strong);
  margin:0 0 9px;
}
.rail-l__by{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  line-height:1.2;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}
.progress{
  position:relative;
  margin-top:26px;
  height:2px;
  width:100%;
  background:var(--rule);
}
.progress i{
  position:absolute;left:0;top:0;
  display:block;
  height:2px;
  width:0;
  background:var(--accent);
  transition:width .12s linear;
}
.themetoggle{
  appearance:none;
  border:0;
  background:transparent;
  margin:36px 0 0;
  padding:0;
  cursor:pointer;
  color:var(--toggle);
  opacity:1;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.themetoggle:hover{opacity:1;transform:scale(1.06)}
.themetoggle:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.themetoggle svg{width:17px;height:17px;display:block}
.themetoggle .ring{fill:none;stroke:currentColor;stroke-width:1.2}
.themetoggle .half{fill:currentColor;stroke:none}
.story__inner p{
  margin:0 0 1.2em;
  color:var(--ink);
}
.story__inner em{
  font-style:italic;
  color:inherit;
}

/* end ornament: the plate ornament, mirrored */
.endmark{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:clamp(36px,5.4vh,62px) auto 0;
}
.endmark__line{
  width:1px;
  height:47px;
  background:var(--accent);
}


/* ---------------------------------------------------------------
   Artwork — inline plate, click to open full size
   --------------------------------------------------------------- */
.art{
  max-width:var(--measure);
  margin:clamp(32px,4.6vh,56px) auto 0;
  text-align:center;
}
.art__kicker{
  margin:0 0 clamp(14px,2.2vh,24px);
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}

/* --- carousel ---------------------------------------------------- */
.art__viewport{
  overflow:hidden;
}
.art__track{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.art__slide{
  flex:0 0 100%;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.art__slide--clone{pointer-events:none}
.art__open{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:zoom-in;
  display:block;
  line-height:0;
  max-width:100%;
}
.art__open img{
  display:block;
  max-width:100%;
  /* every piece occupies the same band whatever its aspect, so the
     surrounding layout does not jump as the carousel moves */
  max-height:clamp(280px,52vh,560px);
  width:auto;height:auto;
  object-fit:contain;
  margin:0 auto;
  transition:opacity .3s var(--ease);
}
.art__open:hover img,.art__open:focus-visible img{opacity:.88}
.art__open:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.art__credits{
  position:relative;
  margin-top:clamp(11px,1.7vh,17px);
  min-height:1.4em;
}

.art__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2.4vw,22px);
  margin-top:clamp(9px,1.5vh,15px);
}
.art__arrow{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px;
  cursor:pointer;
  color:var(--ink-mute);
  display:grid;place-items:center;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.art__arrow svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.art__arrow:hover{color:var(--gold-bright)}
html[data-theme="light"] .art__arrow:hover{color:var(--gold-deep)}
.art__arrow:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.art__arrow[disabled]{opacity:.28;cursor:default}
.art__arrow[disabled]:hover{color:var(--ink-mute)}
.art__arrow--prev:hover:not([disabled]){transform:translateX(-2px)}
.art__arrow--next:hover:not([disabled]){transform:translateX(2px)}

.art__dots{
  display:flex;
  align-items:center;
  gap:9px;
}
.art__dot{
  appearance:none;
  border:1px solid var(--rule);
  background:transparent;
  width:7px;height:7px;
  padding:0;
  transform:rotate(45deg);       /* the page's diamond, in miniature */
  cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.art__dot:hover{border-color:var(--gold)}
.art__dot.is-current{background:var(--accent);border-color:var(--accent)}
.art__dot:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .art__track{transition:none}
}

.art__credit{
  position:absolute;
  left:0;right:0;top:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--by-run) * .84);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--ink-mute);
}
.art__credit.is-current{opacity:1;pointer-events:auto}
.art__credit:empty{display:none}
.art__credit b{color:var(--card-sub);font-weight:700}
.art__credit-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(200,170,110,.4);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.art__credit-link:hover,.art__credit-link:focus-visible{
  color:var(--gold-bright);
  border-bottom-color:var(--gold);
}
html[data-theme="light"] .art__credit-link:hover{color:var(--gold-deep)}
.lightbox__credit{
  margin:0;
  flex:0 0 auto;
  text-align:center;
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--by-run) * .84);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--ink-mute);
  pointer-events:none;
}
.lightbox__credit b{color:var(--card-sub);font-weight:700}
.lightbox__credit:empty{display:none}
.lightbox__credit-link{
  pointer-events:auto;            /* the line ignores clicks; the link does not */
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(200,170,110,.45);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lightbox__credit-link:hover,.lightbox__credit-link:focus-visible{
  color:var(--gold-bright);
  border-bottom-color:var(--gold-bright);
}
/* zoomed: out of the flow and pinned to the bottom-right of the viewport,
   so it stays put while the oversized image scrolls underneath */
.lightbox.is-zoomed .lightbox__credit{
  position:fixed;
  right:0;
  bottom:0;
  left:auto;
  z-index:2;
  text-align:right;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px)) 30px;
  background:linear-gradient(to left,rgba(8,9,10,.9) 45%,rgba(8,9,10,0));
}

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  place-items:center;
  background:rgba(8,9,10,.94);
  opacity:0;
  transition:opacity .3s var(--ease);
  overscroll-behavior:contain;
}
.lightbox.is-open{display:grid;opacity:1}
.lightbox__stage{
  --lb-pad:clamp(16px,4vh,56px);
  width:100%;height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:var(--lb-pad);
  cursor:zoom-in;
}
.lightbox__stage.is-zoomed{cursor:zoom-out;place-items:start}
/* percentages here resolve against an auto grid track that grows with
   the image, so they never cap it — measure against the viewport */
.lightbox img{
  display:block;
  max-width:calc(100vw - var(--lb-pad) * 2);
  max-height:calc(100vh - var(--lb-pad) * 2 - var(--lb-credit, 0px));
  width:auto;height:auto;
  object-fit:contain;
  transition:transform .35s var(--ease);
}
@supports (height:100dvh){
  .lightbox img{
    max-height:calc(100dvh - var(--lb-pad) * 2 - var(--lb-credit, 0px));
  }
}
.lightbox__stage.is-zoomed img{
  max-width:none;max-height:none;
  width:auto;
}
.lightbox__close{
  position:absolute;
  top:clamp(12px,2.4vh,26px);
  right:clamp(12px,2.4vw,26px);
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid var(--rule);
  background:rgba(19,20,21,.7);
  color:var(--gold);
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.lightbox__close:hover{border-color:var(--gold);color:var(--gold-bright)}
.lightbox__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .art__open img{transition:none}
  .art__open:hover img,.art__open:focus-visible img{transform:none}
  .lightbox,.lightbox img{transition:none}
}

/* ---------------------------------------------------------------
   Cast — circular portraits between the closing ornament and the
   more-stories grid. Traced from the reference: portrait ~163px,
   gap between them roughly one diameter, name in gold over the
   region in cream.
   --------------------------------------------------------------- */
.cast{
  max-width:var(--measure);
  margin:clamp(32px,4.6vh,56px) auto 0;
}
.cast__row{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(34px,9%,74px);
}
.who{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:clamp(112px,27%,164px);
}
.who__portrait{
  display:block;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:#0b0c0d;
}
.who__portrait img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.who__name{
  display:block;
  margin-top:clamp(13px,2.1vh,19px);
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--by-run) * 1.5);
  line-height:1.2;
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}
.who__region{
  display:block;
  margin-top:4px;
  font-family:var(--display);
  font-weight:400;
  font-size:calc(var(--by-run) * 1.05);
  line-height:1.2;
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--card-sub);
}

/* ---------------------------------------------------------------
   More stories — art over a caption panel, two to the text measure
   Proportions traced from the reference card: art 2.55:1, a 2px
   rule beneath it, panel ~13.5% of the card width tall.
   --------------------------------------------------------------- */
.more{
  max-width:var(--measure);
  margin:clamp(36px,5.6vh,66px) auto 0;
  text-align:center;
}
.more__kicker{
  margin:0 0 clamp(14px,2.2vh,24px);
  font-family:var(--display);
  font-weight:700;
  font-size:var(--by-run);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}
/* fixed half-measure tracks: two fill the column exactly, and a lone
   card keeps that width instead of stretching, centred by the grid */
.more__grid{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,calc(50% - 12px));
  justify-content:center;
  gap:24px;
}
.card{
  display:block;
  text-decoration:none;
  background:var(--card-bg);
  outline:1px solid transparent;
  outline-offset:0;
  transition:outline-color .35s var(--ease);
}
.card__art{
  display:block;
  position:relative;
  aspect-ratio:2.55/1;
  overflow:hidden;
  border-bottom:2px solid var(--card-rule);
}
.card__art img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .7s var(--ease),opacity .35s var(--ease);
  opacity:.88;
}
.card__panel{
  display:block;
  padding:9px 10px 10px;
}
.card__title{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:calc(var(--by-run) * .95);
  line-height:1.15;
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--accent);
}
.card__sub{
  display:block;
  margin-top:3px;
  font-family:var(--display);
  font-weight:700;
  line-height:1.15;
  font-size:calc(var(--by-run) * .78);
  letter-spacing:var(--track-caps);
  text-indent:var(--track-caps);
  text-transform:uppercase;
  color:var(--card-sub);
}
.card:hover,.card:focus-visible{outline-color:var(--gold)}
.card:hover .card__art img,
.card:focus-visible .card__art img{transform:scale(1.08);opacity:1}
.card:focus-visible{outline-width:2px}

@media (max-width:560px){
  .more__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .card__art img{transition:none}
  .card:hover .card__art img,
  .card:focus-visible .card__art img{transform:scale(1.02)}
}

@media (max-width:1180px){
  :root{--rail-w:200px}
  .rail-l__title{font-size:17px}
}
@media (max-width:900px){
  body{font-size:17px}
  .rail-l{
    top:auto;bottom:14px;left:14px;right:14px;width:auto;
    display:flex;align-items:center;gap:14px;
    padding:8px 12px;
    background:var(--rail-bg);
    backdrop-filter:blur(6px);
    border:1px solid var(--rule);
  }
  .rail-l__kicker,.rail-l__title,.rail-l__by{display:none}
  .progress{margin-top:0;flex:1}
  .themetoggle{margin:0}
  .hero__inner{padding-bottom:16vh}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .hero__title,.hero__byline,.hero__scroll{opacity:1;transform:none}
  .hero__scroll{transform:translateX(-50%) translateY(0)}
}