/* ====================================================================
   Richter — a stylesheet inspired by Max Richter's
   "The New Four Seasons – Vivaldi Recomposed" (Deutsche Grammophon, 2022)

   - Horizontal painterly gradient (forest → amber → crimson → indigo)
   - Thin, generous Inter typography (DG-style)
   - Floating transparent panes with backdrop blur
   - Faint film-grain texture
   ==================================================================== */

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

:root {
    --ink:        #0c0d10;
    --ink-soft:   #1a1c22;
    --paper:      #f6f5f0;
    --paper-warm: #efebe1;
    --rule:       rgba(255, 255, 255, 0.18);
    --rule-soft:  rgba(255, 255, 255, 0.10);

    /* Pond-light pane tints — a barely-there green/cream wash so the
       transparent panes read as light hitting water rather than glass. */
    --pane:       rgba(244, 246, 238, 0.44);
    --pane-soft:  rgba(238, 242, 232, 0.36);
    --pane-edge:  rgba(255, 255, 255, 0.36);
    --pane-tint:  linear-gradient(
                      155deg,
                      rgba(232, 238, 220, 0.30) 0%,
                      rgba(244, 246, 238, 0.12) 45%,
                      rgba(220, 232, 218, 0.26) 100%
                  );

    /* Monet pigment accents */
    --moss:       #4a6a3a;
    --sage:       #8aa67a;
    --lily-pink:  #c98a9a;
    --lily-cream: #efe8c8;

    --serif: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sans:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --tracking-wide: 0.18em;
    --tracking-mid:  0.10em;
    --tracking-tight:0.02em;
}

html, body {
    background: #0a0a0a;
    color: var(--ink);
    min-height: 100%;
    font-family: var(--sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
    letter-spacing: var(--tracking-tight);
    scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   1. THE GRADIENT — a fixed full-viewport color field
   ============================================================ */

body {
    /*
      The background is the full Richter color-field gradient. The Monet
      "canopy" strip sits ONLY at the very top edge as a thin band of
      foliage, so the page "opens" inside the painting but the rest of
      the gradient remains intact. The full Water-Lilies pond texture is
      applied as a separate fixed overlay (`.richter-pond` div) at very
      low opacity — see below — not stacked here, so it can't darken or
      desaturate the gradient bands.
    */
    background:
        linear-gradient(
            to bottom,
            #1f3a26 0%,     /* forest green (Richter) */
            #3f5430 8%,     /* mossy olive — a Monet pull-through */
            #4a5a2c 14%,    /* olive */
            #8a6a23 22%,    /* dark amber */
            #c4761b 33%,    /* burnt orange */
            #d8531c 44%,    /* vermilion */
            #c1281f 55%,    /* crimson */
            #8a1f3a 66%,    /* wine */
            #4a2761 77%,    /* indigo violet */
            #1c2a55 86%,    /* deep blue */
            #0b1226 94%,    /* near-black blue */
            #050608 100%    /* black */
        ) fixed;
    background-attachment: fixed;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Leaving must win over entered state (same specificity as two-class rule would lose). */
body.is-page-leaving,
body.is-page-entering.is-page-entered.is-page-leaving {
    opacity: 0.02;
}
body.is-page-entering { opacity: 0.02; }
body.is-page-entering.is-page-entered { opacity: 1; }

html.is-first-landing body {
    opacity: 0.01;
}

html.is-first-landing .hero-inner,
html.is-first-landing .hero-nav,
html.is-first-landing .dg-mark,
html.is-first-landing .section,
html.is-first-landing .footer {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.995);
    filter: blur(4px);
}

html.is-first-landing body.is-first-landing-done {
    opacity: 1;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-first-landing body.is-first-landing-done .hero-inner,
html.is-first-landing body.is-first-landing-done .hero-nav,
html.is-first-landing body.is-first-landing-done .dg-mark,
html.is-first-landing body.is-first-landing-done .section,
html.is-first-landing body.is-first-landing-done .footer {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-first-landing body.is-first-landing-done .hero-inner { transition-delay: 90ms; }
html.is-first-landing body.is-first-landing-done .hero-nav { transition-delay: 170ms; }
html.is-first-landing body.is-first-landing-done .dg-mark { transition-delay: 220ms; }
html.is-first-landing body.is-first-landing-done .section:nth-of-type(1) { transition-delay: 250ms; }
html.is-first-landing body.is-first-landing-done .section:nth-of-type(2) { transition-delay: 330ms; }
html.is-first-landing body.is-first-landing-done .section:nth-of-type(3) { transition-delay: 410ms; }
html.is-first-landing body.is-first-landing-done .footer { transition-delay: 470ms; }

/* The Monet canopy lives on its own fixed layer at the very top of
   the viewport, so it crowns the gradient without bleeding into it. */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 18vh;
    background: url('../resources/monet/canopy.jpg') top center / cover no-repeat;
    opacity: 0.55;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
    /* fade the bottom edge of the canopy into the gradient */
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}

.richter-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to bottom,
            #1f3a26 0%,     /* forest green */
            #4a5a2c 11%,    /* olive */
            #8a6a23 22%,    /* dark amber */
            #c4761b 33%,    /* burnt orange */
            #d8531c 44%,    /* vermilion */
            #c1281f 55%,    /* crimson */
            #8a1f3a 66%,    /* wine */
            #4a2761 77%,    /* indigo violet */
            #1c2a55 86%,    /* deep blue */
            #0b1226 94%,    /* near-black blue */
            #050608 100%    /* black */
        );
    /* very subtle blur to evoke the painterly bands */
    filter: saturate(1.05);
}

/* horizontal "scan" bands to mimic the painterly stripes */
.richter-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.00) 0px,
        rgba(255,255,255,0.025) 2px,
        rgba(0,0,0,0.025) 4px,
        rgba(255,255,255,0.00) 8px
    );
    mix-blend-mode: overlay;
    opacity: 0.55;
    pointer-events: none;
}

