/* ==========================================================================
   lossless.dev — a quiet engineering shrine to the integer
   Strict duotone (paper-bone + ink-soot) with one bruised-magenta wound.
   ========================================================================== */

:root {
    /* Palette */
    --paper-bone: #F4F0E6;
    --ink-soot: #1A1817;
    --bruised-magenta: #B8266A;
    --grey-cedar: #8A857A;
    --paper-shadow: #E8E2D0;

    /* Type */
    --display: 'Big Shoulders Display', 'Inter', 'Helvetica Neue', sans-serif;
    --display-cjk: 'Big Shoulders Display', 'Noto Serif JP', serif;
    --serif: 'Bodoni Moda', 'Lora', Georgia, serif;
    --sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

    /* Spacing — musical intervals */
    --gap-fifth: 1.5rem;
    --gap-major-sixth: 1.667rem;
    --gap-octave: 2rem;

    /* Kintsugi */
    --kintsugi-offset: 1.5px;
    --ma-offset: 7px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper-bone);
    color: var(--ink-soot);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.62;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

p { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

code, .mono {
    font-family: var(--mono);
    font-size: 0.92em;
}

/* ==========================================================================
   Paper grain — fixed in viewport
   ========================================================================== */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: multiply;
    opacity: 1;
}

/* ==========================================================================
   Persistent frequency counter
   ========================================================================== */
.freq-counter {
    position: fixed;
    top: 22px;
    right: 24px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-soot);
    opacity: 0.55;
    letter-spacing: 0.02em;
    z-index: 9100;
    pointer-events: none;
    user-select: none;
}
.freq-counter .freq-unit {
    margin-left: 0.4em;
    color: var(--grey-cedar);
}

/* ==========================================================================
   Document wrapper
   ========================================================================== */
.document {
    position: relative;
    z-index: 1;
}

.sec {
    position: relative;
    width: 100%;
    padding: 0;
}

.sec-num,
.sec-title,
.sec-sub {
    display: block;
}
.sec-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--grey-cedar);
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
}
.sec-title {
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(2.4rem, 4.4vw, 4.6rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--ink-soot);
}
.sec-sub {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--grey-cedar);
    margin-top: 0.7rem;
    max-width: 36rem;
    line-height: 1.55;
}

/* ==========================================================================
   Margin notes (Bodoni italic, very faint)
   ========================================================================== */
.margin-note {
    position: absolute;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.84rem;
    line-height: 1.62;
    color: var(--grey-cedar);
    max-width: 14rem;
    opacity: 0.62;
    transition: opacity 480ms ease;
}
.margin-note:hover { opacity: 0.95; }
.margin-note .mn-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-style: normal;
    color: var(--grey-cedar);
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
    opacity: 0.8;
}
.margin-note-r {
    right: 6vw;
    bottom: 8vh;
}

/* ==========================================================================
   SECTION 0 — The Compiled Silence
   ========================================================================== */
.sec-zero {
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
}

.sallen-key {
    position: absolute;
    top: 0;
    right: 0;
    width: 38vw;
    height: 100%;
    pointer-events: none;
}
.sk-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sk-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) 1.4s forwards;
}
.sk-path.sk-r1 { animation-delay: 1.7s; }
.sk-path.sk-r2 { animation-delay: 1.9s; }
.sk-path.sk-c1 { animation-delay: 2.2s; }
.sk-path.sk-c2 { animation-delay: 2.4s; }
.sk-path.sk-opamp { animation-delay: 2.7s; }
.sk-path.sk-opamp-in1 { animation-delay: 2.9s; }
.sk-path.sk-opamp-in2 { animation-delay: 3.0s; }
.sk-path.sk-opamp-out { animation-delay: 3.2s; }
.sk-path.sk-feedback { animation-delay: 3.5s; }
.sk-path.sk-output-tail { animation-delay: 3.8s; }

.sk-junctions circle {
    opacity: 0;
    animation: fade-in 600ms ease 4.2s forwards;
}
.sk-labels text {
    opacity: 0;
    animation: fade-in 800ms ease 4.6s forwards;
}

@keyframes sk-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.title-block {
    position: absolute;
    left: 6vw;
    bottom: 12vh;
    max-width: 70vw;
}

.lossless-word {
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(7rem, 18vw, 22rem);
    letter-spacing: -0.06em;
    line-height: 0.78;
    color: var(--ink-soot);
    position: relative;
    display: block;
}

