/* ===================================================================
   AI Literacy Library (Salus Collective) — shared design system
   -------------------------------------------------------------------
   This is the SINGLE source of truth for the visual design. Every page
   (library, course units, about) links to this one file. There is no
   per-page CSS anywhere else, and no framework.

   Sections:
     1. Design tokens          6. Library — hero / specimen / divider
     2. Base + typography      7. Library — controls / grid / cards
     3. Buttons                8. Library — contribute strip / modal
     4. Top navigation         9. Course — reading layout + components
     5. Footer                10. About + responsive + a11y
   =================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Neutrals — cool clinical paper, deliberately not cream */
  --paper:#F4F5F4; --paper-2:#ECEEEC; --panel:#FFFFFF;
  --ink:#181C1E; --ink-2:#535A5C; --ink-3:#888F90;
  --line:rgba(24,28,30,0.11); --line-2:rgba(24,28,30,0.07);

  /* Primary accent — clinical azure blue.
     Used for links, buttons, active states, eyebrow rules,
     the verified/free pills, and the card accent edge. */
  --accent:#1E78C8; --accent-soft:#E4EFFA; --accent-deep:#155693;
  --accent-rgb:30,120,200;            /* for soft focus glows */

  /* Warm counter-accent — clay. Used ONLY for the
     "submit a resource / get involved" actions. */
  --clay:#A85C33; --clay-soft:#F4E8DF; --clay-ink:#7E4322;

  /* Editorial theme hues — kept visually distinct from the azure
     accent. Used only as thin marks + tag prefixes (call-numbers,
     theme-tab dots) on the library. */
  --t-found:#5A6B7B;     /* slate — changed from blue so it doesn't clash */
  --t-ethics:#7A4A6B;
  --t-evidence:#14705A;  /* green — now purely a category hue */
  --t-practice:#A85C33;
  --t-current:#2C6E77;

  /* Type */
  --serif:'Newsreader', Georgia, serif;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- 2. BASE + TYPOGRAPHY ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:var(--mono); }
a{ color:inherit; }

/* shared eyebrow / kicker / section heading */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:22px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--accent); display:inline-block; }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px;
}
.section-head{ max-width:1180px; margin:0 auto; padding:56px 36px 0; scroll-margin-top:80px; }
.section-head h2{ font-family:var(--serif); font-size:30px; font-weight:500; letter-spacing:-0.01em; }
.section-head p{ color:var(--ink-2); margin-top:8px; max-width:60ch; font-weight:300; }

/* ---------- 3. BUTTONS ---------- */
.btn{
  font-family:var(--sans); font-size:14px; font-weight:500; border-radius:8px;
  padding:11px 20px; cursor:pointer; border:1px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all 0.16s;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-deep); transform:translateY(-1px); }
