/* ============================================================
   Home page.
   Tokens, fonts and theme handling come from styles.css.
   This file only adds the landing layout.
   ============================================================ */

.home{
  max-width:var(--measure);
  margin:0 auto;
  padding:0;
}

/* ---------- masthead ---------- */

.top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(18px);
  box-shadow:0 8px 30px color-mix(in srgb,var(--shadow) 42%,transparent);
}
.top-in{
  max-width:var(--measure);margin:0 auto;padding:0 var(--content-gutter);
  height:68px;display:flex;align-items:center;gap:16px;
}
.mark{
  width:38px;height:38px;flex:none;padding:5px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 56%,var(--rule));
  display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 92%,var(--ground));
  box-shadow:inset 0 0 0 2px var(--ground),0 7px 20px color-mix(in srgb,var(--gold) 18%,transparent);
}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark .crest-track{fill:none;stroke:var(--rule-firm);stroke-width:1}
.mark [class^="crest-"]:not(.crest-track):not(.crest-diamond):not(.crest-core){
  fill:none;stroke-width:4;stroke-linecap:round;
}
.mark .crest-air{stroke:var(--air)}
.mark .crest-water{stroke:var(--water)}
.mark .crest-earth{stroke:var(--earth)}
.mark .crest-fire{stroke:var(--fire)}
.mark .crest-diamond{
  fill:color-mix(in srgb,var(--gold) 12%,transparent);stroke:var(--gold);stroke-width:1.5;
}
.mark .crest-core{fill:var(--gold)}
.wordmark{display:flex;flex-direction:column;gap:1px;min-width:0}
.wordmark b{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:1rem;letter-spacing:-.015em;color:var(--ink);
  line-height:1.15;
}
.wordmark span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.top-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.top-count{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.top .theme-toggle{margin-top:0}

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

.hero{
  min-height:620px;margin:30px auto 22px;padding:60px var(--content-gutter) 56px;
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(352px,.82fr);
  align-items:center;gap:54px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--rule));
  border-radius:24px;background:var(--surface-2);
  box-shadow:0 30px 80px color-mix(in srgb,var(--shadow) 82%,transparent);
}
.hero::before{
  content:"";position:absolute;inset:-3%;z-index:-2;
  background:url("../public/realm-restored.webp") center 38%/cover no-repeat;
  transform:scale(1.03);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(242,237,227,.96) 0%,rgba(242,237,227,.94) 40%,rgba(242,237,227,.86) 53%,rgba(242,237,227,.26) 72%,rgba(242,237,227,.04) 100%),
    linear-gradient(0deg,rgba(242,237,227,.5),transparent 46%);
}
:root[data-theme="dark"] .hero{background:var(--ground)}
:root[data-theme="dark"] .hero::before{background-image:url("../public/realm-besieged.webp");background-position:center}
:root[data-theme="dark"] .hero::after{
  background:
    linear-gradient(90deg,rgba(12,25,34,.96) 0%,rgba(12,25,34,.92) 42%,rgba(12,25,34,.84) 54%,rgba(12,25,34,.34) 74%,rgba(12,25,34,.62) 100%),
    linear-gradient(0deg,rgba(12,25,34,.86),transparent 58%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{background:var(--ground)}
  :root:not([data-theme="light"]) .hero::after{
    background:
      linear-gradient(90deg,rgba(12,25,34,.96) 0%,rgba(12,25,34,.92) 42%,rgba(12,25,34,.84) 54%,rgba(12,25,34,.34) 74%,rgba(12,25,34,.62) 100%),
      linear-gradient(0deg,rgba(12,25,34,.86),transparent 58%);
  }
}
.hero-copy{min-width:0;position:relative;z-index:2}
.hero .eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;
}
.hero h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:clamp(2.1rem,4.6vw,3.15rem);
  line-height:1.03;letter-spacing:-.03em;
  margin:0 0 24px;max-width:26ch;text-wrap:balance;color:var(--ink);
}
.hero .deck{
  font-size:1.14rem;line-height:1.62;color:var(--ink-soft);
  max-width:56ch;margin:0 0 34px;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:12px 20px;border-radius:4px;text-decoration:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:.95rem;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn-primary{background:var(--accent);color:var(--ground);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-lift);border-color:var(--accent-lift);color:var(--ground)}
.btn-ghost{color:var(--ink);border-color:var(--rule-firm);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}

/* ---------- four-realm compass ---------- */

/* Glass over the painting. It inherits the page tokens rather than
   forcing a dark panel, so it never flips theme mid-page. */
