/* ============================================================
   VESTIGE — AW26 "ASH" editorial site (Web Design Lab showcase)
   Monochrome high-fashion film. Typography is everything.
   ============================================================ */
:root {
  --ink: #0a0a0a;          /* near black */
  --ink-2: #141414;        /* panel black */
  --bone: #e8e6e1;         /* bone white */
  --bone-d: #c9c6bf;       /* dim bone */
  --muted: #8d8a83;        /* grey text */
  --acid: #d4ff4d;         /* acid yellow — hover/underline ONLY, sparingly */
  --serif: 'Cormorant Garamond', serif;
  --mono: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Noto Sans JP', system-ui, sans-serif;
  --maxw: 1400px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* photo treatment: total monochrome + crushed contrast */
  --mono-filter: grayscale(1) contrast(1.18) brightness(.86);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; } /* 斜めマーキー(rotate+scale)の断ち落としをルートでクリップ */
body {
  font-family: var(--sans); color: var(--bone); background: var(--ink);
  -webkit-font-smoothing: antialiased; line-height: 1.85;
  overflow-x: clip; /* hiddenはスクロールコンテナ化してlb-stickyを殺す */
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--acid); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body { cursor: none; } }

/* ===== mix-blend custom cursor (PC only) ===== */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 9998; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bone);
  transform: translate(-50%, -50%); mix-blend-mode: difference;
  transition: width .3s var(--ease), height .3s var(--ease);
}
.cursor.hover { width: 80px; height: 80px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ===== film grain overlay (canvas) ===== */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 9000; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
}

/* ===== scroll progress ===== */
.progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 400;
  background: var(--acid);
}

/* ===== nav ===== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 300; display: flex; align-items: center;
  gap: 28px; padding: 22px clamp(18px, 4vw, 50px);
  transition: padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
  mix-blend-mode: difference; color: var(--bone);
}
.nav.solid {
  padding: 14px clamp(18px, 4vw, 50px); mix-blend-mode: normal;
  background: rgba(10, 10, 10, .72); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(232, 230, 225, .12);
}
.brand {
  font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: .14em;
  line-height: 1;
}
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .18em;
  position: relative; padding: 4px 0; color: var(--bone-d); transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--acid); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-tag {
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .2em;
  padding: 6px 12px; border: 1px solid rgba(232, 230, 225, .3); border-radius: 2px;
  white-space: nowrap;
}
.nav-burger { display: none; background: none; border: 0; width: 38px; height: 30px; cursor: pointer; margin-left: auto; }
.nav-burger i { display: block; width: 26px; height: 1.5px; margin: 6px 0 6px auto; background: var(--bone); transition: .35s var(--ease); }

/* ===== shared section chrome ===== */
.section { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(90px, 13vw, 190px) clamp(20px, 5vw, 60px); }
.sec-index {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .25em; color: var(--muted); margin-bottom: 10px;
}
.sec-label {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .25em; color: var(--bone-d); margin-bottom: clamp(40px, 6vw, 80px);
  text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid rgba(232, 230, 225, .14);
}

