/* ==========================================================================
   YESTALGIA — editorial studio portfolio
   base · type · cursor · overlays · reveal · marquee · hero · work rail
   scrapbook · form · footer · motion · mobile menu · cassette player
   ========================================================================== */

:root {
    --cream: #f4f1ea;
    --cream-2: #ece7dd;
    --ink: #14131a;
    --ink-soft: #6b6862;
    --purple: #6d3aed;
    --mint: #0fb981;
    --pink: #f4365e;
    --yellow: #f5c518;

    --rule: rgba(20, 19, 26, 0.14);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Pixel display font — Vietnamese-capable.
       SVN-Determination Sans is self-hosted (see @font-face below); Be Vietnam Pro
       is the fallback so diacritics always render even before the font file loads. */
    --font-pixel: 'SVN-Determination Sans', 'Be Vietnam Pro', sans-serif;
}

/* Self-hosted pixel font with full Vietnamese support.
   Drop the font files into assets/fonts/ (woff2 preferred, ttf fallback). */
@font-face {
    font-family: 'SVN-Determination Sans';
    src: url('../fonts/SVN-DeterminationSans.woff2') format('woff2'),
         url('../fonts/SVN-DeterminationSans.otf') format('opentype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: auto;
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-y: hidden;
    overflow-x: visible;
    width: max-content;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

#main-scroll {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    height: 100vh;
}

/* Stop rubber-band / bounce that reveals blank space around the page */
html, body { overscroll-behavior: none; }

/* --- touch overlays ------------------------------------------------------
 * Lenis (syncTouch) drives horizontal scroll for any swipe on the page, so we
 * do NOT lock touch-action on the page itself. The overlays are excluded from
 * Lenis (see its `prevent` option) and scroll their own content vertically. */
@media (hover: none), (pointer: coarse) {
    #modal, #modal-panel,
    .mobile-drawer, .mobile-drawer-panel { touch-action: pan-y; }
}

/* Clear the fixed navbar on every horizontal section except hero which is bottom-aligned */
#main-scroll > section:not(#hero),
#main-scroll > div {
    padding-top: 4.5rem;
}



/* --- type ---------------------------------------------------------------- */

.display {
    font-family: var(--font-pixel);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Outlined display type — used to alternate weight in the big headlines. */
.display-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--ink);
}

.meta {
    font-family: var(--font-pixel);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.rule { border-top: 2px solid var(--ink); }

/* --- custom cursor ------------------------------------------------------- */

.cursor-dot,
.cursor-trail-pixel {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: difference;
}

/* Crosshair cursor */
.cursor-dot {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    background: transparent;
}

.cursor-dot::before, .cursor-dot::after {
    content: '';
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cursor-dot::before { width: 100%; height: 4px; }
.cursor-dot::after { width: 4px; height: 100%; }

/* Hollow square on hover */
.cursor-dot.is-hovering {
    border: 4px solid #fff;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    transition: width 0.15s steps(3), height 0.15s steps(3), margin 0.15s steps(3);
}

.cursor-dot.is-hovering::before, .cursor-dot.is-hovering::after {
    display: none;
}

/* Trail pixels */
.cursor-trail-pixel {
    width: 12px;
    height: 12px;
    background: #fff;
    margin: -6px 0 0 -6px;
    opacity: 0.8;
    transition: opacity 0.3s steps(4), width 0.3s steps(4), height 0.3s steps(4), margin 0.3s steps(4);
}

.cursor-trail-pixel.fade-out {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-trail-pixel { display: none; }
}

/* --- overlays ------------------------------------------------------------ */

.grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 61;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background:
        linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.14) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.012), rgba(0, 0, 255, 0.04));
    background-size: 100% 3px, 5px 100%;
}

.crt-active .crt-overlay { opacity: 1; }

/* --- reveal -------------------------------------------------------------- */

/* Line-by-line mask reveal for headlines.
   padding prevents Vietnamese diacritics from being clipped by overflow:hidden
   — top for accents above (Á, Ấ, Ă), bottom for dots below (Ạ, Ệ, Ọ) */
.line-mask {
    overflow: hidden;
    display: block;
    padding-top: 0.15em;
    padding-bottom: 0.1em;
    margin-top: -0.15em;
    margin-bottom: -0.1em;
}

