/* ═══════════════════════════════════════════════════════════════
   LUMINA TEMPLE — shared stylesheet

   Direction: clear water under a twilight sky. A cool, pale-blue
   ground, Marcellus for the carved voice, DM Sans for the spoken
   one, and a palette that runs from light sky blue through deep
   ocean blue into Miron violet, with only a touch of temple gold
   for rules and seals. Light is added, never emitted: no glows,
   no gradient lettering, no blueprint grid.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Type ─────────────────────────────────────────────── */
    --display: 'Marcellus', 'Palatino Linotype', Palatino, Georgia, serif;
    --body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --mono:    'DM Mono', ui-monospace, SFMono-Regular, monospace;
    --verse:   'EB Garamond', Georgia, 'Times New Roman', serif;

    /* ── Ground & ink ─────────────────────────────────────── */
    --paper:      #F5F8FD;   /* page ground — cool blue-white */
    --paper-2:    #EBF1FA;   /* recessed band */
    --card:       #FFFFFF;   /* raised surface */
    --cream:      #EDF2FB;   /* soft blue mist (name kept for markup) */
    --linen:      #E5ECF8;   /* deeper mist, for pills */
    --plate:      #0F1C3D;   /* mat behind the dark blueprint plates */

    --ink:        #14224A;   /* deep navy — headings, strongest copy */
    --grey:       #3E4A68;   /* body copy */
    --grey-dk:    #535E7C;   /* secondary, captions, footnotes — AA on ground, card and footer */

    /* ── Miron violet ─────────────────────────────────────── */
    --miron:      #4B2A7E;   /* deep violet, as readable ink */
    --miron-dk:   #3A1F66;
    --miron-lt:   #A28BD0;
    --miron-pale: #F0EBF9;

    /* ── Gold — a touch only: rules, seals, ornaments ─────── */
    --gold:       #C6A24F;
    --gold-lt:    #E3CB8A;
    --gold-dk:    #7A5C18;   /* gold as readable ink, used rarely */
    --gold-deep:  #3A1F66;   /* plate ink — now Miron */
    --gold-pale:  #F0EBF9;   /* soft accent surface — now pale violet, no beige */

    /* ── Light blue ───────────────────────────────────────── */
    --aqua:       #2563A8;   /* bright sky blue, as readable ink */
    --aqua-lt:    #9EC4EE;
    --aqua-dk:    #1B4C8A;
    --aqua-pale:  #E7F0FC;

    /* ── Deep blue ────────────────────────────────────────── */
    --water:      #1E4486;   /* ocean blue, as readable ink */
    --water-mid:  #2F5DAA;
    --water-dk:   #15336B;
    --water-pale: #E6ECF8;

    /* Codex aliases — the investor document speaks in blues. */
    --blue:       #1E4486;
    --blue-lt:    #2F5DAA;
    --blue-dk:    #15336B;
    --pearl:      #14224A;
    --ink-2:      #FFFFFF;

    /* ── Alert accent, used sparingly ─────────────────────── */
    --terra:      #9E3F4E;
    --terra-pale: #FBEAEE;

    /* ── Lines ────────────────────────────────────────────── */
    --line:       rgba(20,34,74,0.11);
    --line-gold:  rgba(198,162,79,0.34);
    --line-aqua:  rgba(37,99,168,0.24);
    --line-miron: rgba(75,42,126,0.18);

    /* ── Depth — cool, diffuse, never a glow ──────────────── */
    --sh:    0 8px 30px rgba(20,34,74,0.06);
    --sh-l:  0 18px 54px rgba(20,34,74,0.11);
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 88px; }

body {
    font-family: var(--body);
    background: var(--paper);
    color: var(--grey);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--aqua-pale); color: var(--miron-dk); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Atmosphere ────────────────────────────────────────────
   Two washes of light on the ground. Nothing luminous, nothing
   gridded — the page should feel printed, then lit.
   ───────────────────────────────────────────────────────── */
