/* =====================================================================
   miris.one — a sepia-tinted memory atelier rendered in soft-extruded foam
   Three rare-end dimensions stacked: neomorphism · portfolio-grid · geometric-sans
   ===================================================================== */

:root {
    /* ----- sepia-nostalgic palette ----- */
    --linen-cream:        #F2E6D2;   /* page bg + every drawer face */
    --proving-dough:      #E5D2B5;   /* inside of opened drawers, dividers */
    --espresso-sepia:     #5A3E2B;   /* primary type, brand mark, deepest tone */
    --suede-tan:          #8C6B4A;   /* secondary type, drawer numbers, hairlines */
    --beeswax-honey:      #C9A87C;   /* hover-glow tint, focus accent */
    --persimmon-stamp:    #D9482F;   /* the single warm accent — wax seal sparingly */
    --cabinet-dust:       #B8A088;   /* grain-overlay tint */
    --drawer-shadow-deep: #3D2A1C;   /* the long soft shadow colour — never #000 */
    --true-white:         #FFFFFF;   /* the real-white bevel channel */

    /* ----- neomorphic shadow stack (only these four; inline shadows forbidden) ----- */
    --shadow-up:        -8px -8px 18px var(--true-white), 8px 8px 18px rgba(61, 42, 28, 0.15);
    --shadow-down:       8px  8px 18px var(--true-white), -8px -8px 18px rgba(61, 42, 28, 0.15);
    --shadow-inset-up:   inset -6px -6px 14px var(--true-white), inset 6px 6px 14px rgba(61, 42, 28, 0.19);
    --shadow-inset-down: inset 6px 6px 14px var(--true-white), inset -6px -6px 14px rgba(61, 42, 28, 0.19);

    /* ----- type ----- */
    --face-display: "Sora", "Poppins", "Montserrat", system-ui, sans-serif;
    --face-body:    "Fraunces", "Lora", Georgia, serif;
    --face-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ----- geometry ----- */
    --cabinet-margin: clamp(28px, 5vw, 84px);
    --bevel: clamp(14px, 1.6vw, 22px);

    /* ----- timing ----- */
    --press-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;                 /* the page never scrolls — structural */
}

body {
    background: var(--linen-cream);
    color: var(--espresso-sepia);
    font-family: var(--face-body);
    font-variation-settings: "SOFT" 80, "WONK" 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
    cursor: none;                     /* the persimmon glow becomes the cursor */
}

/* on touch / coarse pointers, restore a normal cursor */
@media (pointer: coarse), (hover: none) {
    body { cursor: auto; }
}

/* =====================================================================
   THE CABINET FRAME — warm beige margin of cabinet around the drawer grid
   ===================================================================== */

.cabinet-frame {
    position: fixed;
    inset: 0;
    padding: var(--cabinet-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.frame-hint {
    position: absolute;
    bottom: calc(var(--cabinet-margin) * 0.34);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--face-mono);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--suede-tan);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), -1px -1px 1px rgba(61, 42, 28, 0.12);
}
body.has-open .frame-hint { opacity: 0.66; }

/* =====================================================================
   THE DRAWER GRID — 6 × 4 = 24 always-square drawers, never scrolls
   ===================================================================== */

.cabinet-grid {
    width: 100%;
    height: 100%;
    max-width: calc((100vh - var(--cabinet-margin) * 2) * 1.5);   /* keep drawers square */
    max-height: calc((100vw - var(--cabinet-margin) * 2) / 1.5);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: clamp(10px, 1.3vw, 22px);
    position: relative;
}

/* =====================================================================
   A SINGLE DRAWER — neomorphic clay tile, perfectly square
   ===================================================================== */

.drawer {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    background: var(--linen-cream);
    border-radius: var(--bevel);
    box-shadow: var(--shadow-up);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    outline: none;
    transition:
        box-shadow 220ms var(--press-ease),
        transform 220ms var(--press-ease),
        opacity 360ms var(--spring),
        filter 360ms ease;
    will-change: transform;
}

/* the front face content (glyph / wordmark / colophon stamp) */
.drawer__face {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 220ms ease, transform 360ms var(--spring);
}

