/* ============================================================================
   site.css — shared design system for the Historical Conquest marketing site
   ----------------------------------------------------------------------------
   Loaded by every page EXCEPT game.html (the game has its own stylesheet and
   must not inherit these globals). Tokens are deliberately the same gold /
   parchment / dark ground as index.html and the game, so the store, the
   lessons and the table all read as one product.

   No build step. Edit and reload. See BUILD.md.
   ========================================================================== */

/* The site's design is NAUTICAL CHART (chosen by the owner, session 51). Its fonts: */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Libre+Franklin:wght@400;500;600;700;800&display=swap");


:root{
  /* brand — shared with game.html + index.html, do not diverge */
  --gold:#e7c66a; --gold2:#b9922f; --gold-deep:#6b4c1a;
  /* the raised "pill" look — tabs, buttons, chips, the exam letter. Kept as
     tokens so a theme can repaint them; hardcoding the pair meant a new
     palette still produced gold buttons. */
  --accent-a:#c9a94a; --accent-b:#b9922f; --on-accent:#241c08;
  --deep:#0d0805;
  /* A surface RECESSED from the page — fact lists, exam questions, cards,
     option buttons. These were hardcoded rgba(0,0,0,.2x), which is invisible
     on a dark ground and a dirty grey on a light one, so a light theme was
     impossible until they became tokens. A light palette overrides these to a
     white or warm tint instead. */
  --sunken:rgba(0,0,0,.24); --sunken-2:rgba(0,0,0,.34); --sunken-3:rgba(0,0,0,.42);
  --parch:#efe4c8; --ink:#2a2118;
  --red:#b3372f; --blue:#2f66b3; --land:#2c6b3c; --active:#5a3f86;

  /* surfaces */
  --bg0:#120b07; --bg1:#241a12; --bg2:#3a2a1c;
  --panel:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.20));
  --panel-solid:#1c140d;
  --line:rgba(47,127,134,.22);
  --line-strong:rgba(47,127,134,.42);

  /* type */
  --text:#f3ecda; --text-dim:#d9cfb6; --text-dimmer:#b6a98c;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  /* metrics */
  --wrap:1180px; --wrap-narrow:820px;
  --radius:16px; --radius-sm:12px;
  --nav-h:64px;
  --shadow:0 12px 30px rgba(0,0,0,.42);
  --shadow-lg:0 22px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--serif);margin:0;line-height:1.15;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--on-accent);
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* ====================================================================== NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(18,11,7,.96);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.nav-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:0 20px;min-height:var(--nav-h)}
/* The logo stands alone (owner, 2026-09-18) — no wordmark text beside it — and is
   exactly 20% larger than it was: 45.6px tall (was 38px), ~128px wide (was ~107px),
   on every screen size. The 64px bar is unchanged.
   logo-wordmark.webp has a baked-in BLACK background (BUILD.md, session 41) with
   wide black margins round the lettering: mix-blend-mode:screen drops that black
   into the navy bar instead of leaving a black sticker on it (the bar is navy in
   every palette), and the negative side margins let that empty margin overlap the
   gutter so the lettering lines up with the page edge and the menu keeps its room. */
.nav-logo{display:flex;align-items:center;flex:0 0 auto;padding:9px 0;border-radius:4px}
.nav-logo img{height:45.6px;width:auto;max-width:none;margin:0 -15px 0 -17px;mix-blend-mode:screen}

.nav-menu{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
.nav-item{position:relative}
.nav-link{display:block;padding:10px 8px;font-size:.83rem;font-weight:600;color:var(--text);
  border-radius:9px;white-space:nowrap;transition:color .13s,background .13s;
  background:none;border:0;font-family:inherit;cursor:pointer}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--gold);background:rgba(47,127,134,.09)}
.nav-link.is-current{color:var(--gold)}
.nav-link.is-current::after{content:"";display:block;height:2px;background:var(--gold);
  border-radius:2px;margin-top:4px}
.nav-link .caret{font-size:.6em;opacity:.6;margin-left:4px;vertical-align:middle}

/* drop-downs — click OR hover, both must work (keyboard + touch) */
.nav-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:246px;
  background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:7px;display:none;z-index:120;
  /* the ESA menu carries every funded state — without a cap it runs off the
     bottom of the screen and the last states are unreachable */
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
.nav-item:hover > .nav-drop,.nav-drop.is-open{display:block}
.nav-item:last-child .nav-drop{left:auto;right:0}
.nav-drop a{display:block;padding:8px 12px;font-size:.83rem;border-radius:8px;color:var(--text-dim);
  transition:background .12s,color .12s}
.nav-drop a:hover{background:rgba(47,127,134,.12);color:var(--gold)}
.nav-drop .drop-sep{height:1px;background:var(--line);margin:6px 10px}

.nav-cta{margin-left:6px;padding:9px 17px;border-radius:11px;font-size:.82rem;font-weight:800;
  background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent);border:1px solid var(--gold2);
  white-space:nowrap;transition:transform .12s,filter .12s;flex:0 0 auto}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}

.nav-burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  color:var(--gold);width:44px;height:40px;border-radius:10px;font-size:1.25rem;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto}

/* The full row (logo, nine menus, Play Free, cart) needs ~1130px of content
   width; at 1080–1199 it used to run off the right edge, hiding Play Free and the
   cart. Below 1200 the menu becomes the slide-out drawer. */
@media (max-width:1199px){
  .nav-menu{position:fixed;inset:var(--nav-h) 0 0 auto;width:min(360px,88vw);
    background:var(--panel-solid);border-left:1px solid var(--line-strong);
    flex-direction:column;align-items:stretch;gap:0;padding:14px;overflow-y:auto;
    margin-left:0;
    /* Closed, the drawer is CLIPPED in place rather than pushed off-screen: a
       box translated past the right edge widened the page on phones (a 390px
       screen laid out 733px wide and could be scrolled sideways). Hidden, it is
       also out of the tab order until opened. */
    clip-path:inset(0 0 0 100%);visibility:hidden;
    transition:clip-path .22s ease,visibility 0s linear .22s}
  .nav-menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .22s ease}
  .nav-burger{display:flex}
  .nav-link{padding:12px 14px;font-size:.94rem;width:100%;text-align:left}
  .nav-link.is-current::after{display:none}
  .nav-drop{position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--line-strong);
    border-radius:0;margin:0 0 6px 16px;padding:2px 0;min-width:0;background:none}
  .nav-item:hover > .nav-drop{display:none}
  .nav-drop.is-open{display:block}
  .nav-cta{margin:12px 0 0;text-align:center;padding:13px}
}

/* =================================================================== LAYOUT */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding-inline:20px}
.section{padding-block:clamp(48px,7vw,86px);position:relative}
.section-alt{background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.12));
  border-block:1px solid var(--line)}

/* the page ground — one gradient, painted once on <body> */
.page-bg{background:
    radial-gradient(120% 90% at 50% 0%, var(--bg2) 0%, var(--bg1) 42%, var(--bg0) 100%)
    fixed}

/* ==================================================================== HERO */
.hero{position:relative;min-height:clamp(420px,56vw,620px);display:grid;place-items:center;
  text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.58)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 100% at 50% 42%, rgba(18,11,7,.30) 0%, rgba(18,11,7,.86) 100%)}
.hero-body{position:relative;z-index:2;padding:clamp(48px,8vw,96px) 20px;max-width:900px}
.hero h1{font-size:clamp(2.1rem,5.6vw,4rem);color:var(--gold);letter-spacing:.5px;
  text-shadow:0 3px 0 var(--gold-deep),0 16px 38px rgba(0,0,0,.7)}
.hero .lede{margin-top:18px;font-size:clamp(1rem,1.6vw,1.16rem);color:var(--parch);
  max-width:680px;margin-inline:auto;text-shadow:0 2px 12px rgba(0,0,0,.8)}

.kicker{font-size:.7rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);
  opacity:.88;margin:0 0 12px;font-family:var(--sans);font-weight:700}
.section-head{text-align:center;max-width:780px;margin:0 auto clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--gold)}
.section-head .sub{margin-top:12px;color:var(--text-dim);font-size:1.02rem}

/* =================================================================== BUTTONS */
.btn{display:inline-block;padding:13px 28px;border-radius:13px;font-weight:800;font-size:.98rem;
  background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent);border:1px solid var(--gold2);
  box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .12s,filter .12s;cursor:pointer;
  font-family:var(--sans);text-align:center;line-height:1.35}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-green{background:linear-gradient(180deg,#3a6b48,#274c33);color:#fdf6e2;border-color:#2c6b3c}
.btn-ghost{background:var(--sunken-2);color:var(--gold);border:1px solid var(--line-strong);
  box-shadow:none}
.btn-ghost:hover{background:rgba(47,127,134,.12)}
.btn-sm{padding:9px 18px;font-size:.84rem;border-radius:10px}
.btn-lg{padding:16px 38px;font-size:1.06rem}
.btn-row{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.btn-row.left{justify-content:flex-start}

/* ===================================================================== CARDS */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .14s,border-color .14s}
.card:hover{transform:translateY(-4px);border-color:var(--gold2)}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--deep);flex:0 0 auto}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media.tall{aspect-ratio:3/4}
/* the brand banners have their wording baked into the artwork — match their real
   2.44:1 aspect so `cover` has nothing to crop, or the text loses its ends. */
.card-media.banner{aspect-ratio:700/287}
.card-media.banner img{object-fit:contain;background:var(--deep)}
.card-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column}
.card h3{color:var(--gold);font-size:1.16rem;margin-bottom:9px}
.card p{font-size:.9rem;color:var(--text-dim);margin-bottom:0}
.card .card-foot{margin-top:auto;padding-top:16px}
.card-link{color:var(--gold);font-weight:700;font-size:.86rem}
.card-link::after{content:" →"}

/* a plain bordered content panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3.4vw,38px);box-shadow:var(--shadow)}
.panel h2,.panel h3{color:var(--gold);margin-bottom:12px}

/* =============================================================== SPLIT ROWS */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,56px);
  align-items:center}
.split.media-right > .split-media{order:2}
.split-body h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--gold);margin-bottom:8px}
.split-body .sub{color:var(--parch);font-size:1.05rem;font-family:var(--serif);
  font-style:italic;margin-bottom:16px;opacity:.9}
.split-body p{color:var(--text-dim)}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);
  border:1px solid var(--line)}
.split-media.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.split-media.pair img{height:100%;object-fit:cover}
@media (max-width:840px){
  .split{grid-template-columns:1fr}
  .split.media-right > .split-media{order:0}
}

/* ==================================================================== LISTS */
.ticks{list-style:none;padding:0;margin:18px 0 0}
.ticks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--text-dim);font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;
  border-radius:50%;background:linear-gradient(180deg,var(--accent-a),var(--accent-b));
  box-shadow:0 0 0 3px rgba(47,127,134,.14)}
.ticks li b,.ticks li strong{color:var(--parch)}
.numbers{list-style:none;padding:0;margin:18px 0 0;counter-reset:n}
.numbers li{position:relative;padding-left:44px;margin-bottom:14px;color:var(--text-dim);font-size:.95rem}
.numbers li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:-1px;
  width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-weight:800;
  font-size:.85rem;background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent);
  font-family:var(--sans)}

/* ==================================================================== AWARDS */
.awards{display:flex;gap:clamp(18px,4vw,46px);justify-content:center;align-items:center;
  flex-wrap:wrap}
.awards img{height:clamp(88px,11vw,132px);width:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}

