/* ==========================================================================
   Project detail pages — loaded after style.css.
   Each page sets --pc (project colour), --pc-deep and --pc-cream on <body>.
   ========================================================================== */

body.project { --pc-ink: #1A1A1A; }

/* light heroes (四季插画) keep the transparent nav readable */
.nav--dark:not(.is-solid):not(.is-menu) { color: var(--ink); }
.nav--dark:not(.is-solid):not(.is-menu) :focus-visible { outline-color: var(--ink); }

/* reading progress */
.progress { position: fixed; inset: 0 0 auto; z-index: 120; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- HERO ---------- */

.p-hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--nav-h) + 8px) var(--gutter) clamp(180px, 24vw, 400px);
  background: var(--hero-bg, var(--pc));
  color: var(--hero-ink, var(--white));
  overflow: hidden;
}
.p-hero__meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-size: 12px; }
.p-hero__meta > :last-child { justify-self: end; }
.back-link {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em;
  border: 2px solid currentColor; border-radius: 999px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color .25s, color .25s;
}
.back-link span { transition: transform .4s var(--ease-spring); }
.back-link:hover { background: var(--white); color: var(--pc-deep); }
.back-link:hover span { transform: translateX(-4px); }

.p-hero__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px);
  align-items: end;
  margin-top: clamp(48px, 8vh, 110px);
}
.p-hero__kicker { grid-column: 1 / -1; margin: 0 0 clamp(12px, 2vw, 24px); font-size: 12px; opacity: .9; }
.p-hero__title {
  grid-column: 1 / span 8;
  margin: 0;
  font-weight: 900;
  font-size: clamp(76px, 12.6vw, 216px);
  line-height: .96;
  letter-spacing: -.02em;
}
.p-hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.p-hero__title .line > span { display: inline-block; }
.p-hero__title--latin { font-family: var(--f-head); font-weight: 800; font-size: clamp(58px, 9.6vw, 164px); line-height: .94; letter-spacing: -.04em; }
.p-hero__title--latin em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; }
.p-hero__title .line--wm > span { display: block; padding: .06em 0 .1em; }
.p-hero__wm { display: block; width: min(100%, 880px); height: auto; filter: drop-shadow(0 10px 18px rgba(30, 0, 70, .28)); }
.p-hero__title small {
  display: inline-block;
  margin-left: .35em;
  font-family: var(--f-head); font-weight: 800; font-size: .14em; letter-spacing: .02em;
  vertical-align: .95em;
  padding: .3em .7em; border-radius: 999px; background: var(--ink); color: var(--white);
  transform: rotate(-4deg);
}
.p-hero__side { grid-column: 9 / span 4; padding-bottom: .9em; }
.p-hero__lead { margin: 0 0 24px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; }
.p-hero__slogan {
  display: inline-block; margin: 0;
  padding: .5em .95em .55em;
  border-radius: 14px;
  background: var(--white); color: var(--ink);
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 900; line-height: 1.2;
  box-shadow: 0 12px 24px rgba(90, 30, 5, .22);
  transform: rotate(-3deg);
  transition: transform .5s var(--ease-spring);
}
.p-hero__slogan .pixel { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 400; color: var(--pc-deep); }

.floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float {
  --px: 0px; --py: 0px;
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w); height: auto;
  translate: var(--px) var(--py);
  rotate: var(--r);
  filter: drop-shadow(0 8px 12px rgba(80, 25, 0, .22));
  animation: bob 6s ease-in-out infinite;
  animation-delay: calc(var(--d) * -2s);
}
.float--sticker { filter: drop-shadow(0 10px 14px rgba(80, 25, 0, .3)); }
.float--card { border: clamp(4px, .45vw, 7px) solid var(--white); border-radius: 8px; filter: drop-shadow(0 12px 16px rgba(60, 25, 5, .28)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* entrance */
.js .p-hero__title .line > span { transform: translateY(105%); }
.js .p-hero__meta, .js .p-hero__kicker, .js .p-hero__side, .js .float { opacity: 0; }
.js .p-cover img { opacity: 0; }
.is-ready .p-hero__title .line > span { transform: none; transition: transform 1.1s var(--ease-out); }
.is-ready .p-hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.is-ready .p-hero__meta, .is-ready .p-hero__kicker { opacity: 1; transition: opacity .8s .2s; }
.is-ready .p-hero__side { opacity: 1; transition: opacity .9s .55s; }
.is-ready .float { opacity: 1; transition: opacity .6s; transition-delay: calc(.5s + var(--d) * .25s); }
.is-ready .p-cover img { opacity: 1; transition: opacity 1s .35s; }

/* cover overlapping the hero */
.p-cover {
  position: relative; z-index: 3;
  max-width: var(--maxw);
  margin: calc(-1 * clamp(140px, 19vw, 330px)) auto 0;
  padding: 0 var(--gutter);
}
.p-cover img {
  width: 100%; aspect-ratio: var(--cover-ar, 16 / 9); object-fit: cover;
  border-radius: clamp(16px, 2.2vw, 32px);
  box-shadow: 0 40px 80px rgba(60, 25, 5, .28);
  transform: scale(var(--cs, 1));
  transform-origin: 50% 0;
}

/* ---------- INFO ---------- */

.p-info { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter) 0; }
.p-info__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(16px, 2.4vw, 40px); margin: 0; }
.p-info__list > div { padding-top: 16px; border-top: 2px solid var(--ink); }
.p-info__list dt { margin-bottom: 10px; font-size: 11px; color: var(--coral-ink); }
.p-info__list dd { margin: 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; line-height: 1.55; }

