/* Site typefaces are self hosted under the SIL Open Font License (see OFL-*.txt).
   Bricolage and Instrument are variable; Metal Mania is a regular display face for Halloween. */
@font-face { font-family: "Metal Mania"; src: url(/assets/fonts/metal-mania-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-latin.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --ink: #09090a; --ink-2: #111113; --paper: #f4f2ee;
  --soft: rgba(244, 242, 238, 0.74); --faint: rgba(244, 242, 238, 0.54); --hair: rgba(255, 255, 255, 0.12);
  --display: "Bricolage Grotesque", "Instrument Sans", Arial, sans-serif;
  --ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 24px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 60px;
  --rec: #ff3b30;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--paper); font: 400 16px/1.55 var(--ui);
  background: radial-gradient(120% 70% at 50% 0%, #151517, var(--ink) 62%) fixed, var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: calc(var(--bar-h) + 28px + env(safe-area-inset-bottom, 0px));
}
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }
.display { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-variation-settings: "opsz" 96; letter-spacing: -0.025em; line-height: 0.92; text-wrap: balance; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lede { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--soft); }
.section { position: relative; display: grid; gap: clamp(24px, 3vw, 40px); padding: clamp(88px, 12vw, 168px) var(--gutter) 0; }
.section-title { font-size: clamp(54px, 9.5vw, 160px); }

/* Scroll reveals (assets/js/reveal.js): only when JS runs, so nothing hides without it. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 400ms linear; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Header: a floating glass pill. */
.site-header {
  position: fixed; z-index: 40; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 24px; width: min(1180px, calc(100% - 24px)); padding: 7px 7px 7px 18px; border-radius: 999px;
}
/* The logos are inline SVG (src/templates/logo.js): height sets the size, width follows the arrangement. */
.logo { display: block; width: auto; overflow: visible; color: var(--paper); }
.brand .logo { height: 34px; }
.brand { flex: none; }
.brand [data-logo], .footer-mark [data-logo] { display: none; }
.brand.has-logo-morph [data-logo], .footer-mark.has-logo-morph [data-logo] { display: block; }
.has-logo-morph .logo-fallback { display: none; }
.logo-fallback { display: block; }
.brand .logo-fallback .logo { width: 88px; height: 34px; object-fit: contain; }
@media (max-width: 759px) { .brand .logo-fallback .logo { width: 26px; } }
.nav { display: flex; gap: 26px; font: 500 15px/1 var(--ui); }
.nav a { padding: 10px 0; color: var(--soft); transition: color 160ms var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
/* Halloween: faint glowing red text, breathing slowly with the odd flicker. No border. */
.nav .nav-hw { font-family: "Metal Mania", Impact, var(--ui); font-weight: 400; font-size: 17px; letter-spacing: 0.01em; color: #ff5a64; text-shadow: 0 0 8px rgba(255, 40, 55, 0.55), 0 0 20px rgba(220, 20, 40, 0.3); animation: hw-glow 4.8s ease-in-out infinite; }
.nav .nav-hw:hover, .nav .nav-hw[aria-current="page"] { color: #ff7a82; }
@keyframes hw-glow {
  0%, 100% { opacity: 0.82; text-shadow: 0 0 6px rgba(255, 40, 55, 0.45), 0 0 16px rgba(220, 20, 40, 0.22); }
  45% { opacity: 1; text-shadow: 0 0 10px rgba(255, 50, 65, 0.8), 0 0 28px rgba(230, 25, 45, 0.45); }
  47% { opacity: 0.55; } 48% { opacity: 1; } 49% { opacity: 0.7; } 50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .nav .nav-hw { animation: none; } }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 860px) {
  .site-header { gap: 10px; padding-left: 14px; }
  .nav { gap: 0; font-size: 14px; }
  .nav a:not(.nav-hw) { display: none; }
  .header-actions .ig { display: none; }
}
@media (max-width: 360px) {
  .site-header { gap: 5px; padding-left: 8px; }
  .header-actions .pill.solid { min-height: 44px; padding-inline: 12px; font-size: 13px; }
}

/* Now showing: a glass pill pinned to the bottom, like a player. */
.now-bar {
  position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px; width: min(640px, calc(100% - 24px)); height: var(--bar-h); padding: 0 8px 0 20px;
  border-radius: 999px; font-size: 13px; transform: translate(-50%, 0);
}
.now-tc { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.now-tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); vertical-align: 1px; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: 0.3; } }
.now-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--paper); }
.now-bar.is-halloween [data-now-title] { font-family: "Metal Mania", var(--ui); font-size: 16px; font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.02em; color: #ff6972; text-shadow: 0 0 8px rgba(255, 40, 55, 0.6), 0 0 20px rgba(220, 20, 40, 0.32); }
.now-label { color: var(--faint); }
.now-bar { transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.now-bar.is-tucked { opacity: 0; pointer-events: none; transform: translate(-50%, 130%); }
/* Phones: just the running timecode and WhatsApp, a small pill instead of a full-width bar. */
@media (max-width: 520px) {
  .now-label, .now-title { display: none; }
  .now-bar { width: auto; gap: 12px; padding-left: 16px; }
}

/* Footer: the wordmark, one line in Neku's voice, contact pills. */
.site-footer { margin-top: clamp(96px, 14vw, 200px); padding: 0 var(--gutter) 40px; }
.footer-inner { display: grid; gap: 28px; justify-items: start; padding-top: 48px; border-top: 1px solid var(--hair); }
.footer-mark .logo { height: clamp(84px, 8vw, 112px); }
.footer-mark .logo-fallback .logo { width: calc(clamp(84px, 8vw, 112px) * 2.53); object-fit: contain; }
@media (max-width: 639px) { .footer-mark .logo { height: 132px; } }
@media (max-width: 639px) { .footer-mark .logo-fallback .logo { width: 100px; } }
.footer-line { font-size: clamp(34px, 5vw, 72px); }
.contacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px 8px 8px; border-radius: 999px; }
.contact-icon { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.contact-icon svg { width: 20px; height: 20px; }
.contact-text { display: grid; gap: 2px; line-height: 1.2; }
.contact-text small { font-size: 12px; color: var(--faint); }
.contact-text span { font-size: 15px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .contact:hover { background-color: rgba(255, 255, 255, 0.08); } }
.footer-fine { display: flex; justify-content: space-between; width: 100%; color: var(--faint); font-size: 13px; }

/* Glass: blur and lift what is behind, a lit top edge, a faint bottom edge, a soft drop.
   The highlight follows the pointer (assets/js/shine.js). */
/* Zero-weight positioning: anything that places itself (fixed header, bar, labels) wins. */
:where(.glass) { position: relative; }
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.42),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.34);
}
/* Light on glass: where the pointer is, the edge catches it faintly and the pane warms a touch.
   Blended, never a spotlight; only while hovered, and not on the big form or viewer panels. */
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease); }
.glass::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.06), transparent 70%); }
.glass::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.5), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) { .glass:hover::before, .glass:hover::after { opacity: 1; } }
.brief.glass::before, .brief.glass::after, .qv.glass::before, .qv.glass::after { display: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font: 600 15px/1 var(--ui); white-space: nowrap; cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}
.pill:active { transform: scale(0.96); }
.pill.solid { background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.3); }
.pill.glass { color: var(--paper); }
.pill.small { min-height: 38px; padding: 0 16px; font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .pill.solid:hover { transform: translateY(-1px); }
  .pill.glass:hover, .icon-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
}