/* clay = contribute / get involved */
.btn-clay{ background:var(--clay); color:#fff; }
.btn-clay:hover{ background:#92501f; transform:translateY(-1px); }

/* ---------- 4. TOP NAVIGATION (shared, every page) ---------- */
.topnav{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 36px; border-bottom:1px solid var(--line);
  background:rgba(244,245,244,0.88); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:100;
}
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-logo-link{ display:flex; }
.brand-logo{ height:30px; width:auto; display:block; }
.brand-name{
  font-family:var(--serif); font-size:18px; font-weight:500; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-name a{ color:inherit; text-decoration:none; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-links{ display:flex; gap:22px; list-style:none; }
.nav-links a{ font-size:13.5px; color:var(--ink-2); text-decoration:none; transition:color 0.15s; }
.nav-links a:hover{ color:var(--accent); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:500; }
.nav-submit{
  font-family:var(--sans); font-size:13px; font-weight:500; background:var(--clay); color:#fff;
  border:none; border-radius:100px; padding:8px 16px; cursor:pointer;
  transition:background 0.15s, transform 0.15s; white-space:nowrap;
}
.nav-submit:hover{ background:#92501f; transform:translateY(-1px); }

/* ---------- 5. FOOTER — the clay .contribute-strip banner (section 8) now
   closes every page; the old grey footer is gone. ---------- */

/* ---------- 6. LIBRARY — HERO / SPECIMEN / STATS ---------- */
.hero{
  max-width:1180px; margin:0 auto; padding:70px 36px 30px;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}
.hero h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(34px, 4.6vw, 56px);
  line-height:1.04; letter-spacing:-0.02em; margin-bottom:22px;
}
.hero h1 em{ font-style:italic; color:var(--accent); font-weight:500; }
.hero p.lede{ font-size:17px; line-height:1.62; color:var(--ink-2); max-width:48ch; font-weight:300; }
.hero-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.prov{
  margin-top:30px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  letter-spacing:0.02em; line-height:1.9;
}
.prov b{ color:var(--accent); font-weight:600; }

/* Hero signature: a specimen catalogue card */
.specimen{ position:relative; }
.specimen-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 18px; box-shadow:0 24px 50px -28px rgba(24,28,30,0.28);
  position:relative; overflow:hidden;
}
.specimen-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.specimen-card.behind{
  position:absolute; inset:26px -16px -22px 30px; z-index:-1; opacity:0.55;
  box-shadow:none; transform:rotate(1.4deg);
}
.spec-tagrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.callno{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.04em; color:var(--t-evidence); }
.verified{
  font-family:var(--mono); font-size:10px; letter-spacing:0.03em; color:var(--accent);
  display:inline-flex; align-items:center; gap:4px; background:var(--accent-soft);
  padding:3px 8px; border-radius:100px;
}
.spec-title{ font-family:var(--serif); font-size:19px; font-weight:500; line-height:1.25; margin-bottom:4px; }
.spec-org{ font-size:12.5px; color:var(--ink-3); margin-bottom:12px; }
.spec-take{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-bottom:15px; }
.spec-badges{ display:flex; gap:6px; flex-wrap:wrap; }

/* Hairline divider between hero and library. Inset to the 1180px content
   width so it aligns with the grid rather than the browser edge. */
.hero-divider{
  border:0; height:1px; background:var(--line-2);
  max-width:1180px; margin:52px auto 0;
}
@media (max-width:720px){ .hero-divider{ margin-top:36px; } }

/* ---------- 7. LIBRARY — CONTROLS / GRID / CARDS ---------- */
.control-bar{ max-width:1180px; margin:0 auto; padding:26px 36px 0; }
.audience-row{ margin-bottom:18px; }
.audience-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  font-family:var(--sans); font-size:13px; font-weight:450; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); padding:7px 15px; border-radius:100px; cursor:pointer; transition:all 0.15s;
}
.pill:hover{ border-color:var(--accent); color:var(--accent); }
.pill[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500; }

.search-row{ position:relative; max-width:520px; }
.search-row input{
  width:100%; font-family:var(--sans); font-size:14.5px; color:var(--ink);
  padding:12px 16px 12px 42px; border:1px solid var(--line); border-radius:10px; background:var(--panel);
  outline:none; transition:border-color 0.15s, box-shadow 0.15s;
}
.search-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.14); }
.search-row input::placeholder{ color:var(--ink-3); }
.search-row svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-3); }

/* sidebar + grid */
.library{ max-width:1180px; margin:0 auto; padding:26px 36px 30px; display:grid; grid-template-columns:212px 1fr; gap:38px; align-items:start; }
.sidebar{ position:sticky; top:84px; }
.filter-group{ margin-bottom:26px; }
.filter-group h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.filter-opt{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none; border:none; padding:6px 0; font-family:var(--sans); font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:color 0.13s; }
.filter-opt:hover{ color:var(--accent); }
.filter-opt[aria-pressed="true"]{ color:var(--accent); font-weight:500; }
.filter-opt .ct{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); background:var(--paper-2); border-radius:100px; padding:1px 7px; }
.filter-opt[aria-pressed="true"] .ct{ background:var(--accent-soft); color:var(--accent); }

