/* ============================================================================
   THE HOPKINS INSTITUTE — SHARED COMPONENT LAYER
   The parts of the system that are SETTLED in 02-creative-direction.md and are
   therefore NOT what the three concepts are testing: the accessible disclosure
   nav, the square gold Give button, card anatomy, article typography, credit
   typography, the label strip, the pillars band, the footer.

   What each concept overrides in its own <style>: hero logo treatment, dark-band
   deployment, carousel transition character, article long-form setting, band
   sequence and grid personality.
   ========================================================================= */

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip, not hidden — `hidden` makes the element a scroll container,
   which breaks position:sticky on descendants. `clip` does not. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0}
img,picture,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}

body{
  background:var(--newsprint);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.65;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* ---- primitives -------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.band{padding-block:var(--band-light)}
.band--dark{padding-block:var(--band-dark);background:var(--plum);color:var(--newsprint)}
.band--deep{padding-block:var(--band-dark);background:var(--plum-deep);color:var(--newsprint)}
.band--alt{background:var(--newsprint-2)}

.nib-rule{height:3px;background:var(--nib);border:0;margin:0}
.nib-rule--stub{width:96px}
.nib-rule--onDark{background:var(--nib-rev)}
.nib-edge{position:relative}
.nib-edge::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--nib)}

.eyebrow{
  font-family:var(--label);font-size:var(--fs-eyebrow);font-weight:400;
  font-variation-settings:"wdth" 112;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
  color:var(--ochre);
}
.eyebrow--gold{color:var(--gold)}
.eyebrow--grey{color:var(--warm-grey)}

.wide-label{
  font-family:var(--label);font-size:var(--fs-wide);font-weight:200;
  font-variation-settings:"wdth" 125;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.3;
}

.chip{
  display:inline-block;background:var(--gold);color:var(--plum);
  font-family:var(--label);font-size:var(--fs-chip);font-weight:600;
  font-variation-settings:"wdth" 106;
  letter-spacing:.10em;text-transform:uppercase;line-height:1.2;
  padding:6px 12px;border-radius:2px;
}
.chip--outline{background:none;color:var(--ochre);border:1px solid rgba(138,90,18,.5)}

.credit{
  font-family:var(--label);font-size:var(--fs-credit);font-weight:400;
  letter-spacing:.04em;line-height:1.4;color:var(--warm-grey);
  margin-top:6px;text-align:right;
}
/* 11px text must clear 4.5:1 — lavender on plum is 6.23:1, a tinted lavender is not */
.credit--onDark{color:var(--lavender)}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--label);font-size:var(--fs-btn);font-weight:600;
  font-variation-settings:"wdth" 100;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  padding:15px 24px;border-radius:0;cursor:pointer;
  border:2px solid transparent;
  transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.btn--give{background:var(--gold);color:var(--plum);border-color:var(--gold)}
.btn--give:hover{background:transparent;color:var(--gold)}
.band--dark .btn--give:hover,.band--deep .btn--give:hover{color:var(--gold)}
.btn--ghost-gold{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn--ghost-gold:hover{background:var(--gold);color:var(--plum)}
.btn--ghost-plum{background:transparent;color:var(--plum);border-color:var(--plum)}
.btn--ghost-plum:hover{background:var(--plum);color:var(--newsprint)}
.btn--lg{font-size:1.0625rem;padding:18px 30px}

.textlink{
  font-family:var(--label);font-size:1rem;font-weight:600;
  color:var(--ochre);padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.textlink:hover{border-bottom-color:var(--ochre)}
.textlink--gold{color:var(--gold);border-bottom:2px solid transparent}
.textlink--gold:hover{color:var(--gold-lift);border-image:var(--nib) 1;border-bottom-color:var(--gold)}

/* ---- focus (never removed) --------------------------------------------- */
:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.band--dark :focus-visible,.band--deep :focus-visible,
.site-head :focus-visible,.carousel :focus-visible{outline-color:var(--gold)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--plum);padding:12px 20px;
  font-family:var(--label);font-size:var(--fs-btn);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ============================ HEADER + NAV ============================== */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--plum);color:var(--newsprint);
  border-bottom:1px solid rgba(203,174,208,.16);
}
.site-head__inner{
  height:68px;display:flex;align-items:center;gap:var(--s5);
  transition:height 200ms var(--ease);
}
.site-head__logo img{height:38px;width:auto;transition:height 200ms var(--ease)}
.site-head__logo{margin-right:auto;display:block}