.line-mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1s var(--ease);
}

.revealed .line-mask > span { transform: translateY(0); }

/* Generic fade-up for blocks; --d staggers siblings. */
.fade-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0ms);
}

.fade-up.revealed {
    opacity: 1;
    transform: none;
}

/* --- links & buttons ----------------------------------------------------- */

/* Underline that wipes in from the left. */
.link-wipe {
    position: relative;
    display: inline-block;
}

.link-wipe::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}

.link-wipe:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.8rem;
    border-radius: 0; /* Square corners */
    border: 3px solid var(--ink); /* Thick retro border */
    font-family: var(--font-pixel);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--ink); /* Blocky drop shadow */
    transition: transform 0.1s steps(3), box-shadow 0.1s steps(3), background-color 0.2s ease, color 0.2s ease;
}

.btn-solid { background: var(--purple); color: var(--cream); }
.btn-solid:hover { background: var(--pink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-solid:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.btn-ghost {
    background: var(--cream);
    color: var(--ink);
}

.btn-ghost:hover {
    background: var(--yellow);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* --- nav ----------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0.70rem 0;
    background: var(--cream);
    border-bottom: 3px solid var(--ink);
    transition: padding 0.2s steps(3);
}

.nav.is-stuck {
    padding: 0.50rem 0;
}

.nav-link {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color 0.3s ease;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--pink);
    transform: translateY(-50%) scale(0);
    transition: transform 0.35s var(--ease);
}

.nav-link:hover,
.nav-link.is-active { color: var(--ink); }

.nav-link.is-active::before { transform: translateY(-50%) scale(1); }

/* --- mobile menu --------------------------------------------------------- */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 52;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s ease;
}

.hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 49;
    visibility: hidden;
    pointer-events: none;
}

.mobile-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 26, 0.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mobile-drawer.is-open .mobile-drawer-backdrop {
    opacity: 1;
}

.mobile-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--cream);
    padding: 6rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    overflow-y: auto;
    border-left: 1px solid var(--rule);
}

.mobile-drawer.is-open .mobile-drawer-panel {
    transform: translateX(0);
}

.mobile-nav-link {
    display: block;
    padding: 1.2rem 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    transition: color 0.3s ease, padding-left 0.3s var(--ease);
}

.mobile-nav-link:hover {
    color: var(--purple);
    padding-left: 0.75rem;
}

.mobile-drawer-cta {
    margin-top: auto;
    padding-top: 2rem;
}

@media (max-width: 1023px) {
    .hamburger { display: flex; }
}

/* --- marquee ------------------------------------------------------------- */

.marquee {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.marquee-track {
    display: flex;
    align-items: center;
    animation: marquee-run 42s linear infinite;
}

.marquee-slow .marquee-track { animation-duration: 64s; }
.marquee-reverse .marquee-track { animation-direction: reverse; }

@keyframes marquee-run {
    to { transform: translateX(-50%); }
}

/* --- hero ---------------------------------------------------------------- */

.hero-portrait {
    will-change: transform;
    filter: saturate(1.05) contrast(1.02);
}

/* Slow colour wash behind the hero type. */
.wash {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.28;
    pointer-events: none;
    animation: wash-drift 22s ease-in-out infinite;
}

@keyframes wash-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -26px) scale(1.12); }
}

.scroll-cue span {
    display: block;
    width: 1px;
    height: 46px;
    background: linear-gradient(var(--ink), transparent);
    animation: cue 2.1s ease-in-out infinite;
    transform-origin: top;
}

@keyframes cue {
    0% { transform: scaleY(0); opacity: 0; }
    45% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* --- work rail (pinned horizontal scroll) -------------------------------- */

.work-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.work-track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    padding: 0 8vw;
    will-change: transform;
}

.work-panel {
    position: relative;
    flex: 0 0 auto;
}

.work-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0; /* Square corners */
    border: 3px solid var(--ink); /* Thick border */
    box-shadow: 6px 6px 0 var(--ink); /* Hard shadow */
    cursor: pointer;
    transition: transform 0.15s steps(3), box-shadow 0.15s steps(3);
}

