/* ===========================================================
   Dear Mr. Estes — site styles
   Palette from the book cover: cerulean structure, fuchsia accent.
   Swappable light / dark. Default = light (Vern's preference).
   =========================================================== */

:root{
  /* LIGHT (default) */
  --bg:#f4f2ec; --bg-2:#eae7dd; --card:#ffffff; --card-2:#f7f5ef;
  --ink:#17212c; --ink-soft:#48525f; --ink-dim:#6b7480;
  --line:rgba(20,28,40,.14); --line-2:rgba(20,28,40,.07);
  --blue:#2c7cb0; --blue-deep:#1f6491; --blue-glow:rgba(44,124,176,.22);
  --fuchsia:#d81b7a; --fuchsia-deep:#b21363; --fuchsia-glow:rgba(216,27,122,.22);
  --shadow:0 1px 2px rgba(20,28,40,.07),0 16px 40px rgba(20,28,40,.13);
  --rk-body:#243240; --rk-nose:#3a4a5a; --rk-fin:#586777;

  /* shared */
  --maxw:1160px; --prose:62ch;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}
:root[data-theme="dark"]{
  --bg:#0e0f13; --bg-2:#14161c; --card:#181b22; --card-2:#1e222b;
  --ink:#eef1f6; --ink-soft:#a3abba; --ink-dim:#7b8494;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --blue:#3a9bd6; --blue-deep:#2b7fb4; --blue-glow:rgba(58,155,214,.5);
  --fuchsia:#ff3d9a; --fuchsia-deep:#e01f80; --fuchsia-glow:rgba(255,61,154,.45);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.55);
  --rk-body:#eef1f6; --rk-nose:#cfd6e0; --rk-fin:#aeb7c5;
}

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .25s ease,color .25s ease}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;font-weight:700;color:var(--blue)}
h1,h2,h3{font-family:var(--serif);font-weight:700;text-wrap:balance;line-height:1.05;margin:0}
:focus-visible{outline:2px solid var(--fuchsia);outline-offset:3px;border-radius:2px}

/* ---- buttons ---- */
.btn{font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:13px 24px;border-radius:3px;text-decoration:none;display:inline-block;transition:.18s;
  border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 22px var(--blue-glow)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-1px)}
.btn-ghost{border-color:color-mix(in srgb,var(--blue) 55%,transparent);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn[hidden]{display:none}   /* class display would otherwise beat the UA [hidden] rule */

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--sans);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--fuchsia);box-shadow:0 0 0 4px color-mix(in srgb,var(--fuchsia) 22%,transparent)}
.nav .text{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--ink-dim);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:24px;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.03em}
.nav-links a{text-decoration:none;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;transition:.18s}
.nav-links a:hover{color:var(--ink);border-color:var(--fuchsia)}
.nav-cta{font-family:var(--sans);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fuchsia);text-decoration:none;border:1px solid color-mix(in srgb,var(--fuchsia) 45%,transparent);
  padding:8px 14px;border-radius:3px;transition:.18s}
.nav-cta:hover{background:var(--fuchsia);color:#fff}
.theme-btn{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;cursor:pointer;
  color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;transition:.18s;flex:0 0 auto}
.theme-btn:hover{border-color:var(--blue);color:var(--blue)}
.theme-btn .i-dark{display:none}
:root[data-theme="dark"] .theme-btn .i-light{display:none}
:root[data-theme="dark"] .theme-btn .i-dark{display:block}
@media(max-width:940px){.nav .text{display:none}}
@media(max-width:820px){.nav-links{display:none}}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2)}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 28%, var(--blue-glow), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, var(--fuchsia-glow), transparent 70%)}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:76px 24px 88px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-copy .eyebrow{color:var(--blue)}
.hero h1{font-size:clamp(3rem,7.5vw,5.6rem);margin:16px 0 0;letter-spacing:-.015em}
.hero-sub{font-family:var(--sans);color:var(--blue);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.92rem;margin:20px 0 0;max-width:32ch;line-height:1.5}
.hero-authors{font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.76rem;color:var(--ink-dim);margin:16px 0 0}
.hero-blurb{color:var(--ink-soft);font-size:1.08rem;margin:22px 0 0;max-width:46ch}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---- orbit / book art: tilted elliptical orbit; rocket flies tangent ---- */
.hero-art{display:flex;justify-content:center;overflow:hidden}
.orbit-stage{position:relative;width:460px;height:460px;display:grid;place-items:center;margin-inline:auto}
.saturn-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--blue)}
.saturn-rings.back{z-index:1;clip-path:inset(0 0 50% 0)}   /* top arc — behind the book */
.saturn-rings.front{z-index:3;clip-path:inset(50% 0 0 0)}  /* bottom arc — in front of the book */
.book-frame{position:relative;display:block;z-index:2;width:225px;border-radius:2px;overflow:hidden;
  box-shadow:var(--shadow),0 0 0 1px var(--line);transition:transform .3s}