.realm-compass{
  position:relative;isolation:isolate;
  min-height:510px;padding:21px 22px 19px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:22px;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--surface) 74%,transparent),
    color-mix(in srgb,var(--surface) 56%,transparent));
  backdrop-filter:blur(16px) saturate(126%);
  box-shadow:0 28px 70px var(--shadow);
  overflow:hidden;
}
@supports not (backdrop-filter:blur(4px)){
  .realm-compass{background:var(--surface)}
}
.realm-compass::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background-image:
    linear-gradient(var(--rule-firm) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-firm) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 84%);
}
.realm-compass::after{
  content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  right:-95px;top:-100px;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--fire) 25%,transparent),transparent 68%);
}
.compass-head,.compass-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
}
.compass-head{padding-bottom:17px;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.compass-head strong{color:var(--fire);font-weight:500}
.compass-foot{padding-top:16px;border-top:1px solid var(--rule);color:var(--ink-soft)}
.compass-foot strong{color:var(--ink);font-weight:500}
.element-wheel{position:relative;height:405px;margin:0 auto;max-width:430px}
.wheel-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.ring-outer{width:300px;height:300px;border:1px solid var(--rule-firm)}
.ring-outer::before,.ring-outer::after{
  content:"";position:absolute;inset:30px;border:1px dashed var(--rule);border-radius:50%;
}
.ring-outer::after{inset:72px;border-style:solid}
.ring-inner{width:218px;height:218px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transform:translate(-50%,-50%) rotate(45deg);border-radius:24px}
.wheel-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  box-sizing:border-box;width:104px;height:104px;padding:0 7px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ground);border:1px solid var(--accent);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 8%,transparent),0 14px 34px var(--shadow);
}
.wheel-core span{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;
  line-height:1.45;letter-spacing:.12em;text-align:center;text-transform:uppercase;color:var(--ink-faint)
}
.wheel-core strong{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.98rem;
  line-height:1.1;color:var(--ink);margin-top:4px
}
.realm-seal{
  position:absolute;width:94px;padding:10px 6px 9px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  border:1px solid color-mix(in srgb,currentColor 42%,var(--rule));border-radius:12px;
  box-shadow:0 10px 26px var(--shadow);
}
.realm-seal i{
  width:26px;height:26px;display:grid;place-items:center;flex:none;
  border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:.9rem
}
.realm-seal span{display:flex;flex-direction:column;align-items:center;min-width:0}
.realm-seal b{font:600 .76rem/1.1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink)}
.realm-seal small{font:500 .66rem/1.3 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.seal-air{left:50%;top:18px;transform:translateX(-50%);color:var(--air)}
.seal-water{right:5px;top:50%;transform:translateY(-50%);color:var(--water)}
.seal-earth{left:5px;top:50%;transform:translateY(-50%);color:var(--earth)}
.seal-fire{left:50%;bottom:18px;transform:translateX(-50%);color:var(--fire)}

/* ---------- counts ---------- */

.countbar{padding:0 var(--content-gutter) 8px}
.counts{
  display:flex;gap:44px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid var(--rule);
}
.count b{
  display:block;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:1.6rem;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-bottom:7px;
}
.count:nth-child(1) b{color:var(--air)}
.count:nth-child(2) b{color:var(--water)}
.count:nth-child(3) b{color:var(--earth)}
.count:nth-child(4) b{color:var(--fire)}
.count span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- the descent diagram ---------- */

.system-map{
  margin-top:26px;padding:0;
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--air) 5%,var(--surface)),var(--surface) 42%,color-mix(in srgb,var(--earth) 5%,var(--surface)));
  box-shadow:0 26px 64px color-mix(in srgb,var(--shadow) 52%,transparent);
}
.system-map-intro{
  padding:32px var(--content-gutter) 27px;border-bottom:1px solid var(--rule);
  background:linear-gradient(90deg,color-mix(in srgb,var(--water) 7%,transparent),transparent 62%);
}
.system-map-intro h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.55rem,3.4vw,2.1rem);
  line-height:1.14;letter-spacing:-.022em;margin:0 0 14px;
  max-width:26ch;text-wrap:balance;color:var(--ink);
}
.system-map-intro .lede{font-size:1.02rem;color:var(--ink-soft);max-width:64ch;margin:0}
.system-map-grid{
  display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:24px;align-items:stretch;padding:28px var(--content-gutter) 30px;
}

.descent{
  height:100%;margin:0;padding:24px 22px;
  background:color-mix(in srgb,var(--ground) 78%,var(--surface));
  border:1px solid var(--rule);border-radius:8px;
}
.descent-head{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:22px;text-align:left;
}
.layer{
  display:grid;
  grid-template-columns:48px minmax(118px,1.35fr) minmax(112px,1fr);
  align-items:center;gap:10px;
  padding:13px 12px;border-radius:4px;
  border:1px solid var(--rule);border-left:3px solid var(--realm-color,var(--accent));
  background:linear-gradient(90deg,color-mix(in srgb,var(--realm-color,var(--accent)) 10%,var(--ground)),var(--ground) 46%);
}
.layer-el{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--realm-color,var(--accent));
}
.layer-name{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:.92rem;color:var(--ink);
}
.layer-where{font-size:.78rem;line-height:1.4;color:var(--ink-soft)}
.layer.origin{border-color:var(--fire);background:color-mix(in srgb,var(--fire) 9%,var(--surface))}
.layer.origin .layer-el{color:var(--ember)}

.miss{
  display:flex;align-items:center;gap:10px;
  padding:8px 0 8px 62px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}
.miss::before{content:"↓";font-size:.85rem;letter-spacing:0;color:var(--rule-firm)}

.descent-foot{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  text-align:left;font-size:.88rem;line-height:1.58;color:var(--ink-soft);
}
.descent-foot b{color:var(--ink);font-weight:600}

/* ---------- the seven parts, shown as a product page ---------- */

.parts-wrap{
  position:relative;min-width:0;display:flex;flex-direction:column;
  margin-top:14px;padding:18px 9px 9px;
  border:1px dashed color-mix(in srgb,var(--ember) 46%,var(--rule));border-radius:10px;
  background:color-mix(in srgb,var(--ember) 3%,transparent);
}
.optimization-cue{
  position:absolute;z-index:3;top:-14px;left:16px;
  display:flex;align-items:center;gap:9px;margin:0;padding:6px 11px;
  border:1px solid color-mix(in srgb,var(--ember) 46%,var(--rule));border-radius:999px;
  background:var(--surface);color:var(--ink);
  box-shadow:0 5px 14px color-mix(in srgb,var(--shadow) 42%,transparent);
}
.optimization-cue::before{
  content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ember) 16%,transparent);
}
.optimization-cue::after{
  content:none;
}
.optimization-cue span{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ember);
}
.optimization-cue b{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.68rem;font-weight:600;
}
.grid-wrap h2,.voice h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.55rem,3.4vw,2.1rem);
  line-height:1.14;letter-spacing:-.022em;margin:0 0 16px;
  max-width:24ch;text-wrap:balance;color:var(--ink);
}