.work-visual > * {
    transition: transform 0.4s var(--ease);
}

.work-panel:hover .work-visual {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
}

.work-panel:hover .work-visual > .work-art {
    transform: scale(1.05);
}

/* "Xem" badge that scales in on hover. */
.work-cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 19, 26, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-panel:hover .work-cta { opacity: 1; }

/* Touch devices have no hover — surface the CTA so the tap target is obvious. */
@media (hover: none), (pointer: coarse) {
    .work-cta {
        opacity: 1;
        background: rgba(20, 19, 26, 0.18);
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0.9rem;
    }
    .work-cta span { transform: scale(1); }
}

.work-cta span {
    padding: 0.75rem 1.5rem;
    border-radius: 0; /* Square badge */
    border: 2px solid var(--ink);
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-pixel);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: scale(0.9) translate(0, 0);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.2s steps(3);
}

.work-panel:hover .work-cta span { transform: scale(1) translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* --- capability rows ----------------------------------------------------- */

.cap-row {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
    transition: padding-left 0.5s var(--ease);
}

.cap-row:hover { padding-left: 1.25rem; }

.cap-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s var(--ease);
    z-index: -1;
}

.cap-name { transition: color 0.4s ease; }

.cap-meter {
    height: 1px;
    background: var(--rule);
    position: relative;
    overflow: hidden;
}

.cap-meter i {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s var(--ease);
}

.revealed .cap-meter i { transform: scaleX(var(--lvl, 0)); }

/* --- scrapbook (sticker playground) -------------------------------------- */

.sticker-stamp {
    filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.28));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stamp-pop {
    0% { transform: scale(0) rotate(var(--rot, 0deg)); }
    72% { transform: scale(1.16) rotate(var(--rot, 0deg)); }
    100% { transform: scale(1) rotate(var(--rot, 0deg)); }
}

.stamp-pop { animation: stamp-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Floating stickers in the page gutters. */
.sticker-float-item {
    filter:
        drop-shadow(1.5px 0 0 var(--cream))
        drop-shadow(-1.5px 0 0 var(--cream))
        drop-shadow(0 1.5px 0 var(--cream))
        drop-shadow(0 -1.5px 0 var(--cream))
        drop-shadow(3px 5px 6px rgba(20, 19, 26, 0.15));
    opacity: 0.85;
    animation: sticker-drift ease-in-out infinite;
    will-change: transform;
}

@keyframes sticker-drift {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-20px) rotate(calc(var(--r, 0deg) + 6deg)); }
}

/* --- form ---------------------------------------------------------------- */

.field {
    width: 100%;
    padding: 1.1rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.4s ease;
}

.field::placeholder { color: rgba(20, 19, 26, 0.3); }

.field:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

.field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --- cassette player (premium retro) ------------------------------------- */

.cassette-player {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
    background: linear-gradient(145deg, #1e1d26 0%, #2a2836 40%, #1a1924 100%);
    border: 4px solid var(--ink); /* Thick pixel border */
    border-radius: 0; /* Blocky edges */
    padding: 2rem;
    box-shadow: 8px 8px 0 var(--ink); /* Hard pixel shadow */
    overflow: hidden;
}

.cassette-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.01) 2px,
            rgba(255,255,255,0.01) 4px
        );
    pointer-events: none;
    border-radius: 0;
}

/* Top brand strip */
.cassette-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cassette-brand-name {
    font-family: var(--font-pixel);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--yellow);
}

.cassette-brand-model {
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
}

/* Tape window */
.tape-window {
    position: relative;
    background: linear-gradient(180deg, #0d0c14 0%, #161520 100%);
    border-radius: 0; /* Square tape window */
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border: 3px solid var(--ink);
    box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.4);
}

.tape-reels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tape-reel {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
}

.tape-reel-inner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px dashed var(--yellow);
    transition: border-color 0.3s ease;
}

.cassette-playing .tape-reel-inner {
    animation: reel-spin 1.8s linear infinite;
    border-color: var(--mint);
}

/* Tape strip between reels */
.tape-strip {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--yellow), var(--pink), var(--yellow));
    opacity: 0.4;
    position: relative;
}

.tape-strip::before,
.tape-strip::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.tape-strip::before { left: 0; }
.tape-strip::after { right: 0; }

