/* ============================================================
   jungchi.boo  —  The Faded Memo
   Department of Quiet Matters
   ============================================================ */

@property --jc-wght {
    syntax: "<number>";
    initial-value: 220;
    inherits: false;
}

@property --jc-wdth {
    syntax: "<number>";
    initial-value: 88;
    inherits: false;
}

:root {
    --paper:        #F4ECE0; /* Aged Bond */
    --paper-2:      #E8DDE3; /* Pale Mauve Ash */
    --mint:         #C9D8D0; /* Faded Mint Stamp */
    --peach:        #F2C9B8; /* Sun-Faded Peach */
    --peri:         #B9C2E0; /* Periwinkle Carbon */
    --pencil:       #7A6F66; /* Archive Pencil — body type */
    --pencil-dark:  #5A4F46; /* darker fallback for low-contrast zones */
    --violet:       #A89BAA; /* Faded Violet — marginalia */
    --shadow:       #3D3530; /* Document Shadow */
    --grid-grey:    #EEEEEE; /* faint baseline grid */

    --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--pencil);
    overflow-x: hidden;
}

body {
    font-family: "Roboto Flex", system-ui, sans-serif;
    font-variation-settings: "wght" 220, "wdth" 88, "opsz" 96, "GRAD" -50;
    text-rendering: geometricPrecision;
    font-feature-settings: "kern", "liga", "calt";
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
}

/* ------------------------------------------------------------
   Gradient mesh field (full-document fixed background)
   ------------------------------------------------------------ */

.mesh-field {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: normal;
}

/* The mesh circles we will animate via JS lissajous */
#meshCircles circle {
    transform-origin: center;
    will-change: cx, cy;
}

/* ------------------------------------------------------------
   Baseline grid + bleed-through dates
   ------------------------------------------------------------ */

.baseline-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 27px,
            rgba(61, 53, 48, 0.06) 27px,
            rgba(61, 53, 48, 0.06) 28px
        );
    opacity: 0.55;
}

.grid-date {
    position: absolute;
    font-family: "DM Mono", monospace;
    font-size: 0.72rem;
    color: var(--shadow);
    opacity: 0.06;
    letter-spacing: 0.04em;
    user-select: none;
}

/* ------------------------------------------------------------
   Hole-punches (top-left of document)
   ------------------------------------------------------------ */

.hole-punch {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    z-index: 2;
    background: radial-gradient(
        circle at 45% 45%,
        rgba(185, 194, 224, 0.55) 0%,
        rgba(185, 194, 224, 0.28) 45%,
        rgba(185, 194, 224, 0) 80%
    );
    filter: blur(2.5px);
    pointer-events: none;
    will-change: transform;
}

.hole-punch-1 { top: 6vh;  left: 4vw; }
.hole-punch-2 { top: 22vh; left: 4vw; }

/* ------------------------------------------------------------
   The memo (continuous document)
   ------------------------------------------------------------ */

.memo {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    mix-blend-mode: multiply; /* type drinks colour from mesh */
}

.pour {
    position: relative;
    width: 100%;
    padding: 6vh 0;
}

/* Each pour has its own slight rotation (hand-typewriter slip) */
.pour-letterhead   { transform: rotate(-0.18deg); }
.pour-body         { transform: rotate(0.32deg);  min-height: 200vh; }
.pour-marginalia   { transform: rotate(-0.40deg); min-height: 100vh; }
.pour-stamps       { transform: rotate(0.55deg);  min-height: 100vh; }
.pour-redaction    { transform: rotate(-0.22deg); min-height: 150vh; }
.pour-footer       { transform: rotate(0.10deg);  min-height: 100vh; }

/* ------------------------------------------------------------
   Pour 1 — The Letterhead
   ------------------------------------------------------------ */

.pour-letterhead {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12vw;
    padding-right: 6vw;
}

.letterhead-stack {
    max-width: 980px;
}

