@font-face {
    font-family: "Basteleur";
    src: url("../fonts/Basteleur-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Basteleur Moonlight";
    src: url("../fonts/Basteleur-Moonlight.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

.philosophy-crypt {
    --crypt-bg: #091215;
    --crypt-bg-deep: #050b0d;
    --crypt-text: #f4dddc;
    --crypt-text-dim: #baa9a9;
    --crypt-text-muted: #887c7d;
    --yume-light: #ffcde0;
    --yume-dark: #401a33;
    --yami-blue: #143365;
    --yami-violet: #191465;
    --crypt-laser: #00ffe1;
    --crypt-brass: #c19a3f;
    --crypt-brass-dark: #8f6b1f;
    --crypt-copper: #b46a4c;
    --crypt-gunmetal: #26343a;
    --crypt-steel: #65777d;
    --crypt-metal-shadow: #111a1d;
    --crypt-paper: #ead9d6;
    --crypt-paper-dark: #c6aaa8;
    --crypt-paper-ink: #261c23;
    --crypt-border: rgba(244, 221, 220, 0.18);
    --crypt-border-strong: rgba(244, 221, 220, 0.32);
    --font-display: "Basteleur", Georgia, serif;
    --font-moonlight: "Basteleur Moonlight", "Basteleur", Georgia, serif;
    --font-ui: "Space Grotesk", system-ui, sans-serif;
    --font-reading: Georgia, "Times New Roman", serif;
    --shadow-metal: 0 18px 45px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    --shadow-laser: 0 0 0.35rem rgba(0, 255, 225, 0.55), 0 0 1rem rgba(0, 255, 225, 0.2);
    --shell-width: 1440px;
    --grid-columns: 8;
    --grid-x: calc(100% / var(--grid-columns));
    --grid-y: 92px;
    color-scheme: dark;
    margin: 0;
    min-width: 320px;
    min-height: 100%;
    overflow-x: hidden;
    color: var(--crypt-text);
    background: var(--crypt-bg);
    font-family: var(--font-ui);
}


@media (max-width: 900px) {
  .philosophy-crypt {
    --grid-columns: 5;
    --grid-y: 80px;
  }
}


*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; }
button,
a { -webkit-tap-highlight-color: transparent; }
button,
input,
textarea,
select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

::selection {
    color: var(--crypt-bg-deep);
    background: var(--yume-light);
}

:focus-visible {
    outline: 2px solid var(--crypt-laser);
    outline-offset: 4px;
    box-shadow: var(--shadow-laser);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.75rem;
    left: 0.75rem;
    transform: translateY(-160%);
    padding: 0.7rem 0.9rem;
    color: var(--crypt-bg);
    background: var(--crypt-laser);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

/* 2. Fixed metal → laser environment */
.crypt-environment {
    --split-left: 20%;
    --split-right: 57%;

    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
    background: var(--crypt-bg);
}

.crypt-environment::before,
.crypt-environment::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Metal grid: lower-left */
.crypt-environment::before {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 calc(var(--grid-x) - 1px),
            rgba(193, 154, 63, 0.28)
                calc(var(--grid-x) - 1px)
                var(--grid-x)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 calc(var(--grid-y) - 1px),
            rgba(101, 119, 125, 0.24)
                calc(var(--grid-y) - 1px)
                var(--grid-y)
        ),
        linear-gradient(
            135deg,
            rgba(17, 26, 29, 0.98),
            rgba(38, 52, 58, 0.92) 42%,
            rgba(17, 26, 29, 0.96) 72%,
            rgba(9, 18, 21, 0.98) 100%
        );

    clip-path: polygon(
        0 var(--split-left),
        100% var(--split-right),
        100% 100%,
        0 100%
    );
}

/* Laser grid: upper-right */
.crypt-environment::after {
    z-index: 1;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 calc(var(--grid-x) - 1px),
            rgba(0, 255, 225, 0.46)
                calc(var(--grid-x) - 1px)
                var(--grid-x)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 calc(var(--grid-y) - 1px),
            rgba(0, 255, 225, 0.30)
                calc(var(--grid-y) - 1px)
                var(--grid-y)
        ),
        linear-gradient(
            135deg,
            rgba(0, 255, 225, 0.015),
            rgba(0, 255, 225, 0.07)
        ),
        var(--crypt-bg);

    clip-path: polygon(
        0 0,
        100% 0,
        100% var(--split-right),
        0 var(--split-left)
    );
    filter:
        drop-shadow(0 0 5px rgba(0, 255, 225, 0.16));
}


/* 3. Shared machine surfaces */
.site-shell {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 2rem), var(--shell-width));

    margin: 0 auto;
    padding: 0 0 4rem;
}

.site-shell--entry { max-width: 1180px; }

.machine-panel {
    position: relative;
    border: 1px solid var(--crypt-border);
    border-radius: 4px;
    background:
        linear-gradient(92deg, transparent 0 7%, rgba(255, 255, 255, 0.018) 7.2% 7.6%, transparent 8%),
        linear-gradient(135deg, rgba(38, 52, 58, 0.96), rgba(13, 23, 27, 0.97));
    box-shadow: var(--shadow-metal);
}

.machine-panel::before,
.machine-panel::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid var(--crypt-brass-dark);
    border-radius: 50%;
    background: #10191c;
    box-shadow: inset 1px 1px rgba(255, 255, 255, 0.08);
}

.machine-panel::before { top: 8px; left: 8px; }
.machine-panel::after { right: 8px; bottom: 8px; }

.eyebrow,
.post-card__meta,
.coordinate-label,
.filter-label,
.archive-status,
.footer-ticker {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
}

