/* ===========================================================================
   zafarnama.css — /culture/literature/zafarnama/

   Loads AFTER style.css and article.css. It introduces NO new design tokens
   and defines no component that already ships. In particular it does not
   redefine .sources-drawer: that lives once in article.css, this file loads
   after it, and a duplicate rule here would silently win.

   THE TYPEFACE
   ------------
   site/fonts/zafarnama-gurmukhi.woff2 is Noto Serif Gurmukhi MEDIUM, subset
   to this text by build_zafarnama_font.py from zafarnama-text.json itself. It
   is declared at font-weight 500 because that is the weight of the file. One
   weight is cut and one is declared; there is no 400 face, so nothing here
   asks for one and the browser is never invited to synthesise it.

   font-display: block, not swap, and that is deliberate. A fallback Gurmukhi
   face that lacks U+0A3C shows NO tofu: it draws the base letter and silently
   drops the nukta, so ਜ਼ flashes as ਜ and the reader sees a different word.
   A blocking load is the lesser fault. The same reasoning is why the Anand
   Karaj face blocks.

   The subset covers this poem and nothing else, so it is scoped to .zf-g and
   never set on body text.
   =========================================================================== */

@font-face {
  font-family: "ZafarnamaGurmukhi";
  src: url("/fonts/zafarnama-gurmukhi.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

/* --- the title in the hero ------------------------------------------------ */

.zf-title { display: flex; flex-direction: column; gap: .1em; }

.zf-title__g {
  font-family: "ZafarnamaGurmukhi", "Noto Serif Gurmukhi", serif;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gold-300);
}

.zf-title__l { display: block; }

/* --- the two-column shell ------------------------------------------------- */

.zf-layout {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 2.75rem);
  align-items: start;
}

