/*
 * mysterious.day — coastal-keeper's leather notebook
 * Palette:
 *   #F2ECDD  salt paper
 *   #E5DBC4  driftwood
 *   #7C8A93  fog blue (body prose)
 *   #2E3A40  low-tide ink
 *   #9C7B4A  candle amber
 *   #3F2E22  wet leather (backdrop)
 *   #B6A584  sand wash (cursor particles)
 */

:root {
    --salt-paper: #F2ECDD;
    --driftwood: #E5DBC4;
    --fog-blue: #7C8A93;
    --low-tide-ink: #2E3A40;
    --candle-amber: #9C7B4A;
    --wet-leather: #3F2E22;
    --sand-wash: #B6A584;
}

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

html, body {
    width: 100%;
    min-height: 100vh;
}

body {
    background-color: var(--wet-leather);
    /* Hand-photographed bookbinder's leather rendered as layered SVG noise + crease */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 230, 200, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 220, 180, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(63, 46, 34, 0) 50%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(135deg, transparent 49.6%, rgba(0, 0, 0, 0.10) 49.8%, transparent 50.2%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.247  0 0 0 0 0.181  0 0 0 0 0.133  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='960' height='960'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.018' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)' opacity='0.7'/></svg>");
    background-size: 420px 420px, 100% 100%, 100% 100%, 100% 100%, 420px 420px, cover;
    background-attachment: fixed;
    background-blend-mode: normal, normal, multiply, normal, multiply, multiply;

    color: var(--fog-blue);
    font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    line-height: 1.78;
    overflow-x: hidden;
    min-height: 100vh;
    padding: 96px 24px 96px;
}

/* Particle canvas: above content, below text via mix-blend-mode + pointer-events none */
#particle-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 5;
}

/* Paper sheet: 620 px column, soft drop shadow, deckled long edges */
.paper {
    position: relative;
    width: 100%;
    max-width: 760px; /* 620 reading column + 70 px breathing margin each side */
    margin: 0 auto;
    background-color: var(--salt-paper);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.55  0 0 0 0 0.41  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
    background-size: 320px 320px;
    padding: 88px 70px 72px;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
    z-index: 2;
    /* Deckle long edges: faint vertical SVG mask, not a wavy border */
    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0,
            rgba(0, 0, 0, 0.85) 4px,
            #000 10px,
            #000 calc(100% - 10px),
            rgba(0, 0, 0, 0.85) calc(100% - 4px),
            transparent 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='1200' preserveAspectRatio='none'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='0.02 1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.4'/></filter><rect width='100%25' height='100%25' filter='url(%23d)'/></svg>");
    -webkit-mask-size: 100% 100%, 12px 100%;
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-repeat: no-repeat, repeat-y;
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,
            transparent 0,
            rgba(0, 0, 0, 0.85) 4px,
            #000 10px,
            #000 calc(100% - 10px),
            rgba(0, 0, 0, 0.85) calc(100% - 4px),
            transparent 100%);
    mask-size: 100% 100%;
    mask-position: 0 0;
    mask-repeat: no-repeat;
}

.entry {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    position: relative;
}

/* Header zone */
.entry-header {
    text-align: center;
    margin-bottom: 80px;
}

.monogram {
    display: inline-block;
    line-height: 0;
    margin-bottom: 24px;
}

.monogram svg {
    display: block;
    max-width: 64px;
    height: auto;
}

.date-stamp {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--candle-amber);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 28px;
}

.epigraph {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    color: var(--fog-blue);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
    opacity: 0.85;
}

/* Title */
.entry-title {
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 28px;
    font-weight: 500;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--low-tide-ink);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 18px;
}

.title-flourish {
    text-align: center;
    line-height: 0;
    margin-bottom: 40px;
    opacity: 0.7;
}

.title-flourish svg {
    display: inline-block;
}

/* Prose */
.prose {
    color: var(--fog-blue);
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.005em;
    text-align: left;
    position: relative;
}

.prose p {
    text-indent: 1em;
    margin: 0;
    /* Letterpress baseline imperfection: first line 2 px off-grid */
    padding-top: 2px;
}

.prose p + p {
    text-indent: 1em;
    padding-top: 2px;
}

.prose p:first-child {
    text-indent: 0;
}

/* Marginal annotation (desktop, > 900 px) */
.margin-note {
    position: absolute;
    left: calc(100% + 40px);
    width: 200px;
    max-width: 200px;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    color: var(--low-tide-ink);
    opacity: 0.6;
    text-indent: 0;
    padding-top: 0;
}

.margin-note[data-anchor="2"] {
    top: 6.2em;
}

.margin-note[data-anchor="4"] {
    top: 22em;
}

/* Section break (asterism) */
.asterism {
    text-align: center;
    margin: 32px 0;
    line-height: 0;
    opacity: 0.7;
}

.asterism svg {
    display: inline-block;
}

/* Entry-end dot */
.end-dot {
    text-align: center;
    margin-top: 32px;
    line-height: 0;
}

.end-dot svg {
    display: inline-block;
    opacity: 0.85;
}

/* Footer */
.entry-footer {
    margin-top: 88px;
    text-align: center;
}

.hairline {
    border: 0;
    height: 1px;
    background: var(--low-tide-ink);
    opacity: 0.30;
    width: 100%;
    margin: 0 0 24px;
}

.footer-glyphs {
    line-height: 0;
    margin-bottom: 28px;
    opacity: 0.7;
}

.footer-glyphs svg {
    display: inline-block;
}

.day-nav {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 16px;
    color: var(--fog-blue);
    line-height: 1.6;
}

.day-link {
    color: var(--fog-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 200ms ease, color 200ms ease;
}

.day-link:hover {
    border-bottom-color: var(--fog-blue);
}

.day-link.active {
    color: var(--candle-amber);
}

.day-link.active:hover {
    border-bottom-color: var(--candle-amber);
}

.interpunct {
    color: var(--fog-blue);
    margin: 0 8px;
    opacity: 0.7;
}

/* Responsive: marginalia collapse to inline on narrow screens */
@media (max-width: 900px) {
    body {
        padding: 48px 12px;
    }

    .paper {
        padding: 56px 32px 56px;
    }

    .margin-note {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        margin: 16px 0 16px;
        padding-left: 0;
        opacity: 0.6;
        text-align: left;
        text-indent: 0;
        font-size: 16px;
        line-height: 1.55;
    }

    .margin-note::before {
        content: "— ";
    }

    .margin-note em::before {
        content: "";
    }

    .margin-note em {
        font-style: italic;
    }

    .prose {
        font-size: 17px;
        line-height: 30px;
    }

    .entry-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    body {
        padding: 32px 0;
    }

    .paper {
        padding: 44px 24px 44px;
        max-width: 100%;
    }

    .entry-header {
        margin-bottom: 56px;
    }

    .epigraph {
        font-size: 16px;
    }

    .entry-title {
        font-size: 22px;
    }

    .date-stamp {
        font-size: 10px;
        letter-spacing: 0.16em;
    }
}

/* Reduce motion: particle layer suppressed via JS, but also CSS hide */
@media (prefers-reduced-motion: reduce) {
    #particle-layer {
        display: none;
    }
    .day-link {
        transition: none;
    }
}