/* Chips for filters, toggles and form choices. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 500 14px/1 var(--ui); cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, 0.08); color: var(--paper); } }

/* Cards: rounded, lit from behind by their own flyer, labelled in glass. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(14px, 1.8vw, 26px); align-items: start; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Wide pieces (screen visuals, mockups, press kits) span two columns at 8:7, the height of a flyer beside them. */
.card[data-shape="wide"] { grid-column: span 2; }
/* Staggered rhythm: alternate flyers sit lower, like a wall hung by hand. Wide pieces keep the line. */
@media (min-width: 760px) {
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(3n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(3n + 2) { margin-top: 14%; }
}
@media (min-width: 1180px) {
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(3n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(3n + 2) { margin-top: 0; }
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(4n + 2), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(4n + 2) { margin-top: 16%; }
  .grid[data-layout="grid"] > .card:not([data-shape]):nth-child(4n + 4), .grid:not([data-layout]) > .card:not([data-shape]):nth-child(4n + 4) { margin-top: 7%; }
}
.card { position: relative; isolation: isolate; border-radius: var(--radius); transition: transform 260ms var(--ease); }
.card[hidden] { display: none; }
.card-glow { position: absolute; inset: 6% 5% -3%; z-index: -1; width: 90%; height: 97%; object-fit: cover; border-radius: var(--radius); filter: blur(38px) saturate(170%); opacity: 0.42; transition: opacity 300ms var(--ease); pointer-events: none; }
.card-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.card-media img, .card-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.card[data-shape="wide"] .card-media { aspect-ratio: 8 / 7; }
.card[data-fit="contain"] .card-media img, .card[data-fit="contain"] .card-clip { object-fit: contain; }
/* A set (series editions, brand boards): how many pieces sit behind the card. */
.card-count { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 999px;
  background: rgba(9, 9, 10, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); font: 700 13px/1 var(--ui); color: var(--paper); }
.card-count::before { content: ""; width: 11px; height: 11px; margin-right: 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px currentColor, 3px -3px 0 -1px rgba(9, 9, 10, 0.9), 3px -3px 0 0.5px currentColor; display: inline-block; vertical-align: -1px; }
.card-clip { opacity: 0; transition: opacity 280ms var(--ease), transform 500ms var(--ease); }
.card.is-playing .card-clip { opacity: 1; }
.card-label { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; pointer-events: none; }
.card-title { font: 700 15px/1.2 var(--ui); }
.card-type { font-size: 12px; color: var(--soft); }
.card-ig { justify-self: start; margin-top: 6px; font-size: 12px; font-weight: 600; pointer-events: auto; }
@media (max-width: 520px) { .card-label { left: 6px; right: 6px; bottom: 6px; padding: 9px 11px; border-radius: 14px; } .card-title { font-size: 13px; } .card-type { font-size: 11px; } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-8px); }
  .card:hover .card-glow { opacity: 0.85; }
  .card:hover .card-media img, .card:hover .card-clip { transform: scale(1.04); }
  .card-ig:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Filters: one glass pill of chips. On narrow screens it stays one row and scrolls sideways. */
.filters { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-self: start; max-width: 100%; padding: 5px; border-radius: 28px; }
@media (max-width: 900px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
}

/* Quick view: a glass panel over the dimmed page. Fixed and centred on the screen: author styles beat the
   browser's own dialog rules, so the glass recipe's position must not decide where a modal sits. */
.qv { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(1100px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 30px; color: var(--paper); background: rgba(20, 20, 22, 0.72); overflow: auto; }
.qv::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qv[open] { animation: qv-in 220ms var(--ease); }
@keyframes qv-in { from { opacity: 0; transform: scale(0.97); } }
.qv-inner { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: 28px; padding: 16px; }
.qv-media { overflow: hidden; border-radius: 20px; background: #000; }
.qv-media video, .qv-media img { width: auto; height: min(80dvh, 900px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.qv-side { display: grid; align-content: end; gap: 16px; padding: 56px 8px 8px 0; }
.qv-title { font-size: clamp(36px, 4.4vw, 64px); }
.qv-type { color: var(--soft); }
/* Brand boards: shown whole at their own shape, with thumbnails to switch. */
.qv-media img.is-board { aspect-ratio: auto; width: auto; height: auto; max-height: min(78dvh, 820px); max-width: min(820px, 62vw); }
.qv-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-thumb { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; opacity: 0.55; box-shadow: inset 0 0 0 1px var(--hair); transition: opacity 160ms var(--ease), box-shadow 160ms var(--ease); }
.qv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qv-thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--paper); }
@media (hover: hover) and (pointer: fine) { .qv-thumb:hover { opacity: 0.9; } }
.qv-toggle { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; }
.qv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qv-media video.is-wide, .qv-media img.is-wide { aspect-ratio: 16 / 9; width: min(860px, 62vw); height: auto; max-height: 78dvh; }
.qv-close { position: absolute; z-index: 3; top: 14px; right: 14px; border: 0; cursor: pointer; background: rgba(9, 9, 10, 0.78); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4); }
.qv-close svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .qv-inner { grid-template-columns: 1fr; gap: 16px; padding: 10px; }
  .qv-media video, .qv-media img { width: 100%; height: auto; max-height: 68dvh; }
  .qv-media img.is-board { max-width: 100%; max-height: 60dvh; margin: 0 auto; }
  .qv-media video.is-wide, .qv-media img.is-wide { width: 100%; }
  .qv-close { top: 16px; right: 16px; }
  .qv-side { padding: 0 6px 8px; align-content: start; }
}

/* Liquid glass selection (assets/js/segments.js): the lens flows under the chosen option. Without JS
   the pressed chip keeps its own solid fill instead. */
.lens {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; opacity: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(255, 255, 255, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px) saturate(170%) brightness(1.2); backdrop-filter: blur(4px) saturate(170%) brightness(1.2);
  transition: opacity 200ms var(--ease);
}
[data-segments] > .chip { position: relative; z-index: 1; }
/* Dragging the lens (assets/js/segments.js): the chosen option can be held and dragged without scrolling
   the bar; the lens brightens into a drop and the option beneath it lights up. */
[data-segments] > .chip[aria-pressed="true"] { touch-action: none; }
[data-segments] { -webkit-user-select: none; user-select: none; }
[data-segments].is-dragging { cursor: grabbing; }
[data-segments].is-dragging .lens { transition: none; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(2px) saturate(190%) brightness(1.3); backdrop-filter: blur(2px) saturate(190%) brightness(1.3); }
.js [data-segments].is-dragging .chip[aria-pressed="true"]:not(.is-under) { color: var(--soft); font-weight: 500; }
[data-segments] .chip.is-under { color: var(--paper); }
.js [data-segments] .chip[aria-pressed="true"] { background: transparent; color: var(--paper); font-weight: 600; }

/* Still | Motion switch on flyers with motion, at the top of the card. */
.card-mode { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.card-mode .chip { min-height: 32px; padding: 0 12px; font-size: 12px; }
@media (max-width: 520px) { .card-mode { top: 6px; left: 6px; } .card-mode .chip { min-height: 30px; padding: 0 10px; font-size: 11px; } }

/* Hero: Neku's logo as liquid glass over a wall of his flyers (assets/js/glass). */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ink, #09090a); }
.hero-glass { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Without WebGL2: the same idea, still. The flyers dim and soft, sharp only inside the logo. */
.hero-fallback { position: absolute; inset: 0; overflow: hidden; }
.hero-fallback::before { content: ""; position: absolute; inset: -40px; background: url(/media/atlas/atlas.webp) center / cover; filter: blur(14px) brightness(0.32); }
/* The white framed logo; no CSS masking (masks with this SVG render inverted in some cases). */
.hero-fallback-mark { position: absolute; left: 50%; top: 39%; width: min(80vw, 1000px); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.18)); }
.has-glass .hero-fallback { display: none; }

.hero::after { content: ""; position: absolute; inset: auto 0 -1px; height: 62%; background: linear-gradient(to bottom, rgba(9, 9, 10, 0), rgba(9, 9, 10, 0.55) 40%, rgba(9, 9, 10, 0.9) 72%, var(--ink, #09090a)); pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(104px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; max-width: 780px; }
.hero-title { font-size: clamp(44px, 6vw, 96px); }
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.hero-title .word > span { display: inline-block; }
.hero-sub { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 700px), (max-aspect-ratio: 10 / 11) {
  .hero-fallback-mark { top: 36%; width: min(62vw, 400px); }
  .hero-copy { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
}

/* Opening. The headline never waits: it rises at once while the glass forms behind it, so the first paint
   has words on it. Only the header and the Now showing bar hold until the glass is ready (assets/js/intro.js). */
.is-opening .site-header { opacity: 0; transform: translate(-50%, -24px); }
.is-opening .now-bar { opacity: 0; transform: translate(-50%, 24px); }
.js .site-header { transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.js .hero-copy [data-intro] { animation: rise-in 800ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + 60ms); }
.js .hero-title .word > span { animation: word-up 900ms var(--ease) both; animation-delay: 80ms; }
.hero-title .word:nth-child(2) > span { animation-delay: 140ms; }
.hero-title .word:nth-child(3) > span { animation-delay: 200ms; }
.hero-title .word:nth-child(4) > span { animation-delay: 260ms; }
.hero-title .word:nth-child(5) > span { animation-delay: 320ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes word-up { from { transform: translateY(105%); } }
@media (prefers-reduced-motion: reduce) { .js .site-header { transition: none; } .js .hero-copy [data-intro], .js .hero-title .word > span { animation: none; } }

/* Ticker: the promises, big and slow, filled and outlined in turn. */
.ticker { overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; border-block: 1px solid var(--hair); }
.ticker-track { display: flex; width: max-content; gap: 0.6em; font-size: clamp(40px, 7vw, 112px); animation: ticker 48s linear infinite; }
.ticker-track span { white-space: nowrap; }
.ticker-track span::after { content: "·"; margin-left: 0.6em; color: var(--faint); -webkit-text-stroke: 0; }
.ticker-track .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 242, 238, 0.7); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; }
.work-section .pill.glass { justify-self: start; }

/* Weekly worlds: a sideways reel of one series, edition under each. */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 320px); gap: clamp(14px, 1.8vw, 24px); overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 20px var(--gutter) 28px; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.strip::-webkit-scrollbar { display: none; }
.strip > li { scroll-snap-align: start; }
.edition { margin-top: 12px; color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Services: five glass rows. */
.service-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.service { display: grid; gap: 10px 36px; padding: clamp(22px, 2.6vw, 34px); border-radius: 30px; }
@media (min-width: 900px) { .service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; } }
.service-name { font-size: clamp(28px, 3vw, 42px); }
.service-line { color: var(--soft); max-width: 44ch; }
.service-meta { display: grid; gap: 2px; color: var(--faint); font-size: 14px; }
.service .pill { justify-self: start; }
.rush { color: var(--soft); font-size: 16px; }

/* Process: five glass steps on a rail, each with a rec-dot timecode. */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rail li { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 26px; }
.rail-tc { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); }
.rail-tc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--rec); vertical-align: 1px; }
.rail h3 { font-size: clamp(24px, 2.2vw, 30px); }
.rail p { color: var(--soft); font-size: 15px; }
.revisions { color: var(--soft); font-size: 17px; }