/* ---------- SECTIONS ---------- */

.p-sec {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 170px) var(--gutter) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px);
}
.p-sec__head { grid-column: 1 / span 3; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
.p-sec__no { display: block; margin-bottom: 10px; font-size: 13px; color: var(--coral-ink); }
.p-sec__title { margin: 0; font-size: clamp(28px, 3vw, 46px); line-height: 1; }
.p-sec__title .title-box { box-shadow: 5px 5px 0 var(--pc); }
.p-sec__en { margin: 14px 0 0; font-size: 11px; color: var(--muted); }
.p-sec__body { grid-column: 4 / span 9; min-width: 0; }
.p-sec__body--flush { grid-row: auto; }
.p-sec > :not(.p-sec__head):not(.p-sec__body) { grid-column: 1 / -1; }

.p-lead {
  margin: 0 0 clamp(28px, 3vw, 44px);
  max-width: 19em;
  font-size: clamp(28px, 3.5vw, 54px); font-weight: 900; line-height: 1.24; letter-spacing: -.01em;
}
.p-lead em {
  font-style: normal;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--pc) 42%, transparent) 60%) 0 0 / 0% 100% no-repeat;
  transition: background-size 1.1s var(--ease-out) .3s;
}
.p-lead.is-in em, .no-js .p-lead em { background-size: 100% 100%; }
.p-text { margin: 0 0 clamp(36px, 4vw, 56px); max-width: 36em; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); }

.p-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.p-cols p { margin: 0 0 1em; color: var(--ink-2); }
.challenges { margin: 0; padding: 0; list-style: none; counter-reset: ch; }
.challenges li { position: relative; padding: 0 0 16px 44px; margin-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); counter-increment: ch; }
.challenges li::before {
  content: counter(ch, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--f-pixel); font-size: 12px; color: var(--coral-ink);
}
.challenges b { display: block; color: var(--ink); font-size: 17px; }

.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin: clamp(48px, 5vw, 80px) 0; padding: 0; list-style: none;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.facts li, .counts li {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: start; column-gap: .14em;
}
.facts li { padding: 24px 0 26px; }
.facts li:not(:first-child) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.facts b, .counts b {
  font-family: var(--f-head); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--pc-deep);
}
.facts b { font-size: clamp(34px, 3.6vw, 56px); }
.facts small, .counts small { font-family: var(--f-cn); font-size: clamp(16px, 1.5vw, 22px); font-weight: 900; letter-spacing: 0; color: var(--ink); }
.facts b small { margin-left: .14em; }  /* 「10 年」这类单位留在数字里，样式与其它单位一致 */
.facts span, .counts span {
  grid-column: 1 / -1; margin-top: 12px;
  font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; line-height: 1.5; color: var(--ink-2);
}

.shot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.shot-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .8s var(--ease-out), filter .4s; }
.shot-btn:hover img { transform: scale(1.025); }

.photo-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.photo-pair .shot-btn { overflow: hidden; border-radius: 20px; box-shadow: 0 24px 50px rgba(60, 25, 5, .14); transform: translateY(var(--py, 0px)); }
.photo-pair__a { grid-column: 1 / span 5; aspect-ratio: 686 / 1020; }
.photo-pair__b { grid-column: 6 / span 7; margin-top: clamp(48px, 8vw, 140px); aspect-ratio: 1044 / 1230; }

/* ---------- CONCEPT ---------- */

.concept { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.concept__photo { position: relative; margin: 0; overflow: hidden; border-radius: 24px; }
.concept__photo img { width: 100%; height: 100%; object-fit: cover; }
.concept__photo figcaption {
  position: absolute; left: 14px; bottom: 14px;
  padding: .45em .9em; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 11px;
}
.concept__panel {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.8vw, 44px);
  border-radius: 24px;
  background: var(--pc);
  color: var(--white);
}
.concept__hint { margin: 0 0 18px; font-size: 11px; opacity: .9; }
.symbols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.symbol {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 16px 6px 14px;
  border: 0; border-radius: 16px;
  background: transparent; color: var(--white);
  cursor: pointer;
  transition: background-color .3s;
}
.symbol img { height: clamp(52px, 5.4vw, 86px); width: auto; margin-bottom: 8px; filter: drop-shadow(0 6px 8px rgba(80, 25, 0, .18)); transition: transform .5s var(--ease-spring); }
.symbol b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.symbol span { font-family: var(--f-pixel); font-size: 9.5px; letter-spacing: .04em; opacity: .85; }
.symbol:hover img, .symbol:focus-visible img { transform: translateY(-6px) rotate(-8deg) scale(1.08); }
.symbol.is-active { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.symbol:focus-visible { outline-color: var(--white); }
.wordmark { position: relative; margin: auto 0 0; padding-top: clamp(28px, 4vw, 56px); }
.wordmark::before { content: ""; display: block; aspect-ratio: 1036 / 190; }
.wordmark img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .45s, transform .6s var(--ease-out);
}
.wordmark img.is-active { opacity: 1; transform: none; }
.concept__note { margin: 18px 0 0; font-size: 13px; opacity: .9; }