.themes{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.theme-tab{
  font-family:var(--sans); font-size:13px; font-weight:500; border:none; cursor:pointer;
  padding:7px 14px; border-radius:8px; background:var(--paper-2); color:var(--ink-2); transition:all 0.15s;
  display:inline-flex; align-items:center; gap:7px;
}
.theme-tab .dot{ width:7px; height:7px; border-radius:50%; }
.theme-tab:hover{ color:var(--ink); }
.theme-tab[aria-pressed="true"]{ background:var(--ink); color:#fff; }

.results-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:14px; flex-wrap:wrap; }
.results-meta .count{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.results-meta .count b{ color:var(--ink); }
.clear{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.clear:hover{ color:var(--clay); }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:19px 19px 17px;
  display:flex; flex-direction:column; gap:0; text-decoration:none; color:inherit;
  position:relative; overflow:hidden; transition:border-color 0.16s, box-shadow 0.16s, transform 0.16s;
  animation:rise 0.32s ease both;
}
/* uniform azure accent edge; the THEME hue lives on the call-number */
.card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.card:hover{ border-color:rgba(24,28,30,0.2); box-shadow:0 14px 32px -22px rgba(24,28,30,0.4); transform:translateY(-2px); }
.card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.card .callno{ color:var(--ct, var(--accent)); }
.card-title{ font-family:var(--serif); font-size:17.5px; font-weight:500; line-height:1.24; letter-spacing:-0.005em; margin-bottom:3px; }
.card-org{ font-size:12px; color:var(--ink-3); margin-bottom:11px; }
.card-take{ font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:14px; flex:1; }
.badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.badge{
  font-family:var(--mono); font-size:10px; letter-spacing:0.02em; padding:3px 8px; border-radius:100px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--paper);
}
.badge.access-free{ color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft); }
.badge.tier-essential{ color:#fff; background:var(--accent); border-color:var(--accent); }
.badge.tier-recommended{ color:var(--accent); border-color:var(--accent); background:transparent; }
.badge.tier-optional{ color:var(--ink-3); }
.badge.access-paid{ color:var(--clay); border-color:var(--clay-soft); background:var(--clay-soft); }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:12px; border-top:1px solid var(--line-2); gap:10px; }
.roles-mini{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:0.02em; }
.open-link{ font-family:var(--mono); font-size:11px; color:var(--ink-3); display:inline-flex; align-items:center; gap:4px; transition:color 0.15s; white-space:nowrap; }
.card:hover .open-link{ color:var(--accent); }

.empty{ grid-column:1/-1; text-align:center; padding:56px 20px; }
.empty h3{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.empty p{ color:var(--ink-3); font-size:14px; }

/* error state when resources.js fails to load */
.data-error{ grid-column:1/-1; background:var(--clay-soft); border:1px solid rgba(168,92,51,0.25); border-radius:12px; padding:22px 24px; }
.data-error h3{ font-family:var(--serif); font-size:20px; font-weight:500; color:var(--clay-ink); margin-bottom:6px; }
.data-error p{ font-size:14px; color:var(--ink-2); line-height:1.55; }
.data-error code{ font-family:var(--mono); font-size:13px; background:var(--panel); padding:1px 6px; border-radius:4px; }

/* ---------- 8. LIBRARY — CONTRIBUTE STRIP / MODAL ---------- */
.contribute-strip{ border-top:1px solid var(--line); background:var(--clay-soft); margin-top:72px; }
.contribute-inner{ max-width:1180px; margin:0 auto; padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.contribute-inner h3{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--clay-ink); }
.contribute-inner p{ font-size:14px; color:var(--ink-2); margin-top:4px; max-width:64ch; font-weight:300; }

/* Copyright notice — a standing line at the foot of the banner, set apart
   from the recruitment copy above it by a hairline. */
.copyright{ max-width:1180px; margin:0 auto; padding:0 36px 26px; }
.copyright p{
  font-size:12px; color:var(--ink-3); font-weight:300; line-height:1.6;
  border-top:1px solid rgba(24,28,30,0.08); padding-top:16px;
}

.modal-backdrop{ position:fixed; inset:0; background:rgba(20,24,26,0.5); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:44px 20px; z-index:1000; overflow-y:auto; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--panel); border-radius:16px; max-width:560px; width:100%; box-shadow:0 30px 70px -20px rgba(0,0,0,0.4); animation:rise 0.25s ease both; position:relative; }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:18px; line-height:1; padding:7px; border-radius:6px; }
.modal-close:hover{ color:var(--ink); background:var(--paper-2); }
.modal-head{ padding:26px 28px 18px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:-0.01em; }
.modal-head p{ color:var(--ink-2); font-size:13.5px; margin-top:5px; line-height:1.5; }
.modal-body{ padding:22px 28px 26px; }
.tally-frame{ width:100%; min-height:560px; border:none; display:block; border-radius:8px; }