/* drawer number — pressed mono label, top-left of each drawer */
.drawer__num {
    position: absolute;
    top: clamp(6px, 0.8vw, 11px);
    left: clamp(8px, 1vw, 14px);
    font-family: var(--face-mono);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-feature-settings: "tnum" 1;
    color: var(--suede-tan);
    opacity: 0.5;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55), -0.5px -0.5px 1px rgba(61, 42, 28, 0.18);
    transition: opacity 220ms ease, color 220ms ease;
    z-index: 3;
}

/* ----- hover / focus: the drawer presses inward, tilts toward the cursor ----- */
@media (hover: hover) and (pointer: fine) {
    .drawer:hover {
        box-shadow: var(--shadow-inset-down);
    }
    .drawer:hover .drawer__num { opacity: 0.85; color: var(--beeswax-honey); }
    .drawer:hover .glyph { transform: scale(0.965); }
}

.drawer:focus-visible {
    box-shadow: var(--shadow-inset-down), 0 0 0 2px rgba(217, 72, 47, 0.0);
}
body.has-open .drawer.is-open:focus-visible {
    box-shadow: var(--shadow-inset-up), 0 0 0 3px var(--persimmon-stamp);
}

/* fingerprint smudge — marks a drawer that has already been opened */
.drawer.is-visited::after {
    content: "";
    position: absolute;
    bottom: clamp(6px, 0.7vw, 10px);
    right: clamp(6px, 0.7vw, 10px);
    width: clamp(18px, 1.9vw, 26px);
    height: clamp(22px, 2.3vw, 30px);
    border-radius: 55% 55% 50% 50% / 60% 60% 40% 40%;
    background:
        radial-gradient(ellipse 60% 30% at 50% 30%, rgba(61, 42, 28, 0.10), transparent 70%),
        repeating-radial-gradient(circle at 50% 60%,
            transparent 0 1.5px,
            rgba(61, 42, 28, 0.07) 1.5px 3px);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: multiply;
}

/* =====================================================================
   PRESSED-CLAY GLYPHS — fill is the drawer colour; visible only by shadow
   ===================================================================== */

.glyph {
    width: clamp(40px, 4.4vw, 64px);
    height: clamp(40px, 4.4vw, 64px);
    display: block;
    transition: transform 220ms var(--press-ease);
}
.glyph path {
    fill: var(--linen-cream);
}

/* =====================================================================
   DRAWER 01 — the wordmark drawer
   ===================================================================== */

.drawer--brand .drawer__face { padding: 6%; }
.wordmark {
    font-family: var(--face-display);
    font-weight: 200;
    letter-spacing: 0.18em;
    color: var(--espresso-sepia);
    font-size: clamp(13px, 1.5vw, 21px);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 1.5px 1.5px 0 rgba(255, 255, 255, 0.6), -1px -1px 1.5px rgba(61, 42, 28, 0.15);
}
.wordmark__dot {
    color: var(--persimmon-stamp);
    font-weight: 600;
    display: inline-block;
    transform: translateY(-0.06em);
}

/* =====================================================================
   DRAWER 24 — colophon stamp
   ===================================================================== */

.colophon-stamp {
    font-family: var(--face-mono);
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-feature-settings: "tnum" 1;
    color: var(--suede-tan);
    text-shadow: inset 0 0 0 transparent;
    /* a "pressed into clay" look using a tight emboss */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5), -0.7px -0.7px 1px rgba(61, 42, 28, 0.22);
    transform: rotate(-2deg);
}

/* =====================================================================
   DRAWER 13 — drawer-sound toggle
   ===================================================================== */

.sound-flag {
    position: absolute;
    bottom: clamp(6px, 0.8vw, 11px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--face-mono);
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--suede-tan);
    opacity: 0.55;
    transition: color 220ms ease, opacity 220ms ease;
}
body.sound-on .drawer--sound .sound-flag { color: var(--persimmon-stamp); opacity: 0.9; }

/* =====================================================================
   OPENED DRAWER — expands to fill the entire 6 × 4 grid
   ===================================================================== */