/* Now playing info */
.tape-info {
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.tape-info-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--cream);
    margin-bottom: 0.25rem;
}

.tape-info-artist {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
}

/* VU meter / visualizer */
.vu-meter {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 48px;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.vu-bar {
    width: 4px;
    min-height: 3px;
    border-radius: 2px;
    background: var(--mint);
    transition: height 0.08s ease;
    box-shadow: 0 0 6px rgba(15, 185, 129, 0.4);
}

.cassette-playing .vu-bar {
    box-shadow: 0 0 8px rgba(15, 185, 129, 0.6);
}

/* Peak bars turn yellow/pink */
.vu-bar.peak-yellow {
    background: var(--yellow);
    box-shadow: 0 0 6px rgba(245, 197, 24, 0.5);
}

.vu-bar.peak-pink {
    background: var(--pink);
    box-shadow: 0 0 6px rgba(244, 54, 94, 0.5);
}

/* Transport controls */
.transport-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.transport-btn {
    width: 48px;
    height: 48px;
    border-radius: 0; /* Square corners */
    border: 3px solid var(--ink); /* Thick border */
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.1s steps(3), box-shadow 0.1s steps(3), background-color 0.2s ease, color 0.2s ease;
    font-size: 14px;
}

.transport-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--cream);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.transport-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.transport-btn.play-btn {
    width: 60px;
    height: 60px;
    background: var(--mint);
    border-color: var(--ink);
    color: var(--ink);
    font-size: 18px;
    box-shadow: 4px 4px 0 var(--ink);
}

.transport-btn.play-btn:hover {
    background: #12d694;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.transport-btn.play-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--ink);
}

.cassette-playing .transport-btn.play-btn {
    background: var(--pink);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}

.cassette-playing .transport-btn.play-btn:hover {
    background: #f7516f;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.cassette-playing .transport-btn.play-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--ink);
}

/* Volume slider */
.volume-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.volume-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    flex-shrink: 0;
    width: 32px;
}

.volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--mint) 0%,
        var(--mint) var(--vol-pct, 70%),
        rgba(255,255,255,0.1) var(--vol-pct, 70%),
        rgba(255,255,255,0.1) 100%);
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 8px rgba(15, 185, 129, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 8px rgba(15, 185, 129, 0.4);
    cursor: pointer;
    border: none;
}

.volume-pct {
    font-family: 'Inter', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mint);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Status readout at bottom */
.cassette-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.readout-item {
    text-align: center;
}

.readout-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.readout-value {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
}

.readout-value.status-text { color: var(--cream); }
.readout-value.bpm-text { color: var(--yellow); }
.readout-value.wave-text { color: var(--purple); }