.product-page{
  min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:8px;background:var(--surface);
  box-shadow:0 18px 36px color-mix(in srgb,var(--shadow) 46%,transparent);
}
.store-bar{
  position:relative;display:flex;align-items:center;gap:16px;
  min-height:58px;padding:13px 16px 18px;
  color:#EDE8D9;background:#0B2722;border-bottom:1px solid rgba(255,255,255,.12);
}
.store-mark{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:.8rem;letter-spacing:.01em;white-space:nowrap;
}
.store-mark::before{
  content:"◇";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;
  color:#0B2722;background:#E8B64F;border-radius:50%;vertical-align:middle;
}
.store-nav{margin-left:auto;font-size:.66rem;color:#B8C9C2;white-space:nowrap}
.store-nav b{
  display:inline-grid;place-items:center;width:18px;height:18px;margin-left:3px;
  color:#0B2722;background:#E8B64F;border-radius:50%;font-size:.68rem;
}
.cache-policy{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-style:normal;
}
.store-bar .cache-policy{position:absolute;left:48px;bottom:7px;color:#86A79D}
.product-shell{
  display:grid;grid-template-columns:minmax(118px,.5fr) minmax(0,1.5fr);
  gap:16px;padding:16px;flex:1;background:color-mix(in srgb,var(--ground) 56%,var(--surface));
}
.product-gallery{
  position:relative;min-height:360px;margin:0;overflow:hidden;
  border:1px solid var(--rule);border-radius:6px;background:var(--surface-2);
}
.product-gallery::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,21,18,.8),transparent 42%);
}
.product-gallery img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.product-gallery figcaption{
  position:absolute;z-index:1;left:14px;right:14px;bottom:13px;
  display:flex;align-items:end;justify-content:space-between;gap:12px;color:#F1EAD8;
}
.product-gallery figcaption b{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.78rem;font-weight:600;
}
.product-gallery figcaption .cache-policy{color:#BFD1C8;text-align:right}
.product-buy{display:flex;flex-direction:column;gap:9px;min-width:0}
.product-overline{
  margin:1px 0 -2px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--earth);
}
.product-details,.product-review,.product-price,.product-stock,.product-cart{
  border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:11px 12px;
}
.product-details h3{
  margin:5px 0 5px;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.3rem;line-height:1.05;letter-spacing:-.025em;color:var(--ink);
}
.product-details p{margin:0;font-size:.72rem;line-height:1.42;color:var(--ink-soft)}
.product-review{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 8px;
}
.product-review .stars{color:#D69A2D;font-size:.67rem;letter-spacing:.04em}
.product-review b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.8rem;color:var(--ink)}
.product-review > span:not(.stars){font-size:.67rem;color:var(--ink-soft)}
.product-review .cache-policy{grid-column:1/-1}
.product-facts{display:grid;grid-template-columns:.72fr 1.28fr;gap:9px}
.product-price strong{
  display:block;margin-top:5px;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.42rem;line-height:1;color:var(--ink);
}
.product-stock > span{display:block;margin-top:6px;font-size:.7rem;color:var(--earth)}
.product-stock i{
  display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--earth);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--earth) 15%,transparent);
}
.product-stock b{display:block;margin-top:2px;font-size:.72rem;color:var(--ink)}
.product-cart{margin-top:auto;padding:8px;background:var(--ember-wash);border-color:color-mix(in srgb,var(--ember) 24%,var(--rule))}
.cart-button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 11px;border-radius:4px;background:var(--ink);color:var(--ground);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:.78rem;
}
.cart-button b{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  color:#17211D;background:#E8B64F;font-size:.68rem;
}
.product-cart .cache-policy{margin:7px 3px 0;color:var(--ember)}

/* ---------- villain voice ---------- */

.voice{
  margin:76px 0 0;padding:0;min-height:500px;
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  background:#1B1713;
  border:1px solid color-mix(in srgb,var(--ember) 48%,#1B1713);
  border-left:3px solid var(--ember);border-radius:0 10px 10px 0;
  box-shadow:0 28px 70px color-mix(in srgb,var(--shadow) 70%,transparent);
}
.voice-copy{position:relative;z-index:2;padding:44px 12px 44px var(--content-gutter);align-self:center}
.voice h2{margin-bottom:22px;max-width:24ch;color:#F1EAD8}
.voice blockquote{
  margin:0 0 20px;padding:0;
  font-family:Spectral,Georgia,serif;font-style:italic;
  font-size:1.22rem;line-height:1.6;color:#E8DCC7;max-width:46ch;
}
.voice cite{
  display:block;font-style:normal;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#F0526F;
  margin-bottom:26px;
}
.voice p{color:#AEBAB1;max-width:52ch;margin:0 0 17px}
.voice p:last-child{margin-bottom:0}
.villain-portrait{
  position:relative;align-self:stretch;min-width:0;min-height:500px;
  margin:0;overflow:hidden;background:#0A1512;
}
.villain-portrait::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,#1B1713 0%,rgba(27,23,19,.7) 10%,transparent 34%),
    linear-gradient(0deg,rgba(10,21,18,.42),transparent 34%);
}
.villain-portrait img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:55% center;
}

/* ---------- lesson grid ---------- */

.grid-wrap{padding:76px var(--content-gutter) 0}
.grid-wrap .eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.grid-wrap p.lede{font-size:1.05rem;color:var(--ink-soft);max-width:58ch;margin:0 0 12px}

.book-group{
  position:relative;isolation:isolate;overflow:hidden;
  margin:34px calc(-1 * var(--content-gutter)) 0;padding:0 18px 20px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 22%,var(--rule));
}
/* One image per book, not one per card. The realm is established once,
   across the whole group, and the cards sit on it as glass. */