/* =================================================================== STATS */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:center}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px}
.stat .n{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3rem);color:var(--gold);line-height:1}
.stat .l{margin-top:8px;font-size:.84rem;color:var(--text-dim)}
@media (max-width:620px){.stats{grid-template-columns:1fr}}

/* ===================================================================== FAQ */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 22px;cursor:pointer;font-weight:700;color:var(--parch);
  font-size:.97rem;list-style:none;display:flex;gap:14px;align-items:flex-start;
  transition:background .12s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(47,127,134,.07)}
.faq summary::before{content:"+";color:var(--gold);font-weight:800;font-size:1.15rem;
  line-height:1.25;flex:0 0 auto}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::before{content:"–"}
.faq .answer{padding:0 22px 20px 50px;color:var(--text-dim);font-size:.92rem}

/* ==================================================================== TABLE */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
table.data th,table.data td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{background:var(--sunken-2);color:var(--gold);font-family:var(--serif);font-weight:700}
table.data tr:last-child td{border-bottom:0}
table.data td{color:var(--text-dim)}

/* ================================================================== CALLOUT */
.callout{background:linear-gradient(180deg,rgba(47,127,134,.10),rgba(47,127,134,.03));
  border:1px solid var(--line-strong);border-left:4px solid var(--gold2);
  border-radius:var(--radius-sm);padding:20px 24px;color:var(--parch);font-size:.95rem}
.callout b{color:var(--gold)}

/* ===================================================================== BAND */
/* a full-bleed image band with copy on top */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line)}
.band-media{position:absolute;inset:0;z-index:0}
.band-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.band-body{position:relative;z-index:2;padding-block:clamp(56px,8vw,100px)}

/* ==================================================================== FORMS */
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;color:var(--gold);font-weight:700;margin-bottom:6px;
  letter-spacing:.4px}
.field input,.field textarea,.field select{width:100%;padding:12px 15px;border-radius:11px;
  background:var(--sunken-3);border:1px solid var(--line-strong);color:var(--text);
  font-family:inherit;font-size:.95rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);
  background:var(--sunken-3)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--text-dimmer);margin-top:5px}
.form-note{font-size:.82rem;color:var(--text-dimmer);margin-top:14px}

/* =================================================================== FOOTER */
.footer{background:var(--deep);border-top:1px solid var(--line);padding-block:clamp(38px,5vw,58px) 0;
  margin-top:0}
.footer-cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-cols{grid-template-columns:1fr}}
.footer h4{color:var(--gold);font-size:.86rem;letter-spacing:2.2px;text-transform:uppercase;
  margin-bottom:14px;font-family:var(--sans);font-weight:800}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px}
.footer a{color:var(--text-dim);font-size:.87rem;transition:color .12s}
.footer a:hover{color:var(--gold)}
.footer .blurb{color:var(--text-dimmer);font-size:.86rem;max-width:320px}
.footer .brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .brand img{height:40px;width:auto}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:1rem;color:var(--gold);background:var(--sunken)}
.footer-social a:hover{background:rgba(47,127,134,.13)}
.footer-bar{margin-top:clamp(30px,4vw,46px);border-top:1px solid var(--line);
  padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-dimmer)}
.footer-bar a{color:var(--text-dimmer)}
.footer-bar a:hover{color:var(--gold)}

/* ================================================================ UTILITIES */
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:32px}
.mt-4{margin-top:48px}
.mb-2{margin-bottom:20px}.mb-3{margin-bottom:32px}
.lead{font-size:1.08rem;color:var(--parch)}
.dim{color:var(--text-dim)}
.gold{color:var(--gold)}
.small{font-size:.85rem}
.prose p{color:var(--text-dim);font-size:1rem;margin-bottom:1.1em}
.prose h2{color:var(--gold);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:1.6em 0 .55em}
.prose h3{color:var(--parch);font-size:1.14rem;margin:1.5em 0 .5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{color:var(--text-dim);padding-left:22px;margin:0 0 1.1em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--parch)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* page-title block for interior pages */
.page-head{padding-block:clamp(40px,6vw,72px) clamp(24px,3vw,38px);text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)}
.page-head h1{font-size:clamp(1.9rem,4.4vw,3.1rem);color:var(--gold)}
.page-head .sub{margin-top:12px;color:var(--text-dim);max-width:660px;margin-inline:auto}

/* breadcrumb */
.crumbs{font-size:.78rem;color:var(--text-dimmer);margin-bottom:12px}
.crumbs a{color:var(--text-dimmer)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5;margin-inline:7px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================================
   SHOP — catalogue grids, product detail, cart. Used by shop.js.
   ========================================================================== */
.prod-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .14s,border-color .14s}
.prod:hover{transform:translateY(-4px);border-color:var(--gold2)}
.prod.is-out{opacity:.62}
.prod-media{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.prod-media img{width:100%;height:100%;object-fit:contain}
.prod-ribbon{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:5px 10px;border-radius:7px}
.prod-out{position:absolute;inset:auto 0 0 0;background:rgba(18,11,7,.88);color:var(--gold);
  text-align:center;font-size:.74rem;font-weight:700;padding:7px;letter-spacing:1px;
  text-transform:uppercase}
.prod-body{padding:15px 16px 17px;flex:1;display:flex;flex-direction:column}
.prod-body h3{font-size:.94rem;line-height:1.35;margin-bottom:12px;font-family:var(--sans);
  font-weight:700;color:var(--parch)}
.prod-body h3 a:hover{color:var(--gold)}
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.prod-price{font-family:var(--serif);color:var(--gold);font-size:1.16rem;font-weight:700}
.prod-note{font-size:.76rem;color:var(--text-dimmer)}

/* --- product detail --- */
.prod-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:840px){.prod-detail{grid-template-columns:1fr}}
.prod-hero{background:#fff;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.prod-hero img{width:100%;height:100%;object-fit:contain}
.prod-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{width:70px;height:70px;border-radius:10px;overflow:hidden;background:#fff;padding:0;
  border:2px solid transparent;cursor:pointer}
.thumb.is-on{border-color:var(--gold)}
.thumb img{width:100%;height:100%;object-fit:contain}
.prod-info h1{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--gold);margin-bottom:12px}
.prod-detail-price{font-family:var(--serif);font-size:1.9rem;color:var(--parch);margin-bottom:18px}
.prod-buy{display:flex;gap:12px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
.qty{width:78px;padding:12px 10px;border-radius:11px;background:var(--sunken-3);
  border:1px solid var(--line-strong);color:var(--text);font-family:inherit;font-size:1rem;
  text-align:center}
.prod-desc{border-top:1px solid var(--line);padding-top:20px;max-height:none}
.prod-desc p{font-size:.93rem}

/* --- cart --- */
.cart-wrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
@media (max-width:840px){.cart-wrap{grid-template-columns:1fr}}
.cart-lines{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.cart-line{display:grid;grid-template-columns:74px 1fr 78px 86px 34px;gap:14px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-thumb{width:74px;height:74px;border-radius:10px;overflow:hidden;background:#fff;display:block}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-name a{color:var(--parch);font-weight:700;font-size:.92rem}
.cart-name a:hover{color:var(--gold)}
.cart-name span{display:block;margin-top:4px}
.cart-sum{font-family:var(--serif);color:var(--gold);font-size:1.05rem;text-align:right}
.cart-x{background:none;border:0;color:var(--text-dimmer);font-size:1rem;cursor:pointer;padding:6px}
.cart-x:hover{color:var(--red)}
@media (max-width:620px){
  .cart-line{grid-template-columns:60px 1fr 64px;grid-template-areas:"t n n" "t q s"}
  .cart-thumb{grid-area:t;width:60px;height:60px}
  .cart-name{grid-area:n}.cart-line .qty{grid-area:q}.cart-sum{grid-area:s}
  .cart-x{position:absolute;right:12px}
  .cart-line{position:relative}
}
.cart-total{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:22px;position:sticky;top:calc(var(--nav-h) + 16px)}
.cart-total .row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:1.02rem;margin-bottom:8px}
.cart-total .row b{font-family:var(--serif);color:var(--gold);font-size:1.5rem}
.cart-total .btn{width:100%;margin-top:12px}

/* --- cart badge in the nav --- */
.nav-cart{position:relative;display:inline-grid;place-items:center;width:42px;height:40px;
  border-radius:10px;border:1px solid var(--line-strong);color:var(--gold);font-size:1.05rem;
  flex:0 0 auto;margin-left:6px;background:var(--sunken)}
.nav-cart:hover{background:rgba(47,127,134,.13)}
.nav-cart [data-cart-count]{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;
  padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:.68rem;
  font-weight:800;display:grid;place-items:center;font-family:var(--sans)}
@media (max-width:1199px){.nav-cart{margin:12px 0 0;width:100%}}

/* --- toast --- */
.shop-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:400;
  background:var(--panel-solid);border:1px solid var(--gold2);border-radius:13px;
  padding:14px 22px;color:var(--parch);font-size:.9rem;box-shadow:var(--shadow-lg);
  transition:transform .24s ease;max-width:min(520px,92vw);text-align:center}
.shop-toast.is-on{transform:translate(-50%,0)}
.shop-toast a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.shop-toast b{color:var(--gold)}

/* --- shop filter bar --- */
.shop-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.shop-bar input[type="search"]{flex:1;min-width:200px;padding:11px 15px;border-radius:11px;
  background:var(--sunken-3);border:1px solid var(--line-strong);color:var(--text);
  font-family:inherit;font-size:.94rem}
.shop-bar input[type="search"]:focus{outline:none;border-color:var(--gold)}

/* ============================================================================
   CONSENT BANNER — track.js. Until this is answered nothing is sent.
   ========================================================================== */
.hc-consent{position:fixed;left:0;right:0;bottom:0;z-index:500;
  background:var(--panel-solid);border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 40px rgba(0,0,0,.5);
  transform:translateY(110%);transition:transform .3s ease}
.hc-consent.is-on{transform:translateY(0)}
.hc-consent-in{max-width:var(--wrap);margin:0 auto;padding:18px 20px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hc-consent p{margin:0;flex:1;min-width:260px;font-size:.86rem;color:var(--text-dim);line-height:1.6}
.hc-consent a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.hc-consent-btns{display:flex;gap:10px;flex:0 0 auto}
@media (max-width:560px){
  .hc-consent-in{padding:16px}
  .hc-consent-btns{width:100%}
  .hc-consent-btns .btn{flex:1}
}

/* ============================================================================
   CURRICULUM — the history program: lesson tabs, exams, weekly schedule.
   ========================================================================== */
.lesson-head{border-bottom:1px solid var(--line);padding-block:clamp(30px,4vw,52px) 0;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)}
.lesson-head .ch{font-size:.72rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);
  font-weight:800}
.lesson-head h1{font-size:clamp(1.7rem,3.8vw,2.8rem);color:var(--gold);margin-top:10px}
.lesson-head .bk{color:var(--text-dimmer);font-size:.86rem;margin-top:10px}

/* --- tabs --- */
.tabstrip{display:flex;gap:4px;margin-top:26px;overflow-x:auto;scrollbar-width:thin;
  padding-bottom:2px}
.tabstrip::-webkit-scrollbar{height:4px}
.tabstrip::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.tabstrip a{flex:0 0 auto;padding:12px 18px;font-size:.85rem;font-weight:700;color:var(--text-dim);
  border:1px solid transparent;border-bottom:0;border-radius:11px 11px 0 0;white-space:nowrap;
  transition:color .12s,background .12s}
.tabstrip a:hover{color:var(--gold);background:rgba(47,127,134,.07)}
.tabstrip a.is-on{color:var(--gold);background:var(--panel-solid);border-color:var(--line-strong)}
.tabstrip a .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:rgba(47,127,134,.15);font-size:.7rem;margin-right:7px;vertical-align:middle}
.tabstrip a.is-on .n{background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent)}

