/* ===========================================================================
   leaf.css — the manuscript leaf, pinned to the teaching page.

   It was the Persian literature page, a page of its own; since 2026-09-22 it
   is section IV of Teaching & outreach, which is where the work belongs — it
   began as material for a physics class. It keeps its own look: a sheet of
   tea-coloured laid paper with a ruled frame (the jadval) and a margin that
   carries the notes, the way a reader's hand fills the margin of a
   manuscript. On the lecture-board wall it reads as what it is, a leaf
   someone pinned up beside the rack.

   Everything here is scoped under .verse / .leaf so none of it can reach the
   slate panels around it.
   =========================================================================== */

.verse {
  --leaf:        #e8dcc2;   /* laid paper, tea in it */
  --leaf-deep:   #ddcfb0;
  --leaf-edge:   #c9b78f;
  --ink-b:       #241c11;   /* 12:1 on the leaf */
  --ink-b-soft:  #574733;   /* 6.6:1 */
  --ink-b-faint: #6d5c44;   /* 4.8:1 — the floor for text */
  --rubric:      #8c2f1d;   /* the red of a rubricated heading. 6.1:1 */
  --gold:        #7a5c18;   /* the CV's bronze. 5.0:1 */
  --rule:        #b39f76;   /* the frame: decoration, and deliberately faint */
  --rule-ink:    #8f7b52;   /* the table: carries structure, so 3.0:1 */
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/></filter><rect width="220" height="220" filter="url(%23n)" opacity="0.3"/></svg>');

  margin-block: clamp(3rem, 8vw, 5rem) 0;
  scroll-margin-block-start: 2rem;
}

/* the section's own heading is chalked on the wall, like the others */
.verse-head { position: relative; margin-block-end: clamp(1.6rem, 4vw, 2.4rem); }
.verse-head 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);
}
.verse-head .where {
  margin: 0; font-family: var(--sans); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint-on-panel);
}
.verse-head .num {
  position: absolute; inset-block-start: -.4rem; inset-inline-end: 0;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1;
  color: rgb(230 227 216 / .07); filter: url(#chalk-text);
}

/* pinned, not framed: a hair off square, and two strips of tape holding it.
   The tilt is tiny because the sheet is tall — a rotation about the centre
   swings the top edge by (half the height) x (the angle), and on a phone the
   leaf is thousands of pixels long, so there it is dropped altogether. */
.verse .leaf { rotate: -.2deg; }
@media (max-width: 800px) { .verse .leaf { rotate: none; } }
.verse .tape {
  position: absolute; z-index: 2; inset-block-start: -.9rem;
  inline-size: 6.5rem; block-size: 1.7rem; pointer-events: none;
  background: linear-gradient(180deg, rgb(236 228 206 / .5), rgb(214 204 178 / .36));
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}
.verse .tape.l { inset-inline-start: 12%; rotate: -4deg; }
.verse .tape.r { inset-inline-end: 12%;   rotate: 3deg; }

/* ================================================================ the leaf */
.leaf {
  position: relative;
  /* the ink. On its old page this came from <body>; on the teaching page
     <body> is chalk, and the leaf's paragraphs would inherit that */
  color: var(--ink-b);
  max-inline-size: 62rem; margin-inline: auto;
  padding: clamp(1.6rem, 5vw, 3.4rem);
  background:
    radial-gradient(52% 34% at 84% 6%, rgb(140 47 29 / .045), transparent 70%),
    radial-gradient(60% 40% at 8% 92%, rgb(122 92 24 / .07), transparent 72%),
    linear-gradient(158deg, var(--leaf), var(--leaf-deep));
  border: 1px solid var(--leaf-edge);
  box-shadow: 0 40px 90px -44px #000, 0 2px 0 rgb(255 255 255 / .18) inset;
}
/* the foxing and the grain of the paper */
.leaf::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: var(--grain); background-size: 220px 220px;
}

/* the jadval: the ruled frame the text block sits in */
.leaf .jadval {
  position: relative;
  border: 1px solid var(--rule);
  outline: 3px solid var(--leaf-deep); outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--gold) inset;
  padding: clamp(1.6rem, 4.5vw, 3.2rem);
}

/* ============================================================= the heading */
.leaf .rubric {
  margin: 0 0 .3rem; font-family: var(--sans);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rubric);
}
.leaf h3 {
  margin: 0 0 .5rem; font-weight: 400; line-height: 1.08;
  font-size: clamp(1.9rem, 5.2vw, 3rem); color: var(--ink-b);
}
.leaf h3 .fa {
  display: block; margin-block-start: .5rem;
  font-size: .62em; color: var(--rubric); direction: rtl;
}
.leaf .byline {
  margin: 0 0 2.2rem; padding-block-end: 1.6rem; border-block-end: 1px solid var(--rule);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-b-faint);
}

/* ============================================================== the columns
   Text block plus margin, the manuscript proportion: the margin is real and
   carries content, it is not padding. */
.leaf .spread {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 0 clamp(1.6rem, 4vw, 3rem); align-items: start;
}
.leaf .spread > .column, .leaf .spread > .wide { grid-column: 1; }
.leaf .spread > .marginalia { grid-column: 2; }
/* An illumination runs the full width of the ruled frame, the way a table or a
   framed couplet does in a manuscript — the margin is for notes, not for
   squeezing the thing the page is about. */
