/* Averythink site: page layout and motion on top of the design system (tokens.css + components.css).
   Positions follow the wireframe canvas "Averythink · Haoqi" (desktop 1440, mobile 390). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }
body { position: relative; margin: 0; min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, canvas { display: block; }
button { font: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
::selection { background: var(--tech); color: var(--on-tech); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; z-index: 100; left: var(--space-4); top: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper); font-family: var(--font-hud); font-size: 14px; text-decoration: none; transform: translateY(-300%); }
.skip:focus { transform: none; }
[id] { scroll-margin-top: 0; }

/* The page-long column lines sit behind everything; sections with their own ground draw their own lines */
.pagegrid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* + marks where the grid lines cross (rows at a third and two thirds of the section) */
.cross--c1 { left: var(--avt-margin); }
.cross--c2 { left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) / 3); }
.cross--c3 { left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) * 2 / 3); }
.cross--c4 { left: calc(100% - var(--avt-margin)); }
.cross--r1 { top: 33.333%; }
.cross--r2 { top: 66.667%; }

/* ---------- HUD (fixed frame) ---------- */
.hud { position: fixed; z-index: 50; left: 0; right: 0; top: var(--hud-top); pointer-events: none; }
.hud .avt-hudbar__logo, .hud .avt-hudbar__nav, .hud .avt-hudbar__menu { pointer-events: auto; }
.hud .avt-hudbar__logo, .hud .avt-hudbar__nav a { transition: color 0.3s ease; }
.hud .avt-hudbar__menu span { transition: background-color 0.3s ease; }
.avt-hudbar__nav a.is-current { color: var(--tech-text); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 6px; }
.hud.is-screen .avt-hudbar__logo, .hud.is-screen .avt-hudbar__nav a { color: var(--screen-text); }
.hud.is-screen .avt-hudbar__nav a:hover { color: var(--screen-muted); }
.hud.is-screen .avt-hudbar__menu span { background: var(--screen-text); }

.hudfoot { position: fixed; z-index: 50; left: 0; right: 0; bottom: var(--hud-bottom); pointer-events: none; transition: opacity 0.35s ease, color 0.3s ease; }
.hudfoot.is-hidden { opacity: 0; }
.hudfoot.is-screen { color: var(--screen-text); }
.hudfoot__time { display: inline-flex; align-items: center; }
.hudfoot__short { display: none; }
.hudfoot__build { display: inline-flex; align-items: center; gap: var(--space-5); }
.hudfoot__buildlabel { color: var(--tech-text); transition: color 0.3s ease; }
.hudfoot.is-screen .hudfoot__buildlabel { color: var(--screen-text); }
.avt-scrollmark { position: fixed; z-index: 50; top: 96px; transition: background-color 0.3s ease; will-change: transform; }
.avt-scrollmark.is-screen { background: var(--screen-text); }
/* A soft halo in the ground colour keeps the fixed HUD readable where it passes over photos */
.hud .avt-hudbar__logo, .hud .avt-hudbar__nav a, .hudfoot { text-shadow: 0 0 2px var(--paper), 0 0 8px var(--paper), 0 0 16px var(--paper); }
.hud .avt-hudbar__menu span, .avt-scrollmark { box-shadow: 0 0 6px var(--paper); }
.hudfoot .avt-hudfoot__globe, .hudfoot .avt-hudfoot__rec, .hudfoot .avt-hudfoot__dot { filter: drop-shadow(0 0 3px var(--paper)); }
.hud.is-screen .avt-hudbar__logo, .hud.is-screen .avt-hudbar__nav a, .hudfoot.is-screen { text-shadow: 0 0 2px var(--screen), 0 0 8px var(--screen); }
.hud.is-screen .avt-hudbar__menu span, .avt-scrollmark.is-screen { box-shadow: 0 0 6px var(--screen); }
.hudfoot.is-screen .avt-hudfoot__globe, .hudfoot.is-screen .avt-hudfoot__rec, .hudfoot.is-screen .avt-hudfoot__dot { filter: drop-shadow(0 0 3px var(--screen)); }

