/* ============================================================
   ANDY WARHOL — a tribute / 致敬安迪·沃霍尔
   Pop-art silkscreen visual system
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --paper:   #f1ece0;
  --paper-2: #e7e0cf;
  --ink:     #0d0d0d;
  --ink-soft:#1a1a1a;

  --pink:     #f92a82;
  --yellow:   #f9e813;
  --blue:     #00a9e0;
  --cobalt:   #0033a0;
  --red:      #e62e2d;
  --orange:   #f7941d;
  --turq:     #1fb6c1;
  --green:    #2e7d32;
  --neon-grn: #00e5a0;
  --magenta:  #ff00a8;
  --violet:   #7b2ff7;

  --camp-red:  #c0202e;
  --camp-gold: #c8a951;
  --camp-cream:#fbf7ec;

  --mao-red:  #d11f26;
  --mao-blue: #3a6ea5;

  --banana:   #f6c026;
  --silver-1: #e4e4e7;
  --silver-2: #b6b6bc;
  --silver-3: #87878e;

  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-head:    'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-cond:    'Oswald', 'Arial Narrow', sans-serif;
  --f-script:  'Pinyon Script', cursive;

  --ease: cubic-bezier(0.65, 0.05, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --maxw: 1320px;
  --gutter: clamp(16px, 4vw, 60px);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .mtile { cursor: none; }
}

/* ---------- FOCUS / A11Y ---------- */
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 2px; }
.marilyn :focus-visible, .stars :focus-visible, .factory :focus-visible,
.legacy :focus-visible, .works :focus-visible, .nav.is-scrolled :focus-visible { outline-color: var(--yellow); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 1100;
  background: var(--ink); color: #fff; padding: .65em 1.1em; border-radius: 4px;
  font-family: var(--f-cond); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- HELPERS ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .42em;
  text-transform: uppercase; font-size: clamp(.62rem, 1.1vw, .82rem);
}
.section { position: relative; padding: clamp(70px, 12vh, 150px) 0; }
.section__head { margin-bottom: clamp(28px, 5vw, 60px); }
.section__title {
  font-family: var(--f-display); text-transform: uppercase;
  line-height: .86; letter-spacing: -.01em; font-size: clamp(2.8rem, 11vw, 9rem);
}
.lede { font-size: clamp(1.02rem, 2vw, 1.4rem); line-height: 1.42; max-width: 48ch; }

/* off-register split-colour text (silkscreen mis-registration) */
.misreg { position: relative; display: inline-block; }
.misreg::before {
  content: attr(data-text); position: absolute; left: 4px; top: 3px;
  color: var(--pink); z-index: -1; opacity: .85; pointer-events: none; white-space: nowrap;
}

/* ============================================================
   SILKSCREEN IMAGE TREATMENT
   ============================================================ */
.silk { position: relative; overflow: hidden; background: #000; }
.silk img {
  width: 100%; height: 100%; object-fit: cover;
  filter: url(#w-default);
  transition: filter .5s var(--ease), transform .9s var(--ease);
}
.silk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.5) 22%, transparent 23%);
  background-size: 4px 4px; mix-blend-mode: overlay; opacity: .22;
}

/* ============================================================
   REAL ARTWORK — framed gallery print
   ============================================================ */