@media (min-width:1024px){
  .site-head__inner{height:88px}
  .site-head__logo img{height:52px}
  .site-head[data-compact="true"] .site-head__inner{height:64px}
  .site-head[data-compact="true"] .site-head__logo img{height:40px}
}

.nav{display:none}
@media (min-width:1024px){
  .nav{display:block}
  .nav__list{display:flex;align-items:center;gap:var(--s5)}
  .nav__item{position:relative}
  .nav__link{
    font-family:var(--label);font-size:var(--fs-nav);font-weight:500;
    font-variation-settings:"wdth" 100;letter-spacing:.005em;
    color:var(--newsprint);padding:6px 0;display:inline-block;position:relative;
  }
  .nav__link::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:var(--nib);transform:scaleX(0);transform-origin:left;
    transition:transform var(--t-fast) var(--ease);
  }
  .nav__link:hover::after,.nav__item[data-open="true"] .nav__link::after,
  .nav__link[aria-current="page"]::after{transform:scaleX(1)}
  .nav__group{display:flex;align-items:center;gap:6px}
  .nav__caret{
    background:none;border:0;padding:6px 2px;cursor:pointer;line-height:0;
    color:var(--lavender);
  }
  .nav__caret svg{width:11px;height:7px;transition:transform 200ms var(--ease)}
  .nav__item[data-open="true"] .nav__caret svg{transform:rotate(180deg)}
  .nav__panel{
    position:absolute;top:calc(100% + 8px);left:-16px;width:420px;
    background:var(--plum-deep);
    border:1px solid rgba(203,174,208,.22);border-radius:0;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    padding:20px 24px 24px;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity 160ms ease,transform 160ms var(--ease),visibility 160ms;
  }
  .nav__panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nib)}
  .nav__item[data-open="true"] .nav__panel{opacity:1;visibility:visible;transform:translateY(0);transition-duration:160ms}
  .nav__item[data-open="false"] .nav__panel{transition-duration:120ms}
  .nav__panel li+li{border-top:1px solid rgba(203,174,208,.14)}
  .nav__panel a{
    display:block;min-height:48px;padding:11px 0;
    font-family:var(--label);font-size:var(--fs-nav);font-weight:500;color:var(--newsprint);
    transition:color var(--t-fast) ease;
  }
  .nav__panel a:hover{color:var(--gold-lift)}
  .nav__panel a span{
    display:block;font-size:var(--fs-meta);font-weight:400;color:var(--lavender);
    letter-spacing:.01em;margin-top:2px;
  }
  .nav__panel a[data-give]{color:var(--gold)}
  .nav__panel a[data-give]:hover{color:var(--gold-lift)}
}

.head__give{display:none}
@media (min-width:1024px){.head__give{display:inline-flex}}

/* mobile trigger + sheet */
.menu-btn{
  display:inline-flex;align-items:center;gap:9px;margin-left:auto;
  background:none;border:0;cursor:pointer;color:var(--newsprint);
  font-family:var(--label);font-size:var(--fs-eyebrow);font-weight:600;
  font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 2px;
}
.menu-btn__glyph{display:block;width:22px}
.menu-btn__glyph i{display:block;height:2px;background:var(--newsprint);margin:5px 0;transition:transform 200ms var(--ease)}
.menu-btn[aria-expanded="true"] .menu-btn__glyph i:first-child{transform:translateY(3.5px) rotate(13deg)}
.menu-btn[aria-expanded="true"] .menu-btn__glyph i:last-child{transform:translateY(-3.5px) rotate(-13deg)}
@media (min-width:1024px){.menu-btn{display:none}}

