@import url("behistorical-brand-lock.css");
/* =========================================================
   BEHISTORICAL DAILY ANNOUNCEMENTS BOARD
   Projector surface. Dark blackened steel ground, warm paper
   text, antique gold accents. Type is sized for the back row.
   ========================================================= */
:root{
  --blackened-steel:#1A1C1D;
  --charcoal-steel:#2B2F31;
  --gunmetal-gray:#3E4447;
  --aged-iron:#5A5F5C;
  --muted-sandstone:#D2B48C;
  --burnished-bronze:#8C5A2B;
  --rust-copper:#A8652D;
  --antique-gold:#C9A46A;
  --warm-paper:#F5F0E7;
  --clean-paper:#FFFDF7;
  --alarm:#C4553B;
  --serif-title:'Cinzel','Trajan Pro','Times New Roman',Georgia,serif;
  --body:'Libre Baskerville',Georgia,serif;
  --ui:'Montserrat','Inter',Arial,sans-serif;
  --hairline:rgba(201,164,106,.26);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 14% 6%, rgba(201,164,106,.13), transparent 46%),
    radial-gradient(ellipse at 88% 94%, rgba(140,90,43,.16), transparent 52%),
    linear-gradient(165deg,#202324 0%, var(--blackened-steel) 44%, #101112 100%);
  color:var(--warm-paper);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.is-idle{cursor:none}

/* Faint paper tooth so a flat projector wall does not look empty. */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(245,240,231,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(245,240,231,.014) 0 1px, transparent 1px 4px);
}

.board{
  position:relative; z-index:1;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
}

/* ---------- Timing bar ---------- */
.timing-bar{
  height:6px; flex:0 0 auto;
  background:rgba(245,240,231,.08);
  border-bottom:1px solid rgba(26,28,29,.6);
}
.timing-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--burnished-bronze), var(--antique-gold) 62%, var(--muted-sandstone));
  box-shadow:0 0 14px rgba(201,164,106,.5);
}
.board.is-paused .timing-fill{background:var(--aged-iron); box-shadow:none}

/* ---------- Masthead ---------- */
.masthead{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:3vw;
  padding:clamp(10px,1.5vh,22px) clamp(20px,3.4vw,64px);
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(245,240,231,.045), transparent);
}
.masthead-brand{
  display:flex; align-items:center; gap:clamp(10px,.9vw,18px);
  text-decoration:none; color:inherit;
}
.masthead-wordmark,
.masthead-course{display:block}
.masthead-brand img{
  width:clamp(38px,3.1vw,64px); height:clamp(38px,3.1vw,64px);
  object-fit:cover;
  border:2px solid var(--antique-gold);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.masthead-wordmark{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(1.05rem,1.75vw,2.2rem); line-height:1;
  letter-spacing:-.02em; color:var(--warm-paper);
}
.masthead-course{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.56rem,.82vw,1rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted-sandstone); margin-top:.35em;
}
.masthead-clock{text-align:right; font-family:var(--ui)}
.clock-time{
  font-weight:800; font-size:clamp(1.2rem,2.3vw,3rem);
  line-height:1; letter-spacing:.02em; color:var(--antique-gold);
  font-variant-numeric:tabular-nums;
}
.clock-date{
  font-weight:700; font-size:clamp(.6rem,.95vw,1.15rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm-paper); opacity:.82; margin-top:.45em;
}

/* ---------- Stage ---------- */
.stage{flex:1 1 auto; position:relative; overflow:hidden}
.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(18px,3.4vh,52px) clamp(26px,5vw,110px);
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity .62s ease, transform .62s ease, visibility 0s linear .62s;
}
.slide.is-active{opacity:1; visibility:visible; transform:none; transition-delay:0s}
@media (prefers-reduced-motion: reduce){
  .slide{transition:opacity .01s linear; transform:none}
}

.slide-eyebrow{
  font-family:var(--ui); font-weight:900;
  font-size:clamp(.7rem,1.15vw,1.45rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted-sandstone);
  display:flex; align-items:center; gap:clamp(10px,1.2vw,22px);
  margin-bottom:clamp(10px,1.6vh,26px);
}
.slide-eyebrow::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, var(--hairline), transparent);
}
.slide-title{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(2rem,4.6vw,5.6rem);
  line-height:1.02; letter-spacing:-.03em;
  margin:0 0 clamp(10px,1.8vh,28px);
  color:var(--warm-paper);
  text-wrap:balance;
}
.slide-title .gold{color:var(--antique-gold)}
.slide-sub{
  font-family:var(--ui); font-weight:600;
  font-size:clamp(.9rem,1.5vw,1.85rem);
  letter-spacing:.06em; color:#d9d1c4; margin:0;
}