.lossless-word .glyph {
    display: inline-block;
    opacity: 0;
    transform: translateY(0);
    animation: glyph-fill 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.lossless-word .g-l { animation-delay: 1.6s; }
.lossless-word .g-o { animation-delay: 1.78s; }
.lossless-word .g-s1 { animation-delay: 1.96s; }
.lossless-word .g-s2 { animation-delay: 2.14s; }
.lossless-word .g-l2 { animation-delay: 2.32s; }
.lossless-word .g-e { animation-delay: 2.50s; }
.lossless-word .g-s3 { animation-delay: 2.68s; }
.lossless-word .g-s4 { animation-delay: 2.86s; }

@keyframes glyph-fill {
    from { opacity: 0; transform: translateY(0.06em); }
    to { opacity: 1; transform: translateY(0); }
}

/* The kintsugi dot — the single 1.5px-offset signature */
.kintsugi-dot-svg {
    position: absolute;
    top: -0.06em;
    left: calc(0.78em * 4 - 0.04em); /* roughly above the second 'l' */
    width: 0.18em;
    height: 0.18em;
    transform: translate(var(--kintsugi-offset), var(--kintsugi-offset));
    opacity: 0;
    animation: kintsugi-arrive 800ms cubic-bezier(0.16, 1, 0.3, 1) 3.4s forwards;
    pointer-events: none;
}
@keyframes kintsugi-arrive {
    0% { opacity: 0; transform: translate(calc(var(--kintsugi-offset) - 8px), calc(var(--kintsugi-offset) - 4px)) scale(0.6); }
    100% { opacity: 1; transform: translate(var(--kintsugi-offset), var(--kintsugi-offset)) scale(1); }
}
.kintsugi-dot-svg.settled #kDotCircle {
    fill: var(--ink-soot);
    transition: fill 1200ms ease;
}

.subtitle {
    margin-top: 1.6rem;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--grey-cedar);
    font-size: 1rem;
    max-width: 30rem;
    opacity: 0;
    animation: fade-in 1200ms ease 4.4s forwards;
}

/* ==========================================================================
   SECTION 1 — The Bento
   ========================================================================== */
.sec-bento {
    min-height: 200vh;
    padding: 14vh 6vw 14vh;
    background: var(--paper-bone);
}

.bento-frame {
    position: sticky;
    top: 6vh;
    max-width: 1400px;
    margin: 0 auto;
}

.bento-header {
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    row-gap: 0.4rem;
    align-items: end;
}
.bento-header .sec-num { grid-column: 1; grid-row: 1; margin-bottom: 0; align-self: end; }
.bento-header .sec-title { grid-column: 1; grid-row: 2; }
.bento-header .sec-sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, minmax(40px, 1fr));
    gap: var(--gap-major-sixth);
    min-height: 78vh;
    transition: gap 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.tile {
    position: relative;
    background: transparent;
    transition:
        grid-area 1.6s cubic-bezier(0.65, 0, 0.35, 1),
        transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
    overflow: hidden;
    padding: 1.4rem 1.5rem;
}

/* Fibonacci tile placement (1, 1, 2, 3, 5, 8 column-spans) */
/* Arrangement A — initial */
.bento-grid[data-arrangement="A"] .tile[data-tile="1"]  { grid-area: 1 / 1 / 4 / 6;   } /* 5×3 */
.bento-grid[data-arrangement="A"] .tile[data-tile="2"]  { grid-area: 1 / 6 / 6 / 13;  } /* 7×5 — large glass */
.bento-grid[data-arrangement="A"] .tile[data-tile="3"]  { grid-area: 4 / 1 / 6 / 4;   } /* 3×2 — empty MISALIGNED */
.bento-grid[data-arrangement="A"] .tile[data-tile="4"]  { grid-area: 4 / 4 / 6 / 6;   } /* 2×2 — note */
.bento-grid[data-arrangement="A"] .tile[data-tile="5"]  { grid-area: 6 / 1 / 9 / 4;   } /* 3×3 — numeral 13 MISALIGNED */
.bento-grid[data-arrangement="A"] .tile[data-tile="6"]  { grid-area: 6 / 4 / 9 / 9;   } /* 5×3 — quartz */
.bento-grid[data-arrangement="A"] .tile[data-tile="7"]  { grid-area: 6 / 9 / 8 / 13;  } /* 4×2 — numeral 144 */
.bento-grid[data-arrangement="A"] .tile[data-tile="8"]  { grid-area: 8 / 9 / 10 / 13; } /* 4×2 — empty MISALIGNED */
.bento-grid[data-arrangement="A"] .tile[data-tile="9"]  { grid-area: 9 / 1 / 13 / 6;  } /* 5×4 — essay */
.bento-grid[data-arrangement="A"] .tile[data-tile="10"] { grid-area: 9 / 6 / 11 / 9;  } /* 3×2 */
.bento-grid[data-arrangement="A"] .tile[data-tile="11"] { grid-area: 10 / 9 / 13 / 13;} /* 4×3 */
.bento-grid[data-arrangement="A"] .tile[data-tile="12"] { grid-area: 11 / 6 / 13 / 9; } /* 3×2 */