.book-group::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:var(--group-tex,none) center 32%/cover no-repeat;
  filter:contrast(.72) brightness(1.16) saturate(1.2);
}
.book-group::after{content:none;background:none}
.book-group.realm-prologue{--group-tex:url("../public/card-earth.webp")}
.book-group.realm-air{--group-tex:url("../public/card-air.webp")}
.book-group.realm-water{--group-tex:url("../public/card-water.webp")}
.book-group.realm-earth{--group-tex:url("../public/card-earth.webp")}
.book-group.realm-fire{--group-tex:url("../public/card-fire.webp")}
.book-group.realm-spirit{--group-tex:url("../public/card-water.webp")}
.book-group.realm-war{--group-tex:url("../public/card-fire.webp")}
:root[data-theme="dark"] .book-group::after{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ground) 18%,transparent) 0%,
      color-mix(in srgb,var(--ground) 30%,transparent) 46%,
      color-mix(in srgb,var(--ground) 46%,transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb,var(--ground) 28%,transparent) 0%,
      color-mix(in srgb,var(--ground) 10%,transparent) 55%,
      color-mix(in srgb,var(--ground) 26%,transparent) 100%);
}

.book-band{
  display:flex;align-items:baseline;gap:14px;
  margin:48px 0 18px;padding:0 0 11px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 44%,var(--rule));
  border-left:3px solid var(--realm-color,var(--accent));
  background:linear-gradient(90deg,color-mix(in srgb,var(--realm-color,var(--accent)) 10%,transparent),transparent 62%);
}
.book-group .book-band{
  margin:0 -18px 18px;padding:13px 18px 12px;
  border-left:0;border-radius:0 9px 0 0;
}
.book-band b{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.06rem;letter-spacing:-.012em;color:var(--realm-color,var(--ink));
}
.book-band span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cards-single{grid-template-columns:1fr}
/* a full-width card carries a longer line, so it guards more of it */
.cards-single .card{--copy-guard:52ch}
.cards-war .trial{grid-column:1/-1}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:21px 22px 18px;border-radius:6px;
  background:var(--surface);
  border:1px solid var(--rule);border-top:2px solid var(--realm-color,var(--accent));
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease;
}
/* realm texture, held under a near-solid wash so type stays on flat colour */
/* Cards are glass now. The artwork behind them belongs to the book. */
.card::before,.card::after{content:none}
.card{
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:blur(10px) saturate(115%);
  border-color:color-mix(in srgb,var(--realm-color,var(--accent)) 38%,var(--rule));
}
@supports not (backdrop-filter:blur(4px)){
  .card{background:color-mix(in srgb,var(--surface) 94%,transparent)}
}
.card:hover{
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 9%,transparent);
  border-color:var(--realm-color,var(--accent));
}

.card-top{display:flex;align-items:baseline;gap:11px;margin-bottom:13px}
.card-no{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;color:var(--realm-color,var(--accent));font-variant-numeric:tabular-nums;
}
.card-kind{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}
.card h3{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.04rem;line-height:1.24;letter-spacing:-.012em;
  margin:0 0 9px;color:var(--ink);
}
.card p{font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin:0 0 16px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.chip{
  padding:3px 8px;border-radius:4px;
  background:color-mix(in srgb,var(--surface-2) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 24%,var(--rule));
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
.card.trial{border-color:color-mix(in srgb,var(--ember) 50%,var(--rule))}
.card.trial .card-no,.card.trial .card-kind{color:var(--ember)}


.book-group.realm-spirit .card:nth-child(1){--realm-tex:url("../public/card-air.webp")}
.book-group.realm-spirit .card:nth-child(2){--realm-tex:url("../public/card-water.webp")}
.book-group.realm-spirit .card:nth-child(3){--realm-tex:url("../public/card-earth.webp")}
.book-group.realm-spirit .card:nth-child(4){--realm-tex:url("../public/card-fire.webp")}

.book-band + .cards .chip{
  background:color-mix(in srgb,var(--realm-color) 8%,var(--surface-2));
  border-color:color-mix(in srgb,var(--realm-color) 24%,var(--rule));
}
.card.trial{background:color-mix(in srgb,var(--ember-wash) 46%,transparent);border-color:var(--ember)}
.card.trial .card-no,.card.trial .card-kind{color:var(--ember)}
.card.trial:hover{border-color:var(--ember)}

/* ---------- closing ---------- */

.closing{
  margin:90px auto 0;padding:62px var(--content-gutter) 78px;border-top:1px solid var(--rule);border-radius:12px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 0,color-mix(in srgb,var(--air) 10%,transparent),transparent 18rem),
    radial-gradient(circle at 42% 0,color-mix(in srgb,var(--water) 8%,transparent),transparent 17rem),
    radial-gradient(circle at 68% 0,color-mix(in srgb,var(--earth) 8%,transparent),transparent 18rem),
    radial-gradient(circle at 88% 0,color-mix(in srgb,var(--fire) 10%,transparent),transparent 18rem);
}
.closing blockquote{
  margin:0 auto 20px;padding:0;max-width:30ch;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.3rem,3vw,1.72rem);
  line-height:1.28;letter-spacing:-.018em;color:var(--ink);text-wrap:balance;
}
.closing .who{
  display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 auto 34px;
}
.closing .who::before,.closing .who::after{
  content:"";width:28px;height:1px;background:var(--rule-firm);
}

