/* ============================================================
   Eva Nightingale — author site
   Ported from the Claude Design prototype (project/).
   Fluid throughout: sizing uses clamp(), so there are no
   media queries and no breakpoints to maintain.
   ============================================================ */

/* ---------- Fonts ------------------------------------------------- */
/* Only the six faces the design actually resolves to, as WOFF2.
   Regenerate from project/fonts/ with the command in the README. */
@font-face{font-family:'Elsie';src:url('../fonts/Elsie-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Elsie';src:url('../fonts/Elsie-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Crimson Pro';src:url('../fonts/CrimsonPro-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Crimson Pro';src:url('../fonts/CrimsonPro-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Crimson Pro';src:url('../fonts/CrimsonPro-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Herr Von Muellerhoff';src:url('../fonts/HerrVonMuellerhoff-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Tokens ------------------------------------------------ */
:root{
  --fh:'Elsie', Georgia, serif;              /* headings */
  --fb:'Crimson Pro', Georgia, serif;        /* body */
  --fs:'Herr Von Muellerhoff', cursive;      /* script accents */

  --ink:#eadfd2;
  --dim:#9d8878;
  --red:#bb121c;
  --redlt:#e03b44;

  --bg:#050303;
  --bright:#f7ece0;
  --warm:#cdbaaa;
  --mute:#8a7365;
  /* The prototype used #6f5b4d here and #4f4036 for the copyright line —
     3.21:1 and 2.08:1 on this ground, both below WCAG AA. These carry the
     18+ notice and the footer navigation, so they were lifted to 4.5:1.
     --mute and --faint now separate by hue rather than lightness, because
     on a #050303 ground everything that passes AA sits in one narrow band. */
  --faint:#8a715f;

  --gut:clamp(20px, 5vw, 64px);              /* horizontal page gutter */
}

/* ---------- Reset / base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fb);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--redlt);text-decoration:none;transition:color .25s ease;}
a:hover{color:#fff;}
button{font-family:inherit;}
h1,h2,h3{margin:0;}
p{margin:0;}

/* Visible keyboard focus everywhere — the prototype had none. */
:focus-visible{outline:2px solid var(--redlt);outline-offset:3px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 22px;background:var(--red);color:#fff;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
}
.skip:focus{left:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Scroll reveal ----------------------------------------- */
/* Content is visible by default. The .js class is set by an inline
   script before paint, so only JS-capable browsers ever hide it —
   a script failure can never leave the page blank. */
.js [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),
             transform 1.2s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 1) * 120ms);
}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* ---------- Shared pieces ----------------------------------------- */
.btn{
  display:inline-block;padding:19px 42px;
  background:var(--red);border:1px solid var(--redlt);color:#fdf3e8;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  box-shadow:0 18px 60px rgba(187,18,28,.4);
  cursor:pointer;transition:background .25s ease,color .25s ease;
}
.btn:hover{background:#8f0d15;color:#fff;}

.eyebrow{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--mute);
}

.rule{
  width:70px;height:1px;
  background:linear-gradient(90deg,rgba(224,59,68,.85),rgba(224,59,68,0));
}

/* Sprite host — holds the <symbol> the diamond marks reference. */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- Section divider --------------------------------------- */
/* The mark on a rule that fades away from it in both directions. Used
   only between quotes/book and trilogy/author, where two flat #050303
   sections meet and no gradient already marks the seam. */
.divider{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,22px);
  padding:clamp(26px,4.5vw,52px) var(--gut);
  background:var(--bg);
}
.divider::before,.divider::after{
  content:'';height:1px;
  flex:0 1 clamp(54px,16vw,150px);
  background:linear-gradient(90deg,rgba(224,59,68,0),rgba(224,59,68,.45));
}
.divider::after{background:linear-gradient(90deg,rgba(224,59,68,.45),rgba(224,59,68,0));}
.divider__mark{
  flex:none;width:clamp(13px,1.7vw,17px);aspect-ratio:1;
  color:var(--redlt);
}

/* ---------- Hero -------------------------------------------------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,3vw,40px) var(--gut) clamp(26px,4vw,48px);
  overflow:hidden;
  isolation:isolate;
}
/* ::after paints after every child, so without the z-index below the
   vignette lands on top of the hero's own text. The prototype avoided
   this by making both gradients real divs placed before the content;
   as pseudo-elements they need the layering stated explicitly. */
.hero::before,.hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero__bar,.hero__center,.hero__scroll{z-index:1;}
.hero::before{background:radial-gradient(120% 85% at 50% 118%,#6d1219 0%,#300a0e 26%,#120607 52%,#050303 78%);}
.hero::after{background:radial-gradient(75% 55% at 50% 50%,rgba(5,3,3,0) 0%,rgba(5,3,3,.55) 70%,rgba(5,3,3,.92) 100%);}

/* #c6b1a1 rather than the prototype's #8a7365: 10:1 against this ground
   instead of 4.62:1, which is the bare AA floor and reads as barely there
   at 10px under .42em tracking. It is the same value as the "Eva
   Nightingale" line directly below, so the two eyebrows now match. */
.hero__bar{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:#c6b1a1;
}
.hero__bar a{color:#c6b1a1;letter-spacing:.42em;}
.hero__bar a:hover{color:var(--ink);}

.hero__center{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(20px,3vw,34px);padding:clamp(40px,7vw,90px) 0;
}
.hero__name{
  font-family:var(--fh);font-weight:400;font-size:22px;
  letter-spacing:.52em;text-transform:uppercase;color:#c6b1a1;
}
.hero__title{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(58px,15vw,210px);line-height:.88;letter-spacing:.03em;
  text-transform:uppercase;color:var(--bright);
  text-shadow:0 0 90px rgba(187,18,28,.6);
}
.script{
  font-family:var(--fs);font-weight:400;
  font-size:clamp(34px,5vw,58px);line-height:.9;color:var(--redlt);
}
.hero__cta{margin-top:clamp(10px,2vw,20px);}
.hero__scroll{position:relative;display:flex;justify-content:center;align-items:center;}
/* The mark at its largest, closing the hero. Replaces the prototype's
   1x34px gradient tick. The glow echoes the wordmark's text-shadow so it
   reads as part of the same treatment rather than a pasted-on badge. */
/* The hero is a space-between column and this is its last child, so its
   bottom edge is pinned to the content box: growing it taller expands it
   upwards into the slack above, which is where the room is. */
.hero__mark{
  flex:none;width:clamp(52px,6.8vw,80px);aspect-ratio:1;
  color:var(--redlt);
  filter:drop-shadow(0 0 40px rgba(187,18,28,.55));
}

/* ---------- Invitation -------------------------------------------- */
.invitation{
  position:relative;overflow:hidden;
  padding:clamp(80px,13vw,180px) var(--gut) clamp(70px,10vw,140px);
  background:radial-gradient(115% 90% at 50% 0%,#4a0d13 0%,#240709 26%,#0d0506 58%,#050303 100%);
}
.invitation__inner{
  position:relative;max-width:640px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(26px,3.4vw,40px);
}
.invitation__lead{
  font-size:clamp(21px,2.5vw,29px);line-height:1.55;color:#f3e7db;
  text-align:center;text-wrap:pretty;
}
.invitation__noticed{display:flex;flex-direction:column;gap:10px;}
.invitation__heading{
  font-family:var(--fh);font-weight:400;
  font-size:clamp(28px,4.2vw,52px);line-height:1.06;
  text-transform:uppercase;color:var(--bright);text-align:center;
  text-shadow:0 0 50px rgba(187,18,28,.45);
}
.invitation__sub{
  font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--warm);text-align:center;
}
.invitation__body{
  display:flex;flex-direction:column;gap:20px;
  font-size:clamp(18px,1.9vw,21px);line-height:1.8;color:var(--warm);text-wrap:pretty;
}
.invitation__pull{
  display:flex;flex-direction:column;gap:20px;
  font-size:clamp(18px,1.9vw,21px);line-height:1.8;color:#e6d8ca;text-wrap:pretty;
  border-left:1px solid rgba(224,59,68,.5);padding-left:clamp(18px,3vw,30px);
}
.invitation__pull .script{font-size:clamp(38px,6vw,62px);line-height:.95;}
.invitation__midnight{
  font-family:var(--fh);font-weight:400;
  font-size:clamp(20px,2.6vw,32px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bright);text-align:center;
}

/* ---------- Signup form ------------------------------------------- */
.signup{
  margin-top:clamp(12px,2vw,24px);padding:clamp(28px,4vw,44px);
  background:rgba(5,3,3,.72);border:1px solid rgba(224,59,68,.35);
  box-shadow:0 40px 90px rgba(0,0,0,.6);scroll-margin-top:80px;
}
.signup__label{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:#c9a06a;
  margin-bottom:8px;
}
.signup__copy{
  display:flex;flex-direction:column;gap:.85em;
  font-size:clamp(17px,1.8vw,19px);line-height:1.7;color:var(--warm);text-wrap:pretty;
}
.signup__form{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.signup__form input[type=text],
.signup__form input[type=email]{
  padding:18px 20px;background:rgba(5,3,3,.8);
  border:1px solid rgba(224,59,68,.45);color:var(--ink);
  font-family:var(--fb);font-size:16px;outline:none;
  transition:border-color .25s ease;
}
.signup__form input[name=FNAME]{flex:1 1 160px;}
.signup__form input[name=EMAIL]{flex:2 1 220px;}
.signup__form input:focus{border-color:var(--redlt);}
.signup__form input::placeholder{color:var(--faint);}
.signup__submit{flex:1 1 100%;padding:19px 34px;font-size:12px;}
.signup__submit[disabled]{
  background:transparent;border-color:rgba(224,59,68,.35);
  color:var(--faint);cursor:not-allowed;box-shadow:none;
}
.signup__hp{position:absolute;left:-9999px;}
.signup__note{
  margin-top:14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}

/* ---------- Quotes ------------------------------------------------ */
.quotes{padding:clamp(70px,11vw,150px) var(--gut);background:var(--bg);}
.quotes__inner{
  max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,44px);
}
.quotes__stage{
  margin:0;min-height:clamp(160px,20vw,260px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;line-height:1.32;color:#efe3d6;text-wrap:pretty;
}
.quote{display:none;flex-direction:column;gap:20px;align-items:center;}
.quote.is-active{display:flex;}
.quote__text{white-space:pre-line;transition:opacity .45s ease;}
.quotes__stage.is-fading .quote__text{opacity:0;}
/* Size tier is chosen at build time from the quote's length. */
.quote--xl .quote__text{font-size:clamp(25px,3.8vw,46px);}
.quote--lg .quote__text{font-size:clamp(23px,3.4vw,40px);}
.quote--md .quote__text{font-size:clamp(21px,2.8vw,34px);}
.quote--sm .quote__text{font-size:clamp(19px,2.2vw,28px);}
.quote__attr{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);
}

/* Three columns so the prev/dots/next group is centred on the section by
   itself and the play control hangs off its right edge, rather than the
   whole row being centred as one block (which would shift the arrows
   left by half the pause button's width). */
/* The outer columns reserve one button's width each so they stay symmetric
   even when space runs short. With plain 1fr the empty left column
   collapses while the right one holds the 44px button, pushing the nav off
   centre; here the dots wrap a row instead and the nav stays centred. */
.quotes__controls{
  display:grid;
  grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
  align-items:center;gap:22px;width:100%;
}
.quotes__nav{
  grid-column:2;
  display:flex;align-items:center;gap:22px;min-width:0;
}
.quotes__arrow{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:1px solid rgba(224,59,68,.4);
  color:var(--warm);font-size:16px;cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.quotes__arrow:hover{border-color:var(--redlt);color:#fff;}
/* A single-row track that scrolls the active dot to the centre, rather
   than wrapping — 14 dots would otherwise stack four rows deep on a
   phone. The box has a definite width so the nav never reflows, and the
   dots you cannot reach fade out at both edges instead of being clipped. */
.quotes__dots{
  width:clamp(140px, 34vw, 220px);
  flex:none;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.quotes__dots::-webkit-scrollbar{display:none;}
/* The 50% side padding is what lets the first and last dots reach the
   centre of the box rather than stopping against its edge. */
.quotes__track{
  display:flex;flex-wrap:nowrap;gap:10px;align-items:center;
  width:max-content;padding:4px 50%;
}
.quotes__dot{
  width:8px;height:8px;flex:none;padding:0;border-radius:50%;
  border:1px solid rgba(224,59,68,.55);background:transparent;cursor:pointer;
  transition:background .25s ease;
}
.quotes__dot[aria-current=true]{background:var(--redlt);}
/* WCAG 2.2.2 — auto-advancing content needs a control to stop it.
   Shares .quotes__arrow so it matches the arrows exactly at 44x44. */
.quotes__pause{grid-column:3;justify-self:start;}
.quotes__icon{width:13px;height:15px;fill:currentColor;display:block;}
/* aria-pressed is the single source of truth: pressed means paused, so the
   button offers Play. JS keeps the accessible name in step. */
.quotes__icon--play{display:none;}
.quotes__pause[aria-pressed=true] .quotes__icon--pause{display:none;}
.quotes__pause[aria-pressed=true] .quotes__icon--play{display:block;}

/* ---------- Book -------------------------------------------------- */
.book{
  padding:clamp(70px,10vw,140px) var(--gut);
  background:linear-gradient(180deg,#050303 0%,#150708 40%,#150708 60%,#050303 100%);
}
.book__inner{
  max-width:1060px;margin:0 auto;
  display:flex;gap:clamp(38px,6vw,80px);flex-wrap:wrap;align-items:center;
}
.book__cover{flex:0 1 360px;position:relative;display:flex;justify-content:center;}
.book__cover::before{
  content:'';position:absolute;width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(187,18,28,.32) 0%,rgba(5,3,3,0) 62%);
}
/* <picture> is a flex item here, so it needs an explicit size of its own —
   a percentage width on the inner <img> cannot resolve against a flex item
   whose own width is indefinite, and the cover collapses to zero. */
.book__cover picture{position:relative;display:block;width:100%;max-width:360px;}
.book__cover img{width:100%;box-shadow:0 40px 90px rgba(0,0,0,.8);}
.book__text{flex:1 1 380px;display:flex;flex-direction:column;gap:22px;}
.book__title{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(36px,5.6vw,72px);line-height:1;
  text-transform:uppercase;color:var(--bright);
}
.book__hook{font-size:clamp(32px,4.4vw,50px);line-height:.95;}
.book__blurb{
  display:flex;flex-direction:column;gap:1.2em;
  font-size:clamp(18px,1.8vw,20px);line-height:1.8;color:var(--warm);
  max-width:32em;text-wrap:pretty;
}
.book__tropes{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:2px 0 0;}
.book__tropes li{
  padding:9px 16px;border:1px solid rgba(224,59,68,.32);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#b8a294;
}
.book__buy{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding-top:6px;}
.book__buy a{
  padding:18px 36px;border:1px solid rgba(224,59,68,.7);color:#f2e2d4;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.book__buy a:hover{background:var(--red);border-color:var(--redlt);color:#fff;}
.book__formats{font-size:13px;line-height:1.6;color:var(--faint);max-width:18em;}

/* ---------- Trilogy ----------------------------------------------- */
.trilogy{padding:clamp(70px,10vw,140px) var(--gut);background:var(--bg);}
.trilogy__inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(34px,5vw,58px);
}
.trilogy__title{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(30px,4.4vw,56px);line-height:1;
  text-transform:uppercase;color:var(--bright);text-align:center;
}
.trilogy__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.4vw,28px);list-style:none;margin:0;padding:0;
}
.trilogy__card{
  display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,34px);
  background:linear-gradient(180deg,#120607 0%,#080404 100%);
  border:1px solid rgba(224,59,68,.22);transition:border-color .3s ease;
  height:100%;
}
.trilogy__card:hover{border-color:rgba(224,59,68,.55);}
.trilogy__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.trilogy__numeral{
  font-family:var(--fh);font-weight:400;
  font-size:clamp(26px,3vw,36px);line-height:1;color:rgba(224,59,68,.75);
}
.trilogy__status{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#5e4b40;}
.trilogy__card--out .trilogy__status{color:var(--redlt);}
.trilogy__name{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(22px,2.5vw,29px);line-height:1.14;
  text-transform:uppercase;color:#b8a294;
}
.trilogy__card--out .trilogy__name{color:var(--bright);}
.trilogy__note{font-size:16px;line-height:1.75;color:#96806f;text-wrap:pretty;}

/* ---------- Author ------------------------------------------------ */
.author{
  padding:clamp(70px,10vw,140px) var(--gut);
  background:linear-gradient(180deg,#050303 0%,#100506 100%);
}
.author__inner{
  max-width:960px;margin:0 auto;
  display:flex;gap:clamp(34px,6vw,70px);flex-wrap:wrap;align-items:center;
}
.author__portrait{flex:0 1 280px;}
.author__portrait picture{display:block;width:100%;}
/* The prototype applied filter:contrast(1.08) brightness(.9) here, tuned for
   a colour original. The portrait is now already high-contrast black and
   white, where that filter crushed 18.4% of the frame to pure black (up
   from 2.2%) and merged the curls into a single mass. Dropped. */
.author__portrait img{
  width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.author__text{flex:1 1 360px;display:flex;flex-direction:column;gap:18px;}
.author__name{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(30px,4.2vw,48px);line-height:1.06;
  text-transform:uppercase;color:var(--bright);
}
.author__bio{
  font-size:clamp(17px,1.7vw,19px);line-height:1.85;color:var(--warm);
  max-width:32em;text-wrap:pretty;
}

/* ---------- Closing ----------------------------------------------- */
.closing{
  position:relative;overflow:hidden;
  padding:clamp(70px,11vw,150px) var(--gut);
  background:radial-gradient(110% 95% at 50% 100%,#6d1219 0%,#2c090d 30%,#100506 62%,#050303 100%);
}
.closing__inner{
  position:relative;max-width:600px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;
}
.closing__heading{
  font-family:var(--fh);font-weight:900;
  font-size:clamp(34px,6vw,72px);line-height:1;
  text-transform:uppercase;color:var(--bright);
  text-shadow:0 0 60px rgba(187,18,28,.45);
}
.closing__body{font-size:clamp(18px,1.9vw,21px);line-height:1.75;color:#d5c3b3;text-wrap:pretty;}

/* ---------- Footer ------------------------------------------------ */
.footer{
  padding:clamp(40px,6vw,70px) var(--gut);background:var(--bg);
  border-top:1px solid rgba(224,59,68,.2);
  display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;
}
.footer__name{
  font-family:var(--fh);font-weight:400;font-size:17px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
}
/* Half the links, the mark, then the other half. Equal-fraction outer
   columns keep the mark dead centre on the footer regardless of how much
   text sits either side; each half wraps inwards on narrow screens rather
   than pushing the mark off centre. */
.footer__nav{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(14px,3vw,26px);
  width:100%;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
}
.footer__group{
  display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,26px);
  align-items:center;
}
.footer__group--start{justify-content:flex-end;}
.footer__group--end{justify-content:flex-start;}
.footer__nav a{color:var(--faint);}
.footer__nav a:hover{color:var(--ink);}
.footer__mark{
  flex:none;width:13px;aspect-ratio:1;color:var(--redlt);
}
.footer__legal{font-size:11px;letter-spacing:.14em;color:var(--faint);}

/* ---------- Reduced motion ---------------------------------------- */
/* Honour the OS setting: no reveal animation, no smooth scroll, no
   crossfade. The carousel's auto-advance is disabled in JS to match. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none;}
}