.cassette-playing .readout-value.status-text {
    color: var(--mint);
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Glow ring around player when playing */
.cassette-playing .cassette-player {
    box-shadow:
        0 0 0 1px rgba(15, 185, 129, 0.15),
        0 0 40px rgba(15, 185, 129, 0.08),
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* --- reel spin animation ------------------------------------------------- */

@keyframes reel-spin { to { transform: rotate(360deg); } }

.reel-spin { animation: reel-spin 2.4s linear infinite; }

/* Legacy bars for backward compat */
.bar {
    width: 3px;
    background: var(--cream);
    border-radius: 2px;
    transition: height 0.11s ease;
}

/* --- scrollbar ----------------------------------------------------------- */

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 9999px; }

/* --- mobile responsive — VERTICAL SCROLL LAYOUT ≤767px ------------------ */

@media (max-width: 767px) {

    /* ======== CORE LAYOUT SWITCH: horizontal → vertical ======== */
    html {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        overscroll-behavior: auto !important;
    }

    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        height: auto !important;
        overscroll-behavior: auto !important;
        touch-action: auto !important;
    }

    #main-scroll {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        user-select: auto !important;
        touch-action: auto !important;
    }

    /* All sections: full-width, auto-height, stacked vertically */
    #main-scroll > section,
    #main-scroll > div {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        flex-shrink: 1 !important;
        padding-top: 0;
        touch-action: auto !important;
    }

    /* Hide vertical marquee strip on mobile — wastes horizontal space */
    #main-scroll > div:has(.marquee-vertical) {
        display: none !important;
    }

    /* ======== NAV ======== */
    .nav {
        padding: 0.5rem 0;
    }

    /* ======== HERO ======== */
    #hero {
        padding-top: 5.5rem !important;
        padding-bottom: 2rem !important;
        min-height: 100svh !important;
        justify-content: flex-start !important;
    }

    #hero h1 {
        font-size: 13vw !important;
        line-height: 1;
    }

    #hero .w-72 { width: 10rem !important; }
    #hero .polaroid-frame { padding: 6px 6px 26px 6px; }
    #hero .polaroid-caption { font-size: 0.55rem; bottom: 8px; }
    #hero .col-span-12.lg\:col-span-4 { margin-top: 1rem !important; }
    #hero .col-span-12.lg\:col-span-4 .meta.mt-6 { margin-top: 0.5rem !important; }
    #hero .pantone-deck { margin-top: 1rem !important; gap: 0.35rem; }
    #hero .pantone-swatch { width: 46px !important; }
    #hero .pantone-color { height: 32px; }
    #hero .hero-meta-grid {
        margin-top: 1.25rem !important;
        padding-top: 1rem !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    #hero .meta.mb-6 { margin-bottom: 0.5rem !important; }

    /* ======== ABOUT (Giới thiệu) ======== */
    #gioi-thieu {
        padding: 3.5rem 0 3rem !important;
        overflow: visible !important;
        border-right: none !important;
    }

    #gioi-thieu .display.text-5xl {
        font-size: 2rem;
    }

    #gioi-thieu .grid.grid-cols-12 {
        row-gap: 1.75rem;
    }

    #gioi-thieu .flex.flex-col.gap-8 {
        gap: 1.25rem !important;
    }

    #gioi-thieu p.text-2xl {
        font-size: 1.15rem !important;
        line-height: 1.45 !important;
    }

    #gioi-thieu p.text-base {
        font-size: 0.9rem !important;
    }

    /* Counters */
    #gioi-thieu .grid.grid-cols-3 {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-top: 1rem !important;
        padding-top: 1.25rem !important;
    }

    #gioi-thieu .grid.grid-cols-3 > div:last-child {
        grid-column: span 2;
        text-align: center;
    }

    #gioi-thieu .grid.grid-cols-3 .display {
        font-size: 2.25rem;
    }

    /* ======== CAPABILITIES (Năng lực) ======== */
    #nang-luc {
        padding: 3.5rem 0 3rem !important;
        overflow: visible !important;
        border-right: none !important;
    }

    #nang-luc h2 {
        font-size: 2.5rem !important;
    }

    #nang-luc .mb-16 {
        margin-bottom: 1.5rem !important;
    }

    .cap-row {
        grid-template-columns: 2rem 1fr;
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .cap-row > div:last-child {
        grid-column: 1 / -1;
    }

    .cap-row .cap-name {
        font-size: 1.4rem !important;
    }

    /* ======== WORK (Dự án) ======== */
    #du-an {
        padding: 3.5rem 0 3rem !important;
        overflow: visible !important;
    }

    /* Work track: horizontal scroll inside a vertical section */
    #work-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.25rem !important;
        padding: 1.5rem 1rem !important;
        scroll-snap-type: x mandatory;
    }

    #work-track .work-panel {
        scroll-snap-align: center;
    }

    #du-an .work-panel {
        width: min(75vw, 320px) !important;
    }

    #du-an .work-visual {
        aspect-ratio: 4 / 3;
    }

    #du-an h3.display {
        font-size: 1.25rem !important;
    }

    #du-an h2.display {
        font-size: 2.5rem !important;
    }

    /* ======== SCRAPBOOK (Sổ tay) ======== */
    #so-tay {
        padding: 3.5rem 0 3rem !important;
        overflow: visible !important;
        border-right: none !important;
    }

    #so-tay h2 {
        font-size: 2rem !important;
    }

    #so-tay .mb-12 {
        margin-bottom: 1rem !important;
    }

    #board {
        height: 18rem !important;
    }

    /* ======== CASSETTE (Trạm âm thanh) ======== */
    #cassette-section {
        padding: 3.5rem 0 3rem !important;
        overflow: visible !important;
    }

    #cassette-section h2 {
        font-size: 2rem !important;
    }

    #cassette-section .mb-7 {
        margin-bottom: 1rem !important;
    }

    #cassette-section .grid.grid-cols-12 {
        row-gap: 1.5rem !important;
    }

    .cassette-player {
        padding: 1.25rem;
        max-width: 100%;
    }

    .tape-reel {
        width: 52px;
        height: 52px;
    }

    .tape-reel-inner {
        width: 26px;
        height: 26px;
    }

    .tape-window {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .transport-btn {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .transport-btn.play-btn {
        width: 50px;
        height: 50px;
        font-size: 15px;
    }

    .vu-meter {
        height: 36px;
        gap: 2px;
        margin-bottom: 0.75rem;
    }

    .vu-bar {
        width: 3px;
    }

    .transport-controls {
        margin-bottom: 0.75rem;
    }

    /* ======== CONTACT (Liên hệ) ======== */
    #lien-he {
        height: auto !important;
        flex-direction: column !important;
    }

    /* Content wrapper — no overflow clipping on mobile */
    #lien-he > div:first-child {
        flex: none !important;
        overflow: visible !important;
        padding: 3.5rem 0 1.5rem !important;
    }

    #lien-he h2 {
        font-size: 11vw !important;
    }

    #lien-he .mb-8 {
        margin-bottom: 1rem !important;
    }

    #lien-he .flex.flex-col.gap-6 {
        gap: 1rem !important;
    }

    #lien-he .grid.grid-cols-12 {
        row-gap: 1.5rem !important;
    }

    #lien-he form {
        gap: 1rem !important;
    }

    /* Footer */
    #lien-he footer {
        padding: 1rem 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* ======== MODAL ======== */
    #modal-panel {
        max-width: 100% !important;
    }

    #modal-panel .p-8 {
        padding: 1.25rem !important;
    }

    #modal-panel h3 {
        font-size: 1.75rem !important;
    }

    #modal-panel dl {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* --- extra-small phones ≤420px ------------------------------------------- */