/* ---------- Title slide ---------- */
.slide.slide-title-card{align-items:center; text-align:center}
/* The title card gets a rule on both sides of the eyebrow, not a trailing one. */
.slide-title-card .slide-eyebrow{justify-content:center}
.slide-title-card .slide-eyebrow::before,
.slide-title-card .slide-eyebrow::after{
  content:""; flex:0 0 auto;
  width:clamp(40px,5vw,110px); height:1px; background:var(--hairline);
}
.title-card-logo{
  width:min(1180px,82vw); max-width:calc(26vh * 1636 / 305);
  margin:0 auto clamp(4px,1vh,16px);
}
.title-card-logo img{display:block; width:100%; height:auto}
.title-card-day{
  font-family:var(--ui); font-weight:900;
  font-size:clamp(1rem,2.1vw,2.6rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--antique-gold); margin:clamp(6px,1.2vh,20px) 0 0;
}
.title-card-topic{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(1.5rem,3.4vw,4.2rem); line-height:1.06;
  color:var(--warm-paper); margin:clamp(10px,1.8vh,28px) auto 0;
  max-width:22ch; text-wrap:balance;
}
.title-card-unit{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.7rem,1.15vw,1.4rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted-sandstone); margin-top:clamp(12px,2vh,30px);
}

/* ---------- Callout panel (objective, Do Now, homework) ---------- */
.panel{
  background:linear-gradient(180deg, rgba(245,240,231,.075), rgba(245,240,231,.03));
  border:1px solid var(--hairline);
  border-left:clamp(6px,.65vw,12px) solid var(--antique-gold);
  padding:clamp(18px,3.2vh,48px) clamp(20px,3vw,58px);
  box-shadow:0 22px 60px rgba(0,0,0,.42);
}
.panel-text{
  font-family:var(--body);
  font-size:clamp(1.15rem,2.5vw,3.1rem);
  line-height:1.34; margin:0; color:var(--clean-paper);
  text-wrap:pretty;
}
.panel-foot{
  display:flex; align-items:center; gap:clamp(10px,1.2vw,20px); flex-wrap:wrap;
  margin-top:clamp(14px,2.2vh,30px);
}

.chip{
  display:inline-flex; align-items:center;
  font-family:var(--ui); font-weight:900;
  font-size:clamp(.62rem,.98vw,1.15rem);
  letter-spacing:.2em; text-transform:uppercase;
  padding:.55em 1.1em;
  border:1px solid var(--antique-gold);
  color:var(--antique-gold);
  background:rgba(201,164,106,.09);
}
.chip.solid{background:var(--antique-gold); color:var(--blackened-steel); border-color:var(--antique-gold)}
.chip.alarm{border-color:var(--alarm); color:#f0b3a4; background:rgba(196,85,59,.16)}
.chip.alarm.solid{background:var(--alarm); color:var(--clean-paper)}
.chip.quiet{border-color:rgba(210,180,140,.4); color:var(--muted-sandstone); background:transparent}

/* ---------- Agenda ---------- */
.agenda-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(8px,1.5vh,20px);
}
.agenda-item{
  display:flex; align-items:center; gap:clamp(14px,1.8vw,34px);
  padding:clamp(9px,1.5vh,20px) clamp(14px,1.7vw,30px);
  background:linear-gradient(90deg, rgba(245,240,231,.07), rgba(245,240,231,.015));
  border-left:clamp(4px,.4vw,8px) solid var(--burnished-bronze);
}
.agenda-num{
  flex:0 0 auto;
  font-family:var(--ui); font-weight:900;
  font-size:clamp(1.1rem,2.3vw,2.9rem);
  line-height:1; color:var(--antique-gold);
  font-variant-numeric:tabular-nums;
  min-width:1.6em;
}
.agenda-text{
  font-family:var(--body);
  font-size:clamp(.95rem,1.85vw,2.35rem);
  line-height:1.28; color:var(--warm-paper);
}
/* Six or more steps: tighten so nothing falls off the bottom. */
.agenda-list.is-long .agenda-text{font-size:clamp(.85rem,1.5vw,1.95rem)}
.agenda-list.is-long .agenda-num{font-size:clamp(.95rem,1.85vw,2.3rem)}
.agenda-list.is-long{gap:clamp(6px,1vh,14px)}

