/* --------------------------------------------------------------------
   Exonero — public site.

   Committed to one look rather than following the viewer's theme: the
   page is a dusk desert seen from orbit, and a light variant of that is
   not the same page. Every colour is stated on :root so nothing here
   depends on a media query resolving.
   -------------------------------------------------------------------- */
:root {
    --ink:    #0a0806;   /* the ground at night */
    --dust:   #cdbfa8;   /* body text: bone, not white */
    --bright: #f2e9dc;
    --amber:  #d8963c;   /* the signal colour, used sparingly */
    --rust:   #8a4a2c;
    --rule:   rgba(205, 191, 168, 0.16);
    --panel:  rgba(12, 10, 8, 0.62);

    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--ink);
    color: var(--dust);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The sky. A dusk gradient with the horizon a little below centre, and a
   low glow where the sun has already gone. Fixed, so the whole page reads
   as one continuous view rather than a stack of cards. */
.sky {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 55% at 50% 68%, rgba(216, 150, 60, 0.20) 0%, rgba(138, 74, 44, 0.10) 34%, rgba(10, 8, 6, 0) 70%),
        radial-gradient(80% 40% at 78% 12%, rgba(90, 110, 150, 0.10) 0%, rgba(10, 8, 6, 0) 60%),
        linear-gradient(180deg, #05060a 0%, #0b0a0c 38%, #17110d 62%, #0a0806 100%);
}

/* Film grain, so the flat gradients above do not band on a big screen.
   Inline SVG turbulence: no request, no dependency, and it costs one
   composite layer. */
.grain {
    position: fixed;
    inset: -50%;
    z-index: -1;
    opacity: 0.30;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- hero --------------------------------------------------------- */

.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8vh 24px 12vh;
    position: relative;
}

.hero-inner { max-width: 720px; }

.hero-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(205, 191, 168, 0.45);
    margin: 0 0 34px;
}

/* Typographic wordmark. Wide-tracked, light, and letterspaced far enough
   that it reads as a mark rather than as a word in a sentence. */
.wordmark {
    font-family: var(--sans);
    font-weight: 200;
    font-size: clamp(46px, 12vw, 116px);
    letter-spacing: 0.30em;
    text-indent: 0.30em;   /* recover the trailing track so it stays centred */
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    color: var(--bright);
    text-shadow: 0 0 46px rgba(216, 150, 60, 0.30);
}

.lede {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(19px, 3vw, 27px);
    line-height: 1.35;
    color: var(--bright);
    margin: 30px 0 0;
}

/* An open channel: a hairline with one bright pip travelling along it.
   The only moving thing above the fold, and it stops under reduced-motion. */
.carrier {
    width: min(360px, 70vw);
    height: 1px;
    margin: 30px auto 0;
    background: var(--rule);
    position: relative;
    overflow: hidden;
}
.carrier span {
    position: absolute;
    top: -1px;
    left: -30%;
    width: 30%;
    height: 3px;
    background: linear-gradient(90deg, rgba(216,150,60,0) 0%, var(--amber) 50%, rgba(216,150,60,0) 100%);
    animation: sweep 5.5s linear infinite;
}
@keyframes sweep { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .carrier span { animation: none; left: 35%; opacity: 0.5; }
}

.sub {
    max-width: 46ch;
    margin: 28px auto 0;
    color: rgba(205, 191, 168, 0.78);
    font-size: 16px;
}

.status {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(205, 191, 168, 0.5);
    margin: 42px 0 0;
}
.pip {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--amber);
    margin-right: 9px;
    vertical-align: 1px;
}

.scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 44px;
    background: var(--rule);
    overflow: hidden;
}
.scroll-cue span {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px; height: 14px;
    background: rgba(205, 191, 168, 0.65);
    animation: drop 2.6s ease-in-out infinite;
}
@keyframes drop { 0% { top: -14px; } 60%, 100% { top: 44px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; top: 15px; } }

/* ---- panels ------------------------------------------------------- */

main { padding: 0 24px; }

.panel {
    max-width: 640px;
    margin: 0 auto;
    padding: 13vh 0;
    border-top: 1px solid var(--rule);
}
.panel-wide { max-width: 760px; }
.panel-close { padding-bottom: 9vh; }

.eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.75;
    margin: 0 0 22px;
}

.panel h2 {
    font-family: var(--sans);
    font-weight: 200;
    font-size: clamp(27px, 4.6vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--bright);
    margin: 0 0 30px;
    max-width: 20ch;
}
.panel-wide h2 { max-width: 24ch; }

.body { margin: 0 0 22px; max-width: 62ch; }
.body:last-child { margin-bottom: 0; }

.pull {
    margin: 40px 0 0;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--amber);
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(19px, 2.6vw, 24px);
    line-height: 1.45;
    color: var(--bright);
    max-width: 34ch;
}

/* ---- radio log ---------------------------------------------------- */

.radio {
    margin: 34px 0;
    padding: 20px 22px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 2px solid rgba(216, 150, 60, 0.55);
}
.radio p {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.62;
    margin: 0;
    color: rgba(242, 233, 220, 0.86);
}
.radio p + p { margin-top: 14px; }
.radio .chan {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(216, 150, 60, 0.72);
    margin-bottom: 5px;
}
.radio .dead { color: rgba(205, 191, 168, 0.34); }
.radio .dead .chan { color: rgba(205, 191, 168, 0.28); }

/* ---- the two-dice list -------------------------------------------- */

.inference {
    list-style: none;
    margin: 34px 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.inference li {
    background: var(--panel);
    padding: 18px 20px;
    font-size: 15px;
    color: rgba(205, 191, 168, 0.72);
}
.inference span {
    display: block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    color: var(--bright);
    margin-bottom: 5px;
}

/* ---- footer ------------------------------------------------------- */

footer {
    max-width: 640px;
    margin: 0 auto;
    padding: 8vh 24px 12vh;
    border-top: 1px solid var(--rule);
    text-align: center;
}
.foot-title {
    font-family: var(--sans);
    font-weight: 200;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--bright);
    margin: 0 0 14px;
}
.foot-line {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(205, 191, 168, 0.45);
    margin: 0 0 8px;
}
footer a { color: rgba(216, 150, 60, 0.85); text-decoration: none; border-bottom: 1px solid var(--rule); }
footer a:hover { color: var(--amber); }

/* ---- preview-only live badge -------------------------------------- */

.livebadge {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 50;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(10, 8, 6, 0.86);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(205, 191, 168, 0.62);
}
.livebadge.on { display: flex; }
.livebadge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--amber);
    animation: breathe 2.4s ease-in-out infinite;
}
.livebadge.updating { color: var(--bright); border-color: rgba(216, 150, 60, 0.5); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .livebadge .dot { animation: none; } }

@media (max-width: 560px) {
    body { font-size: 16px; }
    .panel { padding: 10vh 0; }
    .wordmark { letter-spacing: 0.22em; text-indent: 0.22em; }
}