/* ==========================================================================
   CANDLELIT CODEX
   The library wins. Warm, heavy, ink-and-beeswax; the machine shows up only
   as a cyan glimmer at the edges — a cursor blinking in a room full of paper.

   One exception: the Kitchen Archives plate. That is where the rogue AI shows
   its hand — magenta edge, magenta bloom, a chromatic split and a single glitch
   step, carried over from the Cathode Cathedral variant. Everything else stays
   candlelit, so the effect reads as an intrusion rather than a house style.

   Layers over the existing stylesheets. No JS.
   ========================================================================== */

:root{
  --t-ink:      #07060a;
  --t-ink-2:    #100d13;
  --t-brown:    #1a1209;
  --t-parch:    #ece0c8;
  --t-parch-d:  #bfae8e;
  --t-muted:    #7d7059;
  --t-gold:     #d8a949;
  --t-gold-hi:  #f4d68d;
  --t-neon:     #4ff6ff;                 /* used sparingly, on purpose */
  --t-serif:    "EB Garamond", Georgia, serif;
  --t-mono:     "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── ground ───────────────────────────────────────────────────────────── */
html, body{
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(216,169,73,.10), transparent 60%),
    linear-gradient(180deg, var(--t-ink-2), var(--t-ink) 60%, #050407);
  color: var(--t-parch);
  font-family: var(--t-serif);
}
body::before{                 /* paper grain */
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image: var(--grain); opacity:.42; mix-blend-mode:soft-light;
}
body::after{                  /* vignette + the faintest scan lines */
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(4,3,6,.72) 100%);
  opacity:.5;
}

/* one slow warm-up on load, then it leaves you alone */
@keyframes t1-ignite{
  0%{opacity:0; filter:brightness(.4) saturate(.5)}
  55%{opacity:1; filter:brightness(1.12) saturate(1.05)}
  70%{filter:brightness(.94)}
  100%{opacity:1; filter:none}
}
main, .idx, .shell{ animation: t1-ignite 1100ms ease-out both; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3,.wordmark,.head h1,.idx__head h1,.card__name,.gate__title,.course__name{
  font-family: var(--t-serif) !important; font-weight:600; letter-spacing:.01em;
}
.overline,.head__kicker,.idx__kicker,.rail__archive,.chip,.meta dt,.stat dt,
.formula thead th,.num,.card__id,.course__n,.course__state,.mark,.colophon,
  font-family: var(--t-mono) !important;
}
  font-family: var(--t-serif) !important;
}

/* ── gold, not brass ──────────────────────────────────────────────────── */
.overline,.head__kicker,.idx__kicker,.panel>h2,.rail__id,.stat dd,
.formula .num,.gate__title,.course__name,.group__h,.byarchive strong{
  color: var(--t-gold-hi) !important;
}
.mark,.portal__title,.idx__nav a{ color: var(--t-gold) !important; }
.marks__sep,.rail__conf,.colophon,.foot,.idx__foot,.hint,.empty,.nr,.meta dt{
  color: var(--t-muted) !important;
}

/* ── manuscript rules, terminal brackets ──────────────────────────────── */
.panel>h2::before{ background: var(--t-gold) !important; box-shadow:0 0 10px rgba(216,169,73,.7) !important; }
.panel>h2::after{ background: linear-gradient(to right, rgba(216,169,73,.5), transparent) !important; }

.panel>h2{ position:relative; }
.panel>h2 { --b:'['; }
.idx__head h1::after, .head h1::after{
  content:'_'; color: var(--t-neon); margin-left:.18em;
  animation: t1-blink 1.15s steps(1) infinite; font-family:var(--t-mono);
}
@keyframes t1-blink{ 50%{opacity:0} }

/* section headers read as intercepted transmissions */
.panel>h2::first-letter{ letter-spacing:inherit; }
.idx__kicker::before, .head__kicker::before{ content:'[ '; color:var(--t-neon); opacity:.75; }
.idx__kicker::after,  .head__kicker::after{ content:' ]'; color:var(--t-neon); opacity:.75; }