.book-frame:hover{transform:translateY(-4px) rotate(-.6deg)}
.book-frame img{width:100%}
/* the rocket follows the ellipse and auto-rotates tangent (never backward),
   weaving BEHIND the book on the top arc and IN FRONT on the bottom arc */
.rocket-icon{position:absolute;top:0;left:0;width:62px;pointer-events:none;
  offset-path:path("M 37.7 285.1 A 200 95 -16 1 1 422.3 174.9 A 200 95 -16 1 1 37.7 285.1");
  offset-rotate:auto;offset-anchor:center;
  /* path eases per half → slow at the side curves, fast across top & bottom (slingshot);
     depth/size runs on a steady track so it stays synced with position */
  animation:flypath 28s cubic-bezier(.72,0,.28,1) infinite, flydepth 28s linear infinite}
@keyframes flypath{
  0%  {offset-distance:0%}
  50% {offset-distance:50%}
  100%{offset-distance:100%}
}
@keyframes flydepth{
  0%  {z-index:1; transform:scale(.66); opacity:.48}   /* left side → top arc: behind */
  25% {transform:scale(.6);  opacity:.45}              /* top arc — far — smallest/dimmest */
  49% {z-index:1}
  50% {z-index:3; transform:scale(.9);  opacity:.8}    /* right side → bottom arc: in front */
  75% {transform:scale(1.1); opacity:1}                /* bottom arc — near — biggest/brightest */
  100%{z-index:1; transform:scale(.66); opacity:.48}
}
.rocket-icon svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 6px var(--fuchsia-glow))}
/* rocket parts recolour per theme so it reads on light or dark */
.rk-body{fill:var(--rk-body)} .rk-nose{fill:var(--rk-nose)} .rk-fin{fill:var(--rk-fin)}
.rk-band{fill:var(--blue)} .rk-tower{stroke:var(--rk-nose);stroke-width:1.8;stroke-linecap:round}
.ex-a{stop-color:var(--fuchsia);stop-opacity:1}
.ex-b{stop-color:var(--fuchsia);stop-opacity:.5}
.ex-c{stop-color:var(--fuchsia);stop-opacity:0}
@media(prefers-reduced-motion:reduce){.rocket-icon{animation:none;offset-distance:24%}}
@media(max-width:560px){.orbit-stage{transform:scale(.66);margin:-78px auto -70px}}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;gap:44px;padding:56px 24px 68px}.hero-art{order:-1}}

/* ---- sections ---- */
section{padding:92px 0;position:relative;overflow:hidden}
/* subtle blue/fuchsia glow woven through each panel, alternating corners */
section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 38% at 88% 6%, color-mix(in srgb,var(--blue) 13%,transparent), transparent 72%)}
section:nth-of-type(even)::before{
  background:radial-gradient(44% 42% at 8% 94%, color-mix(in srgb,var(--fuchsia) 12%,transparent), transparent 72%)}