/* Credits: the worlds roll upward like end credits. */
.credits { justify-items: center; text-align: center; }
.credits-label { font: 600 14px/1 var(--ui); letter-spacing: 0.02em; color: var(--faint); }
.roll { height: min(70vh, 620px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.credit-roll { display: grid; gap: 0.18em; margin: 0; padding: 0 0 0.18em; list-style: none; font-size: clamp(34px, 5.4vw, 84px); animation: roll 60s linear infinite; }
@keyframes roll { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .roll { height: auto; -webkit-mask-image: none; mask-image: none; } .credit-roll { animation: none !important; transform: none; } .credit-roll[aria-hidden="true"] { display: none; } }

/* Studio: Neku's framed mark with light passing over it. Stacked beside the text, wide when the page narrows. */
.studio-short { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .studio-short { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); } }
.studio-mark { display: grid; justify-items: center; }
.studio-mark .logo { height: clamp(120px, 30vw, 230px); max-width: 100%; filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.14)); }
@media (min-width: 900px) { .studio-mark .logo { height: min(440px, 60vh); } }
.studio-copy { display: grid; gap: 24px; }
.studio-line { font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; line-height: 1.05; }

/* Numbers: big figures on a hairline, no boxes. A breath after the grid. */
.numbers-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px); margin: 0; padding: clamp(28px, 4vw, 48px) 0 0; list-style: none; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .numbers-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers-row li { display: grid; gap: 10px; align-content: start; }
.num { font-size: clamp(56px, 7vw, 112px); white-space: nowrap; }
.num-label { max-width: 22ch; color: var(--soft); font-size: clamp(14px, 1.2vw, 17px); }