.drawer.is-open {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 20;
    box-shadow: var(--shadow-inset-up);
    background: var(--linen-cream);
    cursor: pointer;
}
body.sound-on .drawer.is-open { cursor: auto; }

/* when a drawer opens, its little face content fades; the panel takes over */
.drawer.is-open .drawer__face { opacity: 0; pointer-events: none; }
.drawer.is-open .drawer__num { opacity: 0.4; }

/* the other 23 drawers shuffle outward and fade */
body.has-open .drawer:not(.is-open) {
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-up);
}

/* ----- the long-form panel inside an opened drawer ----- */
.drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.8rem, 1.5vw, 1.4rem);
    padding: clamp(2rem, 6vw, 5rem) clamp(2rem, 9vw, 7rem);
    background:
        linear-gradient(135deg, rgba(229, 210, 181, 0.0) 0%, rgba(229, 210, 181, 0.55) 100%),
        var(--linen-cream);
    border-radius: var(--bevel);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease 120ms, transform 540ms var(--spring) 120ms;
    overflow: auto;
}
.drawer.is-open .drawer__panel { opacity: 1; transform: translateY(0); }
.drawer__panel[hidden] { display: none; }

.panel__lead {
    font-family: var(--face-display);
    font-weight: 200;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    font-size: clamp(1.6rem, 4.4vw, 3.2rem);
    line-height: 1.05;
    color: var(--espresso-sepia);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.55), -1.5px -1.5px 2px rgba(61, 42, 28, 0.14);
}
.panel__body {
    font-family: var(--face-body);
    font-variation-settings: "SOFT" 80, "WONK" 1;
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.7;
    color: var(--espresso-sepia);
    max-width: 56ch;
}
.panel__sig {
    font-family: var(--face-mono);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--suede-tan);
    margin-top: 0.3rem;
    align-self: flex-start;
    position: relative;
    padding-left: 1.6rem;
}
/* the hand-pressed single-stroke signature flourish before the credit line */
.panel__sig::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.1rem;
    height: 0.9rem;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 30% 40%, var(--suede-tan) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 65%, var(--suede-tan) 0 1px, transparent 1.5px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1 11C3 4 6 2 8 6s4 7 8 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1 11C3 4 6 2 8 6s4 7 8 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    background-color: var(--suede-tan);
    opacity: 0.85;
}

.sound-toggle {
    align-self: flex-start;
    font-family: var(--face-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--espresso-sepia);
    background: var(--linen-cream);
    border: none;
    border-radius: 999px;
    padding: 0.7em 1.4em;
    box-shadow: var(--shadow-up);
    cursor: pointer;
    transition: box-shadow 220ms var(--press-ease), color 220ms ease;
}
.sound-toggle:hover { box-shadow: var(--shadow-inset-down); }
body.sound-on .sound-toggle { color: var(--persimmon-stamp); box-shadow: var(--shadow-inset-down); }

/* =====================================================================
   DUOTONE "PHOTOGRAPHS" — espresso-sepia × linen-cream, with grain
   built entirely from CSS — extreme close-ups of humble domestic objects
   ===================================================================== */

