/* ==========================================================================
   האוניברסיטה — 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); }

/* -------------------------------------------------------- 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 { 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); }

/* ------------------------------------------------------------ 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; }
.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 -- */

@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;
}