.eyebrow { color: var(--crypt-laser); }

.panel-heading h2,
.section-rule h2,
.archive-feed__header h2 {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    line-height: 1;
}

/* 4. MASTHEAD + NAVIGATION*/

.masthead {
    --masthead-gutter: clamp(3.75rem, 5vw, 6rem);
    --control-row-height: var(--grid-y);

    --title-area-height:
        calc(
            var(--grid-y) +
            var(--grid-y) +
            var(--grid-y)
        );

    --nav-row-height: var(--grid-y);

    position: relative;

    display: grid;
    grid-template-rows:
        calc(
            var(--control-row-height) +
            var(--title-area-height)
        )
        var(--nav-row-height);

    width: 100%;
    height:
        calc(
            var(--control-row-height) +
            var(--title-area-height) +
            var(--nav-row-height)
        );

    margin: 0;
    overflow: visible;
}

/* Transparent masthead frame */

.masthead.machine-panel {
    background: transparent;
    box-shadow: none;
}

.masthead.machine-panel::before,
.masthead.machine-panel::after {
    content: none;
    display: none;
}

.masthead__plate {
    position: relative;
    grid-row: 1;

    display: grid;
    grid-template-rows:
        var(--control-row-height)
        var(--title-area-height);

    width: 100%;
    height:
        calc(
            var(--control-row-height) +
            var(--title-area-height)
        );

    margin: 0;
    padding: 0;

    background: transparent;
}


.masthead__control-row {
    position: relative;
    z-index: 5;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    width: 100%;
    height: var(--control-row-height);

    margin: 0;
    padding-inline: var(--masthead-gutter);
}

.masthead__control-row .crypt-signal-box,
.masthead__control-row .crypt-return {
    position: relative;

    inset: auto;

    margin: 0;
}

/* Signal panel */

.masthead__control-row .crypt-signal-box {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.75rem;

    min-height: 3.6rem;
    padding: 0.8rem 1.15rem;

    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.masthead__control-row
.crypt-signal-box.machine-panel::before,
.masthead__control-row
.crypt-signal-box.machine-panel::after {
    content: none;
    display: none;
}

.masthead__control-row .signal-light {
    display: block;
    flex: 0 0 auto;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--crypt-laser);

    box-shadow:
        0 0 0.25rem rgba(0, 255, 225, 0.95),
        0 0 0.65rem rgba(0, 255, 225, 0.65),
        0 0 1rem rgba(0, 255, 225, 0.28);

    animation: signal-flicker 5.5s steps(1, end) infinite;
}

@keyframes signal-flicker {
    0%,
    96%,
    100% {
        opacity: 1;
    }

    97% {
        opacity: 0.2;
    }

    98% {
        opacity: 0.75;
    }
}

/* Return logo */

.masthead__control-row .crypt-return {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.7rem;

    width: max-content;
    min-height: 0;

    margin-left: auto;

    pointer-events: auto;
}

.masthead__control-row .crypt-skull {
    width: clamp(5.8rem, 6.4vw, 7rem);
    transform: translateY(0.1rem);
}

.masthead__control-row .crypt-return__label {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
}


.masthead__title-wrap {
    grid-row: 2;

    display: grid;
    grid-template-columns:
        clamp(11.5rem, 13vw, 13rem)
        minmax(0, 1fr);

    align-items: center;
    gap: clamp(3rem, 4.5vw, 5rem);

    width: 100%;
    height: var(--title-area-height);

    margin: 0;
    padding:
        0.4rem
        var(--masthead-gutter)
        0.8rem;
}

/* Emblem: large, but subordinate to the title */

.emblem-placeholder {
    display: grid;
    place-items: center;
    justify-self: center;

    width: clamp(11rem, 12.5vw, 13rem);
    aspect-ratio: 1;

    margin: 0;

    border: 1.5px dashed var(--crypt-brass);
    border-radius: 50%;

    color: var(--crypt-brass);

    background:
        radial-gradient(
            circle,
            rgba(193, 154, 63, 0.15),
            transparent 64%
        ),
        var(--crypt-metal-shadow);

    font-family: var(--font-display);
    font-size: clamp(2.4rem, 2.8vw, 3rem);

    transform: rotate(-2deg);
}

/* Title stack */

.masthead__copy {
    align-self: center;

    min-width: 0;
    padding-left: clamp(0.5rem, 1.25vw, 1.4rem);
}

.masthead__title {
    margin: 0;
}

.masthead__title span {
    display: block;
}

.masthead__title span:first-child {
    color: var(--crypt-text);

    font-family: var(--font-display);
    font-size: clamp(4.5rem, 5.5vw, 6.5rem);
    letter-spacing: -0.055em;
    line-height: 0.82;

    white-space: nowrap;

    text-shadow:
        5px 5px 0 var(--yami-violet);
}

.masthead__title span:last-child {
    margin-top: 0.4rem;

    color: var(--yume-light);

    font-family: var(--font-moonlight);
    font-size: clamp(2.4rem, 3.5vw, 3.8rem);
    font-weight: 400;
    line-height: 0.92;
}

.masthead__deck {
    max-width: 68ch;

    margin:
        clamp(0.7rem, 1vw, 1rem)
        0
        0;

    color: var(--crypt-text-dim);

    font-family: var(--font-reading);
    font-size: clamp(0.98rem, 1.2vw, 1.15rem);
    font-style: italic;
    line-height: 1.4;
}

/* ROW 5 — NAVIGATION */