/* ===== reveal ===== */
[data-reveal] { opacity: 0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  display: grid; place-items: center; background: var(--ink);
}
/* flickering monochrome lookbook stage (JS sets per-frame bg-image) */
.hero-stage {
  position: absolute; inset: 0; background-size: cover; background-position: center 28%;
  filter: var(--mono-filter); transform: scale(1.06);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 30%, rgba(10, 10, 10, .72) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, .55), transparent 26%, transparent 68%, rgba(10, 10, 10, .8));
}
.hero-inner {
  position: relative; z-index: 3; text-align: center; width: 100%;
  padding: 0 clamp(10px, 3vw, 30px); mix-blend-mode: difference;
}
.hero-title {
  font-family: var(--serif); font-weight: 600; line-height: .9; color: var(--bone);
  font-size: clamp(64px, 21vw, 380px); letter-spacing: -.02em;
  display: flex; justify-content: center; flex-wrap: nowrap; white-space: nowrap;
}
.hero-title .ch { display: inline-block; transition: font-style .5s var(--ease), transform .5s var(--ease); }
.hero-title .ch.it { font-style: italic; transform: translateY(-.018em); }
.hero-tagline {
  margin-top: clamp(14px, 2vw, 28px); font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 3.2vw, 40px); font-weight: 500; color: var(--bone); letter-spacing: .02em;
}
.hero-tagline span { font-style: normal; border-bottom: 1px solid var(--acid); padding-bottom: 2px; }
/* corner labels */
.hero-label {
  position: absolute; z-index: 4; font-family: var(--mono); font-weight: 500;
  font-size: clamp(9px, 1.1vw, 12px); letter-spacing: .22em; color: var(--bone);
  mix-blend-mode: difference; white-space: nowrap;
}
.hl-tl { top: clamp(80px, 12vh, 110px); left: clamp(20px, 5vw, 60px); }
.hl-tr { top: clamp(80px, 12vh, 110px); right: clamp(20px, 5vw, 60px); }
.hl-bl { bottom: clamp(56px, 9vh, 80px); left: clamp(20px, 5vw, 60px); }
.hl-br { bottom: clamp(56px, 9vh, 80px); right: clamp(20px, 5vw, 60px); font-variant-numeric: tabular-nums; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4;
  font-family: var(--mono); font-size: 10px; letter-spacing: .32em; color: var(--bone);
  display: grid; justify-items: center; gap: 8px; mix-blend-mode: difference;
}
.hero-scroll span { width: 1px; height: 38px; background: rgba(232, 230, 225, .4); position: relative; overflow: hidden; }
.hero-scroll span::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 45%; background: var(--bone); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(230%); } }

/* ============================================================
   2. MANIFESTO
   ============================================================ */
.manifesto-copy { max-width: 1180px; }
.ml {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 6.6vw, 104px); line-height: 1.08; letter-spacing: -.01em;
  color: var(--bone); overflow: hidden;
  clip-path: inset(0 0 110% 0); transform: translateY(.2em);
  transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.ml.in { clip-path: inset(0 0 -10% 0); transform: none; }
.ml.em { font-style: italic; color: var(--bone-d); padding-left: clamp(20px, 5vw, 90px); }
.manifesto-note {
  max-width: 560px; margin: clamp(50px, 7vw, 90px) 0 0 auto; color: var(--muted);
  font-size: 15px; line-height: 2; text-align: justify;
}

/* ============================================================
   3. LOOKBOOK — sticky horizontal scroll
   ============================================================ */
.lookbook { position: relative; }
.lb-intro {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 11vw, 160px) clamp(20px, 5vw, 60px) clamp(30px, 4vw, 50px);
}
.lb-head {
  font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 9vw, 150px);
  line-height: .9; letter-spacing: -.02em; color: var(--bone);
}
.lb-head em { font-style: italic; color: var(--muted); }
/* outer scroller defines the vertical scroll length; JS sets its height.
   inner sticky pins the viewport; track is translated horizontally. */
.lb-scroller { position: relative; }
.lb-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.lb-track {
  display: flex; align-items: center; height: 100%; width: max-content;
  gap: clamp(40px, 6vw, 110px); padding: 0 clamp(20px, 5vw, 60px); will-change: transform;
}
.look {
  position: relative; flex: 0 0 auto; height: 74vh; width: clamp(280px, 38vh, 460px);
}
.look-fig { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ink-2); }
.look-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: var(--mono-filter); transform: scale(1.04); transition: transform 1.1s var(--ease);
}
.look:hover .look-img { transform: scale(1.1); }
/* huge outline number bleeding behind the figure */
.look-no {
  position: absolute; left: -.32em; top: -.34em; z-index: 0;
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(160px, 30vh, 360px); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 230, 225, .55); pointer-events: none;
}
.look-cap {
  position: absolute; left: 0; bottom: -54px; z-index: 2; width: 100%;
}
.look-cap .lc-en { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--bone); }
.look-cap .lc-jp { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; }
.lb-hint {
  text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  color: var(--muted); padding: 26px 0 clamp(60px, 8vw, 100px);
}

/* ============================================================
   marquee divider
   ============================================================ */