/* ---------- Today's modules ----------
   The ten module cards a student will work through, in order, so the room can
   read the day's path off the wall instead of opening the Canvas assignment.
   Two columns, because ten single-file rows either run off the bottom of a
   720p projector or shrink to a size the back row cannot read. */
/* Columns rather than a two-track grid, because a grid fills across and this
   list is a sequence: 01 to 05 down the left and 06 to 10 down the right is
   the order a student works in, where a grid would print 01 02 across the top
   row. Columns also reflow for any count without being told how many rows. */
.module-list{
  list-style:none; margin:0; padding:0;
  column-count:2; column-gap:clamp(12px,1.8vw,32px);
}
/* Five or fewer, a short day, goes back to one wide column. */
.module-list.is-single{column-count:1}
.module-item{
  display:flex; align-items:baseline; gap:clamp(9px,1.15vw,20px);
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:clamp(6px,1.1vh,15px);
  padding:clamp(7px,1.15vh,16px) clamp(12px,1.5vw,26px);
  background:linear-gradient(90deg, rgba(245,240,231,.07), rgba(245,240,231,.015));
  border-left:clamp(4px,.4vw,8px) solid var(--burnished-bronze);
}
.module-num{
  flex:0 0 auto;
  font-family:var(--ui); font-weight:900;
  font-size:clamp(.85rem,1.5vw,1.85rem);
  line-height:1.2; color:var(--antique-gold);
  font-variant-numeric:tabular-nums;
}
.module-name{
  font-family:var(--body);
  font-size:clamp(.85rem,1.5vw,1.9rem);
  line-height:1.25; color:var(--clean-paper); text-wrap:pretty;
}
.module-list.is-single .module-num{font-size:clamp(1.05rem,2.1vw,2.6rem)}
.module-list.is-single .module-name{font-size:clamp(1.05rem,2.05vw,2.6rem)}

/* ---------- Homework ----------
   Bulleted, not numbered. The count moved to the eyebrow, where it is read
   once, instead of being re-derived from a column of digits at the back of
   the room. A reading entry carries its sections as their own bullets: the
   sections are the assignment, and packing five of them into one sentence
   is how a student ends up reading three. */
.homework-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(10px,1.8vh,24px);
}
.homework-item{
  display:flex; align-items:flex-start; gap:clamp(16px,2vw,38px);
  padding:clamp(14px,2.4vh,32px) clamp(18px,2.2vw,42px);
  background:linear-gradient(90deg, rgba(245,240,231,.075), rgba(245,240,231,.02));
  border-left:clamp(6px,.6vw,12px) solid var(--antique-gold);
}
.homework-item::before{
  content:""; flex:0 0 auto;
  width:clamp(.5rem,.85vw,1rem); height:clamp(.5rem,.85vw,1rem);
  margin-top:clamp(.42rem,.85vw,1.05rem);
  border-radius:50%; background:var(--antique-gold);
}
.homework-body{display:flex; flex-direction:column; align-items:flex-start; gap:.6em}
.homework-text{
  font-family:var(--body);
  font-size:clamp(1.05rem,2.15vw,2.7rem); line-height:1.3;
  color:var(--clean-paper); text-wrap:pretty;
}
.homework-note{
  font-family:var(--ui); font-weight:600; font-style:italic;
  font-size:clamp(.8rem,1.35vw,1.6rem); line-height:1.35;
  color:var(--muted-sandstone);
}

/* The sections of one reading. Indented under their assignment, set in the
   UI face so they read as a list of items rather than as more prose. */
.reading-list{
  list-style:none; margin:0; padding:0 0 0 clamp(10px,1.3vw,26px);
  display:flex; flex-direction:column; gap:clamp(4px,.7vh,12px);
  border-left:1px solid var(--hairline);
}
.reading-item{
  display:flex; align-items:baseline; gap:clamp(8px,1vw,18px);
  font-family:var(--ui); font-weight:600;
  font-size:clamp(.86rem,1.55vw,1.95rem); line-height:1.3;
  color:var(--warm-paper);
}
.reading-item::before{
  content:"\2013"; flex:0 0 auto;
  color:var(--antique-gold); font-weight:700;
}
.reading-item.is-recommended{color:var(--muted-sandstone); font-weight:400}
.reading-item.is-recommended::before{color:var(--muted-sandstone)}
.reading-tone{
  font-size:.62em; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--muted-sandstone);
  border:1px solid var(--hairline); border-radius:2px;
  padding:.1em .5em; white-space:nowrap;
}