/* ---------- mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: var(--hud-top) 0 var(--space-8); background: var(--glow-tech), var(--glow-production), var(--paper); opacity: 0; transition: opacity 0.25s ease; }
.menu.is-open { opacity: 1; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--grid-margin-mobile); }
.menu__close { position: relative; width: var(--target-min); height: var(--target-min); padding: 0; border: 0; background: none; cursor: pointer; }
.menu__close span { position: absolute; right: 10px; top: 21px; width: 24px; height: 2px; background: var(--ink); }
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }
.menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-10) var(--hud-inset-mobile) 0; }
.menu__nav a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; }
.menu__nav a:hover { color: var(--tech-text); }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: auto; padding: 0 var(--hud-inset-mobile); }
.menu__foot a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; height: 100svh; min-height: 720px; overflow: hidden; }
.hero__role { position: absolute; z-index: 3; top: 103px; left: var(--hud-inset); font-size: 30px; line-height: 1.25; font-weight: 500; }
.hero__caption { position: absolute; z-index: 3; top: 105px; left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) / 3 + var(--space-2)); }
.hero__intro { position: absolute; z-index: 3; top: 105px; left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) * 2 / 3 + var(--space-2)); right: var(--hud-inset); }
.hero__art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__think { position: absolute; left: 50%; top: 29%; width: min(62%, 900px); height: auto; transform: translateX(-50%); transition: opacity 0.6s ease; }
.hero__cursor { position: absolute; left: calc(100% - 245px); top: 64%; width: 122px; height: auto; overflow: visible; transition: opacity 0.6s ease; }
.hero__spark { display: none; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.hero.has-3d .hero__canvas { opacity: 1; }
.hero.has-3d .hero__think, .hero.has-3d .hero__cursor { opacity: 0; }
.hero__title { position: absolute; z-index: 3; left: var(--hud-inset); bottom: 109px; }

/* ---------- about ---------- */
.about { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 100px var(--avt-margin) 140px; }
.about__portrait { grid-column: 1 / span 3; margin: 0 var(--space-2); }
.about__portrait img { object-position: 30% 50%; }
.about__text { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 28px; padding: 0 var(--space-2); margin-top: -4px; }
.js .about .avt-portrait__sign { clip-path: inset(-30% 100% -30% -10%); transition: clip-path 1.6s cubic-bezier(0.6, 0.1, 0.2, 1) 0.2s; }
.js .about.is-in .avt-portrait__sign { clip-path: inset(-30% -10% -30% -10%); }

/* ---------- work ---------- */
.work { position: relative; z-index: 1; padding: var(--space-10) 0 120px; }
.work__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; padding: 0 var(--hud-inset); }
.work__kicker { font: inherit; letter-spacing: inherit; }
.work__grid { margin-top: var(--space-8); }
.work-card[data-slot="0"] { grid-column: 5 / span 8; }
.work-card[data-slot="1"] { grid-column: 1 / span 5; }
.work-card[data-slot="2"] { grid-column: 7 / span 5; }
.work-card[data-slot="3"] { grid-column: 6 / span 3; }
.work-card[data-slot="4"] { grid-column: 10 / span 3; }
.work-card[data-slot="5"] { grid-column: 1 / span 3; }
.work-card[data-slot="6"] { grid-column: 5 / span 3; }
.work-card[data-slot="7"] { grid-column: 9 / span 3; }
.work-card[data-slot="8"] { grid-column: 6 / span 3; }
.work-card[data-slot="9"] { grid-column: 10 / span 3; }
.work-card[data-slot="0"] .avt-card__media, .work-card[data-slot="1"] .avt-card__media, .work-card[data-slot="2"] .avt-card__media { aspect-ratio: 16 / 9; }
.work-card[data-slot="3"] .avt-card__media, .work-card[data-slot="4"] .avt-card__media { aspect-ratio: 3 / 2; }
.work-card[data-slot="5"] .avt-card__media, .work-card[data-slot="6"] .avt-card__media, .work-card[data-slot="7"] .avt-card__media { aspect-ratio: 3 / 4; }
.work-card[data-slot="8"] .avt-card__media, .work-card[data-slot="9"] .avt-card__media { aspect-ratio: 1 / 1; }
.work-card .avt-card__media img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work-card:hover .avt-card__media img { transform: scale(1.035); }
.work-card .avt-card__title { transition: color 0.2s ease; }
.work__grid.is-filtering .work-card { animation: avt-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.work__clients { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); padding: var(--space-11) var(--hud-inset) 0; }