/* Case studies: one wide row each, lit by its own cover, the piece moving on one side, the story on the other. */
.case-list { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.case-row { position: relative; isolation: isolate; display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(14px, 2vw, 24px); border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); }
@media (min-width: 900px) {
  .case-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .case-row.flip .case-media { order: 2; }
}
.case-glow { position: absolute; inset: -20%; z-index: -1; width: 140%; height: 140%; object-fit: cover; filter: blur(70px) saturate(160%) brightness(0.55); opacity: 0.7; pointer-events: none; }
.case-media { display: block; }
.case-frame { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.case-frame.is-wide { aspect-ratio: 16 / 9; max-height: none; }
.case-frame video, .case-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .case-frame { width: 100%; aspect-ratio: 4 / 5; } .case-frame.is-wide { aspect-ratio: 16 / 9; } }
.case-copy { display: grid; gap: 16px; justify-items: start; padding: clamp(4px, 1vw, 16px); }
.case-no { font: 600 14px/1 var(--ui); color: var(--faint); font-variant-numeric: tabular-nums; }
.case-title { font-size: clamp(44px, 6vw, 96px); }
.case-kind { color: var(--soft); font-size: 15px; }
.case-lede { max-width: 40ch; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; }
.case-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; padding: 0; list-style: none; }
.case-facts li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); color: var(--soft); font-size: 14px; }
.case-facts .display { font-size: 22px; color: var(--paper); letter-spacing: -0.01em; }