@media (max-width: 420px) {
    #hero h1 {
        font-size: 12vw !important;
    }

    #hero .pantone-swatch {
        width: 40px !important;
    }

    #hero .pantone-color {
        height: 28px;
    }

    .cassette-player {
        padding: 0.85rem;
    }

    .tape-window {
        padding: 0.75rem;
    }

    .tape-reel {
        width: 44px;
        height: 44px;
    }

    .tape-reel-inner {
        width: 22px;
        height: 22px;
    }

    .transport-btn {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }

    .transport-btn.play-btn {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    #du-an .work-panel {
        width: min(80vw, 280px) !important;
    }

    .cap-row .cap-name {
        font-size: 1.2rem !important;
    }
}

/* ==========================================================================
   HEIGHT-ADAPTIVE SCALING (desktop/laptop)
   Every panel is locked to 100vh. On shorter screens the content would spill
   past the fold and get clipped (no vertical scroll). These tiers shrink type
   and spacing so each section fits fully. Gated to >=1024px so they never
   fight the phone layout, which scales by width instead.
   ========================================================================== */

/* Fluid Polaroid container scaling for desktop screens based on viewport height */
@media (min-width: 1024px) {
    #hero .polaroid-container {
        width: 100% !important;
        max-width: clamp(200px, 45vh, 340px) !important;
        margin-left: auto;
    }
}