/* ---------- bridge: the arrow between work and services ---------- */
.bridge { position: relative; z-index: 1; height: 720px; overflow: hidden; }
.bridge__arrow { position: absolute; left: 50%; top: 50%; width: 200px; transform: translate(-50%, -50%); }
.bridge__svg { width: 100%; height: auto; overflow: visible; }

/* ---------- services ---------- */
.services { position: relative; z-index: 1; padding: var(--space-10) var(--avt-margin); }
.services__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 64px; }
.services__grid .avt-sechead__intro { align-self: start; line-height: 1.6; }
.services__col[id="agency"] { grid-column: 5 / span 4; }
.services__col[id="tech"] { grid-column: 9 / span 4; }
.services__col { scroll-margin-top: 120px; }
.services__col h3 { margin: 2px 0 0; }

/* ---------- packages ---------- */
.packages { position: relative; z-index: 1; padding: var(--space-10) var(--avt-margin) 120px; }
.packages__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 64px; }
.packages__tabs { grid-column: 1 / span 4; align-self: start; padding: 0 var(--space-2); }
.packages__panels { grid-column: 5 / span 8; }
.packages__panel-title { margin: 0 0 var(--space-3); padding: 0 var(--space-2); color: var(--ink-muted); font-size: 14px; }
.js .packages__panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-js .packages__panel[hidden] { display: block !important; margin-top: var(--space-8); }
.no-js .packages__tabs { display: none; }
.packages__panel.is-entering .avt-package { animation: avt-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.packages__panel.is-entering .avt-package:nth-child(2) { animation-delay: 0.05s; }
.packages__panel.is-entering .avt-package:nth-child(3) { animation-delay: 0.1s; }
.packages__panel.is-entering .avt-package:nth-child(n+4) { animation-delay: 0.15s; }
.packages__note { margin-top: var(--space-6); padding: 0 var(--space-2); line-height: 1.7; }

/* ---------- warp: the dark screen interlude ---------- */
.warp { position: relative; z-index: 1; background: var(--screen); color: var(--screen-text); }
.js .warp { height: calc(var(--steps) * 100svh); }
.warp__screen { min-height: 640px; }
.js .warp__screen { position: sticky; top: 0; }
.warp__fade { position: absolute; inset: 0; background: var(--screen-fade); opacity: var(--fade, 0); pointer-events: none; }
.warp__static { position: absolute; inset: 0; }
.warp__rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp.is-live .warp__static { display: none; }
.warp__steps { margin: 0; padding: 0; list-style: none; }
.warp__step { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.warp__step.is-active { opacity: 1; }
.warp__step .avt-warp__statement { transform: translateY(-50%) scale(0.94); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.warp__step.is-active .avt-warp__statement { transform: translateY(-50%); }
.warp__step .avt-rings span { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.warp__step:not(.is-active) .avt-rings span { transform: translate(-50%, -50%) scale(0.6); }
.warp__step .avt-warp__float { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.warp__step:not(.is-active) .avt-warp__float { opacity: 0; transform: translateY(16px); }
.warp__step.is-active .warp__float--2 { transition-delay: 0.1s; }
.warp__step.is-active .warp__float--3 { transition-delay: 0.2s; }
.warp__step.is-active .warp__float--4 { transition-delay: 0.3s; }
.warp__float--1 { left: 52%; top: 18%; }
.warp__float--2 { left: 66%; top: 40%; }
.warp__float--3 { left: 13%; top: 55%; }
.warp__float--4 { left: 40%; top: 72%; }
.warp .avt-warp__label { transition: opacity 0.3s ease; }
/* Without JavaScript the five screens simply stack */
.no-js .warp__screen { height: auto; }
.no-js .warp__step { position: relative; height: 100svh; min-height: 640px; opacity: 1; }
.no-js .warp__step .avt-warp__statement { transform: translateY(-50%); }
.no-js .warp .avt-warp__label { display: none; }

/* ---------- contact footer ---------- */
.contact { z-index: 1; }
.contact__letters { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(68%, 940px); height: auto; transform: translate(-50%, -50%); }
.contact__stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker { position: absolute; height: auto; overflow: visible; }
.sticker--1 { left: 23%; top: 16%; width: 64px; }
.sticker--2 { left: 71%; top: 13%; width: 70px; animation-delay: -2s; }
.sticker--3 { left: 78%; top: 62%; width: 58px; animation-delay: -4s; }
.sticker--4 { left: 12%; top: 66%; width: 54px; animation-delay: -1s; }
.contact__mail { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; user-select: all; }
.contact__mail:hover { color: var(--tech-text); }
.avt-footer__social { margin: 0; padding: 0; list-style: none; }

/* ---------- project detail ---------- */
.detail { position: relative; z-index: 1; padding: 132px var(--avt-margin) var(--space-11); }
.detail__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.detail__back { grid-column: 1 / span 4; justify-self: start; padding: 0 var(--space-2); }
.detail__index { grid-column: 5 / span 4; padding: 0 var(--space-2); }
.detail__tag { grid-column: 9 / span 4; justify-self: start; margin-left: var(--space-2); }
.detail__title { margin-top: 48px; padding: 0 var(--space-2); }
.detail__meta { margin-top: var(--space-8); }
.detail__full { margin: var(--space-9) var(--space-2) 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-raised); }
.detail__full img { width: 100%; height: 100%; object-fit: cover; }
.detail__overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--space-11); }
.detail__overview-label { grid-column: 1 / span 4; padding: 12px var(--space-2) 0; font-size: 16px; }
.detail__overview .avt-statement { grid-column: 5 / span 8; padding: 0 var(--space-2); }
.detail__scene { display: flex; align-items: center; justify-content: center; height: 640px; margin: var(--space-11) var(--space-2) 0; padding: var(--space-8); background: var(--paper-raised); }
.detail__scene img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.detail__pager { margin: var(--space-11) var(--space-2) 0; }
.detail-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: 22px var(--hud-inset) var(--hud-bottom); border-top: var(--hairline) solid var(--divider); }
.detail-foot a:not(.avt-bracket) { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; }
.detail-foot a:not(.avt-bracket):hover { color: var(--tech-text); }

/* ---------- 404 ---------- */
.notfound { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-5); min-height: 100svh; padding: var(--space-11) var(--hud-inset); }
.notfound > *:not(.avt-gridlines) { position: relative; z-index: 2; }
.notfound__code { color: var(--ink-muted); }
.notfound__en { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin-top: var(--space-6); color: var(--ink-muted); }

