/* ============================================================
   ritikarora.com — design system
   Warm-paper neobrutalism × neumorphism.
   Rule of the system:
     · containers  = soft (neumorphic dual shadow, no border)
     · interactive = hard (2px ink border + offset shadow),
       pressed states go neumorphic-inset.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
    /* palette */
    --bone: #EAE2D3;
    --bone-2: #E1D8C6;
    --bone-3: #D8CEB9;
    --ink: #1D1A15;
    --ink-2: #3A352C;
    --ink-soft: #6B6355;
    --orange: #C4501B;
    --orange-deep: #9C3D10;
    --orange-tint: #E8B49A;
    --olive: #6E7434;
    --olive-deep: #545A24;
    --olive-tint: #C9CBA3;
    --cream: #F2EDE1;

    /* dark surface (music / pill) */
    --coal: #14120E;
    --coal-2: #1E1B15;
    --coal-3: #2A261D;

    /* shadows */
    --hard: 5px 5px 0 var(--ink);
    --hard-sm: 3px 3px 0 var(--ink);
    --hard-lg: 8px 8px 0 var(--ink);
    --soft: -8px -8px 18px rgba(255, 252, 242, 0.75),
            10px 12px 24px rgba(155, 140, 110, 0.35);
    --soft-sm: -4px -4px 10px rgba(255, 252, 242, 0.7),
               5px 6px 14px rgba(155, 140, 110, 0.3);
    --inset: inset 3px 3px 8px rgba(150, 135, 105, 0.4),
             inset -3px -3px 8px rgba(255, 252, 242, 0.85);
    --inset-deep: inset 5px 5px 12px rgba(140, 125, 95, 0.5),
                  inset -4px -4px 10px rgba(255, 252, 242, 0.7);

    /* motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 0.28s;
    --t-med: 0.5s;
    --t-slow: 0.9s;

    /* type */
    --font-sans: "Archivo", system-ui, sans-serif;
    --font-serif: "Instrument Serif", Georgia, serif;
    --font-mono: "Space Mono", ui-monospace, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
svg { display: block; }
::selection { background: var(--orange); color: var(--cream); }

@media (pointer: fine) {
    body.has-cursor, body.has-cursor a, body.has-cursor button,
    body.has-cursor [role="slider"], body.has-cursor summary { cursor: none; }
}

/* ---------- grain ---------- */
.grain {
    position: fixed; inset: -50%;
    width: 200%; height: 200%;
    pointer-events: none;
    z-index: 2000;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1.5%, 1%); }
    50% { transform: translate(1%, -1.5%); }
    75% { transform: translate(-1%, -1%); }
    100% { transform: translate(0, 0); }
}

/* ---------- custom cursor ---------- */
.cursor { display: none; }
@media (pointer: fine) {
    .cursor {
        display: block;
        position: fixed; top: 0; left: 0;
        pointer-events: none;
        z-index: 3000;
    }
    .cursor-dot {
        position: absolute; top: -3px; left: -3px;
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--ink);
        transition: opacity var(--t-fast) var(--ease-out),
                    transform var(--t-fast) var(--ease-out);
    }
    .cursor-ring {
        position: absolute; top: -19px; left: -19px;
        width: 38px; height: 38px;
        border: 1.5px solid var(--ink);
        border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        transition: width var(--t-med) var(--ease-spring),
                    height var(--t-med) var(--ease-spring),
                    top var(--t-med) var(--ease-spring),
                    left var(--t-med) var(--ease-spring),
                    background-color var(--t-fast) var(--ease-out),
                    border-color var(--t-fast) var(--ease-out),
                    opacity var(--t-fast) var(--ease-out),
                    transform var(--t-fast) var(--ease-out);
    }
    .cursor-label {
        font-family: var(--font-mono);
        font-size: 0.66rem;
        letter-spacing: 0.04em;
        color: var(--cream);
        opacity: 0;
        white-space: nowrap;
        transition: opacity var(--t-fast) var(--ease-out);
    }
    .cursor.is-hover .cursor-ring {
        width: 74px; height: 74px; top: -37px; left: -37px;
        background: var(--orange);
        border-color: var(--orange);
    }
    .cursor.is-hover .cursor-label { opacity: 1; }
    .cursor.is-hover .cursor-dot { transform: scale(0); }
    .cursor.is-down .cursor-ring { transform: scale(0.85); }
    .cursor.is-hidden { opacity: 0; }
    .cursor.on-dark .cursor-dot { background: var(--cream); }
    .cursor.on-dark:not(.is-hover) .cursor-ring { border-color: var(--cream); }
}