.primary-nav {
    position: relative;
    z-index: 10;
    grid-row: 2;

    display: flex;
    flex-wrap: nowrap;

    width: 100%;
    height: var(--nav-row-height);

    margin: 0;

    border-top: 1px solid var(--crypt-border);

    background: rgba(5, 11, 13, 0.84);
}

.nav-button,
.nav-link {
    display: grid;
    place-items: center;
    flex: 1 1 0;

    width: auto;
    height: 100%;
    min-height: 0;

    margin: 0;
    padding: 0.5rem;

    border: 0;
    border-right: 1px solid var(--crypt-border);

    color: var(--crypt-text-dim);
    background: transparent;

    font-family: var(--font-ui);
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
}

.nav-button:hover,
.nav-button.is-active,
.nav-link:hover {
    color: var(--crypt-text);
    background: rgba(20, 51, 101, 0.48);
}

.nav-button.is-active {
    box-shadow: inset 0 -2px var(--crypt-laser);
}

.nav-button:active {
    transform: translateY(1px);
}






/* =========================================================
   MAIN CONTENT — REPLACE OLD SECTIONS 5–8 WITH THIS BLOCK
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- Shared post, visual, tape, and sticker treatments ---------- */

.post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.post-card__tags span {
    padding: 0.28rem 0.42rem;
    border: 1px solid var(--crypt-border);
    color: var(--crypt-text-dim);
    background: rgba(9, 18, 21, 0.62);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-note {
    position: relative;
    padding: 1.35rem 1rem 1rem;
    border: 1px solid rgba(255, 205, 224, 0.3);
    color: var(--crypt-text);
    background:
        linear-gradient(
            135deg,
            rgba(64, 26, 51, 0.95),
            rgba(25, 20, 101, 0.72)
        );
}

.sidebar-note blockquote {
    margin: 0.55rem 0 0;
    font-family: var(--font-moonlight);
    font-size: 1.08rem;
    line-height: 1.45;
}

.featured-file {
    min-width: 0;
}

.featured-post {
    position: relative;
    height: 100%;
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(244, 221, 220, 0.24);
    border-radius: 4px;
    background:
        linear-gradient(
            180deg,
            rgba(25, 20, 101, 0.78),
            rgba(9, 18, 21, 0.98) 54%
        ),
        var(--crypt-bg);
    box-shadow:
        var(--shadow-metal),
        0 0 30px rgba(25, 20, 101, 0.26);
}

.featured-post::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(244, 221, 220, 0.07) 50%,
            transparent 50.2%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 28px,
            rgba(244, 221, 220, 0.018) 29px 30px
        );
}

.featured-post__header,
.featured-post__footer {
    position: relative;
    z-index: 1;
    padding: clamp(1.4rem, 3vw, 2.7rem);
}

.featured-post__header {
    padding-top: clamp(2.7rem, 5vw, 4.8rem);
}

.featured-kicker {
    margin: 1.5rem 0 0.7rem;
    color: var(--yume-light);
    font-family: var(--font-moonlight);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.featured-post h2 {
    max-width: 14ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 6.4vw, 6.3rem);
    letter-spacing: -0.05em;
    line-height: 0.88;
    text-wrap: balance;
}

.featured-deck {
    max-width: 59ch;
    margin: 1.5rem 0 0;
    color: var(--crypt-text-dim);
    font-family: var(--font-reading);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.62;
}

.featured-post__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.open-entry {
    position: relative;
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    width: fit-content;
    color: var(--crypt-text);
    font-size: 0.73rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
}

.open-entry::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.3rem;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--crypt-laser);
    box-shadow: var(--shadow-laser);
    transition: transform 180ms ease;
}

.open-entry:hover::after {
    transform: scaleX(1);
}

.open-entry--large {
    flex: 0 0 auto;
    font-size: 0.78rem;
}

.visual-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(193, 154, 63, 0.44);
    background:
        linear-gradient(
            rgba(0, 255, 225, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 255, 225, 0.05) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle,
            rgba(20, 51, 101, 0.8),
            rgba(5, 11, 13, 0.95) 68%
        );
    background-size: 34px 34px, 34px 34px, auto;
    text-align: center;
}

.visual-placeholder--featured {
    min-height: 265px;
    margin: 0 clamp(1.4rem, 3vw, 2.7rem);
    transform: rotate(-0.25deg);
}

.visual-placeholder--entry {
    min-height: 280px;
}

.visual-placeholder strong,
.visual-placeholder small {
    position: absolute;
    z-index: 1;
    max-width: 24ch;
}