/* ---------- motion ---------- */
@keyframes avt-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -10px, 0) rotate(4deg); } }
@keyframes avt-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.sticker, .bridge__svg { animation: avt-float 7s ease-in-out infinite; }
.bridge__svg { animation-duration: 8s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticker, .bridge__svg, .work__grid.is-filtering .work-card, .packages__panel.is-entering .avt-package { animation: none; }
  .js .about .avt-portrait__sign { clip-path: none; transition: none; }
  .warp__step, .warp__step .avt-warp__statement, .warp__step .avt-warp__float, .warp__step .avt-rings span { transition: none; }
  .work-card .avt-card__media img { transition: none; }
}

/* ---------- narrow screens (matches the design system breakpoint) ---------- */
@media (max-width: 767px) {
  .cross--c2 { left: 50%; }
  .cross--c3 { display: none; }

  .hudfoot__long, .hudfoot .avt-hudfoot__rec, .hudfoot__build { display: none; }
  .hudfoot__short { display: inline; }
  .avt-scrollmark { right: 6px; }

  .hero { min-height: 640px; }
  .hero__role, .hero__caption { display: none; }
  .hero__title { top: 68px; bottom: auto; left: var(--hud-inset-mobile); right: var(--hud-inset-mobile); font-size: 30px; }
  .hero__intro { top: auto; bottom: 96px; left: var(--hud-inset-mobile); right: var(--hud-inset-mobile); }
  .hero__think { top: 39%; width: 96%; }
  /* Just under the word: its top (39%) plus its height (96% of the width at 1800 × 665) */
  .hero__cursor { left: calc(100% - 92px); top: calc(39% + 35.5vw + 8px); width: 58px; }
  .hero__spark { display: block; position: absolute; left: 28px; top: 150px; width: 44px; height: auto; overflow: visible; }

  .about { padding: var(--space-9) var(--avt-margin); row-gap: var(--space-5); }
  .about__portrait { grid-column: 1 / -1; margin: 0; }
  .about__text { grid-column: 1 / -1; gap: var(--space-4); margin-top: 0; }

  .work { padding: 0 0 var(--space-9); }
  .work__head { gap: 0 20px; padding: 0 var(--hud-inset-mobile); font-size: 14px; line-height: 20px; }
  .work__kicker { width: 100%; }
  .work__head .avt-toggle { font-size: 14px; }
  .work__grid { margin-top: var(--space-5); }
  .work-card[data-slot] { grid-column: 1 / -1; }
  .work-card[data-slot="3"], .work-card[data-slot="6"], .work-card[data-slot="8"] { grid-column: 1 / span 6; }
  .work-card[data-slot="4"], .work-card[data-slot="7"], .work-card[data-slot="9"] { grid-column: 7 / span 6; }
  .work-card[data-slot="6"] .avt-card__media, .work-card[data-slot="7"] .avt-card__media { aspect-ratio: 1 / 1; }
  .work__clients { flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--hud-inset-mobile) 0; font-size: 13px; }

  .bridge { height: 540px; }
  .bridge__arrow { width: 132px; }

  .services { padding: var(--space-9) var(--avt-margin); }
  .services__grid { row-gap: var(--space-6); }
  .services__grid > * { grid-column: 1 / -1 !important; }
  .services__col { padding-top: var(--space-6); border-top: var(--hairline) solid var(--divider); }

  .packages { padding: var(--space-9) var(--avt-margin); }
  .packages__grid { row-gap: var(--space-5); }
  .packages__grid > * { grid-column: 1 / -1 !important; }
  .packages__tabs { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-6); }
  .packages__tabs .avt-toggle { font-size: 14px; }

  .warp__float--1 { left: 18px; top: 20%; }
  .warp__float--2 { left: auto; right: 18px; top: 34%; text-align: right; }
  .warp__float--3 { left: 18px; top: 62%; }
  .warp__float--4 { left: auto; right: 18px; top: 76%; text-align: right; }
  .avt-warp__label { font-size: 14px; line-height: 20px; }

  .contact__letters { top: 46%; width: 96%; }
  .contact .avt-footer__title { top: 46%; left: 20px; right: 20px; }
  .contact .avt-footer__title span:first-child { transform: translateX(-8%); }
  .contact .avt-footer__title span:last-child { transform: translateX(6%); }
  .sticker--1 { left: 12%; top: 22%; width: 40px; }
  .sticker--2 { left: 74%; top: 18%; width: 44px; }
  .sticker--3 { left: 78%; top: 60%; width: 38px; }
  .sticker--4 { display: none; }
  .contact .avt-hudfoot { font-size: 14px; line-height: 20px; }

  .detail { padding: 96px var(--avt-margin) var(--space-9); }
  .detail__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; }
  .detail__back { width: 100%; padding: 0 var(--space-2); font-size: 14px; }
  .detail__index { padding: 0 var(--space-2); }
  .detail__tag { margin-left: 0; }
  .detail__title { margin-top: var(--space-5); }
  .detail__meta { margin-top: var(--space-6); border-top: var(--hairline) solid var(--divider); }
  .detail__full { margin: var(--space-6) 0 0; }
  .detail__overview { margin-top: var(--space-9); row-gap: var(--space-3); }
  .detail__overview > * { grid-column: 1 / -1 !important; }
  .detail__overview-label { padding-top: 0; font-size: 14px; }
  .detail__scene { height: 360px; margin: var(--space-9) 0 0; padding: var(--space-5); }
  .detail__pager { margin: var(--space-9) 0 0; }
  .detail-foot { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-4) var(--hud-inset-mobile) 28px; }

  .notfound { padding: var(--space-11) var(--hud-inset-mobile); }
}