/* ---------- IDENTITY ---------- */

.block-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 20px; }
.block-head + .logos { margin-bottom: clamp(56px, 6vw, 96px); }
.block-title { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 900; }
.block-note { margin: 0; font-size: 13px; color: var(--muted); }

.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.seg__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .45em 1em; border: 0; border-radius: 999px;
  background: transparent; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.seg__btn i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2); }
.seg__btn.is-active { background: var(--ink); color: var(--paper); }

.logos {
  --tile-bg: #E86D1F; --tile-ink: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  height: clamp(420px, 42vw, 640px);
}
.logos[data-theme="cream"] { --tile-bg: #F7ECDA; --tile-ink: #363030; }
.logos[data-theme="ink"] { --tile-bg: #363030; --tile-ink: #F7ECDA; }
.logo-tile {
  position: relative; margin: 0;
  display: grid; place-items: center;
  border-radius: 22px;
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: background-color .5s var(--ease-out);
  overflow: hidden;
}
.logo-tile--wide { grid-row: 1 / span 2; }
.logo-tile img { width: 62%; max-height: 64%; object-fit: contain; transition: opacity .25s, transform .6s var(--ease-spring); }
.logo-tile--wide img { width: 58%; }
.logo-tile figcaption { position: absolute; left: 18px; bottom: 16px; font-size: 10.5px; color: var(--tile-ink); opacity: .75; transition: color .5s; }
.logos.is-swapping img { opacity: 0; transform: scale(.94); }

.swatches { display: flex; gap: 10px; height: clamp(220px, 20vw, 300px); }
.swatch {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px;
  padding: 18px;
  border: 0; border-radius: 20px;
  background: var(--c); color: var(--t);
  text-align: left; cursor: copy;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: flex-grow .6s var(--ease-out), transform .4s var(--ease-spring);
}
.swatch:hover, .swatch:focus-visible { flex-grow: 2.1; }
.swatch:active { transform: scale(.97); }
.swatch b { font-size: 18px; font-weight: 900; white-space: nowrap; }
.swatch span { font-family: var(--f-pixel); font-size: 10px; letter-spacing: .05em; white-space: nowrap; opacity: .85; }
.swatch code { margin-top: 8px; font-family: var(--f-pixel); font-size: 12px; }

/* ---------- CHARACTER ---------- */

.posters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px);
  margin: 0 calc(50% - 50vw);
  padding: clamp(48px, 6vw, 96px) max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  background: var(--band, var(--pc));
  perspective: 1200px;
}
.posters--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.posters--8 { row-gap: clamp(40px, 4vw, 64px); }
.poster {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
}
.poster img { width: 100%; border-radius: 10px; box-shadow: 0 20px 40px rgba(80, 25, 0, .28); }
.poster:nth-child(odd) { margin-top: clamp(0px, 3vw, 48px); }
.poster__tag {
  position: absolute; left: 50%; bottom: -14px;
  padding: .5em .9em; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: 10.5px; white-space: nowrap;
  transform: translateX(-50%) translateZ(30px);
}
.poster:hover { transition: transform .15s linear; }

.sticker-sheet { margin: clamp(56px, 6vw, 96px) 0 0; }
.sticker-sheet .shot-btn { overflow: hidden; border-radius: 24px; aspect-ratio: 1800 / 920; }
.sticker-sheet__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 16px 0 0; color: var(--ink-2); font-size: 15px; }
.sticker-sheet__cap .pixel, .illo__tags { font-size: 11px; color: var(--coral-ink); }

.illo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(56px, 6vw, 96px); }
.illo__main { overflow: hidden; border-radius: 24px; aspect-ratio: 1110 / 1234; box-shadow: 0 30px 60px rgba(60, 25, 5, .16); }
.illo__text p { margin: 14px 0 0; color: var(--ink-2); }

/* horizontal drag strip — used for the season posters and the merch shelf */
.strip { margin-top: clamp(72px, 8vw, 130px); }
.strip__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.strip__ctrl { display: flex; align-items: center; gap: 12px; }
.text-link { margin-right: 8px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--pc); }
.text-link--btn { padding: 0; border-width: 0 0 2px; background: none; cursor: zoom-in; }
.text-link--btn img { display: none; }
.round-btn--sm { width: 48px; margin-left: 0; font-size: 18px; border: 0; cursor: pointer; background: var(--ink); color: var(--paper); }
.round-btn--sm:disabled { opacity: .3; cursor: default; }
.strip__track {
  display: flex; gap: clamp(14px, 1.6vw, 24px);
  margin: 0 calc(50% - 50vw); padding: 8px max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter))) 24px;
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  scrollbar-width: none;
  cursor: grab;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip__track.is-dragging button { pointer-events: none; }
.strip__track li { flex: 0 0 var(--card-w, clamp(230px, 25vw, 380px)); scroll-snap-align: start; }
.season { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.season img { width: 100%; aspect-ratio: 760 / 1072; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 36px rgba(60, 25, 5, .16); transition: transform .6s var(--ease-out); user-select: none; -webkit-user-drag: none; }
.season:hover img { transform: translateY(-8px) rotate(-1deg); }
.season__name { display: block; margin-top: 16px; font-size: 26px; font-weight: 900; }
.season__items { display: block; margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.strip__bar { height: 3px; margin-top: 8px; background: var(--line); border-radius: 3px; overflow: hidden; }
.strip__bar span { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--sp, .2)); transition: transform .2s; }