.panelwrap{border:1px solid var(--line-strong);border-top:0;border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);padding:clamp(22px,3.4vw,40px);margin-bottom:40px}
.panelwrap h2{color:var(--gold);font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:14px}
.panelwrap h3{color:var(--parch);font-size:1.08rem;margin:1.6em 0 .5em}
.panelwrap p{color:var(--text-dim)}

/* --- the panel's own name, where the tab could not carry it ---
   The strip has eight tabs to fit on a phone, so the Subject Matter Expert tab
   is labelled just "Expert". The panel says the whole thing, set smaller than
   the panel's own h2 so it reads as a label for where you are rather than as a
   second title competing with the speaker's name underneath. */
.panelwrap .tabname{font-family:var(--sans);font-size:.95rem;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:800;color:var(--text-dimmer);margin:0 0 20px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}

/* --- the bottom control: tab to tab, and only at the ends to another chapter ---
   Two buttons that are deliberately not interchangeable. An in-lesson step is
   the solid/ghost pair the page uses everywhere; a step that LEAVES the lesson
   picks up .is-chapter, which dashes its border and dims it, so "Next chapter:
   Chapter 3" cannot be mistaken for "Next: Reading" by a student clicking
   through at speed. */
.tabnav{margin-top:8px}
.tabnav-a{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.tabnav-a .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabnav-a .ar{flex:0 0 auto;font-size:1.05em;line-height:1}
.tabnav-a.is-chapter{border-style:dashed;opacity:.88}
.tabnav-a.is-chapter:hover{opacity:1}

/* --- a tab whose media hasn't been supplied --- */
.pending{border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  padding:26px 24px;background:var(--sunken);text-align:center}
.pending .ic{font-size:2rem;opacity:.6}
.pending h3{color:var(--gold);margin:10px 0 8px;font-family:var(--serif)}
.pending p{color:var(--text-dimmer);font-size:.9rem;max-width:520px;margin-inline:auto}

/* --- terms & themes --- */
.termlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.termlist span{background:rgba(47,127,134,.11);border:1px solid var(--line-strong);
  color:var(--gold);padding:5px 13px;border-radius:20px;font-size:.8rem;font-weight:600}

/* --- exam --- */
.examlist{list-style:none;padding:0;margin:0;counter-reset:eq}
.examlist .q{border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;
  margin-bottom:16px;background:var(--sunken)}
.examlist .q-text{color:var(--parch);font-weight:700;font-size:1rem;margin:0 0 14px;
  padding-left:34px;position:relative}
/* The number is written into the markup, not generated: an attempt draws eight of
   eleven questions, so "question 3" has to mean the third question ASKED, and a
   CSS counter cannot be read by a screen reader or copied into a note. */
.examlist .q-n{position:absolute;left:0;top:-2px;
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.78rem;
  background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent);font-family:var(--sans)}
.q-opts{display:grid;gap:8px}
.q-opt{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  background:var(--sunken-2);border:1px solid var(--line);color:var(--text-dim);
  padding:11px 15px;border-radius:10px;font-family:inherit;font-size:.9rem;cursor:pointer;
  transition:background .12s,border-color .12s}
.q-opt:hover:not(:disabled){background:rgba(47,127,134,.09);border-color:var(--gold2);color:var(--text)}
.q-opt:disabled{cursor:default}
.q-letter{flex:0 0 auto;width:20px;height:20px;border-radius:5px;display:grid;place-items:center;
  background:rgba(47,127,134,.14);color:var(--gold);font-size:.72rem;font-weight:800}
.q-opt.is-right{border-color:#2c6b3c;background:rgba(44,107,60,.22);color:#d8f0de}
.q-opt.is-right .q-letter{background:#2c6b3c;color:#fff}
.q-opt.is-wrong{border-color:var(--red);background:rgba(179,55,47,.18);color:#f2cdca}
.q-opt.is-wrong .q-letter{background:var(--red);color:#fff}
.q-why{margin-top:13px;padding:12px 16px;border-radius:9px;background:rgba(47,127,134,.08);
  border:1px solid var(--line);color:var(--text-dim);font-size:.88rem;line-height:1.6}
.q-why .ok{color:#9fe0ae}
.q-why .no{color:#f0a9a4}
.examscore{text-align:center;padding:16px;color:var(--text-dim);font-size:1rem}
.examscore b{color:var(--gold)}

/* --- weekly schedule --- */
.weekcard{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  margin-bottom:26px;background:var(--panel)}
.weekcard-head{padding:20px 24px;background:var(--sunken-2);border-bottom:1px solid var(--line);
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.weekcard-head .wk{font-family:var(--serif);color:var(--gold);font-size:1.3rem}
.weekcard-head .rg{color:var(--parch);font-weight:700}
.weekcard-head .tp{color:var(--text-dimmer);font-size:.85rem;flex:1 1 100%}
.weekcard-body{padding:20px 24px}
.chaplist{display:grid;gap:9px;margin-bottom:20px}
.chaprow{display:flex;gap:14px;align-items:center;padding:12px 15px;border-radius:10px;
  background:var(--sunken);border:1px solid var(--line);transition:border-color .12s,transform .12s}
.chaprow:hover{border-color:var(--gold2);transform:translateX(3px)}
.chaprow .num{flex:0 0 auto;min-width:34px;height:30px;padding:0 7px;border-radius:8px;
  display:grid;place-items:center;background:linear-gradient(180deg,var(--accent-a),var(--accent-b));
  color:var(--on-accent);font-weight:800;font-size:.8rem}
.chaprow .ttl{color:var(--parch);font-weight:700;font-size:.94rem}
.chaprow .go{margin-left:auto;color:var(--gold);font-size:.82rem;font-weight:700}

.booklist{margin:0 0 18px}
.booklist h4{color:var(--gold);font-size:.76rem;letter-spacing:2px;text-transform:uppercase;
  margin:18px 0 10px;font-family:var(--sans);font-weight:800}
.booklist ul{list-style:none;padding:0;margin:0}
.booklist li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--text-dim)}
.booklist li:last-child{border-bottom:0}
.booklist .bt{color:var(--parch);font-weight:700}
.booklist .ba{color:var(--gold);font-size:.84rem}

.srcgroup{margin-bottom:20px}
.srcgroup h4{color:var(--parch);font-size:.98rem;margin-bottom:10px}
.srcgroup li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--text-dim)}
.srcgroup li:last-child{border-bottom:0}
.srcgroup .st{color:var(--gold)}

@media (max-width:620px){
  .tabstrip a{padding:11px 13px;font-size:.8rem}
  .tabstrip a .n{display:none}
}

/* --- chapter enrichment from the book --- */
.era{display:inline-block;background:rgba(47,127,134,.12);border:1px solid var(--line-strong);
  color:var(--gold);padding:5px 15px;border-radius:20px;font-size:.78rem;font-weight:700;
  letter-spacing:.6px;margin-bottom:16px}
.chapimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  margin:24px 0}
.chapimgs figure{margin:0}
.chapimgs img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--line);
  box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.chapimgs figcaption{font-size:.8rem;color:var(--text-dimmer);margin-top:8px;text-align:center}
.whoslist{list-style:none;padding:0;margin:14px 0 0}
.whoslist li{padding:13px 16px;border-radius:10px;background:var(--sunken);
  border:1px solid var(--line);margin-bottom:9px}
.whoslist li b{color:var(--gold);display:block;font-size:.96rem}
.whoslist li span{color:var(--text-dim);font-size:.87rem;display:block;margin-top:3px}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- YouTube facades ---------------------------------------------------------
   A lesson page can carry seven videos. Real iframes would be several megabytes
   of player and a set of third-party cookies before a child clicked anything,
   so each renders as a thumbnail and lesson.js swaps in the player on click.
   The 16:9 box is reserved up front so nothing jumps when it does. */
/* --ar is the video's REAL width/height, measured from its thumbnail and stored
   in curriculum-aspect.js. The channel posts 16:9 lessons, square character
   pieces and vertical music videos, and forcing all three into one box put
   black bars across two thirds of the music frames. Capping the height at 560px
   is what stops a 1:1 video filling the whole column. */
.yt{margin:0 0 18px;position:relative;max-width:calc(var(--ar,1.78) * 560px)}
.yt .yt-play,.yt iframe{display:block;width:100%;aspect-ratio:var(--ar,1.78);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#000;overflow:hidden}
.yt .yt-play{padding:0;cursor:pointer;position:relative}
.yt .yt-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86;
  transition:opacity .16s,transform .3s}
.yt .yt-play:hover img,.yt .yt-play:focus-visible img{opacity:1;transform:scale(1.02)}
.yt .yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:50px;border-radius:13px;background:rgba(15,12,7,.78);
  border:1px solid var(--gold2);display:grid;place-items:center;transition:background .16s}
.yt .yt-btn::after{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--gold);margin-left:4px}
.yt .yt-play:hover .yt-btn{background:var(--gold);}
.yt .yt-play:hover .yt-btn::after{border-left-color:var(--on-accent)}
.yt figcaption{font-size:.85rem;color:var(--text-dim);margin-top:9px;line-height:1.5}
.yt-big .yt-play,.yt-big iframe{box-shadow:var(--shadow)}
.ytgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:16px 0 8px}
.ytgrid .yt{margin-bottom:0}

/* --- the Reading tab --- */
.reading p{margin-bottom:15px}
.reading b{color:var(--parch)}
.factlist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.factlist li{padding:14px 17px 14px 44px;border-radius:10px;background:var(--sunken);
  border:1px solid var(--line);color:var(--text-dim);font-size:.9rem;line-height:1.62;
  position:relative}
.factlist li::before{content:"※";position:absolute;left:16px;top:13px;color:var(--gold);
  font-size:1rem}
.factlist b{color:var(--gold)}

/* --- the Activity tab --- */
.actlist{display:grid;gap:14px;margin:18px 0 4px}
.actcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;
  background:var(--sunken)}
.actcard h3{color:var(--gold);font-size:1.02rem;margin:0 0 9px;display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.actcard h3 .age{font-family:var(--sans);font-size:.66rem;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--text-dimmer);border:1px solid var(--line-strong);
  border-radius:20px;padding:3px 10px;font-weight:700}
.actcard p{color:var(--text-dim);font-size:.92rem;line-height:1.66;margin:0 0 8px}
.actcard p:last-child{margin-bottom:0}
.actcard .outcome{font-size:.87rem;color:var(--text-dimmer)}
.actcard .outcome b{color:var(--gold)}

/* --- "The full activity", the disclosure on an activity card (2026-09-24) ---
   The card shows enough to CHOOSE an activity; the Objective, Materials Needed,
   Instructions and Learning Outcome printed in the Ultimate Guide are behind
   this button, so five activities still fit on a screen. A real <button> with
   aria-expanded, so Tab reaches it and Enter and Space work for free; the panel
   is hidden with the hidden ATTRIBUTE, which keeps its text out of the
   accessibility tree and out of find-on-page while it is shut. */
.actmore{display:inline-flex;align-items:center;gap:9px;margin:10px 0 0;padding:8px 15px;
  font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--gold);background:transparent;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:20px;
  transition:border-color .14s,background .14s,color .14s}
.actmore:hover{border-color:var(--gold2);background:rgba(47,127,134,.1)}
.actmore:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.actmore .chev{width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .16s}
.actmore[aria-expanded="true"] .chev{transform:rotate(225deg) translate(-2px,-2px)}
.actdetail{margin-top:14px;padding:16px 18px;border-radius:var(--radius-sm);
  background:var(--sunken-2);border:1px solid var(--line)}