.sheet{
  position:fixed;inset:68px 0 0 0;z-index:99;
  background:var(--plum-deep);color:var(--newsprint);
  padding:var(--s5) var(--pad-x) var(--s7);
  overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--s2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 200ms ease,transform 200ms var(--ease),visibility 200ms;
}
.sheet[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:1024px){.sheet{display:none}}
.sheet a,.sheet summary{
  font-family:var(--label);font-size:1.1875rem;font-weight:500;color:var(--newsprint);
  padding:14px 0;display:block;border-bottom:1px solid rgba(203,174,208,.16);
}
.sheet summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary::after{content:"+";color:var(--gold);font-size:1.375rem;line-height:1}
.sheet details[open] summary::after{content:"–"}
.sheet details a{padding-left:var(--s4);font-size:1.0625rem;border-bottom-color:rgba(203,174,208,.1)}
.sheet a[data-give]{color:var(--gold)}
.sheet .btn{margin-top:var(--s5);width:100%}

/* ============================== CAROUSEL =============================== */
/* Shell only. The transition CHARACTER is each concept's own decision —
   that is one of the three things the concepts exist to resolve.
   --slide-h is the viewport height LEFT OVER after the sticky header, so the
   header + first slide together fill exactly one viewport and nothing of the
   hero sits below the fold. */
:root{--slide-h:max(520px, calc(100svh - var(--chrome, 88px)))}
.carousel{position:relative;background:var(--plum-deep)}
.carousel__viewport{position:relative;overflow:hidden}
/* < 900px : no stacking, no text over photo. Each slide flows naturally and
   splits into media + solid dark caption panel (Bunche's mobile lesson). */
.carousel__slide{display:none}
.carousel__slide[data-active="true"]{display:block}
@media (min-width:900px){
  .carousel__viewport{height:var(--slide-h)}
  .carousel__slide{
    display:block;position:absolute;inset:0;
    opacity:0;visibility:hidden;pointer-events:none;
  }
  .carousel__slide[data-active="true"]{opacity:1;visibility:visible;pointer-events:auto}
}
.slide__media{position:absolute;inset:0;overflow:hidden}
.slide__media img{width:100%;height:100%;object-fit:cover}
.slide__media::after{content:"";position:absolute;inset:0;background:var(--photo-scrim)}
.slide__media::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--photo-scrim-x);
}
.slide__media img{position:relative}
.slide__media::after{z-index:2}
.slide__body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}

.carousel__controls{background:var(--plum-deep)}
@media (min-width:900px){
  .carousel__controls{position:absolute;left:0;right:0;bottom:0;z-index:6;background:none}
}
.carousel__ui{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:var(--s4);
  padding-block:var(--s5);
}
@media (min-width:900px){.carousel__ui{padding-block:var(--s7)}}
.carousel__arrow{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  background:rgba(41,19,50,.35);border:1.5px solid rgba(247,243,234,.65);
  color:var(--newsprint);display:grid;place-items:center;cursor:pointer;
  transition:background var(--t-fast) ease,transform var(--t-fast) var(--ease);
}
.carousel__arrow:hover{background:rgba(247,243,234,.16)}
.carousel__arrow:active{transform:scale(.97)}
.carousel__arrow svg{width:12px;height:14px}
.carousel__count{
  font-family:var(--label);font-size:var(--fs-meta);font-weight:400;
  font-variation-settings:"wdth" 112;letter-spacing:.14em;
  color:var(--newsprint);
}
.carousel__ticks{display:flex;gap:8px;margin-left:2px}
.carousel__tick{
  width:24px;height:2px;background:rgba(247,243,234,.34);border:0;padding:0;cursor:pointer;
  transition:background var(--t-fast) ease;
}
.carousel__tick[aria-current="true"]{background:var(--gold)}
.carousel__tick:hover{background:rgba(247,243,234,.7)}
.carousel__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* slide copy (shared type; each concept places it) */
.slide__tagline{
  font-family:var(--display);font-weight:700;font-size:var(--fs-tagline);
  line-height:1.06;letter-spacing:-.015em;color:var(--newsprint);
  text-wrap:balance;
}
.slide__legacy{
  font-family:var(--display);font-weight:700;font-size:var(--fs-legacy);
  line-height:1.18;letter-spacing:-.01em;color:var(--newsprint);
  text-wrap:pretty;
}
.slide__legacy em{font-style:italic}