.bg-atmos {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(ellipse 85% 60% at 82% 2%,  rgba(158,196,238,0.30) 0%, transparent 58%),
        radial-gradient(ellipse 70% 55% at 4% 92%,  rgba(162,139,208,0.20) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 50% 48%, rgba(231,240,252,0.60) 0%, transparent 62%),
        linear-gradient(180deg, #F1F5FC 0%, var(--paper) 46%, #F7F9FD 100%);
}

/* Caustics — the light a pool throws on stone. Slow enough to
   read as weather rather than animation. */
.bg-caustic {
    position: fixed; inset: -25%; z-index: -2; pointer-events: none; opacity: 0.55;
    background-image:
        radial-gradient(closest-side at 24% 26%, rgba(158,196,238,0.24), transparent),
        radial-gradient(closest-side at 74% 38%, rgba(162,139,208,0.12), transparent),
        radial-gradient(closest-side at 44% 76%, rgba(158,196,238,0.16), transparent),
        radial-gradient(closest-side at 88% 84%, rgba(47,93,170,0.10),   transparent);
    background-size: 48% 44%, 42% 40%, 54% 48%, 40% 36%;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 26%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 110% 80% at 50% 26%, #000 40%, transparent 100%);
    animation: drift 48s ease-in-out infinite alternate;
    will-change: transform;
}

/* The blueprint grid is gone on purpose — it was the loudest
   machine-made note in the old design. */
.bg-grid { display: none; }

/* A whisper of paper tooth. */
.bg-grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography ────────────────────────────────────────────
   Marcellus is a Roman inscriptional face: it only has one
   weight, and it wants to be set large, light and untracked.
   Every heading here is 400 — the old 600-weight, negatively
   tracked display voice is what made the page shout.
   ───────────────────────────────────────────────────────── */
.display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.004em;
    line-height: 1.1;
    color: var(--ink);
    text-wrap: balance;
}
.section-header {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    line-height: 1.16;
    letter-spacing: 0.004em;
    color: var(--ink);
    text-wrap: balance;
}
h1, h2, h3, h4 { font-weight: 400; }

/* Labels: sans, gently tracked. The old mono at 0.32em read as
   a terminal prompt; 0.15em reads as a printed running head. */
.eyebrow {
    font-family: var(--body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-dk);
}

/* The pill label that opens a section — borrowed from the
   Love of One sites, set in blue mist with Miron ink and a gold seed. */
.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--miron);
    background: var(--linen);
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
}
.eyebrow-pill::before {
    content: ''; width: 5px; height: 5px; border-radius: 999px;
    background: var(--gold); flex: none;
}

.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; }

/* Light Language and transmitted verse — old-style italic. */
.light-language {
    font-family: var(--verse);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.5;
    color: var(--aqua-dk);
}

.lede { font-size: 1.1875rem; line-height: 1.62; color: var(--grey); }

/* Emphasis inside a heading. These were gradient-filled text —
   the single most machine-made detail on the page. Now they are
   simply the other ink: Miron violet for lineage, sky blue for science. */
.gold-gradient  { color: var(--miron); }
.water-gradient { color: var(--aqua-dk); }

.t-gold    { color: var(--miron); }
.t-miron   { color: var(--miron); }
.t-aqua    { color: var(--aqua); }
.t-water   { color: var(--water); }
.t-blue    { color: var(--blue); }
.t-grey    { color: var(--grey); }
.t-grey-dk { color: var(--grey-dk); }
.t-paper   { color: var(--ink); }

strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* ── Buttons ───────────────────────────────────────────────
   Fully rounded, generous, quiet. Lift on hover, no glow.
   ───────────────────────────────────────────────────────── */
.btn-gold, .btn-tide, .btn-ghost {
    font-family: var(--body);
    border-radius: 999px;
    text-align: center;
    transition: background .28s ease, border-color .28s ease, color .28s ease,
                transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}

