/* ===========================================================================
   teaching.css — the teaching page.

   The page is a lecture board, so it is built like one: not a sheet of slate
   but a rack of PANELS, each with its aluminium rail top and bottom, the way
   a real board slides. You have walked in after the lesson: the panels are
   already written on, older ones sit further back in the rack, and the
   erasures of previous lessons are still faintly under the writing.

   Nothing printed appears anywhere on this page. A teaching page that turned
   into a typeset sheet would be a page about teaching; this one is the board.
   The one sheet of paper on it is section IV, the Persian literature leaf —
   and that is a manuscript someone pinned to the wall, not print. It keeps
   its own stylesheet, leaf.css.
   =========================================================================== */

:root {
  --rail:        #8b9089;   /* the anodised strip a board hangs from */
  --rail-lift:   #b6bab2;
  --rail-deep:   #5a5f5a;
  --panel:       #151a17;
  /* The panels are lifted off the board, so --chalk-faint (floored at 4.5:1
     against #121614) lands at 4.35:1 here. This is that floor, re-measured
     against the panel. */
  --faint-on-panel: #7c837d;
  --panel-back:  #10130f;
  --measure:     64ch;
}

body { background: var(--board-deep); }

/* the wall behind the rack */
.room {
  min-block-size: 100svh;
  padding-block: clamp(1.6rem, 4vw, 3rem) 0;
  background:
    radial-gradient(74% 44% at 50% 0%, rgb(214 226 218 / .055), transparent 70%),
    linear-gradient(180deg, #171b18, #0d100e 62%);
}
.frame { max-inline-size: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.4rem); }

.back {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase;
}
.back a { color: var(--chalk-faint); text-decoration: none; }
.back a:hover { color: var(--chalk-soft); }

/* ------------------------------------------------------------- the heading
   Chalked straight onto the wall above the rack, not onto a panel. */
.masthead { padding-block: clamp(2.6rem, 7vw, 4.6rem) clamp(1.6rem, 4vw, 2.6rem); }
.masthead h1 {
  margin: 0; font-weight: 400; line-height: 1.02;
  font-size: clamp(2.5rem, 8vw, 4.4rem); color: var(--chalk);
  filter: url(#chalk-text);
}
.masthead h1 .amp { color: var(--chalk-ochre); font-style: italic; }
.masthead .lede {
  margin: 1.3rem 0 0; max-inline-size: 52ch;
  color: var(--chalk-soft); font-size: clamp(1rem, .5vw + .9rem, 1.16rem); line-height: 1.62;
}
.masthead .lede em { color: var(--chalk); font-style: italic; }

/* ---------------------------------------------------------- the tally
   Chalk figures, the way a total gets written in the corner of a board. */
.tally {
  display: grid; gap: 1.2rem clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  max-inline-size: 58rem;
  margin-block-start: clamp(2rem, 5vw, 3rem);
  padding-block-start: 1.4rem; border-block-start: 1px solid var(--chalk-hair);
}
.tally b {
  display: block; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--chalk-ochre); line-height: 1; filter: url(#chalk-text);
}
.tally span {
  display: block; margin-block-start: .45rem; max-inline-size: 18ch;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint-on-panel); line-height: 1.5;
}

/* =============================================================== the rack */
.rack { margin-block: clamp(2.6rem, 7vw, 4.4rem) 0; display: grid; gap: clamp(2rem, 5vw, 3.4rem); }

.panel {
  position: relative;
  border-radius: 2px;
  background:
    radial-gradient(60% 44% at 22% 14%, rgb(214 226 218 / .05), transparent 68%),
    linear-gradient(168deg, var(--panel), var(--panel-back));
  box-shadow: 0 22px 48px -28px #000, inset 0 0 0 1px rgb(255 255 255 / .022);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.2rem, 4vw, 3rem) clamp(2.2rem, 5vw, 3.4rem);
  overflow: clip;
}
/* the rails. A board hangs from one and rests in the other. */
.panel::before, .panel::after {
  content: ''; position: absolute; inset-inline: 0; block-size: 7px;
  background: linear-gradient(180deg, var(--rail-lift), var(--rail) 42%, var(--rail-deep));
  opacity: .5;
}
.panel::before { inset-block-start: 0; }
.panel::after  { inset-block-end: 0; opacity: .34; }

/* erasures: what the last lesson left behind, under everything */
.panel .smudge {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: rgb(230 227 216 / .05); filter: blur(22px);
}

.panel > * { position: relative; }

.panel h2 {
  margin: 0 0 .5rem; font-weight: 400; line-height: 1.12;
  font-size: clamp(1.55rem, 3.4vw, 2.2rem); color: var(--chalk);
  filter: url(#chalk-text);
}
.panel .where {
  margin: 0 0 2.2rem; font-family: var(--sans); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint-on-panel);
}
.panel .num {
  position: absolute; inset-block-start: clamp(1.5rem, 4vw, 2.4rem);
  inset-inline-end: clamp(1.2rem, 4vw, 3rem);
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1;
  color: rgb(230 227 216 / .07); filter: url(#chalk-text);
}

/* ------------------------------------------------------------ the register
   Every entry keeps its years in a gutter, the way a register does, so the
   eight years at Allameh Helli read as eight years and not as one line. */
.register { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.9rem; }
.register > li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.8rem; align-items: start;
}
.register .when {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  color: var(--chalk-ochre); padding-block-start: .42rem; white-space: nowrap;
}
.register .what { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--chalk); }
.register .what a { color: inherit; text-decoration-color: var(--chalk-hair); text-underline-offset: .22em; }
.register .what a:hover { color: var(--chalk-ochre); text-decoration-color: currentColor; }
.register .detail {
  margin: .55rem 0 0; max-inline-size: var(--measure);
  color: var(--chalk-soft); font-size: .97rem; line-height: 1.62;
}
.register .detail b { font-weight: 400; color: var(--chalk); }

/* =============================================================== the coda */
.coda {
  margin-block: clamp(3rem, 8vw, 5rem) 0;
  padding-block: clamp(2.4rem, 6vw, 3.6rem) clamp(3.4rem, 9vw, 6rem);
  border-block-start: 1px solid var(--chalk-hair);
}
.coda p {
  margin: 0 0 1.1rem; max-inline-size: var(--measure);
  color: var(--chalk-soft); font-size: 1.05rem; line-height: 1.68;
}
.coda p b { font-weight: 400; color: var(--chalk); }
.coda a { color: var(--chalk-ochre); text-decoration-color: rgb(216 178 94 / .45); text-underline-offset: .22em; }
.coda a:hover { text-decoration-color: currentColor; }

.onward {
  display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; margin-block-start: 2rem;
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
.onward a {
  color: var(--chalk-soft); text-decoration: none;
  border: 1px solid var(--chalk-hair); border-radius: 2px; padding: .62em 1.1em;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.onward a:hover { color: var(--chalk); border-color: var(--chalk-soft); }

@media (max-width: 640px) {
  .register > li { grid-template-columns: 1fr; gap: .3rem; }
  .register .when { padding-block-start: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .panel { view-transition-name: none; }
}