/* ---------- scroll progress ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 4px; width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--orange), var(--olive));
    z-index: 1500;
}

/* ---------- nav ---------- */
#site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 1.1rem 0;
    transition: padding var(--t-med) var(--ease-out);
}
#site-nav::before {
    content: "";
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bone) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid transparent;
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-out),
                border-color var(--t-med) var(--ease-out);
}
#site-nav.is-scrolled { padding: 0.65rem 0; }
#site-nav.is-scrolled::before { opacity: 1; border-bottom-color: var(--ink); }

.nav-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
    display: flex; align-items: baseline;
    transition: transform var(--t-med) var(--ease-spring);
}
.nav-logo em { color: var(--orange); font-style: normal; }
.nav-logo:hover { transform: rotate(-4deg) scale(1.06); }
.nav-logo.is-wobbling { animation: logo-wobble 0.7s var(--ease-spring); }
@keyframes logo-wobble {
    0% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.15); }
    55% { transform: rotate(8deg) scale(0.95); } 100% { transform: rotate(0) scale(1); }
}

.nav-links { display: flex; gap: 0.4rem; align-items: center; }
.nav-link {
    position: relative;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
.nav-link:hover { border-color: var(--ink); transform: translateY(-1px); }
.nav-link.is-active { border-color: var(--ink); background: var(--bone-2); box-shadow: var(--hard-sm); }
.nav-link-cta { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.nav-link-cta:hover { background: var(--orange); border-color: var(--ink); }
.nav-link-cta.is-active { background: var(--orange); color: var(--cream); }

.nav-burger {
    display: none;
    width: 44px; height: 44px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--bone-2);
    box-shadow: var(--hard-sm);
    position: relative;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.nav-burger:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.nav-burger span {
    position: absolute; left: 11px; right: 11px;
    height: 2.5px; background: var(--ink); border-radius: 2px;
    transition: transform var(--t-med) var(--ease-spring), top var(--t-med) var(--ease-spring);
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 24px; }
.nav-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed; inset: 0;
    z-index: 900;
    background: var(--bone);
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 clamp(1.5rem, 8vw, 4rem);
    clip-path: circle(0% at calc(100% - 44px) 40px);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease-inout), visibility 0s 0.7s;
}
.mobile-menu.is-open {
    clip-path: circle(150% at calc(100% - 44px) 40px);
    visibility: visible;
    transition: clip-path 0.7s var(--ease-inout), visibility 0s;
}
.mobile-link {
    display: flex; align-items: baseline; gap: 1rem;
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 0.6rem 0;
    border-bottom: 2px solid var(--bone-3);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.mobile-menu.is-open .mobile-link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-link:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-link:nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-link:nth-child(3) { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-link:nth-child(4) { transition-delay: 0.3s; }
.mobile-menu.is-open .mobile-link:nth-child(5) { transition-delay: 0.36s; }
.mobile-link-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--orange); }
.mobile-menu-foot { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.85rem 1.6rem;
    border: 2px solid var(--ink);
    border-radius: 16px;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease-spring); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn-solid { background: var(--orange); color: var(--cream); box-shadow: var(--hard); }