.visual-placeholder strong {
    top: 57%;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.visual-placeholder small {
    top: 67%;
    padding: 0 1rem;
    color: var(--crypt-text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.coordinate-label {
    position: absolute;
    z-index: 1;
    top: 0.7rem;
    left: 0.7rem;
    color: var(--crypt-laser);
}

.placeholder-symbol {
    position: absolute;
    top: 24%;
    color: var(--crypt-laser);
    font-size: clamp(3.5rem, 8vw, 6.8rem);
    line-height: 1;
    text-shadow: var(--shadow-laser);
}

.scan-line {
    position: absolute;
    inset-inline: 0;
    top: -10%;
    height: 1px;
    opacity: 0;
    background: var(--crypt-laser);
    box-shadow: var(--shadow-laser);
    transition: opacity 160ms ease;
}

.visual-placeholder:hover .scan-line {
    opacity: 1;
    animation: scan 1.6s linear infinite;
}

@keyframes scan {
    to {
        transform: translateY(310px);
    }
}

.washi {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: 112px;
    min-height: 28px;
    padding: 0.25rem 0.55rem;
    border-inline: 1px dashed rgba(38, 28, 35, 0.28);
    color: rgba(38, 28, 35, 0.58);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.washi--pink {
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    background: rgba(255, 205, 224, 0.82);
}

.washi--grid {
    top: 1rem;
    right: -1.3rem;
    transform: rotate(8deg);
    color: rgba(244, 221, 220, 0.72);
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 13px,
            rgba(0, 255, 225, 0.35) 14px 15px
        ),
        rgba(20, 51, 101, 0.9);
}

.sticker-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.sticker-placeholder {
    display: grid;
    place-items: center;
    min-height: 90px;
    padding: 0.5rem;
    border: 1px dashed currentColor;
    border-radius: 50% 43% 48% 45%;
    font-family: var(--font-moonlight);
    font-size: 0.78rem;
    line-height: 1.1;
    text-align: center;
    transition: transform 160ms ease;
}


.sticker-placeholder--yume {
    color: var(--yume-light);
    background: rgba(64, 26, 51, 0.66);

    transform:
        rotate(-2deg)
        scale(1.08);

    transform-origin: center;
}

.sticker-placeholder--yami {
    color: #9b8cff;
    background: rgba(25, 20, 101, 0.7);

    transform:
        rotate(2deg)
        scale(1.08);

    transform-origin: center;
}

.sticker-placeholder--yume:hover {
    transform:
        rotate(1deg)
        scale(1.1);
}

.sticker-placeholder--yami:hover {
    transform:
        rotate(-1deg)
        scale(1.1);
}

.sticker-board--rail {
    padding:
        clamp(0.4rem, 0.8vw, 0.7rem)
        clamp(0.3rem, 0.6vw, 0.5rem);
}

.sticker-placeholder--corner {
    position: absolute;
    right: 1.5rem;
    bottom: 6.5rem;
    width: 84px;
    min-height: 84px;
    color: var(--yume-light);
    background: var(--yume-dark);
    transform: rotate(5deg);
}

.post-card--essay {
    background:
        linear-gradient(
            90deg,
            transparent 0 16px,
            rgba(244, 221, 220, 0.06) 17px 18px,
            transparent 19px
        ),
        linear-gradient(
            145deg,
            rgba(20, 51, 101, 0.96),
            rgba(9, 18, 21, 0.98)
        );
}

.post-card--poem {
    color: var(--crypt-paper-ink);
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 25px,
            rgba(64, 26, 51, 0.07) 26px 27px
        ),
        var(--crypt-paper);
    box-shadow:
        8px 8px 0 var(--yume-dark),
        var(--shadow-metal);
}

.post-card--book-note {
    border: 8px solid var(--yami-blue);
    color: var(--crypt-paper-ink);
    background:
        linear-gradient(
            90deg,
            transparent 0 7%,
            rgba(64, 26, 51, 0.1) 7.2% 7.8%,
            transparent 8%
        ),
        var(--crypt-paper);
    box-shadow:
        inset 0 0 0 1px rgba(38, 28, 35, 0.26),
        var(--shadow-metal);
}

.empty-state {
    padding: 2rem;
    border: 1px dashed var(--crypt-border-strong);
    color: var(--crypt-text-dim);
    text-align: center;
}

/* ---------- Three-column reading dashboard ---------- */
.reading-dashboard {
    display: grid;
    grid-template-columns:
        minmax(235px, 0.82fr)
        minmax(0, 2fr)
        minmax(245px, 0.88fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.reading-rail {
    display: grid;
    align-content: start;
    gap: 1.35rem;
    min-width: 0;
    padding: 1.25rem;
}

.reading-rail--left {
    --left-rail-gutter: clamp(0.55rem, 0.8vw, 0.8rem);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: stretch;

    gap: 1.35rem;

    min-width: 0;

    padding:
        clamp(1.25rem, 1.8vw, 1.6rem)
        0;

    overflow: hidden;
}

.reading-rail--left > .current-read,
.reading-rail--left > .sticker-board--rail,
.reading-rail--left > .notes-drawer,
.reading-rail--left > .visitor-thoughts {
    width: auto;
    max-width: none;
    min-width: 0;

    margin-inline: var(--left-rail-gutter);
}

.current-read,
.visitor-thoughts,
.notes-drawer {
    min-width: 0;
}

.current-read__panel,
.thought-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
}

.rail-heading {
    margin: 0 0 0.75rem;
    color: var(--crypt-text);
    font-family: var(--font-ui);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

/* ---------- Current read ---------- */
.current-read__panel {
    display: grid;
    grid-template-columns:
        minmax(5.75rem, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;
    gap: clamp(0.7rem, 1vw, 0.9rem);

    width: 100%;
    min-width: 0;

    padding:
        clamp(0.75rem, 1vw, 0.9rem)
        clamp(0.8rem, 1vw, 1rem);

    border: 1px solid rgba(0, 255, 225, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(20, 51, 101, 0.92),
            rgba(9, 18, 21, 0.92) 68%
        );

    box-shadow:
        inset 4px 0 rgba(0, 255, 225, 0.7),
        0 0 1.25rem rgba(0, 255, 225, 0.06);
}

.current-read__copy {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.65rem;

    min-width: 0;
    width: 100%;

    text-align: center;
}


.book-sticker-placeholder {
    display: grid;
    place-items: center;
    justify-self: center;

    width: min(100%, 6.6rem);
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 4;

    padding: 0.4rem;

    border: 1px dashed rgba(255, 205, 224, 0.72);
    border-radius: 3px;

    color: var(--yume-light);

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 205, 224, 0.08) 0 8px,
            transparent 8px 16px
        ),
        rgba(9, 18, 21, 0.42);

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.current-read__copy h3 {
    width: 100%;
    margin: 0;

    color: var(--yume-light);

    font-family: var(--font-display);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    letter-spacing: -0.025em;
    line-height: 1;

    text-align: center;
    white-space: normal;
    overflow-wrap: normal;

    transform: none;
}

.current-read__copy p {
    width: 100%;
    margin: 0;

    color: var(--crypt-text-dim);

    font-family: var(--font-reading);
    font-size: clamp(0.72rem, 0.9vw, 0.84rem);
    font-style: italic;
    line-height: 1.35;

    text-align: center;
    overflow-wrap: normal;
    word-break: normal;

    transform: none;
}

/* ---------- Left sticker board ---------- */
.sticker-board--rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;
    justify-items: center;

    gap: clamp(1rem, 2vw, 1.6rem);

    width: auto;
    margin-top: 0;
}

.sticker-board--rail .sticker-placeholder {
    justify-self: center;

    width: min(100%, 11rem);
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
}

.current-read > .rail-heading,
.visitor-thoughts__heading,
.notes-drawer {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.visitor-thoughts__heading {
    margin-inline: 0;
}


/* ---------- Visitor thought submission ---------- */
.visitor-thoughts {
    display: grid;
    justify-items: stretch;
}

.visitor-thoughts__heading,
.thought-form {
    min-width: 0;
}

.visitor-thoughts__heading .rail-heading {
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.thought-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-inline: auto;
    padding: clamp(0.85rem, 1.4vw, 1rem);

    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(20, 51, 101, 0.46),
            rgba(5, 11, 13, 0.84) 58%
        );
}

.thought-form__field,
.thought-form__field > span,
.thought-form input,
.thought-form textarea {
    text-align: left;
}

.thought-form__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.38rem;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.thought-form input,
.thought-form textarea {
    display: block;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    border: 1px solid var(--crypt-border);
    border-radius: 2px;

    color: var(--crypt-text);
    background: rgba(5, 11, 13, 0.76);
}

.thought-form__field > span {
    color: var(--crypt-text-dim);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.thought-form__field small {
    color: var(--crypt-text-muted);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

.thought-form input,
.thought-form textarea {
    width: 100%;
    border: 1px solid var(--crypt-border);
    border-radius: 2px;
    color: var(--crypt-text);
    background: rgba(5, 11, 13, 0.76);
    font-family: var(--font-ui);
    font-size: 0.78rem;
}

.thought-form input {
    min-height: 2.7rem;
    padding: 0.58rem 0.65rem;

    font-family: var(--font-ui);
    font-size: clamp(0.72rem, 1vw, 0.8rem);
}

.thought-form textarea {
    min-height: 13rem;
    padding: 0.75rem;
    resize: vertical;
    font-family: var(--font-reading);
    font-size: clamp(0.82rem, 1.1vw, 0.94rem);
    line-height: 1.55;
}

.thought-form input::placeholder,
.thought-form textarea::placeholder {
    color: rgba(186, 169, 169, 0.7);
    opacity: 1;
}

.thought-form input::placeholder {
    font-size: clamp(0.7rem, 0.95vw, 0.78rem);
}

.thought-form textarea::placeholder {
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    line-height: 1.5;
}

.thought-form input:focus,
.thought-form textarea:focus {
    outline: 0;
    border-color: var(--crypt-laser);
    box-shadow:
        inset 0 0 0 1px rgba(0, 255, 225, 0.18),
        0 0 0.75rem rgba(0, 255, 225, 0.1);
}

.thought-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.thought-form__count {
    margin: 0;
    color: var(--crypt-text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.thought-form__count strong {
    color: var(--crypt-laser);
}

.thought-form.is-over-limit .thought-form__count,
.thought-form.is-over-limit .thought-form__count strong {
    color: var(--yume-light);
}

.thought-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.7rem;
    padding: 0.62rem 1.15rem;

    border: 1px solid rgba(0, 255, 225, 0.52);
    border-radius: 999px;

    color: var(--crypt-bg-deep);
    background: var(--crypt-laser);

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.38),
        0 0 0.65rem rgba(0, 255, 225, 0.16);

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.thought-form__submit:hover {
    border-color: #b6ff00;

    color: #f4dddc;
    background: #7b1213;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.16),
        0 0 0.35rem rgba(182, 255, 0, 0.95),
        0 0 0.9rem rgba(182, 255, 0, 0.62),
        0 0 1.5rem rgba(182, 255, 0, 0.26);

    transform: translateY(-1px);
}

.thought-form__submit:active {
    transform: translateY(1px);
}

.thought-form__submit:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.thought-form__status {
    min-height: 1.2rem;
    margin: 0;
    color: var(--crypt-text-muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.thought-form__status.is-success {
    color: var(--crypt-laser);
}

.thought-form__status.is-error {
    color: var(--yume-light);
}

.thought-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.thought-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    min-width: 0;
}

.thought-form__count {
    flex: 1 1 7rem;
}

.thought-form__submit {
    flex: 0 1 auto;
}

/* ---------- Center active reading stage ---------- */
.reading-stage {
    min-width: 0;
}

.featured-post {
    min-height: 760px;
}

.featured-post[data-active-slug] {
    scroll-margin-top: 1rem;
}

/* ---------- Right rail ---------- */

.crypt-question {
    margin-top: 0;
}

.crypt-question blockquote {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.theme-browser {
    display: grid;
    gap: 0.1rem;
}

.theme-stack {
    display: grid;
    gap: 0.45rem;
}

.theme-card {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid transparent;
    border-left-color: var(--crypt-border-strong);
    color: var(--crypt-text-dim);
    background: rgba(5, 11, 13, 0.54);
    text-align: left;
    cursor: pointer;
}

.theme-card:hover {
    color: var(--crypt-text);
    border-color: rgba(0, 255, 225, 0.52);
}

.theme-card.is-active {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgba(185, 121, 104, 0.88);

    color: #2b141d;

    background:
        linear-gradient(
            135deg,
            #f6ddd6 0%,
            #e2b2a4 17%,
            #c98f7f 34%,
            #f0cec4 50%,
            #b97968 68%,
            #d7a294 84%,
            #f8e7e2 100%
        );

    box-shadow:
        inset 0 1px rgba(255, 248, 245, 0.82),
        inset 0 -1px rgba(105, 55, 48, 0.34),
        inset 4px 0 rgba(73, 25, 43, 0.82),
        0 0 1rem rgba(214, 160, 144, 0.16);

    font-family: var(--font-moonlight);
    font-size: 1rem;
    font-weight: 700;

    text-shadow:
        0 1px 0 rgba(255, 244, 239, 0.56);
}

.theme-card.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            112deg,
            transparent 0 19%,
            rgba(255, 255, 255, 0.34) 27%,
            rgba(255, 248, 245, 0.58) 34%,
            rgba(255, 255, 255, 0.12) 42%,
            transparent 54%
        );

    opacity: 0.72;
}

.theme-next {
    display: grid;
    justify-items: center;
    gap: 0.08rem;
    padding-block: 0.1rem;
    color: var(--yume-light);
}

.theme-next span {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.theme-next svg {
    width: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 0.3rem rgba(255, 205, 224, 0.42));
}

.theme-expander {
    margin-top: 0.15rem;
}

.theme-expander summary {
    padding: 0.55rem 0.7rem;
    color: var(--crypt-text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-expander__cards {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.4rem;
}

/* ---------- Four-panel manga placeholder ---------- */

.yonkoma-placeholder {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid rgba(193, 154, 63, 0.44);
    background:
        linear-gradient(
            180deg,
            rgba(20, 51, 101, 0.68),
            rgba(5, 11, 13, 0.94)
        );
}

.yonkoma-placeholder__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--crypt-border);
}

.yonkoma-placeholder__heading span {
    color: var(--yume-light);
    font-family: var(--font-moonlight);
    font-size: 1rem;
}

.yonkoma-placeholder__heading small {
    color: var(--crypt-text-muted);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.yonkoma-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 78px;
    border: 1px solid rgba(244, 221, 220, 0.24);
    background:
        linear-gradient(
            rgba(244, 221, 220, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(244, 221, 220, 0.035) 1px,
            transparent 1px
        ),
        rgba(9, 18, 21, 0.74);
    background-size: 18px 18px;
}

.yonkoma-panel span {
    position: absolute;
    top: 0.35rem;
    left: 0.4rem;
    color: var(--crypt-laser);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}

/* ========================================
   NAVIGATION TARGET HIGHLIGHTS
   ======================================== */

#active-reading-preview,
#themes,
#vault-essays,
#vault-poems,
#vault-notes {
    --nav-target-glow: var(--crypt-laser);

    position: relative;
}

#vault-poems {
    --nav-target-glow: var(--yume-light);
}

#vault-notes {
    --nav-target-glow: var(--crypt-brass);
}

#themes {
    --nav-target-glow: #d6a090;
}

.nav-target-glow {
    outline: 2px solid var(--nav-target-glow);
    box-shadow:
        0 0 0.65rem var(--nav-target-glow),
        0 0 1.6rem rgba(0, 255, 225, 0.3);
}

.nav-target-glow {
    animation:
        crypt-target-glow
        1.9s
        ease-out
        both;
}

@keyframes crypt-target-glow {
    0% {
        outline:
            1px solid
            rgba(255, 255, 255, 0);

        box-shadow:
            0 0 0 rgba(0, 0, 0, 0);
    }

    18% {
        outline:
            2px solid
            var(--nav-target-glow);

        outline-offset: 3px;

        box-shadow:
            0 0 0.45rem
                color-mix(
                    in srgb,
                    var(--nav-target-glow) 78%,
                    transparent
                ),
            0 0 1.4rem
                color-mix(
                    in srgb,
                    var(--nav-target-glow) 46%,
                    transparent
                ),
            0 0 2.5rem
                color-mix(
                    in srgb,
                    var(--nav-target-glow) 22%,
                    transparent
                );
    }

    68% {
        outline:
            1px solid
            color-mix(
                in srgb,
                var(--nav-target-glow) 58%,
                transparent
            );

        outline-offset: 2px;

        box-shadow:
            0 0 0.55rem
                color-mix(
                    in srgb,
                    var(--nav-target-glow) 32%,
                    transparent
                );
    }

    100% {
        outline:
            1px solid
            rgba(255, 255, 255, 0);

        outline-offset: 0;

        box-shadow:
            0 0 0 rgba(0, 0, 0, 0);
    }
}

/* =========================================================
   PHILOSOPHY CRYPT VAULT
   ========================================================= */

.crypt-vault {
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.vault-divider {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 2.25rem;
    overflow: hidden;
    border-block: 1px dashed rgba(38, 28, 35, 0.34);
    color: rgba(38, 28, 35, 0.58);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 205, 224, 0.92) 0 16px,
            rgba(193, 154, 63, 0.82) 16px 20px,
            rgba(25, 20, 101, 0.9) 20px 36px
        );
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vault-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 0 1rem;
    border-bottom: 1px solid var(--crypt-border-strong);
}

.vault-toolbar h2 {
    margin: 0.32rem 0 0;
    font-family: var(--font-ui);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1;
}

.vault-search {
    display: grid;
    grid-template-columns: auto minmax(10rem, 24rem);
    gap: 0.6rem;
    align-items: center;
    min-height: 2.9rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--crypt-border-strong);
    background: rgba(5, 11, 13, 0.78);
}

.vault-search:focus-within {
    border-color: var(--crypt-laser);
    box-shadow: var(--shadow-laser);
}

.vault-search svg {
    width: 1.15rem;
    fill: none;
    stroke: var(--crypt-laser);
    stroke-width: 1.7;
    stroke-linecap: round;
}

.vault-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--crypt-text);
    background: transparent;
    font-size: 0.78rem;
}