/* Slide 2 quote card */
.quotecard{
  background:var(--plum);color:var(--newsprint);
  padding:var(--s7) var(--s5);position:relative;overflow:hidden;
}
@media (min-width:768px){.quotecard{padding:var(--s7)}}
.quotecard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--nib);z-index:2}
.quotecard__mark{
  position:absolute;top:6px;left:14px;z-index:0;
  font-family:var(--display);font-weight:700;font-size:8.25rem;line-height:1;
  color:rgba(224,174,60,.2);pointer-events:none;user-select:none;
}
.quotecard__q{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:400;font-size:var(--fs-quote);
  line-height:1.32;letter-spacing:-.005em;color:var(--newsprint);
  text-wrap:pretty;
}
.quotecard__by{
  margin-top:var(--s5);
  font-family:var(--label);font-size:.9375rem;font-weight:600;color:var(--gold);
}
.quotecard__role{
  font-family:var(--label);font-size:.875rem;font-weight:400;color:var(--lavender);
  margin-top:2px;
}
.quotecard__cta{margin-top:var(--s6)}

/* ============================== ARTICLE ================================ */
.article__h1{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h1);
  line-height:1.10;letter-spacing:-.012em;color:var(--plum);
  max-width:22ch;text-wrap:balance;
}
.article__body{max-width:640px}
.article__body p{margin-bottom:var(--s5);text-wrap:pretty}
.article__body p:last-child{margin-bottom:0}
.article__body em{font-style:italic}
.dateline{
  font-family:var(--label);font-size:var(--fs-eyebrow);font-weight:600;
  font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ochre);
}
.pullquote{
  margin:var(--s7) 0;padding-left:var(--s5);
  border-left:3px solid var(--gold);
}
.pullquote p{
  font-family:var(--display);font-weight:400;font-size:var(--fs-quote);
  line-height:1.35;letter-spacing:-.005em;color:var(--plum);margin:0;text-wrap:pretty;
}
.pullquote cite{
  display:block;margin-top:var(--s3);font-style:normal;
  font-family:var(--label);font-size:.9375rem;font-weight:600;color:var(--ochre);
}
.plate{background:var(--newsprint-2);padding:var(--s6)}
.plate img{width:100%;aspect-ratio:16/9;object-fit:cover}
.plate figcaption{
  margin-top:var(--s3);font-family:var(--body);font-size:var(--fs-excerpt);
  color:var(--warm-grey);line-height:1.5;
}
.article__rule{height:2px;background:var(--plum);border:0;margin:0}

/* ============================ CARD ANATOMY ============================= */
/* Brennan's finding: featured differentiation is TYPOGRAPHIC, not decorative. */
.card{display:block;position:relative}
.card__media{overflow:hidden;background:var(--newsprint-2)}
.card__media img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform var(--t-mid) var(--ease)}
.card:hover .card__media img{transform:scale(1.02)}
.card__cat{
  font-family:var(--label);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.02em;color:var(--ink);
}
.card__cat--link{color:var(--ochre)}
.card__h{
  font-family:var(--label);font-size:var(--fs-card);font-weight:600;
  font-variation-settings:"wdth" 100;line-height:1.35;letter-spacing:-.005em;
  color:var(--ink);text-wrap:pretty;
  border-bottom:2px solid transparent;padding-bottom:1px;
  transition:color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.card:hover .card__h{color:var(--ochre);border-bottom-color:var(--ochre)}
.card__meta{
  display:flex;align-items:center;gap:8px;
  font-family:var(--label);font-size:var(--fs-meta);font-weight:400;
  letter-spacing:.02em;color:var(--warm-grey);line-height:1.6;
}
.card__meta i{width:1px;height:11px;background:var(--purple);display:block}

/* ---- placeholder plate --------------------------------------------------
   The nine grid cards are dummy content, so they get drawn placeholder plates
   rather than nine crops of the one supplied photograph, which read as an
   error. Each plate is CSS only: a nib-gradient wash, faint column rules
   (newsprint furniture), the nib mark, and a legible "Image to come" label —
   so the placeholder status is visible in the design itself, not only in the
   tooltip. Swap `.card__ph` for a <picture> when the real art arrives. */
.card__ph{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(var(--ph-a,118deg),
    #3A1D46 0%, #5A3168 54%, #7C5C8E 100%);
}
/* newsprint furniture: column rules, so the plate reads as a page, not a box */
.card__ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(247,243,234,.10) 0 1px, transparent 1px var(--ph-c,56px));
}
.card__ph::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nib-rev);
}
.card__ph img{
  position:relative;z-index:1;width:30%;max-width:112px;min-width:52px;
  opacity:.30;
  transition:transform var(--t-mid) var(--ease);
}
.card:hover .card__ph img{transform:scale(1.05)}
.card__ph b{
  position:absolute;z-index:2;left:14px;bottom:12px;
  font-family:var(--label);font-size:var(--fs-credit);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(203,174,208,.82);
}