.homework-foot{margin-top:clamp(12px,2vh,26px)}

.homework-list.is-dense{gap:clamp(7px,1.2vh,16px)}
.homework-list.is-dense .homework-text{font-size:clamp(.92rem,1.65vw,2.05rem)}
.homework-list.is-dense .reading-item{font-size:clamp(.76rem,1.25vw,1.55rem)}
.homework-list.is-dense .homework-item{padding:clamp(10px,1.6vh,22px) clamp(14px,1.8vw,32px)}

/* ---------- Green and Silver ----------
   The palette is already a set of metals, so the two cohorts are metals too:
   verdigris, the patina copper takes with age, against pewter. A stock green
   and a stock grey would sit beside the brand rather than inside it.

   Three signals, never one. The colour, the letter, and the shape: Green is a
   filled disc, Silver an open ring. Any one of them survives a washed-out
   projector, a grayscale print, or a reader who cannot separate the hues.

   --cohort is set inline from assets/data/announcements.js, which gets it
   from scripts/lib/cohorts.js. It is the on-dark value: this board is steel,
   and pewter's own #8A9298 is a fill colour, not a text colour. */
.cohort-seal{
  display:flex; align-items:center; gap:clamp(8px,.9vw,16px);
  margin-left:auto; margin-right:clamp(14px,2vw,40px);
}
.cohort-seal.is-hidden{display:none}
.cohort-disc{
  display:flex; align-items:center; justify-content:center;
  width:clamp(26px,2.5vw,44px); height:clamp(26px,2.5vw,44px);
  border-radius:50%;
  border:2px solid var(--cohort, var(--antique-gold));
  color:var(--cohort, var(--antique-gold));
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.75rem,1.1vw,1.15rem); letter-spacing:0;
  line-height:1;
}
.cohort-seal.is-filled .cohort-disc,
.title-card-cohort.is-filled .cohort-disc{
  background:var(--cohort, var(--antique-gold));
  color:var(--blackened-steel,#1a1c1d);
}
.cohort-name{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.6rem,.85vw,1rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cohort, var(--antique-gold));
}
.title-card-cohort{
  display:inline-flex; align-items:center; gap:clamp(10px,1.1vw,20px);
  margin:clamp(10px,1.6vh,24px) auto 0;
  padding:clamp(6px,.9vh,12px) clamp(14px,1.4vw,26px);
  border:1px solid var(--cohort, var(--antique-gold));
  border-radius:999px;
}
.title-card-cohort .cohort-disc{
  width:clamp(30px,2.8vw,52px); height:clamp(30px,2.8vw,52px);
  font-size:clamp(.85rem,1.3vw,1.4rem);
}
.title-card-cohort .cohort-name{font-size:clamp(.7rem,1.05vw,1.3rem)}

/* ---------- Learning targets ----------
   A set, not a sequence. No numbering, just a gold rule per statement. */
.target-list,
.criteria-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(10px,1.8vh,24px);
}
.target-item{
  padding:clamp(10px,1.8vh,24px) clamp(16px,2vw,36px);
  background:linear-gradient(90deg, rgba(245,240,231,.07), rgba(245,240,231,.015));
  border-left:clamp(5px,.5vw,10px) solid var(--antique-gold);
}
.target-text{
  display:block;
  font-family:var(--body);
  font-size:clamp(1.05rem,2.1vw,2.7rem); line-height:1.3;
  color:var(--clean-paper); text-wrap:pretty;
}
.target-list.is-dense .target-text{font-size:clamp(.92rem,1.65vw,2.05rem)}
.target-list.is-dense{gap:clamp(7px,1.2vh,16px)}
.target-list.is-tight .target-text{font-size:clamp(.8rem,1.32vw,1.62rem); line-height:1.24}
.target-list.is-tight{gap:clamp(5px,.85vh,11px)}
.target-list.is-tight .target-item{padding:clamp(7px,1.15vh,15px) clamp(13px,1.6vw,28px)}

