/* ==========================================================================
   האוניברסיטה — stylesheet
   Dark-first editorial. One file, no framework.
   Palette lives on :root; the light variant overrides only the tokens.
   ========================================================================== */

:root {
  --bg:        #0b0b0d;
  --bg-2:      #101013;
  --surface:   rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --line:      rgba(255, 255, 255, .10);
  --line-2:    rgba(255, 255, 255, .18);
  --ink:       #f5f2ec;
  --ink-2:     #c3bdb2;
  --muted:     #85807a;
  --accent:    #ffb020;
  --accent-2:  #ff6a3d;
  --accent-dim: rgba(255, 176, 32, .14);
  --on-accent: #14110a;
  --display: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif:   "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --wrap: 78rem;
  --read: 40rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f2efe8;
    --bg-2:      #eae6dd;
    --surface:   rgba(0, 0, 0, .028);
    --surface-2: #ffffff;
    --line:      rgba(0, 0, 0, .12);
    --line-2:    rgba(0, 0, 0, .22);
    --ink:       #0e0e10;
    --ink-2:     #3d3a35;
    --muted:     #6f6a63;
    --accent:    #a85c00;
    --accent-2:  #c2410c;
    --accent-dim: rgba(168, 92, 0, .10);
    --on-accent: #fffaf0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient light behind everything */
.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 88% -8%, rgba(255, 176, 32, .13), transparent 62%),
    radial-gradient(42rem 30rem at 6% 4%, rgba(255, 106, 61, .10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 42%);
}
@media (prefers-color-scheme: light) {
  .glow {
    background:
      radial-gradient(58rem 34rem at 88% -8%, rgba(255, 176, 32, .28), transparent 62%),
      radial-gradient(42rem 30rem at 6% 4%, rgba(255, 106, 61, .14), transparent 60%),
      linear-gradient(180deg, var(--bg-2), var(--bg) 42%);
  }
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.035em; line-height: 1.02; }
.muted { color: var(--muted); }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem 7rem; }

.kicker {
  margin: 0 0 1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase;
}
.kicker i { font-style: normal; opacity: .45; margin: 0 .35rem; }

.lede { color: var(--ink-2); font-size: 1.08rem; line-height: 1.65; margin: 1rem 0 0; max-width: 40rem; }

/* ------------------------------------------------------------- masthead -- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  max-width: var(--wrap); margin: 0 auto; padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 900; font-size: 1.1rem; letter-spacing: -.03em;
}
.mark { width: 1.35rem; height: 1.35rem; flex: none; display: block; }
.topnav { display: flex; gap: 1.5rem; font-size: .93rem; font-weight: 500; }
.topnav a { color: var(--muted); }
.topnav a:hover { color: var(--ink); }
.topnav a.here { color: var(--ink); }

/* ----------------------------------------------------------------- hero -- */