.hero-word {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(4rem, 14vw, 16rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--pencil-dark);
    font-variation-settings:
        "wght" var(--jc-wght),
        "wdth" var(--jc-wdth),
        "opsz" 144,
        "GRAD" 0;
    text-shadow: 1px 1px 0 rgba(61, 53, 48, 0.04);
    animation:
        breathe-wght 14s ease-in-out infinite alternate,
        breathe-wdth 21s ease-in-out infinite alternate;
    will-change: font-variation-settings;
    font-feature-settings: "ss01", "kern", "liga";
}

@keyframes breathe-wght {
    0%   { --jc-wght: 220; }
    100% { --jc-wght: 680; }
}

@keyframes breathe-wdth {
    0%   { --jc-wdth: 75; }
    100% { --jc-wdth: 112; }
}

.hero-korean {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(2rem, 5.5vw, 5rem);
    margin: 0.4em 0 0.8em 0;
    color: var(--violet);
    font-variation-settings: "wght" 280, "wdth" 92, "opsz" 96;
    letter-spacing: 0.02em;
    opacity: 0.78;
}

.hero-subtitle {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    color: var(--pencil);
    margin: 0 0 2.6em 0;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-variation-settings: "wght" 360, "wdth" 88, "opsz" 24;
    opacity: 0.78;
}

.date-stamp {
    display: inline-block;
    padding: 0.7em 1.4em;
    border: 1.5px solid var(--peach);
    border-radius: 4px;
    transform: rotate(-4deg);
    background: radial-gradient(
        ellipse at 40% 50%,
        rgba(242, 201, 184, 0.28) 0%,
        rgba(242, 201, 184, 0) 75%
    );
    filter: blur(0.4px);
    margin-bottom: 2.4em;
    opacity: 0.85;
}

.date-stamp-inner {
    font-family: "Special Elite", monospace;
    font-size: 1rem;
    letter-spacing: 0.18em;
    color: var(--peach);
    text-shadow: 0.5px 0.5px 0 rgba(122, 111, 102, 0.12);
}

.filing-meta {
    font-family: "DM Mono", monospace;
    font-size: 0.86rem;
    color: var(--pencil);
    opacity: 0.55;
    letter-spacing: 0.06em;
    margin: 0;
}

.filing-num {
    color: var(--pencil-dark);
    opacity: 0.75;
}

/* ------------------------------------------------------------
   Pour 2 — The Body Paragraph
   ------------------------------------------------------------ */

.pour-body {
    padding-left: 18vw;
    padding-right: 4vw;
    padding-top: 14vh;
    padding-bottom: 14vh;
}

.body-paragraph {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(2.2rem, 6vw, 7rem);
    line-height: 1.18;
    color: var(--pencil);
    font-variation-settings: "wght" 240, "wdth" 75, "opsz" 144, "GRAD" -50;
    letter-spacing: -0.012em;
    margin: 0;
    max-width: 1500px;
}

/* The per-line spans created in JS */
.body-paragraph .line {
    display: block;
    --focus-d: 0;
    filter: blur(calc(var(--focus-d) * 12px));
    opacity: calc(1 - var(--focus-d) * 0.55);
    transition: filter 220ms ease-out, opacity 220ms ease-out;
    will-change: filter, opacity;
}

/* Carbon-paper bleed: every 5th line */
.body-paragraph .line:nth-child(5n) {
    text-shadow: 1px 1px 0 rgba(61, 53, 48, 0.08);
}

/* Whiteout corrections, inline */
.whiteout {
    position: relative;
    background-color: var(--paper);
    padding: 0.04em 0.18em;
    border-radius: 1px;
    box-shadow: 0 0 1px rgba(244, 236, 224, 0.9);
    color: transparent;
    user-select: none;
}

.overtype {
    position: absolute;
    inset: 0;
    color: var(--pencil-dark);
    font-variation-settings: "wght" 460, "wdth" 80, "opsz" 144;
    transform: translate(0.04em, -0.02em) rotate(-0.6deg);
    pointer-events: none;
}

/* ------------------------------------------------------------
   Pour 3 — The Marginalia
   ------------------------------------------------------------ */