/* ---------- Success criteria ----------
   Things you tick off, so they get a checkbox. The mark is drawn with
   borders rather than a glyph, so no font or encoding can break it. */
.criteria-item{
  display:flex; align-items:flex-start; gap:clamp(14px,1.7vw,32px);
  padding:clamp(10px,1.8vh,24px) clamp(16px,2vw,36px);
  background:linear-gradient(90deg, rgba(245,240,231,.07), rgba(245,240,231,.015));
  border-left:clamp(5px,.5vw,10px) solid var(--burnished-bronze);
}
.criteria-mark{
  flex:0 0 auto; position:relative;
  width:clamp(22px,1.9vw,42px); height:clamp(22px,1.9vw,42px);
  margin-top:.12em;
  border:2px solid var(--antique-gold);
  background:rgba(201,164,106,.1);
}
.criteria-mark::after{
  content:""; position:absolute;
  left:28%; top:12%; width:34%; height:56%;
  border-right:.16em solid var(--antique-gold);
  border-bottom:.16em solid var(--antique-gold);
  transform:rotate(42deg);
}
.criteria-text{
  font-family:var(--body);
  font-size:clamp(1.05rem,2.1vw,2.7rem); line-height:1.3;
  color:var(--clean-paper); text-wrap:pretty;
}
.criteria-list.is-dense .criteria-text{font-size:clamp(.92rem,1.65vw,2.05rem)}
.criteria-list.is-dense{gap:clamp(7px,1.2vh,16px)}
.criteria-list.is-tight .criteria-text{font-size:clamp(.8rem,1.32vw,1.62rem); line-height:1.24}
.criteria-list.is-tight{gap:clamp(5px,.85vh,11px)}
.criteria-list.is-tight .criteria-item{padding:clamp(7px,1.15vh,15px) clamp(13px,1.6vw,28px)}
.criteria-list.is-tight .criteria-mark{width:clamp(17px,1.45vw,30px); height:clamp(17px,1.45vw,30px)}

/* The AP theme carried over from the lesson file, e.g. Governance. */
.criteria-body{display:block}
.entry-label{
  display:block;
  font-family:var(--ui); font-weight:900;
  font-size:clamp(.54rem,.8vw,.95rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-sandstone); margin-bottom:.45em;
}

/* ---------- Upcoming topics ---------- */
.ahead-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(9px,1.6vh,20px);
}
.ahead-item{
  display:grid;
  /* Wide enough that a two-day block ('Aug 10 & 11') stays on one line. */
  grid-template-columns:clamp(104px,12.5vw,244px) 1fr;
  align-items:center; gap:clamp(14px,1.9vw,36px);
  padding:clamp(10px,1.7vh,24px) clamp(14px,1.8vw,32px);
  background:linear-gradient(90deg, rgba(245,240,231,.06), rgba(245,240,231,.012));
  border-left:clamp(4px,.4vw,8px) solid var(--aged-iron);
}
.ahead-when{font-family:var(--ui); text-align:center; line-height:1.1}
.ahead-weekday{
  font-weight:900; font-size:clamp(.6rem,.92vw,1.1rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-sandstone);
}
.ahead-daynum{
  font-weight:900; font-size:clamp(.95rem,1.55vw,1.9rem);
  color:var(--warm-paper); margin-top:.3em; font-variant-numeric:tabular-nums;
}
.ahead-topic{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(1.05rem,2.1vw,2.6rem); line-height:1.12; color:var(--warm-paper);
}
.ahead-unit{
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.6rem,.92vw,1.1rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-sandstone); margin-top:.45em;
}