.btn-solid:hover { transform: translate(-2px, -2px); box-shadow: var(--hard-lg); background: var(--orange-deep); }
.btn-solid:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink), inset 3px 3px 8px rgba(0,0,0,0.35); }
.btn-ghost { background: var(--bone-2); box-shadow: var(--soft-sm); border-color: var(--ink); }
.btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); }
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: var(--inset); }
.btn-dark-ghost {
    background: var(--coal-2); color: var(--cream);
    border-color: var(--cream);
    box-shadow: 5px 5px 0 rgba(242, 237, 225, 0.25);
}
.btn-dark-ghost svg { width: 20px; height: 20px; }
.btn-dark-ghost:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); border-color: var(--orange); }
.btn-dark-ghost:active { transform: translate(3px, 3px); box-shadow: 0 0 0 transparent, inset 3px 3px 8px rgba(0,0,0,0.6); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--bone-2);
    box-shadow: var(--hard-sm);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--ink); color: var(--bone); transform: translate(-1px, -1px) rotate(-4deg); box-shadow: var(--hard); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: var(--inset); }

/* ---------- hero ---------- */
#hero {
    min-height: 100svh;
    display: flex; align-items: center;
    position: relative;
    padding: 7rem 0 5rem;
    background:
        radial-gradient(ellipse 60% 45% at 78% 18%, rgba(196, 80, 27, 0.1), transparent 70%),
        radial-gradient(ellipse 55% 42% at 15% 85%, rgba(110, 116, 52, 0.12), transparent 70%);
}
.hero-inner {
    max-width: 1180px; margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    width: 100%;
}
.hero-overline {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ink-2);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--bone-2);
    box-shadow: var(--inset);
    margin-bottom: 1.6rem;
}
.overline-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--olive); box-shadow: 1px 1px 0 var(--ink); }

.hero-name {
    font-weight: 900;
    font-size: clamp(4rem, 15vw, 11.5rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}
.hero-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-line-2 { display: flex; align-items: flex-start; gap: 0.2em; }
.hero-word { display: inline-block; white-space: nowrap; }
.hero-word .ch {
    display: inline-block;
    transform: translateY(115%) rotate(6deg);
    animation: ch-in 0.9s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 0.045s + var(--line, 0) * 0.18s);
}
@keyframes ch-in { to { transform: translateY(0) rotate(0); } }
.hero-sticker {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1rem, 2.6vw, 1.7rem);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    color: var(--cream);
    background: var(--olive);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--hard-sm);
    padding: 0.35em 0.8em;
    margin-top: 0.35em;
    transform: rotate(8deg) scale(0);
    animation: sticker-pop 0.6s var(--ease-spring) 1s forwards;
    transition: transform var(--t-med) var(--ease-spring), background-color var(--t-fast) var(--ease-out);
}
@keyframes sticker-pop { to { transform: rotate(8deg) scale(1); } }
.hero-sticker:hover { transform: rotate(-4deg) scale(1.12) !important; background: var(--orange); }

.hero-roles {
    display: flex; align-items: baseline; gap: 0.5ch; flex-wrap: wrap;
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 600;
    margin-bottom: 1.4rem;
}
.role-flip {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.5em;
    vertical-align: bottom;
    min-width: 9.5ch;
}
.role-word {
    position: absolute; left: 0; top: 0;
    white-space: nowrap;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
    transform: translateY(110%);
    transition: transform 0.65s var(--ease-inout);
}
.role-word.is-active { transform: translateY(0); }
.role-word.is-leaving { transform: translateY(-110%); }

.hero-desc {
    max-width: 34rem;
    font-size: 1.1rem;
    color: var(--ink-2);
    margin-bottom: 2.2rem;
}
.hero-desc em { font-family: var(--font-serif); font-size: 1.12em; }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stickers { display: flex; gap: 1rem; flex-wrap: wrap; }
.sticker {
    display: flex; flex-direction: column;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--bone-2);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--hard-sm);
    padding: 0.7rem 1.1rem;
    transform: rotate(var(--tilt, 0deg));
    transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.sticker:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--hard); }
.sticker strong { font-size: 1.45rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.sticker-olive { background: var(--olive-tint); }
.sticker-ink { background: var(--ink); color: var(--bone-3); }
.sticker-ink strong { color: var(--cream); font-size: 1.05rem; padding-top: 0.25rem; }

.scroll-cue {
    position: absolute; bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    display: block;
}
.scroll-cue-track {
    display: block;
    width: 26px; height: 44px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--inset);
    position: relative;
}
.scroll-cue-thumb {
    position: absolute; left: 50%; top: 7px;
    width: 6px; height: 10px;
    margin-left: -3px;
    border-radius: 3px;
    background: var(--orange);
    animation: cue-drop 1.8s var(--ease-inout) infinite;
}
@keyframes cue-drop {
    0%, 15% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(16px); opacity: 0; }
    71%, 100% { transform: translateY(0); opacity: 0; }
}