.pour-marginalia {
    padding-left: 8vw;
    padding-right: 4vw;
    padding-top: 14vh;
    padding-bottom: 14vh;
    position: relative;
}

.marginalia-host {
    position: relative;
    max-width: 100%;
}

.marginalia-body-context {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    color: var(--pencil);
    font-variation-settings: "wght" 280, "wdth" 92, "opsz" 96;
    line-height: 1.7;
    max-width: 52ch;
    margin: 0;
    opacity: 0.86;
}

.margin-note {
    position: absolute;
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    color: var(--violet);
    opacity: 0.62;
    letter-spacing: 0.01em;
    line-height: 1.35;
    max-width: 22ch;
    pointer-events: none;
    font-feature-settings: "ss01";
}

.margin-note.strikethrough {
    text-decoration: line-through;
    text-decoration-color: rgba(168, 155, 170, 0.5);
    text-decoration-thickness: 1px;
}

.margin-note-1 { top: 4vh;  right: 6vw;  transform: rotate(1.4deg); }
.margin-note-2 { top: 18vh; right: 12vw; transform: rotate(-2deg); }
.margin-note-3 { top: 30vh; right: 4vw;  transform: rotate(0.8deg); }
.margin-note-4 { top: 44vh; right: 14vw; transform: rotate(-1.2deg); }
.margin-note-5 { top: 56vh; right: 7vw;  transform: rotate(2deg); }
.margin-note-6 { top: 70vh; right: 18vw; transform: rotate(-0.6deg); }
.margin-note-7 { top: 84vh; right: 5vw;  transform: rotate(1.6deg); }

/* ------------------------------------------------------------
   Pour 4 — The Stamp Spread
   ------------------------------------------------------------ */

.pour-stamps {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stamp-stage {
    position: relative;
    width: min(900px, 90vw);
    height: 70vh;
    min-height: 480px;
}

.stamp {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: blur(0.4px);
}

.stamp-mint {
    top: 12%;
    left: 8%;
    transform: rotate(-7deg);
    background: radial-gradient(
        circle at 45% 50%,
        rgba(201, 216, 208, 0.85) 0%,
        rgba(201, 216, 208, 0.55) 45%,
        rgba(201, 216, 208, 0.10) 75%,
        rgba(201, 216, 208, 0) 100%
    );
}

.stamp-peach {
    top: 28%;
    left: 36%;
    transform: rotate(11deg);
    background: radial-gradient(
        circle at 50% 50%,
        rgba(242, 201, 184, 0.78) 0%,
        rgba(242, 201, 184, 0.45) 50%,
        rgba(242, 201, 184, 0.08) 80%,
        rgba(242, 201, 184, 0) 100%
    );
    filter: blur(1.4px);
}

.stamp-peri {
    top: 16%;
    left: 60%;
    transform: rotate(-3deg);
    background: radial-gradient(
        circle at 55% 45%,
        rgba(185, 194, 224, 0.72) 0%,
        rgba(185, 194, 224, 0.42) 50%,
        rgba(185, 194, 224, 0.08) 78%,
        rgba(185, 194, 224, 0) 100%
    );
    filter: blur(2.6px);
}

.stamp-inner {
    text-align: center;
    color: var(--pencil-dark);
    font-family: "Special Elite", monospace;
    line-height: 1.2;
    opacity: 0.85;
    text-shadow: 0.3px 0.3px 0 rgba(61, 53, 48, 0.1);
}

.stamp-inner-soft {
    opacity: 0.6;
    filter: blur(0.6px);
}

.stamp-inner-softer {
    opacity: 0.4;
    filter: blur(1.2px);
}

.stamp-word {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
}

.stamp-sub {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.4em;
    letter-spacing: 0.1em;
    color: var(--violet);
}

.stamp-foot {
    display: block;
    font-size: 0.78rem;
    margin-top: 0.6em;
    letter-spacing: 0.22em;
    opacity: 0.65;
}

/* ------------------------------------------------------------
   Pour 5 — The Redaction
   ------------------------------------------------------------ */

.pour-redaction {
    padding-left: 12vw;
    padding-right: 12vw;
    padding-top: 18vh;
    padding-bottom: 18vh;
}

.redaction-host {
    max-width: 1100px;
}

.redact-line {
    font-family: "Roboto Flex", sans-serif;
    font-size: clamp(1.2rem, 2.4vw, 2.4rem);
    line-height: 1.5;
    color: var(--pencil);
    font-variation-settings: "wght" 300, "wdth" 90, "opsz" 96;
    margin: 0 0 1.4em 0;
    letter-spacing: -0.005em;
    --focus-d: 0;
    filter: blur(calc(var(--focus-d) * 8px));
    opacity: calc(1 - var(--focus-d) * 0.45);
    transition: filter 220ms ease-out, opacity 220ms ease-out;
    will-change: filter, opacity;
}

.redaction {
    display: inline-block;
    width: 5.2em;
    height: 1em;
    vertical-align: middle;
    margin: 0 0.18em;
    border-radius: 6px;
    filter: blur(4px);
    transform: translateY(-0.02em);
}

.redaction-cream {
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(244, 236, 224, 0.95) 0%,
        rgba(232, 221, 227, 0.7) 60%,
        rgba(232, 221, 227, 0.1) 100%
    );
}