/* Arrangement B — after rearrangement (still Fibonacci, slightly redistributed) */
.bento-grid[data-arrangement="B"] .tile[data-tile="1"]  { grid-area: 1 / 8 / 4 / 13;  }
.bento-grid[data-arrangement="B"] .tile[data-tile="2"]  { grid-area: 1 / 1 / 6 / 8;   }
.bento-grid[data-arrangement="B"] .tile[data-tile="3"]  { grid-area: 4 / 8 / 6 / 11;  }
.bento-grid[data-arrangement="B"] .tile[data-tile="4"]  { grid-area: 4 / 11 / 6 / 13; }
.bento-grid[data-arrangement="B"] .tile[data-tile="5"]  { grid-area: 6 / 10 / 9 / 13; }
.bento-grid[data-arrangement="B"] .tile[data-tile="6"]  { grid-area: 6 / 5 / 9 / 10;  }
.bento-grid[data-arrangement="B"] .tile[data-tile="7"]  { grid-area: 6 / 1 / 8 / 5;   }
.bento-grid[data-arrangement="B"] .tile[data-tile="8"]  { grid-area: 8 / 1 / 10 / 5;  }
.bento-grid[data-arrangement="B"] .tile[data-tile="9"]  { grid-area: 9 / 8 / 13 / 13; }
.bento-grid[data-arrangement="B"] .tile[data-tile="10"] { grid-area: 9 / 5 / 11 / 8;  }
.bento-grid[data-arrangement="B"] .tile[data-tile="11"] { grid-area: 10 / 1 / 13 / 5; }
.bento-grid[data-arrangement="B"] .tile[data-tile="12"] { grid-area: 11 / 5 / 13 / 8; }

