/* =====================================================================
   THE FATHOM CODEX — mystical.boo
   Palette: ocean-deep ink on bone parchment.
   Typography: EB Garamond (body), Cormorant SC (small caps),
               UnifrakturMaguntia (drop-caps only).
   Implementation note: an `IntersectionObserver` in script.js is used to
   detect when each folio's top crosses the viewport top, fading in the
   pale-gold Roman folio number bottom-right.
   ===================================================================== */

:root {
    --abyssal-ink:      #0E1822;
    --ocean-ink:        #1A2730;
    --storm-blue:       #2C4654;
    --plate-blue:       #3F6B7C;
    --bone-parchment:   #F0E6D0;
    --aged-margin:      #E6DAB8;
    --pale-gold:        #C7B58A;
    --rubric-red:       #7F2A1F;
    --vellum-shadow:    #ECDFC4;
    --page-tint:        var(--bone-parchment);

    --frame-outer-offset: 24px;
    --frame-inner-offset: 56px;

    --col-max: clamp(48ch, 56vw, 64ch);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--page-tint);
    color: var(--ocean-ink);
    font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
    font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "onum" 1, "kern" 1;
    font-variant-numeric: oldstyle-nums;
    transition: background-color 240ms ease;
    overflow-x: hidden;
}

body {
    /* Outer pale-gold rule + inner ocean-ink rule, drawn entirely with inset box-shadows */
    box-shadow:
        inset 0 0 0 0.75px var(--pale-gold),
        inset var(--frame-outer-offset) var(--frame-outer-offset) 0 -23.25px var(--pale-gold),
        inset calc(var(--frame-outer-offset) * -1) calc(var(--frame-outer-offset) * -1) 0 -23.25px var(--pale-gold),
        inset 0 0 0 0px transparent;
    /* The above approximations get refined by the dedicated frame layers below. */
    min-height: 100vh;
    position: relative;
}

/* Two ruled frames drawn as fixed pseudo-element borders */
body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 50;
}

body::before {
    /* Outer pale-gold hairline frame at 24px from each edge */
    top: var(--frame-outer-offset);
    right: var(--frame-outer-offset);
    bottom: var(--frame-outer-offset);
    left: var(--frame-outer-offset);
    border: 0.75px solid var(--pale-gold);
}

body::after {
    /* Inner ocean-ink frame at 56px from each edge */
    top: var(--frame-inner-offset);
    right: var(--frame-inner-offset);
    bottom: var(--frame-inner-offset);
    left: var(--frame-inner-offset);
    border: 1.25px solid var(--ocean-ink);
}

/* Corner mitres */
.mitre {
    position: fixed;
    width: 12px;
    height: 12px;
    z-index: 51;
    pointer-events: none;
}
.mitre-tl { top: 22px; left: 22px; }
.mitre-tr { top: 22px; right: 22px; transform: scaleX(-1); }
.mitre-bl { bottom: 22px; left: 22px; transform: scaleY(-1); }
.mitre-br { bottom: 22px; right: 22px; transform: scale(-1, -1); }

/* =====================================================================
   CANDLE — top-right, fixed, listens to network heartbeat
   ===================================================================== */

.candle {
    position: fixed;
    top: 70px;
    right: 80px;
    z-index: 60;
    width: 56px;
    height: 96px;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(14, 24, 34, 0.18));
}

#candleFlame {
    transform-origin: 32px 26px;
    transform-box: fill-box;
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.candle.guttering #candleFlame {
    animation: gutter 180ms ease-in-out 0s 2;
}

@keyframes gutter {
    0%   { transform: translateX(0)   skewX(0deg)  scaleY(1); opacity: 1; }
    25%  { transform: translateX(-6px) skewX(-22deg) scaleY(0.55); opacity: 0.6; }
    50%  { transform: translateX(0)   skewX(0deg)  scaleY(0.2); opacity: 0.2; }
    75%  { transform: translateX(4px) skewX(14deg) scaleY(0.65); opacity: 0.7; }
    100% { transform: translateX(0)   skewX(0deg)  scaleY(1); opacity: 1; }
}

/* =====================================================================
   CODEX — single full-bleed scrolling document
   ===================================================================== */

.codex {
    position: relative;
    z-index: 1;
    padding-top: 70px;
    padding-bottom: 70px;
}