.marquee {
  overflow: hidden; border-top: 1px solid rgba(232, 230, 225, .14);
  border-bottom: 1px solid rgba(232, 230, 225, .14); padding: 22px 0; transform: rotate(-2deg) scale(1.04);
  margin: clamp(20px, 4vw, 50px) 0;
}
.marquee-rev { transform: rotate(2deg) scale(1.04); }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 34s linear infinite; }
.marquee-rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mq-item {
  font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(28px, 5vw, 64px);
  letter-spacing: .02em; color: var(--bone); white-space: nowrap; padding: 0 .4em;
}
.mq-item::after { content: "—"; color: var(--muted); margin-left: .55em; }
.mq-item.alt { color: transparent; -webkit-text-stroke: 1px var(--bone-d); }

/* ============================================================
   4. COLLECTION — text rows + hover full-bleed photo
   ============================================================ */
.collection { position: relative; }
.coll-bleed {
  position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background-size: cover; background-position: center; filter: var(--mono-filter) brightness(.5);
  transition: opacity .6s var(--ease); display: grid; place-items: center;
}
.coll-bleed.show { opacity: 1; }
.coll-bleed-no {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(180px, 38vw, 520px); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 230, 225, .4);
}
.coll-list { position: relative; z-index: 1; list-style: none; }
.coll-row {
  display: grid; grid-template-columns: 56px 1fr 1.1fr auto; align-items: baseline;
  gap: 24px; padding: clamp(20px, 3vw, 34px) 6px; border-top: 1px solid rgba(232, 230, 225, .16);
  transition: padding .45s var(--ease), color .4s; color: var(--bone);
}
.coll-list .coll-row:last-child { border-bottom: 1px solid rgba(232, 230, 225, .16); }
.coll-row:hover { padding-left: 24px; }
.cr-no { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.cr-name {
  font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3.6vw, 50px); line-height: 1.05;
  transition: font-style .4s, color .4s;
}
.coll-row:hover .cr-name { font-style: italic; }
.cr-mat { font-family: var(--sans); font-size: 13px; color: var(--bone-d); }
.cr-mat span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); margin-top: 2px; }
.cr-price { font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .04em; white-space: nowrap; }
.coll-row:hover .cr-price { color: var(--acid); }

/* ============================================================
   5. FILM
   ============================================================ */
.film-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  background: var(--ink-2); border: 1px solid rgba(232, 230, 225, .14);
}
.film-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: var(--mono-filter); transform-origin: 55% 45%;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.24) translate(-2.5%, -2%); }
}
.film-frame.playing .film-img { animation-play-state: running; }
.film-bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.film-bars i { position: absolute; left: 0; width: 100%; height: 8.5%; background: var(--ink); }
.film-bars i:first-child { top: 0; } .film-bars i:last-child { bottom: 0; }
.film-tc {
  position: absolute; left: 18px; bottom: calc(8.5% + 14px); z-index: 3;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--bone);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.film-rec {
  position: absolute; right: 18px; top: calc(8.5% + 14px); z-index: 3;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--bone);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); opacity: 0;
}
.film-frame.playing .film-rec { opacity: 1; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.film-meta {
  position: absolute; right: 18px; bottom: calc(8.5% + 14px); z-index: 3; max-width: 60%; text-align: right;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--bone-d);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.film-play {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; gap: 14px;
  background: rgba(10, 10, 10, .28); border: 0; color: var(--bone); cursor: none;
  font-family: var(--mono); transition: opacity .5s var(--ease), background .5s;
}
.film-frame.playing .film-play { opacity: 0; pointer-events: none; }
.film-play b {
  width: clamp(58px, 8vw, 84px); height: clamp(58px, 8vw, 84px); border-radius: 50%;
  border: 1px solid var(--bone); display: grid; place-items: center; font-size: 20px;
  transition: transform .4s var(--ease), background .4s, color .4s;
}
.film-frame:hover .film-play b { background: var(--bone); color: var(--ink); transform: scale(1.06); }
.film-play span { font-size: 11px; letter-spacing: .3em; }

/* ============================================================
   6. JOURNAL
   ============================================================ */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.jcard { display: block; }
.jcard-fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.jcard-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: var(--mono-filter); transform: scale(1.03); transition: transform 1s var(--ease), filter .8s;
}
.jcard:hover .jcard-img { transform: scale(1.09); }
.jcard-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: .16em; padding: 6px 11px; background: var(--ink); color: var(--bone);
}
.jcard-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; }
.jcard-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }
.jcard-num { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: auto; }
.jcard-title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18;
  margin-top: 8px; transition: font-style .4s;
}
.jcard:hover .jcard-title { font-style: italic; }
.jcard-title::after { content: " →"; font-family: var(--mono); font-size: .55em; color: var(--acid); vertical-align: middle; }