.foot{
  border-top:1px solid var(--rule);
  padding:26px var(--content-gutter) 48px;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .spacer{margin-left:auto}

/* ---------- mobile ---------- */

@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:realm-scene-drift 18s cubic-bezier(.45,0,.55,1) infinite alternate}
  .ring-outer{animation:wheel-turn 42s linear infinite}
  .ring-inner{animation:wheel-turn-inner 34s linear infinite reverse}
  .realm-compass::after{animation:ember-breathe 5.5s ease-in-out infinite alternate}
}
@keyframes wheel-turn{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes wheel-turn-inner{
  from{transform:translate(-50%,-50%) rotate(45deg)}
  to{transform:translate(-50%,-50%) rotate(405deg)}
}
@keyframes ember-breathe{
  from{opacity:.58;transform:scale(.92)}
  to{opacity:1;transform:scale(1.08)}
}

@media (max-width:900px){
  .system-map-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  .top-in{padding-left:22px;padding-right:22px}
  .wordmark span,.top-count{display:none}
  .wordmark b{font-size:.94rem;white-space:nowrap}
  .top-in{height:62px;gap:12px}
  .hero{min-height:0;margin:18px auto 14px;padding:46px 24px 32px;grid-template-columns:1fr;gap:38px;border-radius:18px}
  .hero::before{background-position:62% center}
  .hero h1{max-width:22ch}
  .realm-compass{min-height:490px;max-width:560px;width:100%;justify-self:center}
  .counts{gap:28px}
  .countbar{padding-left:22px;padding-right:22px}
  .system-map{padding-left:0;padding-right:0}
  .system-map-intro{padding:28px 24px 24px}
  .system-map-grid{padding:22px}
  .descent{padding:24px 20px}
  .layer{grid-template-columns:1fr;gap:6px;padding:14px}
  .layer-el{grid-column:1/-1}
  .layer-where{grid-column:1/-1;order:3}
  .miss{padding-left:16px}
  .voice{grid-template-columns:1fr;padding:0}
  .voice-copy{padding:32px 24px 8px}
  .villain-portrait{min-height:390px}
  .villain-portrait::before{
    background:linear-gradient(180deg,#1B1713 0%,rgba(27,23,19,.72) 12%,transparent 38%);
  }
  .grid-wrap{padding-left:22px;padding-right:22px}
  .book-group{margin:32px -22px 0;padding:0 12px 14px;border-left-width:3px}
  .book-group .book-band{margin:0 -12px 14px;padding:12px 14px 11px}
  .cards{grid-template-columns:1fr}
  .closing{padding:44px 22px 56px}
  .foot{padding-left:22px;padding-right:22px}
}

@media (max-width:520px){
  .hero{padding:40px 18px 24px;border-radius:14px}
  .hero::after{
    background:linear-gradient(0deg,color-mix(in srgb,var(--ground) 94%,transparent),color-mix(in srgb,var(--ground) 74%,transparent));
  }
  .hero h1{font-size:clamp(2.12rem,10.5vw,2.8rem);overflow-wrap:anywhere}
  .system-map-intro{padding:24px 18px 21px}
  .system-map-grid{padding:16px}
  .product-shell{grid-template-columns:1fr;padding:12px}
  .product-gallery{min-height:250px}
  .store-nav{display:none}
  .product-details h3{font-size:1.5rem}
  .villain-portrait{min-height:330px}
  .realm-compass{min-height:442px;padding:18px 14px 16px;border-radius:16px}
  .element-wheel{height:355px}
  .ring-outer{width:246px;height:246px}
  .ring-inner{width:176px;height:176px}
  .realm-seal{width:122px;min-height:58px;padding:8px 9px;gap:7px}
  .realm-seal i{width:31px;height:31px;font-size:1rem}
  .seal-water{right:0}.seal-earth{left:0}
  .wheel-core{width:96px;height:96px}
  .wheel-core strong{font-size:1.02rem}
  .compass-head,.compass-foot{font-size:.64rem;letter-spacing:.1em}
}

@media (prefers-reduced-motion:reduce){
  .card:hover,.btn:active{transform:none}
}

@media (prefers-reduced-transparency:reduce){
  .realm-compass{background:#0B221C;backdrop-filter:none}
  .top{background:var(--ground);backdrop-filter:none}
}

/* anchor targets clear the sticky masthead */
#lessons,#start{scroll-margin-top:84px}

/* ============================================================
   Thematic layer. Devices borrowed from the course page so the
   two halves of the site speak the same visual language.
   ============================================================ */

/* The four-element rule. It already closes the course masthead, so it
   closes the hero here too, and signs off the page at the very bottom. */
.hero::before{border-radius:inherit}
.hero{position:relative}
.hero > .element-rule,
.closing > .element-rule{display:none}
.hero-copy::after{
  content:"";display:block;height:3px;width:132px;margin:32px 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire));
}

/* Realm sigil behind each book, the same glyph set the course uses. */
.book-band{position:relative}
.book-band::after{
  content:"◈";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font:400 3.4rem/1 Spectral,Georgia,serif;
  color:var(--realm-color,var(--accent));opacity:.22;pointer-events:none;
}
.book-group.realm-air .book-band::after{content:"◌"}
.book-group.realm-water .book-band::after{content:"≈"}
.book-group.realm-earth .book-band::after{content:"◇"}
.book-group.realm-fire .book-band::after{content:"△"}
.book-group.realm-spirit .book-band::after{content:"✦"}
.book-group.realm-war .book-band::after{content:"×"}
:root[data-theme="dark"] .book-band::after{opacity:.3}

/* An opening quote for the two places the page actually speaks aloud. */
.voice blockquote,.closing blockquote{position:relative}
.voice blockquote::before,.closing blockquote::before{
  content:"\201C";position:absolute;line-height:1;
  font:700 4.6rem/1 Spectral,Georgia,serif;
  pointer-events:none;user-select:none;
}
.voice blockquote::before{left:-34px;top:-16px;color:var(--ember);opacity:.34}
.closing blockquote::before{left:50%;top:-46px;transform:translateX(-50%);color:var(--gold);opacity:.32}
.closing blockquote{padding-top:14px}

/* The counts read as a set rather than four loose numbers. */
.count{position:relative;padding-left:15px}
.count::before{
  content:"";position:absolute;left:0;top:3px;bottom:16px;width:2px;border-radius:2px;
}
.count:nth-child(1)::before{background:var(--air)}
.count:nth-child(2)::before{background:var(--water)}
.count:nth-child(3)::before{background:var(--earth)}
.count:nth-child(4)::before{background:var(--fire)}

/* Lesson numbers carry their realm rather than sitting in plain mono. */
.card-no{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:20px;padding:0 5px;border-radius:4px;
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 34%,transparent);
}

