@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:wght@600;700;800;900&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#030509;
  --panel:rgba(19,29,48,0.88);
  --panel-solid:#111B2E;
  --panel-edge:rgba(125,205,225,0.24);
  --ink:#E9F3F5;
  --ink-soft:#93AAB9;
  --cyan:#45D3E8;
  --cyan-glow:#8EEAF5;
  --teal:#46E0A6;
  --violet:#8F72E8;
  --gold:#E8A94A;
  --gold-dim:#C9852F;
  --line:rgba(120,205,225,0.25);
  --line-strong:rgba(120,205,225,0.5);
  --max:1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--bg);padding:8px 14px;z-index:200;}
.skip-link:focus{left:8px;top:8px;}

/* ===== cosmic background field, fixed behind every page ===== */
.cosmic-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 700px at 12% -6%, rgba(69,211,232,0.24), transparent 60%),
    radial-gradient(ellipse 800px 650px at 88% 4%, rgba(70,224,166,0.20), transparent 58%),
    radial-gradient(ellipse 700px 600px at 4% 92%, rgba(143,114,232,0.20), transparent 60%),
    radial-gradient(ellipse 900px 500px at 82% 96%, rgba(143,114,232,0.16), transparent 60%),
    radial-gradient(ellipse 600px 340px at 50% 104%, rgba(232,169,74,0.20), transparent 65%),
    var(--bg);
}
.cosmic-field canvas{position:absolute;inset:0;width:100%;height:100%;}

/* ===== document frame — floats above the cosmic field ===== */
.doc{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:28px auto;
  background:var(--panel);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--ink);
  border:1px solid var(--panel-edge);
  box-shadow:inset 0 1px 0 rgba(180,225,235,0.06), 0 30px 90px -18px rgba(0,0,0,0.7), 0 0 170px -30px rgba(69,211,232,0.4), 0 0 90px -50px rgba(143,114,232,0.35);
  overflow:hidden;
}
@supports not (backdrop-filter: blur(1px)){
  .doc{background:var(--panel-solid);}
}
.doc::before, .doc::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  background:url("assets/corner-ornament.svg") no-repeat center / contain;
  pointer-events:none;
  z-index:0;
  opacity:0.9;
}
.doc::before{top:0;left:0;}
.doc::after{bottom:0;right:0;transform:rotate(180deg);}
@media (max-width:760px){
  .doc{margin:0;border-left:none;border-right:none;}
  .doc::before, .doc::after{width:130px;height:130px;}
}

/* top status bar */
.statusbar{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  border-bottom:1px solid var(--line);
  background:rgba(5,8,15,0.55);
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
}
.statusbar-info{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  flex:1 1 auto;
  min-width:0;
}
.statusbar-info div{
  padding:10px 16px;
  border-right:1px solid var(--line);
  min-width:0;
}
.statusbar-info div:last-child{border-right:none;}
.statusbar strong{display:block;color:var(--cyan-glow);font-size:0.72rem;letter-spacing:0.08em;margin-bottom:2px;}

/* moon phase widget — always its own box, always on the right, on every
   viewport. It's a flex sibling of .statusbar-info (not a grid column
   inside it), so it can never wrap onto its own line no matter how the
   info cells stack. */
.moon-cell{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-left:1px solid var(--line);
}
.moon-cell strong{
  margin-bottom:0;
  line-height:1.25;
  font-size:0.64rem;
  white-space:nowrap;
}
#moon-widget{display:inline-flex;width:56px;height:56px;flex-shrink:0;}
#moon-widget svg{display:block;width:100%;height:100%;}
/* .moon-link wraps BOTH the "THE MOON" label and the icon, so the whole
   box is one clickable target -- every day, not just special ones.
   .moon-link-special adds the gold pulsing glow as a visual highlight
   specifically on the real Full/New Moon, without gating the link
   itself on it. */