.vault-search input::placeholder {
    color: var(--crypt-text-muted);
}

.vault-status {
    margin: 0.8rem 0 0;
    color: var(--crypt-text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vault-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}

.vault-lane {
    --lane-accent: var(--crypt-laser);
    --lane-header-color: rgba(20, 51, 101, 0.58);

    min-width: 0;
    overflow: hidden;

    border: 1px solid var(--crypt-border);

    background: rgba(5, 11, 13, 0.52);
}

.vault-lane--poem {
    --lane-accent: var(--yume-light);
    --lane-header-color: rgba(64, 26, 51, 0.72);
}

.vault-lane--notes {
    --lane-accent: var(--crypt-brass);
    --lane-header-color: rgba(193, 154, 63, 0.18);
}

.vault-lane__header {
    display: grid;
    grid-template-columns:
        auto
        auto
        minmax(2rem, 1fr);

    align-items: center;
    justify-content: start;

    gap: 0.75rem;

    min-height: 3.5rem;
    padding:
        0.75rem
        clamp(0.9rem, 1.4vw, 1.25rem);

    border-bottom: 1px solid var(--crypt-border);

    background:
        linear-gradient(
            90deg,
            var(--lane-header-color),
            rgba(5, 11, 13, 0.2) 68%,
            transparent
        );
}

.vault-lane__header span {
    display: grid;
    place-items: center;

    min-width: 2.25rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.4rem;

    border: 1px solid color-mix(
        in srgb,
        var(--lane-accent) 54%,
        transparent
    );

    color: var(--lane-accent);
    background: rgba(5, 11, 13, 0.52);

    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1;
}

.vault-lane__header h3 {
    margin: 0;

    color: var(--crypt-text);

    font-family: var(--font-ui);
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 750;
    letter-spacing: 0.09em;
    line-height: 1;

    text-transform: uppercase;
}

.vault-lane__header::after {
    content: "";

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--lane-accent) 48%,
                transparent
            ),
            transparent 88%
        );
}