/* Tier 1 — laptops / smaller windows (~<=900px tall) */
@media (min-width: 1024px) and (max-height: 900px) {
    #hero { padding-bottom: 2rem !important; }
    #hero h1 { font-size: clamp(3.5rem, 11vh, 5.2vw) !important; }
    #hero .meta.mb-6 { margin-bottom: 0.75rem !important; }
    .pantone-deck { margin-top: 1.5rem; }
    .pantone-color { height: 40px; }
    .hero-meta-grid { margin-top: 1.5rem !important; padding-top: 1rem !important; }

    #gioi-thieu .grid.grid-cols-12 { row-gap: 2rem; }
    #gioi-thieu p.text-2xl { font-size: 1.35rem !important; line-height: 1.4 !important; }
    #gioi-thieu .flex.flex-col.gap-8 { gap: 1.25rem !important; }
    #gioi-thieu .grid.grid-cols-3 { margin-top: 1rem !important; padding-top: 1.5rem !important; }
    #gioi-thieu .grid.grid-cols-3 .display { font-size: 2.75rem !important; }

    #nang-luc .mb-16 { margin-bottom: 2rem !important; }
    .cap-row { padding: 1.1rem 0; }
    .cap-name { font-size: 2.25rem !important; }
    .cap-row .meta.mt-2\.5 { margin-top: 0.4rem !important; }

    #so-tay .mb-12 { margin-bottom: 1.5rem !important; }
    #board { height: 22rem !important; }

    /* Contact — tighten spacing on shorter viewports */
    #lien-he h2 { font-size: clamp(2.5rem, 9vh, 5vw) !important; }
    #lien-he .mb-8 { margin-bottom: 1rem !important; }
    #lien-he .grid.grid-cols-12 { row-gap: 1.25rem !important; }
    #lien-he form { gap: 0.9rem !important; }
    #lien-he .flex.flex-col.gap-6 { gap: 1rem !important; }
    #lien-he .field { padding: 0.75rem 1rem !important; }
}

/* Tier 2 — short laptops (~<=720px tall) */
@media (min-width: 1024px) and (max-height: 720px) {
    #hero h1 { font-size: clamp(3rem, 10vh, 4.5vw) !important; }
    #hero .meta.mb-6 { margin-bottom: 0.5rem !important; }
    .pantone-deck { margin-top: 0.75rem; }
    .pantone-color { height: 30px; }
    .pantone-swatch { width: 50px !important; }
    .hero-meta-grid { margin-top: 1rem !important; padding-top: 0.75rem !important; }

    #gioi-thieu .display.text-5xl { font-size: 2.6rem !important; }
    #gioi-thieu p.text-2xl { font-size: 1.15rem !important; }
    #gioi-thieu p.text-base { font-size: 0.9rem !important; }
    #gioi-thieu .grid.grid-cols-3 .display { font-size: 2.25rem !important; }
    #gioi-thieu .grid.grid-cols-12 { row-gap: 1.25rem; }

    #nang-luc h2 { font-size: 2.8rem !important; }
    #nang-luc .mb-16 { margin-bottom: 1.25rem !important; }
    .cap-row { padding: 0.7rem 0; }
    .cap-name { font-size: 1.7rem !important; }

    #so-tay h2 { font-size: 2.8rem !important; }
    #so-tay .mb-12 { margin-bottom: 1rem !important; }
    #board { height: 17rem !important; }

    #lien-he h2 { font-size: clamp(2rem, 8vh, 4vw) !important; }
    #lien-he .mb-8 { margin-bottom: 0.5rem !important; }
    #lien-he .flex.flex-col.gap-6 { gap: 0.5rem !important; }
    #lien-he .grid.grid-cols-12 { row-gap: 0.5rem !important; }
    #lien-he form { gap: 0.5rem !important; }
    #lien-he .field { padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; }
    #lien-he .field-label { font-size: 0.75rem !important; margin-bottom: 0.1rem !important; }
    #lien-he textarea.field { height: 60px !important; }
    #lien-he button.btn-solid { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; font-size: 0.875rem !important; }
    #lien-he .flex-1.flex { overflow: visible !important; }

    #cassette-section h2 { font-size: 2.6rem !important; }
}

/* --- layout guidelines & premium designer details ------------------------- */

.polaroid-frame {
    background: #ffffff;
    padding: 14px 14px 44px 14px;
    box-shadow: 
        0 1px 3px rgba(20,19,26,0.05),
        0 15px 45px rgba(20, 19, 26, 0.15),
        inset 0 0 0 1px rgba(255,255,255,0.8);
    border: 1px solid rgba(20, 19, 26, 0.08);
    transform: rotate(2.5deg);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
    position: relative;
    z-index: 10;
}

.polaroid-frame:hover {
    transform: rotate(-1deg) scale(1.03);
    box-shadow: 
        0 2px 6px rgba(20,19,26,0.05),
        0 25px 60px rgba(20, 19, 26, 0.22);
}