/* honest "not connected yet" placeholder (shown until a form URL is pasted) */
.embed-empty{ text-align:center; padding:14px 6px 6px; }
.embed-empty .ico{ width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.embed-empty h4{ font-family:var(--serif); font-size:20px; font-weight:500; margin-bottom:8px; }
.embed-empty p{ color:var(--ink-2); font-size:14px; line-height:1.55; max-width:42ch; margin:0 auto 10px; }
.embed-empty .owner-note{ font-family:var(--mono); font-size:10.5px; line-height:1.55; color:var(--clay-ink); background:var(--clay-soft); border:1px solid rgba(168,92,51,0.2); border-radius:8px; padding:10px 12px; margin:16px auto 18px; max-width:46ch; text-align:left; }
.embed-empty .owner-note code{ background:var(--panel); padding:1px 5px; border-radius:4px; }

/* contact form (inside the modal) */
.contact-form{ display:grid; gap:15px; }
.contact-form label{
  display:grid; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.contact-form input, .contact-form textarea{
  font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:10px 13px; width:100%; letter-spacing:normal; text-transform:none;
}
.contact-form textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-3); }
.contact-form .form-hint{
  font-family:var(--sans); font-size:12.5px; font-weight:400; line-height:1.5;
  letter-spacing:normal; text-transform:none; color:var(--ink-2);
}
.contact-form .form-actions{ margin-top:2px; }
.contact-form .hp-field{ display:none; }

/* ===================================================================
   9. COURSE — reading layout + components
   =================================================================== */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:200; transition:width 0.08s linear; }

/* reading column */
.wrap{ max-width:720px; margin:0 auto; padding:0 28px; }
.course body, .course-page{ }
.cbody{ font-size:16.5px; line-height:1.72; }   /* roomier reading measure for course prose */

.unit-hero{ padding:60px 0 26px; }
.unit-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(33px,5.4vw,50px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:18px; }
.unit-hero h1 em{ font-style:italic; color:var(--accent); }
.dek{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink-2); font-weight:400; }
.meta{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.02em; margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); display:inline-block; }

/* unit stepper */
.stepper{ display:flex; gap:7px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.stepper a, .stepper span{ font-family:var(--mono); font-size:11px; min-width:26px; height:26px; padding:0 4px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--ink-3); text-decoration:none; }
.stepper a:hover{ border-color:var(--accent); color:var(--accent); }
.stepper .cur{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper .seg{ flex:0 0 16px; height:1px; background:var(--line); border-radius:0; min-width:0; padding:0; }

/* course prose */
.cbody p{ margin:0 0 21px; }
.cbody h2{ font-family:var(--serif); font-size:27px; font-weight:500; letter-spacing:-0.01em; line-height:1.2; margin:46px 0 6px; scroll-margin-top:80px; }
.cbody h2 .ic{ font-size:0.82em; margin-right:0.32em; }
.cbody h3{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:0.01em; margin:32px 0 4px; color:var(--ink); }
.cbody a{ color:var(--accent); text-decoration:none; }
.cbody a:hover{ text-decoration:underline; text-underline-offset:2px; }
.cbody strong{ font-weight:600; }
.cbody em{ font-style:italic; }
.cbody ul{ margin:0 0 21px; padding-left:20px; }
.cbody li{ margin:0 0 8px; }
.lead-rule{ width:34px; height:2px; background:var(--accent); margin:14px 0 22px; border:0; }
.divide{ height:1px; background:var(--line); border:0; margin:40px 0; }
.next-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.05em; color:var(--ink-3); text-transform:uppercase; margin:34px 0 4px; }

/* audio brief */
.brief{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:16px 18px; margin:30px 0 8px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.brief .bi{ width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.brief .bt{ flex:1; min-width:160px; }
.brief .bt .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); }
.brief .bt .ti{ font-family:var(--serif); font-size:16px; font-weight:500; line-height:1.3; }
.brief audio{ height:34px; width:100%; max-width:280px; flex:1 1 220px; }