.vault-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(15rem, 27vw, 22rem);
    gap: 0.85rem;
    max-height: none;
    padding: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0.9rem;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--yami-blue) transparent;
    overscroll-behavior-inline: contain;
}

.vault-card {
    scroll-snap-align: start;
    width: 100%;
    min-height: 12rem;
    padding: 1rem;
    border: 1px solid var(--crypt-border-strong);
    color: var(--crypt-text);
    text-align: left;
    cursor: pointer;
}

.vault-card.post-card--poem {
    margin-top: 0;
}

.vault-card h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 0.98;
}

.vault-card.post-card--poem h4 {
    font-family: var(--font-moonlight);
    font-weight: 400;
}

.vault-card p {
    display: -webkit-box;
    margin: 0.75rem 0 0;
    overflow: hidden;
    color: inherit;
    font-family: var(--font-reading);
    font-size: 0.88rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.vault-card:hover,
.vault-card.is-active {
    border-color: var(--crypt-laser);
    transform: translateY(-1px);
}

.vault-card.is-active {
    box-shadow:
        inset 3px 0 var(--crypt-laser),
        0 0 1rem rgba(0, 255, 225, 0.1);
}

.vault-card[hidden],
.note-file-button[hidden] {
    display: none;
}

.vault-empty-state {
    margin-top: 1rem;
}

/* ---------- Responsive main content ---------- */

@media (max-width: 1080px) {
    .reading-dashboard {
        grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.7fr);
    }

    .reading-rail--right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }

    .crypt-question,
    .theme-browser,
    .yonkoma-placeholder {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .reading-dashboard {
        grid-template-columns: 1fr;
    }

    .reading-stage {
        grid-row: 1;
    }

    .reading-rail--left {
        grid-row: 2;
    }

    .reading-rail--right {
        grid-row: 3;
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .featured-post {
        min-height: auto;
    }

    .vault-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .vault-search {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .vault-board {
        grid-template-columns: 1fr;
    }
}
















/* 9. Entry page */
.entry-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.entry-shell { margin-top: 1rem; }
.entry-loading,
.entry-error { padding: clamp(2rem, 6vw, 5rem); }
.entry-error h1,
.entry-loading h1 { max-width: 18ch; margin: 0.7rem 0 1.1rem; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.5rem); line-height: 0.95; }
.entry-error code { color: var(--yume-light); }

.longform-entry__header { padding: clamp(1.5rem, 5vw, 4.5rem); overflow: hidden; }
.longform-entry__header::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -55%;
    width: 40%;
    aspect-ratio: 1;
    border: 1px solid rgba(0, 255, 225, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 45px rgba(0, 255, 225, 0.08);
}

.longform-entry__header h1 {
    max-width: 18ch;
    margin: 0.8rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 7.5rem);
    letter-spacing: -0.055em;
    line-height: 0.88;
    text-wrap: balance;
}