/* Reviews: real messages on glass, over a blurred wall of the work so the glass has something to bend. */
.reviews { isolation: isolate; overflow: hidden; padding-bottom: clamp(40px, 6vw, 80px); }
.reviews-wall { position: absolute; inset: 12% 0 0; z-index: -1; background: url(/media/atlas/atlas.webp) center / cover; filter: blur(34px) saturate(150%) brightness(0.42); opacity: 0.85;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.review-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { display: grid; align-content: space-between; gap: 28px; min-height: 230px; margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: 30px; }
.review blockquote { margin: 0; }
.review-quote { font-size: clamp(28px, 2.8vw, 42px); line-height: 1; }
.review-quote::before { content: "“"; } .review-quote::after { content: "”"; }
.review-who { display: grid; gap: 4px; color: var(--soft); font-size: 14px; }
.review-who span { color: var(--faint); font-size: 13px; }
.review-cta { align-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)); }
.review-cta .review-quote::before, .review-cta .review-quote::after { content: none; }
.review-cta .pill { justify-self: start; }

/* Every week: glass tabs over one reel per series. Without JS all reels show. */
.weekly-series .series-tabs { max-width: 100%; }
@media (min-width: 901px) { .series-tabs .chip { padding: 0 12px; font-size: 13.5px; } }
.js .series-panel:not(.is-active) { display: none; }
.series-panel { display: grid; gap: 8px; }
.series-panel + .series-panel { margin-top: 40px; }
.js .series-panel + .series-panel { margin-top: 0; }
.series-meta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 32px; }
.series-name { flex-basis: 100%; font-size: clamp(34px, 4.4vw, 64px); }
.series-night { color: var(--soft); font-size: 14px; font-weight: 600; }
.series-lede { flex: 1; min-width: min(100%, 320px); max-width: 60ch; color: var(--soft); }
.js .series-panel.is-active { animation: panel-in 420ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }

/* Rundowns: bigger cards so the dates read. */
.rundowns { grid-template-columns: minmax(0, 1fr); }
.strip-wide { grid-auto-columns: clamp(250px, 28vw, 380px); }
.rundowns .pill { justify-self: start; }

/* Halloween: this year's film behind fog and a red glow, bats in the air, one door. */
.halloween-teaser { isolation: isolate; }
.hw-stage { position: relative; display: grid; place-items: center; min-height: min(86vh, 820px); padding: clamp(28px, 5vw, 72px) var(--gutter); overflow: hidden; border-radius: 34px; background: #050304;
  box-shadow: inset 0 0 0 0.5px rgba(255, 60, 60, 0.25), 0 30px 90px rgba(120, 0, 10, 0.35); }