/* Per-tile easings — ALL complete on the same frame (1.6s duration) */
.bento-grid .tile[data-tile="1"]  { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.bento-grid .tile[data-tile="2"]  { transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.bento-grid .tile[data-tile="3"]  { transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1); }
.bento-grid .tile[data-tile="4"]  { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.bento-grid .tile[data-tile="5"]  { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.bento-grid .tile[data-tile="6"]  { transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
.bento-grid .tile[data-tile="7"]  { transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
.bento-grid .tile[data-tile="8"]  { transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
.bento-grid .tile[data-tile="9"]  { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.bento-grid .tile[data-tile="10"] { transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
.bento-grid .tile[data-tile="11"] { transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
.bento-grid .tile[data-tile="12"] { transition-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }

/* Misaligned tiles (3, 5, 8) — 7px ma offset */
.bento-grid .tile[data-tile="3"] { transform: translate(var(--ma-offset), var(--ma-offset)); }
.bento-grid .tile[data-tile="5"] { transform: translate(var(--ma-offset), var(--ma-offset)); }
.bento-grid .tile[data-tile="8"] { transform: translate(var(--ma-offset), var(--ma-offset)); }

/* Glass tile */
.tile-glass {
    background: rgba(244, 240, 230, 0.62);
    backdrop-filter: blur(14px) saturate(0.85);
    -webkit-backdrop-filter: blur(14px) saturate(0.85);
    box-shadow:
        inset 0 0 0 1px rgba(26, 24, 23, 0.08),
        0 1px 0 0 rgba(26, 24, 23, 0.04),
        0 12px 32px -22px rgba(26, 24, 23, 0.18);
    border-radius: 2px;
}

/* The etched circuit on glass card backplates */
.etch-circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.22;
    pointer-events: none;
}

.tile-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tile-eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--grey-cedar);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.tile-title {
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    letter-spacing: -0.04em;
    line-height: 0.9;
    margin: 0 0 0.6rem 0;
    color: var(--ink-soot);
}

.tile-body {
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
    color: var(--ink-soot);
    max-width: 28rem;
}

.tile-cap {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.84rem;
    color: var(--grey-cedar);
}

/* Numeral tile */
.tile-numeral {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    background: transparent;
}
.tile-numeral .fib-num {
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(5rem, 12vw, 14rem);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--ink-soot);
}
.tile-13 .fib-num { font-size: clamp(4rem, 9vw, 11rem); }
.tile-144 .fib-num { font-size: clamp(3rem, 7vw, 8.4rem); }
.tile-02 .fib-num { font-size: clamp(2.6rem, 6vw, 7.2rem); color: var(--grey-cedar); }

/* Empty (negative-space) tiles — paper-shadow fill */
.tile-empty {
    background: var(--paper-shadow);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile-empty .empty-mark {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--grey-cedar);
    opacity: 0.5;
    letter-spacing: 0.05em;
}

/* Note tile */
.tile-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tile-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink-soot);
    margin: 0 0 0.8rem 0;
}
.tile-cite {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--grey-cedar);
    letter-spacing: 0.06em;
}

.tile-essay .tile-body { font-size: 0.98rem; }

/* Mono-label tile */
.tile-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
}
.tile-label .mono-label {
    font-family: var(--mono);
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    color: var(--ink-soot);
    letter-spacing: 0.04em;
}
.tile-label .tile-cap { color: var(--grey-cedar); }

.bento-foot {
    margin-top: 2.4rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--grey-cedar);
    max-width: 42rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}
.bento-foot code {
    font-style: normal;
    background: rgba(26, 24, 23, 0.06);
    padding: 0.06em 0.36em;
    border-radius: 1px;
}
.dot-mark {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-top: 0.55rem;
    background: var(--bruised-magenta);
    border-radius: 50%;
}

/* ==========================================================================
   SECTION 2 — The Trace
   ========================================================================== */
.sec-trace {
    min-height: 220vh;
    padding: 12vh 0 14vh;
    position: relative;
}

.trace-header {
    padding: 0 6vw 4vh;
    max-width: 1400px;
    margin: 0 auto;
}

.trace-stage {
    position: sticky;
    top: 14vh;
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
}

.trace-svg {
    width: 100%;
    height: auto;
    max-height: 60vh;
    display: block;
}

.trace-path,
.trace-branch {
    /* JS will compute pathLength and animate stroke-dashoffset on scroll */
}

.trace-caption {
    margin-top: 2rem;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--grey-cedar);
    opacity: 0.78;
}

/* ==========================================================================
   SECTION 3 — The Specimen
   ========================================================================== */
.sec-specimen {
    min-height: 100vh;
    padding: 14vh 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--paper-bone);
}

.spec-header {
    width: 100%;
    max-width: 38rem;
    margin: 0 auto 3rem;
    text-align: left;
}

.specimen-card {
    position: relative;
    width: 100%;
    max-width: 38rem;
    padding: 3rem 2.4rem 2.4rem;
    background: rgba(244, 240, 230, 0.62);
    backdrop-filter: blur(14px) saturate(0.85);
    -webkit-backdrop-filter: blur(14px) saturate(0.85);
    box-shadow:
        inset 0 0 0 1px rgba(26, 24, 23, 0.08),
        0 1px 0 0 rgba(26, 24, 23, 0.04),
        0 18px 48px -28px rgba(26, 24, 23, 0.22);
    border-radius: 2px;
    overflow: hidden;
}

.quartz-etch {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    height: 80px;
    pointer-events: none;
}

.waveform-svg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 220;
    z-index: 2;
}

.specimen-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.4rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--grey-cedar);
    letter-spacing: 0.06em;
}
.spec-stage {
    color: var(--ink-soot);
    text-transform: lowercase;
    letter-spacing: 0.16em;
}
.spec-fps {
    color: var(--grey-cedar);
    font-style: normal;
}

.specimen-caption {
    margin-top: 1rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--grey-cedar);
    text-align: center;
    line-height: 1.6;
}

/* ==========================================================================
   SECTION 4 — The Ledger
   ========================================================================== */
.sec-ledger {
    min-height: 100vh;
    padding: 18vh 6vw;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 4rem;
    align-items: start;
}

.ledger-header {
    grid-column: 1;
    position: sticky;
    top: 12vh;
}