.sec-head{max-width:var(--prose)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:12px}
.sec-head .lede{color:var(--ink-soft);font-size:1.15rem;margin-top:16px}
.prose{max-width:var(--prose);font-size:1.14rem;color:var(--ink)}
.prose p{margin:0 0 1.15em;color:var(--ink-soft)}
.prose em{font-style:italic;color:var(--ink)}
.byline{font-family:var(--serif);font-style:italic;color:var(--fuchsia);font-size:1.2rem}
.divider{border-top:1px solid var(--line-2)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:52px}
.stat{background:var(--bg-2);padding:24px 22px}
.stat .n{font-family:var(--serif);font-weight:700;font-size:1.95rem;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:9px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- mabel ---- */
.mabel-band{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.mabel-grid{display:grid;grid-template-columns:minmax(0,.9fr) 1.1fr;gap:56px;align-items:center}
.mabel-photo{margin:0;position:relative;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.mabel-photo img{width:100%;filter:grayscale(1) contrast(1.03)}
@media(max-width:820px){.mabel-grid{grid-template-columns:1fr;gap:32px}}

/* ---- film ---- */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.player{position:relative;border-radius:4px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:4/3;background:#000}
.player img{width:100%;height:100%;object-fit:cover;opacity:.72;filter:grayscale(.3) contrast(1.05)}
.player iframe{width:100%;height:100%;border:0;display:block}
.player button.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;width:100%}
.play .ring{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.player:hover .ring{background:rgba(255,255,255,.26);transform:scale(1.06)}
.play .ring svg{margin-left:4px;fill:var(--fuchsia)}
.player .len{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.72);color:#fff;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;padding:4px 9px;border-radius:2px;font-variant-numeric:tabular-nums;pointer-events:none}
@media(max-width:820px){.video-grid{grid-template-columns:1fr;gap:30px}}

/* ---- articles ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:grid;grid-template-columns:118px 1fr;box-shadow:var(--shadow);transition:.2s}
.card:hover{border-color:color-mix(in srgb,var(--blue) 45%,transparent);transform:translateY(-2px)}
.card .cover{background:#0a0c10;display:flex;align-items:center;justify-content:center;padding:14px}
.card .cover img{width:100%;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.card .body{padding:22px 24px}
.card .tag{font-family:var(--sans);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:700}
.card h3{font-size:1.28rem;margin:8px 0 0}
.card p{font-size:.98rem;color:var(--ink-soft);margin:10px 0 0}
.card .dl{margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--sans);font-size:.82rem;font-weight:700}
.card .dl a{color:var(--fuchsia);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--fuchsia) 35%,transparent);padding-bottom:2px}
.card .dl a:hover{border-color:var(--fuchsia)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
@media(max-width:460px){.card{grid-template-columns:1fr}.card .cover{padding:20px 64px}}

/* ---- appendix B link list ---- */
.appx-cta{margin-top:26px;padding:24px 26px;background:var(--card);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.appx-cta h3{font-size:1.3rem;margin:9px 0 0}
.appx-cta p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin:9px 0 0;max-width:54ch}
.appx-cta .btn{flex:0 0 auto}

.appx-dlg{width:min(660px,calc(100vw - 32px));max-height:min(82vh,780px);margin:auto;padding:0;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}
.appx-dlg[open]{display:flex;flex-direction:column}
.appx-dlg::backdrop{background:rgba(10,14,20,.6);backdrop-filter:blur(3px)}
.appx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:24px 26px 18px;border-bottom:1px solid var(--line-2);background:var(--bg-2);flex:0 0 auto}
.appx-head h2{font-size:1.55rem;margin-top:8px}
.appx-x{background:none;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;cursor:pointer;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;padding:0;transition:.18s;flex:0 0 auto}
.appx-x:hover{border-color:var(--fuchsia);color:var(--fuchsia)}
.appx-body{padding:6px 26px 26px;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
.appx-intro{font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--ink-dim);margin:18px 0 0}
.appx-intro a{color:var(--fuchsia);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--fuchsia) 35%,transparent)}
.appx-grp{font-family:var(--sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--blue);margin:28px 0 0;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.appx-list{list-style:none;margin:0;padding:0}
.appx-list li{border-bottom:1px solid var(--line-2)}
.appx-list li:last-child{border-bottom:0}
.appx-lnk{display:block;padding:14px 12px 14px 14px;text-decoration:none;border-left:2px solid transparent;
  border-radius:0 3px 3px 0;transition:background .16s,border-color .16s}
.appx-lnk:hover{background:var(--card-2);border-left-color:var(--fuchsia)}
.appx-lnk .t{display:block;font-family:var(--serif);font-size:1.04rem;font-weight:700;color:var(--ink);line-height:1.35}
.appx-lnk:hover .t{color:var(--blue)}
.appx-lnk .s{display:block;font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--ink-dim);margin-top:5px}
.appx-note{font-family:var(--sans);font-size:.78rem;color:var(--ink-dim);margin:0 0 14px;padding-left:14px}
.appx-note a{color:var(--fuchsia);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--fuchsia) 35%,transparent)}
@media(max-width:560px){
  .appx-cta{padding:22px}
  .appx-cta .btn{width:100%;text-align:center}
  .appx-head{padding:20px 20px 16px}
  .appx-body{padding:6px 20px 22px}
}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
form{display:grid;gap:16px}
.field{display:grid;gap:7px}
label{font-family:var(--sans);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
input,textarea{font-family:var(--serif);font-size:1.02rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--fuchsia);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:130px}
.priv{font-family:var(--sans);font-size:.78rem;color:var(--ink-dim)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent-note{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--fuchsia);
  border-left:3px solid var(--fuchsia);padding:10px 14px;background:var(--card);border-radius:3px;margin-top:16px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* ---- footer ---- */
footer{background:var(--bg-2);color:var(--ink-soft);padding:56px 0 40px;font-family:var(--sans);border-top:1px solid var(--line-2);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 70% at 92% 15%, color-mix(in srgb,var(--blue) 10%,transparent), transparent 74%)}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{color:var(--ink);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.foot-tag{margin-top:10px;font-size:.86rem;max-width:34ch;line-height:1.6}
.foot-links{display:flex;gap:24px;font-size:.82rem;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--fuchsia)}
.foot-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-2);font-size:.76rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}