.duotone {
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--bevel) * 0.7);
    box-shadow: var(--shadow-inset-up);
    position: relative;
    overflow: hidden;
    margin: 0.2rem 0;
}
.duotone::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-radial-gradient(circle at 13% 27%, rgba(184, 160, 136, 0.12) 0 1px, transparent 1px 3px),
        repeating-radial-gradient(circle at 71% 63%, rgba(184, 160, 136, 0.10) 0 1px, transparent 1px 4px);
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* a corner of a tablecloth — soft diagonal woven texture */
.duotone--tablecloth {
    background:
        repeating-linear-gradient(45deg, rgba(90, 62, 43, 0.22) 0 4px, transparent 4px 9px),
        repeating-linear-gradient(-45deg, rgba(90, 62, 43, 0.16) 0 4px, transparent 4px 9px),
        linear-gradient(120deg, var(--proving-dough), var(--linen-cream));
}
/* the rim of an enamel cup — a curved highlight arc */
.duotone--cup {
    background:
        radial-gradient(ellipse 130% 80% at 50% 130%, rgba(90, 62, 43, 0.5), transparent 60%),
        radial-gradient(circle 22% at 50% 18%, rgba(255, 255, 255, 0.45), transparent 70%),
        conic-gradient(from 200deg at 50% 130%, rgba(90, 62, 43, 0.0), rgba(90, 62, 43, 0.32), rgba(90, 62, 43, 0.0)),
        linear-gradient(160deg, var(--linen-cream), var(--proving-dough));
}
/* the flank of a paper bag — crumpled creases */
.duotone--paperbag {
    background:
        linear-gradient(105deg, transparent 28%, rgba(90, 62, 43, 0.20) 30%, transparent 33%),
        linear-gradient(72deg, transparent 56%, rgba(90, 62, 43, 0.16) 58%, transparent 61%),
        linear-gradient(118deg, transparent 70%, rgba(255, 255, 255, 0.4) 72%, transparent 75%),
        linear-gradient(140deg, var(--proving-dough), var(--linen-cream) 60%, var(--proving-dough));
}

/* =====================================================================
   DUST-MOTE CANVAS
   ===================================================================== */

.dust-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
}

/* =====================================================================
   CURSOR-FOLLOW PERSIMMON GLOW
   ===================================================================== */

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 72, 47, 0.85) 0%, rgba(217, 72, 47, 0.35) 40%, transparent 72%);
    pointer-events: none;
    z-index: 55;
    transition: width 200ms ease, height 200ms ease, margin 200ms ease, opacity 220ms ease;
    opacity: 0;
    will-change: transform;
}
body.cursor-active .cursor-glow { opacity: 1; }
body.cursor-hot .cursor-glow {
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    background: radial-gradient(circle, rgba(217, 72, 47, 0.9) 0%, rgba(201, 168, 124, 0.4) 45%, transparent 75%);
}
@media (pointer: coarse), (hover: none) {
    .cursor-glow { display: none; }
}

/* =====================================================================
   GRAIN OVERLAY — last visual layer, fixed, drifts horizontally
   noise is an inline SVG fractal-noise data URI (no external PNG)
   ===================================================================== */

.grain-overlay {
    position: fixed;
    top: 0;
    left: -256px;
    width: calc(100vw + 512px);
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.72 0 0 0 0 0.63 0 0 0 0 0.53 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.085;
    pointer-events: none;
    z-index: 60;
    will-change: transform;
}

/* =====================================================================
   RESPONSIVE — tablet 4 × 6, phone 2 × 12. The grid never scrolls.
   ===================================================================== */

@media (max-width: 1024px) and (min-width: 561px) {
    .cabinet-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        max-width: calc((100vh - var(--cabinet-margin) * 2) * (4 / 6));
        max-height: calc((100vw - var(--cabinet-margin) * 2) * (6 / 4));
    }
}
@media (max-width: 560px) {
    :root { --cabinet-margin: clamp(14px, 4vw, 30px); }
    .cabinet-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(12, 1fr);
        max-width: calc((100vh - var(--cabinet-margin) * 2) * (2 / 12));
        max-height: calc((100vw - var(--cabinet-margin) * 2) * (12 / 2));
        gap: 8px;
    }
    .drawer__panel { padding: clamp(1.2rem, 7vw, 2.4rem); }
    .frame-hint { font-size: 9px; }
}

/* tablet & phone: opened drawer still fills the whole grid */
@media (max-width: 1024px) {
    .drawer.is-open { grid-column: 1 / -1; grid-row: 1 / -1; }
}

/* =====================================================================
   REDUCED MOTION — particles, grain drift, cursor-follow all fall still;
   the neomorphic press states stay (essential to legibility);
   drawer-expand shortens to 80ms with no spring.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .grain-overlay { animation: none !important; }
    .drawer {
        transition: box-shadow 80ms linear, opacity 80ms linear, transform 80ms linear;
    }
    .drawer__panel {
        transition: opacity 80ms linear, transform 80ms linear;
    }
    .drawer__face { transition: opacity 80ms linear; }
    .cursor-glow { display: none; }
    .dust-canvas { display: none; }
}