.longform-entry--poem .longform-entry__header h1 { font-family: var(--font-moonlight); font-weight: 400; color: var(--yume-light); }
.entry-byline { margin: 1rem 0 0; color: var(--yume-light); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.entry-deck { max-width: 65ch; margin: 1.4rem 0; color: var(--crypt-text-dim); font-family: var(--font-reading); font-size: clamp(1.05rem, 1.5vw, 1.26rem); line-height: 1.6; }

.longform-entry__layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.entry-margin { position: sticky; top: 1rem; padding: 1.3rem; }
.article-paper {
    min-width: 0;
    padding: clamp(1.5rem, 5vw, 4.5rem);
    border: 1px solid rgba(38, 28, 35, 0.28);
    color: var(--crypt-paper-ink);
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(38, 28, 35, 0.035) 32px 33px),
        var(--crypt-paper);
    box-shadow: 12px 12px 0 rgba(64, 26, 51, 0.72), var(--shadow-metal);
}

.article-paper > :first-child { margin-top: 0; }
.article-paper h2,
.article-paper h3 { font-family: var(--font-display); line-height: 1; }
.article-paper h2 { margin: 2.7rem 0 1rem; font-size: clamp(1.8rem, 3vw, 3rem); }
.article-paper h3 { margin: 2rem 0 0.8rem; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.article-paper p,
.article-paper li {
    font-family: var(--font-reading);
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    line-height: 1.72;
}
.article-paper p { max-width: 68ch; margin: 1.15rem auto; }
.article-paper blockquote {
    max-width: 54ch;
    margin: 2.2rem auto;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--yume-dark);
    color: var(--yume-dark);
    background: rgba(255, 205, 224, 0.42);
    font-family: var(--font-moonlight);
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    line-height: 1.45;
}
.article-paper .poem-body {
    max-width: 38ch;
    margin: 0 auto;
    white-space: pre-line;
    font-family: var(--font-moonlight);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    line-height: 1.8;
}
.article-paper .book-note-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 0.7rem 1rem; max-width: 68ch; margin: 0 auto 2rem; }
.article-paper .book-note-grid dt { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.article-paper .book-note-grid dd { margin: 0; font-family: var(--font-reading); }

/* 10. Footer */
.crypt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: clamp(3rem, 8vw, 7rem);
    padding: 1.2rem 1.35rem;
}