/* a soft horizontal blur veil, painterly */
.richter-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.10),
        rgba(0,0,0,0.00) 8%,
        rgba(0,0,0,0.00) 92%,
        rgba(0,0,0,0.20)
    );
    pointer-events: none;
}

/* ---- Monet "pond" overlay ----------------------------------------
   A second blurred Water-Lilies layer floats above the gradient at
   *very* low opacity, in `overlay` blend mode so its lighter
   brushstrokes (the lily pads catching sunlight) shimmer through the
   gradient bands without darkening them. Anchored to the upper-third
   only, where the green of the gradient meets the green of the pond. */
.richter-pond {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('../resources/monet/pond-blur.jpg') center top / 100% auto no-repeat;
    opacity: 0.22;
    mix-blend-mode: overlay;
    filter: saturate(1.25) blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 55%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 55%);
}

/* ---- Drifting lily-pad motifs ------------------------------------
   Soft, low-opacity painterly pads anchored at margins. They drift
   imperceptibly with a long, gentle keyframe so the page breathes.    */
.lily {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    background: url('../resources/monet/lily-pad.png') center / contain no-repeat;
    opacity: 0.22;
    filter: blur(0.5px) saturate(0.95);
    will-change: transform;
}
.lily.lily--tl { top: 6vh;  left: -3vw;  width: 28vw; max-width: 360px; transform: rotate(-6deg); animation: lilyDriftA 22s ease-in-out infinite alternate; }
.lily.lily--br { bottom: 18vh; right: -4vw; width: 32vw; max-width: 420px; transform: rotate(8deg);  animation: lilyDriftB 28s ease-in-out infinite alternate; opacity: 0.18; }
.lily.lily--ml { top: 55vh; left: -6vw;  width: 22vw; max-width: 300px; transform: rotate(2deg); animation: lilyDriftA 32s ease-in-out -8s infinite alternate; opacity: 0.14; }

@keyframes lilyDriftA {
    from { transform: translate(0, 0)       rotate(-6deg); }
    to   { transform: translate(1.2vw, -0.8vh) rotate(-4deg); }
}
@keyframes lilyDriftB {
    from { transform: translate(0, 0)        rotate(8deg); }
    to   { transform: translate(-1.4vw, 1vh) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .lily { animation: none !important; }
}

/* SVG film-grain overlay — drawn here to avoid an extra asset */
.richter-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   2. DG-STYLE MONOGRAM (top-right)
   ============================================================ */

.dg-mark {
    position: fixed;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 50;
    width: 84px;
    height: 84px;
    background: #f3c623;          /* DG yellow */
    border: 2px solid #f3c623;
    border-radius: 4px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dg-mark:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

.dg-mark-inner {
    background: #f3c623;
    width: 100%;
    height: 100%;
    border: 1.5px solid #2a1a05;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    color: #1a1206;
}

.dg-mark-ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid #1a1206;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px, transparent 3px,
            rgba(26,18,6,0.55) 3px, rgba(26,18,6,0.55) 4px
        );
}

