/* ==========================================================================
   bada.systems  —  light-academia digital atelier
   ========================================================================== */

@layer reset, tokens, base, components, utilities;

/* ---------- reset ---------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    input, textarea { font: inherit; color: inherit; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    a { color: inherit; text-decoration: none; }
}

/* ---------- tokens ---------- */
@layer tokens {
    :root {
        --paper: #F6F5F2;
        --marble-50: #ECEDEF;
        --marble-200: #D8DCE0;
        --stone-400: #8A9099;
        --stone-700: #3A4049;
        --ink: #1C1F24;
        --accent-azure: #5B7A99;
        --accent-brass: #B69A6B;
        --skeleton: #E4E6EA;
        --skeleton-shimmer: #F2F3F6;

        --font-display: 'Cormorant Garamond', 'Lora', Georgia, serif;
        --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
        --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

        --t-64: 0.64rem;
        --t-80: 0.8rem;
        --t-base: 1rem;
        --t-125: 1.25rem;
        --t-156: 1.563rem;
        --t-195: 1.953rem;
        --t-244: 2.441rem;
        --t-305: 3.052rem;

        --shadow-1: 0 1px 2px rgba(28, 31, 36, 0.04);
        --shadow-2: 0 6px 18px rgba(28, 31, 36, 0.08);

        --rail-w: 296px;
        --canvas-pad: 5rem;

        --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
    }
}

/* ---------- base ---------- */
@layer base {
    html { font-size: 17px; scroll-behavior: smooth; }
    body {
        background: var(--paper);
        color: var(--stone-700);
        font-family: var(--font-body);
        font-size: var(--t-base);
        line-height: 1.6;
        position: relative;
        min-height: 100vh;
        background-image:
            radial-gradient(1200px 600px at 90% -10%, rgba(91, 122, 153, 0.06), transparent 60%),
            radial-gradient(900px 500px at -10% 110%, rgba(182, 154, 107, 0.05), transparent 60%);
        background-attachment: fixed;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        color: var(--ink);
        font-weight: 500;
        line-height: 1.2;
        margin: 0;
    }
    h1 { font-size: var(--t-305); letter-spacing: -0.005em; }
    h2 { font-size: var(--t-244); letter-spacing: -0.005em; }
    h3 { font-size: var(--t-156); }
    p { margin: 0 0 1.1em; }
    em { font-style: italic; }
    strong { color: var(--ink); font-weight: 600; }

    code, pre { font-family: var(--font-mono); }

    ::selection { background: rgba(91, 122, 153, 0.22); color: var(--ink); }
}