.actdetail h4{margin:16px 0 6px;font-family:var(--sans);font-size:.7rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gold);font-weight:800}
.actdetail h4:first-child{margin-top:0}
.actdetail p{color:var(--text-dim);font-size:.9rem;line-height:1.66;margin:0}
.actdetail ul,.actdetail ol{margin:0;padding-left:22px;color:var(--text-dim);
  font-size:.9rem;line-height:1.66}
.actdetail li{margin:0 0 6px}
.actdetail li:last-child{margin-bottom:0}
.actdetail .actsteps li{padding-left:3px}
.actdetail .actsteps li::marker{color:var(--gold);font-weight:800}
.actdetail .actmats li::marker{color:var(--gold2)}

/* --- the two pieces a parent grades ---
   Deliberately looks different from the self-marked exam above it: this is the
   part that leaves the device, and a student should be able to see that. */
.submitbox{border:1px solid var(--gold2);border-radius:var(--radius-sm);padding:22px 24px;
  margin:26px 0 8px;background:rgba(47,127,134,.05)}
.submitbox h3{color:var(--gold);font-family:var(--serif);margin:0 0 8px;font-size:1.1rem}
.submitbox textarea{width:100%;min-height:170px;resize:vertical;padding:14px 16px;
  border-radius:11px;background:var(--sunken-3);border:1px solid var(--line-strong);
  color:var(--text);font-family:inherit;font-size:.95rem;line-height:1.7;margin-top:12px}
.submitbox textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(47,127,134,.14)}
.submitbox .subnote{font-size:.78rem;color:var(--text-dimmer);margin:10px 0 4px;line-height:1.6}
.submitbox .subnote b{color:var(--text-dim)}
.substate{font-size:.82rem;color:var(--text-dimmer);align-self:center}
.substate.is-ok{color:#9fe0ae}
.substate.is-bad{color:#f0a9a4}
.substate.is-busy{color:var(--gold)}

/* Visible to a screen reader, not to the eye. Used for labels on controls whose
   purpose the surrounding text already makes obvious. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- the Extra tab's blog cards ---
   A picture, what kind of piece it is, how long it takes and the opening lines.
   "Read it" under a bare title tells a student nothing about whether the click
   is worth it, and these are aimed at a child deciding on a phone. */
.blogcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
  margin:18px 0 6px}
.blogcard{display:flex;gap:0;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;transition:border-color .14s,transform .14s,box-shadow .14s}
.blogcard:hover{border-color:var(--gold2);transform:translateY(-3px);box-shadow:var(--shadow)}
.blogcard .pic{display:block;aspect-ratio:16/9;overflow:hidden;background:#000;
  border-bottom:1px solid var(--line)}
.blogcard .pic img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  display:block;opacity:.9;transition:opacity .14s,transform .35s}
.blogcard:hover .pic img{opacity:1;transform:scale(1.03)}
.blogcard .body{display:block;padding:16px 18px 18px}
.blogcard .kind{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-dimmer);font-weight:800;margin-bottom:8px}
.blogcard b{display:block;font-family:var(--sans);font-size:.98rem;font-weight:700;
  color:var(--parch);line-height:1.42}
.blogcard:hover b{color:var(--gold)}
.blogcard .blurb{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.85rem;color:var(--text-dimmer);line-height:1.6;margin-top:9px}
.blogcard .go{display:block;color:var(--gold);font-size:.82rem;font-weight:700;margin-top:12px}

/* --- the Extra tab's coloring pages ---
   A printable PDF per row: an icon, the title, and the size, because a child on
   a phone should know a 0.7 MB download is coming before they tap it. The whole
   row is the link; the visible text is the title alone, so the aria-label
   carries the rest ("Download the Arctic transportation coloring page, PDF").
   `download` makes the browser save the file rather than opening a viewer.
   The members' chapter's rows are the same markup with `data-coloring` in place
   of a real href — lesson.js fetches those through the API with the student's
   token (backend/coloring.js). */
.colorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;
  margin:16px 0 10px;padding:0;list-style:none}
.colorpage{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  text-decoration:none;color:inherit;transition:border-color .14s,transform .14s,box-shadow .14s}
.colorpage:hover,.colorpage:focus-visible{border-color:var(--gold2);transform:translateY(-2px);
  box-shadow:var(--shadow)}
.colorpage .ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border-radius:8px;background:rgba(47,127,134,.12);border:1px solid var(--line-strong);
  font-size:1.05rem;line-height:1}
.colorpage .txt{display:block;min-width:0}
.colorpage b{display:block;font-family:var(--sans);font-size:.9rem;font-weight:700;
  color:var(--parch);line-height:1.4}
.colorpage:hover b{color:var(--gold)}
.colorpage .meta{display:block;font-size:.74rem;color:var(--text-dimmer);margin-top:3px;
  letter-spacing:.6px}
/* THE PREVIEW (2026-09-24). Each row now leads with a ~300 px WebP of the
   sheet's first page, so a student sees what they are about to print. The box
   carries the sheet's own aspect ratio inline and the <img> its real pixel
   width and height, so the grid reserves the space before the bytes land and
   nothing jumps. A members' sheet's preview arrives from the API as an object
   URL (lesson.js) and its box is hidden outright if it cannot be fetched —
   better no picture than a broken-image icon on a locked sheet. */
.colorpage .pic{flex:0 0 auto;width:74px;overflow:hidden;border-radius:8px;
  background:var(--sunken-2);border:1px solid var(--line-strong)}
.colorpage .pic img{display:block;width:100%;height:100%;object-fit:cover}
.colorpage:hover .pic{border-color:var(--gold2)}
.colornote{font-size:.85rem;color:var(--text-dim);margin:2px 0 4px}

.hashrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:22px 0 10px}
.hashrow .lbl{font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-dimmer);font-family:var(--sans);font-weight:800}
.hashtag{display:inline-block;background:rgba(47,127,134,.1);border:1px solid var(--line-strong);
  color:var(--gold);padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:700;
  text-decoration:none;transition:background .13s,border-color .13s}
.hashtag:hover{background:rgba(47,127,134,.2);border-color:var(--gold2)}

/* --- "Read first", on the Overview tab ---
   Two books, and a student needs to be told which pages of which. The Ultimate
   Guide carries the lesson plans, activities and the chapter illustrations;
   Living History carries the first-person accounts the Guest Speaker tab uses.
   One chapter exists only in the second, and this box says so rather than
   printing a page range that would send a student to the wrong section. */
.readfirst{border:1px solid var(--line-strong);border-left:3px solid var(--gold2);
  border-radius:var(--radius-sm);padding:16px 20px;margin-top:16px;background:var(--sunken)}
.readfirst h3{color:var(--gold);font-family:var(--serif);font-size:1rem;margin-bottom:9px}
.readfirst ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.readfirst li{color:var(--text-dim);font-size:.9rem;line-height:1.6;padding-left:20px;
  position:relative}
.readfirst li::before{content:"▸";position:absolute;left:0;color:var(--gold);font-size:.9rem}
.readfirst b{color:var(--parch)}

/* --- who is talking, on the Subject Matter Specialist tab ---
   The heading changes with the speaker: "Who they were" for a documented person,
   "What this video covers" for a composite the books invented to carry a way of
   life that left no names. The little grey tag makes the second case plain at a
   glance, because a student should never have to guess which one they are
   reading — that distinction is half of what the tab teaches. */
.speakerbio{border:1px solid var(--line-strong);border-left:3px solid var(--gold2);
  border-radius:var(--radius-sm);padding:18px 22px;margin:16px 0 0;background:var(--sunken)}
.speakerbio h4{color:var(--gold);font-family:var(--sans);font-size:.68rem;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:800;margin:0 0 9px}
.speakerbio .role{color:var(--parch);font-weight:700;font-size:.95rem;margin:0 0 10px;
  font-family:var(--sans);line-height:1.5}
.speakerbio p:last-child{margin:0;color:var(--text-dim);font-size:.94rem;line-height:1.72}
.speakerbio b{color:var(--parch)}
.tag-nb{display:inline-block;background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--text-dimmer);padding:2px 9px;border-radius:20px;font-size:.65rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;vertical-align:middle;margin-left:6px}
.speakerblock{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.speakerblock:last-of-type{border-bottom:0;padding-bottom:0}

/* --- the chapter illustration inside the Reading prose ---
   Floated so the text runs around it rather than stopping for it. Right rather
   than left, deliberately: the blog portraits float LEFT, and a reader moving
   between the two should not have to work out which kind of page they are on.
   Unfloats below 620px, where a 44% float is a thumbnail beside two-word lines. */
.reading .readimg{float:right;width:44%;max-width:340px;min-width:220px;
  margin:4px 0 18px 26px}
.reading .readimg img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.reading .readimg figcaption{font-size:.78rem;color:var(--text-dimmer);margin-top:8px;
  line-height:1.5;text-align:center}
/* the float must not run out past the prose into the facts list below */
.reading::after{content:"";display:block;clear:both}
@media (max-width:620px){
  .reading .readimg{float:none;width:100%;max-width:none;margin:20px 0}
}

/* ==================================================================== ACADEMY
   Progress, the exam gate, the notepad and the notebook. Built to the Xogos
   academy brief so every academy behaves the same way. */

/* --- locked and finished lessons --- */
/* A class that sets `display` BEATS the [hidden] attribute, because [hidden] is
   only a user-agent style. Every element in this file that is toggled with
   .hidden = true and also carries a display rule needs this, or it renders as an
   empty box — which is exactly what .lockbar did on a signed-out lesson page. */
[hidden]{display:none !important}

.lockbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--sunken);
  margin-bottom:18px}