/* ---------- Due dates ---------- */
.due-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(8px,1.5vh,18px);
}
.due-item{
  display:grid;
  grid-template-columns:clamp(88px,9vw,170px) 1fr auto;
  align-items:center; gap:clamp(14px,2vw,38px);
  padding:clamp(10px,1.6vh,22px) clamp(14px,1.8vw,32px);
  background:linear-gradient(90deg, rgba(245,240,231,.07), rgba(245,240,231,.015));
  border-left:clamp(4px,.4vw,8px) solid var(--aged-iron);
}
.due-item.is-urgent{
  border-left-color:var(--alarm);
  background:linear-gradient(90deg, rgba(196,85,59,.2), rgba(245,240,231,.02));
}
.due-item.is-soon{border-left-color:var(--antique-gold)}
.due-when{font-family:var(--ui); text-align:center; line-height:1}
.due-weekday{
  font-weight:900; font-size:clamp(.6rem,.92vw,1.1rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-sandstone);
}
.due-daynum{
  font-weight:900; font-size:clamp(1.5rem,3vw,3.6rem);
  color:var(--warm-paper); margin-top:.16em; font-variant-numeric:tabular-nums;
}
.due-tbd{
  font-weight:900; font-size:clamp(1rem,1.9vw,2.2rem);
  letter-spacing:.14em; color:var(--muted-sandstone);
}
.due-month{
  font-weight:800; font-size:clamp(.55rem,.85vw,1rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--aged-iron);
  margin-top:.3em;
}

/* Two cohort sittings in one date block. An assessment that names both a
   green and a silver date shows both, each with its own seal, rather than
   letting one date stand in for two rooms that never meet together. Colour
   is never the only signal here either: the letter and the filled or open
   disc carry it on a washed-out projector. */
.due-when.is-split{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(4px,.6vh,9px);
}
.due-split-row{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(5px,.55vw,10px);
}
.due-split-row .cohort-disc{
  width:clamp(20px,1.7vw,32px); height:clamp(20px,1.7vw,32px);
  font-size:clamp(.6rem,.8vw,.92rem); flex:none;
}
.due-split-row .cohort-disc.is-filled{
  background:var(--cohort, var(--antique-gold));
  color:var(--blackened-steel,#1a1c1d);
}
.due-split-weekday{
  font-weight:900; font-size:clamp(.5rem,.75vw,.9rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-sandstone);
}
.due-split-daynum{
  font-weight:900; font-size:clamp(1rem,1.75vw,2.1rem);
  color:var(--warm-paper); font-variant-numeric:tabular-nums; line-height:1;
}
.due-when.is-split .due-month{margin-top:.15em}
.due-body{min-width:0}
.due-title{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(1rem,2vw,2.5rem); line-height:1.12; color:var(--warm-paper);
}
.due-detail{
  font-family:var(--ui); font-weight:500;
  font-size:clamp(.72rem,1.15vw,1.4rem); line-height:1.35;
  color:#cbc3b6; margin-top:.35em;
}
.due-count{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(6px,.6vw,12px); flex-wrap:wrap;
}

/* ---------- Reminders ---------- */
.reminder-grid{
  display:grid; gap:clamp(12px,2vh,26px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(240px,26vw,460px),1fr));
}
.reminder-card{
  padding:clamp(14px,2.4vh,32px) clamp(16px,2vw,36px);
  background:linear-gradient(180deg, rgba(245,240,231,.075), rgba(245,240,231,.02));
  border:1px solid var(--hairline);
  border-top:clamp(4px,.4vw,8px) solid var(--burnished-bronze);
}
.reminder-title{
  font-family:var(--ui); font-weight:900;
  font-size:clamp(.72rem,1.2vw,1.5rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--antique-gold);
}
.reminder-detail{
  font-family:var(--body);
  font-size:clamp(.92rem,1.6vw,2rem); line-height:1.3;
  color:var(--warm-paper); margin-top:.6em;
}

/* ---------- Empty / error states ---------- */
.state-note{
  font-family:var(--ui); font-weight:600;
  font-size:clamp(.9rem,1.5vw,1.8rem);
  color:var(--muted-sandstone); margin-top:clamp(12px,2vh,26px);
}
.state-note code{
  font-family:'SFMono-Regular',Consolas,monospace;
  background:rgba(201,164,106,.14); border:1px solid var(--hairline);
  padding:.1em .45em; color:var(--antique-gold);
}

/* ---------- Footer ---------- */
.board-foot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:2vw;
  padding:clamp(8px,1.3vh,20px) clamp(20px,3.4vw,64px);
  border-top:1px solid var(--hairline);
  background:linear-gradient(0deg, rgba(0,0,0,.32), transparent);
  font-family:var(--ui);
}
.dots{display:flex; align-items:center; gap:clamp(7px,.75vw,14px)}
.dot{
  width:clamp(8px,.72vw,14px); height:clamp(8px,.72vw,14px);
  border-radius:50%; border:1px solid var(--aged-iron);
  background:transparent; padding:0; cursor:pointer;
}
.dot.is-active{background:var(--antique-gold); border-color:var(--antique-gold); box-shadow:0 0 10px rgba(201,164,106,.6)}
.foot-meta{
  font-weight:800; font-size:clamp(.56rem,.86vw,1.02rem);
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-sandstone);
  text-align:right;
}
.foot-meta .exam-count{color:var(--antique-gold)}
.paused-flag{
  display:none; margin-right:.9em; color:var(--alarm);
}
.board.is-paused .paused-flag{display:inline}