/* ---------- components ---------- */
@layer components {

    /* skip link */
    .skip-link {
        position: absolute; top: -100px; left: 1rem; padding: 0.5rem 0.75rem;
        background: var(--paper); color: var(--ink); border: 1px solid var(--marble-200);
        font-family: var(--font-display); font-style: italic;
    }

    /* reading progress */
    .reading-progress {
        position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 50;
        background: var(--marble-200);
    }
    .reading-progress__bar { display: block; height: 100%; width: 0%; background: var(--accent-brass); transition: width 120ms linear; }

    /* drawer toggle (mobile) */
    .drawer-toggle {
        display: none;
        position: fixed; top: 0.75rem; right: 0.9rem; z-index: 60;
        align-items: center; gap: 0.4rem;
        font-family: var(--font-display); font-style: italic;
        padding: 0.45rem 0.85rem;
        border: 1px solid var(--marble-200);
        background: var(--paper);
        color: var(--ink);
    }
    .drawer-toggle__glyph { font-size: 1.25rem; line-height: 1; color: var(--accent-brass); }

    /* shell ----------------------------------------------------------------- */
    .shell {
        display: grid;
        grid-template-columns: var(--rail-w) 1fr;
        min-height: 100vh;
    }

    /* sidebar --------------------------------------------------------------- */
    .sidebar {
        background: var(--marble-50);
        border-right: 1px solid var(--marble-200);
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        overflow-y: auto;
    }
    .sidebar__inner {
        padding: 2rem 1.6rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        min-height: 100%;
    }

    .brand { display: flex; align-items: center; gap: 0.85rem; }
    .brand__mark {
        width: 44px; height: 44px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 30% 30%, #ffffff 0%, transparent 45%),
            linear-gradient(135deg, #E6E8EB, #D2D6DC);
        box-shadow: inset 0 0 0 1px rgba(28, 31, 36, 0.08), 0 1px 2px rgba(28,31,36,0.06);
        display: grid; place-items: center;
    }
    .brand__mark svg { width: 32px; height: 32px; }
    .brand__text { display: flex; flex-direction: column; line-height: 1.15; }
    .brand__name { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); letter-spacing: -0.005em; }
    .brand__tag { font-family: var(--font-body); font-style: italic; font-size: 0.8rem; color: var(--stone-400); }

    /* search */
    .search {
        position: relative;
        border-top: 1px solid var(--marble-200);
        border-bottom: 1px solid var(--marble-200);
        padding: 0.5rem 0;
    }
    .search__input {
        width: 100%;
        background: transparent;
        border: 0;
        padding: 0.45rem 3rem 0.45rem 0;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.1rem;
        color: var(--ink);
        outline: none;
    }
    .search__input::placeholder { color: var(--stone-400); font-style: italic; }
    .search__kbd {
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--stone-400);
        border: 1px solid var(--marble-200);
        padding: 1px 6px;
        background: var(--paper);
    }

    /* nav */
    .nav__heading {
        font-family: var(--font-body);
        font-variant-caps: all-small-caps;
        letter-spacing: 0.12em;
        font-size: 0.72rem;
        color: var(--stone-400);
        margin: 0 0 0.6rem;
    }
    .nav__list { display: flex; flex-direction: column; gap: 0.05rem; }
    .nav__item {
        position: relative;
        display: flex; align-items: baseline; gap: 0.7rem;
        padding: 0.45rem 0.6rem 0.45rem 1rem;
        font-family: var(--font-display);
        font-size: 1.05rem;
        color: var(--stone-700);
        transition: background-color 200ms var(--ease-out), color 160ms ease;
    }
    .nav__item::before {
        content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
        background: var(--accent-brass);
        transform: scaleY(0); transform-origin: top;
        transition: transform 220ms var(--ease-out);
    }
    .nav__item:hover { color: var(--ink); }
    .nav__item:hover::before { transform: scaleY(0.6); }
    .nav__item.is-active { background: rgba(216, 220, 224, 0.45); color: var(--ink); }
    .nav__item.is-active::before { transform: scaleY(1); }
    .nav__num {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-brass);
        font-size: 0.85rem;
        min-width: 1.4rem;
    }
    .nav__label { flex: 1; }

    .nav--minor { margin-top: 0.4rem; }
    .nav--minor .nav__item { font-size: 0.92rem; padding: 0.3rem 0.6rem 0.3rem 1rem; color: var(--stone-400); }
    .nav--minor .nav__item:hover { color: var(--stone-700); }
    .nav--minor .nav__item.is-active { background: transparent; color: var(--ink); }
    .nav--minor .nav__num { color: var(--marble-200); }

    /* sidebar foot */
    .sidebar__foot {
        margin-top: auto;
        padding-top: 1.4rem;
        border-top: 1px solid var(--marble-200);
        font-size: 0.78rem;
        color: var(--stone-400);
    }
    .sidebar__line { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.25rem; }
    .sidebar__key { font-variant-caps: all-small-caps; letter-spacing: 0.1em; }
    .sidebar__val { font-family: var(--font-display); font-style: italic; color: var(--stone-700); }
    .sidebar__fleuron { text-align: center; color: var(--accent-brass); font-size: 1.1rem; margin: 0.6rem 0 0; }

    /* canvas ---------------------------------------------------------------- */
    .canvas {
        position: relative;
        padding: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .meta-bar {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: 0.9rem var(--canvas-pad);
        border-bottom: 1px solid var(--marble-200);
        font-size: 0.82rem;
        color: var(--stone-400);
        background: rgba(246, 245, 242, 0.85);
        backdrop-filter: blur(6px);
        position: sticky; top: 0; z-index: 20;
    }
    .breadcrumb { margin: 0; font-variant-caps: all-small-caps; letter-spacing: 0.12em; }
    .breadcrumb__sep { margin: 0 0.6rem; color: var(--marble-200); }
    .meta-bar__date { margin: 0; font-family: var(--font-display); font-style: italic; }

    main {
        display: block;
        padding: 0 var(--canvas-pad) 6rem;
        max-width: 1180px;
        margin: 0 auto;
    }

    .section {
        position: relative;
        padding: 5rem 0 4rem;
        max-width: 72ch;
    }
    .section__head { margin-bottom: 2.4rem; }
    .eyebrow {
        font-variant-caps: all-small-caps; letter-spacing: 0.16em;
        color: var(--accent-brass);
        font-size: 0.78rem;
        margin: 0 0 0.6rem;
    }
    .dek {
        font-family: var(--font-body);
        font-style: italic;
        font-size: var(--t-125);
        color: var(--stone-400);
        line-height: 1.55;
        margin-top: 0.6rem;
    }

    .section-mark {
        position: absolute;
        left: -3.4rem; top: 5.4rem;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.1rem;
        color: var(--accent-brass);
        margin: 0;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
    }
    .section.is-visible .section-mark { opacity: 1; transform: translateY(0); }

    .fleuron {
        text-align: center; color: var(--accent-brass); font-size: 1.4rem; margin: 0 0 1.2rem;
    }

    .rule {
        border: 0;
        height: 1px;
        background: var(--marble-200);
        margin: 0;
        max-width: 72ch;
    }
    .rule--fleuron {
        background: transparent;
        text-align: center;
        height: auto;
        position: relative;
        margin: 1rem 0;
    }
    .rule--fleuron::before {
        content: "✦  ✦  ✦";
        font-family: var(--font-display);
        color: var(--accent-brass);
        letter-spacing: 0.6em;
        font-size: 0.7rem;
    }

    /* frontispiece ---------------------------------------------------------- */
    .section--frontispiece {
        padding-top: 6rem;
        max-width: none;
    }
    .marble-panel {
        position: absolute;
        inset: 1.2rem -3rem auto auto;
        width: min(640px, 60%);
        height: 420px;
        z-index: 0;
        opacity: 0.55;
        background:
            radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.9), transparent 60%),
            radial-gradient(ellipse at 80% 80%, rgba(91, 122, 153, 0.18), transparent 65%),
            radial-gradient(ellipse at 60% 20%, rgba(182, 154, 107, 0.10), transparent 70%),
            linear-gradient(135deg, #ECEDEF 0%, #E2E5E9 50%, #ECEDEF 100%);
        clip-path: polygon(8% 0, 100% 0, 100% 88%, 92% 100%, 0 100%, 0 12%);
    }
    .marble-panel::before, .marble-panel::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
    }
    .marble-panel::before {
        background:
            radial-gradient(circle at 30% 40%, rgba(91,122,153,0.18) 0%, transparent 30%),
            radial-gradient(circle at 70% 60%, rgba(58,64,73,0.10) 0%, transparent 35%),
            radial-gradient(circle at 50% 80%, rgba(91,122,153,0.10) 0%, transparent 30%);
        mix-blend-mode: multiply;
    }
    .marble-panel::after {
        background-image:
            linear-gradient(115deg, transparent 40%, rgba(91,122,153,0.10) 41%, transparent 42%),
            linear-gradient(110deg, transparent 60%, rgba(58,64,73,0.08) 61%, transparent 62%),
            linear-gradient(120deg, transparent 25%, rgba(182,154,107,0.07) 26%, transparent 27%);
        mix-blend-mode: multiply;
    }

    .display-title {
        position: relative; z-index: 2;
        font-size: clamp(2.6rem, 6vw, 4.4rem);
        line-height: 1.05;
        letter-spacing: -0.01em;
        font-weight: 400;
        margin: 0 0 1.2rem;
    }
    .display-title__line { display: block; }
    .display-title__line--em { color: var(--accent-azure); font-style: italic; }

    .frontispiece__actions {
        position: relative; z-index: 2;
        display: flex; flex-wrap: wrap; gap: 0.8rem;
        margin-top: 1.6rem;
    }
    .cta {
        display: inline-flex; align-items: center; gap: 0.6rem;
        padding: 0.7rem 1.2rem;
        font-family: var(--font-display);
        font-size: 1.05rem;
        border: 1px solid var(--marble-200);
        background: var(--paper);
        color: var(--ink);
        transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
    }
    .cta--primary {
        background: var(--ink); color: var(--paper); border-color: var(--ink);
    }
    .cta--primary:hover { background: var(--accent-azure); border-color: var(--accent-azure); }
    .cta--ghost:hover { color: var(--accent-azure); border-color: var(--accent-azure); }

    .frontispiece__stats {
        position: relative; z-index: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.4rem;
        margin: 3rem 0 0;
        max-width: 640px;
        padding-top: 1.2rem;
        border-top: 1px solid var(--marble-200);
    }
    .frontispiece__stats > div { display: flex; flex-direction: column; gap: 0.2rem; }
    .frontispiece__stats dt {
        font-variant-caps: all-small-caps; letter-spacing: 0.1em;
        color: var(--stone-400); font-size: 0.78rem;
    }
    .frontispiece__stats dd {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--t-195);
        color: var(--ink);
    }

    /* library --------------------------------------------------------------- */
    .filter-bar {
        display: flex; flex-wrap: wrap; gap: 0.4rem;
        margin: 1.2rem 0 2rem;
    }
    .chip {
        padding: 0.35rem 0.85rem;
        font-family: var(--font-display);
        font-size: 0.95rem;
        border: 1px solid var(--marble-200);
        background: transparent;
        color: var(--stone-700);
        transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .chip:hover { color: var(--ink); border-color: var(--stone-400); }
    .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        max-width: none;
    }
    .card {
        position: relative;
        background: var(--paper);
        border: 1px solid var(--marble-200);
        padding: 1.6rem 1.4rem 1.4rem;
        box-shadow: var(--shadow-1);
        transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms ease;
        overflow: hidden;
    }
    .card::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
        background:
            radial-gradient(ellipse at 80% 20%, rgba(91,122,153,0.10), transparent 60%),
            linear-gradient(140deg, transparent 60%, rgba(182,154,107,0.06) 100%);
        transition: opacity 240ms ease;
    }
    .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
    .card:hover::before { opacity: 1; }
    .card.is-hidden { display: none; }
    .card.is-entering { animation: card-in 360ms var(--ease-out) both; }

    .card__num {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-brass);
        font-size: 0.8rem;
        margin: 0 0 0.6rem;
        letter-spacing: 0.04em;
    }
    .card__title {
        font-family: var(--font-display);
        font-size: 1.45rem;
        font-weight: 500;
        color: var(--ink);
        margin: 0 0 0.6rem;
        line-height: 1.2;
    }
    .card__meta {
        font-size: 0.82rem;
        color: var(--stone-400);
        margin: 0 0 0.8rem;
    }
    .small-caps {
        font-variant-caps: all-small-caps;
        letter-spacing: 0.1em;
    }
    .card__excerpt { font-size: 0.95rem; color: var(--stone-700); margin: 0 0 1rem; }
    .card__more {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-azure);
        font-size: 0.95rem;
        margin: 0;
        transition: color 180ms ease;
    }
    .card:hover .card__more { color: var(--ink); }

    @keyframes card-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* skeleton */
    .skeleton-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
        opacity: 0;
        transition: opacity 240ms ease;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
    }
    .skeleton-row.is-loading {
        opacity: 1;
        max-height: 600px;
        pointer-events: auto;
    }
    .skeleton {
        background: var(--paper);
        border: 1px solid var(--marble-200);
        padding: 1.6rem 1.4rem;
        display: flex; flex-direction: column; gap: 0.55rem;
    }
    .skel-line {
        display: block; height: 12px; border-radius: 1px;
        background: linear-gradient(
            90deg,
            var(--skeleton) 0%,
            var(--skeleton) 25%,
            var(--skeleton-shimmer) 50%,
            var(--skeleton) 75%,
            var(--skeleton) 100%
        );
        background-size: 220% 100%;
        animation: shimmer 1.6s linear infinite;
    }
    .skel-line.short { width: 60%; }
    .skel-line--num { width: 30%; height: 8px; }
    .skel-line--title { height: 22px; }
    @keyframes shimmer {
        from { background-position: 110% 0; }
        to { background-position: -110% 0; }
    }

    .status-line {
        margin-top: 1.6rem;
        font-family: var(--font-display);
        font-style: italic;
        color: var(--stone-400);
        font-size: 0.95rem;
    }

    /* feature article ------------------------------------------------------- */
    .article {
        font-size: 1.06rem;
        max-width: 68ch;
    }
    .article__lede { font-size: 1.18rem; line-height: 1.55; color: var(--stone-700); }
    .drop-cap {
        float: left;
        font-family: var(--font-display);
        font-size: 4.5rem;
        line-height: 0.85;
        color: var(--ink);
        margin: 0.35rem 0.7rem 0 0;
        padding-bottom: 0.1rem;
        border-bottom: 1px solid var(--accent-brass);
    }
    .article__h3 {
        font-family: var(--font-display);
        font-size: 1.35rem;
        margin: 2.2rem 0 0.7rem;
        color: var(--ink);
        font-weight: 500;
    }
    .article__close {
        font-family: var(--font-display);
        color: var(--stone-400);
        margin-top: 2rem;
    }

    .figure {
        margin: 2.4rem -0.5rem;
        border: 1px solid var(--marble-200);
        background: var(--paper);
        padding: 1.4rem 1.4rem 1rem;
    }
    .figure__diagram { background: var(--marble-50); padding: 1rem; border-radius: 1px; }
    .figure__diagram svg { width: 100%; height: auto; }
    .figure figcaption {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--stone-400);
        margin-top: 0.8rem;
        font-size: 0.95rem;
    }

    .code {
        font-family: var(--font-mono);
        font-size: 0.88rem;
        background: var(--marble-50);
        border-left: 2px solid var(--accent-azure);
        padding: 1rem 1.2rem;
        line-height: 1.55;
        white-space: pre;
        overflow-x: auto;
        color: var(--stone-700);
    }
    .c-meta { color: var(--stone-400); font-style: italic; }
    .c-kw { color: var(--accent-azure); }
    .c-fn { color: var(--ink); }
    .c-num { color: var(--accent-brass); }
    .c-str { color: #6f7f5f; }

    .callout {
        margin: 2.4rem 0;
        padding: 1.2rem 1.4rem;
        border-left: 2px solid var(--accent-brass);
        background: var(--marble-50);
    }
    .callout__label { color: var(--accent-brass); margin: 0 0 0.4rem; font-size: 0.78rem; }

    /* notes ----------------------------------------------------------------- */
    .notes-list {
        display: flex; flex-direction: column; gap: 0;
        border-top: 1px solid var(--marble-200);
    }
    .note {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: 1.5rem;
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--marble-200);
        align-items: baseline;
    }
    .note__date {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-brass);
        font-size: 0.95rem;
    }
    .note__year { color: var(--stone-400); font-style: normal; font-size: 0.78rem; display: block; letter-spacing: 0.1em; }
    .note__body { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--stone-700); }

    /* colophon -------------------------------------------------------------- */
    .colophon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin: 1rem 0 2.4rem;
    }
    .colophon-card {
        background: var(--marble-50);
        border: 1px solid var(--marble-200);
        padding: 1.4rem 1.2rem;
        display: flex; flex-direction: column; gap: 0.7rem;
    }
    .colophon-card__label { color: var(--accent-brass); font-size: 0.78rem; }
    .colophon-card__sample { font-size: 1.8rem; line-height: 1.05; color: var(--ink); margin: 0; }
    .colophon-card__note { font-size: 0.86rem; color: var(--stone-400); margin: 0; line-height: 1.5; }

    .swatches {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 0.5rem;
        margin: 1rem 0 0;
    }
    .swatch {
        display: flex; align-items: center; gap: 0.7rem;
        padding: 0.6rem 0.7rem;
        border: 1px solid var(--marble-200);
        background: var(--paper);
    }
    .swatch__chip {
        width: 28px; height: 28px; border-radius: 1px;
        box-shadow: inset 0 0 0 1px rgba(28,31,36,0.06);
    }
    .swatch__name { font-family: var(--font-display); flex: 1; color: var(--ink); font-size: 0.95rem; }
    .swatch__hex { font-family: var(--font-mono); font-size: 0.78rem; color: var(--stone-400); }

    /* correspondence -------------------------------------------------------- */
    .letter {
        background: var(--paper);
        border: 1px solid var(--marble-200);
        padding: 2rem 2rem 1.6rem;
        background-image:
            linear-gradient(transparent 95%, var(--marble-50) 95%);
        background-size: 100% 1.6rem;
        background-position: 0 1.2rem;
        font-size: 1.05rem;
        line-height: 1.6;
    }
    .letter__open {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.25rem;
        color: var(--ink);
        margin: 0 0 1.2rem;
    }
    .letter__line { margin: 0 0 1rem; color: var(--stone-700); }
    .letter__field {
        display: inline-block;
        border: 0;
        border-bottom: 1px solid var(--marble-200);
        background: transparent;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--ink);
        padding: 0 0.2rem;
        min-width: 9rem;
        outline: none;
        transition: border-color 200ms ease;
    }
    .letter__field:focus { border-color: var(--accent-azure); }
    .letter__label {
        display: block;
        font-variant-caps: all-small-caps;
        letter-spacing: 0.12em;
        color: var(--stone-400);
        font-size: 0.8rem;
        margin: 1.4rem 0 0.4rem;
    }
    .letter__body {
        width: 100%;
        border: 1px solid var(--marble-200);
        background: var(--paper);
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--stone-700);
        padding: 0.9rem 1rem;
        resize: vertical;
        outline: none;
        transition: border-color 200ms ease;
    }
    .letter__body:focus { border-color: var(--accent-azure); }
    .letter__foot {
        margin-top: 1.4rem;
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        flex-wrap: wrap;
    }
    .letter__seal {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-brass);
        margin: 0;
        font-size: 1rem;
    }
    .letter__seal span { color: var(--stone-400); margin-left: 0.3rem; }
    .letter__status {
        margin: 1rem 0 0;
        font-family: var(--font-display);
        font-style: italic;
        color: var(--accent-azure);
        min-height: 1.4em;
    }

    /* page foot ------------------------------------------------------------- */
    .page-foot {
        margin-top: 5rem;
        padding-top: 2rem;
        border-top: 1px solid var(--marble-200);
        font-size: 0.86rem;
        color: var(--stone-400);
    }
    .page-foot__line { margin: 0 0 0.4rem; }
    .page-foot__line--quiet { font-family: var(--font-display); font-style: italic; color: var(--stone-700); }
}