.ledger-list {
    grid-column: 2;
    max-width: 38rem;
}
.ledger-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 1.4rem;
    align-items: center;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(26, 24, 23, 0.08);
    position: relative;
}
.ledger-item:last-child { border-bottom: none; }

.glyph-svg {
    width: 60px;
    height: 40px;
    grid-column: 1;
}

.ledger-link {
    position: relative;
    grid-column: 2;
    display: block;
    cursor: pointer;
}

.ledger-title {
    display: block;
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(2.2rem, 5.4vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: var(--ink-soot);
    transition: color 320ms cubic-bezier(0.65, 0, 0.35, 1);
}

.underline-svg {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 6px;
    pointer-events: none;
}
.underline-svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 480ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ledger-link:hover .ledger-title { color: var(--bruised-magenta); }
.ledger-link:hover .underline-svg path { stroke-dashoffset: 0; }

.ledger-meta {
    grid-column: 2;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--grey-cedar);
    margin-top: 0.6rem;
    letter-spacing: 0.04em;
}

.ledger-foot {
    grid-column: 2;
    margin-top: 4rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--grey-cedar);
    max-width: 24rem;
    opacity: 0.8;
}

/* ==========================================================================
   SECTION 5 — The Closing Mark
   ========================================================================== */
.sec-closing {
    height: 100vh;
    min-height: 720px;
    position: relative;
    overflow: hidden;
}

.closing-latin {
    position: absolute;
    top: 14vh;
    left: 6vw;
    font-family: var(--display);
    font-weight: 100;
    font-size: clamp(5rem, 14vw, 16rem);
    letter-spacing: -0.06em;
    line-height: 0.78;
    color: var(--ink-soot);
}
.closing-period {
    color: var(--bruised-magenta);
    margin-left: -0.04em;
}

.closing-kanji {
    position: absolute;
    bottom: 6vh;
    right: 5vw;
    font-family: var(--display-cjk);
    font-weight: 300;
    font-size: clamp(8rem, 22vw, 28rem);
    line-height: 0.86;
    color: var(--ink-soot);
}

.closing-line-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#closingLine {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.closing-aside {
    position: absolute;
    left: 6vw;
    bottom: 8vh;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.84rem;
    color: var(--grey-cedar);
    max-width: 18rem;
    opacity: 0.62;
    line-height: 1.6;
}
.closing-aside .ca-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
    opacity: 0.8;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px) {
    html, body { font-size: 16px; }

    .sec-zero { height: auto; min-height: 92vh; padding: 10vh 6vw; }
    .sallen-key { width: 50vw; opacity: 0.55; }
    .title-block { position: relative; left: 0; bottom: 0; margin-top: 36vh; }

    .sec-bento { padding: 12vh 4vw; min-height: auto; }
    .bento-frame { position: static; }
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        gap: 1rem;
    }
    .bento-grid[data-arrangement="A"] .tile,
    .bento-grid[data-arrangement="B"] .tile {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 140px;
    }
    .bento-grid[data-arrangement="A"] .tile[data-tile="3"],
    .bento-grid[data-arrangement="A"] .tile[data-tile="5"],
    .bento-grid[data-arrangement="A"] .tile[data-tile="8"] {
        transform: none;
    }

    .sec-ledger {
        grid-template-columns: 1fr;
        padding: 10vh 6vw;
    }
    .ledger-header, .ledger-list { grid-column: 1; position: static; }
    .ledger-item { grid-template-columns: 40px 1fr; }
    .glyph-svg { width: 40px; }

    .sec-trace { min-height: auto; padding: 10vh 0; }
    .trace-stage { position: static; }

    .closing-latin { font-size: clamp(4rem, 14vw, 8rem); }
    .closing-kanji { font-size: clamp(8rem, 32vw, 16rem); }
}

/* Reduced-motion fallback — fade only, no path-draw, no morph rate change */
@media (prefers-reduced-motion: reduce) {
    .sk-path,
    #closingLine {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
        opacity: 1 !important;
    }
    .sk-junctions circle,
    .sk-labels text,
    .lossless-word .glyph,
    .subtitle,
    .kintsugi-dot-svg {
        animation: fade-in 220ms ease forwards !important;
        opacity: 1 !important;
        transform: translate(var(--kintsugi-offset), var(--kintsugi-offset)) !important;
    }
    .bento-grid .tile { transition: none !important; }
}