@media (max-width:820px){
  .book-band::after{font-size:2.4rem;right:10px;opacity:.16}
  .voice blockquote::before{left:-8px;top:-22px;font-size:3.4rem}
  .hero-copy::after{margin-top:26px;width:104px}
}
@media (prefers-reduced-motion:reduce){
  .card,.btn{transition:none}
}

/* ============================================================
   Book band title sits on its own plate, so it stays readable
   against whatever part of the realm art falls behind it.
   ============================================================ */
.book-band{
  display:flex;align-items:center;gap:0;
  padding:14px 18px 13px;background:none;border-bottom:0;
}
.book-band > b,
.book-band > span{
  backdrop-filter:none;
  padding:7px 13px;
}
.book-band > b{
  background:var(--realm-color,var(--accent));
  border-radius:8px 0 0 8px;
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 44%,var(--rule));
  border-right:0;
  color:#fff;
}
.book-band > span{
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 20%,var(--surface));
  border-radius:0 8px 8px 0;
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 26%,var(--rule));
  border-left:0;
  color:var(--ink);
}
@supports not (backdrop-filter:blur(4px)){
  .book-band > b{background:var(--realm-color,var(--accent))}
  .book-band > span{background:color-mix(in srgb,var(--realm-color,var(--accent)) 20%,var(--surface))}
}
.book-band::after{right:22px;opacity:.5}
:root[data-theme="dark"] .book-band::after{opacity:.55}

/* Dark: the art is toned down rather than lifted, and the glass sits lower. */
:root[data-theme="dark"] .book-group::before{
  filter:brightness(.55) saturate(1.18);
}
:root[data-theme="dark"] .card{
  background:color-mix(in srgb,var(--surface) 68%,transparent);
}
:root[data-theme="dark"] .card:hover{
  background:color-mix(in srgb,var(--surface) 84%,transparent);
}
:root[data-theme="dark"] .book-band > b{color:#10171C}
:root[data-theme="dark"] .book-band > span{
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 28%,var(--surface));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .book-group::before{
    filter:brightness(.55) saturate(1.18);
  }
  :root:not([data-theme="light"]) .card{
    background:color-mix(in srgb,var(--surface) 68%,transparent);
  }
  :root:not([data-theme="light"]) .card:hover{
    background:color-mix(in srgb,var(--surface) 84%,transparent);
  }
  :root:not([data-theme="light"]) .book-band > b{color:#10171C}
  :root:not([data-theme="light"]) .book-band > span{
    background:color-mix(in srgb,var(--realm-color,var(--accent)) 28%,var(--surface));
  }
}
@media (max-width:820px){
  .book-band{flex-wrap:wrap;gap:6px}
  .book-band > b{border-radius:8px;border-right:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 44%,var(--rule))}
  .book-band > span{border-radius:8px;border-left:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 26%,var(--rule))}
}