.hero { padding: 5.5rem 0 3.5rem; }
.hero h1 {
  font-size: clamp(3.4rem, 13vw, 8.5rem);
  background: linear-gradient(150deg, var(--ink) 30%, var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { font-size: 1.2rem; max-width: 34rem; }

.stats {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 2.75rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--muted); letter-spacing: .02em;
}
.stats b {
  display: block; font-size: 2rem; font-weight: 900;
  color: var(--ink); letter-spacing: -.04em; line-height: 1;
  margin-bottom: .3rem;
}

/* -------------------------------------------------------- faculty cards -- */

.facs { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1px;
        background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }

.fac {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  min-height: 15rem; padding: 1.9rem 1.6rem 1.4rem;
  background: var(--bg);
  transition: background .2s ease;
}
.fac::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.fac:hover { background: var(--surface-2); }
.fac.open:hover::before { transform: scaleX(1); }
.fac.soon { opacity: .5; }

.fac-n {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fac-name { display: block; font-size: 1.85rem; font-weight: 900; letter-spacing: -.04em; }
.fac-blurb { display: block; color: var(--muted); font-size: .95rem; line-height: 1.55; margin-top: .35rem; }
.fac-foot { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: .9rem; }
.fac-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }

.bar { flex: 1; height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar.wide { min-width: 7rem; max-width: 16rem; flex: 1; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px;
         background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s ease; }

/* --------------------------------------------------------------- crumbs -- */

.crumbs { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
          padding: 2.4rem 0 2rem; font-size: .84rem; color: var(--muted); }
.crumbs i { font-style: normal; opacity: .4; }
.crumbs a:hover { color: var(--ink); }

/* The way back. Every screen but the campus carries one, so a reader who
   opened a unit from a link — or wandered in from another unit — always has
   a door out that is not the browser chrome. */
.back { display: inline-flex; align-items: center; gap: .35rem;
        padding: .3rem .75rem; margin-inline-end: .35rem;
        border: 1px solid var(--line); border-radius: 999px;
        color: var(--muted); white-space: nowrap; }
.back:hover { color: var(--ink); border-color: var(--ink); }
.back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.back-row { padding-bottom: 0; }

/* -------------------------------------------------------- faculty page -- */

.fac-hero { padding-bottom: 2.4rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem; }
.fac-hero h1 { font-size: clamp(2.8rem, 9vw, 5.5rem); }
.fac-bar { display: flex; align-items: center; gap: 1.1rem; margin-top: 2rem; flex-wrap: wrap; }
.progress-label { font-size: .84rem; color: var(--muted); white-space: nowrap; }

.btn {
  display: inline-block; padding: .55rem 1.15rem; border-radius: 99px;
  font-family: var(--display); font-size: .88rem; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); }

.era { margin-bottom: 3.5rem; }
.era-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.era-head h2, .era-head h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .1em; text-transform: none; }
.era-head span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.era-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* A faculty split into parts (music): the part heading sits above its types. */
.part-head { display: flex; align-items: baseline; gap: 1rem; margin: 4.5rem 0 2rem; }
.part-head:first-child { margin-top: 0; }
.part-head h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.part-head span { font-size: .85rem; color: var(--muted); white-space: nowrap; }
/* A part's own one-line intro, when faculties.json gives it one. Pulled up
   into the part header's bottom margin so the two read as one block. */
.part-lede {
  margin: -1.2rem 0 2.4rem; max-width: 44rem;
  color: var(--ink-2); font-size: 1.02rem; line-height: 1.65;
}

/* ------------------------------------------------------------ unit rows -- */

.rows { display: flex; flex-direction: column; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr auto auto 1.1rem;
  align-items: center; gap: 1.1rem;
  padding: 1.15rem .9rem;
  border-bottom: 1px solid var(--line);
  transition: background .16s ease, padding .16s ease;
}
.row:first-child { border-top: 1px solid var(--line); }
.row:hover { background: var(--surface); }
.row:hover .row-n { color: var(--accent); }
.row:hover .row-title { color: var(--accent); }

.row-n { font-size: .8rem; font-weight: 700; color: var(--muted);
         font-variant-numeric: tabular-nums; transition: color .16s ease; }
.row-main { min-width: 0; }
.row-title { display: block; font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em;
             line-height: 1.25; transition: color .16s ease; }
.row-why { display: block; color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: .25rem;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-meta { text-align: left; white-space: nowrap; }
.row-year { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.row-by { display: block; font-size: .8rem; color: var(--muted); max-width: 13.5rem;
          overflow: hidden; text-overflow: ellipsis; }
.row-tag { font-size: .72rem; color: var(--accent); background: var(--accent-dim);
           border-radius: 99px; padding: .22rem .7rem; white-space: nowrap; }
.row-tick { width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--line-2); border-radius: 50%;
            position: relative; flex: none; }
.row.is-read .row-tick { background: var(--accent); border-color: var(--accent); }
.row.is-read .row-tick::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  clip-path: polygon(21% 52%, 41% 71%, 79% 30%, 86% 38%, 41% 84%, 14% 59%);
}
.row.is-read .row-title { color: var(--muted); }