/* ---------- marquee ---------- */
.marquee-band {
    background: var(--ink);
    color: var(--bone);
    padding: 1rem 0;
    transform: rotate(-1.4deg) scale(1.02);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    margin: 1rem 0 -1rem;
    position: relative; z-index: 5;
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-chunk {
    display: flex; align-items: center; gap: 2.2rem;
    padding-right: 2.2rem;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.marquee-chunk i { font-style: normal; color: var(--orange); }

/* ---------- sections ---------- */
.section { padding: clamp(5rem, 10vw, 8.5rem) 0; position: relative; }
.section-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.section-shift { background: linear-gradient(180deg, var(--bone) 0%, var(--bone-2) 8%, var(--bone-2) 92%, var(--bone) 100%); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--cream);
    background: var(--olive);
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: var(--hard-sm);
    padding: 0.15rem 0.6rem;
    display: inline-block;
    transform: rotate(-3deg);
    margin-bottom: 1rem;
}
.section-title {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-transform: uppercase;
}
.section-sub {
    max-width: 38rem;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
}
.subsection-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 1.4rem;
}

/* reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    transition-delay: calc(var(--rd, 0) * 0.12s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- about ---------- */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.about-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}
.about-lead em { color: var(--orange); }
.about-text p:not(.about-lead) { margin-bottom: 1.2rem; color: var(--ink-2); }
.about-text a { color: var(--orange-deep); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); }
.about-text a:hover { color: var(--olive-deep); }

.about-side { display: flex; flex-direction: column; gap: 1.5rem; }
.panel {
    background: var(--bone-2);
    border-radius: 22px;
    box-shadow: var(--soft);
    padding: 1.6rem 1.7rem;
}
.panel-inset { box-shadow: var(--inset-deep); background: var(--bone-3); }
.panel-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--orange-deep);
    margin-bottom: 1rem;
}
.fact-list li {
    display: grid;
    grid-template-columns: 5.6rem 1fr;
    gap: 0.8rem;
    font-size: 0.94rem;
    color: var(--ink-2);
    padding: 0.55rem 0;
    border-bottom: 1.5px solid rgba(29, 26, 21, 0.09);
}
.fact-list li:last-child { border-bottom: none; }
.fact-list li span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding-top: 0.2rem;
}

/* toolkit */
.toolkit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}
.tool-group {
    background: var(--bone-2);
    border-radius: 18px;
    box-shadow: var(--soft-sm);
    padding: 1.3rem 1.4rem;
}
.tool-group h4 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olive-deep);
    margin-bottom: 0.9rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-row li {
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: var(--bone);
    box-shadow: var(--inset);
    color: var(--ink-2);
    transition: transform var(--t-fast) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.chip-row li:hover {
    transform: translateY(-2px) rotate(-1.5deg);
    box-shadow: var(--hard-sm);
    background: var(--orange);
    color: var(--cream);
}
.toolkit-foot {
    margin-top: 1.4rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--font-serif);
}
.konami-hint { opacity: 0.55; transition: opacity var(--t-med) var(--ease-out); }
.konami-hint:hover { opacity: 1; }

/* ---------- work / cases ---------- */
.case {
    background: linear-gradient(145deg, var(--bone) 0%, var(--bone-2) 100%);
    border: 2px solid var(--ink);
    border-radius: 26px;
    box-shadow: var(--hard-lg), var(--soft);
    padding: clamp(1.5rem, 4vw, 2.6rem);
    margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
    transform-style: preserve-3d;
    will-change: transform;
}
.case-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 2px dashed rgba(29, 26, 21, 0.25);
}
.case-title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.case-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    margin-top: 0.5rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--bone-3);
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-1deg);
}
.case-badge-orange { background: var(--orange); color: var(--cream); }
.case-badge-olive { background: var(--olive); color: var(--cream); }
.case-meta { display: flex; align-items: center; gap: 0.9rem; }
.case-year { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); }

