/* ============================================================
   גִּלָּיוֹן · GILAYON — Vibe Code News as a critical edition
   round 14 · hand-built · no external dependencies
   ------------------------------------------------------------
   One material: the scholarly Hebrew page. Text at the centre,
   apparatus in the margins, time as ink-depth. No screens inside
   screens, no machines, no streaming — accumulation.
   ============================================================ */

/* ---------- 0 · tokens ---------- */
:root{
  --paper:        #f6efdf;   /* warm ivory leaf */
  --paper-deep:   #efe4cc;   /* recessed panels  */
  --paper-lift:   #faf5e9;   /* raised panels    */
  --ink:          #241b10;   /* fresh iron-gall  */
  --ink-2:        #46372a;   /* settled          */
  --ink-aged:     #705838;   /* deepest stratum  */
  --rubric:       #8f2011;   /* oxblood rubrication */
  --rubric-soft:  #a8402f;
  --tekhelet:     #1e4e8c;   /* links, the only cold note */
  --rule:         #d3c4a4;   /* hairline         */
  --rule-strong:  #a08d67;
  --gold:         #a8863d;   /* sparse gilding   */
  --serif: "David Libre","David","Frank Ruehl CLM","Hadasim CLM","Times New Roman","Noto Serif Hebrew",serif;
  --mono: "SF Mono","Menlo","Consolas","Courier New",monospace;
  --measure: 38rem;
  --gloss-w: 15rem;
  color-scheme: light;
}

