/* ============================================================
   CRYPTO ASTRO DESIGN SYSTEM
   Implements brand/BRAND_IDENTITY.md. That file is the source of
   truth. Nothing here is invented.
   This is the only stylesheet on the site.
   Rule for future builds: never add a color or font that is not
   in BRAND_IDENTITY.md, and never add a second stylesheet.
   ============================================================ */
:root {
  /* The eight brand colors, exactly as documented, with their budgets */
  --navy:      #06141C;  /* Cosmic Navy     ~50%  primary background   */
  --teal:      #0D5555;  /* Abundance Teal  ~15%  the signature color  */
  --emerald:   #0C493C;  /* Emerald         ~10%  earth, growth        */
  --jade:      #268477;  /*  Jade            ~5%  small accents only   */
  --gold:      #D6A554;  /* Celestial Gold   ~6%  spend it sparingly   */
  --starlight: #F0CC8A;  /* Starlight Gold        within gold budget   */
  --copper:    #B86B3D;  /* Cosmic Copper    ~3%  the human accent     */
  --moon:      #F5F1E8;  /* Moonlight        ~7%  primary text         */

  /* Transparencies of the eight above. No new colors are introduced.
     The ratios noted are measured contrast against Cosmic Navy. */
  --moon-70:   rgba(245,241,232,0.72);  /* body text          8.9:1 */
  --moon-55:   rgba(245,241,232,0.60);  /* meta text          6.6:1 */
  --surface:   rgba(13,85,85,0.14);     /* card fill, teal over navy */
  --surface-2: rgba(13,85,85,0.22);     /* raised card fill          */
  --hair:      rgba(245,241,232,0.14);  /* moonlight hairline        */
  --hair-gold: rgba(214,165,84,0.28);   /* gold hairline             */
  --glow-gold: rgba(214,165,84,0.22);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* Keyboard and screen-reader users otherwise have to tab through the whole
   nav on every single page before reaching content. Hidden until focused. */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:100;
  background:var(--gold); color:var(--navy); font-family:'Raleway',sans-serif;
  font-weight:700; font-size:0.78rem; letter-spacing:0.08em;
  padding:12px 20px; border-radius:2px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus { top:16px; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--navy); color:var(--moon);
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased;
}

/* Cinzel is the display face. Brand rule: never for paragraphs. */
h1, h2, h3, .display {
  font-family:'Cinzel',Georgia,serif; font-weight:500;
  line-height:1.18; letter-spacing:0.01em; color:var(--moon);
}
h1 { font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:0.08em; }
h2 { font-size:clamp(1.55rem,3.4vw,2.3rem); margin-bottom:0.9rem; }
h3 { font-size:1.12rem; margin-bottom:0.45rem; letter-spacing:0.04em; }
p { margin-bottom:1.05rem; color:var(--moon-70); }
strong { color:var(--moon); font-weight:600; }
a {
  color:var(--moon); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hair-gold); transition:text-decoration-color .2s;
}
a:hover { text-decoration-color:var(--gold); }

.wrap { max-width:1180px; margin:0 auto; padding:0 26px; }
.narrow { max-width:760px; margin:0 auto; padding:0 26px; }
.center { text-align:center; }

/* Raleway carries nav, labels, buttons and small uppercase statements.
   Generous letter spacing is a brand rule, not a preference. */
.eyebrow, .btn, .nav a.item, .nav a.cta, .tag, .triad, .kicker,
.menu-btn, .layer-label, .go, .col-h, .post-meta {
  font-family:'Raleway',sans-serif; text-transform:uppercase;
}
.eyebrow {
  color:var(--gold); letter-spacing:0.24em; font-size:0.7rem;
  font-weight:600; margin-bottom:0.9rem;
}