/* ---------- utilities & responsive ---------- */
@layer utilities {

    @media (max-width: 1100px) {
        :root { --canvas-pad: 3rem; }
        .marble-panel { width: 80%; height: 320px; }
    }

    @media (max-width: 900px) {
        .shell { grid-template-columns: 1fr; }
        .sidebar {
            position: fixed;
            left: 0; top: 0; bottom: 0;
            width: min(320px, 86vw);
            transform: translateX(-100%);
            transition: transform 280ms var(--ease-out);
            z-index: 70;
            box-shadow: 0 0 60px rgba(28,31,36,0.18);
        }
        .sidebar.is-open { transform: translateX(0); }
        .drawer-toggle { display: inline-flex; }
        :root { --canvas-pad: 1.4rem; }
        .section-mark { display: none; }
        .section { padding: 3.5rem 0 2.5rem; }
        h1 { font-size: 2.4rem; }
        h2 { font-size: 2rem; }
        .marble-panel { display: none; }
        .meta-bar { padding: 0.8rem 1.4rem 0.8rem 4rem; }
        .frontispiece__stats { grid-template-columns: 1fr; gap: 0.8rem; }
    }

    @media (max-width: 540px) {
        .note { grid-template-columns: 1fr; gap: 0.4rem; }
        .figure { margin: 1.6rem 0; }
        .letter { padding: 1.4rem 1.2rem; }
    }
}