.moon-link{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  cursor:pointer;
  text-decoration:none;
  transition:filter 0.25s ease;
}
.moon-link:hover{filter:drop-shadow(0 0 6px rgba(69,211,232,0.55));}
.moon-link-special{
  animation:moonGlow 3.6s ease-in-out infinite;
  filter:drop-shadow(0 0 2px rgba(232,169,74,0.35));
}
.moon-link-special:hover{filter:drop-shadow(0 0 8px rgba(232,169,74,0.85));}
@keyframes moonGlow{
  0%,100%{opacity:0.82;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .moon-link-special{animation:none;opacity:1;filter:drop-shadow(0 0 4px rgba(232,169,74,0.5));}
}

/* ===== HELIO — the sunset state of the same statusbar cell =====
   During the visitor's local sunset window helio.js replaces the moon
   markup inside .moon-cell with .helio-link. The cell keeps its own
   geometry (set above and in the mobile block below) so the box does not
   move or resize when the state changes -- only what is inside it does.
   Nothing here applies outside that window, because .helio-link is only
   ever in the document while HELIO is active. */
.helio-link{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  cursor:pointer;
  text-decoration:none;
  transition:filter 0.25s ease;
  filter:drop-shadow(0 0 3px rgba(255,138,32,0.45));
}
.helio-link:hover{filter:drop-shadow(0 0 9px rgba(255,150,40,0.9));}
.helio-link strong{
  margin-bottom:0;
  line-height:1.25;
  font-size:0.64rem;
  white-space:nowrap;
  color:var(--ink);
}
#helio-widget{display:inline-flex;width:56px;height:56px;flex-shrink:0;}
#helio-widget svg{display:block;width:100%;height:100%;}

/* The corona breathes; the disc itself does not. A restrained single
   pulse on one element reads as heat without turning every page on the
   site into an animation for two hours a day. */
.helio-sun-svg .helio-corona{
  transform-origin:50% 50%;
  animation:helioCorona 4.8s ease-in-out infinite;
}
.helio-sun-svg .helio-limb{
  animation:helioLimb 4.8s ease-in-out infinite;
}
@keyframes helioCorona{
  0%,100%{transform:scale(0.94);opacity:0.72;}
  50%{transform:scale(1.03);opacity:1;}
}
@keyframes helioLimb{
  0%,100%{opacity:0.35;}
  50%{opacity:0.8;}
}
@media (prefers-reduced-motion:reduce){
  .helio-sun-svg .helio-corona,
  .helio-sun-svg .helio-limb{animation:none;opacity:0.9;transform:none;}
}

/* main nav */
nav.mainnav{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  background:rgba(5,8,15,0.35);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
}
nav.mainnav a{
  padding:12px 14px;
  text-decoration:none;
  color:var(--ink-soft);
  border-right:1px solid var(--line);
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease;
}
nav.mainnav a:hover, nav.mainnav a:focus{background:rgba(69,211,232,0.12);color:var(--ink);}
nav.mainnav a.active{background:linear-gradient(90deg, rgba(143,114,232,0.85), rgba(69,211,232,0.85));color:#04060B;}
nav.mainnav a .num{color:var(--cyan);margin-right:6px;}
nav.mainnav a.active .num{color:#04060B;}

/* cinematic intro (home only) */
.intro-reveal{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(69,211,232,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(143,114,232,0.16), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(232,169,74,0.12), transparent 60%);
}
#particles{position:absolute;inset:0;width:100%;height:100%;}
.intro-content{position:relative;z-index:2;text-align:center;padding:0 24px;max-width:720px;}
.intro-content .eyebrow{color:var(--cyan-glow);}
.intro-title{
  font-family:'Big Shoulders', sans-serif;
  font-weight:900;
  font-size:clamp(3.4rem,15vw,8.5rem);
  line-height:0.88;
  letter-spacing:0.01em;
  margin:0;
  background:linear-gradient(90deg, var(--cyan) 0%, var(--teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 26px rgba(69,211,232,0.35));
}
.intro-sub{
  font-family:'Big Shoulders', sans-serif;
  font-weight:600;
  font-size:clamp(0.95rem,2.2vw,1.3rem);
  color:var(--cyan-glow);
  letter-spacing:0.02em;
  margin:6px 0 0;
}
.intro-tagline{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  color:var(--ink-soft);
  margin:30px 0 0;
  letter-spacing:0.03em;
}
.intro-tagline.accent{color:var(--gold);margin-top:6px;}
.scroll-cue{
  margin-top:44px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.scroll-cue .arrow{display:inline-block;animation:bob 2.6s ease-in-out infinite;margin-top:4px;color:var(--cyan);}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}
.intro-content > *{
  opacity:0;
  animation:fadeUp 0.9s ease forwards;
}
.intro-content .eyebrow{animation-delay:0.1s;}
.intro-content .intro-title{animation-delay:0.35s;}
.intro-content .intro-sub{animation-delay:0.75s;}
.intro-content .intro-schematic{animation-delay:1.05s;}
.intro-content .intro-tagline{animation-delay:1.3s;}
.intro-content .intro-tagline.accent{animation-delay:1.5s;}
.intro-content .scroll-cue{animation-delay:1.9s;}

@media (prefers-reduced-motion: reduce){
  .intro-content > *{animation:none;opacity:1;}
  .scroll-cue .arrow{animation:none;}
}

/* hero (home only) */
.hero{position:relative;z-index:1;}
.hero img{width:100%;display:block;}
.hero-caption{
  position:relative;
  z-index:1;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  color:var(--ink-soft);
  padding:8px 24px;
  border-bottom:1px solid var(--line);
  letter-spacing:0.04em;
  background:rgba(5,8,15,0.35);
}

/* scroll reveal (used on cards, tables, callouts down the page) */
.reveal-scroll.prep{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scroll.prep.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal-scroll.prep{opacity:1;transform:none;transition:none;}
}

body.loaded{animation:pageIn 0.6s ease;}
@keyframes pageIn{from{opacity:0;}to{opacity:1;}}

/* content layout: reading column + marginalia */
main{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 230px;
  gap:36px;
  padding:40px 24px 64px;
}
.marginalia{
  border-left:1px solid var(--line);
  padding-left:20px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
}
.marginalia .note{margin-bottom:28px;}
.marginalia .note-label{color:var(--violet);letter-spacing:0.06em;display:block;margin-bottom:6px;}

article{max-width:66ch;min-width:0;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  color:var(--cyan);
  text-transform:uppercase;
  margin:0 0 8px;
}
h1{
  font-family:'Big Shoulders', sans-serif;
  font-weight:900;
  font-size:clamp(2.6rem,6vw,4.6rem);
  /* was 0.95 — too tight once the title wraps, and it clipped
     descenders on gradient-filled text (Sagittarius, Pegasus). */
  line-height:1.04;
  letter-spacing:0.01em;
  margin:0 0 10px;
  padding-bottom:0.06em;
  background:linear-gradient(100deg, var(--ink) 30%, var(--cyan-glow) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h1 .sub{
  display:block;
  font-family:'Big Shoulders', sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--teal);
  letter-spacing:0.03em;
  /* .sub is a block inside h1, so it inherited line-height:0.95 and
     its own wrapped lines overlapped. Needs its own value. */
  line-height:1.3;
  margin-top:0.35em;
  text-wrap:pretty;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
  -webkit-text-fill-color:currentColor;
}
h2{
  font-family:'Big Shoulders', sans-serif;
  font-weight:800;
  font-size:1.8rem;
  letter-spacing:0.01em;
  margin:2.2em 0 0.5em;
  color:var(--ink);
  border-top:1px solid var(--line);
  padding-top:0.6em;
}
main article > h2:first-of-type{border-top:none;padding-top:0;margin-top:0;}

p{margin:0 0 1.1em;}
em.disclaimer{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-style:normal;
  font-size:0.76rem;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:10px 14px;
  margin:0 0 1.6em;
  background:rgba(69,211,232,0.05);
}

/* spec table */
.spec{
  width:100%;
  border-collapse:collapse;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  margin:1.4em 0 1.8em;
}
.spec th, .spec td{
  text-align:left;
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.spec th{color:var(--cyan);width:120px;letter-spacing:0.05em;font-weight:600;}
.spec td{color:var(--ink);}

/* schematic divider - the signature motif */
.schematic{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2.4em 0;
  color:var(--line-strong);
}
.schematic svg{flex-shrink:0;}
.schematic .dot{fill:var(--gold);}
.schematic line{stroke:var(--line-strong);stroke-width:1;}
.schematic .pulse{animation:pulse 3.2s ease-in-out infinite;filter:drop-shadow(0 0 5px var(--gold));}
@keyframes pulse{
  0%,100%{opacity:0.4;}
  50%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .schematic .pulse{animation:none;opacity:0.85;}
}

/* stamp */
.stamp{
  width:112px;height:112px;
  border:2px solid var(--gold);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  color:var(--gold);
  text-align:center;
  letter-spacing:0.05em;
  line-height:1.3;
  transform:rotate(-8deg);
  flex-shrink:0;
  animation:stampGlow 4.5s ease-in-out infinite;
}
.stamp strong{font-size:0.78rem;letter-spacing:0.03em;}
@keyframes stampGlow{
  0%,100%{box-shadow:0 0 0 rgba(232,169,74,0);}
  50%{box-shadow:0 0 18px rgba(232,169,74,0.35);}
}
@media (prefers-reduced-motion: reduce){
  .stamp{animation:none;box-shadow:0 0 12px rgba(232,169,74,0.2);}
}

/* callout / testimonial block */
.field-log{
  border:1px solid var(--line);
  padding:16px 18px;
  margin:1.4em 0;
  background:rgba(69,211,232,0.05);
}
.field-log .who{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--violet);
  letter-spacing:0.04em;
  display:block;
  margin-top:8px;
}

/* faq */
details{
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
details summary{
  font-family:'Big Shoulders', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  cursor:pointer;
  color:var(--ink);
}
details summary::marker{color:var(--cyan);}
details p{margin-top:0.8em;color:var(--ink-soft);}

/* page nav (prev/next) */
.pagenav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:2.6em;
  padding-top:1.2em;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
}
.pagenav a{text-decoration:none;color:var(--ink-soft);transition:color 0.2s ease;}
.pagenav a:hover{color:var(--cyan-glow);}
.pagenav .dir{display:block;color:var(--gold);font-size:0.68rem;letter-spacing:0.08em;margin-bottom:3px;}
.pagenav .next{text-align:right;margin-left:auto;}

/* footer */
/* AdSense wrapper -- deliberately no height constraint of any kind
   (Google explicitly warns responsive ads must not sit in a fixed/limited
   height container, since actual rendered height varies by device). Width
   comes from being a normal block element, which AdSense's responsive
   code can read to size itself -- no explicit width needed either. */
.sponsored-transmission{
  max-width:var(--max);
  margin:0 auto 2em;
  padding:18px 24px 24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  text-align:center;
}
/* Google sets data-ad-status="unfilled" on the <ins> automatically when
   no ad is served for a request (e.g. a brand-new ad unit still in its
   up-to-2-week "learning" period) -- collapse it so the box shrinks to
   just the label instead of reserving a big empty rectangle. */
.sponsored-transmission ins.adsbygoogle[data-ad-status="unfilled"]{
  display:none !important;
}
.sponsored-transmission-label:has(+ ins[data-ad-status="unfilled"]){
  margin-bottom:0;
}
.sponsored-transmission-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0.7;
  margin:0 0 14px;
}

footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  background:rgba(5,8,15,0.55);
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
footer .brand{color:var(--cyan-glow);letter-spacing:0.05em;}

/* home page section-card grid */
.card-grid{
  position:relative;
  z-index:1;
  padding:0 24px 56px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
a.card-link{
  background:rgba(8,13,24,0.7);
  color:var(--ink);
  text-decoration:none;
  padding:18px;
  display:block;
  transition:background 0.2s ease, transform 0.2s ease;
}
a.card-link:hover{background:rgba(69,211,232,0.1);transform:translateY(-2px);}
.card-label{
  font-family:'IBM Plex Mono', monospace;
  color:var(--cyan);
  font-size:0.7rem;
  letter-spacing:0.06em;
}
a.card-link p{
  margin:6px 0 0;
  font-family:'Big Shoulders', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
}

@media (max-width:760px){
  main{grid-template-columns:1fr;}
  .marginalia{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px;}
  .statusbar{min-height:0;}
  .statusbar-info{grid-template-columns:1fr;padding-right:74px;}
  .statusbar-info div{border-right:none;border-bottom:1px solid var(--line);}
  /* Pin the moon to the corner with absolute positioning rather than
     trusting flex/grid sizing math at narrow widths -- this can't
     possibly stack below the info column, regardless of content length
     or any older cached CSS still lingering on a given viewer's cache. */
  .moon-cell{
    position:absolute;
    top:8px;
    right:8px;
    left:auto;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 8px;
    border:1px solid var(--line);
    background:rgba(5,8,15,0.82);
    z-index:2;
  }
  .moon-cell strong{font-size:0.54rem;text-align:center;line-height:1.15;}
  .moon-cell .moon-link{flex-direction:column;gap:2px;}
  #moon-widget{width:42px;height:42px;}
  /* HELIO occupies the same pinned box at the same size, so the swap
     never nudges the layout on a phone. Kept alongside the moon rules
     rather than in a separate block specifically so the two can't drift
     apart if these numbers are ever changed. */
  .moon-cell .helio-link{flex-direction:column;gap:2px;}
  .moon-cell .helio-link strong{font-size:0.54rem;text-align:center;line-height:1.15;}
  #helio-widget{width:42px;height:42px;}
}

/* ===== Moon Relay Terminal (LUN-RLY-02) ===== */
.relay-grid{
  display:grid;
  grid-template-columns:minmax(180px,240px) 1fr;
  gap:36px;
  align-items:start;
  margin:2em 0;
}
#moon-relay-widget{display:block;width:100%;max-width:240px;margin:0 auto;}
#moon-relay-widget svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 26px rgba(69,211,232,0.22));}

.relay-readout{display:flex;flex-direction:column;gap:22px;}
.relay-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--cyan-glow);
  margin-bottom:5px;
}
.relay-value{
  display:block;
  font-family:'Big Shoulders', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.relay-quote{
  font-family:'IBM Plex Mono', monospace;
  font-weight:400;
  font-style:italic;
  font-size:0.92rem;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  line-height:1.55;
}
.relay-bar{
  position:relative;
  height:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  margin:2px 0 6px;
}
.relay-bar-fill{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
  transition:width 0.7s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.relay-bar-fill.relay-illum-near-full{
  background:linear-gradient(90deg, var(--gold-dim), #FFF3D2, var(--gold));
  box-shadow:0 0 16px rgba(232,169,74,0.75);
}
.relay-illum-pct{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  color:var(--ink-soft);
}
@media (max-width:760px){
  .relay-grid{grid-template-columns:1fr;}
}


/* ===== artifact pages (/artifacts/**) =====
   Layout rules for these pages now live in their own dedicated stylesheet
   (e.g. /artifacts/music/music-artifact.css), loaded only on those pages. */

/* glowing glyph links (secret / cross-links to artifact pages) */
.glyph-link{
  color:var(--cyan);
  text-decoration:none;
  padding:0 2px;
  font-size:0.5em;
  vertical-align:middle;
  transition:color 0.2s ease, text-shadow 0.2s ease;
}
.glyph-link:hover{color:var(--cyan-glow);text-shadow:0 0 8px var(--cyan-glow);}

/* small discoverable crane glyph — interactive artifact link */
.crane-glyph{
  display:inline-flex;
  color:var(--cyan);
  vertical-align:middle;
  margin-left:2px;
  animation:craneGlow 3.4s ease-in-out infinite;
  transition:color 0.2s ease;
}
.crane-glyph svg{display:block;}
.crane-glyph:hover{color:var(--cyan-glow);}
@keyframes craneGlow{
  0%,100%{opacity:0.7;filter:drop-shadow(0 0 2px rgba(69,211,232,0.35));}
  50%{opacity:1;filter:drop-shadow(0 0 8px rgba(69,211,232,0.85));}
}
@media (prefers-reduced-motion:reduce){
  .crane-glyph{animation:none;opacity:0.9;filter:drop-shadow(0 0 4px rgba(69,211,232,0.5));}
}

/* small discoverable saturn glyph — links to the Saturn song artifact */
.saturn-glyph{
  display:inline-flex;
  vertical-align:middle;
  margin-left:4px;
  animation:saturnGlow 3.8s ease-in-out infinite;
  transition:filter 0.2s ease;
}
.saturn-glyph svg{display:block;}
.saturn-glyph:hover{filter:drop-shadow(0 0 8px rgba(69,211,232,0.75));}
@keyframes saturnGlow{
  0%,100%{opacity:0.78;filter:drop-shadow(0 0 2px rgba(69,211,232,0.3));}
  50%{opacity:1;filter:drop-shadow(0 0 7px rgba(69,211,232,0.7));}
}
@media (prefers-reduced-motion:reduce){
  .saturn-glyph{animation:none;opacity:0.9;filter:drop-shadow(0 0 4px rgba(69,211,232,0.5));}
}

/* flowing wave divider — links to ARC-09, sits between the spec table
   and the pagenav on the Calibration page. Three SVG paths with an
   animated (SMIL) gradient stroke each, so the flowing effect works
   without JS and holds up on mobile. */
.wave-divider{
  display:block;
  margin:0.15em 0 0.6em;
  cursor:pointer;
}
.wave-divider:hover{filter:drop-shadow(0 0 6px rgba(70,224,166,0.5));}
.wave-divider svg{display:block;}

/* Purchasing page heading + Saturn glyph: keep them on one line on
   desktop only. Below the mobile breakpoint this intentionally does
   NOT apply -- plain inline flow (text wraps normally, icon flows
   with it) was already confirmed working well on mobile, so mobile
   gets none of this treatment rather than risk it again. */
@media (min-width:761px){
  .purchasing-h1{display:flex;flex-wrap:nowrap;align-items:baseline;column-gap:0.3em;}
  .purchasing-h1 .purchasing-h1-text{white-space:nowrap;flex-shrink:0;}
  .purchasing-h1 .saturn-glyph{flex-shrink:0;}
}

/* Twitch glyph -- links to TWCH-77. Sized via width/height on the <svg>
   itself wherever it's used (small in the Field Test Logs corner, larger
   on the TWCH-77 page), color and glow controlled here so both stay
   consistent with the site's cyan/teal palette rather than Twitch's own
   purple or the pink-neon reference. */
.twitch-glyph{
  display:inline-flex;
  color:var(--cyan);
  cursor:pointer;
  animation:twitchGlow 3.4s ease-in-out infinite;
  transition:filter 0.2s ease;
}
.twitch-glyph svg{display:block;}
.twitch-glyph:hover{color:var(--cyan-glow);filter:drop-shadow(0 0 10px rgba(69,211,232,0.85));}
@keyframes twitchGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(69,211,232,0.45));}
  50%{filter:drop-shadow(0 0 9px rgba(69,211,232,0.8));}
}
@media (prefers-reduced-motion:reduce){
  .twitch-glyph{animation:none;filter:drop-shadow(0 0 5px rgba(69,211,232,0.6));}
}

.field-log{position:relative;}
.field-log .twitch-glyph{position:absolute;bottom:10px;right:12px;}

/* ===================================================================
   DESKTOP READING LAYOUT — numbered document pages 01-08 only
   ===================================================================
   The default layout is `1fr 230px` with `article{max-width:66ch}`,
   which on a 1100px desktop frame left a ~250px dead strip between
   the end of the text column and the marginalia rule.

   This block reclaims that strip on the eight numbered pages ONLY,
   via an opt-in `wide-read` class on <main>. Artifact pages, the home
   page and anomalous-retrieval do NOT carry the class and are
   completely unaffected.

   Strategy REVISED 2026-07-26. The original version capped every block
   at a 74ch reading measure. That measure is narrower than the column
   it sits in, so it reintroduced the very dead strip this block exists
   to remove -- about 100px at a 1100px frame. The column itself is now
   the measure: the doc is capped at 1100px, so a released block can
   never exceed roughly 80 characters no matter how wide the monitor.
   No block is left with a cap narrower than its own container.

   Gate LOWERED from 961px to 860px, and the sidebar, gap and gutters
   now scale with clamp() instead of being fixed. Previously there was
   a cliff: at 960px none of this applied, so the article fell back to
   a 66ch cap inside a 646px column -- the worst dead space on the whole
   site sat just BELOW the old breakpoint. Scaling the furniture keeps
   the reading column growing smoothly across the whole range instead.

   Nothing here uses nowrap, so it cannot drag the page wider than the
   viewport. Below 860px the base two-column layout is untouched.
   =================================================================== */
@media (min-width:860px){
  main.wide-read{
    /* furniture scales so the reading column never gets squeezed at the
       narrow end nor strands space at the wide end */
    grid-template-columns:minmax(0,1fr) clamp(206px, 23vw, 258px);
    gap:clamp(30px, 4.5vw, 52px);
    padding-left:clamp(24px, 3vw, 36px);
    padding-right:clamp(24px, 3vw, 36px);
  }
  main.wide-read > article{max-width:none;}

  /* Every block fills its column. The column is bounded by --max:1100px,
     which is what keeps the line length honest -- see the note above. */
  main.wide-read > article > *,
  main.wide-read > article > details > p,
  main.wide-read > article > details > ul,
  main.wide-read > article > details > ol,
  main.wide-read > article > .field-log > p{max-width:none;}

  /* slightly larger reading size now that there is room for it */
  main.wide-read > article{font-size:1.08rem;}
  main.wide-read > .marginalia{font-size:0.75rem;}
}

/* ===================================================================
   YouTube glyph — links to YT-ADM-44 (Algorithmic Divination Machine)
   ===================================================================
   Same structural idea as .twitch-glyph, but deliberately RED rather
   than the site cyan, so it reads as an external-signal marker. Sized
   entirely by the width/height attributes on the <svg> itself, so one
   class covers both the small FAQ version and the large corner version
   on the artifact page.
   =================================================================== */
.yt-glyph{
  display:inline-flex;
  color:#FF3B3B;
  cursor:pointer;
  animation:ytGlyphGlow 3.6s ease-in-out infinite;
  transition:color 0.2s ease, filter 0.2s ease;
}
.yt-glyph svg{display:block;}
.yt-glyph:hover{color:#FF7A7A;filter:drop-shadow(0 0 11px rgba(255,59,59,0.9));}
@keyframes ytGlyphGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,59,59,0.45));}
  50%{filter:drop-shadow(0 0 10px rgba(255,59,59,0.85));}
}
@media (prefers-reduced-motion:reduce){
  .yt-glyph{animation:none;filter:drop-shadow(0 0 5px rgba(255,59,59,0.6));}
}

