/* =========================================================================
   Angelina Dellaneve — personal site
   Editorial horizontal "chapter" scroll. Zero dependencies.
   ---------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Type utilities
   4. Persistent chrome (mark, menu, rail, progress)
   5. Track & chapters
   6. Chapter styles
   7. Reveal motion
   8. Responsive
   9. Reduced motion, print
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Palette — 90% cream/ink, 8% stone, 2% accent used only as punctuation. */
  --cream:  #F2E9DE;
  --stone:  #D8C9C0;
  --ink:    #17140F;
  --accent: #B2543C;          /* clay terracotta; swap for #C08A82 for dusty rose */

  /* Body greys. --muted clears WCAG AA (4.5:1) on BOTH cream and stone.
     --muted-soft is for large decorative text only (>=24px, 3:1). */
  --muted:        #56514A;
  --muted-soft:   #6E6A63;
  --muted-on-ink: #B9B2A6;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:    clamp(1.5rem, 4.5vw, 5rem);
  --pad-t:  clamp(5rem, 12vh, 8rem);
  --pad-b:  clamp(3.5rem, 9vh, 6rem);
  --rail-w: 3.5rem;

  --ease: cubic-bezier(.22,.75,.25,1);

  /* Per-chapter contextual colours, overridden by the .bg-* classes. */
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --page-bg: var(--cream);
}

/* Contextual colour contexts ------------------------------------- */
.bg-cream{ background:var(--cream); --fg:var(--ink);   --fg-muted:var(--muted); }
.bg-stone{ background:var(--stone); --fg:var(--ink);   --fg-muted:var(--muted); }
.bg-ink  { background:var(--ink);   --fg:var(--cream); --fg-muted:var(--muted-on-ink); }

/* ----------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  background:var(--page-bg);
  transition:background-color .6s var(--ease);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow:hidden;                 /* the track owns all scrolling */
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* Focus — accent ring clears 3:1 against cream, stone and ink alike. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.track:focus{ outline:none; }

.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;
}
.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  transform:translateY(-160%);
  padding:.7rem 1.1rem; border-radius:999px;
  background:var(--ink); color:var(--cream);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .25s var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* --------------------------------------------------------- 3. TYPE UTILITIES */