.dg-mark-letters {
    font-family: var(--serif);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: #f3c623;
    padding: 1px 4px;
    line-height: 1;
}

.dg-mark-caption {
    font-family: var(--serif);
    font-size: 0.46rem;
    font-style: italic;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0.02em;
}

/* ============================================================
   3. HERO — the album-cover title block
   ============================================================ */

.hero {
    min-height: 100vh;
    padding: 0 6vw 4rem 6vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    position: relative;
}

.hero-inner {
    max-width: 720px;
    padding-bottom: 2.5rem;
}

.hero-title {
    font-family: var(--sans);
    font-weight: 200;
    font-size: clamp(2.6rem, 6vw, 5rem);
    letter-spacing: 0.005em;
    line-height: 1.05;
    color: #ffffff;
    text-shadow: 0 1px 24px rgba(0,0,0,0.25);
    margin-bottom: 1.25rem;
}

.hero-subtitle {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.hero-meta {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.hero-nav {
    display: flex;
    gap: 2.4rem;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255,255,255,0.25);
    max-width: 720px;
}

.hero-nav a {
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255,255,255,0.85);
    letter-spacing: var(--tracking-mid);
    text-transform: lowercase;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.25s ease;
}

.hero-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: rgba(255,255,255,0.95);
    transition: width 0.35s ease;
}

.hero-nav a:hover { color: #fff; }
.hero-nav a:hover::after { width: 100%; }

/* ============================================================
   4. CONTENT — floating transparent panes
   ============================================================ */

.content {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4rem 1.4rem 6rem 1.4rem;
}

.section {
    position: relative;
    margin-bottom: 5rem;
    /* layered tint: pond-light gradient sits over the translucent pane */
    background: var(--pane-tint), var(--pane);
    backdrop-filter: blur(22px) saturate(1.22);
    -webkit-backdrop-filter: blur(22px) saturate(1.22);
    border: 1px solid var(--pane-edge);
    border-radius: 2px;
    padding: 3rem clamp(1.4rem, 4vw, 3.2rem);
    box-shadow:
        0 14px 44px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.45);
    overflow: hidden;
}

/* Make sure the section's inner content sits above the wash. */
.section > * { position: relative; z-index: 1; }

.section-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: baseline;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    /* divider becomes a soft moss line, like a stem at the water line */
    border-bottom: 1px solid rgba(74, 106, 58, 0.30);
}

.section-roman {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: var(--tracking-wide);
    color: var(--moss);
    grid-row: 1 / span 2;
    align-self: center;
}

.section-title {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: 0.005em;
    color: var(--ink);
    line-height: 1.1;
}

.section-sub {
    grid-column: 2;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(0,0,0,0.55);
    letter-spacing: var(--tracking-mid);
    text-transform: lowercase;
}

/* ============================================================
   5. CARD LIST — Projects & Art entries
   ============================================================ */

.card-list {
    display: flex;
    flex-direction: column;
}

.card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: var(--ink);
    transition: padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.card:last-child { border-bottom: none; }

.card:hover {
    padding-left: 1rem;
    background: transparent;
}

.card-main { min-width: 0; }

.card-kicker {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(0,0,0,0.50);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.card-title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.45rem;
    letter-spacing: 0.005em;
}

.card-excerpt {
    font-size: 0.92rem;
    font-weight: 300;
    color: rgba(0,0,0,0.65);
    line-height: 1.6;
    max-width: 64ch;
}

.card-meta {
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(0,0,0,0.45);
    letter-spacing: 0.04em;
    white-space: nowrap;
    align-self: start;
}

.empty {
    padding: 2rem 0;
    text-align: center;
    color: rgba(0,0,0,0.4);
    font-style: italic;
    font-size: 0.92rem;
}

/* ============================================================
   6. ART TABS
   ============================================================ */