.codex-title-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.folio {
    position: relative;
    min-height: 100vh;
    padding: 64px 96px;
    border-bottom: 1px solid transparent;
    background: var(--page-tint);
    transition: background-color 240ms ease;
}

/* Cross-rule between folios (vertical scroll = page turn) */
.folio + .folio::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--ocean-ink);
    opacity: 0.55;
    margin: -32px 0 32px;
    position: relative;
}

.folio + .folio::after {
    content: "✤";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--page-tint);
    padding: 0 12px;
    color: var(--ocean-ink);
    font-size: 16px;
    line-height: 1;
}

.folio-inner {
    max-width: 920px;
    margin: 0 auto;
    position: relative;
}

.folio-heading {
    font-family: "Cormorant SC", "EB Garamond", serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--ocean-ink);
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.folio-heading .folio-num {
    color: var(--pale-gold);
    letter-spacing: 0.3em;
    font-size: 11px;
}

.folio-heading .folio-name {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-variant: normal;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 22px;
    font-weight: 500;
}

.text-column {
    max-width: var(--col-max);
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
    /* ragged-right, never justified */
    text-align-last: left;
    hyphens: none;
}

.text-column p {
    margin: 0 0 1.4em;
}

em {
    font-style: italic;
    color: var(--ocean-ink);
}

.rubric {
    color: var(--rubric-red);
    font-weight: 500;
    font-style: normal;
}

/* =====================================================================
   FOLIO I — FRONTISPIECE
   ===================================================================== */

.folio-i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.folio-i .folio-inner {
    text-align: center;
}

.frontispiece {
    position: relative;
    margin-bottom: 64px;
    padding: 60px 40px;
}