/* ------------------------------------------------------------ unit page -- */

.unit-page { max-width: 52rem; }

.unit-head { padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.unit-head h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); }
.unit-sub { margin: 1rem 0 0; color: var(--ink-2); font-size: 1rem; font-variant-numeric: tabular-nums; }
.unit-sub i { font-style: normal; opacity: .4; margin: 0 .3rem; }

.read-toggle {
  margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: 99px;
  padding: .45rem 1rem .45rem .85rem; cursor: pointer;
  font-family: var(--display); font-size: .87rem; font-weight: 600; color: var(--muted);
}
.read-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.read-toggle .box { width: .95rem; height: .95rem; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.read-toggle.is-read { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.read-toggle.is-read .box { background: var(--accent); border-color: var(--accent); }
.read-toggle.is-read .box::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  clip-path: polygon(21% 52%, 41% 71%, 79% 30%, 86% 38%, 41% 84%, 14% 59%);
}

.prose { font-family: var(--serif); font-size: 1.22rem; line-height: 1.8; color: var(--ink); max-width: var(--read); }
.prose p { margin: 0 0 1.4rem; }
/* Emphasis in a serif measure: weight alone, no colour. Frank Ruhl
   Libre has no 600, so 700 is the first step that actually shows. */
.prose strong { font-weight: 700; color: var(--ink); }
.prose p:first-child::first-letter {
  float: right; font-size: 3.6rem; line-height: .82; font-weight: 900;
  margin: .32rem 0 0 .4rem; color: var(--accent);
}

.why {
  margin: 3rem 0; padding: 1.8rem 1.9rem; position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent); border-radius: 14px;
}
.why h2 { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--accent); margin-bottom: .6rem; }
.why p { margin: 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.65; }

.facts { margin: 3rem 0; }
.facts h2, .syllabus h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px;
            margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
/* the outline lives on each cell, so a half-empty last row reads as empty
   space rather than as a filled cell with no content */
.facts dl > div { background: var(--bg); padding: 1rem 1.1rem; box-shadow: 0 0 0 1px var(--line); }
.facts dt { font-size: .72rem; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; }
.facts dd { margin: 0; font-size: .98rem; line-height: 1.45; font-weight: 500; }

.syllabus { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.syl { margin-top: 2rem; }
.syl h3 { display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 700;
          letter-spacing: .14em; color: var(--muted); margin-bottom: .7rem; }
.syl h3 i { font-style: normal; color: var(--accent); font-size: .85rem; }
.syl ul { list-style: none; margin: 0; padding: 0; }
.syl li { padding: .85rem 1rem; border-radius: 12px; border: 1px solid transparent; transition: all .16s ease; }
.syl li:hover { background: var(--surface); border-color: var(--line); }
.syl li a { font-weight: 700; font-size: 1.02rem; border-bottom: 2px solid var(--accent-dim); }
.syl li:hover a { border-bottom-color: var(--accent); }
.syl li span { display: block; color: var(--muted); font-size: .89rem; line-height: 1.5; margin-top: .25rem; }

.pagers { display: flex; gap: .8rem; margin-top: 4rem; }
.pager { flex: 1; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line);
         border-radius: 14px; transition: border-color .16s ease, background .16s ease; }
.pager:hover { border-color: var(--accent); background: var(--surface-2); }
.pager span { display: block; font-size: .74rem; letter-spacing: .1em; color: var(--muted); margin-bottom: .25rem; }
.pager b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.pager.next { text-align: left; }

/* ----------------------------------------------------------- flashcards -- */

.cards-page { max-width: 46rem; }
.cards-head { text-align: center; margin-bottom: 2rem; }
.cards-head h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.cards-head .lede { margin-inline: auto; }
.counter { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; margin-top: 1.2rem; }