/* ---------- Help overlay ---------- */
.help-hint{
  position:fixed; left:50%; bottom:clamp(52px,7vh,90px); transform:translateX(-50%);
  z-index:5;
  font-family:var(--ui); font-weight:800;
  font-size:clamp(.56rem,.8vw,.94rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-sandstone);
  background:rgba(26,28,29,.86); border:1px solid var(--hairline);
  padding:.6em 1.2em;
  transition:opacity .5s ease;
}
.help-hint.is-hidden{opacity:0; pointer-events:none}

.help-overlay{
  position:fixed; inset:0; z-index:20;
  display:none; align-items:center; justify-content:center;
  background:rgba(16,17,18,.94);
}
.help-overlay.is-open{display:flex}
.help-card{
  width:min(720px,86vw);
  background:var(--charcoal-steel);
  border:1px solid var(--hairline);
  border-top:8px solid var(--antique-gold);
  padding:clamp(22px,4vh,44px) clamp(24px,4vw,54px);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.help-card h2{
  font-family:var(--serif-title); font-weight:900;
  font-size:clamp(1.3rem,2.6vw,2.4rem); margin:0 0 .6em; color:var(--antique-gold);
}
.help-card dl{
  display:grid; grid-template-columns:auto 1fr; gap:.7em 1.4em;
  margin:0; font-family:var(--ui); font-size:clamp(.8rem,1.1vw,1.05rem);
}
.help-card dt{
  font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warm-paper); white-space:nowrap;
}
.help-card dd{margin:0; color:#cbc3b6}
.help-card p{
  font-family:var(--ui); font-size:clamp(.72rem,1vw,.95rem);
  color:var(--muted-sandstone); margin:1.4em 0 0; line-height:1.6;
}
.help-card code{
  font-family:'SFMono-Regular',Consolas,monospace;
  background:rgba(201,164,106,.14); padding:.1em .45em; color:var(--antique-gold);
}

/* =========================================================
   PAGE MODE

   Everything above sizes itself against the viewport, which is right
   for a projector and wrong for a phone: on a 390px screen those vw
   clamps bottom out and the board becomes a tiny slideshow nobody can
   scroll. Below 900px the same markup becomes an ordinary page, every
   panel stacked and readable, type set in rem so it stops chasing the
   viewport. announcements.html stops the timer at this same width.
   ========================================================= */
@media (max-width:900px){
  html,body{height:auto}
  body{overflow:auto}
  body.is-idle{cursor:auto}

  .board{height:auto; min-height:100vh}

  /* Kiosk furniture has no meaning on a page you scroll. */
  .timing-bar,
  .board-foot .dots,
  .help-hint{display:none}

  .masthead{
    position:sticky; top:0; z-index:10;
    background:linear-gradient(180deg,#1e2122,#191b1c);
    padding:14px 20px;
  }
  /* The wordmark already carries the globe, and the full lockup sits just
     below on the title card, so the phone masthead drops the separate globe
     and keeps the clock on screen. */
  body .masthead .masthead-wordmark{width:150px; height:24px}
  .masthead-course{font-size:.56rem; letter-spacing:.18em}
  .masthead-brand img{display:none}
  .clock-time{font-size:1.35rem}
  .clock-date{font-size:.62rem; letter-spacing:.1em}

  .stage{flex:0 0 auto; overflow:visible}

  /* Each panel becomes a section of the page instead of a slide. */
  .slide{
    position:static;
    opacity:1; visibility:visible; transform:none; transition:none;
    padding:34px 20px 38px;
    border-bottom:1px solid rgba(201,164,106,.16);
  }
  .slide:last-of-type{border-bottom:0}

  .slide-eyebrow{font-size:.66rem; letter-spacing:.24em; margin-bottom:10px}
  .slide-title{font-size:1.9rem; margin-bottom:18px}

  /* The title card is the page header, not a full screen hero. */
  .slide.slide-title-card{text-align:left; align-items:stretch; padding-top:28px}
  .slide-title-card .slide-eyebrow{justify-content:flex-start}
  .slide-title-card .slide-eyebrow::before{display:none}
  .slide-title-card .slide-eyebrow::after{flex:1 1 auto; width:auto}
  .title-card-logo{width:100%; max-width:440px; margin:0 0 18px}
  .title-card-day{font-size:.95rem; letter-spacing:.2em; margin:0}
  .title-card-topic{font-size:2rem; margin:10px 0 0; max-width:none; text-align:left}
  .title-card-unit{font-size:.68rem; margin-top:12px}

  .panel{padding:20px 18px; box-shadow:none}
  .panel-text{font-size:1.05rem}
  .panel-foot{margin-top:16px}
  .chip{font-size:.6rem; padding:.5em .9em}

  /* Lists: one readable size, no density tiers, they were for a wall. */
  .target-list,.criteria-list,.homework-list,
  .target-list.is-dense,.criteria-list.is-dense,.homework-list.is-dense,
  .target-list.is-tight,.criteria-list.is-tight{gap:12px}

  .target-item,.criteria-item,.homework-item,
  .target-list.is-tight .target-item,.criteria-list.is-tight .criteria-item{
    padding:14px 16px;
  }
  .target-text,.criteria-text,.homework-text,
  .target-list.is-dense .target-text,.criteria-list.is-dense .criteria-text,
  .homework-list.is-dense .homework-text,
  .target-list.is-tight .target-text,.criteria-list.is-tight .criteria-text{
    font-size:1rem; line-height:1.45;
  }
  .criteria-mark,
  .criteria-list.is-tight .criteria-mark{width:20px; height:20px; margin-top:.1em}
  .module-list,.module-list.is-single{column-count:1}
  .module-item{padding:12px 14px; margin-bottom:10px}
  .module-num,.module-list.is-single .module-num,
  .module-name,.module-list.is-single .module-name{font-size:1rem; line-height:1.4}
  .homework-item::before{width:.5rem; height:.5rem; margin-top:.42rem}
  .reading-item,
  .homework-list.is-dense .reading-item{font-size:.86rem; line-height:1.4}
  .reading-tone{font-size:.55rem}
  .homework-note{font-size:.82rem}
  .cohort-seal{margin-right:10px; gap:7px}
  .cohort-disc{width:24px; height:24px; font-size:.7rem}
  .cohort-name{font-size:.55rem; letter-spacing:.16em}
  .title-card-cohort{padding:5px 12px; gap:9px}
  .title-card-cohort .cohort-disc{width:26px; height:26px; font-size:.78rem}
  .title-card-cohort .cohort-name{font-size:.62rem}
  .entry-label{font-size:.58rem; letter-spacing:.2em}

  /* Dated rows go to two lines rather than squeezing three columns. */
  .ahead-item{grid-template-columns:74px 1fr; gap:14px; padding:13px 15px}
  .ahead-weekday{font-size:.58rem; letter-spacing:.14em}
  .ahead-daynum{font-size:.92rem}
  .ahead-topic{font-size:1.05rem}
  .ahead-unit{font-size:.58rem; margin-top:.35em}

  .due-item{grid-template-columns:70px 1fr; row-gap:10px; padding:13px 15px}
  .due-count{grid-column:2; justify-content:flex-start}
  .due-weekday{font-size:.56rem}
  .due-daynum{font-size:1.5rem}
  .due-month{font-size:.52rem}
  .due-tbd{font-size:1rem}
  .due-title{font-size:1.05rem}
  .due-detail{font-size:.8rem}

  .reminder-grid{grid-template-columns:1fr; gap:12px}
  .reminder-title{font-size:.66rem}
  .reminder-detail{font-size:1rem}

  .board-foot{
    justify-content:center; padding:18px 20px 26px;
    border-top:1px solid rgba(201,164,106,.16);
  }
  .foot-meta{font-size:.6rem; text-align:center; letter-spacing:.16em}
}

/* Phones proper: the date column can go too. */
@media (max-width:420px){
  .slide-title{font-size:1.65rem}
  .title-card-topic{font-size:1.7rem}
  .ahead-item,.due-item{grid-template-columns:60px 1fr; gap:12px}
}