.eyebrow{
  font-size:clamp(.62rem,.72vw,.72rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.display{
  font-family:var(--serif);
  font-weight:350;
  font-optical-sizing:auto;
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--fg);
  text-wrap:balance;
}
/* One italic serif word per headline carries the emphasis. */
.display em{
  font-style:italic;
  font-weight:400;
}
.body{
  font-size:clamp(.95rem,1.05vw,1.0625rem);
  line-height:1.6;
  color:var(--fg-muted);
  max-width:46ch;
}
.link{
  position:relative;
  color:var(--fg);
  padding-bottom:.12em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .35s var(--ease);
}
.link:hover,.link:focus-visible{ background-size:100% 1px; }

/* Pill buttons ---------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.62em 1.15em;
  border:1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius:999px;
  font-size:.72rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover,.pill:focus-visible{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.pill__arrow{ transition:transform .3s var(--ease); }
.pill:hover .pill__arrow{ transform:translateX(3px); }
.pill--solid{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.pill--solid:hover,.pill--solid:focus-visible{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pill--solid:hover .pill__arrow{ transform:translateY(3px); }

/* ------------------------------------------------------ 4. PERSISTENT CHROME */

/* The AD mark. Upside down by default — it rights itself on hover/focus
   and stays righted once the contact chapter is reached (the closing beat). */
.mark{
  position:fixed; z-index:60;
  top:clamp(1.1rem,2.6vh,1.9rem); left:var(--pad);
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  font-weight:500; letter-spacing:.04em;
  line-height:1;
  color:#fff;
  mix-blend-mode:difference;      /* auto-inverts over cream, stone and ink */
  pointer-events:auto;
}
.mark__glyph{
  display:block;
  transform:rotate(180deg);
  transition:transform .8s var(--ease);
  transform-origin:50% 50%;
}
.mark:hover .mark__glyph,
.mark:focus-visible .mark__glyph,
.mark.is-righted .mark__glyph{ transform:rotate(0deg); }
.mark:focus-visible{ outline-color:#fff; }

/* Menu button, opposite corner */
.menu-btn{
  position:fixed; z-index:80;
  top:clamp(.9rem,2.2vh,1.5rem); right:var(--pad);
  padding:.72em 1.35em;
  border-radius:999px;
  background:var(--ink); color:var(--cream);
  font-size:.7rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  transition:background-color .3s var(--ease);
}
.menu-btn:hover{ background:var(--accent); }
.menu-btn[aria-expanded="true"]{ background:var(--ink); }

/* Full-screen nav takeover */
.menu{
  position:fixed; inset:0; z-index:70;
  background:var(--stone);
  --fg:var(--ink); --fg-muted:var(--muted);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.menu[hidden]{ display:block; }        /* animate instead of hard-hiding */
.menu.is-open{ opacity:1; visibility:visible; }
.menu__inner{
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.5rem,4vh,2.75rem);
  padding:var(--pad-t) var(--pad) var(--pad-b);
}
.menu__eyebrow{ color:var(--muted); }
.menu__list{ display:flex; flex-direction:column; gap:clamp(.1rem,1vh,.6rem); }
.menu__list li{
  display:flex; align-items:baseline; gap:clamp(.75rem,2vw,1.75rem);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open .menu__list li{ opacity:1; transform:none; }
.menu.is-open .menu__list li:nth-child(1){ transition-delay:.08s; }
.menu.is-open .menu__list li:nth-child(2){ transition-delay:.13s; }
.menu.is-open .menu__list li:nth-child(3){ transition-delay:.18s; }
.menu.is-open .menu__list li:nth-child(4){ transition-delay:.23s; }
.menu.is-open .menu__list li:nth-child(5){ transition-delay:.28s; }
.menu.is-open .menu__list li:nth-child(6){ transition-delay:.33s; }
.menu__num{
  font-size:.68rem; font-weight:500; letter-spacing:.12em;
  color:var(--muted);
  min-width:2ch;
}
.menu__list a{
  font-family:var(--serif);
  font-size:clamp(2.2rem,7vw,4.75rem);
  font-weight:350; line-height:1.02; letter-spacing:-.02em;
  transition:color .3s var(--ease), font-style .01s;
}
.menu__list a:hover,.menu__list a:focus-visible{ font-style:italic; color:var(--accent); }
.menu__foot{
  font-size:.8rem; color:var(--muted);
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.menu__foot a:hover{ color:var(--accent); }

/* Rotated quick-jump strip, right edge */
.rail{
  position:fixed; z-index:55;
  top:0; right:0; bottom:0;
  width:var(--rail-w);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.rail ul{
  display:flex; flex-direction:column-reverse; align-items:center;
  gap:clamp(1.25rem,3.5vh,2.25rem);
  writing-mode:vertical-rl;
  transform:rotate(180deg);        /* text reads bottom-to-top */
  pointer-events:auto;
}
.rail a{
  display:flex; align-items:center; gap:.6rem;
  font-size:.63rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:#fff; mix-blend-mode:difference;
  transition:opacity .3s var(--ease);
  opacity:.62;
}
.rail a:hover,.rail a:focus-visible,.rail a.is-active{ opacity:1; }
.rail__dot{
  width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  transform:scale(.5);
}
.rail a.is-active .rail__dot{ opacity:1; transform:scale(1); }

/* Horizontal read-position bar */
.progress{
  position:fixed; z-index:60;
  left:0; right:0; bottom:0; height:3px;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.progress__fill{
  display:block; height:100%; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .12s linear;
}

/* ------------------------------------------------------ 5. TRACK & CHAPTERS */
.track{
  display:flex;
  align-items:stretch;
  height:100vh;
  height:100dvh;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:none;         /* kill the browser back-swipe gesture */
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.track::-webkit-scrollbar{ display:none; }
/* Snapping is suspended while the inertia scroller is running, then
   re-enabled so chapters settle into place. */
.track.is-wheeling{ scroll-snap-type:none; }

.chapter{
  flex:0 0 100vw;
  min-width:0;                          /* stop wide content (the marquee)
                                           inflating the chapter past 100vw */
  position:relative;
  height:100%;
  scroll-snap-align:start;
  transition:background-color .5s var(--ease);
}
/* The experience chapter is deliberately wider than the viewport. */
.chapter--wide{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  scroll-snap-align:none;
}
.chapter--footer{ flex:0 0 clamp(20rem,42vw,34rem); }

.chapter__inner{
  height:100%;
  min-width:0;
  display:flex; flex-direction:column;
  padding:var(--pad-t) calc(var(--pad) + var(--rail-w)) var(--pad-b) var(--pad);
  overflow-y:auto;                      /* safety valve on short viewports */
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.chapter__inner::-webkit-scrollbar{ display:none; }

/* --------------------------------------------------------- 6. CHAPTER STYLES */

/* 01 HERO ---------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  grid-template-rows:1fr auto;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
}
.hero__type{ grid-column:1; align-self:center; }
.lockup{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,10.5vw,8rem);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.lockup__line{ display:block; width:max-content; max-width:100%; }
/* THE signature: the surname, upended beneath the first name. */
.lockup__line--flip{
  transform:rotate(180deg);
  transform-origin:50% 50%;
  color:var(--ink);
}
.hero__tagline{
  margin-top:clamp(1.25rem,3vh,2.25rem);
  font-size:clamp(.66rem,.85vw,.78rem);
  letter-spacing:.2em;
  color:var(--ink);
}
.hero__place{
  margin-top:.55rem;
  font-size:.82rem; color:var(--muted);
}
.hero__figure{
  grid-column:2; grid-row:1;
  align-self:center;
  height:min(62vh,34rem);
  width:100%;
  overflow:hidden;
}
.hero__figure img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.9);
}
.scroll-cue{
  grid-column:1 / -1; grid-row:2;
  display:flex; align-items:center; gap:.7rem;
  font-size:.63rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.scroll-cue__arrow{
  width:2.75rem; height:1px; background:var(--accent);
  position:relative;
  animation:nudge 2.4s var(--ease) infinite;
}
.scroll-cue__arrow::after{
  content:""; position:absolute; right:0; top:-2px;
  width:5px; height:5px; border-top:1px solid var(--accent); border-right:1px solid var(--accent);
  transform:rotate(45deg);
}
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(7px); } }

/* 02 MANIFESTO ----------------------------------------------------- */
.manifesto{ justify-content:center; gap:clamp(1.5rem,4vh,2.5rem); }
.manifesto__title{
  font-size:clamp(2.4rem,6.4vw,6rem);
  text-transform:uppercase;
  max-width:20ch;
}
.manifesto__body{ max-width:42ch; }

/* 03 EXPERIENCE ---------------------------------------------------- */
.exp-intro{
  position:relative;
  flex:0 0 min(88vw,34rem);
  justify-content:center;
  gap:clamp(1rem,2.5vh,1.75rem);
  scroll-snap-align:start;
  padding-right:var(--pad);
}
.exp-intro__title{
  font-size:clamp(2.2rem,4.6vw,4rem);
  text-transform:uppercase;
}
/* Pinned to the foot of the panel so the copy above stays optically centred. */
.exp-intro__hint{
  position:absolute;
  left:var(--pad); bottom:var(--pad-b);
  color:var(--muted);
}

.exp-list{
  display:flex; align-items:center;
  gap:clamp(1rem,1.8vw,1.75rem);
  padding:var(--pad-t) calc(var(--pad) + var(--rail-w)) var(--pad-b) 0;
}
.card{
  flex:0 0 clamp(17rem,26vw,23rem);
  height:min(70vh,36rem);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,2vw,2rem);
  scroll-snap-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card--cream{ background:var(--cream); }
.card--stone{ background:#E3D7CF; }        /* half-step lighter than the chapter */
.card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -28px rgba(23,20,15,.5); }
.card__date{
  font-size:.65rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.card__employer{
  margin-top:.9rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.2vw,2.15rem);
  line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase;
}
.card__role{
  margin-top:.7rem;
  font-size:.78rem; line-height:1.45; color:var(--muted);
}
.card__standout{
  margin-top:auto; padding-top:1.25rem;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.95rem,1.15vw,1.1rem);
  line-height:1.35; color:var(--ink);
}
.card__detail{
  max-height:0; overflow:hidden;
  transition:max-height .55s var(--ease), opacity .35s var(--ease), margin .55s var(--ease);
  opacity:0;
}
.card.is-open{ height:min(86vh,44rem); }
.card.is-open .card__detail{
  max-height:none; opacity:1;
  flex:0 1 auto; min-height:0;
  overflow-y:auto;                     /* still scrolls on very short screens */
  margin-top:1rem;
  overscroll-behavior:contain;
}
.card__detail ul{
  display:flex; flex-direction:column; gap:.55rem;
  padding-top:1rem;
  border-top:1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
.card__detail li{
  position:relative; padding-left:1rem;
  font-size:.78rem; line-height:1.45; color:var(--muted);
}
.card__detail li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
.card__toggle{ align-self:flex-start; margin-top:1.25rem; }
.card.is-open .pill__arrow{ transform:rotate(90deg); }

/* 04 PILLARS ------------------------------------------------------- */
.pillars{ justify-content:center; gap:clamp(1.75rem,5vh,3rem); }
.pillars__list{
  display:flex; flex-direction:column; gap:clamp(1.25rem,3.5vh,2.5rem);
}
.pillars__list li{
  display:grid;
  grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.1fr);
  align-items:baseline;
  gap:clamp(.75rem,2vw,2.5rem);
  padding-bottom:clamp(1rem,2.5vh,1.75rem);
  border-bottom:1px solid color-mix(in srgb, var(--cream) 18%, transparent);
}
.pillars__list li:last-child{ border-bottom:0; }
.pillars__num{
  font-size:.68rem; font-weight:500; letter-spacing:.14em;
  color:var(--muted-on-ink);
}
.pillars__word{
  font-size:clamp(2rem,5vw,4.5rem);
  text-transform:uppercase;
  font-family:var(--serif); font-weight:300; line-height:.95; letter-spacing:-.02em;
  color:var(--cream);
}
.pillars__list li:hover .pillars__word{ font-style:italic; }
.pillars__list .body{ max-width:34ch; }

/* 05 IMPACT -------------------------------------------------------- */
.impact{ justify-content:center; gap:clamp(1.75rem,4.5vh,3rem); }
.impact__stats{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(1.75rem,5vw,5rem);
}
.stat{ flex:1 1 15rem; max-width:26rem; }
.stat__rule{
  display:block; width:3rem; height:2px;
  background:var(--accent); margin-bottom:1.1rem;
}
.stat__figure{
  font-size:clamp(3rem,8vw,7rem);
  font-weight:300;
  font-family:var(--serif);
  line-height:.9; letter-spacing:-.035em;
}
/* The year range is two figures wide; hold it on one line at a smaller size
   rather than letting it break mid-range. */
.stat--range .stat__figure{
  font-size:clamp(2.1rem,5.2vw,4.75rem);
  white-space:nowrap;
}
.stat__dash{ font-style:italic; color:var(--accent); }
.stat__label{
  margin-top:1rem;
  font-size:.82rem; line-height:1.5; color:var(--muted);
  max-width:30ch;
}
.impact__note{ max-width:44ch; }

/* 06 SKILLS -------------------------------------------------------- */
.skills{ justify-content:center; gap:clamp(1.75rem,4.5vh,2.75rem); }
.skills__title{
  font-size:clamp(2rem,4.8vw,4rem);
  text-transform:uppercase;
}
/* Full-bleed to both viewport edges, with a generous fade so tags dissolve
   rather than getting guillotined by the chapter edge. */
.marquee{
  overflow:hidden;
  width:100vw;
  margin-left:calc(var(--pad) * -1);
  padding-block:.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__run{ display:flex; align-items:center; }
.marquee__run li{
  display:flex; align-items:center;
  white-space:nowrap;
  padding-inline:clamp(1rem,2vw,1.75rem);
  font-family:var(--serif); font-weight:350;
  font-size:clamp(1.15rem,2.2vw,2rem);
  color:var(--ink);
}
.marquee__run li::after{
  content:""; margin-left:clamp(1rem,2vw,1.75rem);
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.skills__edu{ max-width:52ch; }
.skills__edu-rule{
  display:block; width:2.5rem; height:1px;
  background:color-mix(in srgb, var(--ink) 30%, transparent);
  margin-bottom:1rem;
}

/* 07 CONTACT ------------------------------------------------------- */
.contact{ justify-content:center; gap:clamp(1.5rem,4vh,2.5rem); }
.contact__title{
  font-size:clamp(2.4rem,6.6vw,6.25rem);
  text-transform:uppercase;
}
.contact__details{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.25rem,3vw,3.5rem);
}
.contact__details li{ display:flex; flex-direction:column; gap:.45rem; }
.contact__details .eyebrow{ color:var(--muted); }
.contact__details a,.contact__static{
  font-size:clamp(.95rem,1.15vw,1.075rem);
}
.contact__placeholder{ color:var(--muted); font-style:italic; }

/* 08 COLOPHON ------------------------------------------------------ */
.colophon{ justify-content:flex-end; gap:1.5rem; padding-right:calc(var(--pad) + var(--rail-w)); }
.colophon__mark{
  font-family:var(--serif); font-size:2.75rem; line-height:1;
  color:var(--cream); opacity:.22;
  display:block; width:max-content;
  transform:rotate(180deg);
  margin-bottom:auto;
}
.colophon__copy{ font-size:.8rem; line-height:1.6; color:var(--muted-on-ink); }
.colophon__links{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.colophon__links a{
  font-size:.65rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-on-ink);
  transition:color .3s var(--ease);
}
.colophon__links a:hover{ color:var(--cream); }
.colophon__links a[aria-disabled="true"]{ opacity:.55; cursor:default; }

/* ------------------------------------------------------------ 7. REVEAL */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
/* Gentle stagger within a chapter */
[data-reveal].is-in:nth-child(2){ transition-delay:.06s; }
[data-reveal].is-in:nth-child(3){ transition-delay:.12s; }
[data-reveal].is-in:nth-child(4){ transition-delay:.18s; }

/* -------------------------------------------------------- 8. RESPONSIVE */

/* Tablet — drop the rail, tighten the hero split */
@media (max-width: 900px){
  :root{ --rail-w:0rem; }
  .rail{ display:none; }
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto;
    align-content:center;
    gap:clamp(1.25rem,3vh,2rem);
  }
  .hero__type{ grid-column:1; grid-row:1; }
  .hero__figure{
    grid-column:1; grid-row:2;
    height:100%; min-height:8rem;
    max-height:38vh;
  }
  .scroll-cue{ grid-row:3; }
  .pillars__list li{
    grid-template-columns:2.5rem 1fr;
    row-gap:.5rem;
  }
  .pillars__list .body{ grid-column:2; }
}

/* Phone — single stacked column, type still bold */
@media (max-width: 640px){
  :root{ --pad-t:clamp(4.5rem,11vh,6rem); }
  .chapter__inner{ padding-right:var(--pad); }
  .lockup{ font-size:clamp(2.6rem,13.5vw,4.5rem); }
  .manifesto__title{ font-size:clamp(2rem,9.5vw,3.2rem); }
  .contact__title{ font-size:clamp(2rem,9.5vw,3.2rem); }
  .exp-intro{ flex-basis:88vw; }
  .card{ flex-basis:min(80vw,20rem); height:min(74vh,34rem); }
  .exp-list{ padding-right:var(--pad); }
  .contact__details{ gap:1.1rem 2rem; }
  .contact__details li{ flex:1 1 9rem; }
  .chapter--footer{ flex:0 0 100vw; }
  .menu__list a{ font-size:clamp(1.9rem,9vw,3rem); }
}

/* Short viewports — let long chapters scroll internally */
@media (max-height: 620px){
  :root{ --pad-t:4.25rem; --pad-b:2.5rem; }
  .chapter__inner{ justify-content:flex-start; }
  .card{ height:calc(100dvh - 8rem); }
}

/* ------------------------------------------- 9. REDUCED MOTION & PRINT */
/* The upside-down DELLANEVE and the upside-down mark are static type,
   not motion, so they stay exactly as they are. Everything that moves stops. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; flex-wrap:wrap; width:auto; }
  .marquee__run:last-child{ display:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; margin-left:0; width:auto; }
  .marquee__run{ flex-wrap:wrap; }
  .mark__glyph{ transform:rotate(180deg); }        /* no flip animation */
  .mark.is-righted .mark__glyph{ transform:rotate(180deg); }
  .scroll-cue__arrow{ animation:none; }
  .card:hover{ transform:none; }
}

@media print{
  body{ overflow:visible; }
  .track{ display:block; height:auto; overflow:visible; }
  .chapter{ height:auto; page-break-after:always; }
  .mark,.menu-btn,.menu,.rail,.progress,.scroll-cue{ display:none !important; }
  .chapter__inner{ overflow:visible; padding:2rem; }
  .lockup__line--flip{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
}