.artwork {
  background: #fff; padding: clamp(10px, 1.4vw, 18px);
  border-radius: 2px; box-shadow: 0 12px 34px rgba(0,0,0,.20);
}
.artwork img { width: 100%; height: auto; display: block; }
.artwork figcaption {
  margin-top: .8rem; color: var(--ink);
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
}
.artwork figcaption b { display: block; font-family: var(--f-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .98rem; line-height: 1.15; }
.artwork figcaption span { opacity: .58; }
.real-tag {
  display: inline-block; margin-left: .4em; vertical-align: middle;
  background: var(--yellow); color: var(--ink);
  font-family: var(--f-cond); font-weight: 600; font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .2em .55em; border-radius: 3px;
}

.homage-label {
  font-family: var(--f-cond); letter-spacing: .08em; text-transform: uppercase;
  font-size: .82rem; opacity: .72; margin: clamp(30px, 4vw, 50px) 0 16px;
}
.homage-label em { text-transform: none; font-style: italic; letter-spacing: 0; opacity: .95; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); mix-blend-mode: difference; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); transition: width .25s, height .25s; will-change: transform;
}
.cursor.is-lg { width: 70px; height: 70px; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   PRELOADER — THE SILVER FACTORY
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--gutter);
  background:
    radial-gradient(120% 120% at 30% 20%, #fff 0%, transparent 40%),
    repeating-linear-gradient(115deg, #c9c9cf 0 9px, #e9e9ee 9px 18px, #aeaeb6 18px 27px),
    linear-gradient(160deg, #d7d7dc, #9a9aa2);
  color: var(--ink);
}
.gate__foil {
  position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  animation: foil 6s linear infinite; pointer-events: none; opacity: .6;
}
@keyframes foil { 0% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }
.gate__kicker { font-family: var(--f-cond); letter-spacing: .5em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1rem; }
.gate__title {
  font-family: var(--f-display); text-transform: uppercase; line-height: .82;
  font-size: clamp(3.2rem, 16vw, 13rem); letter-spacing: -.01em;
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--blue);
}
.gate__sub { max-width: 30ch; margin: 1.4rem auto 2.4rem; font-size: clamp(.95rem,2vw,1.15rem); }
.gate__enter {
  position: relative; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(1rem, 2.4vw, 1.4rem); padding: .85em 2.4em; color: var(--paper);
  background: var(--ink); border-radius: 999px; will-change: transform; transition: background .3s, color .3s;
}
.gate__enter:hover { background: var(--pink); color: var(--ink); }
.gate.is-gone { opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s .8s; }
body.gated { overflow: hidden; height: 100vh; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(11px,2vw,18px) var(--gutter); color: var(--ink);
  transition: transform .4s var(--ease), background .3s, color .3s, backdrop-filter .3s;
}
.nav.is-scrolled { background: rgba(12,12,14,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { font-family: var(--f-head); font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; }
.nav__links { display: flex; gap: clamp(10px, 1.6vw, 24px); }
.nav__links a {
  font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; opacity: .82; position: relative; white-space: nowrap;
}
.nav__links a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:currentColor; transition:width .3s var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after, .nav__links a:focus-visible::after { width: 100%; }
@media (max-width: 820px) {
  .nav__links { gap: 16px; overflow-x: auto; max-width: 64vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav__links::-webkit-scrollbar { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 92px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px,4vw,60px); align-items: center; width: 100%; }
.hero__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(3.4rem, 15vw, 13rem); line-height: .8; letter-spacing: -.015em; }
.hero__name .l2 { color: var(--pink); }
.hero__meta { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1.6rem 0; align-items: baseline; }
.hero__dates { font-family: var(--f-cond); font-weight: 600; letter-spacing: .2em; font-size: clamp(.8rem,1.6vw,1rem); }
.hero__tag { font-size: clamp(1.05rem, 2.4vw, 1.6rem); max-width: 24ch; line-height: 1.25; font-weight: 500; }
.hero__tag b { color: var(--red); }
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px,1vw,12px); aspect-ratio: 1/1.06; max-width: 560px; margin-left: auto; }
.portraits .silk { border-radius: 2px; }
.portraits .silk:hover img { transform: scale(1.04); }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .portraits { max-width: 420px; margin: 24px 0 0; }
}

/* MARQUEE */
.marquee { overflow: hidden; white-space: nowrap; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: .35em 0; }
.marquee__track { display: inline-flex; gap: 2.4rem; will-change: transform; }
.marquee span { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem,4vw,2.6rem); letter-spacing: .02em; }
.marquee span:nth-child(even) { color: var(--pink); -webkit-text-stroke: 1px var(--ink); }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto__big { font-family: var(--f-head); font-size: clamp(1.6rem, 4.6vw, 3.6rem); line-height: 1.12; max-width: 20ch; }
.manifesto__big em { font-style: normal; color: var(--pink); }
.manifesto__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px,5vw,70px); align-items: end; margin-top: clamp(30px,5vw,60px); }
.manifesto__body p { font-size: clamp(.98rem,1.5vw,1.12rem); line-height: 1.6; margin-bottom: 1rem; max-width: 52ch; }
@media (max-width:820px){ .manifesto__cols{ grid-template-columns:1fr; } }