/* ---------- APPLICATIONS (bento) ---------- */

.bento {
  --r1: clamp(280px, 34vw, 560px); --r2: clamp(220px, 24vw, 400px); --r3: clamp(260px, 28vw, 460px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: var(--r1) var(--r2) var(--r3) auto;
  gap: clamp(12px, 1.4vw, 20px);
}
.tile { position: relative; margin: 0; min-height: 0; overflow: hidden; border-radius: 22px; background: var(--paper-2); }
.tile .shot-btn { height: 100%; }
.tile--b img { object-position: center 20%; }
.tile figcaption {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  max-width: max-content;
  padding: .55em 1em; border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  pointer-events: none;
  transition: transform .5s var(--ease-out);
}
.tile figcaption b { font-size: 15px; font-weight: 900; }
.tile figcaption span { font-size: 13px; color: var(--muted); }
.tile--a { grid-column: 1 / span 8; grid-row: 1; }
.tile--b { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.tile--c { grid-column: 1 / span 4; grid-row: 2; }
.tile--d { grid-column: 5 / span 4; grid-row: 2; }
.tile--e { grid-column: 1 / span 4; grid-row: 3; }
.tile--f { grid-column: 5 / span 8; grid-row: 3; }
.tile--g { grid-column: 1 / -1; grid-row: 4; }
.tile--g .shot-btn { height: auto; }
.tile--g img { height: auto; }

/* ---------- OUTCOME ---------- */

.counts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--ink);
}
.counts li { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.counts li:not(:nth-child(3n + 1)) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.counts b { font-size: clamp(52px, 5.6vw, 92px); }
.todo-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-top: 28px; padding: 22px 26px;
  border: 2px dashed var(--muted); border-radius: 18px;
  color: var(--ink-2);
}
.todo-card .pixel { font-size: 11px; color: var(--coral-ink); }
.todo-card p { margin: 0; }

/* ---------- NEXT PROJECT ---------- */

.next {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  align-items: end; gap: 24px clamp(24px, 4vw, 64px);
  max-width: var(--maxw);
  margin: clamp(110px, 12vw, 200px) auto 0;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: clamp(24px, 2.6vw, 40px);
  background: var(--nc);
  color: var(--nc-ink);
  text-decoration: none;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter));
}
.next__label { grid-column: 1; grid-row: 1; align-self: start; font-size: 12px; }
.next__title { grid-column: 1; grid-row: 2; font-family: var(--f-head); font-weight: 800; font-size: clamp(44px, 6.6vw, 112px); line-height: .95; letter-spacing: -.03em; }
.next__title em { display: block; font-family: var(--f-serif); font-weight: 400; letter-spacing: 0; }
.next__media { grid-column: 2; grid-row: 1 / span 2; overflow: hidden; border-radius: 18px; box-shadow: 0 30px 60px rgba(60, 40, 5, .22); transform: rotate(3deg); transition: transform .8s var(--ease-out); }
.next__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.next__arrow { position: absolute; right: clamp(20px, 2.6vw, 40px); top: clamp(20px, 2.6vw, 40px); z-index: 2; background: var(--nc-ink); color: var(--nc); }
.next:hover .next__media { transform: rotate(0deg) translateY(-6px); }
.next:hover .next__media img { transform: scale(1.06); }
.next:hover .next__arrow { --rot: -45deg; }
.next + .footer, main + .footer { margin-top: clamp(80px, 9vw, 140px); }

/* ---------- LIGHTBOX ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 160;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 72px clamp(12px, 3vw, 40px) 28px;
  background: rgba(22, 16, 12, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--white);
  opacity: 0;
  transition: opacity .35s;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox .round-btn { --pc-ink: var(--white); --pc: var(--ink); margin: 0; border: 0; cursor: pointer; }
.lightbox__close { position: absolute; right: clamp(12px, 3vw, 40px); top: 16px; width: 48px; font-size: 26px; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lightbox__figure img {
  max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.96); transition: transform .45s var(--ease-out), opacity .25s;
}
.lightbox.is-open .lightbox__figure img { transform: none; }
.lightbox__figure img.is-loading { opacity: 0; }
.lightbox figcaption { display: flex; gap: 14px; align-items: baseline; font-size: 15px; text-align: center; }
.lightbox figcaption .pixel { font-size: 11px; opacity: .7; }

/* ==========================================================================
   Shared building blocks for the later case pages
   ========================================================================== */

.p-wide { margin: clamp(40px, 5vw, 72px) 0 0; }
.p-wide .shot-btn { overflow: hidden; border-radius: clamp(14px, 1.8vw, 24px); box-shadow: 0 24px 50px rgba(60, 25, 5, .14); }
.p-wide figcaption, .film figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.p-wide figcaption .pixel, .film figcaption .pixel { font-size: 11px; color: var(--coral-ink); }
.block-head--gap { margin-top: clamp(56px, 6vw, 96px); }