.lockbar .ic{font-size:1.2rem}
.lockbar b{color:var(--gold)}
.lockbar p{margin:0;color:var(--text-dim);font-size:.9rem;line-height:1.55;flex:1 1 320px}
.lockbar.is-done{border-color:#2c6b3c;background:rgba(44,107,60,.14)}
.lockbar.is-done b{color:#9fe0ae}

.chaprow.is-locked{opacity:.55}
.chaprow .state{font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.chaprow .state.done{color:#9fe0ae}
.chaprow .state.locked{color:var(--text-dimmer)}

/* --- the exam gate ---
   Deliberately plain and a little stern: the student is being told the stakes
   while they can still walk away. */
.examgate{border:1px solid var(--line-strong);border-radius:var(--radius);padding:26px 28px;
  background:var(--sunken);max-width:640px}
.examgate h3{color:var(--gold);font-family:var(--serif);font-size:1.3rem;margin:0 0 14px}
.gatefacts{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.gatefacts li{color:var(--text-dim);font-size:.95rem;line-height:1.6;padding-left:22px;
  position:relative}
.gatefacts li::before{content:"\25B8";position:absolute;left:0;color:var(--gold)}
.gatefacts b{color:var(--parch)}
.callout.warn{border-left-color:var(--red)}
.callout.warn b{color:#f0a9a4}

.examhead{color:var(--text-dim);font-size:.88rem;padding:12px 16px;border-radius:10px;
  background:var(--sunken);margin-bottom:18px}
.examhead b{color:var(--gold)}

.q-opt.is-chosen{border-color:var(--gold2);background:rgba(47,127,134,.16);color:var(--text)}
.q-opt.is-chosen .q-letter{background:linear-gradient(180deg,var(--accent-a),var(--accent-b));
  color:var(--on-accent)}

.examresult{border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px 26px;
  margin-bottom:22px;background:var(--sunken)}
.examresult h3{font-family:var(--serif);font-size:1.4rem;margin:0 0 8px}
.examresult.is-pass{border-color:#2c6b3c}
.examresult.is-pass h3{color:#9fe0ae}
.examresult.is-fail{border-color:var(--red)}
.examresult.is-fail h3{color:#f0a9a4}
.examresult .big{font-size:2rem;font-family:var(--serif);color:var(--gold);margin:0 0 6px}
.examresult p{color:var(--text-dim);margin:0 0 8px;line-height:1.6}
.examresult p.ok{color:#9fe0ae}
.examresult p.warn{color:var(--gold)}
.examresult p.err{color:#f0a9a4}

/* --- the celebration ---
   Never rendered at all under prefers-reduced-motion; academy.js checks before
   creating it, and announces to a screen reader instead. */
.hc-confetti{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden}
.hc-confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  background:var(--gold);animation:hc-fall 2.6s linear forwards}
.hc-confetti i:nth-child(3n){background:#9fe0ae}
.hc-confetti i:nth-child(3n+1){background:var(--red)}
.hc-confetti i:nth-child(4n){background:var(--blue)}
@keyframes hc-fall{to{transform:translateY(104vh) rotate(540deg);opacity:.15}}

/* --- the private notepad --- */
.hc-pad-open{position:fixed;right:18px;bottom:18px;z-index:400;
  background:linear-gradient(180deg,var(--accent-a),var(--accent-b));color:var(--on-accent);
  border:1px solid var(--gold2);border-radius:24px;padding:11px 20px;font-family:var(--sans);
  font-weight:800;font-size:.86rem;cursor:pointer;box-shadow:var(--shadow)}
.hc-pad{position:fixed;right:18px;bottom:76px;z-index:401;width:min(420px,calc(100vw - 36px));
  background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.hc-pad-head{display:flex;justify-content:space-between;align-items:center}
.hc-pad-head h3{color:var(--gold);font-family:var(--serif);font-size:1.1rem;margin:0}
.hc-pad-close{background:none;border:0;color:var(--text-dim);font-size:1.5rem;cursor:pointer;
  line-height:1;padding:0 4px}
.hc-pad-why{font-size:.8rem;color:var(--text-dimmer);line-height:1.6;margin:0;
  border-left:2px solid var(--gold2);padding-left:11px}
.hc-pad-why b{color:var(--gold)}
.hc-pad-text{min-height:220px;resize:vertical;background:var(--sunken-2);
  border:1px solid var(--line-strong);border-radius:10px;color:var(--text);padding:12px 14px;
  font-family:inherit;font-size:.94rem;line-height:1.65}
.hc-pad-text:focus{outline:none;border-color:var(--gold)}
.hc-pad-state{font-size:.78rem;color:var(--text-dimmer);margin:0;min-height:1em}
.hc-pad-keep{font-size:.72rem;color:var(--text-dimmer);margin:0}
@media (max-width:640px){
  .hc-pad{right:8px;left:8px;bottom:70px;width:auto}
  .hc-pad-open{right:10px;bottom:10px}
}

/* --- photos --- */
.hc-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;
  margin-bottom:14px}
.hc-photo{margin:0;position:relative;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--sunken-3)}
.hc-photo img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hc-photo-del{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(0,0,0,.7);color:#fff;cursor:pointer;
  font-size:1rem;line-height:1}
.hc-photo-add{display:inline-block;border:1px dashed var(--line-strong);border-radius:10px;
  padding:11px 18px;cursor:pointer;color:var(--gold);font-weight:700;font-size:.86rem}
.hc-photo-add:hover{border-color:var(--gold2);background:rgba(47,127,134,.07)}
.hc-photo-state{font-size:.82rem;color:var(--text-dimmer);margin:10px 0 0;min-height:1em}

/* --- markup over a handed-in answer --- */
.markable{white-space:pre-wrap;line-height:1.7;color:var(--text-dim);cursor:text}
.markable mark{background:none;color:inherit}
.markable mark.mk-highlight{background:rgba(47,127,134,.28);color:var(--text)}
.markable mark.mk-bold{font-weight:800;color:var(--parch)}
.markable mark.mk-underline{text-decoration:underline;text-underline-offset:3px}
.markable mark.mk-strike{text-decoration:line-through;opacity:.65}

/* --- the calendar --- */
.calgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.calcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;
  background:var(--sunken);text-decoration:none;display:block}
.calcard .d{font-size:.72rem;letter-spacing:1.1px;text-transform:uppercase;font-weight:800;
  color:var(--text-dimmer);font-family:var(--sans)}
.calcard .t{display:block;color:var(--parch);font-size:.9rem;font-weight:700;margin-top:6px;
  line-height:1.4;font-family:var(--sans)}
.calcard .s{display:block;margin-top:8px;font-size:.78rem;color:var(--text-dimmer)}
.calcard.is-today{border-color:var(--gold2);background:rgba(47,127,134,.12)}
.calcard.is-today .d{color:var(--gold)}
.calcard.is-done{border-color:#2c6b3c;background:rgba(44,107,60,.14)}
.calcard.is-done .s{color:#9fe0ae}
.calcard.is-missed{border-color:var(--red);background:rgba(179,55,47,.15)}
.calcard.is-missed .d{color:#f0a9a4}

/* --- the grades sheet ---
   Three states that all look like "no grade" and must be told apart. */
.gradestate{font-size:.76rem;letter-spacing:1.1px;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.gradestate.not-started{color:var(--text-dimmer)}
.gradestate.in-progress{color:var(--gold)}
.gradestate.parent-to-read{color:#a8c8f0}
.gradestate.marked{color:#9fe0ae}
.parentnote{margin-top:10px;padding:12px 16px;border-radius:9px;background:var(--sunken-2);
  border-left:3px solid var(--gold2);color:var(--text-dim);font-size:.9rem;line-height:1.62}
.parentnote b{color:var(--gold)}

/* --- the void appeal, on the exam gate ---
   A student can write one; only a teacher can approve it. Deliberately quiet —
   it is not an escape hatch, it is a way to be heard. */
.appealbox{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.appealbox h4{color:var(--gold);font-family:var(--sans);font-size:.78rem;letter-spacing:1.4px;
  text-transform:uppercase;font-weight:800;margin:0 0 8px}
.appealbox p{font-size:.86rem;line-height:1.6;margin:0 0 10px}
.appealbox textarea{width:100%;background:var(--sunken-2);border:1px solid var(--line-strong);
  color:var(--text);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:.9rem;
  line-height:1.6;resize:vertical;margin-bottom:10px}
.appealbox textarea:focus{outline:none;border-color:var(--gold)}

/* --- book page: pick-a-chapter cards and the two week panels ---
   Built for a child choosing, not reading: a picture and a title per chapter, a
   checkbox to pick it, and the reading list and sources one click away. */
.wkpick{margin:0 0 12px;color:var(--text-dim);font-size:.95rem}
.wkpick [data-pickcount]{color:var(--gold);font-weight:700;margin-left:6px}
.chapcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.chapcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--sunken);transition:border-color .14s,box-shadow .14s,transform .14s}
.chapcard:hover{border-color:var(--gold2);transform:translateY(-3px);box-shadow:var(--shadow)}
.chapcard.is-picked{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.chapcard-link{display:flex;flex-direction:column;flex:1;text-decoration:none}
.chapcard-link.is-locked{opacity:.55}
.chapcard-pic{position:relative;display:block;aspect-ratio:16/10;background:var(--deep);overflow:hidden}
.chapcard-pic img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.chapcard:hover .chapcard-pic img{transform:scale(1.05)}
.chapcard-n{position:absolute;left:10px;top:10px;background:linear-gradient(180deg,var(--accent-a),var(--accent-b));
  color:var(--on-accent);font-size:.68rem;font-weight:800;letter-spacing:.6px;padding:4px 10px;border-radius:999px;
  text-transform:uppercase}
.chapcard-ttl{display:block;padding:12px 14px 4px;color:var(--parch);font-weight:700;font-size:.98rem;line-height:1.35}
.chapcard .go{display:block;padding:0 14px 12px;color:var(--gold);font-size:.8rem;font-weight:700;margin-top:auto}
.chapcard-pick{display:flex;align-items:center;gap:9px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer;
  font-size:.88rem;font-weight:700;color:var(--text-dim);background:var(--sunken-2);user-select:none}
.chapcard-pick input{width:20px;height:20px;accent-color:var(--gold2);cursor:pointer;margin:0}
.chapcard.is-picked .chapcard-pick{color:var(--gold)}
.wkbtns{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.wkbtns .btn{font-size:.92rem;padding:12px 22px}
.wkbtns .btn.is-open{outline:3px solid var(--gold);outline-offset:2px}
.wkpanel{margin-top:16px;padding:18px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--sunken)}
.lbgrade + .lbgrade{margin-top:20px}
.lbgrade h4{color:var(--gold);font-size:.74rem;letter-spacing:2px;text-transform:uppercase;margin:0 0 10px;
  font-family:var(--sans);font-weight:800}
.lbcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.lbcard{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.lbcover{display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--sunken-3);
  border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:6px;transition:transform .14s}
.lbcover img{width:100%;height:100%;object-fit:cover}
.lbnocover{display:grid;place-items:center;height:100%;font-size:2.4rem;opacity:.5}
a.lbcard:hover .lbcover{transform:translateY(-3px)}
.lbtitle{color:var(--parch);font-weight:700;font-size:.86rem;line-height:1.3}
.lbauthor{color:var(--text-dimmer);font-size:.78rem}
/* A living book that is a novel, a modern argument, outside the era or for mature readers says so. */
.lbtag{align-self:flex-start;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:700;margin-top:2px}
.lbgo{color:var(--gold);font-size:.78rem;font-weight:800;margin-top:2px}
.srclist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.srclist li{padding:10px 12px;border-radius:9px;background:var(--sunken-2);border:1px solid var(--line);
  font-size:.88rem;line-height:1.45}
.srclist a{color:var(--gold);font-weight:700;text-decoration:none}
.srclist a:hover{text-decoration:underline}
.srclist .st{color:var(--parch);font-weight:700}
.srclist .sby{display:block;color:var(--text-dimmer);font-size:.8rem}
.srclist .snote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--text-dim);font-size:.82rem;margin-top:2px}
.srclist .snote.full{display:block;-webkit-line-clamp:unset;overflow:visible}
.srclist .skind{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);
  color:var(--text-dimmer);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px}
.primsrc{margin-top:22px}
.primsrc .srclist{margin-top:10px}

/* --- the Guest Speaker tab: square players with the words beside them ---
   Every speaker video is the same square, with its description to the right
   (stacked on a phone). The player is locked — see initLockedVideos in lesson.js. */
.spkrow{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:26px;align-items:start;margin:18px 0 28px}
.spkrow + .spkrow{padding-top:26px;border-top:1px solid var(--line)}
@media (max-width:760px){.spkrow{grid-template-columns:1fr}}
.spktext .speakerbio{margin-top:0}
.spktitle{color:var(--parch);font-weight:700;margin:0 0 10px;font-size:.98rem;line-height:1.4}
.ytl{margin:0;width:100%}
.ytl-frame{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:var(--radius-sm);
  background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.ytl-stage{position:absolute;inset:0;overflow:hidden}
.ytl-stage iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;pointer-events:none}
.ytl[data-shape="wide"] .ytl-stage iframe{width:calc(100% * var(--ar));left:50%;transform:translateX(-50%)}
.ytl[data-shape="tall"] .ytl-stage iframe{height:calc(100% / var(--ar));top:50%;transform:translateY(-50%)}
.ytl.is-plain .ytl-stage iframe{pointer-events:auto;width:100%;height:100%;left:0;top:0;transform:none}
.ytl-cover{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;border:0;
  background:#000;cursor:pointer}
.ytl-cover img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .16s}
.ytl-cover:hover img{opacity:1}
.ytl-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  background:rgba(15,12,7,.72);border:2px solid var(--gold2);display:grid;place-items:center}
.ytl-btn::after{content:"";border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent var(--gold);margin-left:6px}
.ytl-cover:hover .ytl-btn{background:var(--gold)}
.ytl-cover:hover .ytl-btn::after{border-left-color:var(--on-accent)}
.ytl-cover.is-loading .ytl-btn{animation:ytlpulse 1s ease-in-out infinite}
@keyframes ytlpulse{50%{opacity:.45}}
.ytl-bar{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 8px;border-radius:10px;
  background:var(--sunken-2);border:1px solid var(--line)}
.ytl-bar button{flex:0 0 auto;width:34px;height:34px;border-radius:8px;border:1px solid var(--line-strong);
  background:var(--sunken);color:var(--gold);cursor:pointer;font-size:.9rem;line-height:1;display:grid;place-items:center}
.ytl-bar button:hover{background:rgba(47,127,134,.12)}
.ytl-seek{flex:1;min-width:60px;accent-color:var(--gold2)}
.ytl-time{flex:0 0 auto;font-size:.76rem;color:var(--text-dimmer);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.ytl:fullscreen{background:#000;display:flex;flex-direction:column;justify-content:center;padding:2vh 2vw}
.ytl:fullscreen .ytl-frame{width:auto;height:calc(100% - 60px);margin:0 auto;border:0}


/* ============================================================================
   NAUTICAL CHART — THE SITE'S DESIGN
   ----------------------------------------------------------------------------
   Chosen by the owner in session 51 from eight previews. Everything above is
   the component system; this block repaints it: sea-chart paper crossed by
   compass rhumb lines, a navy nav and header with a compass-rose star, chart
   scale bars, signal-flag lesson tabs, double-ruled cartouche cards, chart red
   and buoy yellow. It is LAST in the file on purpose, so it wins over the base
   rules without !important. The original preview file and the seven designs not
   chosen are kept outside the site in extra/design-previews/.
   ========================================================================== */
:root{
  --navy:#12324d; --chartred:#b33a2e; --buoy:#e8b92f; --teal:#2f7f86; --seaweed:#2c6b3c; --signal:#5b4a8a;
  --gold:#b33a2e; --gold2:#2f7f86; --gold-deep:#0b2236;
  --accent-a:#1f5178; --accent-b:#12324d; --on-accent:#f3f8f6;
  --parch:#12324d; --ink:#1c2b36;
  --red:#b33a2e; --blue:#1f5178; --land:#2c6b3c; --active:#5b4a8a;
  --bg0:#cfe3dd; --bg1:#dcebe6; --bg2:#e9f3ef;
  --panel:#f7fbf8; --panel-solid:#f7fbf8;
  --sunken:#eef6f2; --sunken-2:#fbfdfc; --sunken-3:#e3efea;
  --line:rgba(18,50,77,.18); --line-strong:rgba(18,50,77,.36);
  --text:#1c2b36; --text-dim:#344a58; --text-dimmer:#5d7280;
  --deep:#12324d;
  --serif:"Cinzel",Georgia,serif;
  --sans:"Libre Franklin","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --radius:6px; --radius-sm:4px;
  --shadow:0 8px 20px rgba(18,50,77,.12);
  --shadow-lg:0 18px 44px rgba(18,50,77,.2);
  --scale:repeating-linear-gradient(90deg,#12324d 0 28px,#f7fbf8 28px 56px);
}
body{background:var(--bg1)}
.page-bg{background:
  repeating-conic-gradient(from 0deg at 86% 18%,rgba(18,50,77,.075) 0 .35deg,transparent .35deg 11.25deg),
  repeating-conic-gradient(from 0deg at 8% 82%,rgba(179,58,46,.06) 0 .35deg,transparent .35deg 11.25deg),
  linear-gradient(180deg,#e9f3ef,#cfe3dd) fixed}

/* ---- nav ---- */
/* no backdrop-filter: the bar is opaque navy, and a backdrop-filter makes the
   nav the containing block for its position:fixed drawer — which then collapsed
   to a 28px strip under the bar instead of filling the screen below 1200px */
.nav{background:#12324d;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--scale)}
.nav-link{color:#e6f1f4}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--buoy);background:rgba(232,185,47,.1)}
.nav-link.is-current{color:var(--buoy)} .nav-link.is-current::after{background:var(--buoy)}
.nav-drop{background:#12324d;border-color:rgba(232,185,47,.3)}
.nav-drop a{color:#e6f1f4} .nav-drop a:hover{background:rgba(232,185,47,.12);color:var(--buoy)}
.nav-burger{color:var(--buoy);border-color:rgba(232,185,47,.4)}
/* the slide-out drawer is navy like the bar: on the paper panel colour the
   bar's light link text was close to invisible */
@media (max-width:1199px){
  .nav-menu{background:#12324d;border-left-color:rgba(232,185,47,.35)}
  .nav-drop{background:none;border-left-color:rgba(232,185,47,.35)}
  .nav-item + .nav-item{border-top:1px solid rgba(230,241,244,.14)}
}
/* Each top-level menu reads as ONE item (owner, 2026-09-18: "make something
   distinguish each dropdown to be separate words" — "Play Digital" read like two
   entries). On the full-width bar: a thin chart-rule divider between items, a
   pill that lights on hover/open, and a buoy-yellow caret on every drop-down.
   The slide-out drawer (below 1200px) already stacks one item per row. */
.nav-link .caret{color:var(--buoy);opacity:.9}
@media (min-width:1200px){
  .nav-menu{gap:0}
  .nav-item + .nav-item{margin-left:1px}
  .nav-item + .nav-item::before{content:"";position:absolute;left:-1px;top:50%;width:1px;height:22px;
    transform:translateY(-50%);background:rgba(230,241,244,.3);pointer-events:none}
  .nav-link{padding:9px 9px;border-radius:6px}
  .nav-link:hover,.nav-link[aria-expanded="true"]{background:rgba(232,185,47,.14);box-shadow:inset 0 0 0 1px rgba(232,185,47,.35)}
  .nav-cta{margin-left:10px}
  .nav-cart{margin-left:6px}
}
/* ---- Sign In / My Account (owner, 2026-09-18) — beside Play Free, the same size
   family (padding, type, radius) but OUTLINED, so Play Free stays the one filled
   call to action. Signed in, a buoy-yellow initial disc + "My Account". */
.nav-account{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;
  margin-left:10px;padding:8px 14px;border-radius:11px;font-size:.82rem;font-weight:800;line-height:1.2;
  white-space:nowrap;color:#f7fbf8;background:transparent;border:1.5px solid rgba(230,241,244,.55);
  transition:background .13s,color .13s,border-color .13s}
.nav-account:hover{background:rgba(232,185,47,.14);color:var(--buoy);border-color:var(--buoy)}
.nav-account-initial{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--buoy);color:var(--navy);font-size:.72rem;font-weight:800;line-height:1}
/* The full row (content width is 1140px at every width from 1220 up) now carries
   the account button too, so each menu link gives up a few pixels and the type
   steps down a hair — Play Free and the cart never leave the bar, signed in or out
   (measured in headless Chrome at 1200/1280/1366/1920). */
@media (min-width:1200px){
  .nav-link{padding:9px 5px;font-size:.8rem}
  .nav-account{margin-left:8px;padding:0 11px;min-height:42px}
  .nav-account + .nav-cta{margin-left:6px}
}
@media (max-width:1199px){
  .nav-account{margin:14px 0 0;padding:12px;font-size:.94rem}
}

/* ---- headers: navy with a compass rose ---- */
.page-head,.lesson-head{position:relative;overflow:hidden;border-bottom:0;
  background:repeating-conic-gradient(from 0deg at 88% 46%,rgba(255,255,255,.09) 0 .6deg,transparent .6deg 22.5deg),
             linear-gradient(135deg,#12324d 0%,#1f5872 100%)}
.page-head::after,.lesson-head::after{content:"";position:absolute;right:7%;top:46%;width:150px;height:150px;
  transform:translate(50%,-50%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  background:linear-gradient(135deg,#f3cf5c 50%,#b8861a 50%);opacity:.9;pointer-events:none}
.page-head::before,.lesson-head::before{content:"";position:absolute;right:7%;top:46%;width:100px;height:100px;
  transform:translate(50%,-50%) rotate(45deg);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  background:linear-gradient(135deg,#f7fbf8 50%,#9fc3cf 50%);opacity:.55;pointer-events:none}
.page-head > *,.lesson-head > *{position:relative;z-index:1}
.page-head h1,.lesson-head h1{color:#f7fbf8;font-weight:800;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.page-head .sub,.lesson-head .bk{color:#d7e8ee}
.page-head .crumbs,.page-head .crumbs a,.lesson-head .crumbs,.lesson-head .crumbs a{color:#9fc3cf}
.page-head .kicker,.lesson-head .ch{color:var(--buoy);opacity:1}
.page-head .btn-ghost{background:transparent;color:#f7fbf8;border-color:#f7fbf8}
@media (max-width:760px){.page-head::after,.page-head::before,.lesson-head::after,.lesson-head::before{display:none}}
/* ---- page headers backed by the PLAY MATS (owner, 2026-09-18: "Use the playmats
   as the headline backing for each of the major pages, excluding the homepage").
   site.js picks the mat — by data-page, with a few per-page overrides — and sets
   body[data-mat]; lesson pages (.lesson-head), blog posts (no page-head), the
   homepage and the signed-in tools (academy, the ambassador dashboard and
   marketplace, my bracket; pages with a data-page of their own have no mat)
   get none and keep the plain navy chart header.
   The images are assets/mats/head-*.webp: the SCENE band of each mat (the card
   slots along the bottom cropped away), ≤1280px wide, 12–78KB. A navy overlay
   (.60 at the edges, ~.80 behind the words) keeps the white heading readable on
   every mat — even a pure-white mat pixel gives 4.4:1 at the edge and over 8:1
   behind the words, with a text-shadow on top — and the navy
   base colour paints first, so there is no flash of unreadable text and no
   layout shift — the band's size never depends on the image. */
body[data-mat] .page-head{background-color:#12324d;background-image:
  radial-gradient(ellipse 60% 70% at 50% 55%,rgba(11,34,54,.5),rgba(11,34,54,0) 100%),
  linear-gradient(180deg,rgba(11,34,54,.60) 0%,rgba(18,50,77,.62) 55%,rgba(11,34,54,.78) 100%),
  var(--mat);background-size:auto,auto,cover;background-position:center,center,center 38%;background-repeat:no-repeat}
body[data-mat] .page-head h1{text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.45)}
body[data-mat="colosseum"]{--mat:url("assets/mats/head-colosseum.webp")}
body[data-mat="burning-map"]{--mat:url("assets/mats/head-burning-map.webp")}
body[data-mat="little-big-horn"]{--mat:url("assets/mats/head-little-big-horn.webp")}
body[data-mat="himeji"]{--mat:url("assets/mats/head-himeji.webp")}
body[data-mat="hastings"]{--mat:url("assets/mats/head-hastings.webp")}
body[data-mat="alamo"]{--mat:url("assets/mats/head-alamo.webp")}
body[data-mat="six-day-war"]{--mat:url("assets/mats/head-six-day-war.webp")}
body[data-mat="normandy"]{--mat:url("assets/mats/head-normandy.webp")}
body[data-mat="revwar"]{--mat:url("assets/mats/head-revwar.webp")}
.hero-media img{filter:saturate(.9) brightness(.62)}
.hero-media::after{background:linear-gradient(180deg,rgba(18,50,77,.25),rgba(18,50,77,.85))}
.hero h1{color:#f7fbf8;text-shadow:0 3px 0 #0b2236,0 14px 30px rgba(0,0,0,.5)}
.hero .lede{color:#e6f1f4} .hero .kicker{color:var(--buoy)}
.band-media img{filter:brightness(.42) saturate(.9)}
.band-body,.band-body h2,.band-body p,.band-body .sub,.band-body .lead{color:#f7fbf8}
.kicker{color:var(--teal);opacity:1;font-weight:800}
.section-head h2,.split-body h2{color:var(--navy)}
/* The scale-bar divider under section titles was REMOVED (owner, 2026-09-24):
   it cost 20px under every heading on every page and earned none of it.
   Do not add it back as a missing flourish. */
.split-body .sub{color:var(--teal)}
.section-alt{background:rgba(247,251,248,.55);border-block:2px solid var(--navy)}

/* ---- buttons ---- */
.btn{background:var(--chartred);border:2px solid var(--navy);border-radius:4px;color:#fff;box-shadow:3px 3px 0 var(--navy);
  font-family:var(--serif);font-weight:700;letter-spacing:1px}
.btn:hover{background:var(--navy);filter:none}
.btn-ghost{background:#f7fbf8;color:var(--navy);border:2px solid var(--navy)}
.btn-ghost:hover{background:#e6f1f4}
.btn-green{background:var(--teal)}

/* ---- cartouche cards ---- */
.card,.stat,.blogcard,.faq{background:#f7fbf8;border:3px double var(--navy);border-radius:6px;box-shadow:var(--shadow)}
.card h3,.blogcard b{color:var(--navy);font-family:var(--serif);font-weight:700}
.card-link,.blogcard .go{color:var(--chartred)}
.card:hover{border-color:var(--chartred)}
.stat .n{color:var(--chartred)}
.split-media img{border:3px double var(--navy);box-shadow:var(--shadow-lg)}
.ticks li::before{background:var(--buoy);box-shadow:0 0 0 2px var(--navy)}
.numbers li::before{background:var(--navy);color:var(--buoy)}
.faq summary{color:var(--navy)} .faq summary::before{color:var(--chartred)}
table.data th{background:var(--navy);color:#f7fbf8}
.callout{background:#fdf6dc;border:1px solid var(--buoy);border-left:6px solid var(--navy);color:var(--text)}
.callout b{color:var(--chartred)}

/* ---- lesson tabs: signal flags ---- */
.tabstrip{gap:6px}
.tabstrip a{--tc:var(--navy);background:#f7fbf8;color:var(--tc);border:2px solid var(--tc);border-bottom:0;
  border-radius:4px 4px 0 0;box-shadow:inset 7px 0 0 var(--tc);padding-left:24px;font-weight:800}
.tabstrip a:nth-child(2){--tc:var(--chartred)} .tabstrip a:nth-child(3){--tc:var(--teal)} .tabstrip a:nth-child(4){--tc:#b0800c}
.tabstrip a:nth-child(5){--tc:var(--signal)} .tabstrip a:nth-child(6){--tc:var(--seaweed)} .tabstrip a:nth-child(7){--tc:var(--chartred)}
.tabstrip a:nth-child(8){--tc:var(--navy)}
.tabstrip a:hover{background:#fff;color:var(--tc)}
.tabstrip a .n{background:var(--tc);color:#fff;border-radius:3px}
.tabstrip a.is-on{background:var(--tc);color:#fff;border-color:var(--tc);box-shadow:inset 7px 0 0 var(--buoy)}
.tabstrip a.is-on .n{background:#fff;color:var(--tc)}
.panelwrap{background:#f7fbf8;border:2px solid var(--navy);box-shadow:var(--shadow-lg)}
.panelwrap h2{color:var(--navy)}
.panelwrap h3{color:var(--teal);font-family:var(--serif)}

/* ---- lesson content ---- */
.panelwrap .era{background:var(--buoy);color:var(--navy);border:0;border-radius:3px;font-family:var(--serif);font-weight:800}
.termlist span,.hashtag{background:#eef6f2;border:1px solid var(--teal);color:var(--navy);border-radius:999px}
.whoslist li{background:#fbfdfc;border:1px solid var(--line);border-left:5px solid var(--teal)}
.whoslist li:nth-child(even){border-left-color:var(--chartred)}
.whoslist li b{color:var(--navy)}
.factlist li{background:#fbfdfc}
.factlist li::before{content:"◈";color:var(--chartred)}
.factlist b{color:var(--teal)}
.actcard{background:#fbfdfc;border-top:4px solid var(--teal)}
.actmore{color:var(--teal);border-color:var(--teal)}
.actmore:hover{background:#eef6f2;color:var(--navy);border-color:var(--navy)}
.actdetail{background:#eef6f2;border:1px solid var(--teal)}
.actdetail h4{color:var(--navy)}
.actdetail p,.actdetail li{color:#2c4a5c}
.actdetail .actsteps li::marker{color:var(--chartred)}
.actdetail .actmats li::marker{color:var(--teal)}
.panelwrap .tabname{color:var(--teal);border-bottom-color:var(--teal)}
.colorpage .pic{background:#eef6f2;border-color:var(--navy)}
.tabnav-a.is-chapter{border-style:dashed}
.actcard h3{color:var(--navy);font-family:var(--serif)}
.speakerbio,.readfirst{background:#eaf3f7;border:1px solid var(--line);border-left:5px solid var(--navy)}
.speakerbio h4,.readfirst h3,.readfirst li::before{color:var(--navy)}
.submitbox{background:#fbfdfc;border:2px dashed var(--navy)} .submitbox h3{color:var(--navy)}
.chapimgs img,.reading .readimg img{border:2px solid var(--navy);border-radius:4px;box-shadow:4px 4px 0 rgba(18,50,77,.25)}
.yt .yt-btn{background:var(--chartred);border:2px solid #fff;border-radius:6px}
.yt .yt-btn::after{border-left-color:#fff}
.yt .yt-play:hover .yt-btn{background:var(--navy)}

/* ---- weeks, chapter cards, living books, sources ---- */
.weekcard{background:#f7fbf8;border:2px solid var(--navy);box-shadow:var(--shadow)}
.weekcard-head{background:var(--navy);border:0;position:relative}
.weekcard-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--scale)}
.weekcard-head .wk{color:var(--buoy);font-family:var(--serif)} .weekcard-head .rg{color:#fff} .weekcard-head .tp{color:#bcd6de}
.chaprow{background:#fbfdfc} .chaprow .num{background:var(--navy);color:var(--buoy);border-radius:50%}
.chapcard{background:#fbfdfc;border:2px solid var(--navy);border-radius:6px}
.chapcard-n{background:var(--buoy);color:var(--navy)}
.chapcard-ttl{color:var(--navy)}
.chapcard-pick{background:#eef6f2}
.chapcard.is-picked{box-shadow:0 0 0 3px var(--chartred)}
.wkpanel{background:#eef6f2;border:2px solid var(--navy)}
.lbcover{border:2px solid var(--navy)} .lbgo{color:var(--chartred)}
.srclist li{background:#fbfdfc;border-left:3px solid var(--teal)}

/* ---- light-ground states ---- */
.q-opt{background:#fbfdfc} .q-letter{background:var(--navy);color:var(--buoy)}
.q-opt.is-right{background:#e2f1e6;color:#1d4d2a;border-color:#2c6b3c}
.q-opt.is-wrong{background:#f7e2df;color:#7a2019}
.q-why .ok,.substate.is-ok,.chaprow .state.done,.calcard.is-done .s,.gradestate.marked,
.lockbar.is-done b,.examresult.is-pass h3,.examresult p.ok{color:#1f6b35}
.q-why .no,.substate.is-bad,.examresult.is-fail h3,.examresult p.err,.callout.warn b,.calcard.is-missed .d{color:#a3281b}
.gradestate.parent-to-read{color:#1f5178}

/* ---- footer ---- */
.footer{background:#12324d;border-top:0;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--scale)}
.footer h4{color:var(--buoy);font-family:var(--serif)}
.footer a,.footer .blurb,.footer-bar,.footer-bar a{color:#cfe3ea}
.footer a:hover,.footer-bar a:hover{color:var(--buoy)}
.footer-social a{background:rgba(255,255,255,.06);color:var(--buoy);border-color:rgba(232,185,47,.4)}
.footer-bar{border-top-color:rgba(255,255,255,.15)}

/* centred book-page titles ran into the star: park it in the corner, fainter */
.page-head::after{top:24%;right:3%;width:110px;height:110px;opacity:.45}
.page-head::before{top:24%;right:3%;width:74px;height:74px;opacity:.3}

/* the Guest Speaker player on the chart palette */
.ytl-btn{background:rgba(18,50,77,.78);border-color:#f7fbf8}
.ytl-btn::after{border-left-color:#f7fbf8}
.ytl-cover:hover .ytl-btn{background:var(--chartred)}
.ytl-frame{border:2px solid var(--navy)}
.ytl-bar{background:#f7fbf8;border:2px solid var(--navy)}
.ytl-bar button{background:#eef6f2;border-color:var(--navy);color:var(--navy)}
.ytl-bar button:hover{background:var(--navy);color:#fff}

/* ============================================================================
   MEMBERSHIP (session 53) — the paywall on a members' lesson, the bar on a
   members' book page, the lock badge on a chapter card, and membership.html.
   ========================================================================== */
.paywall{max-width:760px;margin:24px auto;padding:clamp(22px,4vw,40px);border:2px solid var(--navy,#12324d);
  border-radius:14px;background:var(--sunken-2,#f7fbf8);text-align:center}
.paywall h2{margin-top:6px}
.paywall .lead{max-width:60ch;margin:12px auto}
.paywall .btn-row{justify-content:center}
.paywall-state{margin-top:12px;font-weight:600;min-height:1.2em}
.memberbar{margin-top:18px;padding:14px 18px;border:1px solid var(--line-strong);border-radius:10px;
  background:rgba(47,127,134,.10)}
.memberbar p{margin:0 0 10px}
.chapcard-lock{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--navy,#12324d);color:#fff;margin:6px 0 2px}
.member-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:880px){.member-grid{grid-template-columns:1fr}}
.member-grid .stepnote{font-size:.8rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.member-grid .xogos-note{border:1px solid var(--line-strong);border-radius:10px;padding:14px 18px;
  background:rgba(47,127,134,.08);font-size:.9rem;margin-top:18px}
.plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:420px){.plan-cards{grid-template-columns:1fr}}
.plan-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;
  padding:18px;border:2px solid var(--line-strong);border-radius:12px;background:var(--sunken-2,#fff);color:var(--text);
  font-family:inherit;text-align:left}
.plan-card:hover,.plan-card:focus-visible,.plan-card.best{border-color:var(--accent-a,#2f7f86)}
.plan-card:disabled{opacity:.6;cursor:progress}
.plan-flag{position:absolute;top:-11px;right:12px;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--chartred,#b23a2e);color:#fff}
.plan-name{font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.8rem}
.plan-price{font-size:2rem;font-weight:700}
.plan-price small{font-size:.9rem;font-weight:600}
.plan-note{font-size:.8rem;color:var(--text-dim)}

/* ============================================================================
   SHOP PRICING TAG (session 56) — "Customer Pricing" on every product card and
   product page except the Adventure Box line and the free offers (the rule is
   `pricing: "customer"` in products.js, set by tests/catalogue-order.js).
   Tokens only, so it reads on both the dark base palette and the chart palette.
   ========================================================================== */
.prod-tag{display:inline-block;align-self:flex-start;margin:0 0 10px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--sunken);color:var(--text-dim);
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.4}
.prod-info .prod-tag{margin:-4px 0 14px;font-size:.72rem}

/* ============================================================================
   SHOP CATEGORY PAGES (session 57) — owner: "Make the images for Starter Decks
   and Expansion Packs smaller so you can see the entire image", a short enticing
   blurb on every product card, and category pages "organized so they look
   interesting and are easy to maneuver": hero facts, a sticky "jump to" chip bar
   for the sub-groups, a sort / in-stock bar, headed sub-group sections, and a
   "Browse other categories" strip. Markup: tests/genshop.js + shop.js. Data:
   tests/catalogue-order.js (GROUPS, CATEGORY_TILES) + tests/catalogue-blurbs.js.
   Appended as one block, after the Nautical Chart palette, so it wins cleanly.
   ========================================================================== */
/* shop.html tiles whose picture must be seen WHOLE (tileFit:"contain"): the same
   16:10 box as every other tile, so the row heights stay equal */
.card-media.is-contain{background:#fff;padding:10px}
.card-media.is-contain img{object-fit:contain}

/* the blurb on a product card */
.prod-body h3{margin-bottom:6px}
.prod-blurb{font-size:.84rem;line-height:1.5;color:var(--text-dim);margin:0 0 12px}

/* hero: quick facts under the intro */
.shop-hero .sub{max-width:720px}
.shop-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0}
.shop-facts li{padding:5px 13px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.3px;
  color:#e6f1f4;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32)}

/* the sticky "jump to" chip bar */
.shop-cat{padding-top:clamp(26px,4vw,44px)}
.shop-jump{position:sticky;top:var(--nav-h);z-index:40;display:flex;align-items:center;gap:10px;
  margin:0 0 16px;padding:8px 10px;background:#f7fbf8;border:2px solid var(--navy,#12324d);border-radius:6px;
  box-shadow:var(--shadow)}
.shop-jump-label{flex:0 0 auto;font-size:.68rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--teal,#2f7f86)}
.shop-jump-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px;min-width:0}
.shop-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:2px solid var(--navy,#12324d);background:#fff;color:var(--navy,#12324d);font-size:.82rem;font-weight:700;
  white-space:nowrap;line-height:1.3;transition:background .12s,color .12s}
.shop-chip:hover,.shop-chip[aria-current="true"]{background:var(--navy,#12324d);color:#fff}
.shop-chip-n{min-width:22px;padding:1px 6px;border-radius:999px;background:var(--buoy,#e8b92f);color:var(--navy,#12324d);
  font-size:.72rem;text-align:center}
.shop-chip.is-empty{opacity:.5}
.shop-chip:focus-visible,.cat-chip:focus-visible,.shop-ctl select:focus-visible,.shop-check input:focus-visible{
  outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}

/* sort / in-stock / search bar */
.shop-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px}
.shop-controls[hidden]{display:none}
.shop-count{margin:0 auto 0 0;font-weight:700;color:var(--navy,#12324d);font-size:.92rem}
.shop-ctl{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--text)}
.shop-ctl select{padding:8px 10px;border:2px solid var(--navy,#12324d);border-radius:4px;background:#fff;
  color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.shop-check{cursor:pointer}
.shop-check input{width:18px;height:18px;accent-color:var(--chartred,#b33a2e);margin:0}
.shop-search{flex:1 1 100%;min-width:0;padding:11px 15px;border-radius:4px;border:2px solid var(--navy,#12324d);
  background:#fff;color:var(--text);font:inherit}
.shop-search:focus{outline:none;border-color:var(--chartred,#b33a2e)}

/* sub-group sections */
.shop-group,.shop-groups noscript section,[data-groups] section{scroll-margin-top:calc(var(--nav-h) + 76px)}
.shop-group + .shop-group{margin-top:clamp(34px,5vw,54px)}
.shop-group[hidden]{display:none}
.shop-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--navy,#12324d);position:relative}
.shop-group-head::after{content:"";position:absolute;left:0;bottom:-6px;width:112px;height:4px;background:var(--scale)}
.shop-group-head h2{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--navy,#12324d)}
.shop-group-n{font-size:.76rem;font-weight:700;letter-spacing:.4px;color:var(--teal,#2f7f86)}
.shop-group-note{flex:1 1 100%;margin:0;color:var(--text-dim);font-size:.92rem}
.shop-group-empty{margin:0;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:6px;
  color:var(--text-dim);font-size:.88rem;background:#fbfdfc}

/* "Browse other categories" */
.shop-more .section-head{margin-bottom:24px}
.cat-strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cat-chip{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:#f7fbf8;
  border:2px solid var(--navy,#12324d);border-radius:6px;color:var(--text);transition:transform .12s,border-color .12s}
.cat-chip:hover{transform:translateY(-2px);border-color:var(--chartred,#b33a2e)}
.cat-chip-img{flex:0 0 auto;width:64px;height:48px;border-radius:4px;overflow:hidden;background:#fff}
.cat-chip-img img{width:100%;height:100%;object-fit:contain}
.cat-chip-txt{min-width:0;line-height:1.3}
.cat-chip-txt b{display:block;color:var(--navy,#12324d);font-size:.9rem}
.cat-chip-txt small{color:var(--text-dimmer);font-size:.76rem}

/* phones: product cards lie on their side (picture left, words right) so a
   40-product page is a quick scroll, and the chip bar sits flush under the nav */
@media (max-width:560px){
  .shop-groups .prod,[data-grid="all"] .prod{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .shop-groups .prod-media,[data-grid="all"] .prod-media{aspect-ratio:auto;min-height:100%;height:auto}
  .shop-groups .prod-media img,[data-grid="all"] .prod-media img{position:absolute;inset:0;padding:6px}
  .shop-groups .prod-body,[data-grid="all"] .prod-body{padding:12px 12px 13px}
  .shop-groups .prod-foot .btn,[data-grid="all"] .prod-foot .btn{padding:8px 12px;font-size:.78rem}
  .shop-groups .prod-ribbon,[data-grid="all"] .prod-ribbon{top:5px;left:5px;right:5px;font-size:.54rem;letter-spacing:.3px;
    padding:3px 5px;text-align:center;line-height:1.25}
  .shop-jump{margin-inline:-8px;padding:6px 8px}
  .shop-jump-label{display:none}
  .shop-controls{gap:8px 12px}
  .cat-strip{grid-template-columns:1fr 1fr}
  .cat-chip{flex-direction:column;align-items:flex-start;gap:6px;padding:8px}
  .cat-chip-img{width:100%;height:64px}
}

/* ------------------------------------------------------------------------
   The weekly pick rule and the reading levels (session 58). A week that is
   not open yet is GRAYED OUT on the book page and on its lesson pages, with
   the reason printed ("Finish 2 of your Week 1 chapters to open Week 2").
   ------------------------------------------------------------------------ */
.wklock{margin:0 0 12px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px;
  color:var(--text-dim);font-size:.9rem}
.wklock b{color:var(--gold)}
.weekcard.is-weeklocked .chapcard{filter:grayscale(1);opacity:.5}
.weekcard.is-weeklocked .chapcard-link{cursor:not-allowed}
.chapcard.is-weeklocked .chapcard-pick{cursor:not-allowed}
.lockbar.is-locked{border-style:dashed}
.lockbar .lockpick{flex:1 1 100%;display:flex;gap:8px;align-items:center;font-size:.88rem;cursor:pointer}
body.is-weeklocked [data-panel],body.is-weeklocked .tabstrip{filter:grayscale(1);opacity:.45;
  pointer-events:none;user-select:none}
.levelbar{margin:-4px 0 14px;font-size:.85rem;color:var(--text-dim)}
.levelbar b{color:var(--gold)}
.agebox{margin:0 0 18px;padding:16px 18px;border:1px solid var(--gold2, var(--line));border-radius:12px;
  background:var(--sunken-2, transparent)}
.agebox input[type=number]{width:6.5em;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--sunken, #fff);color:var(--text);font:inherit}
.levelopts{display:grid;gap:10px;margin:12px 0}
.levelopt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer}
.levelopt.is-off{opacity:.5;cursor:not-allowed}
.levelopt b{color:var(--gold)}

/* "Coming soon" placeholder button (podcast episodes, 2026-10-02): looks like a
   button, does nothing, and says so. */
.btn.is-soon{opacity:.6;cursor:default;pointer-events:none}

/* ADMIN DASHBOARD on My Account + NOTICES to students (2026-10-13;
   account-admin.js, account-notices.js, backend/notices.js). */
.adm-panel{margin-bottom:22px;border-color:var(--line-strong);min-width:0;max-width:100%;box-sizing:border-box}
.adm-panel>*{min-width:0;max-width:100%}
.adm-panel h3{color:var(--gold);font-size:1.02rem;margin:20px 0 8px}
.adm-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start}
.adm-head h2{margin-bottom:4px}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0 4px}
.adm-stat{background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.adm-stat b{display:block;font-size:1.4rem;color:var(--gold)}
.adm-stat span{font-size:.82rem;color:var(--text-dim)}
.adm-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.adm-histhead{justify-content:space-between}
.adm-histhead h3{margin:12px 0 0}
.adm-scroll{max-height:42vh;overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:10px}
.adm-table{width:100%;border-collapse:collapse;font-size:.86rem}
.adm-table th,.adm-table td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.adm-table th{position:sticky;top:0;background:var(--panel-solid);color:var(--gold);font-weight:600}
.adm-label{display:block;margin:14px 0 6px;font-weight:600}
.adm-input{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--sunken);color:inherit;font:inherit}
.adm-input.adm-inline{width:auto;max-width:100%}
textarea.adm-input{resize:vertical;line-height:1.45}
.adm-check{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:.9rem}
.adm-msg{min-height:1.4em;margin:8px 0 0;font-size:.9rem}
.adm-msg.is-bad,.adm-bad,.adm-warn{color:var(--red)}
.adm-msg.is-good{color:var(--land)}
.adm-tag{display:inline-block;font-size:.76rem;font-weight:600;padding:2px 8px;border-radius:999px;margin:0 0 3px;white-space:nowrap}
.adm-tag.is-paid{background:rgba(90,170,110,.16);color:var(--land);border:1px solid rgba(90,170,110,.45)}
.adm-tag.is-need{background:rgba(214,170,70,.16);color:var(--gold);border:1px solid var(--gold2)}
.adm-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 16px;overflow:auto;box-sizing:border-box}
.adm-modal-box{width:100%;max-width:720px;margin:0;box-sizing:border-box;min-width:0}
.adm-modal-box h3{color:var(--gold);font-size:1rem;margin:18px 0 6px}
.adm-set{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0 0 10px;min-width:0}
.adm-set legend{padding:0 4px}
.adm-set legend .adm-check{margin:0;flex-wrap:wrap}
.adm-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}
.adm-check.adm-book{margin:5px 0;font-size:.86rem;align-items:flex-start}
.adm-check.adm-len{margin:4px 10px 4px 0}
.adm-acc-list{list-style:none;padding:0;margin:0}
.adm-acc-list li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.hc-notices{margin-bottom:18px;min-width:0}
.hc-notice-body{overflow-wrap:anywhere}
.hc-notice{margin-bottom:12px}
.hc-notice.is-new{border-color:var(--gold2)}
.hc-notice-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.hc-notice-head h2{font-size:1.1rem;margin:0}
.hc-notice-body{white-space:pre-wrap;margin:10px 0 12px}