/* ============================================================
   CAMPBELL'S SOUP
   ============================================================ */
.soup { background: var(--camp-cream); color: var(--ink); }
.soup .section__title { color: var(--camp-red); }
.soup__script { font-family: var(--f-script); color: var(--camp-red); font-size: clamp(3rem,10vw,7rem); line-height: .8; }
.soup__story { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,5vw,60px); align-items: center; }
.soup__story p { font-size: clamp(.96rem,1.5vw,1.1rem); line-height: 1.6; margin-bottom: 1rem; }
@media (max-width:820px){ .soup__story{ grid-template-columns:1fr; } }

.cans { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(4px,1vw,14px); }
@media (max-width: 900px){ .cans { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 460px){ .cans { grid-template-columns: repeat(3,1fr); } }
.can {
  position: relative; aspect-ratio: 0.66/1; border-radius: 7px/5px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.16), transparent 12%, transparent 88%, rgba(0,0,0,.22)),
    linear-gradient(var(--camp-red) 0 36%, #fff 36% 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  overflow: hidden; color: var(--camp-red);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
}
.can:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 14px 26px rgba(0,0,0,.28); z-index: 2; }
.can__brand { font-family: var(--f-script); color: #fff; font-size: clamp(.7rem, 1.7vw, 1.15rem); line-height: 1; margin-top: 9%; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.can__seal { position: absolute; top: 31%; left: 50%; transform: translate(-50%,-50%); width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f7e9b0, var(--camp-gold) 60%, #9a7b1e); box-shadow: 0 0 0 1.5px #8c6e1c inset; z-index: 3; }
.can__variety { margin-top: 30%; min-height: 2.4em; font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(.55rem,1.25vw,.82rem); line-height: .98; padding: 0 6%; }
.can__soup { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(.85rem,2.6vw,1.7rem); line-height: .8; margin-top: 2px; }
.can__fine { margin-top: auto; margin-bottom: 7%; font-family: var(--f-cond); font-size: clamp(.42rem,.8vw,.52rem); letter-spacing: .12em; opacity: .8; }

/* ============================================================
   MARILYN
   ============================================================ */
.marilyn { background: var(--ink); color: var(--paper); }
.marilyn .section__title { color: #fff; }
.marilyn__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.btn-reprint {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: .1em;
  background: var(--yellow); color: var(--ink); padding: .7em 1.6em; border-radius: 999px;
  font-size: .9rem; transition: transform .3s var(--ease-spring), background .3s, color .3s; will-change: transform;
}
.btn-reprint:hover { background: var(--pink); color: var(--ink); transform: rotate(-2deg) scale(1.05); }

.art-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,36px); }
@media (max-width: 680px){ .art-duo { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.marilyn__cap { margin: clamp(22px,3vw,38px) 0; max-width: 60ch; opacity: .85; font-size: clamp(.95rem,1.5vw,1.08rem); line-height: 1.55; }
.marilyn__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px,.9vw,12px); }
@media (max-width: 900px){ .marilyn__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 460px){ .marilyn__grid { grid-template-columns: repeat(2,1fr); } }
.mtile { position: relative; aspect-ratio: 1/1.12; overflow: hidden; background:#000; }
.mtile img { width: 100%; height: 100%; object-fit: cover; transition: filter .55s var(--ease), transform .6s var(--ease); }
.mtile:hover img { transform: scale(1.05); }

/* ============================================================
   SUPERSTARS
   ============================================================ */
.stars { background: linear-gradient(180deg, #16161a, #232329); color: var(--paper); border-top: 5px solid var(--yellow); }
.stars__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,64px); align-items: center; margin-bottom: clamp(46px,7vw,90px); }
.stars__row:nth-child(even) .stars__txt { order: 2; }
.stars__txt h3 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.2rem,7vw,5rem); line-height: .85; }
.stars__txt .yr { font-family: var(--f-cond); letter-spacing:.3em; opacity:.7; font-size:.8rem; }
.stars__txt p { margin-top: 1rem; font-size: clamp(.95rem,1.5vw,1.1rem); line-height: 1.55; max-width: 42ch; opacity: .9; }
@media (max-width:820px){ .stars__row{ grid-template-columns:1fr; } .stars__row:nth-child(even) .stars__txt{ order:0; } }