/* ── links: candle flicker, one neon frame ────────────────────────────── */
a{ color: var(--t-gold); transition: color .18s ease, text-shadow .18s ease; }
a:hover, a:focus-visible{
  color: var(--t-gold-hi);
  text-shadow: 0 0 10px rgba(216,169,73,.55), 1px 0 0 rgba(79,246,255,.35), -1px 0 0 rgba(255,80,180,.25);
  animation: t1-flick .5s steps(2) 1;
}
@keyframes t1-flick{ 0%,100%{opacity:1} 30%{opacity:.55} 60%{opacity:.9} }

.portal, .gate, .course, .card{
  border-color: rgba(216,169,73,.34) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.portal:hover, .gate:hover, .course:hover, .card:hover{
  border-color: var(--t-gold-hi) !important;
  box-shadow: 0 0 0 1px rgba(79,246,255,.25), 0 14px 44px rgba(0,0,0,.6) !important;
}

/* ── imagery ──────────────────────────────────────────────────────────────
   The splash used to be a monochrome loaf that wanted carving into an
   engraving. It is a neon skyline now — that IS the cyberpunk half of the
   brief, so it keeps its colour and only gets deepened. The warm wash is a
   gradient rather than a flat duotone: gold at the top where the type sits,
   cool at the waterline. */
.plate__photo{ filter: brightness(.92) contrast(1.12) saturate(.9) !important; }
.plate__duotone{
  background-image: linear-gradient(180deg,
    rgba(216,169,73,.34) 0%,
    rgba(216,169,73,.10) 34%,
    transparent 55%,
    rgba(12,22,44,.34) 100%) !important;
}
.card__media img, .gate__img img, .cucina-hero img, .plate-photo > img{
  filter: sepia(.34) saturate(.72) contrast(1.08) brightness(.92) !important;
}

/* ── tables keep their nerve ──────────────────────────────────────────── */
.formula tbody th{ font-family: var(--t-serif) !important; color: var(--t-parch) !important; }
.formula thead th{ color: var(--t-gold) !important; }
.chip{ border-color: var(--t-gold) !important; }


/* ==========================================================================
   THE PLATE — where the machine breaks through
   ========================================================================== */

:root{ --t-magenta:#ff3ad0; }

.portal{
  border-color: rgba(255,58,208,.26) !important;
  transition: border-color .2s ease, box-shadow .2s ease,
              background .2s ease, transform .2s ease;
}
.portal .portal__mark{ transition: color .2s ease; }

.portal:hover, .portal:focus-visible{
  border-color: var(--t-magenta) !important;
  background: linear-gradient(180deg, rgba(255,58,208,.14), rgba(255,58,208,.03) 70%) !important;
  box-shadow: 0 0 26px rgba(255,58,208,.32), 0 14px 40px rgba(0,0,0,.6) !important;
  /* text-shadow inherits to the children, so the whole plate splits at once */
  text-shadow: 1.5px 0 0 var(--t-magenta), -1.5px 0 0 #4ff6ff;
  animation: t-glitch .28s steps(2) 1;
}
.portal:hover .portal__title,
.portal:focus-visible .portal__title{ color:#fff !important; }
.portal:hover .portal__mark,
.portal:focus-visible .portal__mark{ color: var(--t-magenta) !important; }
.portal:hover .portal__sub,
.portal:focus-visible .portal__sub{ color:#e9c8e2 !important; }

@keyframes t-glitch{
  0%{   transform: translate(0) }
  25%{  transform: translate(-1.5px, 1px) }
  50%{  transform: translate(1.5px, -1px) }
  75%{  transform: translate(-1px, 0) }
  100%{ transform: translate(0) }
}

/* ── motion preferences ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  main, .idx, .shell{ animation: none !important; }
  a:hover, a:focus-visible{ animation: none !important; }
  .portal:hover, .portal:focus-visible{ animation: none !important; }
  .idx__head h1::after, .head h1::after{ animation: none !important; }
  *{ transition-duration: .01ms !important; }
}

/* The relic belongs to the candlelight, not the neon — warm it slightly and
   let it glow just enough to look powered on. */
.relic img{
  filter: brightness(.84) contrast(1.05) saturate(.7) sepia(.24) !important;
  opacity:.94 !important;
}