/* lead card: bigger image + SERIF headline + an excerpt. nothing else. */
.card--lead .card__media{margin-bottom:20px}
.card--lead .card__cat{margin-bottom:8px;display:block}
.card--lead .card__h{
  font-family:var(--display);font-weight:700;font-size:var(--fs-lead-card);
  line-height:1.15;letter-spacing:-.008em;color:var(--plum);
}
.card--lead:hover .card__h{color:var(--ochre)}
.card--lead .card__excerpt{
  margin-top:8px;font-size:var(--fs-excerpt);line-height:1.5;color:var(--ink);
  max-width:46ch;text-wrap:pretty;
}
/* side card: SANS headline, category BELOW it in ochre, no excerpt, no date */
.card--side .card__media{margin-bottom:12px}
.card--side .card__body{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px}
/* grid card: sans headline + category · date meta row */
.card--grid .card__media{margin-bottom:12px}
.card--grid .card__h{font-size:var(--fs-card-sm);display:block;margin-bottom:8px}

/* ---- label strip (Brennan's .now-trending, restated) ------------------- */
.labelstrip{border-top:2px solid var(--plum);padding-top:var(--s4)}
.labelstrip__row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s5);
  justify-content:space-between;min-height:48px;
}
.labelstrip__cats{display:flex;flex-wrap:wrap;gap:var(--s5)}

/* ---- pillars ----------------------------------------------------------- */
.pillars{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:600px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar img{width:28px;height:28px;margin-bottom:var(--s3)}
.pillar h3{
  font-family:var(--label);font-size:var(--fs-nav);font-weight:600;
  color:var(--newsprint);letter-spacing:.005em;margin-bottom:6px;
}
.pillar p{font-size:1rem;line-height:1.55;color:var(--lavender);text-wrap:pretty}

/* ---- footer ----------------------------------------------------------- */
.foot{background:var(--plum-deep);color:var(--newsprint);padding:var(--s8) 0 var(--s6)}
.foot__grid{display:grid;gap:var(--s7) var(--s6);grid-template-columns:1fr}
@media (min-width:768px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.foot__grid{grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s6)}}
.foot__logo{width:180px;margin-bottom:var(--s5)}
.foot__mission{font-size:1.0625rem;line-height:1.6;color:var(--lavender);max-width:40ch;text-wrap:pretty}
.foot h2{
  font-family:var(--label);font-size:var(--fs-eyebrow);font-weight:600;
  font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s4);
}
.foot__nav a{
  font-family:var(--label);font-size:1rem;font-weight:400;color:var(--newsprint);
  display:inline-block;padding:7px 0;
  border-bottom:1px solid transparent;transition:border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.foot__nav a:hover{color:var(--gold-lift);border-bottom-color:var(--gold-lift)}
.foot__contact{font-size:1rem;line-height:1.7;color:var(--lavender)}
.foot__slot{
  display:inline-block;color:var(--lavender);
  font-family:var(--label);font-size:.875rem;letter-spacing:.02em;
  border-bottom:1px dashed rgba(203,174,208,.45);
}
.foot__legal{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid rgba(203,174,208,.18);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  font-family:var(--label);font-size:var(--fs-meta);font-weight:400;
  color:var(--lavender);
}

/* ---- scroll reveal — ONE section only, Brennan's restraint ------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal][data-shown="true"]{
  opacity:1;transform:none;
  transition:opacity var(--t-slow) ease,transform var(--t-slow) var(--ease);
}

/* ---- reduced motion (WCAG 2.3.3) -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}