.polaroid-caption {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--ink);
    letter-spacing: -0.03em;
    opacity: 0.8;
}

/* Scrapbook tape art */
.tape {
    position: absolute;
    background: rgba(245, 197, 24, 0.52);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    height: 24px;
    width: 96px;
    box-shadow: 
        0 1px 2px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,0.2);
    z-index: 20;
    pointer-events: none;
}

.tape::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.02) 0px,
        rgba(0,0,0,0.02) 2px,
        transparent 2px,
        transparent 4px
    );
}

.tape-top-left {
    top: -12px;
    left: -32px;
    transform: rotate(-32deg);
    background: rgba(15, 185, 129, 0.45); /* translucent mint tape */
}

.tape-top-right {
    top: -10px;
    right: -28px;
    transform: rotate(38deg);
    background: rgba(244, 54, 94, 0.45); /* translucent pink tape */
}

/* Pantone swatches */
.pantone-deck {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.pantone-swatch {
    display: flex;
    flex-direction: column;
    width: 60px;
    background: #ffffff;
    border: 1px solid rgba(20, 19, 26, 0.08);
    border-radius: 2px;
    padding: 3px;
    box-shadow: 0 4px 12px rgba(20, 19, 26, 0.05);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    cursor: pointer;
}

.pantone-swatch:hover {
    transform: translateY(-8px) rotate(var(--rot-hover, -3deg));
    box-shadow: 0 12px 24px rgba(20, 19, 26, 0.12);
    z-index: 10;
}

.pantone-color {
    height: 48px;
    width: 100%;
    border-radius: 1px;
}

.pantone-meta {
    padding: 5px 1px 2px;
    text-align: center;
}

.pantone-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 900;
    font-size: 7px;
    color: var(--ink);
    letter-spacing: 0.04em;
    line-height: 1;
}

.pantone-hex {
    font-family: 'Inter', monospace;
    font-size: 5.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-top: 3px;
    line-height: 1;
}

/* Layout alignment guides */
.guide-cross {
    position: absolute;
    width: 10px;
    height: 10px;
    color: rgba(20, 19, 26, 0.12);
    pointer-events: none;
    z-index: 1;
}

.guide-cross::before,
.guide-cross::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.guide-cross::before {
    top: 4px;
    left: 0;
    width: 10px;
    height: 1.5px;
}

.guide-cross::after {
    top: 0;
    left: 4px;
    width: 1.5px;
    height: 10px;
}

.guide-line-x {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed rgba(20, 19, 26, 0.06);
    pointer-events: none;
    z-index: 0;
}

.guide-line-y {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px dashed rgba(20, 19, 26, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-up { opacity: 1; transform: none; }
    .line-mask > span { transform: none; }
}

/* --- marquee-vertical ---------------------------------------------------- */
.marquee-vertical {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee-track-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    animation: marquee-run-vertical 25s linear infinite;
    will-change: transform;
}

.marquee-track-vertical span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

@keyframes marquee-run-vertical {
    to { transform: translateY(-50%); }
}

/* --- scrapbook board overrides ------------------------------------------- */
#board {
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
}

/* --- modal overrides ---------------------------------------------------- */
#modal-panel {
    border-left: 4px solid var(--ink) !important;
    border-radius: 0 !important;
}
#modal-panel button[data-close] {
    border-radius: 0 !important;
    border: 3px solid var(--ink) !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
    transition: transform 0.1s steps(3), box-shadow 0.1s steps(3);
}
#modal-panel button[data-close]:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink) !important;
}
#modal-panel button[data-close]:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink) !important;
}
#modal-banner {
    border-radius: 0 !important;
    border: 3px solid var(--ink) !important;
}

/* --- pantone swatches overrides ------------------------------------------ */
.pantone-swatch {
    border-radius: 0 !important;
    border: 2.5px solid var(--ink) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
    transition: transform 0.15s steps(3), box-shadow 0.15s steps(3) !important;
}
.pantone-swatch:hover {
    transform: translateY(-4px) rotate(var(--rot-hover, -3deg)) !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
}

/* --- custom scrollbar ---------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--cream);
    border-top: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb {
    background: var(--ink);
    border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
}