.mao-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(5px,1vw,12px); }
.mao-grid .silk { aspect-ratio: 1/1.18; border-radius:2px; }
@media (max-width: 620px){ .mao-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   POP MOTIFS (real artworks)
   ============================================================ */
.pop__lab { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,3vw,40px); }
@media (max-width: 900px){ .pop__lab { grid-template-columns: 1fr; max-width:520px; margin-inline:auto; } }
.motif { border: 3px solid var(--ink); border-radius: 4px; padding: clamp(16px,2.4vw,24px); display: flex; flex-direction: column; }
.motif h4 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem,3vw,2rem); line-height:.9; margin-top: .15rem; }
.motif .yr { font-family: var(--f-cond); letter-spacing:.16em; font-size:.7rem; opacity:.6; text-transform:uppercase; }
.motif__art { margin: 14px 0; background: #fff; border-radius: 2px; aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; padding: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.motif__art img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.motif p { font-size: .9rem; line-height: 1.5; opacity:.85; margin-top: auto; }

/* ============================================================
   THE WORKS — real gallery
   ============================================================ */
.works { background: radial-gradient(130% 100% at 50% 0%, #1c1c22 0%, #0c0c0e 68%); color: var(--paper); }
.works .section__title { color: #fff; }

/* masonry — natural aspect ratios, no letterbox whitespace, tightly packed */
.works__grid { columns: 4; column-gap: clamp(16px,2vw,28px); }
@media (max-width: 920px){ .works__grid { columns: 3; } }
@media (max-width: 600px){ .works__grid { columns: 2; } }

.work {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 clamp(16px,2vw,28px);
}
.work__frame {
  display: block; background: linear-gradient(158deg, #fcfaf4, #ece5d6);
  padding: clamp(6px, .8vw, 11px); border-radius: 1px;
  box-shadow: 0 14px 30px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work__frame img { width: 100%; height: auto; display: block; }
.work:hover .work__frame { transform: translateY(-6px); box-shadow: 0 26px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10); }
.work figcaption { margin-top: .7rem; }
.work figcaption b { display: block; font-family: var(--f-body); font-weight: 700; font-size: clamp(.84rem, 1.1vw, .96rem); line-height: 1.2; color: #fff; }
.work figcaption .meta { display: block; margin-top: .25rem; font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; color: var(--paper); opacity: .5; }

/* ============================================================
   FACTORY
   ============================================================ */
.factory { background: #0c0c0e; color: var(--silver-1); position: relative; overflow:hidden; }
.factory::before { content:""; position:absolute; inset:0; opacity:.10; background: repeating-linear-gradient(115deg,#fff 0 10px,#888 10px 20px,#bbb 20px 30px); pointer-events:none; }
.factory .section__title { color: var(--silver-1); }
.factory__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px,4vw,56px); align-items: start; position: relative; z-index:2; }
.factory__media { display: grid; gap: clamp(8px,1.4vw,16px); }
.factory__media .silk { border-radius:2px; }
.factory__media .big { aspect-ratio: 16/10; }
.factory__media .sm { aspect-ratio: 16/7; }
.factory__txt p { font-size: clamp(.96rem,1.5vw,1.1rem); line-height:1.6; margin-bottom:1rem; opacity:.88; }
.stars-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.stars-list li { font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; border:1px solid currentColor; border-radius:999px; padding:.3em .8em; opacity:.8; }
@media (max-width:880px){ .factory__grid{ grid-template-columns:1fr; } }

/* ============================================================
   TIMELINE
   ============================================================ */
.life-portraits { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(6px,1vw,12px); margin-bottom: clamp(30px,4vw,54px); }
.life-portraits .silk { aspect-ratio: 3/4; border-radius: 2px; }
@media (max-width: 640px){ .life-portraits { grid-template-columns: repeat(2,1fr); } }

.tl { position: relative; margin-top: clamp(24px,4vw,50px); }
.tl::before { content:""; position:absolute; left: 0; top:0; bottom:0; width:3px; background: var(--ink); }
@media (min-width:760px){ .tl::before{ left: 120px; } }
.tl__item { position: relative; padding: 0 0 clamp(26px,4vw,46px) 28px; }
@media (min-width:760px){ .tl__item{ padding-left: 160px; } }
.tl__yr { font-family: var(--f-display); font-size: clamp(1.4rem,3vw,2.2rem); line-height:1; color: var(--pink); }
@media (min-width:760px){ .tl__yr{ position:absolute; left:0; top:-2px; width:104px; text-align:right; } }
.tl__dot { position:absolute; left:-7px; top:6px; width:17px; height:17px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink); }
@media (min-width:760px){ .tl__dot{ left:113px; } }
.tl__ev { font-size: clamp(.95rem,1.5vw,1.08rem); line-height:1.5; max-width:60ch; margin-top:.2rem; }
.tl__item.reveal { opacity:0; transform: translateY(24px); }
.tl__item.in { opacity:1; transform:none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ============================================================
   WORDS / QUOTES
   ============================================================ */
.words { background: var(--yellow); color: var(--ink); }
.words .section__title { color: var(--ink); }
.qfeature { font-family: var(--f-head); font-size: clamp(1.4rem,3.6vw,2.8rem); line-height:1.15; max-width: 22ch; }
.qfeature .mark { color: var(--camp-red); }
.qgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,2vw,22px); margin-top: clamp(28px,4vw,52px); }
@media (max-width:900px){ .qgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .qgrid{ grid-template-columns:1fr; } }
.qcard { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(18px,2.4vw,30px); border-radius:4px; display:flex; flex-direction:column; justify-content:center; min-height: 168px; transition: transform .35s var(--ease-spring), background .35s, color .35s; }
.qcard::before { content:"“"; position:absolute; top:-.18em; right:.08em; font-family:var(--f-display); font-size:6rem; line-height:1; color:rgba(255,255,255,.06); pointer-events:none; }
.qcard:nth-child(3n+1):hover { background: #c2185b; }
.qcard:nth-child(3n+2):hover { background: var(--cobalt); }
.qcard:nth-child(3n):hover   { background: #b3161a; }
.qcard:hover { transform: translateY(-6px) rotate(-1deg); color:#fff; }
.qcard q { font-family: var(--f-head); font-size: clamp(1rem,1.7vw,1.2rem); line-height:1.28; quotes:none; position: relative; z-index: 1; }
.qcard .ctx { margin-top:1.1rem; font-family:var(--f-cond); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }

/* ============================================================
   LEGACY
   ============================================================ */
.legacy { background: var(--ink); color: var(--paper); }
.legacy__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,60px); align-items:center; }
.legacy .silk { aspect-ratio: 4/3; border-radius:2px; }
.legacy__txt h2 { font-family: var(--f-display); text-transform:uppercase; font-size: clamp(2rem,5.5vw,3.6rem); line-height:.9; }
.legacy__txt p { margin-top:1rem; font-size: clamp(.96rem,1.5vw,1.1rem); line-height:1.6; opacity:.88; max-width:46ch; }
.legacy__quote { margin-top:1.4rem; font-family:var(--f-head); font-size:clamp(1.05rem,2vw,1.4rem); color:var(--yellow); line-height:1.2; }
@media (max-width:820px){ .legacy__grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER / COLOPHON
   ============================================================ */
.foot { background: var(--paper); color: var(--ink); padding: clamp(50px,7vw,90px) 0 50px; border-top: 4px solid var(--ink); }
.foot__big { font-family: var(--f-display); text-transform:uppercase; font-size: clamp(2.4rem,12vw,9rem); line-height:.82; letter-spacing:-.01em; }
.foot__big span { color: var(--pink); }
.foot__cols { display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px,4vw,50px); margin-top: clamp(28px,4vw,50px); }
.foot__note { font-size:.92rem; line-height:1.6; max-width:58ch; opacity:.82; }
.foot__credits { font-size:.74rem; line-height:1.6; opacity:.62; }
.foot__credits-h { font-family:var(--f-cond); letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; margin-bottom:.5rem; opacity:1; font-weight:600; }
@media (max-width:760px){ .foot__cols{ grid-template-columns:1fr; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .gate__foil { display:none; }
  .tl__item.reveal { opacity:1; transform:none; }
}