@charset "UTF-8";
@import url('/assets/fonts/fonts.css');

:root {
  --ink: #141312;
  --paper: #fbfaf9;
  --white: #ffffff;
  --text-2: #35322e;
  --text-3: #6f6a65;
  --text-4: #8e8880;
  --rule: #e2ded9;
  --border: #eae7e3;
  --bg: var(--paper);
  --text: var(--ink);
  --muted: var(--text-3);
  --line: var(--rule);
  --mono: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;
  --sans: 'Archivo', 'IBM Plex Sans KR', sans-serif;
  --handle-turn: 28deg;
  --handle-turn-duration: 700ms;
  font-family: var(--sans);
  font-synthesis: none;
  color-scheme: light;
  --page-gutter: 56px;
  --header-top: 34px;
  --control-bottom: 22px;
  --control-side: 30px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; scroll-padding-top: 32px; scrollbar-gutter: stable; background: #141312; }
/* Smooth only an explicit same-page anchor click. Global smooth scrolling also
   animates Safari's history/fragment restoration during the page transition. */
@media (prefers-reduced-motion:no-preference) { html.has-script.is-anchor-scrolling { scroll-behavior: smooth; } }
html:has(body.entrance), html:has(body.scene-active) { overflow-y: hidden; }
html:has(body.entrance:not(.is-awake)) { background: #fbfaf9; }
html:has(body.is-awake), html:has(body.interior) { color-scheme: dark; }
html.has-script.show-entrance { overflow-y: hidden; background: #fbfaf9; color-scheme: light; }
html.has-script.show-entrance:has(body.is-awake) { background: #141312; color-scheme: dark; }
.show-entrance [data-arrival-site] { visibility: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
/* Decorative tile arcs may reach the viewport edge without creating a scrollbar. */
body.interior, body.entrance { overflow-x: clip; }
a { color: inherit; text-decoration: none; text-underline-offset: .25em; }
/* Hover tokens are enabled only by real pointing input, with a no-JS fallback. */
html.pointer-hover { --hover-decoration: underline; --hover-fill: var(--paper); --hover-ink: var(--ink); --hover-tint: rgba(251,250,249,.045); }
@media (hover:hover) and (pointer:fine) {
  html:not(.has-script) { --hover-decoration: underline; --hover-fill: var(--paper); --hover-ink: var(--ink); --hover-tint: rgba(251,250,249,.045); }
}
a:hover { text-decoration: var(--hover-decoration, none); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border-radius: 0; }
a, button, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
html.keyboard-input :is(a, button, input, summary, select, textarea):focus { outline: 2px solid currentColor; outline-offset: 5px; }
/* Modal autofocus and focus restoration can match :focus-visible after a tap
   or click. These controls show a ring only for actual keyboard navigation. */
:is(.road-controls, .music-controls, .image-lightbox) button { touch-action: manipulation; }
html.has-script:not(.keyboard-input) :focus { outline: none; }
/* A programmatic landmark destination must not draw a page-sized focus frame. */
#main:focus, #catalog:focus { outline: none; }
:lang(ko) { font-family: 'IBM Plex Sans KR', sans-serif; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; overflow-wrap: anywhere; }
h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: 16.5px; line-height: 1.4; letter-spacing: .02em; }
.content-heading { font-size: clamp(24px,2.4vw,28px); line-height: 1.2; letter-spacing: -.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Keep no painted panel above the viewport for Safari’s browser chrome to sample.
   Clipping retains the link in keyboard/screen-reader navigation. */
.skip-link { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 20; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; opacity: 0; background: transparent; color: var(--ink); font: 400 16.5px/1.4 var(--sans); }
.skip-link:focus { width: max-content; max-width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))); height: auto; min-height: 44px; padding: 12px 20px; overflow: visible; clip: auto; clip-path: none; white-space: normal; opacity: 1; background: var(--paper); }
.wrap { width: min(1040px, calc(100% - max(var(--page-gutter), env(safe-area-inset-left)) - max(var(--page-gutter), env(safe-area-inset-right)))); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 34px 56px; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0; line-height: 0; }
.brand-mark { display: block; width: auto; height: 32px; color: inherit; }
.brand-handle { transform-box: fill-box; transform-origin: 24.0009% 49.9265%; transition: transform var(--handle-turn-duration) ease; }
@media (prefers-reduced-motion:no-preference) {
  .brand.is-handle-hovered .brand-handle, .brand:focus-visible .brand-handle { transform: rotate(var(--handle-turn)); }
}
/* A capability-gated fallback for browsers without the pointer enhancement. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .brand:not(.has-pointer-input):hover .brand-handle { transform: rotate(var(--handle-turn)); }
}
.site-header nav { display: flex; align-items: center; gap: 24px; font: 400 16.5px/1.4 var(--sans); }
.nav-catalog, .nav-company { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.nav-company { border-left: 1px solid #6f6a65; padding-left: 24px; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 5px; }
.eyebrow, .index-number, .row-status, .status-badge, .platform-note { font: 400 12px/1.6 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.interior { --ink: #141312; --paper: #fbfaf9; --bg: var(--ink); --text: var(--paper); --text-2: #d1ccc7; --text-3: #bdb8b2; --rule: #49443f; --border: #49443f; --muted: #bdb8b2; --line: #49443f; color-scheme: dark; }
.road-backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--ink); opacity: 0; }
.road-backdrop.is-ready { opacity: 1; }
.road-backdrop canvas { width: 100%; height: 100%; display: block; filter: blur(.6px); transition: filter 650ms ease; }
.sky-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.scene-active .road-backdrop canvas { filter: none; }
.road-backdrop::after { transition: opacity 650ms ease; content: ''; position: absolute; inset: 0; background: rgba(20,19,18,.80); }
.site-content { position: relative; z-index: 1; transition: opacity 500ms ease, transform 650ms cubic-bezier(.2,0,.2,1); }
.scene-active { overflow: hidden; }
.scene-active .site-content { opacity: 0; transform: translateY(-35px) scale(.98); pointer-events: none; }
.scene-active .road-backdrop::after { opacity: 0; transition-delay: 160ms; }
.full-mark { display: block; height: 180px; width: auto; color: var(--paper); }
.home-identity .full-mark { height: 380px; }
.hero-door-backing { fill: var(--ink); }
.full-logo { display: inline-block; line-height: 0; }
.home-identity .is-awaiting-landing { visibility: hidden; }
.home-identity .is-landing { transform-origin: 50% 50%; will-change: transform; }
.home-hero { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 100px; padding-block: 110px 130px; min-height: 540px; }
.home-identity { justify-self: center; padding-inline: 65px; }
.home-heading { width: 100%; text-align: left; padding-bottom: 14px; }
.home-heading [data-catalog-title] { font-size: 22px; line-height: 1.4; letter-spacing: -.01em; margin-top: 18px; }
.road-control-position { position: absolute; bottom: 24px; right: 0; }
.catalog-surface { position: relative; overflow: clip; }
.catalog { border-top: 1px solid var(--line); }
.category { display: grid; grid-template-columns: minmax(170px,18%) 1fr; gap: 60px; border-bottom: 1px solid var(--line); padding: 85px 0 95px; scroll-margin-top: 35px; }
.category-heading { display: flex; gap: 14px; align-items: center; align-self: start; padding-top: 2px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.category-heading > a { display: inline-flex; align-items: center; gap: inherit; min-height: 44px; cursor: pointer; }
.category-icon { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; color: var(--muted); }
.category-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 50px; }
.category-selection { min-width: 0; }
.category-action { margin-top: 30px; }
.collection-page { min-height: 60vh; padding-block: 55px 30px; }
.collection-heading { margin-bottom: 70px; }
.collection-grid { gap: 70px 50px; }
.collection-group > h2 { margin-bottom: 28px; }
.collection-group + .collection-group { margin-top: 80px; padding-top: 64px; border-top: 1px solid var(--line); }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.project-card { position: relative; isolation: isolate; display: block; min-width: 0; cursor: pointer; }
.tile-discharge { position: absolute; top: -52px; left: -52px; z-index: 3; pointer-events: none; }
.project-card::before { content: ''; position: absolute; inset: -14px; z-index: -1; pointer-events: none; border: 1px solid transparent; background: transparent; transition: border-color 250ms ease, background-color 250ms ease; }
.project-image { display: block; overflow: hidden; background: var(--ink); }
.project-image img { width: 100%; object-fit: contain; }
.project-image-wordmark { display: grid; place-items: center; aspect-ratio: 25 / 16; border: 1px solid var(--line); }
.project-image-wordmark img { width: 74%; height: auto; }
.project-music .project-image img { aspect-ratio: 1; }
.project-caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; }
.project-caption h3, .tile-title { display: block; font-weight: 500; font-size: 20px; line-height: 1.35; }
.project-caption p, .tile-description { display: block; color: var(--muted); font-size: 16.5px; line-height: 1.55; margin-top: 7px; }
.project-card:hover, .tile-primary:hover { text-decoration: none; }
.project-card:has(:focus-visible) { outline: 2px solid currentColor; outline-offset: 14px; }
.project-card:has(:focus-visible)::before { background: rgba(251,250,249,.045); }
.listen-disclosure > summary { display: block; cursor: pointer; list-style: none; }
.listen-disclosure > summary::-webkit-details-marker { display: none; }
.listen-disclosure > summary::marker { content: ''; }
.listen-disclosure > summary:focus-visible { outline: none; }
.listen-disclosure .row-status { display: flex; width: 100%; min-height: 44px; }
.disclosure-chevron { margin-inline-start: auto; flex: 0 0 12px; fill: none; stroke: currentColor; stroke-width: 1.25; transition: transform 180ms ease; }
.listen-disclosure[open] .disclosure-chevron { transform: rotate(180deg); }
.listening-links { margin-top: 12px; border-top: 1px solid var(--line); }
.listening-links ul { padding: 0; margin: 0; list-style: none; }
.listening-links li + li { border-top: 1px solid var(--line); }
.listening-links a, .service-placeholder { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-block: 12px; font: 400 14px/1.5 var(--sans); }
.service-placeholder { color: var(--muted); opacity: .55; cursor: default; }
.listening-links a:hover { text-decoration: none; background: var(--hover-tint, transparent); }
.service-note { display: block; margin-top: 2px; color: var(--muted); font: 400 12px/1.5 var(--mono); }
@media (prefers-reduced-motion:no-preference) {
  .listen-disclosure[open] .listening-links { animation: listening-arrival 200ms ease-out; }
  @keyframes listening-arrival { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
.project-card:focus-visible { outline-offset: 14px; }
.project-card:focus-visible::before { background: rgba(251,250,249,.045); }
.project-card.is-tile-hovered::before { border-color: var(--muted); background: rgba(251,250,249,.045); }
@media (hover:hover) and (pointer:fine) {
  .project-card:not(.has-pointer-input):hover::before { border-color: var(--muted); background: rgba(251,250,249,.045); }
}
.row-status { display: block; font-size: 12px; letter-spacing: .02em; margin-top: 14px; }
.row-arrow { font: 18px var(--sans); }
.breadcrumb { font: 400 13px/1.6 var(--mono); }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; font: 400 16.5px/1.4 var(--sans); text-decoration-skip-ink: none; }
.text-link .link-label { min-width: 0; }
.music-action { display: inline-flex; align-items: center; gap: 8px; }
.music-play-icon { flex: 0 0 12px; width: 12px; height: 12px; fill: currentColor; }
.link-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 25px; }
.link-row > a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font: 400 16.5px/1.4 var(--sans); }
.site-footer { position: relative; padding: 44px 56px 32px; border-top: 1px solid var(--line); margin-top: 70px; }
.has-road .site-footer { padding-bottom: 110px; }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 400 12px/1.6 var(--mono); }
.footer-top, .footer-directory, .footer-bottom { max-width: 1040px; margin-inline: auto; }
.footer-top { padding: 16px 0 35px; }
.footer-top > a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-directory { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 36px; padding: 15px 0 55px; }
.footer-column h2 { display: flex; align-items: center; min-height: 44px; font-size: 16.5px; margin-bottom: 14px; }
.footer-column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-column a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16.5px; line-height: 1.5; overflow-wrap: anywhere; }
.footer-column h2 a { font-size: inherit; }
.footer-wordmark { display: block; width: 180px; height: auto; color: inherit; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 26px; margin-inline-start: auto; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.road-controls { position: fixed; bottom: 22px; right: 30px; z-index: 30; color: var(--paper); font: 400 12px/1.6 var(--mono); }
.road-control-top { display: flex; align-items: center; gap: 6px; }
.road-controls button { width: 44px; height: 44px; padding: 11px; color: var(--paper); background: rgba(7,9,13,.65); border: 0; font: 400 12px var(--mono); }
html.pointer-hover .road-controls button:hover { background: var(--paper); color: var(--ink); }
.drive-toggle[aria-expanded='true'], .tilt-toggle[aria-pressed='true'] { background: var(--paper); color: var(--ink); }
.road-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; vertical-align: middle; }
.play-symbol { display: none; }
.motion-toggle[data-paused='true'] .pause-symbol { display: none; }
.motion-toggle[data-paused='true'] .play-symbol { display: block; }
.road-controls[role='dialog'] { inset: 0; outline: none; pointer-events: auto; touch-action: pinch-zoom; }
.road-controls[role='dialog'] .road-control-top { position: absolute; right: 30px; bottom: 22px; pointer-events: auto; }
.scene-notices { position: fixed; bottom: calc(var(--control-bottom, 22px) + env(safe-area-inset-bottom) + 64px); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); display: grid; gap: 8px; text-align: center; pointer-events: none; }
.scene-active.has-tilt-control .scene-notices { top: max(20px, env(safe-area-inset-top)); bottom: auto; }
.scene-message, .tilt-status { margin: 0; }
.scene-message:empty { display: none; }
.project-logo { width: auto; height: auto; object-fit: contain; }
.logo-thats-spanish-for { width: 190px; }
.logo-honigferd { width: 220px; }
.logo-neon-draft { width: 100%; max-width: 100%; }
.monochrome-logo { filter: invert(1); }
.artist-logo-heading { padding-block: 30px 40px; }
.breadcrumb { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current] { align-self: center; }
.breadcrumb-divider { align-self: center; margin-inline: 14px; }
.product-page > .breadcrumb, .prose-page > .breadcrumb { padding-block: 30px 32px; }
.product-hero > .section-line { padding-top: 30px; }
.product-hero { padding: 15px 0 48px; }
.section-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.status-badge { max-width: 100%; padding-block: 8px; color: var(--muted); white-space: normal; }
.status-link { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--rule); padding: 8px 12px; color: var(--text); }
.status-link:hover { background: var(--hover-fill, transparent); color: var(--hover-ink, var(--text)); text-decoration: none; }
.product-hero h1, .artist-hero h1 { margin-top: 25px; }
.game-identity { min-height: min(48svh,520px); display: grid; align-items: center; padding-block: 70px 85px; }
.game-identity h1 { width: 100%; margin: 0; text-align: center; }
.game-identity .project-logo { width: 100%; max-height: 60svh; margin-inline: auto; object-position: center; }
.teaser-hero .game-identity { min-height: 0; padding-block: 44px 56px; }
.portfolio-identity { justify-items: start; gap: 24px; }
.portfolio-identity h1 { text-align: left; }
.portfolio-identity .project-logo { display: block; width: min(100%, 27rem); margin-inline: 0; }
.portfolio-identity + .feature-list { border-top: 1px solid var(--line); }
.game-identity .logo-chicken-keeper { width: min(50%,30svh,300px); max-height: none; }
.game-identity .project-title-placeholder { font-size: clamp(44px,8.5vw,112px); line-height: 1.02; letter-spacing: -.04em; }
.instrument-identity { justify-items: center; gap: 36px; }
.instrument-symbol { width: auto; height: 150px; }
.personal-game-identity { justify-items: center; gap: 28px; }
.personal-project-icon { width: 200px; height: auto; }
.download-link, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; border: 1px solid currentColor; padding: 12px 20px; font-size: 16.5px; }
.download-link:hover, .button-link:hover { background: var(--hover-fill, transparent); color: var(--hover-ink, var(--text)); text-decoration: none; }
html.keyboard-input :is(.download-link, .button-link, .status-link):focus-visible,
html.keyboard-input .road-controls button:focus-visible { background: var(--paper); color: var(--ink); text-decoration: none; }
.product-actions { align-items: center; }
.product-actions > a { align-items: center; min-height: 48px; font: 400 16.5px/1.4 var(--sans); }
.product-screenshots > h2 { margin-bottom: 24px; }
.media-credit { margin-top: 20px; color: var(--muted); font-size: 16.5px; }
.media-credit .text-link { vertical-align: baseline; }
.product-requirements { padding-block: clamp(128px,12vw,160px) 48px; }
.requirements-list { margin: 28px 0 0; }
.requirements-list > div { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.requirements-list dt { font-weight: 500; }
.requirements-list dd { margin: 0; color: var(--text-2); }
.requirements-list, .product-requirements p { font-size: 16.5px; line-height: 1.6; }
.product-requirements p { margin-top: 24px; color: var(--text-2); }
@media (max-width:680px) {
  .instrument-symbol { height: 104px; }
  .instrument-identity { gap: 24px; }
  .requirements-list > div { grid-template-columns: minmax(0,1fr); gap: 8px; }
}
.game-intro { max-width: 700px; }
.game-intro .product-lead { margin-top: 0; }
.product-lead, .artist-lead { font-size: clamp(20px,2vw,22px); line-height: 1.45; font-weight: 400; letter-spacing: 0; margin-top: 27px; color: var(--text); }
.product-intro { font-size: 16.5px; line-height: 1.6; color: var(--text-2); max-width: 650px; margin-top: 18px; }
.product-availability { margin-top: 25px; font: 400 16.5px/1.6 var(--sans); color: var(--text-2); }
.product-availability time { font: inherit; color: inherit; }
.instrument-hero { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-areas: "heading media" "copy media"; gap: 20px 64px; align-items: start; margin-top: 36px; }
.instrument-hero h1 { margin-top: 0; }
.instrument-heading { grid-area: heading; }
.instrument-copy { grid-area: copy; }
.instrument-copy > .product-intro:first-child { margin-top: 0; }
.instrument-hero .product-gallery { grid-area: media; align-self: center; grid-template-columns: minmax(0,1fr); }
.product-enquiry { margin-top: 48px; padding-block: 32px; }
.product-enquiry p { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width:900px) {
  .instrument-hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "media" "copy"; gap: 28px; }
}
.platform-note { margin-top: 25px; }
.product-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 32px; }
.product-gallery figure { min-width: 0; margin: 0; }
.gallery-featured-first > figure:first-child { grid-column: 1 / -1; }
.product-gallery img { width: 100%; height: auto; border: 1px solid var(--border); }
.product-gallery a { display: block; }
.product-gallery a[aria-haspopup='dialog'] { cursor: zoom-in; }
@media (max-width:760px) {
  .product-gallery { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
html.has-lightbox, html.has-lightbox body { overflow: hidden; }
.image-lightbox { position: fixed; inset: 0; margin: 0; padding: max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border: 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.image-lightbox::backdrop { background: var(--ink); }
.image-lightbox[open] { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 16px; animation: lightbox-open 180ms ease both; }
.image-lightbox.has-image-caption[open] { grid-template-rows: auto minmax(0,1fr) auto; }
.lightbox-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lightbox-count, .lightbox-caption { font: 400 12px/1.6 var(--mono); color: var(--text-3); }
.image-lightbox button { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 12px; background: transparent; border: 1px solid var(--rule); color: var(--paper); touch-action: manipulation; }
html.pointer-hover .image-lightbox button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
html.keyboard-input .image-lightbox button:focus-visible:not(:disabled) { background: var(--paper); color: var(--ink); }
.image-lightbox button:disabled { opacity: .3; cursor: default; }
.image-lightbox button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lightbox-stage { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 16px; min-height: 0; }
.lightbox-viewport { height: 100%; min-width: 0; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; }
.lightbox-viewport:focus { outline: none; }
.lightbox-viewport.is-dragging { cursor: grabbing; }
.lightbox-track { display: flex; width: 100%; height: 100%; will-change: transform; }
.lightbox-slide { display: flex; align-items: center; justify-content: center; flex: 0 0 100%; min-width: 0; height: 100%; padding-inline: 12px; }
.lightbox-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.lightbox-caption { text-align: center; padding-inline: 64px; overflow-wrap: anywhere; }
.lightbox-caption.sr-only { padding: 0; }
@keyframes lightbox-open { from { opacity: 0; } to { opacity: 1; } }
@media (max-width:680px) {
  .image-lightbox { padding-inline: 10px; gap: 10px; }
  .lightbox-stage { position: relative; grid-template-columns: minmax(0,1fr); padding-bottom: 60px; }
  .lightbox-viewport { grid-column: 1; grid-row: 1; }
  .lightbox-previous, .lightbox-next { position: absolute; bottom: 0; }
  .lightbox-previous { left: 0; }
  .lightbox-next { right: 0; }
  .lightbox-slide { padding-inline: 0; }
  .lightbox-caption { padding-inline: 0; }
}
figcaption { font: 400 12px/1.6 var(--mono); color: var(--text-3); margin-top: 12px; }
.product-features { padding-top: clamp(64px,6vw,80px); }
.feature-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; padding-top: 32px; }
.feature-list-pairs { grid-template-columns: repeat(2,minmax(0,1fr)); }
.feature-list h3 { margin-top: 14px; font-size: 20px; line-height: 1.35; }
.feature-list p { font-size: 16.5px; color: var(--text-2); line-height: 1.6; margin-top: 12px; }
.product-media-feature { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 48px; }
.media-feature-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 64px; }
.media-feature-copy p { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.media-feature-copy .media-feature-note { color: var(--text); }
.media-feature-layout .product-gallery { width: 100%; max-width: 360px; justify-self: center; grid-template-columns: minmax(0,1fr); }
.media-feature-layout .product-gallery img { object-fit: contain; }
@media (max-width:760px) {
  .media-feature-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
.product-details { border-top: 1px solid var(--line); margin-top: 64px; padding-block: 40px; }
.product-details h2 { margin-bottom: 24px; }
.product-details-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 40px; margin: 0; }
.product-details-list > div { min-width: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.product-details-list dt { font-size: 16.5px; font-weight: 500; }
.product-details-list dd { margin: 8px 0 0; color: var(--text-2); font-size: 16.5px; line-height: 1.6; }
.artist-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: center; padding: 15px 0 65px; }
.artist-cover { max-width: 400px; justify-self: end; }
.artist-cover img { width: 100%; border: 1px solid var(--border); }
.product-story { border-top: 1px solid var(--line); display: grid; grid-template-columns: 29% 1fr; gap: 20px; padding: 40px 0 60px; }
.story-lead { font-size: 16.5px; line-height: 1.6; font-weight: 400; }
.releases .section-line { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 30px; }
.section-line>span:not(.status-badge) { font: 400 12px var(--mono); color: var(--muted); }
.album-grid { align-items: start; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 30px; }
.prose-page { min-height: 65vh; padding-bottom: 20px; }
.about-identity { float: right; margin: 30px 0 100px 110px; padding: 50px; }
.legal-translation { margin-top: 35px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 16.5px; line-height: 1.6; }
.legal-translation summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.prose-page h1 { margin: 20px 0 40px; }
.prose-page > h1:first-child { margin-top: 55px; }
.prose-content { width: 100%; }
.prose-content h2 { margin: 56px 0 24px; font-size: clamp(24px,2.4vw,28px); line-height: 1.2; letter-spacing: -.01em; }
.prose-content h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.35; }
.prose-content p { font-size: 16.5px; line-height: 1.6; color: var(--text-2); margin-block: 16px; }
.prose-content p .text-link { display: inline; min-height: 0; font: inherit; text-decoration: underline; }
.prose-content .policy-date { font: 400 12px/1.6 var(--mono); color: var(--muted); }
.prose-content h3 + p { margin-top: 10px; }
.prose-section { margin-top: clamp(48px,5vw,64px); }
.prose-section + .prose-section { border-top: 1px solid var(--line); padding-top: clamp(32px,3vw,40px); }
.prose-subsection { margin-top: 28px; }
.prose-subsection + .prose-subsection { margin-top: 36px; }
.prose-section > :first-child, .prose-subsection > :first-child { margin-top: 0; }
.prose-content .story-lead { font-size: 16.5px; line-height: 1.6; }
.prose-content .muted { color: var(--muted); }
.related-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 28px; padding: 0; margin: 0; list-style: none; }
.error-page { min-height: min(72svh,760px); display: grid; align-items: center; padding-block: clamp(64px,8vw,112px); }
.error-panel { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px,6vw,88px); }
.error-code { font: 400 clamp(112px,18vw,216px)/.9 var(--mono); letter-spacing: -.065em; }
.error-message h1 { max-width: 440px; }
.error-message > p { max-width: 380px; margin-top: 24px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.error-message .product-actions { margin-top: 32px; }
@media (max-width:680px) {
  .error-page { min-height: 65svh; }
  .error-panel { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .error-message h1 { font-size: 36px; }
}
.draft-notice { overflow-wrap: anywhere; border: 1px solid var(--line); background: var(--ink); padding: 20px 24px; margin: 0 0 35px; font: 400 12px/1.6 var(--mono); color: var(--text); }
.draft-notice p { margin-top: 8px; }
.business-details { margin: 20px 0 35px; }
.business-details>div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; border-bottom: 1px solid var(--line); padding: 20px 0; font: 400 16.5px/1.6 var(--sans); }
.business-details dt { font-weight: 500; }
.business-details dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

/* Original artwork is layered only for motion. No path is redrawn or smoothed. */
.entrance { color-scheme: light; background: #fbfaf9; color: #141312; }
.entrance.is-awake { color-scheme: dark; }
.entrance-main { position: fixed; inset: 0; z-index: 10; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border: 0; background: transparent; color: #141312; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.entrance-main::backdrop { background: transparent; }
.entrance-main:focus { outline: none; }
.entrance-surround { position: absolute; inset: 0; background: #fbfaf9; }
.arrival-site { position: relative; isolation: isolate; min-height: 100svh; background: #141312; color: #fbfaf9; }
.arrival-site .site-content { transform-origin: 50% 25%; }
body.is-arrived { background: #141312; color: #fbfaf9; }
.arrival-site:not(.is-arrived) .site-content { transition: none; }
.door-perspective { perspective: 1200px; perspective-origin: 50% 48%; position: relative; z-index: 1; }
.door-stage { height: min(62svh,640px); aspect-ratio: var(--door-ratio); position: relative; transform-origin: var(--camera-x) var(--camera-y); transform-style: flat; perspective: 1200px; perspective-origin: var(--camera-x) var(--camera-y); }
.door-fixed { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.door-leaf { position: absolute; left: var(--leaf-left); top: var(--leaf-top); width: var(--leaf-width); height: var(--leaf-height); transform-origin: 1.171875% 50%; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; }
.doorway { visibility: hidden; position: absolute; left: var(--opening-left); top: var(--opening-top); width: var(--opening-width); height: var(--opening-height); background: #141312; overflow: hidden; opacity: 0; z-index: 0; }
.doorway canvas { width: 100%; height: 100%; display: block; }
.leaf-art { display: block; width: 100%; height: 100%; overflow: visible; }
.leaf-panel { fill: #141312; opacity: 0; }
.leaf-outline { opacity: 0; }
.handle-art { transform-box: fill-box; transform-origin: 25.1059% 52.9652%; }
.handle-hit { position: absolute; left: var(--handle-left); top: var(--handle-top); width: var(--handle-width); height: var(--handle-height); border-radius: 50%; z-index: 3; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.handle-hit:focus { outline: none; }
html.keyboard-input .handle-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
#storm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; z-index: 0; }
.is-preparing .door-leaf { will-change: transform; }
.is-leaf-ready .leaf-panel, .is-opening .leaf-outline { opacity: 1; }

.is-opening .door-fixed, .is-opening .doorway { opacity: 1; }
.is-opening .handle-hit { pointer-events: none; opacity: 0; }


@media (hover:none) { .handle-hit { width: var(--touch-handle-width); height: var(--touch-handle-height); left: var(--touch-handle-left); top: var(--touch-handle-top); } }
@media (max-width:1000px) {
  :root { --page-gutter: 32px; }
  .site-header, .site-footer { padding-inline: 32px; }
  .category { grid-template-columns: 1fr; gap: 24px; }
  .home-hero { gap: 35px; }
  .artist-hero { gap: 35px; }
  .feature-list { gap: 25px; }
  .footer-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  :root { --page-gutter: 20px; --header-top: 28px; --control-bottom: 14px; --control-side: 16px; }
  .site-header { padding: 28px 24px; gap: 28px; }
  .brand-mark { width: auto; height: 28px; }
  .site-header nav { gap: 8px; font-size: 14px; flex-direction: column; align-items: flex-end; }
  .nav-catalog, .nav-company { gap: 15px; justify-content: flex-end; }
  .nav-company { border-left: 0; border-top: 1px solid #6f6a65; padding-left: 0; padding-top: 6px; }
  .home-hero { grid-template-columns: 1fr; gap: 95px; padding-block: 85px 95px; }
  .home-identity { padding: 0; }
  .full-mark { height: 170px; }
  .home-identity .full-mark { height: 300px; }
  .home-heading [data-catalog-title] { font-size: 18px; }
  .road-controls { bottom: 14px; right: 16px; }
  .road-controls[role='dialog'] .road-control-top { right: 16px; bottom: 14px; }
  .category-projects { grid-template-columns: 1fr; gap: 50px; }
  .collection-page { padding-top: 35px; }
  .collection-heading { margin-bottom: 50px; }
  .project-music .project-image img { max-height: 420px; object-fit: contain; object-position: left; }
  .about-identity { float: none; margin: 30px 0 70px; padding: 35px; text-align: center; }
  .home-hero h1 { max-width: 310px; }
  h1 { font-size: 36px; }
  .category { display: block; padding-block: 45px 65px; }
  .category-heading { position: sticky; top: 0; z-index: 5; padding: max(12px,env(safe-area-inset-top)) 0 16px; margin-bottom: 24px; gap: 14px; font-size: clamp(24px,6.15vw,28px); isolation: isolate; }
  .category-heading::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--page-gutter)); background: var(--ink); z-index: -1; }
  .site-footer { padding: 30px 20px; margin-top: 45px; }
  .footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer-legal { align-self: flex-end; max-width: 100%; }
  .footer-top { padding-top: 10px; }
  .footer-directory { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px 26px; padding-bottom: 35px; }
  .footer-wordmark { width: 160px; }
  .manual-controls p { font-size: 12px; }
  .product-page > .breadcrumb, .prose-page > .breadcrumb { padding-block: 24px 26px; }
  .product-hero > .section-line { padding-top: 24px; }
  .breadcrumb { font-size: 12px; letter-spacing: .04em; }
  .breadcrumb-divider { margin-inline: 10px; }
  .product-hero { padding: 12px 0 35px; }
  .product-hero .eyebrow { font-size: 12px; letter-spacing: .04em; }
  .status-badge { font-size: 12px; letter-spacing: .03em; padding: 7px 9px; }
  .feature-list { grid-template-columns: 1fr; gap: 30px; padding-block: 40px; }
  .product-details-list { grid-template-columns: minmax(0,1fr); }
  .artist-hero { grid-template-columns: 1fr; gap: 35px; padding-bottom: 45px; }
  .artist-cover { max-width: 360px; justify-self: start; }
  .product-story { grid-template-columns: 1fr; padding: 30px 0 40px; gap: 15px; }
  .album-grid { grid-template-columns: repeat(2,1fr); gap: 30px 18px; }
  .section-line>span:not(.status-badge) { display: none; }
  .link-row { gap: 15px 25px; }
  .business-details>div { grid-template-columns: 1fr; gap: 8px; }
  .related-links { grid-template-columns: minmax(0,1fr); }
  .draft-notice { padding: 16px; }
  .door-stage { height: min(62svh,570px,112.44vw); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #storm { display: none; }
  .is-opening .door-leaf, .is-opening .door-stage { transform: none; }
}
@media print {
  :root, .interior { --ink: #141312; --paper: #fbfaf9; --bg: #fff; --text: #141312; --text-2: #35322e; --muted: #6f6a65; --line: #e2ded9; color-scheme: light; }
  body { background: #fff; color: #141312; }
  .road-backdrop, .road-controls, .site-header nav, .skip-link { display: none; }
  .hero-door-backing { display: none; }
  .image-lightbox { display: none !important; }
  .site-header, .site-footer { padding: 20px 0; }
  .wrap { width: 100%; }
  .home-hero { min-height: 0; padding: 30px 0; }
  .category-heading { position: static; padding: 0; }
  .category-heading::before { display: none; }
  .product-gallery figure { break-inside: avoid; }
  .site-footer { margin-top: 30px; }
}

/* One retained, opt-in player. It joins the road controls on the home page. */
.music-controls { position: fixed; bottom: 22px; right: 30px; z-index: 30; }
.music-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; color: var(--paper); background: rgba(7,9,13,.65); border: 0; cursor: pointer; }
.music-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.music-toggle[data-playing='false'] .music-waves, .music-toggle[data-playing='true'] .music-muted { display: none; }
html.pointer-hover .music-toggle:hover { background: var(--paper); color: var(--ink); }
html.keyboard-input .music-toggle:focus-visible { background: var(--paper); color: var(--ink); }
.now-playing { position: fixed; left: 30px; bottom: 22px; width: min(260px, calc(100% - 210px)); font-family: var(--sans); pointer-events: auto; }
.now-playing-link { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--paper); text-decoration: none; }
.now-playing-link img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
.now-playing-link strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.track-artist { display: block; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.now-playing-link:hover strong { text-decoration: var(--hover-decoration, none); text-underline-offset: 3px; }
.now-playing progress { display: block; width: 100%; height: 2px; margin-top: 6px; appearance: none; border: 0; border-radius: 0; background: #64615d; color: var(--paper); }
.now-playing progress::-webkit-progress-bar { background: #64615d; }
.now-playing progress::-webkit-progress-value { background: var(--paper); }
.now-playing progress::-moz-progress-bar { background: var(--paper); }
.site-footer { padding-bottom: 90px; }
@media (max-width: 760px) {
 .music-controls { bottom: 14px; right: 16px; }
 .now-playing { left: 16px; bottom: 14px; width: min(260px, calc(100% - 192px)); }
 .now-playing-link { gap: 8px; }
 .scene-active.has-tilt-control .now-playing { bottom: calc(var(--control-bottom) + env(safe-area-inset-bottom) + 56px); width: min(260px, calc(100% - 32px)); }
}
@media (prefers-reduced-motion: no-preference) {
 ::view-transition-old(music-control), ::view-transition-new(music-control) { animation: none; mix-blend-mode: normal; }
}
@media print { .music-controls, .now-playing { display: none; } }

.track-album::before { content: ' · '; }
@media (max-width: 360px) { .track-album { display: block; } .track-album::before { content: ''; } }
@media print { .site-footer { padding: 20px 0; } }

.music-toggle[data-persistent-music="true"] { view-transition-name: music-control; }

/* Driving owns drag gestures; normal pages retain native text selection. */
.scene-active, .scene-active * { -webkit-user-select: none; user-select: none; }
.scene-active .road-controls img, .scene-active .road-controls a { -webkit-user-drag: none; }

/* Paint Safari/Android cutouts with the page and keep controls clear of them. */
.site-header, .site-footer {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
.site-header { padding-top: calc(var(--header-top) + env(safe-area-inset-top)); }
.site-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.has-road .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.road-controls, .music-controls, .road-controls[role='dialog'] .road-control-top {
  bottom: calc(var(--control-bottom) + env(safe-area-inset-bottom));
  right: max(var(--control-side), env(safe-area-inset-right));
}
.now-playing { bottom: calc(var(--control-bottom) + env(safe-area-inset-bottom)); left: max(30px, env(safe-area-inset-left)); }

/* Wrap between metadata phrases rather than orphaning a release year. */
.metadata-part { white-space: nowrap; }

/* Derived from tight exported SVG viewports. */
:root {
  --door-ratio: 808.412049 / 1054.046876;
  --leaf-left: 18.95939097%;
  --leaf-top: 0.03215350%;
  --leaf-width: 63.33403870%;
  --leaf-height: 84.43647244%;
  --opening-left: 20.56748179%;
  --opening-top: 1.26549524%;
  --opening-width: 60.11785705%;
  --opening-height: 82.34927874%;
  --camera-x: 50.62641032%;
  --camera-y: 42.44013461%;
  --handle-left: 24.20053007%;
  --handle-top: 42.52741725%;
  --handle-width: 21.96775768%;
  --handle-height: 10.75853480%;
  --touch-handle-left: 21.64613964%;
  --touch-handle-top: 40.06832358%;
  --touch-handle-width: 28.60917280%;
  --touch-handle-height: 15.36933543%;
}
.logo-thats-spanish-for { aspect-ratio: 1738.121095 / 879.7304; }
.logo-honigferd { aspect-ratio: 142.386018 / 80.30005; }
.logo-neon-draft { aspect-ratio: 1369.400025 / 184; }