.case-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}
.case-narrative p { margin-bottom: 1rem; color: var(--ink-2); }
.case-narrative p:last-child { margin-bottom: 0; }
.case-narrative em { font-family: var(--font-serif); font-size: 1.08em; }

.case-facts { display: flex; flex-direction: column; gap: 1.2rem; }
.case-stack {
    background: var(--bone-2);
    border-radius: 16px;
    box-shadow: var(--inset);
    padding: 1.1rem 1.2rem;
}
.case-stack h4 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
}
.chip-row-tight li { font-size: 0.78rem; padding: 0.26rem 0.65rem; }

.case-notes {
    border: 2px solid var(--ink);
    border-radius: 16px;
    background: var(--bone);
    box-shadow: var(--hard-sm);
    overflow: hidden;
    transition: box-shadow var(--t-fast) var(--ease-out);
}
.case-notes summary {
    list-style: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.9rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
    transition: background-color var(--t-fast) var(--ease-out);
}
.case-notes summary::-webkit-details-marker { display: none; }
.case-notes summary::after {
    content: "+";
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--orange);
    transition: transform var(--t-med) var(--ease-spring);
}
.case-notes[open] summary::after { transform: rotate(45deg); }
.case-notes summary:hover { background: var(--bone-2); }
.case-notes ul { padding: 0 1.2rem 1.1rem; }
.case-notes ul li {
    font-size: 0.9rem;
    color: var(--ink-2);
    padding: 0.45rem 0 0.45rem 1.1rem;
    position: relative;
}
.case-notes ul li::before {
    content: "→";
    position: absolute; left: 0;
    color: var(--olive);
    font-weight: 700;
}

/* ---------- research ---------- */
.research-intro {
    max-width: 44rem;
    margin-bottom: 2.8rem;
    font-size: 1.08rem;
    color: var(--ink-2);
}
.vuln-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.vuln-card {
    background: var(--bone-2);
    border-radius: 20px;
    box-shadow: var(--soft);
    padding: 1.5rem 1.6rem;
    transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.vuln-card:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: var(--hard-lg), var(--soft-sm); }
.vuln-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; }
.vuln-sev {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border: 2px solid var(--ink);
    border-radius: 7px;
    box-shadow: 2px 2px 0 var(--ink);
}
.sev-critical { background: var(--orange); color: var(--cream); }
.sev-high { background: var(--olive-tint); color: var(--ink); }
.vuln-class { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }
.vuln-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.vuln-card p { font-size: 0.94rem; color: var(--ink-2); }
.vuln-card-note {
    background: var(--ink);
    color: var(--bone-3);
    display: flex; align-items: center;
}
.vuln-card-note p { color: var(--bone-3); font-size: 1rem; }
.vuln-card-note strong { color: var(--cream); }
.vuln-card-note em { font-family: var(--font-serif); color: var(--orange-tint); font-size: 1.1em; }

.ctf-block { max-width: 44rem; }
.ctf-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.2rem; }
.ctf-row {
    display: flex; align-items: center; gap: 1.3rem;
    background: var(--bone-2);
    border-radius: 16px;
    box-shadow: var(--soft-sm);
    padding: 1rem 1.3rem;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.ctf-row:hover { transform: translateX(6px); box-shadow: var(--hard-sm), var(--soft-sm); }
.ctf-rank {
    font-weight: 900;
    font-size: 1rem;
    min-width: 4.6rem;
    text-align: center;
    padding: 0.4rem 0.5rem;
    background: var(--olive);
    color: var(--cream);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--ink);
}
.ctf-info { display: flex; flex-direction: column; }
.ctf-info strong { font-weight: 800; }
.ctf-info span { font-size: 0.85rem; color: var(--ink-soft); }
.ctf-foot { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- music (dark) ---------- */
.section-dark {
    background: var(--coal);
    color: var(--cream);
    border-radius: clamp(24px, 5vw, 48px);
    margin: 0 clamp(0.6rem, 2vw, 1.5rem);
    border: 2px solid var(--ink);
    box-shadow: var(--hard-lg);
}
.section-dark .section-title { color: var(--cream); }
.section-dark .section-sub { color: rgba(242, 237, 225, 0.55); }
.section-dark .section-num { background: var(--orange); }

.track-list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.4rem; }
.track-card {
    display: flex; align-items: center; gap: 1.2rem;
    background: linear-gradient(145deg, var(--coal-2), var(--coal-3));
    border-radius: 20px;
    box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.03),
                7px 8px 18px rgba(0, 0, 0, 0.55);
    padding: 1rem 1.3rem;
    transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.track-card:hover { transform: translateY(-3px); }