.flashcard { position: relative; min-height: 17rem; cursor: pointer; perspective: 1400px; outline: none; }
.flashcard .face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem; text-align: center;
  padding: 2.4rem 2rem; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface-2); backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.4, .2, .2, 1);
}
.flashcard .front { transform: rotateY(0); }
.flashcard .back { transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color: transparent; }
.flashcard.flipped .front { transform: rotateY(-180deg); }
.flashcard.flipped .back { transform: rotateY(0); }
.flashcard .hint { font-size: .74rem; letter-spacing: .14em; color: var(--accent); }
.flashcard .q { font-size: 2.3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.flashcard .a { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; white-space: pre-line; }
.flashcard .flip-hint { font-size: .76rem; color: var(--muted); margin-top: .5rem; }
.card-controls { display: flex; gap: .6rem; justify-content: center; margin-top: 1.6rem; }

/* --------------------------------------------------------------- search -- */

.search-page { max-width: 58rem; }
.search-head { padding: 3rem 0 1.5rem; }
.search-head h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
#q {
  width: 100%; margin-top: 1.6rem; padding: 1rem 1.3rem;
  font-family: var(--display); font-size: 1.15rem; font-weight: 500;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 14px;
}
#q::placeholder { color: var(--muted); }
#q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
#search-status { margin: 1rem 0 1.5rem; font-size: .88rem; }

/* --------------------------------------------------------------- footer -- */

.footer { border-top: 1px solid var(--line); margin-top: 4rem; }
.footer-in { max-width: var(--wrap); margin: 0 auto; padding: 2.5rem 1.5rem 4rem;
             color: var(--muted); font-size: .86rem; }