.leaf .spread > .wide { grid-column: 1 / -1; }
.leaf .column > p { margin: 0 0 1.15rem; max-inline-size: 60ch; font-size: 1.06rem; line-height: 1.72; }
.leaf .column > p:last-child { margin-block-end: 0; }
.leaf .spread > .column + .column, .leaf .spread > .wide + .column { margin-block-start: 1.15rem; }
.leaf .column b { font-weight: 400; color: #000; }
.leaf .column a { color: var(--gold); text-decoration-color: rgb(122 92 24 / .4); text-underline-offset: .2em; }
.leaf .column a:hover { text-decoration-color: currentColor; }

.leaf .marginalia { border-inline-start: 1px solid var(--rule); padding-inline-start: 1.4rem; }
.leaf .marginalia [lang="fa"] { font-family: 'Vazirmatn', 'Noto Naskh Arabic', 'Times New Roman', serif; }
.leaf .marginalia .note { margin: 0 0 1.8rem; font-size: .86rem; line-height: 1.6; color: var(--ink-b-soft); }
.leaf .marginalia .note:last-child { margin-block-end: 0; }
.leaf .marginalia .note b {
  display: block; margin-block-end: .35rem; font-weight: 400;
  font-family: var(--sans); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rubric);
}

/* ============================================================== the couplet
   Set right-to-left in two hemistichs, the way a bayt is written. */
.leaf .bayt {
  margin: 2rem 0; padding: 1.5rem clamp(1rem, 3vw, 2rem);
  direction: rtl; text-align: center;
  background: rgb(255 255 255 / .2);
  border-block: 1px solid var(--rule);
}
.leaf .bayt p {
  margin: 0 0 .5rem; font-size: clamp(1.05rem, 2.4vw, 1.28rem); line-height: 1.9;
  color: var(--ink-b);
  font-family: 'Vazirmatn', 'Noto Naskh Arabic', 'Scheherazade New', 'Times New Roman', serif;
}
.leaf .bayt p:last-of-type { margin-block-end: 0; }
.leaf .bayt .hemi { display: inline-block; padding-inline: .9em; }
.leaf .bayt cite {
  display: block; margin-block-start: 1rem; direction: ltr; text-align: center;
  font-family: var(--sans); font-style: normal;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-b-faint);
}
.leaf .gloss {
  margin: -.6rem 0 2rem; font-size: .95rem; line-height: 1.66;
  color: var(--ink-b-soft); font-style: italic; max-inline-size: 62ch;
}

/* ============================================================== the taxonomy
   The article's own partition, drawn as a ruled table because that is what it
   is in the article. Persian first: the categories were named in Persian. */
.leaf .taxon {
  margin: 2.2rem 0; inline-size: 100%; border-collapse: collapse;
  font-size: .92rem;
}
.leaf .taxon caption {
  caption-side: top; text-align: start; padding-block-end: .8rem;
  font-family: var(--sans); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rubric);
}
.leaf .taxon th, .leaf .taxon td { border: 1px solid var(--rule-ink); padding: .68rem .8rem; vertical-align: top; text-align: start; }
.leaf .taxon th { font-weight: 400; background: rgb(255 255 255 / .22); white-space: nowrap; }
.leaf .taxon th .fa, .leaf .taxon td .fa { display: block; direction: rtl; color: var(--ink-b); font-size: 1.02em; }
.leaf .taxon th .en, .leaf .taxon td .en {
  display: block; margin-block-start: .18rem;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .07em; color: var(--ink-b-faint);
}
.leaf .taxon td { color: var(--ink-b-soft); }

/* ================================================================ the door */
.leaf .door {
  margin-block-start: clamp(2.4rem, 6vw, 3.6rem);
  padding-block-start: 1.8rem; border-block-start: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center;
}
.leaf .door .get {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--leaf);
  background: var(--ink-b); border: 1px solid var(--ink-b); border-radius: 2px;
  padding: .8em 1.3em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.leaf .door .get:hover { background: var(--rubric); border-color: var(--rubric); color: #fff; }
.leaf .door .alt {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-b-faint); text-decoration: none;
  border-block-end: 1px solid var(--rule); padding-block-end: .2em;
}
.leaf .door .alt:hover { color: var(--ink-b); border-color: var(--ink-b); }
.leaf .door .size { font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; color: var(--ink-b-faint); }

@media (max-width: 800px) {
  .leaf .spread { grid-template-columns: 1fr; gap: 0; }
  .leaf .spread > .column, .leaf .spread > .wide, .leaf .spread > .marginalia { grid-column: 1; }
  .leaf .spread > .marginalia { margin-block: 2rem; }
  .leaf .marginalia {
    border-inline-start: 0; padding-inline-start: 0;
    border-block-start: 1px solid var(--rule); padding-block-start: 1.6rem;
  }
  .leaf .taxon th { white-space: normal; }
}

/* On a narrow screen a four-row table with a wide third column collapses to
   one word per line, which is worse than no table. Below 700px the partition
   is restacked as four labelled blocks — the same content, read down instead
   of across. The rowspan'd Persian/عینی heading is dropped there because a
   spanned cell cannot survive the restack; its label is carried into each
   block instead. */
@media (max-width: 700px) {
  .leaf .taxon, .leaf .taxon tbody, .leaf .taxon tr, .leaf .taxon th, .leaf .taxon td { display: block; inline-size: auto; }
  .leaf .taxon { border: 0; }
  .leaf .taxon tr { border: 1px solid var(--rule-ink); margin-block-end: .9rem; padding: .9rem 1rem; }
  .leaf .taxon th, .leaf .taxon td { border: 0; padding: 0; background: none; }
  .leaf .taxon th[rowspan] { margin-block-end: .5rem; }
  .leaf .taxon th[rowspan] .en { color: var(--rubric); }
  .leaf .taxon th .fa { display: inline-block; }
  .leaf .taxon th .en { display: inline-block; margin: 0 0 0 .5rem; }
  .leaf .taxon td { margin-block-start: .5rem; }
}
@media (max-width: 520px) {
  .leaf .bayt .hemi { display: block; padding-inline: 0; }
}