@import url("behistorical-brand-lock.css");
/* =========================================================
   BEHISTORICAL OFFICIAL STYLE SYSTEM
   Clean contrast rebuild: dark surfaces use light text;
   light reading/work surfaces use dark text. No broad color patches.
   ========================================================= */
:root{
  --blackened-steel:#1A1C1D;
  --charcoal-steel:#2B2F31;
  --gunmetal-gray:#3E4447;
  --aged-iron:#5A5F5C;
  --muted-sandstone:#D2B48C;
  --burnished-bronze:#8C5A2B;
  --rust-copper:#A8652D;
  --oxidized-brown:#6B3E1F;
  --antique-gold:#C9A46A;
  --warm-paper:#F5F0E7;
  --clean-paper:#FFFDF7;
  --ink:#151718;
  --paper-line:rgba(26,28,29,.14);
  --shadow:0 24px 70px rgba(26,28,29,.18);
  --soft-shadow:0 14px 32px rgba(26,28,29,.12);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(201,164,106,.18), transparent 34rem),
    linear-gradient(180deg, var(--warm-paper), #ece1d1 42%, var(--warm-paper));
  color:var(--ink);
  font-family:"Libre Baskerville", Georgia, serif;
  line-height:1.7;
}
a{color:inherit}
img{max-width:100%;display:block}
.site-shell{min-height:100vh}

/* Header / brand */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,253,247,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--paper-line);
}
.nav{
  width:min(1160px,92vw); margin:auto;
  min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand-mini{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  font-weight:900; letter-spacing:.04em; color:var(--blackened-steel);
}
.brand-mini img{
  width:46px; height:46px; object-fit:cover; border-radius:10px;
  border:1px solid rgba(90,95,92,.45); box-shadow:0 6px 18px rgba(26,28,29,.18);
}
.nav-links{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{
  font-family:"Montserrat", Inter, Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800;
  text-decoration:none; color:var(--gunmetal-gray);
}
.nav-links a:hover{color:var(--burnished-bronze)}

/* Hero */
.hero{
  width:min(1160px,92vw); margin:38px auto 28px; text-align:center;
  padding:44px 28px 50px;
  background:linear-gradient(180deg, var(--clean-paper), #f2eadc);
  border:1px solid rgba(90,95,92,.2);
  box-shadow:var(--shadow);
  border-radius:26px;
}
.logo-frame{
  width:132px; height:132px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--blackened-steel); border:8px solid var(--clean-paper); outline:1px solid rgba(90,95,92,.45);
  box-shadow:0 16px 38px rgba(26,28,29,.24);
}
.logo-frame img{width:100%; height:100%; object-fit:cover}
.logo-title{
  margin:0;
  font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  font-size:clamp(3.3rem, 9vw, 7.4rem);
  font-weight:900; line-height:.88; letter-spacing:.015em;
  color:var(--blackened-steel);
}
.hero-h{font-size:1.14em; letter-spacing:-.04em}
/* Globe O styling is intentionally centralized in behistorical-brand-lock.css only. */
.subtitle{
  margin:14px 0 18px; font-family:"Montserrat", Inter, Arial, sans-serif;
  font-weight:900; letter-spacing:.36em; text-transform:uppercase; color:var(--aged-iron);
}
.hero-copy{font-size:1.05rem; max-width:740px; margin:0 auto 22px; color:var(--gunmetal-gray)}
.quick-nav{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}

/* Buttons / UI */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:11px 17px; border:1px solid rgba(201,164,106,.38); border-radius:999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, var(--gunmetal-gray), var(--charcoal-steel));
  color:var(--clean-paper); text-decoration:none;
  font-family:"Montserrat", Inter, Arial, sans-serif; font-size:.76rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 10px 22px rgba(26,28,29,.18);
}
.btn:hover{background:linear-gradient(180deg, var(--aged-iron), var(--gunmetal-gray)); transform:translateY(-1px)}
.btn.secondary{background:var(--clean-paper); color:var(--charcoal-steel); border-color:rgba(90,95,92,.35); box-shadow:none}

/* Layout */
main{width:min(1160px,92vw); margin:0 auto 56px}
.section{margin:30px 0; padding:0}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.half{grid-column:span 6}.third{grid-column:span 4}.two-third{grid-column:span 8}