/* ============================================================
   7. STORE
   ============================================================ */
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); }
.store-kicker { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .25em; color: var(--muted); margin-bottom: 22px; }
.store-name { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.01em; }
.store-addr { color: var(--bone-d); font-size: 14px; margin: 18px 0 30px; max-width: 380px; line-height: 1.9; }
.store-hours { display: grid; gap: 0; }
.store-hours > div { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(232, 230, 225, .14); }
.store-hours dt { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); width: 80px; flex: 0 0 auto; padding-top: 2px; }
.store-hours dd { font-family: var(--serif); font-size: 20px; }
.store-list ul { list-style: none; }
.store-list li {
  display: flex; align-items: baseline; gap: 18px; padding: 18px 0;
  border-top: 1px solid rgba(232, 230, 225, .14); transition: padding .4s var(--ease);
}
.store-list li:last-child { border-bottom: 1px solid rgba(232, 230, 225, .14); }
.store-list li:hover { padding-left: 14px; }
.store-list b { font-family: var(--serif); font-weight: 600; font-size: 21px; }
.store-list span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; overflow: hidden; padding-top: clamp(40px, 7vw, 90px); border-top: 1px solid rgba(232, 230, 225, .14); }
.footer-big {
  font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(90px, 27vw, 420px);
  line-height: .78; text-align: center; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 230, 225, .18); white-space: nowrap; user-select: none;
}
.footer-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 4vw, 50px) clamp(20px, 5vw, 60px) 56px; text-align: center; }
.footer-nav { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.footer-nav a { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--bone-d); transition: color .3s; }
.footer-nav a:hover { color: var(--acid); }
.footer-note { color: var(--muted); font-size: 11.5px; max-width: 600px; margin: 0 auto 14px; line-height: 1.8; }
.footer-copy { color: var(--bone-d); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .store-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nav { mix-blend-mode: normal; }
  .nav-tag { display: none; }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center;
    gap: 30px; background: rgba(10, 10, 10, .97); transform: translateX(100%);
    transition: transform .5s var(--ease); margin: 0;
  }
  .nav-links a { font-size: 22px; font-family: var(--serif); letter-spacing: .06em; }
  .nav.open .nav-links { transform: none; }
  .nav-burger { display: block; z-index: 330; }
  .nav.open .nav-burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.open .nav-burger i:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }
  .manifesto-note { text-align: left; }
  .ml.em { padding-left: 0; }
  .coll-row { grid-template-columns: 40px 1fr auto; row-gap: 6px; }
  .cr-mat { grid-column: 2 / -1; }
  .journal-grid { grid-template-columns: 1fr; }
  .film-meta { display: none; }
  /* lookbook → native horizontal swipe (no sticky pin) on mobile */
  .lb-scroller { height: auto !important; }
  .lb-sticky { position: static; height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .lb-track { transform: none !important; height: auto; padding-bottom: 64px; gap: 60px; }
  .look { height: 64vh; width: 76vw; scroll-snap-align: center; }
  .look-no { font-size: 38vw; }
}

/* ===== accessibility — keyboard focus ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 1px;
}
@media (hover: hover) and (pointer: fine) {
  /* hide native cursor only where the custom one is active */
  a, button { cursor: none; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ml { clip-path: none !important; transform: none !important; }
  /* keep one still hero frame instead of flicker; slow the kinetic wave */
  .hero-scroll span::after { animation: none; }
  .film-img { animation: none !important; }
}

/* ===== print ===== */
@media print {
  .nav, .grain, .cursor, .progress, .hero-scroll, .lb-hint, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
}