/* ---------- 1 · base leaf ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--serif);
  background:
    /* laid paper: fine horizontal laid-lines + sparse vertical chain-lines */
    repeating-linear-gradient(to bottom, rgba(36,27,16,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(to left,   rgba(36,27,16,.013) 0 1px, transparent 1px 110px),
    var(--paper);
  color:var(--ink);
  line-height:1.62;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex; flex-direction:column;
}
main{ flex:1; }
a{ color:var(--tekhelet); text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
:focus-visible{ outline:2px solid var(--tekhelet); outline-offset:3px; border-radius:2px; }
::selection{ background:rgba(143,32,17,.16); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.skip{ position:absolute; inset-inline-start:1rem; top:-3rem; z-index:99; background:var(--ink);
  color:var(--paper); padding:.5rem 1.2rem; border-radius:0 0 4px 4px; transition:top .2s; }
.skip:focus{ top:0; text-decoration:none; }
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }

/* latin fragments inside hebrew text — quiet, never dominant */
.lat{ font-variant-caps:all-small-caps; letter-spacing:.06em; }

/* the Oxford rule — thick + thin, the edition's signature line */
.rule-oxford{ height:6px; border:0;
  background:linear-gradient(var(--ink) 0 2.5px, transparent 2.5px 4.5px, var(--ink) 4.5px 5.5px, transparent 5.5px); }

/* scribal line-filler divider between sections */
.line-filler{ display:flex; align-items:center; gap:1rem; color:var(--rule-strong);
  margin:3.2rem auto; max-width:56rem; padding-inline:1.5rem; }
.line-filler::before,.line-filler::after{ content:""; flex:1; height:1px; background:var(--rule); }
.line-filler > span{ font-size:.8rem; letter-spacing:.5em; margin-inline-end:-.5em; color:var(--gold); }

/* ---------- 2 · masthead ---------- */
.masthead{ position:sticky; top:0; z-index:40; background:var(--paper);
  box-shadow:0 0 0 rgba(36,27,16,0); transition:box-shadow .25s; }
.masthead.scrolled{ box-shadow:0 4px 18px -12px rgba(36,27,16,.45); }
.mast-in{ max-width:76rem; margin-inline:auto; padding:.9rem 1.5rem .7rem;
  display:flex; align-items:baseline; gap:2rem; }
.wordmark{ color:var(--ink); display:flex; flex-direction:column; gap:.1rem; }
.wordmark:hover{ text-decoration:none; }
.wordmark strong{ font-size:1.45rem; font-weight:800; letter-spacing:-.01em; line-height:1; }
.wordmark strong em{ font-style:normal; color:var(--rubric); }
.wordmark span{ font-size:.6rem; letter-spacing:.28em; color:var(--ink-2);
  font-variant-caps:all-small-caps; font-family:var(--mono); }
.mast-nav{ display:flex; gap:1.4rem; margin-inline-start:auto; align-items:baseline; }
.mast-nav a{ color:var(--ink-2); font-size:.95rem; position:relative; padding-block:.2rem; }
.mast-nav a:hover{ color:var(--ink); text-decoration:none; }
.mast-nav a::after{ content:""; position:absolute; inset-inline:0; bottom:-2px; height:1px;
  background:var(--rubric); transform:scaleX(0); transform-origin:100% 50%; transition:transform .22s; }
.mast-nav a:hover::after{ transform:scaleX(1); }
.mast-nav a[aria-current="page"]{ color:var(--ink); font-weight:700; }
.mast-nav a[aria-current="page"]::before{ content:"●"; color:var(--rubric); font-size:.5em;
  vertical-align:.45em; margin-inline-end:.45em; }
.mast-nav a.ext{ color:var(--tekhelet); font-size:.85rem; }
.mast-menu{ display:none; margin-inline-start:auto; width:2.2rem; height:2.2rem;
  flex-direction:column; justify-content:center; gap:.4rem; align-items:center; }
.mast-menu i{ display:block; width:1.4rem; height:2px; background:var(--ink); transition:transform .25s, opacity .25s; }
/* the edition line — a thin strip between hairlines, on every page */
.edition-line{ border-block-start:1px solid var(--rule); font-size:.78rem; color:var(--ink-2);
  text-align:center; padding:.42rem 1rem; letter-spacing:.04em;
  font-feature-settings:"tnum"; }
.edition-line b{ color:var(--rubric); font-weight:700; }
.masthead > .rule-oxford{ max-width:76rem; margin-inline:auto; }

@media (max-width:760px){
  .mast-in{ align-items:center; }
  .mast-menu{ display:flex; }
  .mast-nav{ display:none; position:absolute; inset-inline:0; top:100%;
    background:var(--paper); flex-direction:column; gap:0; padding:0 1.5rem 1rem;
    border-block-end:1px solid var(--rule-strong); box-shadow:0 14px 22px -16px rgba(36,27,16,.4); }
  .masthead.open .mast-nav{ display:flex; }
  .mast-nav a{ padding-block:.8rem; border-block-start:1px solid var(--rule); font-size:1.05rem; }
  .masthead.open .mast-menu i:first-child{ transform:translateY(.3rem) rotate(45deg); }
  .masthead.open .mast-menu i:last-child{ transform:translateY(-.3rem) rotate(-45deg); }
}

/* ---------- 3 · the daf — homepage hero as an open critical page ---------- */
.proem{ text-align:center; max-width:44rem; margin:2.6rem auto 0; padding-inline:1.5rem;
  color:var(--ink-2); font-size:1.02rem; }
.proem::after{ content:"❖"; display:block; color:var(--gold); font-size:.7rem; margin-top:1.1rem; letter-spacing:0; }

.daf{ position:relative; max-width:76rem; margin:2.8rem auto 0; padding:0 1.5rem 3.6rem;
  display:grid; grid-template-columns:minmax(9rem,12rem) minmax(0,1fr) minmax(11rem,14rem);
  gap:3rem; align-items:start; }
.daf .watermark{ position:absolute; inset-inline:0; top:46%; transform:translateY(-50%);
  text-align:center; font-size:clamp(9rem,22vw,17rem); font-weight:800; letter-spacing:.08em;
  color:rgba(36,27,16,.05); pointer-events:none; user-select:none; line-height:1; z-index:0; }
.daf > *{ position:relative; z-index:1; }

.reg-head{ font-size:.72rem; letter-spacing:.22em; color:var(--rubric); font-weight:700;
  border-block-end:1px solid var(--rule); padding-block-end:.45rem; margin-block-end:.9rem; }

/* centre column — the primary text */
.lead-text{ text-align:center; padding-top:.6rem; }
.rubric-line{ color:var(--rubric); font-size:.85rem; letter-spacing:.14em; font-weight:700; }
.rubric-line .lat{ letter-spacing:.18em; }
.live-dot{ display:inline-block; width:.5em; height:.5em; border-radius:50%;
  background:var(--rubric); margin-inline-end:.4em; vertical-align:.05em; }
@media (prefers-reduced-motion:no-preference){
  .live-dot{ animation:breathe 2.8s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
}
.lead-text h1{ font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:1.12; font-weight:800;
  letter-spacing:-.015em; margin:1.1rem auto .9rem; max-width:22ch; text-wrap:balance; }
.lead-dek{ font-size:1.18rem; line-height:1.7; color:var(--ink-2); max-width:34rem; margin-inline:auto; }
.initial-word{ font-size:1.75em; line-height:1; color:var(--rubric); font-weight:800; }
.lead-actions{ margin-top:1.7rem; }
.lead-actions a{ font-size:.95rem; border:1px solid var(--rule-strong); color:var(--ink);
  padding:.55rem 1.3rem; border-radius:99px; transition:border-color .2s, background .2s; }
.lead-actions a:hover{ text-decoration:none; border-color:var(--rubric); background:var(--paper-lift); }

/* margin registers */
.masora a{ display:block; color:var(--ink); padding-block:.65rem; border-block-end:1px solid var(--rule); }
.masora a:hover{ text-decoration:none; }
.masora a i{ display:block; font-style:normal; font-size:.7rem; color:var(--gold);
  letter-spacing:.14em; margin-block-end:.2rem; }
.masora a b{ font-weight:600; font-size:.9rem; line-height:1.45; display:block;
  transition:color .18s; }
.masora a:hover b{ color:var(--rubric); }
.perush{ font-size:.9rem; line-height:1.65; color:var(--ink-2); }
.perush p + p{ margin-top:.8rem; }
.perush b{ color:var(--rubric); font-weight:700; }
.perush-src{ font-size:.75rem; color:var(--ink-aged); letter-spacing:.06em; }
@media (max-width:1020px){
  .daf{ grid-template-columns:1fr; gap:2.2rem; }
  .daf .watermark{ font-size:clamp(7rem,26vw,11rem); top:30%; }
  .lead-text{ order:-1; }
  .masora,.perush{ max-width:34rem; margin-inline:auto; width:100%; }
}

/* ---------- 4 · section heads + catchwords ---------- */
.section{ max-width:76rem; margin-inline:auto; padding:0 1.5rem; position:relative; }
.section-head{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
  border-block-end:1px solid var(--rule-strong); padding-block-end:.7rem; margin-block-end:1.6rem; }
.section-head h2{ font-size:1.55rem; font-weight:800; letter-spacing:-.01em; }
.s-num{ color:var(--rubric); font-size:.8rem; font-weight:700; letter-spacing:.2em;
  display:block; margin-block-end:.25rem; }
.section-head p{ color:var(--ink-2); font-size:.9rem; }
.s-link{ margin-inline-start:auto; font-size:.92rem; white-space:nowrap; }

/* the catchword — שומר הדף: bottom-corner word that carries you onward */
.catchword{ position:absolute; bottom:-1.4rem; inset-inline-end:1.5rem; text-align:end;
  color:var(--ink-2); line-height:1.2; }
.catchword:hover{ text-decoration:none; }
.catchword .cw-label{ display:block; font-size:.62rem; letter-spacing:.24em; color:var(--rule-strong); }
.catchword b{ font-weight:700; font-size:1.05rem; color:var(--rubric);
  display:inline-block; transition:transform .22s; border-block-end:1px solid transparent; }
.catchword:hover b{ transform:translateY(3px); border-block-end-color:var(--rubric); }

/* ---------- 5 · the stratigraphy — news rows, ink that ages ---------- */
.strata{ display:flex; flex-direction:column; }
.stratum-item{ border-block-end:1px solid var(--rule);
  /* the concept's core: ink colour derived from depth */
  --age:0;
  color:color-mix(in oklab, var(--ink) calc((1 - var(--age)) * 100%), var(--ink-aged));
}
.item-face{ display:grid; width:100%; text-align:start; align-items:baseline;
  grid-template-columns:4.2rem 1.4rem minmax(0,1fr) auto 1.6rem;
  gap:1rem; padding:1.05rem .4rem; color:inherit; position:relative; }
.item-face:hover{ background:rgba(250,245,233,.85); }
.item-face time{ font-family:var(--mono); font-size:.82rem; color:var(--ink-aged);
  letter-spacing:.03em; font-feature-settings:"tnum"; }
.item-face .siglum{ color:var(--rubric); font-size:.72rem; text-align:center;
  transition:transform .22s; }
.item-face:hover .siglum{ transform:scale(1.35); }
.item-face h3{ font-size:1.12rem; font-weight:700; line-height:1.4; color:inherit; }
.stratum-item.is-breaking .item-face h3::after{ content:"שמועה ראשונה"; color:var(--rubric);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; border:1px solid currentColor;
  border-radius:99px; padding:.1em .55em; margin-inline-start:.7em; vertical-align:.22em; white-space:nowrap; }
.item-face .src{ font-size:.72rem; letter-spacing:.16em; color:var(--ink-aged);
  font-variant-caps:all-small-caps; font-family:var(--mono); }
.item-face .unfold{ color:var(--rule-strong); text-align:center; font-size:1.1rem; line-height:1;
  transition:transform .25s, color .2s; }
.item-face[aria-expanded="true"] .unfold{ transform:rotate(45deg); color:var(--rubric); }
/* unfolding gloss — grid-rows trick, state-based (safe in frozen tabs) */
.item-gloss{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.item-face[aria-expanded="true"] + .item-gloss{ grid-template-rows:1fr; }
.item-gloss > div{ overflow:hidden; }
.item-gloss p{ padding:0 5.6rem 1.1rem calc(1.6rem + 1rem); max-width:44rem;
  color:var(--ink-2); font-size:.98rem; line-height:1.7; }
.item-gloss .apparatus-line{ font-size:.78rem; color:var(--ink-aged); letter-spacing:.05em;
  padding-block:0 1.2rem; }
.item-gloss .apparatus-line b{ color:var(--rubric); font-weight:700; }
@media (max-width:640px){
  .item-face{ grid-template-columns:3.4rem minmax(0,1fr) 1.4rem; gap:.7rem; }
  .item-face .siglum{ display:none; }
  .item-face .src{ grid-column:1 / -1; margin-top:-.35rem; padding-inline-start:0; }
  .item-face h3{ font-size:1.04rem; }
  .item-gloss p{ padding:0 3.4rem 1rem 1rem; }
}

/* hour-strata dividers on the full feed */
.hour-rule{ display:flex; align-items:center; gap:1rem; margin:2.4rem 0 .4rem; }
.hour-rule:first-child{ margin-top:0; }
.hour-rule b{ font-family:var(--mono); font-size:.85rem; color:var(--ink);
  border:1px solid var(--rule-strong); padding:.15rem .7rem; border-radius:99px;
  background:var(--paper-lift); font-feature-settings:"tnum"; }
.hour-rule i{ flex:1; height:1px; background:var(--rule-strong); font-style:normal; }
.hour-rule span{ font-size:.75rem; letter-spacing:.14em; color:var(--ink-aged); }

/* load-deeper */
.load-deeper{ display:flex; align-items:center; gap:1rem; width:100%; margin-top:1.6rem;
  color:var(--ink-2); font-size:.95rem; }
.load-deeper::before,.load-deeper::after{ content:""; flex:1; height:1px; background:var(--rule-strong); }
.load-deeper span{ border:1px solid var(--rule-strong); border-radius:99px; padding:.5rem 1.4rem;
  transition:background .2s, border-color .2s, color .2s; }
.load-deeper:not(:disabled):hover span{ background:var(--paper-lift); border-color:var(--rubric); color:var(--ink); }
.load-deeper:disabled{ cursor:default; color:var(--ink-aged); }
.load-deeper:disabled span{ border-style:dashed; }

/* ---------- 6 · page intro (news / articles) ---------- */
.page-intro{ max-width:76rem; margin:3rem auto 2.4rem; padding-inline:1.5rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2rem; }
.page-intro h1{ font-size:clamp(2.3rem,5vw,3.6rem); font-weight:800; letter-spacing:-.015em; line-height:1.05; }
.page-intro .kicker{ color:var(--rubric); font-size:.8rem; font-weight:700; letter-spacing:.22em;
  margin-block-end:.6rem; display:block; }
.page-intro p.dek{ color:var(--ink-2); margin-top:.9rem; max-width:36rem; font-size:1.05rem; }
.page-device{ text-align:center; color:var(--rule-strong); font-size:.8rem; letter-spacing:.4em;
  align-self:center; line-height:2.2; user-select:none; }
.page-device b{ display:block; color:var(--gold); font-size:1.5rem; letter-spacing:0; }
@media (max-width:760px){ .page-intro{ grid-template-columns:1fr; } .page-device{ display:none; } }

/* ---------- 7 · the news board: feed + apparatus key ---------- */
.news-board{ max-width:76rem; margin-inline:auto; padding:0 1.5rem 4rem;
  display:grid; grid-template-columns:minmax(0,1fr) var(--gloss-w); gap:3.4rem; align-items:start; }
.board-key{ position:sticky; top:7.5rem; font-size:.86rem; color:var(--ink-2);
  border:1px solid var(--rule); background:var(--paper-lift); padding:1.1rem 1.2rem 1.2rem; }
.board-key dl{ display:grid; grid-template-columns:1.3rem 1fr; gap:.45rem .6rem; margin-top:.8rem; }
.board-key dt{ color:var(--rubric); text-align:center; font-size:.78rem; }
.board-key dd{ margin:0; }
.board-key .key-note{ margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--rule-strong);
  font-size:.8rem; color:var(--ink-aged); line-height:1.6; }
.board-key .key-note b{ color:var(--ink-2); }
@media (max-width:1020px){ .news-board{ grid-template-columns:1fr; } .board-key{ position:static; order:2; } }

/* filter rail — the tractates */
.filter-rail{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:1.8rem; }
.filter-rail button{ font-size:.9rem; color:var(--ink-2); border:1px solid var(--rule);
  border-radius:99px; padding:.38rem 1.05rem; transition:all .18s; background:transparent; }
.filter-rail button:hover{ border-color:var(--rule-strong); color:var(--ink); }
.filter-rail button.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filter-rail button.active::before{ content:"● "; color:var(--rubric-soft); font-size:.6em; vertical-align:.35em; }

/* ---------- 8 · the catalog — articles as an אוצר ---------- */
.catalog-board{ max-width:76rem; margin-inline:auto; padding:0 1.5rem 4rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(15rem,19rem); gap:3.4rem; align-items:start; }
.catalog-tools{ display:flex; gap:1.4rem; align-items:end; flex-wrap:wrap; margin-block-end:1.6rem; }
.catalog-tools .filter-rail{ margin:0; }
.search-line{ margin-inline-start:auto; display:flex; align-items:baseline; gap:.6rem; min-width:15rem; }
.search-line label{ font-size:.8rem; color:var(--rubric); font-weight:700; letter-spacing:.1em; }
.search-line input{ font:inherit; font-size:.95rem; background:transparent; border:0;
  border-block-end:1px solid var(--rule-strong); color:var(--ink); padding:.25rem .1rem; flex:1; min-width:0; }
.search-line input:focus{ outline:none; border-block-end-color:var(--tekhelet); box-shadow:0 1px 0 var(--tekhelet); }
.search-line input::placeholder{ color:var(--ink-aged); opacity:.75; }

.catalog{ display:flex; flex-direction:column; }
.catalog-row{ display:grid; grid-template-columns:4.2rem minmax(0,1fr) auto;
  gap:1.1rem; align-items:baseline; padding:1.15rem .4rem; border-block-end:1px solid var(--rule);
  color:var(--ink); position:relative; }
.catalog-row:hover{ text-decoration:none; background:rgba(250,245,233,.85); }
.catalog-row .shelf{ font-size:.72rem; color:var(--gold); letter-spacing:.12em; font-weight:700; }
.catalog-row strong{ font-size:1.16rem; font-weight:700; line-height:1.4; transition:color .18s; }
.catalog-row:hover strong{ color:var(--rubric); }
.catalog-row .cr-meta{ font-size:.78rem; color:var(--ink-aged); letter-spacing:.05em; white-space:nowrap; }
.catalog-row .cr-meta b{ color:var(--rubric); font-weight:700; }
.catalog-row .cr-excerpt{ grid-column:2 / -1; color:var(--ink-2); font-size:.92rem; line-height:1.6;
  display:none; }
@media (max-width:1020px){
  .catalog-board{ grid-template-columns:1fr; }
  .catalog-row .cr-excerpt{ display:block; }  /* lens folds into the flow */
  .catalog-lens{ display:none; }
}
@media (max-width:640px){
  .catalog-row{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .catalog-row .shelf{ order:-1; }
  .catalog-row .cr-excerpt{ grid-column:1 / -1; }
}

/* the lens — a marginal gloss that reads the hovered entry aloud */
.catalog-lens{ position:sticky; top:7.5rem; border-inline-start:2px solid var(--rubric);
  padding:.4rem 1.4rem .9rem; min-height:16rem; }
.catalog-lens .reg-head{ border:0; padding:0; margin-block-end:1rem; }
.catalog-lens h2{ font-size:1.25rem; line-height:1.4; font-weight:800; margin-block-end:.7rem; }
.catalog-lens p{ font-size:.94rem; color:var(--ink-2); line-height:1.7; }
.catalog-lens .lens-meta{ margin-top:1rem; font-size:.78rem; color:var(--ink-aged); letter-spacing:.06em; }
.catalog-lens .lens-meta b{ color:var(--rubric); }
.catalog-lens.ink-in > *{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  .catalog-lens.ink-in > *{ animation:inkIn .32s ease both; }
  @keyframes inkIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
}

/* pager — leaves of the catalog */
.pager{ display:flex; align-items:center; gap:1.4rem; justify-content:center; margin-top:2rem;
  font-size:.92rem; color:var(--ink-2); }
.pager button{ border:1px solid var(--rule-strong); border-radius:99px; padding:.4rem 1.2rem;
  color:var(--ink); transition:all .18s; }
.pager button:not(:disabled):hover{ border-color:var(--rubric); background:var(--paper-lift); }
.pager button:disabled{ opacity:.35; cursor:default; }
.pager span b{ color:var(--rubric); font-weight:700; }

/* home catalog slips — 2×2 preview */
.slip-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 2.6rem; }
.slip{ position:relative; padding-top:1.3rem; color:var(--ink); display:block; }
.slip::before{ content:""; position:absolute; inset-inline:0; top:.55rem; height:1px; background:var(--rule-strong); }
.slip .shelf{ position:absolute; top:0; inset-inline-start:0; background:var(--paper);
  padding-inline-end:.7rem; font-size:.72rem; color:var(--gold); font-weight:700; letter-spacing:.12em; }
.slip .slip-cat{ position:absolute; top:0; inset-inline-end:0; background:var(--paper);
  padding-inline-start:.7rem; font-size:.72rem; color:var(--rubric); font-weight:700; letter-spacing:.1em; }
.slip h3{ font-size:1.28rem; font-weight:800; line-height:1.35; margin-block:.5rem .55rem;
  transition:color .18s; }
.slip:hover{ text-decoration:none; }
.slip:hover h3{ color:var(--rubric); }
.slip p{ color:var(--ink-2); font-size:.95rem; line-height:1.65; }
.slip .slip-foot{ margin-top:.7rem; font-size:.78rem; color:var(--ink-aged); letter-spacing:.06em; }
.slip .slip-foot::after{ content:"←"; margin-inline-start:.5em; display:inline-block; transition:transform .22s; }
.slip:hover .slip-foot::after{ transform:translateX(-4px); }
@media (max-width:760px){ .slip-grid{ grid-template-columns:1fr; } }

/* ---------- 9 · the article — the crown of the edition ---------- */
.article-cover{ max-width:76rem; margin:3.2rem auto 0; padding-inline:1.5rem; text-align:center; }
.article-cover .kicker{ color:var(--rubric); font-weight:700; font-size:.82rem; letter-spacing:.22em; }
.article-cover .kicker .shelf{ color:var(--gold); }
.article-cover h1{ font-size:clamp(2.2rem,5.4vw,4rem); font-weight:800; letter-spacing:-.015em;
  line-height:1.1; max-width:24ch; margin:1.1rem auto .9rem; text-wrap:balance; }
.article-cover .cover-dek{ font-size:1.2rem; color:var(--ink-2); max-width:36rem; margin-inline:auto; line-height:1.65; }
.attribution{ margin-top:1.6rem; font-size:.85rem; color:var(--ink-aged); letter-spacing:.08em; }
.attribution b{ color:var(--ink-2); font-weight:700; }
.attribution::before,.attribution::after{ content:" ❧ "; color:var(--gold); letter-spacing:0; }

.article-leaf{ max-width:76rem; margin:2.6rem auto 0; padding:0 1.5rem 2rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) var(--gloss-w) minmax(0,1fr);
  column-gap:3rem; }
.article-body{ grid-column:2; font-size:1.13rem; line-height:1.85; }
.gloss-rail{ grid-column:3; position:relative; }
.article-body > p{ margin-block-end:1.5em; }
.article-body .lead-p .initial-word{ border:1px solid var(--rubric); padding:.02em .18em;
  margin-inline-end:.18em; font-size:1.65em; }
.body-heading{ margin:2.6em 0 1em; font-size:1.45rem; font-weight:800; line-height:1.3; }
.body-heading .perek{ display:block; color:var(--rubric); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; margin-block-end:.35rem; }
.body-heading::after{ content:""; display:block; width:3.2rem; height:2px; background:var(--rubric);
  margin-top:.55rem; }

/* gloss marks in the running text */
.gm{ font-size:.68em; color:var(--tekhelet); font-weight:700; cursor:pointer; padding-inline:.15em;
  vertical-align:.55em; line-height:0; border-radius:2px; }
.gm::before{ content:"["; color:var(--rule-strong); } .gm::after{ content:"]"; color:var(--rule-strong); }
.gm.lit{ background:rgba(30,78,140,.12); }
/* the glosses themselves — authored in-flow (mobile), lifted to the rail (desktop) */
.gloss{ font-size:.86rem; line-height:1.6; color:var(--ink-2);
  border-inline-start:2px solid var(--rule-strong); padding-inline-start:.9rem;
  margin:1.2rem 0 1.6rem; max-width:32rem; transition:border-color .2s, color .2s; }
.gloss .g-key{ color:var(--tekhelet); font-weight:700; margin-inline-end:.4em; }
.gloss.lit{ border-inline-start-color:var(--tekhelet); color:var(--ink); }
.gloss-rail .gloss{ position:absolute; inset-inline:0; margin:0; max-width:none; }
.gloss-rail .reg-head{ margin-block-end:0; }

/* the pull-quote — a tosafot block breaking into the margin */
.pull-quote{ position:relative; margin:2.2em 0 2.2em -1rem; padding:1.15em 1.4em; background:var(--paper-deep);
  border-inline-end:3px solid var(--rubric); font-size:1.35rem; line-height:1.5; font-weight:700;
  color:var(--ink); }
.pull-quote::before{ content:"״"; position:absolute; top:-.28em; inset-inline-start:.35rem;
  color:var(--rubric); font-size:2.3em; line-height:1; opacity:.85; }

/* takeaways — the מסורה קטנה box */
.takeaways{ margin:2.8em 0; border-block:1px solid var(--rule-strong); position:relative;
  padding:1.6em .4em 1.5em; }
.takeaways::before,.takeaways::after{ content:""; position:absolute; inset-inline:0; height:1px;
  background:var(--rule-strong); }
.takeaways::before{ top:3px; } .takeaways::after{ bottom:3px; }
.takeaways .reg-head{ border:0; padding:0; margin-block-end:.4rem; }
.takeaways h3{ font-size:1.3rem; font-weight:800; margin-block-end:.9rem; }
.takeaways ol{ list-style:none; counter-reset:tk; }
.takeaways li{ counter-increment:tk; position:relative; padding-inline-start:2.4rem;
  margin-block-end:.8em; font-size:1.02rem; line-height:1.6; }
.takeaways li::before{ content:counter(tk, hebrew) "׳"; position:absolute; inset-inline-start:0; top:.05em;
  color:var(--rubric); font-weight:800; font-size:1.05rem; }

/* folio rail — chapter position, fixed at the outer margin */
.folio-rail{ position:fixed; inset-inline-end:1.2rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.85rem; z-index:30; max-width:7.5rem; }
.folio-rail a{ font-size:.72rem; letter-spacing:.05em; line-height:1.35; color:var(--ink-aged);
  border-inline-end:2px solid var(--rule); padding-inline-end:.6rem; text-align:end;
  transition:color .2s, border-color .2s; }
.folio-rail a:hover{ text-decoration:none; color:var(--ink); }
.folio-rail a.current{ color:var(--rubric); border-inline-end-color:var(--rubric); font-weight:700; }
@media (max-width:1450px){ .folio-rail{ display:none; } }

/* article colophon + next-read catchword */
.article-colophon{ text-align:center; margin:3.4em auto 0; color:var(--ink-2); font-size:.95rem; }
.article-colophon .c-mark{ color:var(--gold); letter-spacing:.5em; margin-inline-end:-.5em;
  display:block; margin-block-end:.9em; font-size:.8rem; }
.article-colophon p{ max-width:30rem; margin-inline:auto; }
.article-colophon p + p{ max-width:22rem; margin-top:.4em; font-size:.85rem; color:var(--ink-aged); }
.next-read{ display:block; margin:2.6em auto 0; max-width:26rem; text-align:center;
  border:1px solid var(--rule-strong); padding:1.2rem 1.6rem; color:var(--ink);
  transition:border-color .2s, background .2s; }
.next-read:hover{ text-decoration:none; border-color:var(--rubric); background:var(--paper-lift); }
.next-read span{ display:block; font-size:.72rem; letter-spacing:.22em; color:var(--rubric);
  font-weight:700; margin-block-end:.4rem; }
.next-read strong{ font-size:1.12rem; font-weight:800; }

@media (max-width:1080px){
  .article-leaf{ display:block; max-width:46rem; }
  .gloss-rail{ display:none; }
  .pull-quote{ margin-inline:0; }
}

/* ---------- 10 · colophon footer — the inverted triangle ---------- */
.colophon{ margin-top:4.5rem; padding:0 1.5rem 2.6rem; text-align:center; }
.colophon .rule-oxford{ max-width:76rem; margin:0 auto 2.2rem; }
.colophon p{ margin-inline:auto; line-height:1.75; }
.colophon .c1{ max-width:34rem; font-size:1.02rem; color:var(--ink); }
.colophon .c2{ max-width:26rem; font-size:.92rem; color:var(--ink-2); margin-top:.35rem; }
.colophon .c2 strong{ font-weight:800; }
.colophon .c3{ max-width:20rem; font-size:.85rem; margin-top:.35rem; }
.colophon .c3 a{ margin-inline:.35rem; }
.colophon .c4{ max-width:13rem; font-size:.75rem; color:var(--ink-aged); letter-spacing:.12em; margin-top:.4rem; }
.colophon .device{ display:block; color:var(--rubric); margin-top:1.1rem; font-size:.85rem; }

/* ---------- 11 · niceties ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}