/* Section headers: dark by default, always readable */
.section-header{
  margin:0 0 18px; padding:24px 26px;
  background:var(--charcoal-steel);
  color:var(--warm-paper);
  border-left:8px solid var(--aged-iron); border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
}
.section-header h2{
  margin:4px 0 0; font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  font-weight:900; line-height:1.15; font-size:clamp(1.55rem, 3.8vw, 2.8rem); color:var(--antique-gold);
}
.section-header p{margin:.65rem 0 0; color:var(--warm-paper)}
.eyebrow{
  font-family:"Montserrat", Inter, Arial, sans-serif; text-transform:uppercase; letter-spacing:.18em;
  color:var(--muted-sandstone); font-weight:900; font-size:.74rem;
}

/* Light surfaces */
.card,
details,
.prompt-box,
.feedback-panel{
  background:var(--clean-paper);
  color:var(--ink);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
}
.card{padding:24px; margin-bottom:18px}
.card h3,
.prompt-box h3{
  margin:0 0 12px; color:var(--blackened-steel);
  font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif; font-size:1.28rem; line-height:1.2;
}
.card p:first-child{margin-top:0}.card p:last-child{margin-bottom:0}
.reading p{font-size:1.03rem; margin:0 0 1.05rem}.reading p:last-child{margin-bottom:0}

/* Dark surfaces */
.dark-panel{
  background:var(--blackened-steel);
  color:var(--warm-paper);
  padding:26px; border-radius:24px; box-shadow:var(--shadow); border:1px solid rgba(210,180,140,.16);
}
.dark-panel .section-header{
  background:transparent;
  color:var(--warm-paper);
  border:0; border-radius:0; box-shadow:none; padding:0 0 18px; margin:0 0 18px;
}
.dark-panel .section-header h2{color:var(--antique-gold)}
.dark-panel .section-header p{color:var(--warm-paper)}
.dark-panel .eyebrow{color:var(--muted-sandstone)}
.dark-panel > p,
.dark-panel > ul,
.dark-panel > ol,
.dark-panel > li{color:var(--warm-paper)}
.dark-panel a:not(.btn){color:var(--muted-sandstone)}

.dark-card{
  background:linear-gradient(180deg, var(--gunmetal-gray), var(--charcoal-steel));
  color:var(--warm-paper);
  border-color:rgba(201,164,106,.25);
}
.dark-card h3{color:var(--antique-gold)}
.dark-card p,.dark-card li{color:var(--warm-paper)}
.dark-card strong{color:var(--muted-sandstone)}
.lecture-list{margin:0; padding-left:1.2rem}.lecture-list li{margin:.45rem 0}