@media (max-width: 760px) {
  .zf-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- the rail -------------------------------------------------------------
   It marks position and jumps. It is a <nav> of anchors and it sits OUTSIDE
   the ZAFARNAMA markers, because nothing interactive may appear inside the
   poem region. With JavaScript off it still works: the anchors resolve, and
   only the active-node highlight is missing.
   ------------------------------------------------------------------------- */

.zf-rail {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.zf-rail__h {
  margin: 0 0 .55rem;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.zf-rail__list { list-style: none; margin: 0; padding: 0; }

.zf-rail__list li { margin: 0; }

.zf-rail__list a {
  display: block;
  padding: .22rem .1rem;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  text-decoration: none;
  border-left: 2px solid var(--line-warm);
  padding-left: .6rem;
}

.zf-rail__list a:hover,
.zf-rail__list a:focus-visible { color: var(--ink-900); }

/* Gold is a field, a rule or a mark, never small type. The active node is
   marked by its rule going gold and its own colour going to ink, not by the
   number turning gold. */
.zf-rail__list a[aria-current="true"] {
  color: var(--ink-900);
  border-left-color: var(--gold-600);
  border-left-width: 3px;
  padding-left: calc(.6rem - 1px);
}

@media (max-width: 760px) {
  .zf-rail {
    position: static;
    border-bottom: 1px solid var(--line-warm);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
  }
  .zf-rail__list { display: flex; flex-wrap: wrap; gap: .15rem .55rem; }
  .zf-rail__list a {
    border-left: 0;
    border-bottom: 2px solid var(--line-warm);
    padding: .15rem .35rem;
  }
  .zf-rail__list a[aria-current="true"] {
    border-left: 0;
    border-bottom-color: var(--gold-600);
    padding-left: .35rem;
  }
}

/* --- the poem ------------------------------------------------------------- */

.zf-body { max-width: 46rem; }

.zf-body__h {
  margin: 0 0 .4rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.zf-body__note {
  margin: 0 0 2.2rem;
  color: var(--ink-500);
  font-size: .93rem;
  max-width: 34rem;
}

.zf-mangal {
  margin: 0 0 3rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--line-warm);
  text-align: center;
}

.zf-mangal__note {
  margin: 1.5rem auto 0;
  max-width: 26rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-500);
}

.zf-c {
  position: relative;
  margin: 0 0 2.1rem;
  padding-left: 2.6rem;
}

@media (max-width: 480px) {
  .zf-c { padding-left: 0; padding-top: 1.4rem; }
}

/* The couplet number is furniture. The poem carries its own closing numeral
   in Gurmukhi inside the verse line, so this is an index for the rail to land
   on and is not a second printing of the text. */
.zf-i {
  position: absolute;
  left: 0;
  top: .35rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

@media (max-width: 480px) {
  .zf-i { top: 0; }
}

.zf-h { margin: 0 0 .55rem; }

.zf-h--b { margin-bottom: 0; }

.zf-g {
  display: block;
  font-family: "ZafarnamaGurmukhi", "Noto Serif Gurmukhi", serif;
  font-weight: 500;
  font-size: clamp(1.32rem, 3.1vw, 1.62rem);
  /* Generous leading is not decoration here. Gurmukhi stacks marks above the
     line (tippi, addak, the au sign) and below it (the u signs, subjoined
     letters), and this poem is dense with both because it is Persian. At 1.4
     the ੌ of one line touches the ਼ of the next. */
  line-height: 1.85;
  color: var(--ink-900);
}

/* THE ROMANISATION LANE IS SET IN THE GROTESQUE, AND THAT IS NOT A WHIM.
   Newsreader, the site's reading serif, has no usable U+012B: in both roman
   and italic the macron on ī detaches and floats above the letter, so
   `rahīma` renders as `rahima` with a bar hanging over it. Fraunces is worse,
   breaking ā and ō as well. Both were rendered and looked at, at 2x, before
   this was decided. Georgia and Times draw the whole set correctly but are
   system faces we cannot subset or count on off macOS and Windows.
   Space Grotesk is already loaded by every page, is OFL, and draws all 46 of
   the codepoints this lane uses with a real glyph, proven against a .notdef
   bitmap rather than against FontFaceSet.check(), which lies in both
   directions.
   It also happens to say the right thing. This lane is derived, mechanical
   and not literary, and setting it in the same grotesque as the couplet
   numbers and the rail marks it as apparatus rather than as text.
   THE PROPER FIX, when someone wants it: cut a Noto Serif Latin subset the
   way build_zafarnama_font.py cuts the Gurmukhi one, from this lane's own
   characters. site/fonts/anand-karaj-latin.woff2 is that idea already, but it
   is 84 codepoints of Noto Serif Regular and carries none of ō ē ś ṁ ḵ ẖ, so
   it cannot be reused here. It needs the full Noto Serif, which is not on
   this machine. */
.zf-t {
  display: block;
  margin-top: .35rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .86rem;
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--ink-500);
}

.zf-h--head .zf-g { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
.zf-h--head .zf-t { font-size: .8rem; }

/* Gurmukhi set inline in running prose. */
.zf-g--in {
  display: inline;
  font-size: 1.06em;
  line-height: 1.2;
  color: inherit;
}

/* The apparatus mark. A dagger, not a number, so it cannot be read as part of
   the couplet numbering. */
.zf-mark {
  display: inline-block;
  margin-left: .25rem;
  color: var(--madder-600);
  text-decoration: none;
  font-size: .9em;
}

.zf-mark:hover, .zf-mark:focus-visible { text-decoration: underline; }


/* The couplet a rail link landed on. This is the whole of the "you are here"
   affordance and it is pure CSS, so it works with JavaScript off, which is the
   only mode this page has. */
.zf-c:target { position: relative; }

.zf-c:target::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: .1rem;
  bottom: .1rem;
  width: 3px;
  background: var(--gold-600);
  border-radius: 2px;
}

@media (max-width: 480px) {
  .zf-c:target::before { left: 0; top: 1.1rem; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- the apparatus -------------------------------------------------------- */

.zf-note {
  margin: 1.4rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--bg-3);
  border-left: 3px solid var(--gold-600);
  border-radius: 2px;
}

.zf-note__h {
  margin: 0 0 .35rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zf-note__h a { color: var(--ink-700); text-decoration: none; }
.zf-note__h a:hover { text-decoration: underline; }

.zf-note__b { margin: 0; font-size: .95rem; line-height: 1.65; }
/* The apparatus mixes scripts in one sentence. Gurmukhi in it falls through
   the reading serif, which has none, to the subset face; the Latin glosses go
   to the same grotesque as the romanisation lane, for the ī reason above. */
.zf-note__b { font-family: "Newsreader", "ZafarnamaGurmukhi", Georgia, serif; }

.zf-lat {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .93em;
}

.zf-note__b + .zf-note__b { margin-top: .6rem; }

.zf-note__k {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--madder-600);
  margin-right: .4rem;
}

/* --- print ---------------------------------------------------------------
   The whole poem is in the DOM, so it prints. The rail is navigation and is
   not. --------------------------------------------------------------------- */

@media print {
  .zf-rail { display: none; }
  .zf-layout { display: block; }
  .zf-c { break-inside: avoid; }
}