.hw-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: saturate(1.1) contrast(1.1); }
.hw-fog { position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 30% at 20% 80%, rgba(180, 180, 190, 0.18), transparent 70%), radial-gradient(45% 35% at 80% 75%, rgba(170, 170, 180, 0.14), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, transparent 30%, rgba(90, 0, 8, 0.55) 80%), linear-gradient(transparent 40%, rgba(5, 3, 4, 0.9));
  animation: fog 18s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translate3d(4%, -2%, 0) scale(1.06); } }
.hw-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; }
.hw-kicker { font: 600 14px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: #ff6b6b; }
.hw-title { font-size: clamp(76px, 14vw, 230px); color: #f4ece8; animation: flicker 5.5s steps(1, end) infinite;
  text-shadow: 0 0 18px rgba(255, 40, 40, 0.6), 0 0 70px rgba(200, 0, 20, 0.45); }
.hw-stage .hw-title, .hw-page-copy .hw-title, #hw-grid-title { font-family: "Metal Mania", Impact, var(--display); font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.01em; line-height: 1; }
@media (max-width: 520px) { .hw-stage .hw-title { font-size: clamp(64px, 18vw, 72px); } }
@keyframes flicker {
  0%, 18%, 22%, 51%, 53%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(255, 40, 40, 0.6), 0 0 70px rgba(200, 0, 20, 0.45); }
  19%, 21%, 52% { opacity: 0.55; text-shadow: none; }
}
.hw-lede { max-width: 42ch; color: rgba(244, 236, 232, 0.8); font-size: clamp(16px, 1.5vw, 19px); }
.pill.hw-enter, .theme-halloween .hw-page-copy .pill.solid { background: #e1242f; color: #fff; box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.4), 0 10px 40px rgba(225, 36, 47, 0.45); }
@media (hover: hover) and (pointer: fine) { .pill.hw-enter:hover, .theme-halloween .hw-page-copy .pill.solid:hover { background: #f03440; } }

/* Halloween glass: the site's liquid glass, tinted with a faint red glow. */
.glass-red { background: linear-gradient(180deg, rgba(255, 70, 80, 0.14), rgba(120, 0, 12, 0.08));
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 -1px 1px rgba(255, 80, 90, 0.12), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32),
    0 0 32px rgba(225, 30, 45, 0.16), 0 12px 32px rgba(0, 0, 0, 0.34); }
.hw-copy.glass-red, .hw-page-copy.glass-red { padding: clamp(26px, 3.5vw, 44px) clamp(24px, 4vw, 56px); border-radius: 34px; }
@media (max-width: 360px) { .hw-copy.glass-red { padding-inline: 12px; } .hw-stage .hw-title { font-size: 54px; } }
.pill.glass-red { color: #fff; animation: red-breathe 4s ease-in-out infinite; }
@keyframes red-breathe { 50% { box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.55), inset 0 0 0 0.5px rgba(255, 110, 120, 0.45), 0 0 44px rgba(235, 35, 50, 0.3), 0 12px 32px rgba(0, 0, 0, 0.34); } }
@media (hover: hover) and (pointer: fine) { .pill.glass-red:hover { background-color: rgba(255, 60, 70, 0.18); } }

/* Red glass wherever Halloween is: the filter pill while Halloween is chosen (white again for anything
   else), and the labels and switches on every Halloween piece. */
.filters[data-active="halloween"] { background: linear-gradient(180deg, rgba(255, 70, 80, 0.14), rgba(120, 0, 12, 0.08));
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32), 0 0 32px rgba(225, 30, 45, 0.18), 0 12px 32px rgba(0, 0, 0, 0.34); }
.filters[data-active="halloween"] .lens { background: linear-gradient(180deg, rgba(255, 90, 100, 0.5), rgba(200, 20, 35, 0.25));
  box-shadow: inset 0 1px 0.5px rgba(255, 210, 215, 0.85), inset 0 0 0 0.5px rgba(255, 120, 130, 0.5), 0 0 18px rgba(235, 35, 50, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35); }
.filters, .filters .lens { transition: background 400ms var(--ease), box-shadow 400ms var(--ease), opacity 200ms var(--ease); }
.card.is-halloween .card-label, .card.is-halloween .card-mode { background: linear-gradient(180deg, rgba(255, 70, 80, 0.16), rgba(120, 0, 12, 0.1));
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.35), 0 0 22px rgba(225, 30, 45, 0.2), 0 12px 32px rgba(0, 0, 0, 0.34); }
.card.is-halloween .card-mode .lens { background: linear-gradient(180deg, rgba(255, 90, 100, 0.5), rgba(200, 20, 35, 0.25)); }
/* The chosen display face follows Halloween artwork into filters, card titles and quick view. */
.filters .chip[data-filter="halloween"], .card.is-halloween .card-title, .qv.is-halloween .qv-title {
  font-family: "Metal Mania", var(--ui); font-weight: 400; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0.02em;
  color: #ff6972; text-shadow: 0 0 8px rgba(255, 40, 55, 0.6), 0 0 20px rgba(220, 20, 40, 0.32);
}
.filters .chip[data-filter="halloween"] { font-size: 17px; }
.js .filters[data-segments] .chip[data-filter="halloween"][aria-pressed="true"],
.js .filters[data-segments].is-dragging .chip[data-filter="halloween"][aria-pressed="true"]:not(.is-under),
.filters .chip[data-filter="halloween"]:hover { font-weight: 400; color: #ff8990; }
.card.is-halloween .card-title { font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.qv.is-halloween .qv-title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; overflow-wrap: anywhere; }
#hw-grid-title, .hw-stage .hw-title, .hw-page-copy .hw-title { color: #ffb1b4; text-shadow: 0 0 12px rgba(255, 40, 55, 0.52), 0 0 35px rgba(220, 20, 40, 0.26); }
@media (max-width: 520px) { .card.is-halloween .card-title { font-size: 15px; } }

/* Bats flying across (assets/js/flock.js): most behind the content, a few faint ones in front. */
.bat-flock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hw-stage .bat-flock.is-back { z-index: 1; }
.hw-stage .bat-flock.is-front { z-index: 3; opacity: 0.4; }
.bat-flock.is-page { position: fixed; }
.bat-flock.is-page.is-back { z-index: 0; }
.bat-flock.is-page.is-front { z-index: 45; opacity: 0.35; }
.theme-halloween main, .theme-halloween .site-footer { position: relative; z-index: 1; }

/* The bat swarm: a real film of bats, cut out on the graphics card, flying over the page (assets/js/bats.js). */
.bat-film { position: fixed; inset: 0; z-index: 202; width: 100vw; height: 100vh; pointer-events: none; }
.bat-film-multiply { object-fit: cover; mix-blend-mode: multiply; background: #fff; }
.bat-veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; background: #000; }
@media (prefers-reduced-motion: reduce) { .hw-title, .hw-fog, .pill.glass-red { animation: none; } }

/* The Halloween room's backdrop: the haunted forest and castle, looping behind everything, dimmed. */
.hw-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050304 url(/assets/halloween/forest.webp) center / cover; }
.hw-backdrop-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(4, 2, 3, 0.45), rgba(4, 2, 3, 0.55) 60%, rgba(4, 2, 3, 0.8)); }

