/* Home hero art direction — one layout per theme (config/themes.yaml → hero) */

.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--hero-ink)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero > :where(:not(.hero__media,.hero__scrim)){position:relative;z-index:2}
.hero__kicker{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.hero__title{
  margin:0;font-family:var(--as-font-display);font-weight:var(--as-display-weight);
  letter-spacing:var(--as-display-tracking);text-transform:var(--as-display-case);line-height:var(--as-display-lh);
}
.hero__lead{margin:0;max-width:34rem;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__scroll{
  display:inline-flex;flex-direction:column;align-items:center;gap:.6rem;min-height:44px;min-width:44px;
  color:inherit;text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.hero__scroll::after{content:"";width:1px;height:44px;background:currentColor;transform-origin:top;animation:scroll-line 2.4s var(--ease-out) infinite}
@keyframes scroll-line{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Entrance: text rises in; photos settle from a slight zoom. Kept short so LCP is not delayed. */
@media (prefers-reduced-motion:no-preference){
  .hero .hero__img{animation:hero-settle 1.8s var(--ease-out) both}
  .hero .hero__kicker,.hero .hero__title,.hero .hero__lead,.hero .hero__actions,.hero .hero__stats,.hero .hero__index,.hero .hero__pills{animation:hero-rise .6s var(--ease-out) both}
  .hero .hero__title{animation-delay:.08s}
  .hero .hero__lead{animation-delay:.16s}
  .hero .hero__actions,.hero .hero__pills{animation-delay:.24s}
  .hero .hero__stats,.hero .hero__index{animation-delay:.32s}
}
@keyframes hero-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- A · cinematic ---------- */
.hero--cinematic{min-height:max(100svh,640px);display:grid;grid-template-rows:1fr auto;padding-top:calc(var(--header-h) + 2rem);color:#fff}
.hero--cinematic .hero__img{object-position:64% 50%}
.hero--cinematic .hero__scrim{background:
  linear-gradient(90deg,rgba(5,9,24,.8) 0%,rgba(5,9,24,.42) 42%,rgba(5,9,24,0) 68%),
  linear-gradient(0deg,rgba(5,9,24,.9) 0%,rgba(5,9,24,0) 38%),
  linear-gradient(180deg,rgba(5,9,24,.55) 0%,rgba(5,9,24,0) 22%)}
.hero--cinematic .hero__content{width:var(--wrap);margin-inline:auto;align-self:end;display:grid;gap:1.4rem;justify-items:start;padding-bottom:clamp(2rem,5vh,3.5rem)}
.hero--cinematic .hero__title{font-size:clamp(4.2rem,13vw,12.5rem);line-height:.84}
.hero--cinematic .hero__title em{font-style:italic;font-weight:300}
.hero--cinematic .hero__lead{color:rgba(255,255,255,.9)}
.hero--cinematic .hero__stats{width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem clamp(2rem,6vw,5rem);padding:1.35rem 0 1.75rem;border-top:1px solid rgba(255,255,255,.28)}
.hero__stats div{display:grid;gap:.1rem}
.hero__stats dt{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero__stats dd{margin:0;font-family:var(--as-font-display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.1}
.hero--cinematic .hero__scroll{position:absolute;right:var(--gutter);bottom:1.75rem}
@media (max-width:640px){.hero--cinematic .hero__scroll{display:none}.hero--cinematic .hero__img{object-position:70% 50%}}

/* ---------- B · split (Hongo) ---------- */
.hero--split{min-height:max(100svh,640px);display:grid;align-items:center;padding:calc(var(--header-h) + 1rem) 0 6rem;background:var(--hero-plate,#dfdedf);color:var(--as-text)}
.hero--split .hero__media{left:22%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hero--split .hero__media::after{display:none}
.hero--split .hero__img{object-position:92% 30%}
.hero--split .hero__content{width:var(--wrap);margin-inline:auto;display:grid;gap:1.5rem;justify-items:start}
.hero--split .hero__content > *{max-width:min(34rem,44vw)}
.hero--split .hero__title{font-size:clamp(3.6rem,9.4vw,9.5rem);line-height:.86;max-width:none!important}
.hero__dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--as-accent);margin-right:.4rem;vertical-align:.08em}
.hero--split .hero__index{position:absolute;left:0;right:0;bottom:1.5rem;width:var(--wrap);margin:0 auto;display:flex;gap:clamp(1rem,3vw,2.5rem)}
.hero__index a{display:inline-flex;align-items:baseline;gap:.5rem;min-height:44px;padding-top:.6rem;border-top:2px solid currentColor;color:inherit;text-decoration:none;font-weight:600;min-width:7.5rem;opacity:.75;transition:opacity .2s}
.hero__index a:hover{opacity:1}
.hero__index span{font-size:.78rem;font-variant-numeric:tabular-nums}
.hero--split .hero__scroll{position:absolute;right:var(--gutter);bottom:1.25rem;flex-direction:row;padding:0 1.1rem;border-radius:999px;background:var(--as-text);color:var(--as-bg);letter-spacing:.12em}
.hero--split .hero__scroll::after{display:none}
@media (max-width:899px){
  .hero--split{display:flex;flex-direction:column;min-height:0;padding:var(--header-h) 0 2rem}
  .hero--split .hero__media{position:relative;inset:auto;height:min(56svh,520px);-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 22%);mask-image:linear-gradient(0deg,transparent 0,#000 22%)}
  .hero--split .hero__img{object-position:72% 20%}
  .hero--split .hero__content{margin-top:-1rem}
  .hero--split .hero__content > *{max-width:100%}
  .hero--split .hero__title{font-size:clamp(3.2rem,15vw,6rem)}
  .hero--split .hero__index{position:relative;bottom:auto;margin-top:2rem;gap:1rem}
  .hero--split .hero__index a{flex:1;min-width:0}
  .hero--split .hero__scroll{display:none}
}

/* ---------- C · poster (Love, Ara) ---------- */
.hero--poster{min-height:max(100svh,640px);display:grid;grid-template-rows:1fr auto;padding-top:calc(var(--header-h) + 1.5rem);color:#fff}
.hero--poster .hero__img{object-position:50% 40%}
.hero--poster .hero__scrim{background:linear-gradient(180deg,rgba(8,14,32,.6) 0%,rgba(8,14,32,0) 24%,rgba(8,14,32,0) 50%,rgba(8,14,32,.8) 100%)}
.hero--poster .hero__top{width:var(--wrap);margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.hero--poster .hero__top .hero__lead,.hero--poster .hero__top .hero__actions{grid-column:2}
.hero--poster .hero__top{display:grid;grid-template-columns:1fr minmax(0,24rem);gap:1rem 2rem;align-content:start}
.hero--poster .hero__top > .hero__lead{padding:1.1rem 1.25rem;border-radius:18px;background:rgba(8,14,32,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero--poster .hero__kicker{grid-row:1/3;align-self:start;padding:.55rem .9rem;border-radius:999px;background:rgba(8,14,32,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-self:start}
.hero--poster .hero__script{
  position:absolute;right:max(var(--gutter),6vw);bottom:clamp(8rem,19vw,17rem);z-index:3;margin:0;
  font-family:var(--as-font-script,Caveat,cursive);font-size:clamp(2.2rem,5vw,4.6rem);font-weight:700;color:var(--as-accent);
  transform:rotate(-7deg);text-shadow:0 3px 24px rgba(0,0,0,.35);
}
.hero--poster .hero__title{
  font-size:min(16.2vw,30svh);line-height:.8;white-space:nowrap;text-align:center;
  margin:0 0 -.07em;padding:0 .5vw;text-shadow:0 8px 60px rgba(0,0,0,.25);
}
@media (max-width:760px){
  .hero--poster .hero__top{grid-template-columns:1fr}
  .hero--poster .hero__kicker{grid-row:auto}
  .hero--poster .hero__top .hero__lead,.hero--poster .hero__top .hero__actions{grid-column:1}
  .hero--poster .hero__script{bottom:22vw}
}

/* ---------- D · layered (Creative Engineer) ---------- */
.hero--layered{min-height:max(100svh,680px);display:grid;align-items:end;padding-top:var(--header-h);background:#0b0726;color:#fff}
.hero--layered .hero__giant{
  position:absolute;left:0;right:0;top:calc(var(--header-h) + 1vh);z-index:1;margin:0;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  font-family:var(--as-font-display);font-weight:200;text-transform:uppercase;letter-spacing:.01em;
  font-size:min(25vw,37svh);line-height:.8;color:#f7dcff;
  text-shadow:0 0 18px rgba(255,120,240,.55),0 0 80px rgba(190,70,255,.45);
}
.hero--layered .hero__subject{
  position:absolute;left:50%;bottom:0;z-index:2;width:min(40vw,64svh);transform:translateX(-50%);
  filter:drop-shadow(0 0 50px rgba(190,70,255,.35));
}
.hero--layered .hero__subject-img{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){.hero--layered .hero__subject{animation:neon-breathe 5s ease-in-out infinite alternate}}
@keyframes neon-breathe{from{filter:drop-shadow(0 0 30px rgba(190,70,255,.25))}to{filter:drop-shadow(0 0 70px rgba(255,90,230,.5))}}
.hero--layered .hero__content{
  z-index:3;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:2rem;
  padding:6rem max(var(--gutter),calc((100% - var(--layout-max)) / 2)) clamp(1.75rem,4vh,3rem);
  background:linear-gradient(0deg,rgba(8,4,26,.92) 0%,rgba(8,4,26,.6) 55%,rgba(8,4,26,0) 100%);
}
.hero--layered .hero__col{display:grid;gap:.75rem;max-width:26rem}
.hero--layered .hero__col--end{justify-self:end;gap:1.25rem}
.hero--layered .hero__title{font-size:clamp(2rem,3.6vw,3.4rem);font-weight:600;letter-spacing:.02em}
.hero--layered .hero__kicker{color:#f2c6ff}
@media (max-width:760px){
  .hero--layered .hero__giant{font-size:31vw;top:calc(var(--header-h) + 3vh)}
  .hero--layered .hero__subject{width:88vw;bottom:14rem}
  .hero--layered .hero__content{grid-template-columns:1fr;padding-top:8rem}
  .hero--layered .hero__col--end{justify-self:start}
}

/* ---------- E · card (Lusion) ---------- */
.hero--card{padding:calc(var(--header-h) + clamp(1.5rem,6vh,4rem)) 0 0}
.hero--card .hero__statement{width:var(--wrap);margin:0 auto clamp(1.5rem,4vh,2.75rem);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end}
.hero--card .hero__title{font-size:clamp(2.1rem,4.5vw,4.4rem);line-height:1.02;max-width:17ch}
.hero--card .hero__aside{display:grid;gap:1.25rem;justify-items:start}
.hero--card .hero__lead{color:var(--as-muted)}
.hero--card .hero__card{
  position:relative;overflow:hidden;margin:0 auto;width:calc(100% - 2 * clamp(.75rem,1.6vw,1.5rem));max-width:1680px;
  aspect-ratio:16/8;max-height:74svh;min-height:340px;border-radius:clamp(20px,2.6vw,36px);background:#0d0e12;color:#fff;
  box-shadow:0 50px 100px -40px rgba(40,30,90,.45);
}
.hero__card-media{position:absolute;inset:-3%;transition:translate .6s var(--ease-out)}
.hero--card .hero__img{position:absolute;inset:0}
.hero__card-label{
  position:absolute;left:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);z-index:2;margin:0;
  display:flex;gap:.75rem;align-items:center;padding:.6rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.9rem;
}
.hero__card-label span{font-weight:700}
.hero__card-scroll{
  position:absolute;left:50%;bottom:clamp(1rem,2vw,1.75rem);z-index:2;translate:-50% 0;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#111;text-decoration:none;font-size:1.25rem;transition:transform .25s var(--ease-out);
}
.hero__card-scroll:hover{transform:translateY(3px)}
@media (max-width:820px){
  .hero--card .hero__statement{grid-template-columns:1fr}
  .hero--card .hero__card{aspect-ratio:4/5;max-height:70svh}
  .hero__card-label{display:none}
}

/* ---------- F · collage (Trevor Noah) ---------- */
.hero--collage{
  min-height:max(100svh,660px);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;text-align:center;
  padding:calc(var(--header-h) + 1.5rem) 0 clamp(1.5rem,4vh,2.5rem);
}
.hero--collage .hero__kicker{color:var(--as-muted)}
.hero--collage .hero__title{
  align-self:center;display:flex;flex-direction:column;align-items:center;
  font-size:min(20vw,32svh);line-height:.8;color:var(--as-accent);
}
.hero--collage .hero__title span+span{margin-top:.12em}
.hero--collage .hero__subject{
  position:absolute;left:50%;top:50%;z-index:3;width:min(38vw,52svh);
  transform:translate(-50%,-50%) rotate(-5deg);filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.hero--collage .hero__subject-img{width:100%;height:auto}
.hero--collage .hero__content{z-index:4;display:grid;gap:1.1rem;justify-items:center;padding:0 var(--gutter)}
.hero__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;margin:0;padding:0}
@media (max-width:760px){
  .hero--collage .hero__title{font-size:23vw}
  .hero--collage .hero__subject{width:70vw;top:46%}
}

/* ---------- G · timeline (Ten Years Away) ---------- */
.hero--timeline{padding:calc(var(--header-h) + .5rem) 0 0;background:radial-gradient(ellipse at 50% 55%,#2a3650 0%,#1a2233 55%,#121826 100%)}
.hero--timeline .hero__frame{width:var(--wrap);margin-inline:auto;border-inline:1px solid var(--as-line);display:grid}
.hero--timeline .hero__title{
  padding:clamp(1rem,2.5vw,1.75rem) 1rem;border-bottom:1px solid var(--as-line);text-align:center;
  font-size:clamp(2.2rem,6.3vw,6.6rem);font-stretch:125%;font-weight:800;line-height:.9;
}
.hero--timeline .hero__row{display:grid;grid-template-columns:1fr minmax(0,2.4fr) 1fr;align-items:center;border-bottom:1px solid var(--as-line)}
.hero--timeline .hero__year{
  margin:0;text-align:center;font-family:var(--as-font-display);font-stretch:112%;font-weight:800;
  font-size:clamp(2.6rem,7vw,7.4rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--as-text);
}
.hero--timeline .hero__poster{
  margin:0;height:min(62svh,640px);border-inline:1px solid var(--as-line);overflow:hidden;
}
.hero--timeline .hero__img{object-fit:cover;object-position:50% 52%;-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%)}
.hero--timeline .hero__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem 2rem;padding:clamp(1.25rem,3vw,2rem) clamp(1rem,2.5vw,2rem)}
@media (max-width:760px){
  .hero--timeline .hero__row{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "p p"}
  .hero--timeline .hero__year:first-child{grid-area:a;padding:1rem 0;border-right:1px solid var(--as-line)}
  .hero--timeline .hero__year:last-child{grid-area:b;padding:1rem 0}
  .hero--timeline .hero__poster{grid-area:p;height:auto;aspect-ratio:1;border-inline:0;border-top:1px solid var(--as-line)}
}

/* ---------- H · records (A24) ---------- */
.hero--records{padding:calc(var(--header-h) + clamp(2rem,7vh,4.5rem)) 0 0}
.hero--records .hero__head{width:var(--wrap);margin:0 auto clamp(1rem,3vw,2rem);display:grid;gap:1rem}
.hero--records .hero__title{font-size:clamp(3rem,8.4vw,8.8rem);line-height:.9;max-width:13ch}
.hero--records .hero__title em{font-style:italic}
.hero__discs{--disc:clamp(118px,24vw,390px);list-style:none;margin:0;padding:1rem var(--gutter) 2rem;display:flex;justify-content:center}
.disc{position:relative;flex:0 0 var(--disc);width:var(--disc)}
.disc+.disc{margin-left:calc(var(--disc) * -.16)}
.disc:nth-child(odd){translate:0 calc(var(--disc) * .06)}
.disc__btn{
  display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  filter:drop-shadow(0 22px 26px rgba(40,30,20,.28));transition:transform .6s var(--ease-out);
}
.disc__btn:hover,.disc__btn:focus-visible{transform:translateY(-14px) rotate(12deg)}
.disc__btn.is-playing{animation:disc-spin 1.8s linear infinite}
@keyframes disc-spin{to{transform:rotate(360deg)}}
.disc__img{width:100%;height:100%;object-fit:contain}
.disc__circle{position:absolute;inset:-8%;width:116%;height:116%;pointer-events:none;fill:none;stroke:var(--as-accent);stroke-width:2.4;stroke-linecap:round}
.disc__circle path{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.disc__circle path{stroke-dashoffset:1;animation:draw 1.4s .5s var(--ease-out) forwards}}
@keyframes draw{to{stroke-dashoffset:0}}
.disc__note{position:absolute;top:-1.6rem;right:-.5rem;margin:0;font-family:var(--as-font-display);font-style:italic;font-size:clamp(1.2rem,2vw,1.8rem);color:var(--as-accent);rotate:8deg}
.hero__catalog{width:var(--wrap);margin:clamp(1.5rem,4vw,3rem) auto 0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,5rem);align-items:start}
.hero__table{width:100%;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums}
.hero__table caption{text-align:left;padding-bottom:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--as-muted)}
.hero__table th,.hero__table td{padding:.7rem .5rem;border-top:1px solid var(--as-text);text-align:left;vertical-align:middle}
.hero__table thead th{font-size:.8rem;font-weight:600;color:var(--as-muted);border-top-width:2px}
.hero__table tbody th{font-weight:600}
.hero__table td:last-child{text-align:right}
.play-chip{
  display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 1rem;border-radius:999px;
  border:1.5px solid currentColor;background:transparent;color:inherit;font-weight:600;font-size:.9rem;cursor:pointer;
  transition:background-color .2s,color .2s;
}
.play-chip:hover{background:var(--as-text);color:var(--as-bg)}
.hero__quote{margin:0 0 1.5rem;font-family:var(--as-font-display);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15}
.hero__quote p{margin:0 0 .5rem}
.hero__quote footer{font-family:var(--as-font-body);font-size:.9rem;color:var(--as-muted)}
@media (max-width:860px){.hero__catalog{grid-template-columns:1fr}}
@media (max-width:560px){.hero__table th:nth-child(4),.hero__table td:nth-child(4){display:none}.hero__discs{--disc:31vw}}

/* ---------- I · wordmark (VERO) ---------- */
.hero--wordmark{min-height:max(100svh,640px);display:grid;place-items:center;text-align:center;padding:var(--header-h) 0 7rem;color:#fff8ec}
.hero--wordmark .hero__scrim{background:
  radial-gradient(ellipse 50% 42% at 50% 46%,rgba(62,28,4,.42),rgba(62,28,4,0) 100%),
  linear-gradient(0deg,rgba(40,17,2,.7) 0%,rgba(40,17,2,0) 30%),
  linear-gradient(180deg,rgba(40,17,2,.5) 0%,rgba(40,17,2,0) 22%)}
.hero--wordmark .hero__center{display:grid;gap:1.1rem;justify-items:center;padding:0 var(--gutter)}
.hero--wordmark .hero__kicker{letter-spacing:.34em}
.hero--wordmark .hero__title{font-size:clamp(3.6rem,11.5vw,11.5rem);line-height:.88;font-weight:500;text-shadow:0 2px 40px rgba(60,25,0,.35)}
.hero--wordmark .hero__lead{font-family:var(--as-font-display);font-style:italic;font-size:clamp(1.3rem,2.1vw,1.7rem)}
.hero--wordmark .hero__bottom{
  position:absolute;left:0;right:0;bottom:0;width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-bottom:clamp(1.25rem,4vh,2.25rem);
}
.hero--wordmark .hero__bottom p{margin:0;justify-self:start;font-size:.85rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.hero--wordmark .hero__bottom .hero__scroll{justify-self:end}
.hero--wordmark .btn--ghost{min-width:12rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(255,248,236,.08)}
@media (max-width:640px){
  .hero--wordmark .hero__img{object-position:62% 50%}
  .hero--wordmark .hero__bottom{grid-template-columns:1fr;justify-items:center}
  .hero--wordmark .hero__bottom p,.hero--wordmark .hero__bottom .hero__scroll{display:none}
}

/* ---------- J · torn (SEROTONINN) ---------- */
.hero--torn{min-height:max(100svh,640px);color:#0b0b0b;background:#fdfdfd}
.hero--torn .hero__media::after{display:none}
.hero--torn .hero__img{object-position:50% 25%}
.hero--torn .hero__title{
  position:absolute!important;inset:calc(var(--header-h) + 3vh) var(--gutter) 0;margin:0;pointer-events:none;
  font-size:clamp(3.6rem,9.6vw,10.5rem);line-height:.84;
}
.hero__title-l{position:absolute;left:0;top:0}
.hero__title-r{position:absolute;right:0;bottom:7%;text-align:right}
.hero--torn .hero__left{position:absolute!important;left:var(--gutter);bottom:clamp(1.5rem,5vh,3rem);display:grid;gap:.75rem;max-width:min(22rem,30vw)}
.hero__tag{margin:0;justify-self:start;padding:.4rem .75rem;background:#0b0b0b;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.hero--torn .hero__lead{font-weight:500}
.hero__play{
  position:absolute!important;right:var(--gutter);top:calc(var(--header-h) + 3vh);
  width:clamp(7rem,10vw,9.5rem);aspect-ratio:1;display:grid;place-content:center;gap:.1rem;text-align:center;
  background:#e2231a;color:#fff;text-decoration:none;font-family:var(--as-font-display);text-transform:uppercase;
  font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:.9;transition:transform .3s var(--ease-out),background-color .2s;
}
.hero__play:hover{transform:rotate(-6deg) scale(1.04);background:#0b0b0b}
@media (max-width:760px){
  .hero--torn{display:grid;grid-template-rows:auto auto;min-height:0}
  .hero--torn .hero__media{position:relative;height:78svh}
  .hero--torn .hero__img{object-position:48% 20%}
  .hero--torn .hero__title{inset:calc(var(--header-h) + 1rem) 1rem auto;height:calc(78svh - var(--header-h) - 2rem);font-size:11vw}
  .hero__title-r{bottom:0}
  .hero--torn .hero__left{position:relative!important;left:auto;bottom:auto;max-width:none;padding:1.5rem var(--gutter) 0}
  .hero__play{top:calc(var(--header-h) + 1rem);right:1rem;width:6.5rem;font-size:1.6rem}
}
/* Too narrow for the square beside "Where snow": it moves into the menu under Home (partials/header.twig) */
@media (max-width:520px){.js .hero--torn .hero__play{display:none}}
.site-nav__item--play{display:none}
@media (max-width:520px){
  .js .site-nav__item--play{display:block;padding:.9rem 0}
  .site-nav__play{
    display:inline-grid;place-content:center;gap:.05rem;width:6.5rem;aspect-ratio:1;text-align:center;
    background:#e2231a;color:#fff;text-decoration:none;font-family:var(--as-font-display);text-transform:uppercase;
    font-size:1.6rem;line-height:.9;transform:rotate(-3deg);transition:transform .3s var(--ease-out),background-color .2s;
  }
  .site-nav__play:hover,.site-nav__play:focus-visible{transform:rotate(-6deg) scale(1.04);background:#0b0b0b}
}

/* ---------- K · tube head ---------- */
.hero--tubehead{
  width:var(--wrap);margin-inline:auto;min-height:max(100svh,640px);padding:calc(var(--header-h) + 1rem) 0 1rem;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:2rem;
}
.hero--tubehead .hero__content{display:grid;gap:1.25rem;justify-items:start}
.hero--tubehead .hero__kicker{font-family:var(--as-font-script,Caveat,cursive);font-size:2rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--as-accent)}
.hero--tubehead .hero__title{font-family:var(--as-font-body);font-size:clamp(3.2rem,7vw,7rem);font-weight:800;letter-spacing:-.045em;line-height:.88}
.hero--tubehead .hero__stage{position:relative;height:min(86svh,920px)}
.hero--tubehead .hero__figure{margin:0;height:100%;display:flex;justify-content:center}
.hero--tubehead .hero__img{width:auto;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero__notes .note{
  position:absolute;display:flex;align-items:center;gap:.2rem;min-height:44px;
  font-family:var(--as-font-script,Caveat,cursive);font-size:clamp(1.45rem,2.1vw,2.1rem);font-weight:700;line-height:1;
  color:var(--as-text);text-decoration:none;rotate:-4deg;transition:color .2s,translate .3s var(--ease-out);
}
.hero__notes .note:hover{color:var(--as-accent);translate:0 -3px}
.hero__notes .note svg{width:clamp(56px,6vw,96px);height:auto;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.note--1{top:6%;left:0}
.note--2{top:16%;right:0;rotate:5deg}
.note--3{bottom:34%;left:2%;rotate:3deg}
.note--4{bottom:14%;right:0;rotate:-6deg}
@media (max-width:899px){
  .hero--tubehead{grid-template-columns:1fr;min-height:0;padding-top:calc(var(--header-h) + 2rem)}
  .hero--tubehead .hero__stage{height:auto}
  .hero--tubehead .hero__figure{height:62svh}
  .hero__notes{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;margin-top:1rem}
  .hero__notes .note{position:static;rotate:0deg;font-size:1.6rem}
  .hero__notes .note svg{display:none}
}