/* justified rows: children grow by their aspect ratio, so every image in a row shares one height */
.jrow { --g: clamp(10px, 1.2vw, 18px); display: flex; gap: var(--g); align-items: flex-start; }
.jrow > * { flex: calc(var(--ar)) 1 0%; min-width: 0; margin: 0; }   /* calc() turns "800/1161" into a number */
.jrow img { aspect-ratio: var(--ar); }
.jrow + .jrow, .jrow + .split, .split + .jrow, .split + .split { margin-top: clamp(10px, 1.2vw, 18px); }
.split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(10px, 1.2vw, 18px); align-items: start; }
.split--3-9 { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.split__col { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.media { margin: 0; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 14px 30px rgba(60, 25, 5, .1); }
.media .shot-btn img { width: 100%; height: auto; }
.media--plain { background: transparent; box-shadow: none; }

.film { display: grid; gap: clamp(28px, 3vw, 44px); }
.film figure { margin: 0; }
.film .shot-btn { overflow: hidden; border-radius: clamp(14px, 1.8vw, 24px); box-shadow: 0 24px 50px rgba(20, 5, 40, .25); }

.bento3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.bento3 .tile { aspect-ratio: 16 / 9; }
.bento3 .tile:first-child { grid-column: 1 / -1; }

/* magnifier lens (fine pointers): .magnify wraps an <img data-hi> */
.magnify { position: relative; cursor: zoom-in; }
.lens {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: var(--lens, 200px); height: var(--lens, 200px);
  border: 4px solid var(--white); border-radius: 50%;
  background-color: var(--paper-2); background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.5);
  transition: opacity .2s, transform .35s var(--ease-spring);
}
.magnify.is-zooming .lens { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   02 · MIE TANTE IEN
   ========================================================================== */

.char-sheet { margin: 0; padding: clamp(20px, 3vw, 48px) clamp(16px, 3vw, 48px) clamp(18px, 2.4vw, 32px); border-radius: 24px; background: var(--pc-cream); }
.char-sheet img { width: 100%; }
.traits { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: clamp(16px, 2vw, 26px) 0 0; padding: 0; list-style: none; }
.traits li {
  padding: .35em 1em; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--white); font-weight: 900; box-shadow: 3px 3px 0 var(--pc);
  transform: rotate(var(--r, 0deg));
}

.actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vw, 16px);
  margin: 0; padding: clamp(14px, 2.2vw, 34px); list-style: none;
  border-radius: 28px; background: var(--pc-cream);
}
.action {
  display: grid; justify-items: center; align-content: end; gap: 4px;
  width: 100%; height: 100%; padding: 14px 6px 16px;
  border: 0; border-radius: 20px; background: transparent;
  cursor: zoom-in; transition: background-color .3s;
}
.action img {
  height: clamp(110px, 13vw, 200px); width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px;
  filter: drop-shadow(0 8px 10px rgba(120, 60, 0, .18));
  transform-origin: 50% 100%;
}
.action b { font-size: clamp(14px, 1.2vw, 17px); font-weight: 900; line-height: 1.3; }
.action span { font-family: var(--f-pixel); font-size: 10px; letter-spacing: .05em; color: var(--muted); }
.action:hover, .action:focus-visible { background: rgba(255, 255, 255, .55); }
.action:hover img, .action:focus-visible img { animation: hop .7s var(--ease-spring); }

