/* =====================================================================
   HAULAT - landing stylesheet  (assets/css/index.css)
   Skylrk grain field × Neighborhood brutalism, on Haulat's bones:
   Akira display, DotGothic labels, Inter body, dotted matrix retained.
   ===================================================================== */

/* ---- Akira for every heading (retained convention) ---- */
@font-face {
    font-family: 'Akira';
    src: url('https://hau.lat/assets/font/akira.otf') format('opentype');
    font-weight: 800;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Akira', 'Inter', sans-serif; text-transform: uppercase; }

html { scroll-behavior: smooth; }
::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; background: #6E0B12; }

/* =====================================================================
   SCROLL PROGRESS - retained, recut for the red field
   ===================================================================== */
#scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: #111111; z-index: 60;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}

/* =====================================================================
   GRAIN FIELD - the Skylrk move. Two drifting radial blobs of deep red
   through signal red into dusty pink, with animated film grain over the
   top (SVG feTurbulence, stepped shimmer). Pure CSS: zero JS cost.
   ===================================================================== */
#grain-field {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(160deg, #6E0B12 0%, #B01620 42%, #D96A75 100%);
}
#grain-field::before {
    content: ''; position: absolute; inset: -25%;
    background:
        radial-gradient(42% 46% at 24% 30%, rgba(232, 80, 92, .85) 0%, rgba(232, 80, 92, 0) 70%),
        radial-gradient(50% 55% at 78% 22%, rgba(30, 4, 8, .75) 0%, rgba(30, 4, 8, 0) 72%),
        radial-gradient(46% 50% at 68% 82%, rgba(236, 152, 160, .8) 0%, rgba(236, 152, 160, 0) 70%),
        radial-gradient(38% 42% at 38% 88%, rgba(215, 25, 33, .9) 0%, rgba(215, 25, 33, 0) 68%);
    animation: field-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes field-drift {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(2.5%, 3%, 0) rotate(2.5deg) scale(1.06); }
    100% { transform: translate3d(-1.5%, 1.5%, 0) rotate(-2deg) scale(1.03); }
}
#grain-field::after {
    content: ''; position: absolute; inset: -60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: .17; mix-blend-mode: overlay; pointer-events: none;
    animation: grain-shift 1.1s steps(5) infinite;
}
@keyframes grain-shift {
    0% { transform: translate(0, 0); } 20% { transform: translate(-18px, 12px); }
    40% { transform: translate(14px, -20px); } 60% { transform: translate(-10px, -14px); }
    80% { transform: translate(18px, 16px); } 100% { transform: translate(0, 0); }
}

/* =====================================================================
   DOTTED MATRIX - retained device: a translucent white dot lattice
   floating above the grain, beneath everything else.
   ===================================================================== */
#dot-overlay {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1.4px, transparent 1.4px);
    background-size: 38px 38px;
}
/* light cells keep the original dark-dot lattice */
.dot-grid {
    background-image: radial-gradient(rgba(17, 17, 17, .10) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
}

/* =====================================================================
   MODEL STAGE - fixed, behind content, above grain + dots
   ===================================================================== */
#model-stage {
    position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%;
    pointer-events: none;
}
/* =====================================================================
   HEADER - SKYLRK-grade glass: a wide brand pill, a toggle pill whose
   plus spins into a close, and the menu hanging directly beneath.
   The logo ships black, so it's inverted to white in CSS - no new asset.
   ===================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    width: 100%; max-width: 1120px; margin: 0 auto;
    padding: 14px clamp(12px, 3vw, 22px) 0;
    pointer-events: none;
}
.hdr-row { display: flex; gap: 10px; align-items: stretch; pointer-events: auto; }
.hdr-pill {
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: 0 10px 30px rgba(30, 4, 8, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.hdr-brand {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 15px 26px; min-height: 56px;
}
.hdr-logo {
    height: 30px; width: auto; pointer-events: none;
    filter: brightness(0) invert(1);              /* black asset → white */
}
.hdr-wordmark {
    font-family: 'Akira', sans-serif; color: #FFFFFF;
    font-size: 15px; letter-spacing: .32em; text-transform: uppercase;
}
.hdr-social {
    flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
    padding: 0 10px; min-height: 56px;
}
.hdr-social a {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #FFFFFF; transition: background .16s ease;
}
.hdr-social a:hover { background: rgba(255, 255, 255, .2); }