/* Framework / questions */
details{padding:18px}
summary{font-family:"Montserrat", Inter, Arial, sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.12em; cursor:pointer; color:var(--blackened-steel)}
.framework{display:grid; gap:12px; margin-top:14px}
.kc{padding:14px 16px; border-left:5px solid var(--aged-iron); background:#f6efe3; color:var(--ink); border-radius:12px}
.kc-code{font-family:"Montserrat", Inter, Arial, sans-serif; color:var(--oxidized-brown); font-weight:900; letter-spacing:.08em}
.question{background:#f6efe3; border-left:5px solid var(--burnished-bronze); padding:14px 16px; border-radius:12px; margin:10px 0; color:var(--ink)}

/* Media */
.media-card .thumb{min-height:120px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; background:linear-gradient(135deg,var(--blackened-steel),var(--gunmetal-gray)); color:var(--antique-gold); font-family:"Montserrat", Inter, Arial, sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:900}
.image-card{padding:0; overflow:hidden}.image-card img{width:100%; height:245px; object-fit:cover; background:var(--charcoal-steel); cursor:zoom-in}.image-caption{padding:18px; font-size:.92rem}.image-caption em{display:block; margin-top:8px; color:var(--oxidized-brown)}.source-link{display:inline-block; margin-top:10px; color:var(--oxidized-brown); font-family:"Montserrat", Inter, Arial, sans-serif; font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em}
blockquote{margin:0; padding:20px; background:#f6efe3; border-left:6px solid var(--aged-iron); border-radius:14px; color:var(--ink); font-style:italic}
.pq-doc-label{margin:18px 0 2px; font-family:"Montserrat", Inter, Arial, sans-serif; text-transform:uppercase; letter-spacing:.18em; color:var(--oxidized-brown); font-weight:900; font-size:.74rem}
.pq-source-line{margin:0 0 14px; color:var(--ink); font-size:.95rem}


/* Map feature between First & 10 and Lecture */
.map-card{padding:0; overflow:hidden}
.map-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:0; align-items:stretch}
.map-figure{margin:0; background:#f8f2e8; border-right:1px solid var(--paper-line)}
.map-figure img{width:100%; height:auto; min-height:430px; max-height:min(70vh,560px); object-fit:contain; align-self:start; padding:18px; cursor:zoom-in; background:#f8f2e8}
.map-figure figcaption{padding:0 18px 18px; color:var(--ink); font-size:.9rem}
.map-notes{padding:26px; background:var(--clean-paper); color:var(--ink)}
.map-notes h3{margin-top:0}
.map-notes li{margin:.6rem 0}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}.map-figure{border-right:0;border-bottom:1px solid var(--paper-line)}.map-figure img{min-height:310px}}

/* Student response areas */
.prompt-box{padding:24px; margin:18px 0}
.response-area{width:100%; min-height:150px; resize:vertical; padding:16px; border:1px solid rgba(90,95,92,.38); border-radius:14px; background:#fff; color:#111; font-family:Georgia,serif; line-height:1.55; font-size:1rem}
.response-area:focus{outline:3px solid rgba(201,164,106,.35); border-color:var(--burnished-bronze)}
.tool-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}.check-result{margin-top:12px; font-weight:700; color:var(--oxidized-brown)}
.feedback-panel{display:none; margin-top:12px; padding:16px; background:#f6efe3; color:var(--ink)}.feedback-panel.show{display:block}

/* Footer / lightbox */
.footer{background:var(--blackened-steel); color:var(--warm-paper); text-align:center; padding:42px 20px; margin-top:60px}.footer-brand{font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif; color:var(--antique-gold); font-weight:900; font-size:2rem}.footer p{margin:.3rem 0 0; color:var(--muted-sandstone)}
.lightbox{position:fixed; inset:0; display:none; z-index:100; background:rgba(26,28,29,.92); color:var(--warm-paper); padding:28px; align-items:center; justify-content:center}.lightbox.show{display:flex}.lightbox figure{width:min(1000px,92vw); margin:0}.lightbox img{max-height:78vh; margin:auto; object-fit:contain}.lightbox figcaption{margin-top:12px; text-align:center}.lightbox .btn{position:absolute; top:20px; right:20px}

/* Final explicit contrast rules for nested content */
.card .btn{color:var(--clean-paper)}
.card .btn.secondary{color:var(--charcoal-steel)}
.dark-panel .card:not(.dark-card){background:var(--clean-paper); color:var(--ink)}
.dark-panel .card:not(.dark-card) h3{color:var(--blackened-steel)}
.dark-panel .card:not(.dark-card) p,
.dark-panel .card:not(.dark-card) li,
.dark-panel .card:not(.dark-card) .image-caption{color:var(--ink)}
.dark-panel .card:not(.dark-card) em,
.dark-panel .card:not(.dark-card) .source-link{color:var(--oxidized-brown)}
/* An eyebrow inside a dark panel is sandstone, which is correct on steel and is
   1.8:1 on the clean paper a light card inside that panel is painted with. The
   paper equivalent is oxidized brown, at about 8.9:1. Same rule the eBook
   states: gold and sandstone are dark-surface colors, and "restoring" one on a
   cream row is the defect, not the fix. */
.dark-panel .card:not(.dark-card) .eyebrow{color:var(--oxidized-brown)}

@media (max-width:820px){.nav{align-items:flex-start; flex-direction:column; padding:14px 0}.nav-links{justify-content:flex-start}.hero{margin-top:18px; padding:32px 18px}.logo-frame{width:108px; height:108px}.half,.third,.two-third{grid-column:1/-1}.section-header{padding:20px}.dark-panel{padding:18px}.image-card img{height:210px}.subtitle{letter-spacing:.22em}.btn{width:100%}.quick-nav .btn{width:auto}}

/* =========================================================
   OFFICIAL BEHISTORICAL LECTURE CARD + PROJECTION MODAL LOCK
   - Lecture cards are always two across on standard/large screens.
   - Cards contain only the topic title and concise bullet notes.
   - No visible trigger labels or enlargement instructions appear on cards.
   - Related images appear only inside the enlarged projection modal.
   ========================================================= */
.lecture-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:18px !important;
  margin-bottom:18px !important;
  align-items:stretch !important;
}
.lecture-topic-card{
  cursor:pointer !important;
  min-height:100% !important;
  margin:0 !important;
  padding:22px !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.lecture-topic-card:hover,
.lecture-topic-card:focus{
  transform:translateY(-4px) !important;
  border-color:rgba(201,164,106,.65) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.25) !important;
  outline:none !important;
}
.lecture-topic-card h3{
  margin-top:0 !important;
  margin-bottom:12px !important;
}
.lecture-topic-card .lecture-list{
  margin:0 !important;
  padding-left:1.2rem !important;
}
.lecture-topic-card .lecture-list li{
  margin:.45rem 0 !important;
}
/* Hide any legacy trigger labels from older cached/generated versions. */
.lecture-card-topline,
.open-hint,
.lecture-modal-note,
.lecture-topic-card .open-hint,
.lecture-topic-card .lecture-card-topline,
.lecture-topic-card [class*="hint"],
.lecture-topic-card [class*="open"]{
  display:none !important;
}
.lecture-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:140 !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:26px !important;
  background:rgba(26,28,29,.92) !important;
  backdrop-filter:blur(10px) !important;
}
.lecture-modal.show{display:flex !important;}
/* The panel is paper, the picture keeps its dark mount.
   ------------------------------------------------------
   This used to be a dark panel with light text. Three reasons it is paper now:
   the positive polarity advantage (dark text on light reads measurably faster and
   more accurately, and the advantage grows as characters get smaller); a lamp
   projector can only add light, so in a lit classroom a dark background degrades
   to washed-out grey while a light one puts the lumens to work; and light-on-dark
   causes halation for the roughly one in three people with some astigmatism.
   It also settles an inconsistency. Every other surface a student reads or types
   on, the readings and the module pop-outs, was already paper. This card was the
   last dark reading surface in the system.
   The colours are the reading pages' own conventions, not new ones: warm paper
   under ink, a burnished-bronze eyebrow, a blackened-steel heading over a bronze
   rule, and bold terms styled like `.kt`. The lecture card grid on the page stays
   dark on purpose: those are scanned at a glance, not read at length. */
.lecture-modal-panel{
  width:min(1180px,96vw) !important;
  max-height:92vh !important;
  overflow:auto !important;
  border-radius:24px !important;
  background:var(--warm-paper) !important;
  border:1px solid rgba(140,90,43,.28) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.45) !important;
  color:var(--ink) !important;
  padding:28px !important;
  position:relative !important;
}
.lecture-close{position:absolute !important; top:18px !important; right:18px !important; z-index:2 !important;}
.lecture-modal-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr) !important;
  gap:28px !important;
  /* start, not stretch: the figure stretched to the height of the text column, so
     a bullet-heavy card left dead space under the caption. That was invisible when
     the panel was dark and the mount blended into it, and is a conspicuous empty
     black rectangle against paper. Let the figure size to its own content. */
  align-items:start !important;
  padding-top:20px !important;
}
.lecture-modal-content .eyebrow{color:var(--burnished-bronze) !important;}
.lecture-modal-content h2{
  margin:.25rem 0 1.1rem !important;
  font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif !important;
  font-size:clamp(2rem, 5vw, 4.25rem) !important;
  line-height:1.05 !important;
  color:var(--blackened-steel) !important;
  border-bottom:1px solid rgba(140,90,43,.28) !important;
  padding-bottom:.5rem !important;
}
.lecture-list.enlarged{
  font-size:clamp(1.1rem, 2.3vw, 1.7rem) !important;
  line-height:1.55 !important;
  padding-left:1.35em !important;
}
.lecture-list.enlarged li{margin:.6rem 0 !important; color:var(--ink) !important;}
.lecture-modal-resource{margin-top:1.5rem !important;}
.lecture-modal-resource:empty{display:none !important;}
.lecture-modal-resource .btn{display:inline-flex !important; align-items:center !important; justify-content:center !important;}
/* Bold terms get the readings' key-term treatment, so a term a student met in the
   First & 10 looks the same when it reappears in the lecture. Same signal, one
   look, rather than two ways of saying "this is the word that matters". */