/* slot machine */
.slot-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.slot-wrap__text p { margin: 0 0 1em; color: var(--ink-2); }
.slot-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 64px) clamp(16px, 3vw, 48px);
  border-radius: 28px; background: var(--pc-cream);
}
.slot-tape {
  position: absolute; left: -10%; z-index: -1; width: 120%;
  padding: .3em 0; background: var(--pc); color: var(--white);
  font-family: var(--f-display); font-size: clamp(14px, 1.6vw, 24px); letter-spacing: .04em; white-space: nowrap;
  transform: rotate(var(--r));
}
.slot {
  --cell: clamp(72px, 8.4vw, 128px);
  position: relative;
  width: min(100%, calc(var(--cell) * 3 + 120px));
  padding: 14px 14px 18px;
  border: 3px solid #2B1A0E; border-radius: 22px 22px 14px 14px;
  background: var(--pc);
  box-shadow: 0 24px 40px rgba(120, 60, 0, .25);
}
.slot__brand { margin: 0 0 12px; padding: .2em 0; border: 3px solid #2B1A0E; border-radius: 14px; background: var(--white); color: var(--pc); font-family: var(--f-display); font-size: calc(var(--cell) * .28); text-align: center; letter-spacing: .06em; }
.slot__screen { display: flex; gap: 10px; padding: 12px; border: 3px solid #2B1A0E; border-radius: 16px; background: var(--white); }
.slot__reel { flex: 1; height: var(--cell); overflow: hidden; border-radius: 14px; border: 3px solid #2B1A0E; background: var(--pc); }
.slot__strip { --pos: 0; transform: translateY(calc(var(--pos) * var(--cell) * -1)); }
.slot__strip.is-spinning { transition: transform var(--dur, 1.6s) cubic-bezier(.2, .7, .15, 1); }
.slot__strip img { display: block; width: 100%; height: var(--cell); object-fit: cover; }
.slot__labels { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.slot__labels li { padding: .1em .7em; border: 2px solid #2B1A0E; border-radius: 999px; background: #C4621A; color: var(--white); font-size: clamp(11px, 1vw, 14px); font-weight: 700; white-space: nowrap; }
.slot__lever {
  position: absolute; right: -34px; top: 22%;
  width: 30px; height: 46%; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%; transition: transform .25s var(--ease-out);
}
.slot__lever::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 0; width: 7px; border-radius: 4px; background: #C4621A; box-shadow: 0 0 0 2px #2B1A0E; }
.slot__lever::after { content: ""; position: absolute; left: 1px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #C4621A; box-shadow: 0 0 0 3px #2B1A0E; }
.slot__lever.is-pulled { transform: scaleY(-.6); }
.slot-stage .btn { margin-top: 24px; }

/* merch shelf cards */
.shelf-card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.shelf-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 18px; background: var(--pc-cream);
  box-shadow: 0 18px 36px rgba(60, 25, 5, .14);
  transition: transform .6s var(--ease-out);
  user-select: none; -webkit-user-drag: none;
}
.shelf-card:hover img { transform: translateY(-8px) rotate(-1deg); }
.shelf-card b { display: block; margin-top: 16px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 900; }
.shelf-card span { display: block; margin-top: 4px; max-width: 30em; font-size: 14px; color: var(--muted); }

/* ==========================================================================
   03 · NIGHTBIRD — the one dark page
   ========================================================================== */

body.theme-night { background: #150A2B; }
.theme-night main {
  --paper: #150A2B; --paper-2: #24154A; --ink: #F3EEFF; --ink-2: #CFC5EE; --muted: #A398CB;
  --line: rgba(255, 255, 255, .16); --coral-ink: #C2AFFF;
  color: var(--ink);
}
.theme-night .title-box { color: #1A1A1A; border-color: #1A1A1A; }
.theme-night .p-hero__slogan { color: #1A1A1A; }
.theme-night .poster__tag { color: #1A1A1A; }
.theme-night .nav.is-solid { background: rgba(21, 10, 43, .86); color: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
.theme-night .nav.is-solid :focus-visible { outline-color: var(--white); }
.theme-night .facts b, .theme-night .counts b { color: var(--pc-cream); }
.theme-night .facts small, .theme-night .counts small, .theme-night .facts span, .theme-night .counts span { color: inherit; }
.theme-night .progress span { background: #C2AFFF; }
.theme-night .footer .torn-edge { fill: #150A2B; }
.theme-night .p-cover img { box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }

.wm { display: block; width: 100%; aspect-ratio: 1009 / 161; background-color: var(--fg); transition: background-color .5s var(--ease-out);
  -webkit-mask: url("../assets/work/nightbird/wordmark.webp") center / contain no-repeat;
  mask: url("../assets/work/nightbird/wordmark.webp") center / contain no-repeat; }
.wm-lab { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.wm-lab__stage {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 7; padding: 0 9%;
  border-radius: 24px; background-color: var(--bg); transition: background-color .5s var(--ease-out);
}
.wm-lab__name { position: absolute; left: 20px; bottom: 16px; padding: .4em .8em; border-radius: 999px; background: rgba(0, 0, 0, .78); color: var(--white); font-size: 10.5px; }
.wm-lab__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wm-swatch {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0 14%;
  border: 0; border-radius: 14px; background-color: var(--bg); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .4s var(--ease-spring), box-shadow .25s;
}
.wm-swatch:hover { transform: translateY(-4px); }
.wm-swatch.is-active { box-shadow: 0 0 0 3px var(--ink); }

.gfx {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 24px);
  margin: clamp(40px, 5vw, 72px) 0 0; padding: clamp(22px, 3vw, 48px); list-style: none;
  border-radius: 28px; background: var(--paper-2);
}
.gfx li { display: grid; justify-items: center; align-content: end; gap: 12px; min-height: clamp(140px, 14vw, 210px); text-align: center; }
.gfx img {
  max-height: clamp(84px, 8.6vw, 136px); width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
  transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease-spring);
}
.gfx span { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   04 · SEASONS
   ========================================================================== */

.illo2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(16px, 2.6vw, 44px); align-items: center; }
.illo2__main { overflow: hidden; border-radius: 22px; aspect-ratio: 1110 / 1234; box-shadow: 0 30px 60px rgba(60, 25, 5, .16); }
.illo2__main img { width: 100%; height: 100%; object-fit: cover; }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 0; padding: 0; list-style: none; }
.dgrid .shot-btn { overflow: hidden; border-radius: 14px; aspect-ratio: 1; }
.dgrid figure { margin: 0; }
.dgrid figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; }

.sv {
  --st: #C8463A;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center;
  margin: 0 calc(50% - 50vw);
  padding: clamp(48px, 6vw, 96px) max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--st) 16%, var(--paper));
  transition: background-color .7s var(--ease-out);
}
.sv__poster { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 16px; box-shadow: 0 30px 60px rgba(60, 25, 5, .22); }
.sv__poster img { width: 100%; aspect-ratio: 760 / 1072; object-fit: cover; border-radius: 16px; transition: opacity .3s; }
.sv__poster.is-swapping img { opacity: 0; }
.sv__hint { margin: 14px 0 0; font-size: 10.5px; color: var(--muted); text-align: center; }
.sv__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sv__tab {
  padding: .45em 1.1em; border: 2px solid var(--ink); border-radius: 999px;
  background: transparent; font-size: 16px; font-weight: 900; cursor: pointer;
  transition: background-color .25s, color .25s, transform .35s var(--ease-spring);
}
.sv__tab:hover { transform: translateY(-2px); }
.sv__tab.is-active { background: var(--st); border-color: var(--st); color: var(--white); }
.sv__en { margin: clamp(28px, 3vw, 44px) 0 0; font-size: 12px; color: var(--muted); }
.sv__name { margin: .05em 0 .1em; font-size: clamp(72px, 9vw, 150px); font-weight: 900; line-height: 1; letter-spacing: .02em; color: var(--st); transition: color .5s; }
.sv__items { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; }
.sv__details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv__details .shot-btn { overflow: hidden; border-radius: 12px; aspect-ratio: 1; box-shadow: 0 10px 20px rgba(60, 25, 5, .12); }
.sv__details img { transition: opacity .3s, transform .8s var(--ease-out); }
.sv.is-swapping .sv__details img { opacity: 0; }
.sv__nav { display: flex; gap: 10px; margin-top: 22px; }

.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cards4 .shot-btn { overflow: hidden; border-radius: 16px; aspect-ratio: 1; box-shadow: 0 14px 28px rgba(60, 25, 5, .12); }
.cards4 b { display: block; margin: 16px 0 4px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 900; }
.cards4 p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
   OPS — grouped campaign work
   ========================================================================== */

.subnav {
  position: sticky; top: var(--nav-h); z-index: 60;
  max-width: var(--maxw); margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 10px var(--gutter);
  transition: transform .45s var(--ease-out);
}
body:has(.nav.is-hidden) .subnav { transform: translateY(calc(-1 * var(--nav-h))); }
.subnav__list {
  display: flex; gap: 6px; width: max-content; max-width: 100%;
  margin: 0; padding: 6px; list-style: none;
  border-radius: 999px; background: rgba(247, 242, 232, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(60, 25, 5, .08);
  overflow-x: auto; scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: .4em 1em; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background-color .25s, color .25s; }
.subnav a:hover { background: var(--paper-2); }
.subnav a.is-current { background: var(--ink); color: var(--paper); }

[data-subnav] ~ .p-sec, [data-subnav] ~ .p-sec .grp { scroll-margin-top: 64px; }
.mstack { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.jrow--narrow { max-width: 820px; margin-inline: auto; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.grp + .grp { margin-top: clamp(72px, 8vw, 128px); }
.grp__badge {
  grid-column: 2; grid-row: 1 / span 3; justify-self: end; align-self: start;
  width: clamp(84px, 8vw, 124px); padding: 0; overflow: hidden;
  border: 5px solid var(--white); border-radius: 12px; background: var(--white);
  box-shadow: 0 10px 24px rgba(60, 25, 5, .18); transform: rotate(5deg); cursor: zoom-in;
  transition: transform .5s var(--ease-spring);
}
.grp__badge:hover { transform: rotate(-2deg) scale(1.06); }
.grp__head--badge .grp__tags, .grp__head--badge .grp__desc { grid-column: 1; }
.grp__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: start; margin-bottom: clamp(20px, 2.4vw, 32px); }
.grp__name { margin: 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 900; line-height: 1.25; }
.grp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.grp__tags li { padding: .2em .8em; border: 1.5px solid var(--coral-ink); border-radius: 999px; color: var(--coral-ink); font-size: 12px; font-weight: 700; }
.grp__desc { grid-column: 1 / -1; margin: 6px 0 0; max-width: 40em; color: var(--ink-2); }
.grp__sub { margin: clamp(32px, 3.4vw, 48px) 0 14px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 900; }
.grp__sub small { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }

.wx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.wx__phone {
  position: relative;
  height: clamp(460px, 44vw, 660px);
  border: 9px solid #1A1A1A; border-radius: 34px;
  background: var(--white);
  overflow-y: auto; overscroll-behavior-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent;
  box-shadow: 0 24px 50px rgba(60, 25, 5, .2);
}
.wx__phone::before { content: ""; position: sticky; top: 8px; z-index: 2; display: block; width: 36%; height: 18px; margin: 8px auto -26px; border-radius: 999px; background: #1A1A1A; }
.wx__phone img { width: 100%; }
.wx b { display: block; margin-top: 16px; font-size: 17px; font-weight: 900; }
.wx span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.wx-hint { margin: 0 0 18px; font-size: 11px; color: var(--muted); }

/* ==========================================================================
   Responsive for the blocks above
   ========================================================================== */

@media (max-width: 1100px) {
  .p-sec > .sv, .p-sec > .strip { margin-top: 0; }
  .sv { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

@media (max-width: 900px) {
  .split, .split--3-9, .slot-wrap, .illo2 { grid-template-columns: 1fr; }
  .posters--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gfx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv { grid-template-columns: 1fr; }
  .sv__stage { max-width: 480px; }
  .wm-lab__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wx { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .wx > li { scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action img { height: 120px; }
  .jrow--wrap { flex-wrap: wrap; }
  .jrow--wrap > * { flex: 1 1 calc(50% - var(--g)); }
  .jrow--scroll { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .jrow--scroll > * { flex: 0 0 68%; scroll-snap-align: start; }
  .posters--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gfx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento3 { grid-template-columns: 1fr; }
  .wm-lab__stage { aspect-ratio: 4 / 3; }
  .sv__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grp__head { grid-template-columns: 1fr; }
  .grp__badge { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .wx { grid-auto-columns: 78%; }
  .wx__phone { height: 560px; }
  .slot { --cell: 76px; }
  .slot__lever { right: -26px; width: 24px; }
  .slot__lever::after { width: 22px; height: 22px; left: 1px; }
  .slot__lever::before { left: 9px; width: 6px; }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {
  .p-sec { display: block; }
  .p-sec__head { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: clamp(28px, 4vw, 44px); }
  .p-sec__no { margin: 0; }
  .p-sec__en { margin: 0; }
  .p-sec__body { margin-bottom: 0; }
  .p-sec > .posters, .p-sec > .bento { margin-top: 0; }
  .p-sec > .p-sec__body + .posters { margin-top: 8px; }
  .p-hero__title { grid-column: 1 / -1; }
  .p-hero__side { grid-column: 1 / span 8; padding-top: 28px; }
  .float:nth-child(1) { --x: 70% !important; --y: 22% !important; }
  .float:nth-child(4) { --x: 88% !important; --y: 40% !important; }
  .float--sticker { --x: 76% !important; --y: 56% !important; }
}

@media (max-width: 900px) {
  .p-hero { --hero-pb: clamp(150px, 30vw, 260px); padding-bottom: var(--hero-pb); }
  .p-hero__meta { grid-template-columns: 1fr auto; }
  .p-hero__meta > :nth-child(2) { display: none; }
  .p-hero__side { grid-column: 1 / -1; }
  .p-cover { margin-top: calc(-1 * clamp(110px, 22vw, 210px)); }
  .p-info__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:not(:first-child) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .concept { grid-template-columns: 1fr; }
  .concept__photo { aspect-ratio: 4 / 3; }
  .logos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .logo-tile { aspect-ratio: 4 / 3; }
  .logo-tile--wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .poster:nth-child(odd) { margin-top: 0; }
  .poster:nth-child(even) { margin-top: 32px; }
  .illo { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .tile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .tile--a, .tile--f, .tile--g { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9; }
  .tile--b { aspect-ratio: 3 / 4; }
  .tile--g { aspect-ratio: auto; }
  .next { grid-template-columns: 1fr; grid-template-rows: auto; }
  .next__label, .next__title, .next__media { grid-column: 1; grid-row: auto; }
  .next__media { transform: rotate(2deg); margin-top: 12px; }
}

@media (max-width: 600px) {
  .p-hero__head { margin-top: 56px; }
  .p-hero__title { font-size: clamp(64px, 20vw, 96px); }
  .p-hero__title small { display: block; width: max-content; margin: 12px 0 0; font-size: 13px; vertical-align: 0; }
  .float:not(.float--sticker):not(:nth-child(2)) { display: none; }
  .float:nth-child(2) { --w: 48px !important; --x: 80% !important; --y: 24% !important; }
  .float--sticker { --w: 92px !important; --x: 66% !important; --y: calc(100% - var(--hero-pb) - 96px) !important; }
  .p-info__list { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .p-lead { font-size: 26px; }
  .photo-pair__a { grid-column: 1 / span 6; }
  .photo-pair__b { grid-column: 7 / span 6; margin-top: 56px; }
  .symbols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .symbol { padding: 10px 2px; }
  .symbol img { height: 40px; }
  .symbol b { font-size: 12px; }
  .symbol span { display: none; }
  .seg { width: 100%; }
  .seg__btn { flex: 1; justify-content: center; padding: .5em .4em; }
  .logos { grid-template-columns: 1fr; }
  .logo-tile, .logo-tile--wide { aspect-ratio: 4 / 3; grid-column: auto; }
  .swatches { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .swatch { min-height: 120px; }
  .swatch:hover, .swatch:focus-visible { flex-grow: 1; }
  .posters { gap: 14px; row-gap: 36px; }
  .strip__ctrl .round-btn { display: none; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--b { aspect-ratio: 4 / 3; }
  .tile--g { aspect-ratio: auto; }
  .tile figcaption { padding: .45em .8em; }
  .tile figcaption span { display: none; }
  .counts { grid-template-columns: 1fr 1fr; }
  .counts li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .counts li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .lightbox { grid-template-columns: 1fr; padding-inline: 10px; }
  .lightbox__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .p-hero__title .line > span { transform: none; }
  .js .p-hero__meta, .js .p-hero__kicker, .js .p-hero__side, .js .float, .js .p-cover img { opacity: 1; }
  .p-lead em { background-size: 100% 100%; }
}

/* 可放大的图：右下角常驻放大角标（手机上没有悬停，靠它看出能点；光标是 1 档空心圈，不再有 ZOOM 黑圆） */
.shot-btn, .season, .shelf-card { position: relative; }
.shot-btn::after, .poster::after, .season::after, .shelf-card::after {
  content: "+";
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--white); color: var(--ink);
  font: 900 18px/1 var(--f-head);
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  transition: transform .35s var(--ease-spring);
}
.dgrid .shot-btn::after, .sv__details .shot-btn::after, .cards4 .shot-btn::after { right: 6px; bottom: 6px; width: 22px; height: 22px; font-size: 15px; }
.shot-btn:hover::after, .poster:hover::after, .season:hover::after, .shelf-card:hover::after,
.shot-btn:focus-visible::after, .poster:focus-visible::after { transform: rotate(90deg) scale(1.12); }