.hdr-lang {
    flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
    padding: 0 8px; min-height: 56px;
}
.lang-opt {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 30px; padding: 0 7px; border-radius: 999px;
    font-family: 'JetBrains Mono', 'PingFang TC', 'Hiragino Sans', 'Microsoft JhengHei', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .08em; text-decoration: none;
    color: rgba(255, 255, 255, .62);
    transition: color .16s ease, background .16s ease;
}
.lang-opt:hover { color: #FFFFFF; }
.lang-opt.on { color: #111111; background: rgba(255, 255, 255, .92); font-weight: 700; }

.hdr-toggle {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 0 20px; min-height: 56px; cursor: pointer;
    color: #FFFFFF; -webkit-tap-highlight-color: transparent;
}
.hdr-locale {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    letter-spacing: .18em; color: rgba(255, 255, 255, .9);
}
.hdr-plus { position: relative; width: 17px; height: 17px; display: block; }
.hdr-plus .bar {
    position: absolute; top: 50%; left: 50%; background: #FFFFFF; border-radius: 2px;
    transform-origin: center;
}
.hdr-plus .bar-h { width: 17px; height: 2px; transform: translate(-50%, -50%); }
.hdr-plus .bar-v { width: 2px; height: 17px; transform: translate(-50%, -50%); }
.hdr-plus { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.site-header.open .hdr-plus { transform: rotate(135deg); }   /* + spins into × */

/* the panel: hangs under the header, glass, rounded hard */
.menu-panel {
    pointer-events: none; opacity: 0;
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
    margin-top: 10px; padding: 12px 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: 0 22px 50px rgba(30, 4, 8, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
    max-height: calc(100svh - 120px); overflow-y: auto;
}
.site-header.open .menu-panel { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
.menu-row {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 11px 20px; background: none; border: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: clamp(1.35rem, 4.6vw, 1.75rem); letter-spacing: -.01em;
    color: #FFFFFF; text-decoration: none; text-transform: uppercase;
    transition: padding-left .2s ease, opacity .2s ease;
}
.menu-row:hover { padding-left: 27px; opacity: .82; }
.menu-arrow { font-size: .8em; opacity: .85; }
.menu-meta {
    display: block; padding: 14px 20px 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    letter-spacing: .28em; color: rgba(255, 255, 255, .7);
}

/* =====================================================================
   FOOTER - glass pill. Fixed to the bottom on mobile (thumb country),
   parked at the document's end on desktop.
   ===================================================================== */
.site-footer { position: relative; z-index: 40; width: 100%; padding: 0 12px 14px; }
.footer-pill {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 22px; border-radius: 999px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: 0 12px 34px rgba(30, 4, 8, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.footer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.footer-logo { height: 13px; filter: brightness(0) invert(1); }
.footer-tag {
    font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a {
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
    text-decoration: none; transition: color .15s ease;
}
.footer-links a:hover { color: #FFFFFF; }
.footer-copy {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    letter-spacing: .2em; color: rgba(255, 255, 255, .6);
}
@media (max-width: 767px) {
    .site-footer { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
    .footer-pill { padding: 11px 18px; justify-content: center; }
    .footer-brand, .footer-copy { display: none; }
    .footer-links { gap: 20px; }
    body { padding-bottom: 78px; }
}

/* =====================================================================
   COOKIE BAR - glass slab, mono voice, ghost + solid actions
   ===================================================================== */
.cookie-bar {
    position: fixed; z-index: 55;
    left: 12px; right: 12px; bottom: 12px;
    max-width: 620px; margin: 0 auto;
    padding: 20px 22px 18px; border-radius: 24px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: 0 22px 50px rgba(30, 4, 8, .36), inset 0 1px 0 rgba(255, 255, 255, .5);
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.cookie-bar.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-copy {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.65;
    letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF;
    margin-bottom: 16px;
}
.cookie-actions { display: flex; gap: 12px; }
.cookie-btn {
    flex: 1; padding: 13px 10px; border-radius: 12px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    transition: transform .15s ease, background .15s ease;
}
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn-ghost {
    color: #FFFFFF; background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .55);
}
.cookie-btn-ghost:hover { background: rgba(255, 255, 255, .3); }
.cookie-btn-solid { color: #4a4f57; background: #F4F5F7; border: 1px solid #FFFFFF; }
.cookie-btn-solid:hover { background: #FFFFFF; }
@media (max-width: 767px) { .cookie-bar { bottom: 84px; } }

/* =====================================================================
   WALLPAPERS - glass panel, one row per format
   ===================================================================== */
.wp-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.wp-modal.on { display: block; }
.wp-scrim { position: absolute; inset: 0; background: rgba(30, 4, 8, .45); }
.wp-panel {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 460px); max-height: 88svh; overflow-y: auto;
    padding: 22px 20px 18px; border-radius: 30px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow: 0 30px 70px rgba(30, 4, 8, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.wp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.wp-title {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px;
    letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF;
}
.wp-close { font-size: 26px; line-height: 1; color: #FFFFFF; background: none; border: 0; cursor: pointer; opacity: .85; }
.wp-close:hover { opacity: 1; }
.wp-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; margin-bottom: 12px; border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #FFFFFF; text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.wp-row:hover { background: rgba(255, 255, 255, .27); transform: translateY(-1px); }
.wp-thumb {
    display: block; flex: 0 0 auto; overflow: hidden; border-radius: 10px;
    background: linear-gradient(150deg, #B01620, #D96A75);
    border: 1px solid rgba(255, 255, 255, .35);
}
.wp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-thumb img.wp-img-missing { opacity: 0; }        /* placeholder gradient shows through */
.wp-thumb-tall { width: 52px; height: 92px; }
.wp-thumb-mid  { width: 68px; height: 92px; }
.wp-thumb-wide { width: 132px; height: 82px; }
.wp-label {
    margin-left: auto; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
}
.wp-dl { flex: 0 0 auto; opacity: .9; }
.wp-note {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.7;
    letter-spacing: .08em; color: rgba(255, 255, 255, .78); padding: 4px 4px 0;
}

/* =====================================================================
   TYPE - Neighborhood-scale display over the field
   ===================================================================== */
.hero-title {
    color: #FFFFFF; font-weight: 800;
    font-size: clamp(2.6rem, 9.5vw, 6.2rem);
    line-height: .95; letter-spacing: -0.01em;
    text-shadow: 0 4px 40px rgba(30, 4, 8, .35);
}
.stroke-white {
    color: transparent;
    -webkit-text-stroke: 2px #FFFFFF;
}
.finale-title {
    color: #FFFFFF; font-size: clamp(1.9rem, 6.5vw, 4rem);
    line-height: 1.02; text-shadow: 0 4px 40px rgba(30, 4, 8, .35);
}
.v-rail {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: 'Akira', sans-serif; font-size: 11px;
    letter-spacing: .5em; color: rgba(255, 255, 255, .55);
    text-transform: uppercase; user-select: none; z-index: 10;
}

/* =====================================================================
   META CHIPS + BRUTAL BUTTONS
   ===================================================================== */
.meta-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    letter-spacing: .22em; text-transform: lowercase;
    color: #FFFFFF; background: rgba(17, 17, 17, .45);
    border: 1px solid rgba(255, 255, 255, .35);
    padding: 6px 12px; border-radius: 4px; backdrop-filter: blur(6px);
}
.meta-chip-red { background: #D71921; border-color: #D71921; }

.btn-primary {
    display: inline-block; background: #FFFFFF; color: #111111;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .25em;
    padding: 17px 26px; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(30, 4, 8, .30);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary:hover { background: #F4F3F1; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-glass {
    display: inline-block; color: #FFFFFF;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .45);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .25em;
    padding: 16px 26px; border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.btn-glass:active { transform: translateY(1px); }

/* =====================================================================
   CELLS - Neighborhood's hard-border editorial grid
   ===================================================================== */
.cell-frame {
    border-radius: 34px; overflow: hidden;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .45);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 24px 60px rgba(30, 4, 8, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cell {
    padding: 30px 28px; position: relative; color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.cell:last-child { border-bottom: 0; }
@media (min-width: 768px) {
    .cell-frame.md\:grid-cols-3 > .cell { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .22); }
    .cell-frame.md\:grid-cols-3 > .cell:last-child { border-right: 0; }
}
.cell .dot-grid, .cell.dot-grid {
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
}
.cell-index {
    position: absolute; top: 14px; right: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px;
    letter-spacing: .16em; color: rgba(255, 255, 255, .6);
}
.cell-title { font-size: 1.15rem; line-height: 1.15; margin: 14px 0 10px; color: #FFFFFF; }
.cell-copy {
    font-family: 'Inter', sans-serif; font-size: .82rem;
    color: rgba(255, 255, 255, .82); line-height: 1.65; margin-bottom: 20px;
}
.cell-cta {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    letter-spacing: .12em; text-transform: lowercase; color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 3px;
    transition: color .15s ease, border-color .15s ease;
}
.cell-cta:hover { color: #FFD9DC; border-color: #FFD9DC; }

/* =====================================================================
   LOOKBOOK - the scatter. Full-bleed and transparent over the grain:
   drops pinned at seeded positions like prints on a wall, a random few
   soft-blurred until chosen. No animation loop at all - the only motion
   is a slow transform-only bob, composited on the GPU, kind to old
   MacBooks and phones alike. Tap to choose (it sharpens, the rest
   soften); tap the chosen piece again to cop it.
   ===================================================================== */
.scatter-stage {
    position: relative; width: 100%;
    height: 100svh; min-height: 620px;
    overflow: hidden;
}
.g-card {
    position: absolute;
    width: min(40vw, 212px);
    background: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, .10);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(30, 4, 8, .26);
    padding: 8px 8px 10px;
    text-decoration: none;
    transform: rotate(var(--rot, 0deg));
    transition: filter .35s ease, transform .25s ease, box-shadow .25s ease;
}
.g-card:hover { filter: none; transform: rotate(var(--rot, 0deg)) scale(1.03); z-index: 200 !important; }
.g-bob {
    display: block;
    animation: bob var(--dur, 8s) ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes bob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.g-card img {
    display: block; width: 100%; aspect-ratio: 3 / 4;
    object-fit: cover; background: #EDEBE8;
    border-radius: 10px; pointer-events: none;
}
.g-blur { filter: blur(4px); }
.g-sel {
    filter: none !important;
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 24px 54px rgba(30, 4, 8, .34), 0 0 0 3px #D71921;
    z-index: 210 !important;
}
.p-caption {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-top: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
    letter-spacing: .1em; text-transform: lowercase; color: #111111;
}
.p-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-price { flex-shrink: 0; color: #D71921; }
.p-store {
    display: block; margin-top: 2px;
    font-family: 'Inter', sans-serif; font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase; color: #9a9a9a;
}
.globe-cue {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    letter-spacing: .28em; text-transform: lowercase;
    color: rgba(255, 255, 255, .65); pointer-events: none;
    white-space: nowrap; z-index: 300;
}
@media (prefers-reduced-motion: reduce) { .g-bob { animation: none; } }

/* =====================================================================
   MOTION - reveal (retained) + scroll cue
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.scroll-cue { animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

@media (prefers-reduced-motion: reduce) {
    #grain-field::before, #grain-field::after, .scroll-cue { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* =====================================================================
   MOBILE - responsiveness and the cheap seats.
   Backdrop blur and animated grain are the two things that cost real
   frames on phones and older laptops, so both are dialled back here,
   and the scatter thins out. The look survives; the heat doesn't.
   ===================================================================== */
@media (max-width: 767px) {
    .hdr-pill { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .menu-panel, .cookie-bar, .wp-panel, .footer-pill {
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .cell-frame { backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); border-radius: 28px; }

    /* the grain keeps its texture, loses its shimmer (repaints every 220ms) */
    #grain-field::after { animation: none; opacity: .13; }
    #grain-field::before { animation-duration: 40s; }

    .site-header { padding: 10px 10px 0; }
    .hdr-brand { padding: 13px 16px; min-height: 50px; }
    .hdr-social { min-height: 50px; padding: 0 6px; gap: 0; }
    .hdr-social a { width: 32px; height: 32px; }
    .hdr-toggle { min-height: 50px; padding: 0 15px; gap: 9px; }
    .hdr-logo { height: 14px; }
    .menu-row { font-size: 1.3rem; padding: 10px 16px; }

    .cell { padding: 24px 22px; }
    .hero-title { font-size: clamp(2.3rem, 12vw, 3.6rem); }
    .v-rail { display: none; }

    /* a lighter wall of prints: fewer cards, fewer blurred layers */
    .scatter-stage { height: 92svh; min-height: 520px; }
    .g-card { width: min(44vw, 168px); }
    .g-card:nth-child(n+9) { display: none; }
    .g-blur { filter: blur(3px); }
}

/* very small phones: keep the hero breathing */
@media (max-width: 380px) {
    .hero-title { font-size: 2.05rem; }
    .hdr-social { display: none; }         /* socials live in the menu too */
}

/* =====================================================================
   CJK - Akira and JetBrains Mono carry no Chinese or Japanese glyphs, so
   those languages fall back to the system faces (PingFang / Hiragino /
   JhengHei / Yu Gothic). System fonts, not webfonts: a Noto CJK download
   is multi-megabyte, and these render beautifully and instantly.
   ===================================================================== */
:root {
    --cjk: 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
           'Noto Sans CJK TC', 'Microsoft JhengHei', 'Yu Gothic', sans-serif;
}
html[lang="zh-Hant"] body, html[lang="ja"] body { font-family: 'Inter', var(--cjk); }
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3,
html[lang="zh-Hant"] h4, html[lang="zh-Hant"] h5, html[lang="zh-Hant"] h6,
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3,
html[lang="ja"] h4, html[lang="ja"] h5, html[lang="ja"] h6 {
    font-family: var(--cjk); font-weight: 800; letter-spacing: .01em;
}
/* CJK sets denser than Latin - the display sizes need a touch more air */
html[lang="zh-Hant"] .hero-title, html[lang="ja"] .hero-title { line-height: 1.14; letter-spacing: .005em; }
html[lang="zh-Hant"] .finale-title, html[lang="ja"] .finale-title { line-height: 1.3; }
html[lang="zh-Hant"] .stroke-white, html[lang="ja"] .stroke-white { -webkit-text-stroke-width: 1.6px; }
html[lang="zh-Hant"] .v-rail, html[lang="ja"] .v-rail { font-family: var(--cjk); letter-spacing: .32em; }
html[lang="zh-Hant"] .cell-copy, html[lang="ja"] .cell-copy { line-height: 1.85; }
html[lang="zh-Hant"] .cookie-copy, html[lang="ja"] .cookie-copy {
    text-transform: none; letter-spacing: .04em; line-height: 1.85;
}
html[lang="zh-Hant"] .menu-row, html[lang="ja"] .menu-row { text-transform: none; letter-spacing: .02em; }
html[lang="zh-Hant"] .wp-label, html[lang="ja"] .wp-label,
html[lang="zh-Hant"] .footer-links a, html[lang="ja"] .footer-links a { text-transform: none; letter-spacing: .06em; }

/* four pills on a small screen: keep the header from wrapping */
@media (max-width: 767px) {
    .hdr-lang { min-height: 50px; padding: 0 5px; }
    .lang-opt { min-width: 29px; height: 27px; padding: 0 5px; font-size: 10px; }
}
@media (max-width: 380px) {
    .hdr-lang { padding: 0 3px; }
    .lang-opt { min-width: 25px; padding: 0 3px; font-size: 9.5px; letter-spacing: 0; }
}