/* The highlight bleeds via box-shadow rather than horizontal padding. Padding at
   this type size pushed the following punctuation away from its word, so a bullet
   ending in a bold term read as "complex religion ." with a floating period. A
   spread shadow paints the same halo and occupies no layout width. */
.lecture-list.enlarged strong{
  color:var(--oxidized-brown) !important;
  background:rgba(210,180,140,.35) !important;
  box-shadow:0 0 0 3px rgba(210,180,140,.35) !important;
  border-radius:2px !important;
}
/* The picture keeps its dark mount. A photograph or a map reads better against
   near-black than against paper, and it gives the card a focal point now that the
   text side is light. Its border is a dark edge rather than the old faint gold,
   which disappeared against paper. */
.lecture-modal-image-wrap{
  margin:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#0f1112 !important;
  border:1px solid rgba(26,28,29,.30) !important;
  display:flex !important;
  flex-direction:column !important;
}
.lecture-modal-image-wrap img{
  /* flex:1 stretched this to the height of the whole modal, which pushed the
     picture out of view once object-fit had letterboxed it. Size it from its own
     aspect ratio instead, and use contain so a map's labels are never cropped. */
  width:100% !important;
  height:auto !important;
  min-height:240px !important;
  max-height:min(56vh,470px) !important;
  flex:0 0 auto !important;
  object-fit:contain !important;
  background:var(--blackened-steel) !important;
}
.lecture-modal-image-wrap figcaption{
  padding:16px 18px !important;
  color:var(--warm-paper) !important;
  font-size:.92rem !important;
  line-height:1.45 !important;
  background:rgba(0,0,0,.3) !important;
}
.lecture-modal-image-wrap figcaption strong{color:var(--antique-gold) !important;}
.lecture-modal-image-wrap figcaption a{color:var(--muted-sandstone) !important; font-weight:700 !important;}
@media (max-width:900px){
  .lecture-card-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
  .lecture-modal-grid{grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  .lecture-card-grid{grid-template-columns:1fr !important;}
  .lecture-modal{padding:12px !important;}
  .lecture-modal-panel{padding:18px !important;}
  .lecture-close{position:static !important; margin-bottom:12px !important; width:auto !important;}
  .lecture-modal-grid{padding-top:0 !important;}
  .lecture-modal-image-wrap{min-height:260px !important;}
  .lecture-modal-image-wrap img{min-height:240px !important; height:auto !important; max-height:min(58vh,480px) !important; object-fit:contain !important; align-self:start !important;}
}


/* =========================================================
   OFFICIAL BEHISTORICAL LECTURE CARD APPEARANCE LOCK
   Matches approved two-across lecture card look.
   Cards show only title + bullets. Entire card triggers modal.
   ========================================================= */
#lecture .lecture-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(320px,1fr)) !important;
  gap:28px 24px !important;
  align-items:stretch !important;
  margin:0 0 22px !important;
}
#lecture .lecture-topic-card{
  background:linear-gradient(180deg, #3E4447 0%, #303638 100%) !important;
  color:#FFFDF7 !important;
  border:1px solid rgba(201,164,106,.34) !important;
  border-radius:20px !important;
  padding:28px 30px 30px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  min-height:250px !important;
  cursor:pointer !important;
  overflow:hidden !important;
}
#lecture .lecture-topic-card:hover,
#lecture .lecture-topic-card:focus{
  transform:translateY(-3px) !important;
  border-color:rgba(201,164,106,.72) !important;
  box-shadow:0 24px 62px rgba(0,0,0,.32) !important;
  outline:none !important;
}
#lecture .lecture-topic-card h3{
  margin:0 0 18px !important;
  color:#C9A46A !important;
  font-family:"Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif !important;
  font-size:clamp(1.25rem, 2vw, 1.65rem) !important;
  line-height:1.1 !important;
  letter-spacing:.015em !important;
  font-weight:900 !important;
  font-variant:small-caps !important;
}
#lecture .lecture-topic-card .lecture-list{
  margin:0 !important;
  padding-left:1.1rem !important;
  color:#FFFDF7 !important;
}
#lecture .lecture-topic-card .lecture-list li{
  margin:.58rem 0 !important;
  color:#FFFDF7 !important;
  font-size:clamp(1rem, 1.45vw, 1.22rem) !important;
  line-height:1.48 !important;
}
#lecture .lecture-topic-card .lecture-list strong{
  color:#D2B48C !important;
  font-weight:900 !important;
}
#lecture .lecture-topic-card *:not(h3):not(strong){
  color:#FFFDF7 !important;
}
#lecture .lecture-topic-card strong{color:#D2B48C !important;}
#lecture .lecture-card-topline,
#lecture .open-hint,
#lecture .lecture-modal-note,
#lecture .lecture-topic-card .open-hint,
#lecture .lecture-topic-card .lecture-card-topline,
#lecture .lecture-topic-card [class*="hint"],
#lecture .lecture-topic-card [class*="open"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}
@media (max-width:760px){
  #lecture .lecture-card-grid{grid-template-columns:1fr !important;}
  #lecture .lecture-topic-card{min-height:auto !important; padding:22px !important;}
}