/* ---------- Header ---------- */
header.site {
  position:sticky; top:0; z-index:50;
  background:rgba(6,20,28,0.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav {
  display:flex; align-items:center; gap:22px; max-width:1220px;
  margin:0 auto; padding:16px 26px; flex-wrap:wrap;
}
.logo {
  font-family:'Cinzel',Georgia,serif; font-size:1.16rem; font-weight:600;
  letter-spacing:0.16em; color:var(--moon); text-decoration:none;
  margin-right:auto; white-space:nowrap;
}
.logo span { color:var(--gold); }
.nav a.item {
  color:var(--moon-70); text-decoration:none; font-size:0.7rem;
  letter-spacing:0.16em; font-weight:500; transition:color .2s;
}
.nav a.item:hover, .nav a.item.active { color:var(--moon); }
.nav a.cta {
  background:var(--gold); color:var(--navy); text-decoration:none;
  padding:9px 20px; border-radius:2px; font-weight:700;
  font-size:0.68rem; letter-spacing:0.16em;
  transition:background .2s, box-shadow .2s;
}
.nav a.cta:hover { background:var(--starlight); box-shadow:0 0 24px var(--glow-gold); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding:84px 0 34px; }
.hero .wrap { position:relative; z-index:2; }

/* Homepage only: type on one side, the brand artwork on the other */
.hero-grid {
  display:grid; grid-template-columns:1.02fr 0.98fr;
  gap:56px; align-items:center;
}
.kicker {
  color:var(--copper); letter-spacing:0.2em; font-size:0.68rem;
  font-weight:600; margin-bottom:1.5rem;
}
.hero h1 { margin-bottom:0; }
.hero h1 .accent { color:var(--gold); display:block; }
.descriptor {
  font-family:'Cinzel',Georgia,serif; color:var(--moon);
  font-size:clamp(0.92rem,1.5vw,1.08rem); letter-spacing:0.13em;
  margin:1.1rem 0 0;
}
/* The hairline flourish from the brand header artwork */
.flourish { display:flex; align-items:center; gap:14px; margin:1.3rem 0; }
.flourish::before, .flourish::after { content:""; height:1px; flex:1; background:var(--hair-gold); }
.flourish span { color:var(--gold); font-size:0.7rem; letter-spacing:0.3em; }
.triad {
  color:var(--gold); letter-spacing:0.28em; font-size:0.74rem;
  font-weight:600; margin-bottom:1.6rem;
}
.hero p.sub { font-size:1.1rem; max-width:34em; margin-bottom:2.1rem; }
.hero .proofline {
  margin-top:2.4rem; display:flex; gap:10px 26px; flex-wrap:wrap;
  color:var(--moon-55); font-size:0.82rem;
}
.hero .proofline span::before { content:"✦ "; color:var(--copper); }

/* Hero figure.
   The source artwork is one very wide banner with the wordmark baked into
   its right half. Only the left portion is wanted (Jack, the planet, the
   zodiac wheel, the mountains and the candles), because live text stays
   readable on a phone and text inside an image does not.
   That region used to be selected at render time by overflowing the full
   1983px banner and clipping it, which made every visitor download the
   whole banner to see 45% of it. It is now pre-cropped to exactly that
   region and saved as brand-hero-crop.webp (904x715, 129KB against the
   banner's 281KB), so the browser downloads only what it displays.
   The full banner stays in images/ because it is the og:image for social
   shares, where the wordmark half is wanted. */
.hero-figure {
  position:relative; overflow:hidden; aspect-ratio:904/715;
  border-radius:3px; border:1px solid var(--hair-gold);
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.hero-figure img {
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Settles the artwork onto the navy instead of stopping at a hard edge */
.hero-figure::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,20,28,0.55) 0%, rgba(6,20,28,0) 38%),
    linear-gradient(0deg, rgba(6,20,28,0.5) 0%, rgba(6,20,28,0) 30%);
}

/* Every page except the homepage: a short centered hero */
.hero.small { padding:64px 0 34px; text-align:center; }
.hero.small h1 { font-size:clamp(2rem,4.4vw,3.1rem); }
.hero.small p.sub { margin:1.2rem auto 0; max-width:38em; }

/* Starfield and orbital geometry. Space is luxury, so both stay faint. */
.stars, .stars2 { position:absolute; inset:0; pointer-events:none; }
.stars {
  opacity:0.5;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(245,241,232,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 68%, rgba(245,241,232,0.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 52%, rgba(240,204,138,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 14%, rgba(245,241,232,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 88%, rgba(245,241,232,0.4) 50%, transparent 51%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
.stars2 {
  opacity:0.45;
  background:
    radial-gradient(1px 1px at 62% 30%, rgba(245,241,232,0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 78% 62%, rgba(240,204,138,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 26%, rgba(245,241,232,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 82%, rgba(245,241,232,0.35) 50%, transparent 51%);
  animation:twinkle 11s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity:0.28; } to { opacity:0.55; } }
.orbit {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1100px; height:1100px; pointer-events:none; opacity:0.55;
}
.orbit circle.ring { fill:none; stroke:var(--hair-gold); stroke-width:1; }
.orbit circle.ring.dashed { stroke-dasharray:2 10; stroke:var(--hair); }
.orbit .planet { fill:var(--gold); opacity:0.8; }
.orbit-spin { transform-origin:600px 600px; animation:spin 120s linear infinite; }
.orbit-spin.slow { animation-duration:200s; animation-direction:reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
/* The homepage hero uses one quiet arc instead, because the artwork
   already carries the zodiac geometry. */
.hero .arc {
  position:absolute; left:-14%; top:50%; transform:translateY(-50%);
  width:820px; height:820px; opacity:0.5; pointer-events:none;
}
.hero .arc circle { fill:none; stroke:var(--hair-gold); stroke-width:1; }
.hero .arc circle.dashed { stroke-dasharray:2 10; stroke:var(--hair); }

@media (prefers-reduced-motion:reduce) {
  .stars, .stars2, .orbit-spin, .orbit-spin.slow { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .grid.stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; text-decoration:none; font-weight:700;
  padding:15px 30px; border-radius:2px; font-size:0.72rem;
  letter-spacing:0.18em;
  transition:background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.btn.gold { background:var(--gold); color:var(--navy); }
.btn.gold:hover { background:var(--starlight); box-shadow:0 0 30px var(--glow-gold); }
.btn.ghost { background:transparent; color:var(--moon); border:1px solid var(--hair); }
.btn.ghost:hover { border-color:var(--moon-70); }
.btn.teal { background:var(--teal); color:var(--moon); }
.btn.teal:hover { background:var(--jade); }
.btn + .btn { margin-left:12px; }

/* ---------- Sections ---------- */
section.band { padding:88px 0; position:relative; }
/* The sitewide 92px hero base plus 88px band top used to leave 180px of dead
   air between the hero and the first line of the next section: too much
   empty navy on nearly every page. This targets only that specific gap
   (hero immediately into the section after it), so the normal 88px rhythm
   between later sections on the same page is untouched. */
.hero + section.band { padding-top:44px; }
/* Section backgrounds stay in the navy family, as the brand requires.
   Each is a brand color at low opacity over navy, never a new color. */
section.band.alt  { background:linear-gradient(rgba(13,85,85,0.13), rgba(13,85,85,0.13)); }
section.band.dark { background:linear-gradient(rgba(12,73,60,0.22), rgba(12,73,60,0.22)); overflow:hidden; }
section.band.dark .narrow, section.band.dark .wrap { position:relative; z-index:2; }
.band.dark .stars-static {
  position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background:
    radial-gradient(1px 1px at 12% 30%, rgba(245,241,232,0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 40% 70%, rgba(240,204,138,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 25%, rgba(245,241,232,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 60%, rgba(240,204,138,0.5) 50%, transparent 51%);
}
.rule { height:1px; background:var(--hair); border:0; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* Cards in a grid cascade in one after another instead of appearing as one
   flat block. The .stagger class is added by JS only, so a card is never
   hidden unless JS is confirmed running to also reveal it again. */
.grid.stagger > * { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in .grid.stagger > * { opacity:1; transform:none; }
.grid.stagger > *:nth-child(2) { transition-delay:.09s; }
.grid.stagger > *:nth-child(3) { transition-delay:.18s; }
.grid.stagger > *:nth-child(4) { transition-delay:.27s; }
.grid.stagger > *:nth-child(5) { transition-delay:.36s; }
.grid.stagger > *:nth-child(6) { transition-delay:.45s; }

/* ---------- Cards ---------- */
.grid { display:grid; gap:24px; margin-top:2.6rem; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.two { grid-template-columns:repeat(2,1fr); }
.card {
  background:var(--surface); border:1px solid var(--hair);
  border-radius:3px; padding:32px 28px; text-align:left;
  transition:border-color .25s, background .25s, transform .25s;
}
.card:hover { border-color:var(--hair-gold); background:var(--surface-2); transform:translateY(-3px); }
.card .num {
  font-family:'Cinzel',Georgia,serif; font-size:0.95rem; font-weight:600;
  color:var(--gold); border:1px solid var(--hair-gold);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
/* Copper was the first choice for these micro labels, but it measured
   4.3:1 on the card fill, under the 4.5:1 minimum. Copper stays on plain
   navy, where it passes. */
.card .layer-label {
  font-size:0.62rem; font-weight:600; letter-spacing:0.2em;
  color:var(--moon-55); margin-bottom:6px;
}
.card p:last-child { margin-bottom:0; }

/* ---------- Hero call to action (free-guide.html) ----------
   A reader who is already sold should not have to scroll to act, so the same
   sign-up trigger sits in the hero as well as in the offer card below. */
.hero-cta { margin-top:2.1rem; margin-bottom:0; }
.hero-fine { font-size:0.82rem; color:var(--moon-55); margin-top:14px; }

/* ---------- The offer card (free-guide.html) ----------
   The cover sits inside the call to action rather than higher up the page, so
   the reader sees the thing and the button that gets it in one glance. Beside
   the text on a desktop, above it on a phone, where a side by side would leave
   both halves too narrow to read. */
.offer-card { display:flex; align-items:center; gap:32px; text-align:left; }
.offer-cover {
  width:150px; height:auto; flex-shrink:0; border-radius:3px; display:block;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,0.55));
}
.offer-text { flex:1; }
.offer-text h3 { margin-top:0; }
.offer-text .btn { margin-top:4px; }
.offer-text .fine {
  font-size:0.8rem; color:var(--moon-55); margin-top:16px; margin-bottom:0;
}
a.cardlink { text-decoration:none; color:inherit; display:block; }
a.cardlink .go {
  color:var(--gold); font-weight:600; font-size:0.66rem;
  letter-spacing:0.18em; margin-bottom:0;
}
.card .glyph { width:34px; height:34px; margin-bottom:18px; }
.card .glyph circle, .card .glyph line, .card .glyph path, .card .glyph polyline {
  stroke:var(--gold); fill:none; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Method rule callout */
.rulebox {
  margin:2.8rem auto 0; max-width:600px; text-align:center;
  border-top:1px solid var(--hair-gold); border-bottom:1px solid var(--hair-gold);
  padding:22px 26px;
  font-family:'Cinzel',Georgia,serif; font-size:1.15rem; letter-spacing:0.05em;
  color:var(--moon);
}
.rulebox .small {
  display:block; font-family:'Inter',sans-serif; font-size:0.82rem;
  letter-spacing:0; color:var(--moon-55); margin-top:8px; text-transform:none;
}

/* ---------- Track record calls ---------- */
.call {
  background:var(--surface); border:1px solid var(--hair);
  border-radius:3px; padding:22px 26px; margin-bottom:14px;
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  transition:border-color .25s;
}
.call:hover { border-color:var(--hair-gold); }
/* Each tag pair was contrast checked against its own pill background */
.tag {
  font-size:0.62rem; font-weight:700; letter-spacing:0.16em;
  padding:6px 13px; border-radius:2px; white-space:nowrap; margin-top:5px;
}
.tag.hit     { background:var(--emerald); color:var(--moon); border:1px solid var(--jade); }
.tag.miss    { background:var(--copper);  color:var(--navy); }
.tag.partial { background:var(--teal);    color:var(--moon); border:1px solid var(--hair-gold); }
.call .body { flex:1; min-width:250px; }
.call .body p { margin-bottom:0.35rem; }
.call .meta { font-size:0.83rem; color:var(--moon-55); }
.tag.pending { background:transparent; color:var(--moon-55); border:1px solid var(--hair); }
.honesty {
  border-left:1px solid var(--gold); padding:16px 22px;
  background:var(--surface); font-size:0.94rem; margin-top:1.8rem;
}
.honesty p:last-child { margin-bottom:0; }

/* ---------- Track record table ---------- */
/* Every number here is counted from /data/track-record.json at load time.
   Nothing in this block styles a hand typed figure, because there are none. */
.tr-stats { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 1.8rem; }
.tr-stat {
  flex:1 1 150px; background:var(--surface); border:1px solid var(--hair);
  border-radius:3px; padding:16px 18px; text-align:center;
}
/* Only the headline stat (calls published) spends gold. The other two are
   methodology detail, not the trust signal, so they read in moonlight at a
   smaller size rather than competing for the same weight. */
.tr-stat strong {
  display:block; font-family:'Cinzel',Georgia,serif; font-weight:500;
  font-size:1.4rem; color:var(--moon); line-height:1.2;
}
.tr-stat.lead { border-color:var(--hair-gold); }
.tr-stat.lead strong { font-size:1.9rem; color:var(--gold); }
.tr-stat span {
  display:block; font-family:'Raleway',sans-serif; font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--moon-55); margin-top:6px;
}
.tr-controls {
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between; margin:0 0 1rem;
  padding:14px 0 16px; border-bottom:1px solid var(--hair);
  /* On a page with 99 rows the controls would otherwise scroll out of reach.
     Sticks just under the sticky header, using the height JS measures into
     --header-h so it never gaps or overlaps if the header's own height changes. */
  position:sticky; top:var(--header-h, 72px); z-index:20;
  background:rgba(6,20,28,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.tr-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tr-search {
  width:auto; min-width:200px; margin-bottom:0; padding:9px 13px; font-size:0.86rem;
}
.tr-filter {
  font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
  background:transparent; color:var(--moon-70); border:1px solid var(--hair);
  border-radius:2px; padding:9px 15px; transition:border-color .2s, color .2s, background .2s;
}
.tr-filter:hover { border-color:var(--moon-70); color:var(--moon); }
.tr-filter.on { background:var(--teal); color:var(--moon); border-color:var(--hair-gold); }
.tr-filter .n { color:var(--gold); margin-left:4px; }
.tr-filter.on .n { color:var(--starlight); }
.tr-yearwrap {
  font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--moon-55);
  display:flex; align-items:center; gap:10px;
}
.tr-yearwrap select {
  font-family:'Inter',sans-serif; font-size:0.86rem; letter-spacing:0;
  text-transform:none; color:var(--moon); background:var(--navy);
  border:1px solid var(--hair); border-radius:2px; padding:8px 10px;
}
.tr-showing { font-size:0.83rem; color:var(--moon-55); margin:0 0 1.2rem; }
.tr-tab { width:100%; border-collapse:collapse; font-size:0.92rem; }
.tr-tab th {
  font-family:'Raleway',sans-serif; font-size:0.68rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--moon-55);
  text-align:left; padding:0 14px 12px; border-bottom:1px solid var(--hair-gold);
}
.tr-tab td {
  padding:16px 14px; border-bottom:1px solid var(--hair);
  vertical-align:top; color:var(--moon-70);
}
.tr-tab tbody tr:hover { background:var(--surface); }
/* Column hints so the date and outcome columns do not collapse into a
   one word per line ribbon when a cell holds a short phrase. */
.tr-tab th:nth-child(1), .tr-tab td:nth-child(1) { width:12%; min-width:10em; }
.tr-tab th:nth-child(2) { width:36%; }
.tr-tab th:nth-child(3), .tr-tab td:nth-child(3) { width:9%; }
.tr-tab th:nth-child(4), .tr-tab td:nth-child(4) { width:21%; }
.tr-tab th:nth-child(5), .tr-tab td:nth-child(5) { width:22%; }
.tr-tab td:nth-child(2) { color:var(--moon); min-width:15em; }
.tr-id {
  display:block; font-family:'Raleway',sans-serif; font-size:0.66rem;
  letter-spacing:0.12em; color:var(--moon-55); margin-top:5px;
}
.tr-vt { display:block; font-size:0.78rem; color:var(--moon-55); margin-top:4px; }
.tr-missing { color:var(--moon-55); font-style:italic; }
.tr-status {
  background:var(--surface); border:1px solid var(--hair-gold);
  border-radius:3px; padding:16px 20px; font-size:0.92rem; color:var(--moon-70);
}
.tr-empty {
  text-align:center; padding:40px 20px; color:var(--moon-55);
  border:1px dashed var(--hair); border-radius:3px; font-size:0.95rem;
}
/* Under 780px the table stops being a grid and each entry becomes a block,
   because five columns cannot be read on a phone without sideways scrolling. */
@media (max-width: 780px) {
  .tr-tab thead { position:absolute; left:-9999px; }
  .tr-tab tr {
    display:block; background:var(--surface); border:1px solid var(--hair);
    border-radius:3px; padding:6px 4px; margin-bottom:14px;
  }
  /* The desktop column widths must be undone here, or a block level cell is
     still only 9% wide and every value breaks one word per line. */
  .tr-tab td, .tr-tab td:nth-child(1), .tr-tab td:nth-child(2),
  .tr-tab td:nth-child(3), .tr-tab td:nth-child(4), .tr-tab td:nth-child(5) {
    display:block; border:0; padding:7px 14px; width:auto; min-width:0;
  }
  /* Label sits on the same line as the value, so 107 entries do not turn into
     a page five screens taller than it needs to be on a phone. */
  .tr-tab td::before {
    content:attr(data-label); display:inline-block; min-width:7.5em;
    font-family:'Raleway',sans-serif; font-size:0.62rem; font-weight:700;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--moon-55);
    vertical-align:baseline; padding-right:10px;
  }
  .tr-tab td:nth-child(2) { font-size:1rem; }
  .tr-tab td:nth-child(2)::before { display:block; margin-bottom:4px; }
  .tr-id { display:inline; margin-left:8px; }
  .tr-vt { margin-left:0; }
  .tr-controls { justify-content:flex-start; }
}

/* ---------- Free guide band ---------- */
.ebook-cardrow, .ebook-row {
  display:flex; gap:44px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:1rem;
}
/* Was a book shape drawn in CSS, standing in for artwork that did not exist.
   Jack supplied the real cover on 2026-08-18, so this now sizes an image. */
.ebook-cover {
  width:190px; height:auto; border-radius:3px; flex-shrink:0; display:block;
  filter:drop-shadow(0 22px 50px rgba(0,0,0,0.55));
}

/* ---------- Photos ---------- */
/* Circular frame. The face is positioned by CSS so the source photo is
   never altered. The source is a wide landscape shot, so the image is
   scaled to 260% of the frame and pulled left to centre the face. */
.avatar {
  width:200px; height:200px; border-radius:50%; overflow:hidden;
  position:relative; margin:0 auto 1.8rem;
  border:1px solid var(--hair-gold); box-shadow:0 18px 44px rgba(0,0,0,0.5);
}
.avatar img { position:absolute; width:260%; left:-91%; top:-2.5%; display:block; }
/* Settles the photo onto the navy instead of stopping at a hard edge */
.avatar::after {
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 38%, rgba(6,20,28,0) 55%, rgba(6,20,28,0.42) 100%);
}
/* A finished circular badge, not a snapshot. It brings its own gold ring, so
   this variant drops the frame border and the vignette and stops the crop that
   .avatar applies to rectangular photos. The circular clip stays, which trims
   the square corners off the artwork. */
.avatar.badge { border:0; }
.avatar.badge img { position:static; width:100%; height:100%; }
.avatar.badge::after { display:none; }
.avatar.badge.lg { width:260px; height:260px; }

.photo-wide {
  width:100%; border-radius:3px; display:block;
  margin:0 0 2rem; border:1px solid var(--hair-gold);
}

/* ---------- Long-form pages: About, Method, Learn posts, legal ---------- */
.note {
  background:var(--surface); border:1px solid var(--hair-gold);
  border-radius:3px; padding:16px 20px; font-size:0.92rem;
}
.note p:last-child { margin-bottom:0; }
ul.clean { list-style:none; }
ul.clean li { padding-left:1.6em; position:relative; margin-bottom:0.6rem; color:var(--moon-70); }
ul.clean li::before { content:"✦"; position:absolute; left:0; color:var(--gold); }
.prose ul { margin:0 0 1rem 1.3rem; }
.prose li { margin-bottom:0.4rem; color:var(--moon-70); }
.prose h2 { margin-top:2.4rem; }
.prose h2:first-child { margin-top:0; }
blockquote {
  border-left:1px solid var(--gold); padding-left:20px;
  color:var(--moon-55); font-style:italic; margin:1.4rem 0;
}
.post-meta {
  color:var(--moon-55); font-size:0.68rem; letter-spacing:0.18em;
  margin-bottom:1.6rem;
}

/* ---------- Footer ---------- */
footer.site {
  background:linear-gradient(rgba(13,85,85,0.10), rgba(13,85,85,0.10));
  border-top:1px solid var(--hair);
  padding:60px 0 40px; font-size:0.86rem; color:var(--moon-55);
}
footer.site .cols { display:flex; gap:52px; flex-wrap:wrap; margin-bottom:32px; }
footer.site .col-h {
  color:var(--moon); font-size:0.66rem; letter-spacing:0.2em;
  font-weight:600; margin-bottom:12px; display:block;
}
footer.site a { color:var(--moon-70); text-decoration:none; display:block; padding:3px 0; }
footer.site a:hover { color:var(--moon); }
footer.site .disc {
  border-top:1px solid var(--hair); padding-top:24px;
  line-height:1.7; font-size:0.78rem; color:var(--moon-55);
}

/* ---------- Forms ---------- */
input[type="email"], input[type="text"] {
  width:100%; padding:13px 15px; border:1px solid var(--hair);
  border-radius:2px; font-size:1rem; margin-bottom:10px;
  font-family:'Inter',sans-serif;
  background:var(--surface); color:var(--moon);
}
input::placeholder { color:var(--moon-55); }
input:disabled { opacity:0.75; }

/* Visible keyboard focus everywhere, in Celestial Gold */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ---------- Mobile ---------- */
.menu-btn {
  display:none; background:none; border:1px solid var(--hair);
  color:var(--moon); border-radius:2px; padding:8px 13px;
  font-size:0.66rem; letter-spacing:0.16em; font-weight:600; cursor:pointer;
}
@media (max-width:900px) {
  .menu-btn { display:block; order:2; }
  .nav a.cta { order:1; margin-left:auto; }
  .logo { margin-right:0; font-size:1rem; }
  .nav { justify-content:space-between; gap:10px; padding:13px 16px; }
  .nav a.cta { padding:8px 14px; font-size:0.62rem; }
  .nav a.item { display:none; width:100%; padding:8px 0; order:3; font-size:0.75rem; }
  .nav.open a.item { display:block; }
}
@media (max-width:860px) {
  .offer-card { flex-direction:column; text-align:center; gap:26px; }
  .offer-cover { width:170px; }
  .hero-grid { grid-template-columns:1fr; gap:36px; }
  .hero-figure { order:-1; }
  .hero .arc { display:none; }
  .grid.three, .grid.two { grid-template-columns:1fr; }
  .btn + .btn { margin-left:0; margin-top:12px; }
  .btn { display:block; text-align:center; }
  section.band { padding:64px 0; }
  .hero + section.band { padding-top:34px; }
  .hero { padding:52px 0 26px; }
  .hero.small { padding:48px 0 26px; }
  .orbit { width:820px; height:820px; }
}