.redaction-rose {
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(242, 201, 184, 0.8) 0%,
        rgba(232, 221, 227, 0.5) 60%,
        rgba(232, 221, 227, 0.05) 100%
    );
}

.redaction-wide {
    width: 9.6em;
}

/* ------------------------------------------------------------
   Pour 6 — The Footer Margin
   ------------------------------------------------------------ */

.pour-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(
        to bottom,
        rgba(244, 236, 224, 0) 0%,
        rgba(244, 236, 224, 0.6) 40%,
        rgba(244, 236, 224, 0.92) 100%
    );
}

.footer-fog {
    max-width: 720px;
    padding: 0 6vw;
}

.footer-line {
    font-family: "Special Elite", monospace;
    font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    letter-spacing: 0.22em;
    color: var(--pencil);
    margin: 0 0 1.4em 0;
    opacity: 0.7;
    text-shadow: 0.4px 0.4px 0 rgba(61, 53, 48, 0.05);
}

.footer-sub {
    font-family: "DM Mono", monospace;
    font-size: 0.78rem;
    color: var(--violet);
    opacity: 0.55;
    letter-spacing: 0.08em;
    margin: 0;
}

/* ------------------------------------------------------------
   Reduced motion: stop the breathing, freeze the mesh, sharpen
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .hero-word {
        animation: none;
        font-variation-settings: "wght" 420, "wdth" 92, "opsz" 144;
    }

    .body-paragraph .line,
    .redact-line {
        --focus-d: 0 !important;
        filter: blur(0) !important;
        opacity: 1 !important;
        transition: none;
    }
}

/* ------------------------------------------------------------
   Mobile compaction — keep the metaphor, drop the budget
   ------------------------------------------------------------ */

@media (max-width: 720px) {
    .pour-letterhead {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .pour-body {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .body-paragraph {
        font-size: clamp(1.6rem, 7.5vw, 3.4rem);
    }

    .body-paragraph .line {
        filter: blur(calc(var(--focus-d) * 6px));
    }

    .pour-marginalia {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .margin-note {
        position: relative;
        top: auto !important;
        right: auto !important;
        display: block;
        margin: 1.4em 0;
        max-width: none;
    }

    .stamp-stage {
        height: auto;
        min-height: 0;
    }

    .stamp {
        position: relative;
        margin: -2vh auto;
        top: auto !important;
        left: auto !important;
        display: flex;
    }

    .pour-stamps {
        flex-direction: column;
        padding: 10vh 6vw;
    }

    .pour-redaction {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .hole-punch-2 { top: 14vh; }
}

/* Helvetica/Inter fallback note (silenced — Roboto Flex covers).
   Per spec: no system fallback chain; if Google Fonts fails the
   browser will fall back to its sans-serif stack. */