/* survey card (reuses .brief): keep the CTA intact and legible inside .cbody */
.brief .bt{ flex:1 1 220px; }
.brief .btn{ flex:0 0 auto; }
.cbody .brief .btn-clay{ color:#fff; }
.cbody .brief .btn-clay:hover{ color:#fff; }

/* callouts */
.call{ border-radius:12px; padding:18px 20px; margin:26px 0; border:1px solid var(--line); background:var(--panel); }
.call .clab{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.call p{ margin:0 0 12px; } .call p:last-child{ margin:0; }
.call.evidence{ background:var(--accent-soft); border-color:rgba(var(--accent-rgb),0.22); }
.call.evidence .clab{ color:var(--accent-deep); }
.call.evidence strong{ color:var(--accent-deep); }
.call.reflect{ background:var(--clay-soft); border-color:rgba(168,92,51,0.22); }
.call.reflect .clab{ color:var(--clay-ink); }
.call.reflect .q{ font-family:var(--serif); font-size:18px; line-height:1.45; color:var(--ink); }
.call.note{ background:var(--panel); border-left:3px solid var(--ink); border-radius:0 12px 12px 0; }
.call.note .clab{ color:var(--ink-2); }
.call.key{ background:var(--ink); color:#fff; border-color:var(--ink); }
.call.key .clab{ color:#9DC2E6; }
.call.key strong{ color:#fff; }
.call.who{ background:var(--panel); border-style:dashed; }
.call.who .clab{ color:var(--t-found); }
.source{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:0.01em; line-height:1.55; margin:6px 0 0; }
.source a{ color:var(--ink-2); }

/* figure */
figure{ margin:30px 0; }
figure img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:#fff; }
figcaption{ font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.5; margin-top:10px; letter-spacing:0.01em; }
figcaption a{ color:var(--ink-2); }

/* responsive video embed (Unit 2 YouTube) */
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; margin:30px 0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* key terms */
.terms{ border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; margin:24px 0; }
.term{ padding:15px 18px; border-bottom:1px solid var(--line-2); }
.term:last-child{ border-bottom:0; }
.term b{ font-family:var(--mono); font-size:13px; color:var(--accent-deep); letter-spacing:0.01em; }
.term p{ margin:5px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.55; }

/* summary */
.summary{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:22px 24px; margin:30px 0; }
.summary h3{ font-family:var(--serif); font-size:20px; font-weight:500; margin:0 0 14px; color:var(--ink); }
.summary .row{ padding:12px 0; border-top:1px solid var(--line-2); }
.summary .row:first-of-type{ border-top:0; padding-top:0; }
.summary .row b{ font-weight:600; }
.summary .row span{ color:var(--ink-2); }

/* survey strip */
.survey{ font-family:var(--mono); font-size:12px; letter-spacing:0.02em; color:var(--ink-2); background:var(--paper-2); border-radius:10px; padding:13px 16px; margin:26px 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.survey a{ font-weight:600; color:var(--accent); }

/* bonus */
.bonus{ border:1px dashed var(--line); border-radius:14px; padding:6px 24px 24px; margin:38px 0 0; background:rgba(255,255,255,0.4); }
.bonus .btag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--clay-ink); background:var(--clay-soft); border-radius:0 0 9px 9px; padding:5px 12px; margin-bottom:6px; }

/* unit cards (course home) */
.units{ display:grid; gap:14px; margin:8px 0 0; }
.ucard{ display:flex; gap:18px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:20px 22px; text-decoration:none; transition:border-color 0.16s, box-shadow 0.16s, transform 0.16s; }
.ucard:hover{ border-color:rgba(24,28,30,0.2); box-shadow:0 14px 32px -22px rgba(24,28,30,0.4); transform:translateY(-2px); }
.ucard .un{ font-family:var(--serif); font-size:34px; font-weight:500; color:var(--accent); line-height:1; flex:0 0 auto; width:42px; }
.ucard .uc-t{ font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.25; color:var(--ink); }
.ucard .uc-m{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.03em; margin:4px 0 0; }
.ucard .uc-go{ margin-left:auto; align-self:center; font-family:var(--mono); font-size:12px; color:var(--ink-3); flex:0 0 auto; }
.ucard:hover .uc-go{ color:var(--accent); }

/* links list (course home + final note placeholders) */
.links-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:26px 0; }
.links-list a, .links-list span.disabled{ display:flex; align-items:center; gap:11px; background:var(--panel); padding:15px 18px; font-size:15px; color:var(--ink); text-decoration:none; }
.links-list a:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.links-list .arw{ margin-left:auto; color:var(--ink-3); font-family:var(--mono); font-size:12px; }
.links-list span.disabled{ color:var(--ink-3); }
.links-list span.disabled .arw{ color:var(--ink-3); }
.placeholder-note{ font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.6; margin:-14px 0 0; }

/* course CTA row + buttons reuse shared .btn */
.cta-row{ display:flex; gap:11px; flex-wrap:wrap; margin:30px 0 0; }

/* unit footer nav */
.ufoot{ display:flex; align-items:stretch; gap:12px; margin:46px 0 0; border-top:1px solid var(--line); padding-top:26px; }
.ufoot a{ flex:1; display:flex; flex-direction:column; gap:3px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:14px 16px; text-decoration:none; transition:border-color 0.16s, transform 0.16s; }
.ufoot a:hover{ border-color:var(--accent); transform:translateY(-1px); }
.ufoot .dir{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
.ufoot .ti{ font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink); }
.ufoot a.nx{ text-align:right; align-items:flex-end; }
.ufoot a.home{ flex:0 0 auto; justify-content:center; align-items:center; }
.ufoot a.home .ti{ font-size:20px; }

/* ===================================================================
   10. ABOUT + responsive + accessibility
   =================================================================== */
.about-wrap{ max-width:760px; margin:0 auto; padding:0 28px; }
.about-hero{ padding:64px 0 10px; }
.about-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5.2vw,52px); line-height:1.06; letter-spacing:-0.02em; margin-bottom:18px; }
.about-hero h1 em{ font-style:italic; color:var(--accent); }
.about-hero .dek{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink-2); }
.about-body{ font-size:16.5px; line-height:1.72; padding:14px 0 10px; }
.about-body p{ margin:0 0 20px; color:var(--ink); }
.about-body a{ color:var(--accent); text-decoration:none; }
.about-body a:hover{ text-decoration:underline; text-underline-offset:2px; }
.about-section{ margin:44px 0 0; }
.about-section > h2{ font-family:var(--serif); font-size:27px; font-weight:500; letter-spacing:-0.01em; margin-bottom:6px; }
.about-section > .lead-rule{ margin-top:12px; }
.value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 0; }
.value{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.value h3{ font-family:var(--sans); font-size:15px; font-weight:600; margin-bottom:5px; }
.value p{ font-size:14px; color:var(--ink-2); line-height:1.55; margin:0; }
.get-involved{ background:var(--clay-soft); border:1px solid rgba(168,92,51,0.2); border-radius:14px; padding:26px 28px; margin:18px 0 0; }
.get-involved h2{ font-family:var(--serif); font-size:24px; font-weight:500; color:var(--clay-ink); margin-bottom:8px; }
.get-involved p{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:0 0 16px; max-width:60ch; }
.gi-actions{ display:flex; gap:11px; flex-wrap:wrap; }

@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

*:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}

@media (max-width: 920px){
  .hero{ grid-template-columns:1fr; gap:34px; padding-top:48px; }
  .specimen{ display:none; }
  .library{ grid-template-columns:1fr; gap:22px; }
  .sidebar{ position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; }
  .value-grid{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .nav-links{ gap:16px; }
  .dek{ font-size:19px; }
  .ufoot{ flex-wrap:wrap; } .ufoot a.home{ order:-1; flex:1 1 100%; }
}

@media (max-width: 600px){
  .topnav{ padding:14px 18px; flex-wrap:wrap; }
  .nav-right{ gap:14px; }
  .hero, .section-head, .control-bar, .library, .contribute-inner, .copyright{ padding-left:18px; padding-right:18px; }
  .grid{ grid-template-columns:1fr; }
  .sidebar{ grid-template-columns:1fr; }
  .contribute-inner{ flex-direction:column; align-items:flex-start; }
  .modal-head, .modal-body{ padding-left:20px; padding-right:20px; }
}