/* Landing page: a spacious atlas cover with a brass-and-ink palette. */
.home-page{--measure:1120px}
.home-page main{padding-left:24px;padding-right:24px}
.top{border-bottom-color:color-mix(in srgb,var(--gold) 35%,var(--rule))}
.top-in{max-width:1208px}
.wordmark b{font-size:1.06rem}
.wordmark span{color:var(--gold);font-size:.62rem;letter-spacing:.2em}
.hero{margin-top:32px;gap:40px;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);border-color:color-mix(in srgb,var(--gold) 46%,var(--rule));border-radius:18px}
.hero h1{font-family:Spectral,Georgia,serif;font-weight:600;font-size:clamp(2.7rem,4.7vw,3.8rem);line-height:1.06;letter-spacing:-.04em;max-width:17ch}
.hero .eyebrow{color:var(--gold);font-size:.68rem;letter-spacing:.16em;line-height:1.6}
.hero .deck{font-size:1.12rem;color:var(--ink-soft);max-width:43ch}
.hero::after,:root[data-theme="dark"] .hero::after{
  background:linear-gradient(90deg,var(--ground),color-mix(in srgb,var(--ground) 94%,transparent) 40%,color-mix(in srgb,var(--ground) 55%,transparent) 70%,color-mix(in srgb,var(--ground) 28%,transparent)),linear-gradient(0deg,var(--ground),transparent 65%);
}
.hero-copy::after{height:2px;width:180px;margin-top:28px}
.btn{padding:13px 21px;border-radius:7px;font-size:.9rem}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--ground);box-shadow:0 5px 18px color-mix(in srgb,var(--gold) 17%,transparent)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn-ghost{background:color-mix(in srgb,var(--surface) 40%,transparent)}
.resume-course{position:relative;flex-basis:100%;max-width:370px;border:0;border-left:2px solid var(--gold);border-radius:0;background:transparent;padding:8px 30px 8px 14px;margin-top:6px;font-size:1rem}
.resume-course small{color:var(--gold)}
.realm-compass{border-color:color-mix(in srgb,var(--gold) 38%,var(--rule));border-radius:160px 160px 16px 16px;padding-top:36px;background:linear-gradient(160deg,color-mix(in srgb,var(--water) 12%,var(--surface)),color-mix(in srgb,var(--ground) 90%,transparent));box-shadow:0 22px 55px color-mix(in srgb,var(--shadow) 55%,transparent)}
.realm-compass::before{opacity:.24;background-size:40px 40px}
.compass-head{justify-content:center;flex-direction:column;gap:5px;border:0;font-size:.61rem;padding-bottom:8px}
.compass-head strong{color:var(--gold);font-size:.57rem}
.compass-foot{font-size:.58rem;letter-spacing:.07em;gap:8px}
.realm-seal{border-radius:10px;background:var(--surface)}
.realm-seal i{background:color-mix(in srgb,currentColor 9%,transparent)}
.wheel-core{border-color:var(--gold);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 8%,transparent)}
.wheel-core span{font-size:.56rem;letter-spacing:.07em;line-height:1.4}
.wheel-core strong{font-size:1.05rem;margin-top:5px}
.ring-outer{border-color:color-mix(in srgb,var(--gold) 36%,var(--rule))}
.ring-inner{border-color:color-mix(in srgb,var(--water) 40%,var(--rule))}
.countbar{padding:0 0 8px}
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:24px 0;border-bottom:1px solid var(--rule)}
.count{padding:0 24px;border-right:1px solid var(--rule)}
.count:last-child{border-right:0}
.count::before{display:none}
.count b{font-family:Spectral,Georgia,serif;font-size:2.1rem;font-weight:600}
.count span{font-size:.62rem}
.home-prologue{margin-top:64px}
.system-map,.book-group{border-radius:16px}
.system-map-intro h2,.grid-wrap h2,.closing blockquote{font-family:Spectral,Georgia,serif;font-weight:600;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.book-group{padding:0 22px 24px;margin-top:26px}
.book-group .book-band{margin:0 -22px 20px;padding:22px 24px;border-bottom:1px solid color-mix(in srgb,var(--realm-color) 32%,var(--rule));background:color-mix(in srgb,var(--ground) 87%,transparent)}
.book-band > b,.book-band > span{background:transparent!important;border:0;border-radius:0;padding:0;color:var(--ink)!important}
.book-band > b{font-size:1.22rem;color:var(--realm-color)!important;margin-right:20px}
.book-band > span{color:var(--ink-soft)!important;font-size:.64rem}
.card,:root[data-theme="dark"] .card{padding:24px;border-radius:10px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-top-width:3px}
.card:hover,:root[data-theme="dark"] .card:hover{background:var(--surface);box-shadow:0 12px 26px var(--shadow);transform:translateY(-3px)}
.card h3{font-size:1.23rem;line-height:1.25}
.card p{font-size:.95rem}
.card-no{min-width:30px;height:26px}
.chip{border-radius:4px;font-size:.6rem;letter-spacing:.06em}
.closing{border:1px solid var(--rule);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 8%,var(--surface)),var(--surface))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::after{background:linear-gradient(90deg,var(--ground),color-mix(in srgb,var(--ground) 94%,transparent) 40%,color-mix(in srgb,var(--ground) 55%,transparent) 70%,color-mix(in srgb,var(--ground) 28%,transparent)),linear-gradient(0deg,var(--ground),transparent 65%)}
  :root:not([data-theme="light"]) .card{background:color-mix(in srgb,var(--surface) 94%,transparent)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding:42px 30px}
  .hero h1{max-width:20ch;font-size:clamp(2.6rem,6.5vw,3.6rem)}
  .hero .deck{max-width:52ch}
  .realm-compass{max-width:420px;min-height:0}
}
@media (max-width:620px){
  .home-page main{padding-left:14px;padding-right:14px}
  .hero{padding:32px 20px 22px;margin-top:18px}
  .hero h1{font-size:2.6rem}
  .hero .eyebrow{font-size:.59rem}
  .counts{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .count:nth-child(2){border-right:0}
  .count{padding:0 18px}
  .book-group{padding:0 14px 16px;margin-left:-22px;margin-right:-22px}
  .book-group .book-band{margin:0 -14px 16px;padding:20px 18px;gap:8px}
  .book-band > span{flex-basis:100%}
  .card{padding:20px}
  .realm-compass{padding:30px 12px 16px;border-radius:140px 140px 14px 14px}
  .realm-seal{width:76px;min-height:0;padding:9px 4px}
  .realm-seal small{font-size:.54rem;letter-spacing:0}
  .realm-seal b{font-size:.73rem}
  .realm-seal i{width:26px;height:26px}
  .seal-earth{left:0}.seal-water{right:0}
  .element-wheel{height:342px}
  .wheel-core{width:86px;height:86px;padding:0 5px}
  .wheel-core span{font-size:.51rem}
  .wheel-core strong{font-size:.92rem}
  .ring-outer{width:234px;height:234px}
  .ring-inner{width:178px;height:178px}
  .compass-foot{font-size:.51rem;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}

.btn.lesson-complete::after{color:currentColor}
.resume-course.lesson-complete::after{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
@media (max-width:620px){
  .top-in{padding-left:14px;padding-right:14px;gap:9px}
  .top-end .journey-map-trigger{display:none}
  .top-end{gap:0}
  .wordmark b{font-size:.85rem}
  .top .theme-toggle{padding:7px 8px;font-size:.6rem}
  .hero::after,:root[data-theme="dark"] .hero::after{background:linear-gradient(110deg,color-mix(in srgb,var(--ground) 96%,transparent),color-mix(in srgb,var(--ground) 76%,transparent))}
}
@media (max-width:380px){
  .realm-seal{width:66px}
  .realm-seal small{font-size:.49rem}
  .wheel-core{width:80px;height:80px}
  .ring-outer{width:210px;height:210px}
  .compass-foot{flex-direction:column;gap:5px}
}
@media (prefers-color-scheme:dark) and (max-width:620px){
  :root:not([data-theme="light"]) .hero::after{background:linear-gradient(110deg,color-mix(in srgb,var(--ground) 96%,transparent),color-mix(in srgb,var(--ground) 76%,transparent))}
}


/* Keep the artwork and its wash on one animated layer as the banner resizes. */
.hero{
  --hero-scene:url("../public/realm-restored.webp");
  --hero-wash:linear-gradient(90deg,var(--ground),color-mix(in srgb,var(--ground) 94%,transparent) 40%,color-mix(in srgb,var(--ground) 55%,transparent) 70%,color-mix(in srgb,var(--ground) 28%,transparent));
}
:root[data-theme="dark"] .hero{--hero-scene:url("../public/realm-besieged.webp")}
.hero::before,:root[data-theme="dark"] .hero::before{background-image:var(--hero-wash),linear-gradient(0deg,var(--ground),transparent 65%),var(--hero-scene)}
.hero::after{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{--hero-scene:url("../public/realm-besieged.webp")}}
@media (max-width:620px){
  .hero{--hero-wash:linear-gradient(110deg,color-mix(in srgb,var(--ground) 96%,transparent),color-mix(in srgb,var(--ground) 76%,transparent))}
}

/* A continuous elemental study. The cache diagram remains the no-script fallback. */
.element-canvas,.element-caption{display:none}
.elemental-ready{--scene-color:#77c7db;background:#10252c;border-color:#536468}
.elemental-ready::before{opacity:.07}
.elemental-ready::after{display:none}
.elemental-ready .compass-head{color:#a8b7b8}
.elemental-ready .compass-head strong{color:#d5b77f}
.elemental-ready .element-wheel{height:430px}
.elemental-ready .element-wheel > :not(.element-canvas):not(.element-caption){display:none}
.elemental-ready .element-canvas{display:block;position:absolute;top:-12px;left:-22px;width:calc(100% + 44px);height:350px}
.elemental-ready .element-caption{display:flex;position:absolute;bottom:16px;left:0;right:0;flex-direction:column;align-items:center;gap:10px;pointer-events:none;padding:18px 0 0;border-top:1px solid #536468}
.element-name{font:500 .9rem/1.3 "JetBrains Mono",monospace;color:var(--scene-color);letter-spacing:.12em;text-transform:uppercase}
.element-domain{font:600 clamp(1.5rem,2.5vw,1.85rem)/1.15 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;color:#f1ebdf;text-align:center;max-width:100%;padding:0 6px}
.elemental-ready .compass-foot{display:none}
.element-controls:not([hidden]){display:flex;align-items:center;flex-direction:column;gap:14px;border-top:1px solid #33494d;padding-top:14px}
.element-choices{display:flex;width:100%;justify-content:space-between;gap:4px}
.element-choices button{appearance:none;flex:1;min-height:40px;padding:8px 4px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#a4b5b7;font:500 .63rem/1.3 "JetBrains Mono",monospace;cursor:pointer}
.element-choices button[aria-pressed="true"]{border-bottom-color:var(--scene-color);color:var(--scene-color)}
.element-choices button:hover{color:#f0e8d6}
.element-motion{appearance:none;min-height:36px;padding:6px 14px;border:1px solid #526365;border-radius:4px;background:transparent;color:#c6cec8;font:400 .58rem/1.2 "JetBrains Mono",monospace;cursor:pointer}
.element-motion:hover{border-color:#d5b77f;color:#eee0c4}
@media (max-width:620px){
  .elemental-ready .element-wheel{height:390px}
  .elemental-ready .element-canvas{left:-12px;width:calc(100% + 24px);height:305px}
  .element-name{font-size:.8rem}
  .elemental-ready .element-caption{bottom:8px}
  .element-controls:not([hidden]){gap:10px}
}