.track-card.is-current {
    box-shadow: inset 3px 3px 9px rgba(0, 0, 0, 0.6),
                inset -2px -2px 7px rgba(255, 255, 255, 0.04),
                0 0 0 2px var(--orange);
}
.track-art {
    width: 64px; height: 64px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(242, 237, 225, 0.15);
    flex-shrink: 0;
    background: var(--coal-3);
}
.track-art img { width: 100%; height: 100%; object-fit: cover; }
.track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.track-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.track-sub { font-size: 0.82rem; color: rgba(242, 237, 225, 0.5); font-family: var(--font-mono); }
.track-duration { font-family: var(--font-mono); font-size: 0.82rem; color: rgba(242, 237, 225, 0.45); }
.track-play {
    width: 52px; height: 52px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--orange);
    color: var(--cream);
    border: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
    transition: transform var(--t-fast) var(--ease-spring),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out);
}
.track-play svg { width: 20px; height: 20px; }
.track-play:hover { transform: scale(1.1) rotate(-6deg); background: var(--orange-deep); }
.track-play:active { transform: scale(0.92); box-shadow: 0 0 0 rgba(0,0,0,0.55), inset 2px 2px 6px rgba(0,0,0,0.5); }
.track-play .ic-pause, .track-card.is-playing .track-play .ic-play { display: none; }
.track-card.is-playing .track-play .ic-pause { display: block; }

.track-error {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: rgba(242, 237, 225, 0.6);
    padding: 1.5rem;
    text-align: center;
}

.music-platforms { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-wrap { max-width: 46rem; }
.contact-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.35;
    margin-bottom: 2.2rem;
}
.contact-lead em { color: var(--olive-deep); }
.contact-email {
    display: inline-flex; align-items: center; gap: 1rem;
    font-size: clamp(1.5rem, 4.5vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-decoration: none;
    padding: 0.5rem 0.2rem;
    position: relative;
    transition: color var(--t-fast) var(--ease-out);
}
.contact-email::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--orange);
    transform: scaleX(0.32);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.contact-email:hover { color: var(--orange-deep); }
.contact-email:hover::after { transform: scaleX(1); background: var(--olive); }
.contact-email svg { width: clamp(24px, 3.5vw, 38px); height: auto; transition: transform var(--t-med) var(--ease-spring); }
.contact-email:hover svg { transform: translate(5px, -5px); }
.contact-note {
    margin: 1.2rem 0 2.4rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-style: italic;
}
.social-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.social-pill {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 0.6rem 1.15rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--bone-2);
    box-shadow: var(--hard-sm);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.social-pill svg { width: 17px; height: 17px; }
.social-pill:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: var(--hard); background: var(--ink); color: var(--bone); }
.social-pill:active { transform: translate(2px, 2px); box-shadow: var(--inset); }

/* ---------- footer ---------- */
.site-footer {
    border-top: 2px solid var(--ink);
    padding: 2.2rem 0 7.5rem;
    background: var(--bone-2);
}
.footer-inner {
    max-width: 1180px; margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    font-size: 0.9rem;
    color: var(--ink-2);
}
.footer-sub { margin-top: 0.3rem; font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-mono); }