.cartouche-frontis {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.frontis-title {
    font-family: "UnifrakturMaguntia", "EB Garamond", serif;
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 400;
    color: var(--ocean-ink);
    margin: 0 0 18px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.frontis-sub {
    font-family: "Cormorant SC", "EB Garamond", serif;
    font-size: 12px;
    letter-spacing: 0.32em;
    color: var(--ocean-ink);
    margin: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hydrophone-diagram {
    margin: 48px auto;
    max-width: 400px;
}

.hydrophone-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

.colophon-mark {
    margin: 64px 0 0;
    font-family: "Cormorant SC", serif;
    font-size: 11px;
    letter-spacing: 0.32em;
}

.domain-mark {
    color: var(--pale-gold);
}

/* =====================================================================
   FOLIO II — DROP CAP, VENN, MARGINALIA
   ===================================================================== */

.dropcap-para {
    position: relative;
    min-height: 7em;
}

.dropcap {
    font-family: "UnifrakturMaguntia", serif;
    font-size: 7em;
    line-height: 0.85;
    float: left;
    color: var(--pale-gold);
    margin: 0.05em 0.12em -0.1em 0;
    text-shadow:
        0.5px 0 0 var(--ocean-ink),
        -0.5px 0 0 var(--ocean-ink),
        0 0.5px 0 var(--ocean-ink),
        0 -0.5px 0 var(--ocean-ink);
    user-select: none;
}

.dropcap-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.venn-diagram {
    margin: 36px auto;
    max-width: 360px;
}

.venn-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Marginalia in the running-glossa strip */
.marginalia {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    opacity: 0.55;
    transition: opacity 600ms ease;
    z-index: 2;
}

.marginalia-left {
    left: 36px;
}

.marginalia-right {
    right: 36px;
}

.marginalia svg {
    width: 100%;
    height: 100%;
    display: block;
}

.marginalia.bloomed {
    opacity: 1;
}

.manicule path,
.fleuron-margin path {
    transition: stroke-dashoffset 600ms ease, stroke 400ms ease;
}

.manicule.bloomed path {
    stroke: var(--plate-blue);
}

/* =====================================================================
   FOLIO III — CATALOGUE
   ===================================================================== */

.catalogue {
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.cat-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.cat-entry:nth-child(even) {
    grid-template-columns: 1fr 1fr;
}

.cat-entry:nth-child(even) .cat-plate {
    order: 2;
}

.cat-plate {
    position: relative;
    aspect-ratio: 320 / 200;
    width: 100%;
    overflow: visible;
}

.cat-cartouche {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.duotone-photo {
    position: absolute;
    inset: 8px;
    z-index: 1;
    background-color: var(--vellum-shadow);
    background-blend-mode: multiply;
}

.plate-num {
    position: absolute;
    bottom: -22px;
    right: 0;
    font-family: "Cormorant SC", serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--ocean-ink);
    z-index: 3;
}

/* Bleed direction by class */
.cat-entry[data-class="deep"] .duotone-photo  { bottom: -6px; }
.cat-entry[data-class="signal"] .duotone-photo { right: -6px; }
.cat-entry[data-class="passage"] .duotone-photo { top: -6px; }

/* =====================================================================
   DUOTONE PHOTO PLATES — drawn purely with CSS gradients (no external imagery).
   Each is a small composed scene, mapped to bone+ocean ramp.
   ===================================================================== */

.router-photo {
    background:
        /* LED dots */
        radial-gradient(circle at 22% 64%, var(--abyssal-ink) 1.5px, transparent 2px),
        radial-gradient(circle at 30% 64%, var(--abyssal-ink) 1.5px, transparent 2px),
        radial-gradient(circle at 38% 64%, var(--abyssal-ink) 1.5px, transparent 2px),
        radial-gradient(circle at 46% 64%, var(--abyssal-ink) 1.5px, transparent 2px),
        /* antenna */
        linear-gradient(90deg, transparent 78%, var(--abyssal-ink) 78%, var(--abyssal-ink) 79%, transparent 79%),
        linear-gradient(90deg, transparent 86%, var(--abyssal-ink) 86%, var(--abyssal-ink) 87%, transparent 87%),
        /* router body */
        linear-gradient(180deg, var(--vellum-shadow) 0 30%, var(--storm-blue) 30% 78%, var(--abyssal-ink) 78% 100%),
        var(--vellum-shadow);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.payphone-photo {
    background:
        /* receiver curve */
        radial-gradient(ellipse 30% 8% at 50% 18%, var(--abyssal-ink) 30%, transparent 60%),
        radial-gradient(ellipse 6% 14% at 32% 28%, var(--abyssal-ink) 40%, transparent 70%),
        radial-gradient(ellipse 6% 14% at 68% 28%, var(--abyssal-ink) 40%, transparent 70%),
        /* coin slot shadow */
        linear-gradient(180deg, transparent 60%, var(--storm-blue) 70%, var(--abyssal-ink) 100%),
        linear-gradient(180deg, var(--vellum-shadow) 0 50%, var(--plate-blue) 50% 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.crt-photo {
    background:
        /* face glow */
        radial-gradient(ellipse 36% 50% at 50% 50%, var(--storm-blue) 0%, var(--abyssal-ink) 90%),
        /* bezel */
        linear-gradient(180deg, var(--vellum-shadow) 0 12%, var(--storm-blue) 12% 88%, var(--abyssal-ink) 88% 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.radio-photo {
    background:
        /* dial circle */
        radial-gradient(circle at 50% 50%, var(--vellum-shadow) 12%, var(--storm-blue) 14%, var(--storm-blue) 28%, var(--abyssal-ink) 30%),
        /* face */
        linear-gradient(180deg, var(--storm-blue) 0 40%, var(--abyssal-ink) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.fibre-photo {
    background:
        /* fibre filaments */
        linear-gradient(96deg, transparent 30%, var(--vellum-shadow) 31%, var(--vellum-shadow) 32%, transparent 33%),
        linear-gradient(86deg, transparent 50%, var(--vellum-shadow) 51%, var(--vellum-shadow) 52%, transparent 53%),
        linear-gradient(92deg, transparent 64%, var(--vellum-shadow) 65%, var(--vellum-shadow) 66%, transparent 67%),
        /* splice case */
        linear-gradient(180deg, var(--abyssal-ink) 0 15%, var(--storm-blue) 15% 50%, var(--abyssal-ink) 50% 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hydrophone-photo {
    background:
        /* cable */
        linear-gradient(90deg, transparent 48%, var(--abyssal-ink) 48%, var(--abyssal-ink) 50%, transparent 50%),
        /* hydrophone bulb */
        radial-gradient(ellipse 18% 30% at 50% 70%, var(--vellum-shadow) 0%, var(--storm-blue) 60%, var(--abyssal-ink) 100%),
        /* deep water */
        linear-gradient(180deg, var(--storm-blue) 0%, var(--abyssal-ink) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Catalogue body */
.cat-body {
    padding-top: 8px;
}

.cat-num {
    font-family: "Cormorant SC", serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--pale-gold);
    margin: 0 0 12px;
}

.cat-binomial {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 18px;
    color: var(--ocean-ink);
}

.cat-desc {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 24px;
    text-align: left;
}

.cat-mini {
    margin: 12px 0 0;
    max-width: 220px;
}

.cat-mini svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================================================
   FOLIO IV — CAUSTIC PLATE + TRANSCRIPT
   ===================================================================== */

.caustic-plate {
    position: relative;
    margin: 0 auto 64px;
    max-width: 720px;
    aspect-ratio: 600 / 360;
}

.cartouche-caustic {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#causticCanvas {
    position: absolute;
    inset: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    z-index: 1;
    background: linear-gradient(180deg, var(--storm-blue), var(--abyssal-ink));
    display: block;
}

.caustic-legend {
    position: absolute;
    bottom: -34px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-family: "Cormorant SC", serif;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--ocean-ink);
}

.transcript {
    max-width: 560px;
    margin: 80px auto 0;
}

.transcript-title {
    font-family: "Cormorant SC", serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-align: center;
    color: var(--pale-gold);
    margin: 0 0 28px;
}

.transcript-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.transcript-lines li {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ocean-ink);
    border-bottom: 0.5px solid rgba(26, 39, 48, 0.18);
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.transcript-lines li.shown {
    opacity: 1;
    transform: translateY(0);
}

.transcript-lines li.fading {
    opacity: 0.16;
}

.transcript-lines .line-text {
    flex: 1;
}

.transcript-lines .line-stamp {
    font-style: normal;
    font-family: "Cormorant SC", serif;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--storm-blue);
    white-space: nowrap;
}

/* =====================================================================
   FOLIO V — COLOPHON
   ===================================================================== */

.colophon-column {
    text-align: left;
}

.timestamp {
    font-family: "Cormorant SC", serif;
    letter-spacing: 0.22em;
    font-size: 13px;
    color: var(--ocean-ink);
}

.anchor-mark {
    margin: 56px auto 0;
    max-width: 80px;
}

.anchor-mark svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================================================
   FOLIO INDICATOR (pale-gold, bottom-right margin)
   ===================================================================== */

.folio-indicator {
    position: fixed;
    bottom: 64px;
    right: 72px;
    font-family: "Cormorant SC", serif;
    font-size: 12px;
    letter-spacing: 0.36em;
    color: var(--pale-gold);
    opacity: 0.18;
    transition: opacity 800ms ease;
    z-index: 55;
    pointer-events: none;
}

.folio-indicator.active {
    opacity: 1;
}

/* =====================================================================
   FLEURON ANCHOR — bottom-centre, return to frontispiece
   ===================================================================== */

.fleuron-anchor {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 24px;
    z-index: 55;
    opacity: 0.7;
    transition: opacity 400ms ease, transform 400ms ease;
}

.fleuron-anchor:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.fleuron-anchor svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =====================================================================
   GLITCH STROKES — animated path-draw on first reveal
   ===================================================================== */

.glitch-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ink-settle 1200ms ease-out forwards;
}

.glitch-margin {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: ink-settle 600ms ease-out forwards;
    animation-delay: 400ms;
}

@keyframes ink-settle {
    to { stroke-dashoffset: 0; }
}

/* =====================================================================
   RESPONSIVE — keep frame, collapse glossa
   ===================================================================== */

@media (max-width: 900px) {
    .cat-entry,
    .cat-entry:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cat-entry:nth-child(even) .cat-plate {
        order: 0;
    }
    .folio {
        padding: 56px 64px;
    }
}

@media (max-width: 480px) {
    :root {
        --frame-inner-offset: 32px;
    }
    body::after {
        top: 32px;
        right: 32px;
        bottom: 32px;
        left: 32px;
    }
    .folio {
        padding: 40px 40px;
    }
    .candle {
        top: 50px;
        right: 50px;
        transform: scale(0.75);
        transform-origin: top right;
    }
    .folio-indicator {
        bottom: 40px;
        right: 40px;
        font-size: 10px;
    }
    .marginalia-left { left: 8px; }
    .marginalia-right { right: 8px; }
    .text-column { font-size: 16px; }
    .frontis-title { font-size: clamp(28px, 9vw, 48px); }
    .caustic-legend {
        font-size: 9px;
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* Variable optical-size axis — page thickens on phone */
@media (max-width: 600px) {
    body {
        font-variation-settings: "opsz" 8;
    }
}

@media (min-width: 601px) {
    body {
        font-variation-settings: "opsz" 14;
    }
}