/* Floating red glass: the Halloween panels drift gently, lifted off the scene. */
.hw-copy.glass-red, .hw-page-copy.glass-red { animation: glass-float 7s ease-in-out infinite;
  box-shadow: inset 0 1px 0.5px rgba(255, 190, 195, 0.45), inset 0 0 0 0.5px rgba(255, 90, 100, 0.32), 0 0 36px rgba(225, 30, 45, 0.18), 0 28px 60px rgba(0, 0, 0, 0.55); }
@keyframes glass-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-10px) rotate(-0.35deg); } 65% { transform: translateY(-4px) rotate(0.3deg); } }
@media (prefers-reduced-motion: reduce) { .hw-copy.glass-red, .hw-page-copy.glass-red { animation: none; } }

.work-index { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); padding-top: clamp(120px, 14vw, 200px); }
.work-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.view-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; }
/* Wall: every piece at once, tight and rounded, no labels. */
.grid[data-layout="wall"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 760px) { .grid[data-layout="wall"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid[data-layout="wall"] { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.grid[data-layout="wall"] .card, .grid[data-layout="wall"] .card-media { border-radius: 14px; }
.grid[data-layout="wall"] .card-label, .grid[data-layout="wall"] .card-glow { display: none; }
.missing { min-height: 70vh; align-content: center; }
.grid[data-layout="wall"] .card-mode, .grid[data-layout="wall"] .card-count { display: none; }

/* Case study pages. */
.case-hero { grid-template-columns: 1fr; align-items: end; padding-top: clamp(110px, 12vw, 170px); }
@media (min-width: 900px) { .case-hero { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); } }
.case-hero-media { overflow: hidden; border-radius: 28px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.case-hero-media video, .case-hero-media img { width: 100%; height: auto; max-height: 82vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.case-hero-media.is-wide video, .case-hero-media.is-wide img { aspect-ratio: 16 / 9; }
.case-hero-copy { display: grid; gap: 18px; justify-items: start; }
.case-hero-copy .section-title { font-size: clamp(56px, 8.4vw, 150px); }
.chapters { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chapters li { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hair); }
.chapter-no { font: 600 14px/1 var(--ui); color: var(--faint); }
.chapter-title { font-size: clamp(32px, 3.4vw, 52px); }
.chapter-text { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 42ch; }
.case-quote .review { max-width: 820px; min-height: 0; }
.case-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .case-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .case-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.wall-tile { padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 9 / 16; transition: transform 220ms var(--ease); }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .wall-tile:hover { transform: translateY(-4px); } }
.case-next-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; border-top: 1px solid var(--hair); }

/* Halloween room. The lights come up on arrival. */
body.theme-halloween { background: radial-gradient(120% 70% at 50% 0%, #2a0508, var(--ink) 62%) fixed, var(--ink); }
body.theme-halloween::after { content: ""; position: fixed; inset: 0; z-index: 198; background: #000; pointer-events: none; animation: lights-up 1.1s ease-out 0.15s forwards; }
@keyframes lights-up { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { body.theme-halloween::after { display: none; } }
/* Coming through the door the room stays dark until the bat film takes over; the bats then reveal it. */
body.theme-halloween.is-arriving::after { animation: none; opacity: 1; visibility: visible; }
body.theme-halloween.has-arrived::after { display: none; }
.hw-page-hero { position: relative; isolation: isolate; grid-template-columns: 1fr; align-items: center; padding-top: clamp(120px, 13vw, 180px); padding-bottom: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .hw-page-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); } }
.hw-page-copy .hw-title { font-size: clamp(64px, 9vw, 150px); }
.hw-page-copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 360px) {
  .hw-page-hero { grid-template-columns: minmax(0, 1fr); }
  .hw-page-copy { min-width: 0; }
  .hw-page-copy.glass-red { padding-inline: 20px; }
  .hw-page-copy .hw-title { font-size: 52px; }
}
.hw-page-film { position: relative; z-index: 2; display: grid; gap: 10px; }
.hw-page-film video { width: 100%; max-height: 80vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: 26px; box-shadow: 0 18px 48px rgba(150, 0, 15, 0.3), inset 0 0 0 0.5px rgba(255, 80, 80, 0.3); }
.hw-film-cap { color: var(--soft); font-size: 14px; }
.hw-film-cap a { text-decoration: underline; text-underline-offset: 3px; }
/* The castle fades away through the older flyers, leaving the footer in near darkness. */
.hw-grid-section { isolation: isolate; }
.hw-grid-section::before { content: ""; position: absolute; inset: 0 0 -200px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 3, 4, 0) 0px, rgba(5, 3, 4, 0.42) 320px, rgba(5, 3, 4, 0.66) 32%, rgba(5, 3, 4, 0.88) 65%, rgba(5, 3, 4, 0.98) 100%); }
.hw-grid-section > * { position: relative; z-index: 1; }
/* Give the lone final portrait the same scale as its peers, centered on its own row. */
.hw-grid-section .grid > .card:last-child { grid-column: 1 / -1; justify-self: center; width: min(340px, calc((100% - clamp(14px, 1.8vw, 26px)) / 2)); }
@media (min-width: 760px) { .hw-grid-section .grid > .card:last-child { width: min(340px, calc((100% - 2 * clamp(14px, 1.8vw, 26px)) / 3)); } }
@media (min-width: 1180px) { .hw-grid-section .grid > .card:last-child { width: min(340px, calc((100% - 3 * clamp(14px, 1.8vw, 26px)) / 4)); } }
.theme-halloween .site-footer { isolation: isolate; }
.theme-halloween .site-footer::before { content: ""; position: absolute; inset: -1px 0 -200px; z-index: 0; pointer-events: none; background: #050304; }
.theme-halloween .site-footer > * { position: relative; z-index: 1; }

/* /work/#series-… : one series at a time. */
.series-note { color: var(--soft); }
.series-note strong { color: var(--paper); }
.series-note a { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* The brief: Neku's promise above, the form in a glass panel. */
.brief-wrap { display: grid; gap: 18px; max-width: 880px; }
.terms { color: var(--faint); font-size: 14px; }
.brief { display: grid; gap: 22px; margin-top: 12px; padding: clamp(20px, 3vw, 36px); border-radius: 32px; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend, .field-label { padding: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 16px;
  font: 400 16px/1.4 var(--ui); color: var(--paper); background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px var(--paper); }
.field input[type="date"] { color-scheme: dark; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip-check span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.chip-check input:checked + span { background: var(--paper); color: var(--ink); box-shadow: none; }
.chip-check input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.err { font-size: 14px; color: var(--paper); }
.err::before { content: "✕ "; color: var(--rec); }
.brief > .pill[type="submit"] { justify-self: start; }
.brief-preview pre { margin: 8px 0 0; padding: 18px; border-radius: 18px; white-space: pre-wrap; font: 400 15px/1.6 var(--ui); background: rgba(0, 0, 0, 0.35); }
.brief-send { display: flex; flex-wrap: wrap; gap: 10px; }
.sent { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); }
.form-fine { color: var(--faint); font-size: 13px; }
.start-page { padding-top: clamp(120px, 14vw, 200px); }
.start-page .contacts { margin-top: 12px; }

/* 404 */
.missing { min-height: 80svh; align-content: center; justify-items: center; }
.missing-card { display: grid; gap: 20px; justify-items: start; max-width: 760px; padding: clamp(28px, 5vw, 56px); border-radius: 36px; }
.missing-card .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }