/* ==========================================================================
   Grading US Coins — design system (heritage editorial)
   Modern, premium, and calm. Built for desktop + mobile and for an audience
   that includes many older collectors: large fluid type, strong contrast,
   generous space, no clutter, no motion surprises.
   Fonts: Fraunces (display serif) + Inter (body/UI), with robust fallbacks.
   Accessibility overrides live in accessibility.css; print in print.css.
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root {
  /* type families */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* base size (A-/A+ controls scale this in accessibility.css) */
  --base-font: 18px;
  --measure: 68ch;

  /* sticky-bar heights — keep the breadcrumb tucked flush under the header */
  --header-h: 3.8rem;   /* rendered height of .site-header at default text size */
  --crumb-h: 2.45rem;   /* rendered height of the sticky breadcrumb bar */

  /* fluid type scale */
  --fs-h1: clamp(2.15rem, 1.55rem + 2.7vw, 3.35rem);
  --fs-h2: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem);
  --fs-h3: clamp(1.22rem, 1.12rem + .5vw, 1.5rem);
  --fs-lede: clamp(1.12rem, 1.05rem + .5vw, 1.35rem);

  /* premium dark "museum" palette */
  --bg:         #14110c;   /* deep warm charcoal */
  --bg-2:       #1a160f;
  --surface:    #1f1a12;   /* card / panel */
  --surface-2:  #292217;
  --ink:        #efe7d4;   /* warm cream text */
  --ink-soft:   #aca08a;
  --line:       #3a3225;
  --line-strong:#4e4330;
  --brand:      #d8b063;   /* gold (links/accents on dark) */
  --brand-deep: #e7c884;   /* brighter gold (hover/headings) */
  --gold:       #cda152;
  --gold-soft:  #f0dcab;
  --patina:     #66bdb0;   /* verdigris accent, lightened for dark */
  --patina-deep:#8fd6c9;
  --good:       #7ccb90;
  --warn:       #e2b35a;
  --danger:     #e58585;
  --focus:      #8bb4ff;

  /* elevation + shape */
  --r-sm: 9px; --r: 14px; --r-lg: 22px; --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 10px 28px -14px rgba(0,0,0,.7), 0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 60px -24px rgba(0,0,0,.8);
  --glow:      0 0 0 1px rgba(216,176,99,.25), 0 8px 30px -8px rgba(216,176,99,.22);
  --t: .18s cubic-bezier(.2,.6,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--base-font); scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------ Typography ------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); margin-top: 2em; }
h3 { font-size: var(--fs-h3); margin-top: 1.5em; color: var(--brand-deep); }
h4 { font-size: 1.05rem; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.05em; }
.lede { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lede); line-height: 1.45;
  color: var(--ink-soft); max-width: 60ch; }

a { color: var(--brand); text-decoration-color: rgba(216,176,99,.5); text-underline-offset: 3px; transition: color var(--t); }
a:hover { color: var(--brand-deep); }

strong { font-weight: 650; color: #f6efdf; }
::selection { background: var(--gold); color: #14110c; }

/* skip link */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--brand-deep); color: #fff; padding: .8rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }

/* ------------------------------ Layout ---------------------------------- */
.container { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.content   { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.wide      { width: min(100% - 2.5rem, 62rem); margin-inline: auto; }
main { padding: 2rem 0 4.5rem; }

/* ------------------------------ Header / nav ---------------------------- */
.site-header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-block: .65rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.01em; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 600; }
.brand-tagline { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .005em;
  color: var(--ink-soft); margin-top: .12rem; }
@media (max-width: 34rem) { .brand-tagline { display: none; } }
.brand .coin { width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  object-fit: cover; background: #14110c;
  box-shadow: inset 0 0 0 2px rgba(110,82,36,.6), 0 0 0 1px var(--gold), var(--shadow-sm); }

nav.primary ul { list-style: none; display: flex; gap: .15rem; flex-wrap: wrap; margin: 0; padding: 0; }
nav.primary a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .75rem;
  border-radius: var(--pill); text-decoration: none; color: var(--ink); font-weight: 550; font-size: .98rem; transition: background var(--t), color var(--t); }
nav.primary a:hover { background: var(--surface-2); color: var(--brand-deep); }
nav.primary a[aria-current="page"] { background: var(--brand); color: #14110c; }

/* ------------------------------ Mobile hamburger menu ------------------- */
.nav-toggle { display: none; order: -1; width: 2.75rem; height: 2.75rem; flex: none; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  cursor: pointer; align-items: center; justify-content: center; color: var(--ink);
  transition: background var(--t), border-color var(--t); }
.nav-toggle:hover { background: var(--surface-2); border-color: var(--brand); }
.nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--t), opacity var(--t); }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav-toggle__bars::after  { content: ""; position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* JS present: collapse the nav behind the hamburger on narrow screens.
   Without JS the button stays hidden and the nav shows normally (still usable). */
@media (max-width: 48rem) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-header .container { justify-content: flex-start; flex-wrap: nowrap; }
  html.js .brand { margin-right: auto; }
  html.js nav.primary { position: absolute; top: 100%; left: 0; right: 0; display: none;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  html.js #nav-toggle[aria-expanded="true"] ~ nav.primary { display: block; }
  html.js nav.primary ul { flex-direction: column; gap: .1rem; flex-wrap: nowrap;
    width: min(100% - 2.5rem, 76rem); margin-inline: auto; padding: .5rem 0 .65rem; }
  html.js nav.primary a { width: 100%; min-height: 48px; border-radius: var(--r-sm); font-size: 1.05rem; }
}

/* ------------------------------ Floating accessibility widget ----------- */
.a11y { position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.a11y-fab { width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 2px solid var(--brand);
  background: var(--brand); color: #14110c; font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; cursor: pointer; box-shadow: var(--glow), var(--shadow); display: grid; place-items: center;
  transition: background var(--t), transform var(--t); }
.a11y-fab:hover { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-2px); }
.a11y-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.a11y-panel { width: 15.5rem; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 1rem 1.05rem; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: .6rem; }
/* Keep the panel collapsed until opened — the [hidden] attribute must win over display:flex. */
.a11y-panel[hidden] { display: none; }
.a11y-panel__title { margin: 0 0 .15rem; font-family: var(--font-display); font-weight: 600;
  color: var(--brand-deep); font-size: 1.02rem; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.a11y-size { display: inline-flex; align-items: center; gap: .35rem; }
.a11y-size .btn { padding: .35rem .6rem; }
.a11y-wide { width: 100%; justify-content: center; }
#text-size-label { min-width: 4.5rem; text-align: center; color: var(--ink); font-weight: 600; }
@media (max-width: 30rem) { .a11y-panel { width: min(82vw, 15.5rem); } }

/* ------------------------------ Buttons --------------------------------- */
button.btn, .toolbar button, .tts button, a.button {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--ink);
  min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--pill); cursor: pointer; transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
  display: inline-flex; align-items: center; gap: .4rem; }
button.btn:hover, .toolbar button:hover, .tts button:hover, a.button:hover { background: var(--surface-2); border-color: var(--brand); }
button.btn:active { transform: translateY(1px); }
button[aria-pressed="true"], .toolbar button[aria-pressed="true"] {
  background: var(--brand); color: #14110c; border-color: var(--brand); }
/* Keep a pressed button readable on hover (the generic :hover only changes the
   background, which would otherwise leave dark text on a dark surface). */
button.btn[aria-pressed="true"]:hover, .toolbar button[aria-pressed="true"]:hover,
.tts button[aria-pressed="true"]:hover {
  background: var(--brand-deep); color: #14110c; border-color: var(--brand-deep); }
button:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------ Hero ------------------------------------ */
.hero { border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 85% 10%, rgba(216,176,99,.14), transparent 60%),
    var(--bg-2); }
.hero .content { padding-block: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); }
.hero h1 { margin-bottom: .35em; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body);
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  margin-bottom: .9rem; }
/* Mobile: single column — headline, then the coin, then the buttons.
   Desktop: text + buttons on the left, the coin as a showpiece on the right. */
.hero__grid { display: grid; gap: 1.5rem; align-items: center; }
.hero__text .lede { margin-bottom: 0; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center; justify-self: center; }
.hero__photo img { width: clamp(9.5rem, 26vw, 13.5rem); height: clamp(9.5rem, 26vw, 13.5rem);
  object-fit: cover; border-radius: 50%; display: block;
  border: 2px solid var(--gold); box-shadow: var(--glow), var(--shadow-lg); background: #000; }
.hero__zoom { padding: 0; border: none; background: none; line-height: 0; min-height: 0;
  border-radius: 50%; cursor: zoom-in; transition: transform var(--t); }
.hero__zoom:hover { transform: scale(1.02); }
.hero__zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.hero__photo .credit { font-size: .78rem; color: var(--ink-soft); max-width: 16rem; line-height: 1.4; }
@media (min-width: 52rem) {
  .hero .content { width: min(100% - 2.5rem, 56rem); }
  /* Fill the first screen so the hero's bottom separator only appears once
     the reader scrolls (the page feels like a cover, not a banner). Capped
     at 50rem so very tall monitors don't get a stretched, empty hero. */
  .hero__grid { grid-template-columns: 1fr auto; column-gap: 3.5rem;
    grid-template-areas: "text photo" "cta photo";
    min-height: min(calc(100vh - var(--header-h) + 1rem), 50rem);
    min-height: min(calc(100svh - var(--header-h) + 1rem), 50rem);
    align-content: center; }
  .hero__text { grid-area: text; }
  .hero__photo { grid-area: photo; }
  .hero__cta { grid-area: cta; align-self: start; }
}

/* ------------------------------ Breadcrumbs ----------------------------- */
.breadcrumbs { font-size: .9rem; color: var(--ink-soft); padding: 1rem 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "›"; margin-left: .4rem; color: var(--line-strong); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { text-decoration: none; }
/* Sticky breadcrumb bar (coin-type pages): full-width, tucked under the header. */
.breadcrumbs.is-sticky { position: sticky; top: calc(var(--header-h) - 1px); z-index: 40; padding: .55rem 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.breadcrumbs.is-sticky li:last-child { color: var(--ink); font-weight: 600; }

/* ------------------------------ Cards / grid ---------------------------- */
.grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.45rem; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--brand)); opacity: 0; transition: opacity var(--t); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card:hover::before { opacity: 1; }
.card h3 { margin-top: 0; }
.card a.card-link { text-decoration: none; }
.card a.card-link::after { content: ""; position: absolute; inset: 0; }
/* Keyboard users get a visible ring on the whole card, not an invisible overlay. */
.card:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------ Coin showcase (photo cards) ------------- */
.coin-showcase { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); margin: 1.25rem 0 1.75rem; }
.coin-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.3rem 1rem 1.15rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.coin-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--glow), var(--shadow); }
.coin-card__media { width: 9.5rem; height: 9.5rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #2c2517, #0e0b07); border: 2px solid var(--line-strong);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.6); overflow: hidden; margin-bottom: .9rem; transition: border-color var(--t); }
.coin-card:hover .coin-card__media { border-color: var(--gold); }
/* Tiles use locally cropped, coin-tight images, so the round mask shows only
   the coin (no zoom needed). */
.coin-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Combined obverse+reverse photo: obverse is on the left, so bias the round crop there. */
.coin-card__media img.is-combined { object-position: left center; }
.coin-card__media--empty { display: block; }
.coin-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--brand-deep); line-height: 1.2; }
.coin-card__years { font-size: .85rem; color: var(--ink-soft); }
.coin-card__status { font-size: .8rem; font-weight: 600; color: var(--brand); margin-top: .5rem; }
.coin-card.is-research { opacity: .82; }
.coin-card.is-research:hover { opacity: 1; }

/* ------------------------------ Sheldon grade ladder -------------------- */
.grade-ladder { margin: 1.2rem 0 1.5rem; }

/* Clickable map of the whole 1-70 scale: ten segments, low to high. */
.scale-rail-wrap { margin: .4rem 0 1.8rem; }
.scale-rail { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.scale-seg { display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .55rem .1rem .5rem; text-decoration: none; text-align: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: background var(--t), border-color var(--t), transform var(--t); }
.scale-rail .scale-seg:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.scale-rail .scale-seg:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
a.scale-seg:hover, a.scale-seg:focus-visible { background: var(--surface-2); border-color: var(--gold);
  transform: translateY(-2px); }
a.scale-seg:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.scale-seg__num { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1; }
.scale-seg__abbr { font-size: .66rem; font-weight: 650; letter-spacing: .05em; color: var(--ink-soft); }
.scale-seg.is-static { opacity: .55; }
.scale-seg.is-ms { background: linear-gradient(180deg, rgba(216,176,99,.24), rgba(216,176,99,.1));
  border-color: var(--gold); }
.scale-seg.is-ms .scale-seg__num { color: var(--brand-deep); }
.scale-rail__zones { display: grid; grid-template-columns: 9fr 1fr; gap: 3px; margin-top: .4rem; }
.scale-zone { font-size: .72rem; line-height: 1.3; color: var(--ink-soft); text-align: center;
  border-top: 2px solid var(--line-strong); padding-top: .35rem; }
.scale-zone--ms { border-top-color: var(--gold); color: var(--brand); font-weight: 650; }
.scale-rail__hint { font-size: .82rem; margin: .8rem 0 0; }
@media (max-width: 38rem) {
  .scale-seg { padding-inline: 0; }
  .scale-seg__num { font-size: .9rem; }
  .scale-seg__abbr { font-size: .56rem; letter-spacing: .02em; }
  .scale-zone { font-size: .62rem; }
}

.grade-ladder__legend { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .85rem;
  color: var(--ink-soft); margin: .4rem 0 1rem; }
.grade-ladder__legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.grade-coin.grade-coin--key { width: 1.15rem; height: 1.15rem; display: inline-block;
  vertical-align: middle; border-width: 1px; box-shadow: none; flex: none; }
.grade-coin.grade-coin--silver { background: radial-gradient(circle at 36% 28%, #f6f7f8, #c2c6cb 52%, #6f747a); }
.grade-coin.grade-coin--copper { background: radial-gradient(circle at 36% 28%, #e9b089, #b56a3c 52%, #6f3c20); }

/* Each band is a card; :target glows when reached from the rail. */
.grade-rung { display: grid; grid-template-columns: 9.5rem auto 1fr; gap: 1rem 1.4rem; align-items: center;
  padding: 1.1rem 1.15rem; margin-top: .7rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  scroll-margin-top: calc(var(--header-h) + 1rem); transition: border-color var(--t), box-shadow var(--t); }
.grade-rung:target { border-color: var(--gold); box-shadow: var(--glow); }
.grade-rung__label { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.grade-chip { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.25;
  color: #14110c; background: linear-gradient(135deg, var(--gold-soft), var(--brand));
  padding: .08rem .6rem; border-radius: var(--r-sm); }
.grade-rung__name { font-family: var(--font-display); font-weight: 600; color: var(--brand-deep); font-size: 1.08rem; }
.grade-rung__range { font-size: .8rem; color: var(--ink-soft); letter-spacing: .01em; }
.grade-rung__coins { display: flex; gap: .9rem; align-items: flex-start; }
.grade-coin-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.grade-coin-fig figcaption { font-size: .7rem; line-height: 1.25; color: var(--ink-soft);
  text-align: center; max-width: 6rem; }
.grade-coin-btn { padding: 0; border: none; background: none; line-height: 0; cursor: zoom-in;
  border-radius: 50%; min-height: 0; }
.grade-coin-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.grade-coin { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; flex: none;
  background: radial-gradient(circle at 50% 38%, #2c2517, #0e0b07); border: 2px solid var(--line-strong);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.6); transition: transform var(--t), border-color var(--t); }
.grade-coin-btn:hover .grade-coin { transform: scale(1.05); border-color: var(--gold); }
.grade-coin--empty { display: grid; place-items: center; font-size: .62rem; line-height: 1.1;
  text-align: center; color: var(--ink-soft); }
.grade-rung__what { margin: 0; font-size: .96rem; }
.grade-ladder__credits { font-size: .78rem; margin-top: 1.1rem; }
@media (max-width: 42rem) {
  .grade-rung { grid-template-columns: 1fr; gap: .7rem; }
  .grade-rung__label { flex-direction: row; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
  .grade-rung__coins { justify-content: flex-start; }
}

/* ------------------------------ Lesson images --------------------------- */
.lesson-hero { margin: 1.3rem 0 1.6rem; }
.lesson-hero img { width: 100%; max-height: 22rem; object-fit: cover; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lesson-figure { margin: 1.4rem 0; }
.lesson-figure img { width: 100%; max-width: 30rem; border-radius: var(--r); border: 1px solid var(--line);
  background: #000; }
/* Lesson images open in the lightbox so readers can study detail. */
.lesson-zoom { display: block; width: 100%; padding: 0; border: none; background: none;
  line-height: 0; cursor: zoom-in; min-height: 0; border-radius: var(--r); text-align: left; }
.lesson-zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lesson-zoom:hover img { border-color: var(--gold); }
.lesson-figure .lesson-zoom { max-width: 30rem; }
.lesson-hero figcaption, .lesson-figure figcaption { font-size: .82rem; color: var(--ink-soft);
  margin-top: .5rem; line-height: 1.4; }

/* Denomination browse */
.denom-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1.75rem; }
.denom-nav a { font-size: .85rem; padding: .3rem .7rem; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); }
.denom-nav a:hover { border-color: var(--gold); color: var(--brand-deep); }
.denom-group { margin-top: 2.5rem; scroll-margin-top: 5.5rem; }
.denom-group > h2 { border-bottom: 1px solid var(--line); padding-bottom: .35rem; }

/* Photo thumbnail atop a standard card */
.card__media { display: block; margin: -1.4rem -1.45rem 1rem; aspect-ratio: 16/9; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2c2517, #0e0b07); border-bottom: 1px solid var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------ Lesson contents ("On this page") -------- */
.toc { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.3rem 0 1.7rem; font-size: .95rem; }
.toc__title { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.toc ol { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: .3rem; }
@media (min-width: 46rem) { .toc ol { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; color: var(--brand-deep); }

/* ------------------------------ Lesson pager (prev / next) -------------- */
.pager { display: flex; gap: 1rem; margin-top: 2.6rem; }
.pager__link, .pager__spacer { flex: 1 1 0; min-width: 0; }
.pager__link { display: flex; flex-direction: column; gap: .25rem; padding: .95rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.pager__link--next { text-align: right; align-items: flex-end; }
.pager__link:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pager__dir { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); }
.pager__title { font-family: var(--font-display); font-weight: 600; color: var(--brand-deep); line-height: 1.3; }
@media (max-width: 40rem) {
  .pager { flex-direction: column; }
  .pager__spacer { display: none; }
}

/* Numbered lesson cards on the Lessons index */
.lesson-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  letter-spacing: .12em; color: var(--brand); margin-bottom: .45rem; }
.lesson-num::after { content: ""; display: inline-block; width: 2.2rem; height: 1px;
  background: var(--line-strong); vertical-align: middle; margin-left: .55rem; }

/* ------------------------------ Lesson sections ------------------------- */
.lesson section { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem;
  scroll-margin-top: calc(var(--header-h) + 1rem); }
.lesson section:first-of-type { border-top: 0; }

.levels { display: grid; gap: .9rem; margin: .6rem 0 1.1rem; }
@media (min-width: 46rem) { .levels { grid-template-columns: 1fr 1fr; } }
.level { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem;
  position: relative; }
.level h4 { margin: 0 0 .4rem; font-family: var(--font-body); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .4rem; }
.level h4::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; }
.level.beginner { border-left: 4px solid var(--good); }
.level.beginner h4::before { background: var(--good); }
.level.advanced { border-left: 4px solid var(--brand); }
.level.advanced h4::before { background: var(--brand); }
.level p:last-child { margin-bottom: 0; }

/* ------------------------------ Badges ---------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-size: .72rem;
  font-weight: 700; letter-spacing: .01em; padding: .22rem .6rem; border-radius: var(--pill);
  border: 1px solid transparent; vertical-align: middle; line-height: 1.2; }
.badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .7; }
.badge.verified { background: rgba(124,203,144,.14); color: var(--good); border-color: rgba(124,203,144,.34); }
.badge.needs_second_source, .badge.needs_review { background: rgba(226,179,90,.14); color: var(--warn); border-color: rgba(226,179,90,.34); }
.badge.rejected { background: rgba(229,133,133,.14); color: var(--danger); border-color: rgba(229,133,133,.34); }
.badge.tier1, .badge.tier2, .badge.tier3, .badge.tier4 { font-size: .68rem; }
.badge.tier1 { background: rgba(124,203,144,.13); color: var(--good); }
.badge.tier2 { background: rgba(139,180,255,.14); color: #9fbcf2; }
.badge.tier3 { background: rgba(216,176,99,.14); color: var(--brand); }
.badge.tier4 { background: rgba(172,160,138,.14); color: var(--ink-soft); }
.badge.tier1::before, .badge.tier2::before, .badge.tier3::before, .badge.tier4::before { display: none; }

/* ------------------------------ Callouts -------------------------------- */
.callout { position: relative; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); padding: 1.05rem 1.2rem;
  border-radius: var(--r); margin: 1.4rem 0; box-shadow: var(--shadow-sm); }
.callout.warn { border-left-color: var(--warn); }
.callout.danger { border-left-color: var(--danger); }
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------ Glossary -------------------------------- */
/* Sits below both the sticky header and the now-sticky breadcrumb bar.
   Kept to roughly the search field's height — one tight row, padding only. */
.glossary-controls { position: sticky; top: calc(var(--header-h) + var(--crumb-h)); z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px);
  padding: .5rem 0; margin-bottom: .75rem; border-bottom: 1px solid var(--line); }
.search-field { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.search-field input[type="search"] { flex: 1; min-width: 14rem; font: inherit; font-size: 1rem;
  padding: .5rem .9rem; border: 1.5px solid var(--line-strong); border-radius: var(--pill); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t); }
/* Result count rides at the end of the search row instead of adding a line. */
#search-count { font-size: .85rem; white-space: nowrap; margin-left: auto; }
#search-count:empty { display: none; }
.search-field input[type="search"]:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent); }
/* Quick jump-index of term chips under the search box */
.term-index { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1.4rem; }
.term-index__item { font-size: .85rem; line-height: 1.2; padding: .3rem .65rem; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill);
  transition: border-color var(--t), color var(--t), background var(--t); }
.term-index__item:hover { border-color: var(--gold); color: var(--brand-deep); background: var(--surface-2); }
.term-index__item[hidden] { display: none; }

.term { display: flow-root; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; margin: 0 0 1rem; scroll-margin-top: 6.5rem;
  transition: border-color var(--t), box-shadow var(--t); }
.term:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.term:target { border-color: var(--gold); box-shadow: var(--glow); }
.term h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
/* Illustrative term image: floats to the right so the definition wraps beside it. */
.term__img { float: right; width: 7.5rem; margin: 0 0 .6rem .9rem; }
.term__zoom { display: block; width: 100%; padding: 0; border: none; background: none; line-height: 0;
  cursor: zoom-in; min-height: 0; border-radius: var(--r-sm); }
.term__zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.term__img img { width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #14110c; display: block; }
.term__img figcaption { font-size: .72rem; color: var(--ink-soft); margin-top: .3rem; line-height: 1.35;
  overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 32rem) { .term__img { width: 5.5rem; margin-left: .6rem; } }
.term .plain { font-size: 1.06rem; margin-bottom: .3rem; }
/* Clear past a floated term image so the dashed separator and the advanced
   text start BELOW the image and span the full width of the card (instead of
   being squeezed into the narrow column beside the image). */
.term details { clear: both; margin-top: .5rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.term summary { cursor: pointer; font-weight: 600; color: var(--brand-deep); padding: .3rem 0; list-style: none; }
.term summary::-webkit-details-marker { display: none; }
.term summary::before { content: "+ "; font-weight: 700; }
.term details[open] summary::before { content: "– "; }
.term .related a { display: inline-block; margin-right: .55rem; }
.term[hidden] { display: none; }
.no-results { padding: 1.2rem; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--r); }

/* ------------------------------ Citations ------------------------------- */
.sources { font-size: .9rem; color: var(--ink-soft); margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.sources .src { display: inline-block; margin-right: .5rem; }
cite { font-style: normal; }

/* ------------------------------ Figures (non-gallery) ------------------- */
figure { margin: 1.4rem 0; }
figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .5rem; }
.example-note { font-weight: 700; color: var(--warn); }

/* ------------------------------ Tables ---------------------------------- */
table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
th, td { border-bottom: 1px solid var(--line); padding: .65rem .85rem; text-align: left; vertical-align: top;
  overflow-wrap: break-word; }
@media (max-width: 34rem) { th, td { padding: .5rem .6rem; font-size: .95rem; } }
tr:last-child td { border-bottom: 0; }
th { background: var(--surface-2); font-family: var(--font-body); font-weight: 650; color: var(--brand-deep); }
tbody tr:hover { background: rgba(216,176,99,.07); }

/* ------------------------------ Floating "Listen" (read aloud) ---------- */
.audio { position: fixed; left: 1rem; bottom: 1rem; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.audio[hidden] { display: none; }
.audio-fab { width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 2px solid var(--brand);
  background: var(--surface); color: var(--brand); cursor: pointer; box-shadow: var(--shadow);
  display: grid; place-items: center; transition: background var(--t), color var(--t), transform var(--t); }
.audio-fab .audio-icon { font-size: 1rem; line-height: 1; padding-left: .12rem; }
.audio-fab:hover { background: var(--surface-2); transform: translateY(-2px); }
.audio-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.audio[data-state="playing"] .audio-fab { background: var(--brand); color: #14110c; box-shadow: var(--glow), var(--shadow); }
.audio[data-state="playing"] .audio-fab .audio-icon { padding-left: 0; }
.audio-stop { font-family: var(--font-body); font-size: .85rem; font-weight: 600; padding: .4rem .8rem;
  border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow-sm); }
.audio-stop:hover { border-color: var(--brand); }
.audio-stop[hidden] { display: none; }

/* ------------------------------ Lesson progress ------------------------- */
.progress-wrap { margin: 1.1rem 0 1.6rem; }
.progress-track { height: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--good), var(--patina)); transition: width .3s ease; }
.progress-label { font-size: .9rem; color: var(--ink-soft); margin: .4rem 0 0; }
.section-actions { margin-top: .85rem; }
.mark-read[aria-pressed="true"] { background: var(--good); color: #fff; border-color: var(--good); }

/* collapsible sources */
body.sources-collapsed .sources, body.sources-collapsed .sources + details { display: none; }

/* ------------------------------ Footer ---------------------------------- */
.site-footer { margin-top: 4rem; padding: 2.8rem 0 2.2rem; color: #cabfa6;
  background: #0e0c08; border-top: 2px solid var(--gold); }
.site-footer strong { color: #f4ead4; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.site-footer a { color: var(--gold-soft); }
.site-footer a:hover { color: #fff; }
.site-footer .cols { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer .muted { color: #9c927b; }

/* ------------------------------ Utility --------------------------------- */
.muted { color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0; }
.section-intro { max-width: 60ch; }