.art-tabs {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.art-tab {
    font-family: var(--sans);
    background: transparent;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(0,0,0,0.65);
    letter-spacing: var(--tracking-mid);
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.art-tab:hover { color: var(--ink); border-color: rgba(0,0,0,0.4); }

.art-tab.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ============================================================
   7. DIARY / POETRY GRID
   ============================================================ */

.diary-grid {
    display: flex;
    flex-direction: column;
}

.diary-entry {
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.diary-entry:last-child { border-bottom: none; }

.diary-entry:hover {
    padding-left: 1rem;
    background: transparent;
}

.diary-date {
    font-size: 0.72rem;
    color: rgba(0,0,0,0.45);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.diary-title {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.45rem;
    letter-spacing: 0.005em;
}

.diary-preview {
    font-size: 0.92rem;
    font-weight: 300;
    color: rgba(0,0,0,0.65);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   8. FOOTER
   ============================================================ */

.footer {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2rem 1.4rem 4rem 1.4rem;
    text-align: center;
    color: rgba(255,255,255,0.7);
    position: relative;
    z-index: 1;
}

.footer-rule {
    width: 60px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    margin: 0 auto 1.4rem auto;
}

.footer-line {
    font-size: 0.78rem;
    letter-spacing: var(--tracking-mid);
    margin-bottom: 0.35rem;
    font-weight: 300;
}

.footer-line.dim { color: rgba(255,255,255,0.45); font-size: 0.72rem; }

/* ============================================================
   9. MODAL — diary / preview reader
   ============================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(8, 8, 14, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    overflow-y: auto;
    padding: 4rem 1rem;
    animation: modalFadeIn 0.22s ease-out;
}

.modal.is-open { display: block; }
.modal.is-closing { animation: modalFadeOut 0.22s ease-out forwards; }

.modal-pane {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 2px;
    padding: clamp(2rem, 4vw, 3.2rem);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    position: relative;
    color: var(--ink);
    animation: paneIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

@keyframes paneIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(0,0,0,0.55);
    letter-spacing: var(--tracking-mid);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    text-transform: lowercase;
}

.modal-close:hover { color: var(--ink); }

.entry-title {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    margin-bottom: 0.6rem;
    color: var(--ink);
}

.entry-date {
    font-size: 0.75rem;
    color: rgba(0,0,0,0.5);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.entry-body {
    font-size: 0.97rem;
    line-height: 1.85;
    color: rgba(0,0,0,0.85);
    font-weight: 300;
}

.entry-body p { margin-bottom: 1.4rem; }
.entry-body h2 {
    font-family: var(--sans); font-weight: 400;
    font-size: 1.15rem; letter-spacing: 0.01em;
    margin: 1.8rem 0 0.7rem; color: var(--ink);
}
.entry-body h3 {
    font-family: var(--sans); font-weight: 400;
    font-size: 1rem; margin: 1.4rem 0 0.5rem;
    color: rgba(0,0,0,0.78);
}
.entry-body strong { font-weight: 500; color: var(--ink); }
.entry-body em { font-style: italic; color: rgba(0,0,0,0.78); }
.entry-body a {
    color: var(--ink);
    border-bottom: 1px solid rgba(0,0,0,0.3);
    transition: border-color 0.2s;
}
.entry-body a:hover { border-color: var(--ink); }

.entry-body--poetry {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
}

.entry-body--poetry .poetry-stanza {
    margin-bottom: 1.6rem;
    line-height: 1.9;
    letter-spacing: 0.01em;
}

.entry-body--poetry .poetry-stanza:last-child {
    margin-bottom: 0;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
    .dg-mark { width: 64px; height: 64px; top: 1rem; right: 1rem; }
    .dg-mark-ring { width: 28px; height: 28px; }
    .dg-mark-letters { font-size: 0.6rem; }
    .dg-mark-caption { font-size: 0.38rem; }

    .hero { padding: 0 5vw 3rem 5vw; }
    .hero-nav { gap: 1.4rem; flex-wrap: wrap; }

    .section { padding: 2rem 1.2rem; }
    .section-head {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .section-roman { grid-row: auto; }
    .section-sub { grid-column: 1; }

    .card {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .card-meta { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none !important; }
    .card,
    .diary-entry,
    .modal,
    .modal-pane {
        transition: none !important;
        animation: none !important;
    }
    html.is-first-landing body,
    html.is-first-landing .hero-inner,
    html.is-first-landing .hero-nav,
    html.is-first-landing .dg-mark,
    html.is-first-landing .section,
    html.is-first-landing .footer {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}