/* ---------- music pill ---------- */
.pill {
    position: fixed;
    bottom: 1.4rem; left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex; flex-direction: column; align-items: center;
}
.pill-core {
    display: flex; align-items: center; gap: 0.7rem;
    background: #0D0C0A;
    color: var(--cream);
    border-radius: 999px;
    padding: 0.7rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform var(--t-med) var(--ease-spring),
                padding var(--t-med) var(--ease-spring),
                gap var(--t-med) var(--ease-spring),
                box-shadow var(--t-med) var(--ease-out);
}
.pill-core:hover { transform: scale(1.04); }
.pill-core:active { transform: scale(0.94); }
.pill.is-tapped .pill-core { animation: pill-squish 0.45s var(--ease-spring); }
@keyframes pill-squish {
    0% { transform: scale(1); }
    35% { transform: scale(0.88, 1.1); }
    65% { transform: scale(1.06, 0.94); }
    100% { transform: scale(1); }
}
.pill-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.pill-wave i {
    width: 3px; height: 100%;
    border-radius: 2px;
    background: var(--orange);
    transform: scaleY(0.18);
    transform-origin: center;
    transition: transform 0.12s ease-out;
}
.pill-mini-title {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: max-width var(--t-med) var(--ease-inout),
                opacity var(--t-med) var(--ease-out);
}
/* mini (scrolled) state — Dynamic-Island shrink */
.pill.is-mini .pill-core { padding: 0.6rem 0.85rem; gap: 0; }
.pill.is-mini .pill-mini-title { max-width: 0; opacity: 0; }

/* expanded panel */
.pill-panel {
    position: absolute;
    bottom: calc(100% + 0.8rem);
    width: min(360px, calc(100vw - 2rem));
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* top ~80% solid black easing into translucency for the glass band */
    background: linear-gradient(
        180deg,
        #0D0C0A 0%,
        #0D0C0A 68%,
        rgba(13, 12, 10, 0.82) 80%,
        rgba(13, 12, 10, 0.42) 91%,
        rgba(13, 12, 10, 0.1) 100%
    );
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(14px) scale(0.72);
    transform-origin: bottom center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.55s var(--ease-spring),
                opacity 0.35s var(--ease-out),
                visibility 0s 0.35s;
}
.pill.is-open .pill-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.55s var(--ease-spring),
                opacity 0.35s var(--ease-out),
                visibility 0s;
}
/* refractive glass band — blur+distort what's behind, fading in from ~65% down */
.pill-glass {
    position: absolute; inset: 0;
    pointer-events: none;
    backdrop-filter: blur(9px) saturate(1.6) brightness(1.12);
    -webkit-backdrop-filter: blur(9px) saturate(1.6) brightness(1.12);
    -webkit-mask-image: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 80%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 80%, #000 100%);
}
/* refractive edge highlights on the glass rim */
.pill-panel::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45),
                inset 1px -2px 2px rgba(190, 225, 255, 0.14),
                inset -1px -3px 4px rgba(255, 205, 170, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.pill-panel-inner { position: relative; padding: 1.15rem 1.2rem 1rem; color: var(--cream); }
.pill-track { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.pill-art {
    width: 52px; height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--coal-3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}
.pill-art img { width: 100%; height: 100%; object-fit: cover; }
.pill-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pill-title { font-weight: 800; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-artist { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(242, 237, 225, 0.55); }
.pill-ext {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(242, 237, 225, 0.7);
    flex-shrink: 0;
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-spring);
}
.pill-ext svg { width: 15px; height: 15px; }
.pill-ext:hover { background: var(--orange); color: var(--cream); transform: rotate(8deg) scale(1.08); }

.pill-scrub {
    position: relative;
    height: 18px;
    display: flex; align-items: center;
    margin-bottom: 0.4rem;
}
.pill-scrub::before {
    content: "";
    position: absolute; left: 0; right: 0;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.pill-scrub-fill {
    position: relative;
    height: 5px;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--olive), var(--orange));
    transition: height var(--t-fast) var(--ease-out);
}
.pill-scrub:hover .pill-scrub-fill { height: 8px; }
.pill-bottom { display: flex; align-items: center; justify-content: space-between; }
.pill-time { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(242, 237, 225, 0.5); min-width: 2.8rem; }
#pill-time-total { text-align: right; }
.pill-controls { display: flex; align-items: center; gap: 0.5rem; }
.pill-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--cream);
    transition: transform var(--t-fast) var(--ease-spring), background-color var(--t-fast) var(--ease-out);
}
.pill-btn svg { width: 16px; height: 16px; }
.pill-btn:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); }
.pill-btn:active { transform: scale(0.88); }
.pill-btn-play {
    width: 46px; height: 46px;
    background: var(--orange);
    box-shadow: 0 4px 12px rgba(196, 80, 27, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pill-btn-play svg { width: 18px; height: 18px; }
.pill-btn-play:hover { background: var(--orange-deep); }
.pill-btn-play .ic-pause, .pill.is-playing .pill-btn-play .ic-play { display: none; }
.pill.is-playing .pill-btn-play .ic-pause { display: block; }

/* ---------- egg overlay & toast ---------- */
.egg-overlay {
    position: fixed; inset: 0;
    z-index: 4000;
    background: rgba(29, 26, 21, 0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease-out), visibility 0s var(--t-med);
}
.egg-overlay.is-open {
    opacity: 1; visibility: visible;
    transition: opacity var(--t-med) var(--ease-out), visibility 0s;
}
.egg-card {
    max-width: 30rem;
    background: var(--bone);
    border: 2px solid var(--ink);
    border-radius: 24px;
    box-shadow: var(--hard-lg);
    padding: 2.2rem 2.4rem;
    transform: translateY(30px) rotate(-1.5deg) scale(0.92);
    transition: transform 0.55s var(--ease-spring);
}
.egg-overlay.is-open .egg-card { transform: translateY(0) rotate(0) scale(1); }
.egg-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cream);
    background: var(--olive);
    border: 2px solid var(--ink);
    border-radius: 7px;
    box-shadow: 2px 2px 0 var(--ink);
    padding: 0.2rem 0.6rem;
    display: inline-block;
    transform: rotate(-2deg);
    margin-bottom: 1rem;
}
.egg-card h3 { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.9rem; }
.egg-card p { color: var(--ink-2); font-size: 0.98rem; margin-bottom: 0.8rem; }
.egg-fine { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 0.9rem !important; }
.egg-card .btn { margin-top: 0.6rem; }