/* glyph parked at the lower right of an expanded <details> answer,
   mirroring how the crane sits in the tech-support answer */
.faq-glyph-row{
  margin:0.2em 0 0;
  text-align:right;
  line-height:1;
}

/* ============================================================
   DEPARTMENT STAMPS — CEFR-SB-6 filing room discovery links.
   Rendered as small SVG circle glyphs — like R.E.'s handwritten
   stamp in the margins, but in the site's cyan palette.
   Subdued by default. Slightly brighter on hover. No animation.
   After recovery the circle fades to a ghost impression.
   ============================================================ */
.dept-stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  width:26px;
  height:26px;
  margin-left:7px;
  position:relative;
  top:-1px;
  text-decoration:none;
  color:rgba(120,180,200,0.35);
  opacity:0.9;
  transition:color 0.2s ease, opacity 0.2s ease;
  flex-shrink:0;
}
.dept-stamp svg{display:block;overflow:visible;}
.dept-stamp:hover{
  color:rgba(69,211,232,0.9);
  opacity:1;
  text-decoration:none;
}
/* recovered: ghost circle, the doc has moved on */
.dept-stamp.recovered{
  color:rgba(70,224,166,0.18);
  opacity:0.6;
  cursor:default;
  pointer-events:none;
}
/* sidebar placement */
.marginalia .dept-stamp{
  top:0;
  margin-left:0;
  margin-top:6px;
  display:flex;
}
@media (prefers-reduced-motion:reduce){
  .dept-stamp{transition:none;}
}

/* ── Critique the Apparatus (injected by script.js) ── */
.pagenav{flex-wrap:wrap;}
.critique-link{
  text-align:center;
  align-self:flex-start;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color 0.2s ease;
}
.critique-link:hover{color:var(--cyan-glow);}
.critique-link .dir{color:var(--gold);}
.critique-footer-row{margin-top:1.1em;}
.critique-link-footer{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  text-align:left;
}
.critique-link-footer .dir{
  display:block;font-size:0.68rem;letter-spacing:0.08em;margin-bottom:3px;
  color:var(--gold);
}
@media (max-width:600px){
  /* Three controls will not sit on one phone line; give the middle
     one its own row rather than letting the labels collide. */
  .pagenav{gap:14px;}
  .critique-link{order:3;flex-basis:100%;text-align:left;align-self:auto;
                 padding-top:1em;border-top:1px solid var(--line);}
}