.btn-gold {
    background: linear-gradient(135deg, #5A3592 0%, #4B2A7E 100%);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(58,31,102,0.20), inset 0 0 0 1px rgba(227,203,138,0.28);
}
.btn-gold:hover {
    background: linear-gradient(135deg, #4B2A7E 0%, #3A1F66 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(58,31,102,0.28), inset 0 0 0 1px rgba(227,203,138,0.42);
}
.btn-gold:active { transform: translateY(0); }

.btn-tide {
    background: linear-gradient(135deg, #2F5DAA 0%, #1E4486 100%);
    color: #FFFFFF;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(30,68,134,0.20);
}
.btn-tide:hover {
    background: linear-gradient(135deg, #24509A 0%, #15336B 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(30,68,134,0.26);
}
.btn-tide:active { transform: translateY(0); }

.btn-ghost {
    background: var(--cream);
    border: 1px solid rgba(75,42,126,0.22);
    color: var(--ink);
    font-weight: 500;
}
.btn-ghost:hover {
    background: var(--miron-pale);
    border-color: rgba(75,42,126,0.40);
}

/* ── Surfaces ──────────────────────────────────────────────
   White cards on a pale blue ground, separated by a violet
   hairline rather than by contrast.
   ───────────────────────────────────────────────────────── */
.tide-card, .sacred-card {
    background: var(--card);
    border: 1px solid rgba(75,42,126,0.14);
    box-shadow: var(--sh);
    transition: border-color .4s ease, transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.tide-card:hover, .sacred-card:hover {
    border-color: rgba(75,42,126,0.32);
    transform: translateY(-3px);
    box-shadow: var(--sh-l);
}
.tide-card.static-card:hover, .sacred-card.static-card:hover {
    transform: none;
    box-shadow: var(--sh);
    border-color: rgba(75,42,126,0.14);
}

/* The feature panel: blue mist, with light pooling in two corners. */
.panel-deep {
    background:
        radial-gradient(ellipse 80% 70% at 12% 0%,  rgba(158,196,238,0.34) 0%, transparent 60%),
        radial-gradient(ellipse 65% 60% at 96% 100%, rgba(162,139,208,0.24) 0%, transparent 56%),
        var(--cream);
    border: 1px solid var(--line-miron);
    box-shadow: var(--sh);
}

/* The page should close on a surface, not trail off the bottom of
   the page. Light band, gold hairline, no tonal drop. */
.site-footer {
    background:
        radial-gradient(ellipse 75% 100% at 8% 0%,   rgba(158,196,238,0.28) 0%, transparent 62%),
        radial-gradient(ellipse 60% 90% at 96% 100%, rgba(162,139,208,0.20) 0%, transparent 60%),
        linear-gradient(180deg, #EEF3FB 0%, #E7EDF8 100%);
    border-top: 1px solid var(--line-gold);
}

/* A struck plate — for the one or two figures that should feel
   struck rather than printed. Pale violet ground, Miron ink, gold rim. */
.plate-gold {
    background: linear-gradient(140deg, #F7F4FC 0%, var(--miron-pale) 55%, #E3DAF3 100%);
    border: 1px solid rgba(198,162,79,0.5);
    color: var(--gold-deep);
    box-shadow: var(--sh);
}
.plate-gold .display { color: var(--gold-deep); }

/* A deep blue-into-violet band, for the closing call and the gate. */
.band-tide {
    background: linear-gradient(135deg, #1E4486 0%, #23336F 55%, #3A1F66 100%);
    color: #F4FAFC;
}
.band-tide .display, .band-tide .section-header { color: #FBFDFD; }
.band-tide .t-grey    { color: rgba(244,250,252,0.82); }
.band-tide .t-grey-dk { color: rgba(244,250,252,0.68); }
.band-tide .lede      { color: rgba(244,250,252,0.84); }

/* Blueprint corner brackets removed — see .bg-grid. The class is
   kept as a positioning context so existing markup still works. */
.bp { position: relative; }

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(198,162,79,0.5), rgba(75,42,126,0.32), transparent);
}
.waterline {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(37,99,168,0.40), transparent);
}

/* ── Evidence badges ───────────────────────────────────────
   The tiering is the spine of this site's honesty, so the
   badges stay legible and distinct — just softer.
   ───────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--mono);
    font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.32rem 0.62rem; border-radius: 999px; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.badge-measured    { color: #1B4C8A; background: var(--aqua-pale);  border: 1px solid rgba(37,99,168,0.30); }
.badge-emerging    { color: #3A1F66; background: var(--miron-pale); border: 1px solid rgba(75,42,126,0.28); }
.badge-traditional { color: #15336B; background: var(--water-pale); border: 1px solid rgba(30,68,134,0.28); }

/* Citation markers */
.cite {
    font-family: var(--mono);
    font-size: 0.62em; vertical-align: super; line-height: 0;
    color: var(--aqua); padding: 0 0.12em;
    border-bottom: 1px dotted rgba(37,99,168,0.5);
    transition: color .2s ease;
}
.cite:hover { color: var(--miron); }
.ref-row { border-top: 1px solid var(--line); }
.ref-row:target { background: var(--miron-pale); }
.ref-row a { color: var(--water); word-break: break-word; }
.ref-row a:hover { color: var(--aqua-dk); }

/* ── Forms ─────────────────────────────────────────────────── */
.field {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(30,68,134,0.20);
    border-radius: 0.9rem;
    padding: 0.85rem 1.1rem;
    font-family: var(--body);
    font-size: 0.9375rem;
    color: var(--ink);
    outline: none;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.field::placeholder { color: #626C88; }
.field:hover { border-color: rgba(30,68,134,0.36); }
.field:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px rgba(37,99,168,0.14);
}
.field-label {
    display: block;
    font-family: var(--body);
    font-size: 0.66rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--grey-dk); margin-bottom: 0.45rem;
}
select.field {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--aqua) 50%), linear-gradient(135deg, var(--aqua) 50%, transparent 50%);
    background-position: right 1.2rem center, right 0.95rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
select.field option { background: var(--card); color: var(--ink); }

.notice { border-radius: 1rem; padding: 0.95rem 1.15rem; font-size: 0.875rem; line-height: 1.6; }
.notice-ok   { background: var(--aqua-pale);  border: 1px solid rgba(37,99,168,0.30); color: #173F75; }
.notice-bad  { background: var(--terra-pale); border: 1px solid rgba(158,63,78,0.30); color: #7A2E3B; }
.notice-wait { background: var(--miron-pale); border: 1px solid rgba(75,42,126,0.26); color: #3A1F66; }

/* ── Plates ────────────────────────────────────────────────
   Two kinds of plate share the page.

   The bed and biofeedback diagrams are dark blueprint renders.
   Rather than fight that, they are mounted like plates in a
   printed monograph: a deep navy mat, a gold hairline, pale blue
   ground all around. Their navy already belongs to the palette,
   so the filter only settles them.

   The chamber etching is the opposite — faint line on the page — so
   it is not matted at all. It sits on the page's own ground and
   multiplies into it, the way a watermark is pressed into a sheet
   rather than laid over one.
   ───────────────────────────────────────────────────────── */
.img-frame { filter: saturate(0.95) contrast(1.03); }

.chamber-plate {
    background:
        radial-gradient(120% 90% at 50% 8%, rgba(162,139,208,0.08), transparent 60%),
        linear-gradient(to bottom, var(--card), var(--cream));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), var(--sh);
}
.etching { mix-blend-mode: multiply; }

/* ── Motion ────────────────────────────────────────────────
   Slower and fewer than before. Light moves; the page doesn't.
   ───────────────────────────────────────────────────────── */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-rev  { to { transform: rotate(-360deg); } }
@keyframes breathe   { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes float-y   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes drift     { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@keyframes ripple    { 0% { transform: scale(.4); opacity: 0; } 22% { opacity: .4; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes rise      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheen     { 0%,100% { opacity: .2; transform: translateX(-3%); } 50% { opacity: .45; transform: translateX(3%); } }

.spin-slow { animation: spin-slow 90s linear infinite; transform-origin: center; }
.spin-rev  { animation: spin-rev 120s linear infinite; transform-origin: center; }
.breathe   { animation: breathe 7s ease-in-out infinite; }
.float-y   { animation: float-y 7s ease-in-out infinite; }
.rise      { opacity: 0; animation: rise .9s cubic-bezier(.2,.8,.3,1) forwards; }
.sheen     { animation: sheen 14s ease-in-out infinite; }

.ripple-ring { transform-origin: center; animation: ripple 11s ease-out infinite; }
.ripple-ring:nth-of-type(2) { animation-delay: 3.6s; }
.ripple-ring:nth-of-type(3) { animation-delay: 7.2s; }

/* Reveal on scroll (script adds .is-in) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto; transition-duration: .01ms !important; }
    .rise { opacity: 1; }
    .reveal { opacity: 1; transform: none; }
}