/* Video clip cards */
.video-thumb{
  background-size:cover !important;
  background-position:center !important;
  position:relative;
  overflow:hidden;
  min-height:170px !important;
  border:1px solid rgba(201,164,106,.42);
}
.video-thumb span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(26,28,29,.74);
  color:var(--muted-sandstone);
  border:1px solid rgba(210,180,140,.38);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.video-card .media-card p{color:var(--ink)}
/* One clip fills the row, two sit side by side. The intro card always spans, so
   the block says what it is before the first thumbnail. */
.content-videos{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap:18px !important;
}
.content-videos[hidden]{display:none !important;}
.content-videos .video-intro{
  grid-column:1 / -1;
  background:var(--clean-paper);
  color:var(--ink);
}
.content-videos .video-intro h3{color:var(--blackened-steel)}
.content-videos .video-card h3{color:var(--blackened-steel)}

/* Lecture deck controls
   ---------------------
   The deck is a sequence, so it carries sequence controls: arrows either side of
   the panel, a card counter, and Back to Modules beside Close. Close returns the
   student to the card they opened; Back to Modules is the way out of the deck. */
.lecture-modal-actions{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.lecture-modal-actions .lecture-close{
  position:static !important;
  top:auto !important;
  right:auto !important;
  margin:0 !important;
}
/* `.btn.secondary` is a white pill, which on a dark projected panel is the
   loudest thing on screen. Gold on dark keeps it clearly the other button of the
   pair without competing with the lecture content behind it. */
.lecture-to-modules.secondary{
  background:linear-gradient(180deg,#14191b,#2b2f31) !important;
  color:var(--antique-gold) !important;
  border-color:rgba(201,164,106,.55) !important;
}
.lecture-to-modules.secondary:hover,
.lecture-to-modules.secondary:focus{
  border-color:var(--antique-gold) !important;
  outline:none;
}
.lecture-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:200;
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid rgba(201,164,106,.55);
  background:linear-gradient(180deg,#14191b,#2b2f31);
  color:var(--antique-gold);
  font-family:"Montserrat", Inter, Arial, sans-serif;
  font-size:2.2rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .16s ease, border-color .16s ease, opacity .16s ease;
}
.lecture-arrow:hover:not(:disabled),
.lecture-arrow:focus:not(:disabled){
  border-color:var(--antique-gold);
  transform:translateY(-50%) scale(1.08);
  outline:none;
}
.lecture-arrow:disabled{opacity:.28; cursor:default}
.lecture-arrow-prev{left:20px}
.lecture-arrow-next{right:20px}
.lecture-nav-status{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  font-family:"Montserrat", Inter, Arial, sans-serif;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-sandstone);
  background:rgba(20,25,27,.85);
  padding:7px 16px;
  border-radius:999px;
  border:1px solid rgba(201,164,106,.32);
}
@media (max-width:920px){
  .lecture-arrow{width:46px; height:46px; font-size:1.7rem}
  .lecture-arrow-prev{left:8px}
  .lecture-arrow-next{right:8px}
  .lecture-nav-status{bottom:12px}
  .lecture-modal-actions{flex-wrap:wrap; justify-content:flex-end}
}

/* =========================================================
   OFFICIAL BEHISTORICAL LEARNING TARGETS + SUCCESS CRITERIA
   Every topic page requires 3 Learning Targets and 3 Success Criteria.
   These remain student-facing, concise, and tied to KC anchors.
   ========================================================= */
.target-success-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
.target-card,
.success-card{
  background:var(--clean-paper) !important;
  color:var(--ink) !important;
  border-top:6px solid var(--aged-iron) !important;
}
.target-card h3,
.success-card h3{
  color:var(--blackened-steel) !important;
  margin-bottom:16px !important;
}
.target-item{
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-areas:
    "num text"
    "num kc";
  gap:2px 12px;
  padding:13px 0;
  border-top:1px solid rgba(26,28,29,.12);
  color:var(--ink) !important;
}
.target-item:first-of-type{border-top:0;}
.target-number{
  grid-area:num;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, var(--gunmetal-gray), var(--charcoal-steel));
  color:var(--muted-sandstone) !important;
  font-family:"Montserrat", Inter, Arial, sans-serif;
  font-weight:900;
  font-size:.85rem;
  border:1px solid rgba(201,164,106,.35);
}
.target-item p{
  grid-area:text;
  margin:0;
  color:var(--ink) !important;
  font-size:.98rem;
  line-height:1.55;
}
.target-kc{
  grid-area:kc;
  margin-top:5px;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:#f1e6d3;
  color:var(--oxidized-brown) !important;
  font-family:"Montserrat", Inter, Arial, sans-serif;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dark-panel .target-card,
.dark-panel .success-card{
  background:var(--clean-paper) !important;
  color:var(--ink) !important;
}
.dark-panel .target-card *,
.dark-panel .success-card *{
  color:inherit;
}
.dark-panel .target-card h3,
.dark-panel .success-card h3,
.dark-panel .target-item p{
  color:var(--ink) !important;
}
.dark-panel .target-number{color:var(--muted-sandstone) !important;}
.dark-panel .target-kc{color:var(--oxidized-brown) !important;}
@media (max-width:820px){
  .target-success-grid{grid-template-columns:1fr;}
}

/* Confidence scale ---------------------------------------------------------
   Sits under every response box. Optional by design: a student who skips it
   has answered, and the Skills Lens counts blanks rather than nagging for them.
   Real radio inputs in a fieldset, so a screen reader announces "1 of 5" and
   arrow keys work without a keyboard handler of our own. The inputs are hidden
   visually but never with display:none, which would take them out of the tab
   order and off the accessibility tree. */
.confidence-row{margin:14px 0 0; padding:12px 14px; border:1px solid rgba(26,28,29,.12); border-radius:12px; background:#f6efe3}
.confidence-row legend{padding:0 6px; font-family:"Montserrat",Inter,Arial,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--oxidized-brown)}
.confidence-scale{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.confidence-option{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:74px; padding:8px 10px; border:1px solid rgba(26,28,29,.18); border-radius:10px; background:var(--clean-paper); color:var(--ink); cursor:pointer; text-align:center; transition:border-color .15s ease, background .15s ease}
.confidence-option input{position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; margin:0; cursor:pointer}
.confidence-option>span:first-of-type{font-family:"Cinzel","Times New Roman",Georgia,serif; font-size:1.15rem; font-weight:700; line-height:1; color:var(--burnished-bronze)}
.confidence-option-text{font-family:"Montserrat",Inter,Arial,sans-serif; font-size:.68rem; line-height:1.25; color:var(--aged-iron)}
.confidence-option:hover{border-color:var(--burnished-bronze)}
/* :focus-within is what carries the keyboard ring, because the input itself is
   transparent. Without it, arrowing through the scale is invisible. */
.confidence-option:focus-within{outline:3px solid var(--rust-copper); outline-offset:2px}
.confidence-option:has(input:checked){background:var(--burnished-bronze); border-color:var(--burnished-bronze)}
.confidence-option:has(input:checked)>span:first-of-type,
.confidence-option:has(input:checked) .confidence-option-text{color:var(--warm-paper)}
.confidence-clear{margin-top:10px; padding:0; border:0; background:none; font-family:"Montserrat",Inter,Arial,sans-serif; font-size:.72rem; color:var(--oxidized-brown); text-decoration:underline; cursor:pointer}
.confidence-clear:hover{color:var(--rust-copper)}
@media(max-width:620px){.confidence-option{min-width:calc(33% - 8px)}}