.crypt-footer strong { font-family: var(--font-display); }
.crypt-footer p { max-width: 58ch; margin: 0.35rem 0 0; color: var(--crypt-text-muted); font-family: var(--font-reading); }
.footer-ticker { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; color: var(--crypt-text-muted); }
.footer-ticker span:not(:last-child)::after { content: " · "; margin-left: 1rem; color: var(--crypt-laser); }


/* 11. Responsive */

@media (max-width: 1080px) {
    .editorial-grid { grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.7fr); }
    .current-file { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
    .current-file .panel-heading { grid-column: 1 / -1; }
    .current-file > * { margin-top: 0; }
    .machine-readout { align-self: end; }
    .format-grid,
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .site-shell {
        width: min(calc(100% - 1rem), var(--shell-width));
        padding-top: 0;
    }

    .masthead {
        height: auto;
    }

    .masthead__plate {
        grid-template-rows: auto auto;

        height: auto;
    }

    .masthead__control-row {
        min-height: var(--grid-y);
        height: auto;

        padding-block: 0.75rem;
    }

    .masthead__title-wrap {
        grid-template-columns: 1fr;

        height: auto;
        min-height: calc(var(--grid-y) + var(--grid-y));

        padding-block: 1.25rem;
    }

    .emblem-placeholder {
        width: clamp(7.5rem, 28vw, 9rem);
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .masthead__copy {
        padding-left: 0;
    }

    .primary-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        height: auto;
    }

    .nav-button,
    .nav-link {
        min-height: 3.5rem;
    }

    .entry-header { align-items: flex-start; flex-direction: column; }
    .primary-nav { display: grid; grid-template-columns: repeat(2, 1fr); }
    .nav-button,
    .nav-link { width: 100%; }
    .editorial-grid { grid-template-columns: 1fr; }
    .featured-file { grid-row: 1; }
    .archive-index { grid-row: 2; }
    .current-file { grid-row: 3; grid-column: auto; grid-template-columns: 1fr; }
    .current-file .panel-heading { grid-column: auto; }
    .featured-post { min-height: auto; }
    .featured-post h2 { font-size: clamp(2.7rem, 15vw, 5rem); }
    .featured-post__footer { align-items: flex-start; flex-direction: column; }
    .sticker-placeholder--corner { display: none; }
    .section-rule { grid-template-columns: 1fr; }
    .section-rule h2 { text-align: left; }
    .format-grid,
    .post-grid { grid-template-columns: 1fr; }
    .archive-feed__header { align-items: flex-start; flex-direction: column; }
    .archive-status { text-align: left; }
    .longform-entry__layout { grid-template-columns: 1fr; }
    .entry-margin { position: relative; top: auto; }
    .crypt-footer { align-items: flex-start; flex-direction: column; }
    .footer-ticker { justify-content: flex-start; }
    .article-paper .book-note-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .masthead__plate { padding-inline: 1rem; }
    .masthead__title span:first-child { font-size: clamp(2.25rem, 17vw, 3.7rem); }
    .masthead__title span:last-child { font-size: clamp(1.4rem, 10vw, 2.25rem); }
    .visual-placeholder--featured { margin-inline: 1rem; }
    .featured-post__header,
    .featured-post__footer,
    .archive-index,
    .current-file,
    .post-card { padding-inline: 1rem; }
    .post-card__meta { gap: 0.35rem 0.55rem; }
}

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