.footer-mark { display: block; width: 1.6rem; height: 3px; border-radius: 99px; margin-bottom: 1.1rem;
               background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.footer-in .mark { width: 1.2rem; height: 1.2rem; }
.footer p { margin: 0 0 .35rem; }

/* ----------------------------------------------------------------- misc -- */

/* --------------------------------------------------------------- phones --
   The masthead is one line at every width. It had been overflowing below
   ~500px since before the account slot existed — body's overflow-x: hidden
   was clipping it quietly — so the nav tightens in two steps, and under
   28rem the wordmark keeps its glyph and drops its text. The glyph is still
   the link home, and "קמפוס" is still in the nav, so nothing becomes
   unreachable.                                                              */

@media (max-width: 760px) {
  .masthead-in { padding: .8rem 1.1rem; gap: .8rem; }
  .wordmark { font-size: 1rem; gap: .45rem; }
  .mark { width: 1.2rem; height: 1.2rem; }
  .topnav { gap: 1rem; font-size: .85rem; }
}

@media (max-width: 30rem) {
  .masthead-in { padding: .75rem .9rem; gap: .6rem; }
  .topnav { gap: .75rem; font-size: .8rem; }
  .me-slot::before { width: .42rem; height: .42rem; }
}

@media (max-width: 28rem) {
  .wordmark-text { display: none; }
  .wordmark { gap: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding-inline: 1.1rem; }
  .hero { padding-top: 3.5rem; }
  .stats { gap: 1.5rem; }
  .stats b { font-size: 1.5rem; }
  .row { grid-template-columns: 2.1rem 1fr 1rem; gap: .8rem; padding: 1rem .4rem; }
  .row-meta { display: none; }
  .row-tag { display: none; }
  .prose { font-size: 1.12rem; }
  .prose p:first-child::first-letter { font-size: 3rem; }
  .pagers { flex-direction: column; }
  .facs { border-radius: 14px; }
}

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

/* ---------------------------------------------------------------- books --
   A book is not a link. The unit list and the site-wide reading list share
   one row shape: title, then author and year in the muted meta line, then one
   line saying why it is here. Only the rare stable URL is clickable, so the
   default row deliberately has no link affordance at all. */
.books { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.books h2, .books-page h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.books > .muted { font-size: .89rem; margin-bottom: 1.4rem; }
.books ul, .booklist ul { list-style: none; margin: 0; padding: 0; }
.books li, .booklist li {
  padding: .95rem 1.1rem; border-radius: 12px; border: 1px solid transparent;
  border-inline-start: 3px solid var(--line-2); transition: all .16s ease;
}
.books li:hover, .booklist li:hover {
  background: var(--surface); border-color: var(--line); border-inline-start-color: var(--accent);
}
.books li b, .booklist li b { display: block; font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.books li b a, .booklist li b a { border-bottom: 2px solid var(--accent-dim); }
.books li i, .booklist li i {
  display: block; font-style: normal; color: var(--muted);
  font-size: .82rem; letter-spacing: .04em; margin-top: .2rem;
}
.books li span, .booklist li span {
  display: block; color: var(--muted); font-size: .89rem; line-height: 1.5; margin-top: .35rem;
}
.booklist li span a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }

.books-page { max-width: 54rem; margin: 0 auto; padding: 0 1.2rem 5rem; }
.books-page .page-head { padding: 3.5rem 0 2.5rem; }
.books-page .lede { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 40rem; }
.booklist { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.booklist h2 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--accent); }

/* --------------------------------------------------------- booklet links --
   The PDF of a whole faculty. Deliberately quieter than the flashcards
   button next to it: downloading 200 pages is the rarer intent, and the
   button that leaves the site should not shout louder than the one that
   keeps you on it. */
.btn-dl { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-dl:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.btn-dl::before { content: "↓"; margin-inline-end: .45rem; color: var(--accent); font-weight: 700; }

.booklets { max-width: 74rem; margin: 0 auto; padding: 4rem 1.4rem 1rem; }
.booklets-head { border-top: 1px solid var(--line); padding-top: 2.4rem; margin-bottom: 1.6rem; }
.booklets-head h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.booklets-head p { color: var(--muted); margin: 0; max-width: 40rem; line-height: 1.65; }
.booklet-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.booklet-grid a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  transition: all .16s ease;
}
.booklet-grid a:hover { border-color: var(--accent); background: var(--surface); }
.booklet-grid b { font-weight: 700; font-size: .98rem; }
.booklet-grid span { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* ------------------------------------------------------- cross-faculty --
   Ten faculties written separately became ten sealed lists. This block is
   where a unit admits it is about something that also lives elsewhere. */
.related { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem;
              grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.related a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  transition: all .16s ease;
}
.related a:hover { border-color: var(--accent); background: var(--surface); }
.related b { font-weight: 700; font-size: .98rem; }
.related span { color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* ----------------------------------------------------------- diagrams --
   Hand-authored inline SVG, one file per unit. Inlined rather than <img>
   so the drawing inherits the page's foreground colour: the same file has
   to read on a near-black screen, on a white one, and on paper in the
   booklet. Anything meaningful is currentColor; --accent marks the one
   element the unit's argument turns on. */
.fig { margin: 3rem 0; text-align: center; }
.fig svg { max-width: 100%; height: auto; }
.fig figcaption {
  color: var(--muted); font-size: .86rem; line-height: 1.6;
  margin-top: 1rem; max-width: 34rem; margin-inline: auto;
}

/* ------------------------------------------------------ reference tables --
   Data, not prose. Wide tables scroll inside their own container rather than
   pushing the page sideways, which on a phone is the difference between a
   usable table and a broken layout. */
.ref-page { max-width: 64rem; margin: 0 auto; padding: 0 1.4rem 5rem; }
.ref-page .page-head { padding: 2.5rem 0 2rem; }
.ref-page .lede { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 42rem; }
.tbl-wrap { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.tbl-wrap h2 { font-size: 1.5rem; margin: 0 0 .4rem; }
.tbl-wrap > .muted { font-size: .89rem; margin: 0 0 1.2rem; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 34rem; }
.tbl th {
  text-align: right; font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; color: var(--muted); padding: 0 .9rem .7rem;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: var(--surface); }
.tbl .nm { font-weight: 700; white-space: nowrap; }
.tbl .nt { color: var(--muted); font-size: .86rem; }
.ref-sources { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.ref-sources h2 { font-size: .78rem; letter-spacing: .16em; color: var(--accent); margin-bottom: .8rem; }
.ref-sources ul { list-style: none; margin: 0; padding: 0; }
.ref-sources li { margin-bottom: .4rem; }
.ref-sources a { color: var(--muted); font-size: .8rem; direction: ltr; display: inline-block; word-break: break-all; }
.ref-sources a:hover { color: var(--accent); }

/* -------------------------------------------------------------- works ----
   What the subject actually made: a discography, a repertoire, a set of
   credits. Data, not links — a release year does not rot, so nothing here
   points outward. Visually it sits between the syllabus and the books:
   denser than either, because a list of forty albums must stay scannable,
   and the year is the anchor the eye lands on first. */
.works { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.works h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.works > .muted { font-size: .89rem; margin-bottom: 1.6rem; }
.works-group + .works-group { margin-top: 2rem; }
.works-group h3 {
  font-size: .82rem; letter-spacing: .12em; text-transform: none;
  color: var(--accent); margin: 0 0 .7rem; font-weight: 700;
}
.works ul { list-style: none; margin: 0; padding: 0; }
.works li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 .9rem;
  padding: .6rem .8rem; border-radius: 10px; border: 1px solid transparent;
  border-inline-start: 3px solid var(--line-2); transition: all .16s ease;
}
.works li:hover {
  background: var(--surface); border-color: var(--line); border-inline-start-color: var(--accent);
}
.works li .wyear {
  grid-row: 1 / span 3; align-self: start; padding-top: .15rem;
  font-variant-numeric: tabular-nums; font-size: .86rem;
  color: var(--muted); letter-spacing: .03em;
}
.works li b { grid-column: 2; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.works li i {
  grid-column: 2; display: block; font-style: normal; color: var(--muted);
  font-size: .82rem; letter-spacing: .03em; margin-top: .15rem;
}
.works li .wnote {
  grid-column: 2; display: block; color: var(--muted);
  font-size: .86rem; line-height: 1.5; margin-top: .3rem;
}
@media (max-width: 30rem) {
  .works li { grid-template-columns: 1fr; gap: 0; }
  .works li .wyear { grid-row: auto; grid-column: 1; margin-bottom: .1rem; }
  .works li b, .works li i, .works li .wnote { grid-column: 1; }
}

/* ==========================================================================
   חדר ההאזנה — listen.html
   Same data as the works tables, asked as "what do I put on now".
   Collapsible by type because there are nine hundred rows and nobody
   scrolls nine hundred rows.
   ========================================================================== */

.listen-page { max-width: 62rem; margin: 0 auto; padding: 0 1.2rem 5rem; }
.listen-page h1 { font-size: 1.5rem; margin-bottom: .5rem; }

.lchips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.6rem 0 2.2rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.lchips a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: .9rem; font-weight: 500; transition: all .16s ease;
}
.lchips a:hover { border-color: var(--accent); color: var(--ink); background: var(--surface); }
.lchips a em {
  font-style: normal; font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lpart { margin: 0 0 2.6rem; scroll-margin-top: 5rem; }
.lpart h2 {
  font-size: 1.15rem; font-weight: 900; letter-spacing: .01em;
  color: var(--accent); margin: 0 0 .9rem;
}

.lroom { border-block-end: 1px solid var(--line); scroll-margin-top: 5rem; }
.lroom summary {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  padding: .85rem .2rem; font-size: 1rem; font-weight: 700;
  color: var(--ink); list-style: none; transition: color .16s ease;
}
.lroom summary::-webkit-details-marker { display: none; }
.lroom summary::before {
  content: "+"; color: var(--muted); font-weight: 400;
  font-size: 1.05rem; line-height: 1; width: .8rem;
}
.lroom[open] summary::before { content: "\2013"; }
.lroom summary:hover { color: var(--accent); }
.lroom summary em {
  font-style: normal; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-inline-start: auto;
}
.lroom ul { list-style: none; margin: 0; padding: 0 0 1rem; }
.lroom li {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: .1rem .9rem;
  align-items: baseline; padding: .55rem .7rem; border-radius: 10px;
  border-inline-start: 3px solid transparent; transition: all .16s ease;
}
.lroom li:hover {
  background: var(--surface); border-inline-start-color: var(--accent);
}
.lroom li .lyear {
  grid-row: 1 / span 2; align-self: start; padding-top: .18rem;
  font-variant-numeric: tabular-nums; font-size: .86rem;
  color: var(--muted); letter-spacing: .03em;
}
.lroom li .lyear-none { color: var(--line-2); }
.lroom li b { grid-column: 2; font-size: .99rem; font-weight: 700; line-height: 1.35; }
.lroom li i {
  grid-column: 2; font-style: normal; color: var(--muted);
  font-size: .82rem; letter-spacing: .03em;
}
.lroom li .lgo {
  grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center;
  gap: .45rem; flex-wrap: wrap; justify-content: flex-end;
}
.lroom li .lgo a {
  font-size: .78rem; padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap; transition: all .16s ease;
}
.lroom li .lgo a:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
}
.lroom li .lgo .lunit { border-color: transparent; text-decoration: underline; }
.lroom li .lgo .lunit:hover { background: none; }

@media (max-width: 40rem) {
  .lroom li { grid-template-columns: 3.4rem 1fr; }
  .lroom li .lgo {
    grid-column: 1 / -1; grid-row: auto; justify-content: flex-start;
    margin-top: .35rem;
  }
}

/* The Latin original beside the Hebrew title. <bdi> so a Latin string never
   drags the Hebrew line around it out of order. */
.lroom li .llat {
  display: inline; margin-inline-start: .5rem; color: var(--line-2);
  font-size: .78rem; letter-spacing: .01em;
}

/* ==========================================================================
   The personal room
   A profile kept in one browser. It is styled as a quiet extra room, not as
   a gate: nothing on the rest of the site changes when it is empty.
   ========================================================================== */

.me-slot { display: inline-flex; align-items: center; gap: .4rem; max-width: 9rem; }
.me-slot::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  border: 1.5px solid currentColor; flex: none;
}
.me-slot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- the unit page ------------------------------------------------------ */

.unit-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.unit-tools .read-toggle { margin-top: 1.6rem; }

.mark-toggle {
  margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: 99px;
  padding: .45rem 1rem .45rem .85rem; cursor: pointer;
  font-family: var(--display); font-size: .87rem; font-weight: 600; color: var(--muted);
}
.mark-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.mark-toggle[hidden] { display: none; }
.mark-toggle .star {
  width: .95rem; height: .95rem; background: currentColor; flex: none;
  clip-path: polygon(50% 0%, 62% 36%, 100% 38%, 70% 60%, 81% 97%, 50% 75%, 19% 97%, 30% 60%, 0% 38%, 38% 36%);
  opacity: .45;
}
.mark-toggle.is-on { color: var(--accent-2); border-color: var(--accent-2); background: var(--accent-dim); }
.mark-toggle.is-on .star { opacity: 1; }

.mynote { margin: 3rem 0 0; }
.mynote[hidden] { display: none; }
.mynote h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.mynote .muted { font-size: .88rem; margin: 0 0 1rem; }
.mynote textarea {
  width: 100%; max-width: var(--read); display: block;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; color: var(--ink);
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.7;
  resize: vertical; min-height: 6.5rem;
}
.mynote textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.note-state { min-height: 1.2rem; margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }

/* --- the room itself ---------------------------------------------------- */

.me-page { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem 5rem; }
.me-page h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: .2rem 0 1rem; }
.me-page .lede { max-width: 42rem; color: var(--ink-2); font-size: 1.08rem; }

.me-out { padding: 2.5rem 0; max-width: 42rem; }
.me-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin: 2rem 0 1.2rem; }
.me-form label { flex: 1 1 100%; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.me-form input {
  flex: 1 1 14rem; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 99px; padding: .7rem 1.2rem; color: var(--ink);
  font-family: var(--display); font-size: 1rem;
}
.me-form input:focus { outline: none; border-color: var(--accent); }

.me-page button {
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  border-radius: 99px; padding: .7rem 1.5rem; cursor: pointer;
  font-family: var(--display); font-size: .92rem; font-weight: 700;
}
.me-page button:hover { filter: brightness(1.08); }
.me-page button.ghost { background: transparent; color: var(--muted); border-color: var(--line-2); }
.me-page button.ghost:hover { color: var(--ink); border-color: var(--ink-2); }
.me-page button.ghost.danger:hover { color: var(--accent-2); border-color: var(--accent-2); }
.me-page button.is-armed { background: var(--accent-2); color: var(--on-accent); border-color: transparent; }

.me-fine { max-width: 42rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }

.me-details { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.me-details summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.me-details summary::marker { color: var(--muted); }
.me-details .muted { font-size: .86rem; margin: .8rem 0 .6rem; }
.me-details textarea, .me-code {
  width: 100%; display: block; margin-bottom: .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem 1rem; color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.5; resize: vertical; word-break: break-all;
}
.me-details textarea:focus, .me-code:focus { outline: none; border-color: var(--accent); }

.me-head { padding: 2.5rem 0 1rem; }
.me-head .stats { margin-top: 1.2rem; }
.me-head .bar { margin: 1.4rem 0 .6rem; max-width: 34rem; }

.me-block { margin-top: 3.2rem; }
.me-block > h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: var(--accent);
  margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.me-block > .muted { font-size: .9rem; max-width: 44rem; margin: 0 0 1rem; }

.me-facs { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .2rem 2rem; }
.me-fac {
  display: grid; grid-template-columns: 1fr 5rem auto; gap: .9rem;
  align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.me-fac:hover { color: var(--ink); }
.me-fac:hover .me-fac-name { color: var(--accent); }
.me-fac-name { font-size: .97rem; font-weight: 500; }
.me-fac-n { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.me-note {
  padding: 1.1rem 1.3rem; margin-bottom: .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  border-inline-start: 3px solid var(--accent-2);
}
.me-note > a { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; color: var(--ink); }
.me-note > a:hover b { color: var(--accent); }
.me-note > a b { font-size: 1.02rem; font-weight: 600; }
.me-note p {
  margin: .6rem 0 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.65;
  color: var(--ink-2); white-space: pre-wrap;
}

.me-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.me-danger { border-top: 1px solid var(--line); padding-top: 2rem; }

@media (max-width: 40rem) {
  .me-slot { max-width: 6rem; }
  .me-page { padding: 0 1.1rem 4rem; }
  .me-out { padding: 1.6rem 0; }
  .me-head { padding: 1.8rem 0 .5rem; }
  .me-head .bar { margin: 1rem 0 .5rem; }
  .me-block { margin-top: 2.2rem; }
  .me-block > h2 { margin-bottom: .7rem; padding-bottom: .55rem; }
  .me-facs { gap: 0; }
  /* On a phone the row breaks in two: name and count on one line, the bar
     under them. Three columns at this width would leave the bar too short
     to read as a bar at all. */
  .me-fac { grid-template-columns: 1fr auto; gap: .45rem .9rem; padding: .6rem 0; }
  .me-fac .bar { grid-column: 1 / -1; order: 3; }
  .me-note { padding: .95rem 1.05rem; }
  .mynote textarea { font-size: 1rem; padding: .85rem .95rem; }
}