.toast {
    position: fixed;
    bottom: 5.6rem; left: 50%;
    transform: translate(-50%, 20px);
    z-index: 3500;
    background: var(--ink);
    color: var(--bone);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 rgba(29, 26, 21, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* konami rumble */
body.is-rumbling { animation: rumble 0.5s ease-in-out; }
@keyframes rumble {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-5px, 3px) rotate(-0.4deg); }
    40% { transform: translate(5px, -3px) rotate(0.4deg); }
    60% { transform: translate(-4px, -2px) rotate(-0.3deg); }
    80% { transform: translate(3px, 2px) rotate(0.2deg); }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .about-grid, .case-body { grid-template-columns: 1fr; }
    .hero-name { font-size: clamp(3.4rem, 17vw, 7rem); }
}
@media (max-width: 720px) {
    .nav-links { display: none; }
    .nav-burger { display: block; }
    body { font-size: 1rem; }
    .section { padding: 4.5rem 0; }
    .hero-stickers { gap: 0.7rem; }
    .sticker { padding: 0.55rem 0.9rem; }
    .sticker strong { font-size: 1.2rem; }
    .scroll-cue { display: none; }
    .marquee-band { transform: rotate(-1.8deg) scale(1.05); }
    .track-card { padding: 0.85rem 1rem; gap: 0.9rem; }
    .track-art { width: 54px; height: 54px; }
    .track-duration { display: none; }
    .contact-email { gap: 0.6rem; }
    .site-footer { padding-bottom: 8.5rem; }
    .toast { bottom: 6.2rem; width: max-content; max-width: calc(100vw - 2rem); text-align: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; }
    .hero-word .ch { transform: none; animation: none; }
    .hero-sticker { transform: rotate(8deg) scale(1); animation: none; }
    .grain { animation: none; }
    .cursor { display: none !important; }
}