:root{
  --klaf:#f5eddc; --klaf-deep:#efe3cb; --paper:#fbf6ea; --line:#d9c9a5;
  --ink:#22160a; --ink-soft:#5c4a33; --brass:#a9761f; --brass-soft:#d8b877;
  --stamp:#7a2e22; --oxblood:#7c3b3b; --maroon:#8f3222; --maroon-soft:#b5674f;
}
*{box-sizing:border-box}
body{margin:0; background:var(--klaf); color:var(--ink); font-family:"Heebo",sans-serif; line-height:1.6; padding:24px 14px 18px}
.wrap{max-width:840px; margin:0 auto}
.sheet{background:var(--paper); border:1px solid var(--line); border-radius:3px; box-shadow:0 1px 0 #fff inset, 0 6px 22px rgba(70,45,15,.12); padding:30px 30px 26px}
.head{text-align:center; border-bottom:2px solid var(--brass); padding-bottom:14px; margin-bottom:16px}
.bsd{font-size:.8rem; color:var(--ink-soft); letter-spacing:.1em; margin-bottom:6px}
.head .mas{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:2.05rem; color:var(--ink); line-height:1.15}
.head .per{font-family:"Frank Ruhl Libre",serif; font-size:1.15rem; color:var(--stamp); margin-top:2px}
.head .meta{font-size:.82rem; color:var(--ink-soft); margin-top:8px}
a.src{color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-soft)}
a.src:hover{color:var(--stamp)}
a.src::after{content:" ↗"; font-size:.68em; color:var(--ink-soft); border:none; vertical-align:super}
.daf-link{display:inline-block; margin-top:9px; font-size:.83rem; font-weight:500}
.hint{font-size:.8rem; color:var(--ink-soft); text-align:center; margin:2px 0 14px}

/* language toggle */
.mf-lang{display:flex; gap:0; border:1px solid var(--brass-soft); border-radius:3px; overflow:hidden; width:max-content; background:var(--paper)}
.mf-lang.glob{margin:0 auto 4px}
.mf-lang button{font-family:"Heebo"; font-size:.74rem; font-weight:700; border:none; background:transparent; color:var(--ink-soft); padding:5px 14px; cursor:pointer; border-left:1px solid var(--brass-soft)}
.mf-lang button:first-child{border-left:none}
.mf-lang button.on{background:var(--brass); color:#fff}

/* teaching frame */
.chak{background:#fff8ec; border:1px solid var(--brass-soft); border-radius:3px; padding:13px 16px; margin:14px 0}
.chak .q{font-family:"Frank Ruhl Libre",serif; font-size:1.06rem; font-weight:700; color:var(--stamp); margin-bottom:5px}
.chak p{margin:5px 0; font-size:.92rem; color:var(--ink-soft)}

/* ==== interlinear daf — the margin-bench layout ====
   Reads left → right: commentary bench | the Gemara line. One block per line; the
   line is sticky, so it stays under your eye while you read down its bench. The
   38px column gutter is what makes it read as a margin and not two stacked blocks. */
h3.sec{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.12rem; color:var(--brass); margin:20px 0 6px; padding-bottom:5px; border-bottom:1px dotted var(--brass-soft)}
#daf .load,#daf .err{font-family:"Heebo"; font-size:.92rem; color:var(--ink-soft); padding:14px 4px}
#daf .err a{color:var(--brass)}
.seg-block{
  display:grid; direction:ltr;                 /* pinned: bench always left, Gemara always right */
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  grid-template-areas:"num num" "bench gem";
  gap:2px 38px; align-items:start;
  border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px;
}
.seg-block:last-child{border-bottom:none}
.seg-block.whole{grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "bench"}
.seg-block.nobench{grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "gem"}
.seg-num{grid-area:num; font-family:"Heebo"; font-size:.68rem; font-weight:700; color:var(--brass-soft); letter-spacing:.1em; margin-bottom:5px}
.gem{grid-area:gem; position:sticky; top:14px; align-self:start;
  background:var(--klaf-deep); border-radius:2px; padding:13px 16px; margin:0}
.gem .seg,.gem .he{font-family:"Frank Ruhl Libre",serif; font-size:1.3rem; line-height:2.1; color:var(--ink)}
.comm{grid-area:bench; min-width:0; padding:0}
.en-only .seg{direction:ltr; text-align:left; font-family:"Heebo"; font-size:.94rem; line-height:1.7; color:var(--ink-soft)}
.seg sup,.he sup,.en sup{font-size:.7em; color:var(--brass)}

/* the bench header — what sits in the margin of this line */
.bench-h{display:flex; direction:ltr; justify-content:space-between; align-items:baseline; gap:10px;
  border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:11px}
.bench-h .lbl{font-family:"Heebo"; font-weight:800; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}
.bench-h .names{font-family:"Heebo"; font-weight:500; font-size:.68rem; color:var(--ink-soft);
  opacity:.85; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}

/* marker numbers: the call-and-response between a phrase and its comment */
.seg .mk,.he .mk,.en .mk{font-family:"Heebo",sans-serif; font-weight:800; font-size:.6rem;
  color:var(--brass); vertical-align:super; line-height:0; margin:0 3px;
  direction:ltr; unicode-bidi:isolate}
.dh-mk{font-family:"Heebo"; font-weight:800; font-size:.68rem; color:var(--brass);
  flex-shrink:0; width:12px; text-align:center}

/* per-dibbur rows: dashed chip when closed, spined panel when open */
.dh-item{border:1px dashed rgba(169,118,31,.5); border-radius:2px; margin-bottom:10px;
  transition:background .15s, border-color .15s}
.dh-item:hover{background:rgba(169,118,31,.07)}
.dh-item.open{background:#fffdf5; border:1px solid var(--line);
  border-inline-start:3px solid var(--brass)}
.dh-head{display:flex; gap:9px; align-items:baseline; padding:8px 11px; cursor:pointer; user-select:none}
.dh-head:hover .dh-lemma{color:var(--brass)}
.dh-chev{color:var(--brass); font-size:.7rem; transition:transform .22s; flex-shrink:0; width:12px; text-align:center}
.dh-item.open .dh-chev{transform:rotate(90deg)}
/* the title sits at the TOP of the chip, on the first line of the dibbur —
   never centred, or a comment that wraps pushes its own name into the middle */
.dh-mef{font-family:"Heebo"; font-size:.66rem; font-weight:700; color:#fff; background:var(--brass); border-radius:2px; padding:1px 7px; flex-shrink:0; align-self:baseline}
.dh-lemma{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.02rem; color:var(--stamp); transition:color .12s; min-width:0}
.dh-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease}
.dh-item.open .dh-panel{grid-template-rows:1fr}
.dh-panel>.dh-inner{overflow:hidden}
.dh-body{padding:2px 12px 10px}
.dh-body .seg{font-family:"Frank Ruhl Libre",serif; font-size:1.08rem; line-height:1.8; margin:0 0 5px}

/* one column on narrow screens: the line first, its bench beneath */
@media(max-width:860px){
  .seg-block{grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "gem" "bench"; gap:10px 0}
  .seg-block.whole{grid-template-areas:"num" "bench"}
  .gem{position:static}
  .gem .seg,.gem .he{font-size:1.18rem; line-height:2}
}

.foot{margin-top:16px; border-top:1px solid var(--line); padding-top:10px; display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-soft)}
.bar{max-width:840px; margin:0 auto 16px; display:flex; justify-content:flex-end}
.btn{font-family:"Heebo"; font-weight:700; font-size:.86rem; background:var(--brass); color:#fff; border:none; border-radius:3px; padding:8px 18px; cursor:pointer}
.btn:hover{background:#946416}
@media print{
  body{background:#fff; padding:0}
  .bar,.hint,.mf-lang,.nav{display:none}
  .sheet{box-shadow:none; border:none; padding:0}
  .dh-panel{grid-template-rows:1fr !important}
  .dh-chev{display:none}
  /* print reads as one column: the line, then everything said about it */
  .seg-block{grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "gem" "bench"}
  .seg-block.whole{grid-template-areas:"num" "bench"}
  .gem{position:static}
  .dh-item{break-inside:avoid}
}

/* the reader needs room for two columns; the rest of the site stays at 840 */
body.reader .wrap, body.reader .nav, body.reader .bar, body.reader .pager,
body.reader .tr-banner{max-width:1020px}

/* ---- nav ---- */
.nav{max-width:840px; margin:0 auto 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.nav .brand{font-family:"Frank Ruhl Libre",serif; font-weight:900; color:var(--stamp); font-size:1.15rem; text-decoration:none}
.nav .brand:hover{color:var(--brass)}
.nav .links{display:flex; gap:6px}
.nav a.navbtn{font-family:"Heebo"; font-size:.82rem; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:5px 12px; border:1px solid var(--line); border-radius:3px; background:var(--paper)}
.nav a.navbtn:hover{border-color:var(--brass); color:var(--brass)}
.nav a.navbtn[aria-disabled="true"]{opacity:.32; pointer-events:none}
/* ---- home ---- */
.masintro{background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:24px 28px; margin:0 auto 16px; max-width:840px; box-shadow:0 6px 22px rgba(70,45,15,.1)}
.masintro h1{font-family:"Frank Ruhl Libre",serif; font-size:2.1rem; margin:0 0 4px; color:var(--ink)}
.masintro .sub{font-family:"Frank Ruhl Libre",serif; color:var(--stamp); font-size:1.15rem; margin:0 0 10px}
.masintro p{color:var(--ink-soft); font-size:.95rem; margin:8px 0}
.perek-h{font-family:"Heebo"; font-weight:700; font-size:.78rem; letter-spacing:.06em; color:var(--brass); margin:16px auto 6px; max-width:840px}
.daf-grid{max-width:840px; margin:0 auto 10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px}
.daf-grid a{font-family:"Frank Ruhl Libre",serif; font-size:1.02rem; text-align:center; padding:8px 4px; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink); text-decoration:none; transition:.12s}
.daf-grid a:hover{border-color:var(--brass); background:var(--klaf-deep); color:var(--stamp)}

/* ---- home: cycle pills + cards ---- */
.cycle{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pill{font-family:"Heebo"; font-size:.76rem; font-weight:700; color:var(--ink-soft); background:var(--klaf-deep); border:1px solid var(--line); border-radius:20px; padding:4px 12px}
.pill.now{background:var(--brass); border-color:var(--brass); color:#fff}
.cards{max-width:840px; margin:0 auto 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cards .card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:14px 16px; text-decoration:none; transition:.12s}
.cards .card:hover{border-color:var(--brass); background:var(--klaf-deep)}
.cards .ct{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.12rem; color:var(--stamp); margin-bottom:3px}
.cards .cd{font-size:.85rem; color:var(--ink-soft); line-height:1.6}
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

/* ---- inline ד"ה anchors inside the Gemara ---- */
.anch{
  border-bottom:2px dotted var(--brass); border-radius:3px; padding:0 3px; cursor:pointer;
  transition:background .15s, color .12s;
}
.anch:hover{background:rgba(169,118,31,.12); color:var(--stamp)}
.anch.active{background:rgba(169,118,31,.20); color:var(--stamp); border-bottom-color:var(--stamp)}
.inline-comm{display:none; margin:0 0 4px}
.inline-comm.show{display:block; animation:fold-in .3s ease both}
@keyframes fold-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
/* the bench carries ONE header standard. It opens with a rule beneath it; every
   group inside it is divided by a rule above it. Same type, same tracking, same
   label+count shape — only the accent colour tells the sections apart. */
.bench-h .lbl, .tier-h, .rest-h{
  font-family:"Heebo",sans-serif; font-weight:800; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.tier-h, .rest-h{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  border-top:1px solid var(--line); margin:14px 0 9px; padding-top:9px; text-align:start;
}
.rest-h{color:var(--ink-soft)}
/* a group opening the bench sits under the bench rule — never two rules stacked */
.bench-h + .inline-comm > .tier-h:first-child,
.bench-h + .rest > .rest-h{border-top:none; margin-top:0; padding-top:0}
.rest{margin:0; border-top:none; padding-top:0}
.cnt{font-family:"Heebo"; font-size:.6rem; font-weight:800; letter-spacing:0;
  background:var(--klaf-deep); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:9px; padding:1px 7px; flex-shrink:0}

/* ---- site language switch (E / ע) ---- */
.langsw{display:inline-flex; border:1px solid var(--brass-soft); border-radius:3px; overflow:hidden; background:var(--paper); margin-inline-start:4px}
.langbtn{font-family:"Frank Ruhl Libre",serif; font-size:.92rem; font-weight:700; line-height:1; border:none; background:transparent; color:var(--ink-soft); padding:6px 10px; cursor:pointer; border-inline-start:1px solid var(--brass-soft)}
.langbtn:first-child{border-inline-start:none}
.langbtn.on{background:var(--brass); color:#fff}
.mf-lang button{font-family:"Frank Ruhl Libre",serif; font-size:.95rem; min-width:40px}
/* LTR adjustment when the site is in English */
html[dir="ltr"] .nav .brand{font-family:"Heebo",sans-serif}


/* ==== bilingual layout — direction-proof ====
   English ALWAYS left, Hebrew ALWAYS right, no matter the site language. */
.pair{
  display:grid; direction:ltr;                 /* pin the grid itself LTR */
  grid-template-columns:1fr 1fr;
  grid-template-areas:"en he";
  gap:14px; align-items:start; margin:0 0 12px;
}
.pair:last-child{margin-bottom:0}
.pair .en{grid-area:en; direction:ltr; text-align:left;
  font-family:"Heebo",sans-serif; font-size:.9rem; line-height:1.65; color:var(--ink-soft);
  border-right:1px solid var(--line); padding-right:12px; border-left:none; padding-left:0}
.pair .he{grid-area:he; direction:rtl; text-align:right;
  font-family:"Frank Ruhl Libre",serif; font-size:1.06rem; line-height:1.85; color:var(--ink)}

/* In the margin layout both columns are narrow, so the pair always stacks.
   The SOURCE leads with English on top (you read the sense, then the words);
   a COMMENT leads with the Hebrew, its translation beneath. */
.gem .pair{grid-template-columns:minmax(0,1fr); grid-template-areas:"en" "he"; gap:0}
.gem .pair .en{border-right:none; padding-right:0; padding-bottom:13px; margin-bottom:14px;
  border-bottom:1px solid var(--line); font-size:.94rem; line-height:1.6}
.gem .pair .he{font-size:1.3rem; line-height:2.1}
.dh-body .pair{grid-template-columns:minmax(0,1fr); grid-template-areas:"he" "en"; gap:0}
.dh-body .pair .en{border-right:none; padding-right:0; padding-top:8px; margin-top:9px;
  border-top:1px solid var(--line); font-size:.86rem; line-height:1.55}
/* commentary column keeps one consistent frame in both site languages */
.en-only{direction:ltr}
.en-only .seg{direction:ltr; text-align:left}

/* ==== direction is driven by the TEXT, never by the site chrome ==== */
#daf.mode-he, #daf.mode-both{direction:rtl}
#daf.mode-en{direction:ltr}
#daf.mode-he .comm, #daf.mode-both .comm{direction:rtl; text-align:right}
#daf.mode-en .comm{direction:ltr; text-align:left}
/* the accent spine hugs the side the text starts on */
#daf.mode-he .gem, #daf.mode-both .gem{border-right:3px solid var(--brass)}
#daf.mode-en .gem{border-left:3px solid var(--brass)}
#daf.mode-en .dh-body .seg{direction:ltr; text-align:left; font-family:"Heebo",sans-serif}
/* any element that declares dir="auto" aligns to its own script */
[dir="auto"]{text-align:start}
.dh-lemma[dir="auto"]{unicode-bidi:isolate}
/* Hebrew always reads right, English always reads left — regardless of container */
.pair .he, .gem .he{direction:rtl; text-align:right}
.pair .en, .en-only, .en-only .seg{direction:ltr; text-align:left}
.rest-h[dir="auto"]{text-align:start}
.err[dir="auto"], .load{text-align:start}

/* ==== mefarshim seder: tier headers + filter chips ==== */
.tchips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0 4px}
.tchip{min-width:88px; text-align:center; font-family:"Heebo"; font-size:.72rem; font-weight:700; border:1px solid var(--line);
  border-radius:20px; background:var(--paper); color:var(--ink-soft); padding:4px 12px; cursor:pointer; opacity:.45}
.tchip.on{background:var(--klaf-deep); border-color:var(--brass-soft); color:var(--stamp); opacity:1}
.tchip:hover{border-color:var(--brass)}
.tier-h{color:var(--brass)}   /* type comes from the shared bench-header standard above */
@media print{ .tchips{display:none} }

/* ==== sefer-style pager: prev ALWAYS right, next ALWAYS left ==== */
.pager{max-width:840px; margin:0 auto 10px; direction:ltr;   /* pinned — immune to site language */
  display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet + .pager, .pager:last-of-type{margin-top:12px}
.pgbtn{font-family:"Heebo"; font-size:.86rem; font-weight:700; color:var(--stamp);
  text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:7px 16px; display:inline-flex; align-items:center; gap:7px; transition:.12s}
.pgbtn:hover{border-color:var(--brass); color:var(--brass)}
.pgbtn .arr{color:var(--brass); font-size:1rem}
.pgbtn[aria-disabled="true"]{opacity:.3; pointer-events:none}
@media print{.pager{display:none}}

/* ==== accessibility: consistent keyboard focus everywhere ==== */
a:focus-visible, button:focus-visible, .tchip:focus-visible, .pgbtn:focus-visible,
.dh-head:focus-visible, .anch:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px; border-radius:2px;
}

/* ==== AI translation protocol: labeled, never confused with the human text ==== */
.ai-tag{font-family:"Heebo"; font-size:.6rem; font-weight:800; letter-spacing:.04em;
  background:var(--brass-soft); color:var(--stamp); border-radius:2px; padding:1px 6px;
  vertical-align:2px; margin-inline-end:6px; display:inline-block}
.tr-wait{font-family:"Heebo"; font-size:.78rem; color:var(--brass); margin-top:4px;
  animation:trpulse 1.2s ease-in-out infinite}
@keyframes trpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media print{.tr-wait{display:none}}

/* ==== language toggles: pinned LTR so the order never flips with the site language.
       Reads like the page itself — English left, both in the middle, Hebrew right. ==== */
.mf-lang, .langsw{direction:ltr}
.mf-lang button{border-left:1px solid var(--brass-soft); border-right:none}
.mf-lang button:first-child{border-left:none}
/* toggle pinned LTR: physical left border regardless of dir */
.langsw .langbtn{border-inline-start:none; border-left:1px solid var(--brass-soft)}
.langsw .langbtn:first-child{border-left:none}

/* ==== landing ==== */
.hero{max-width:840px; margin:6px auto 22px; text-align:center}
.hero .eyebrow{font-family:"Heebo"; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.hero h1{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:2.7rem; line-height:1.15; margin:8px 0 10px; color:var(--ink)}
.hero .lede{max-width:620px; margin:0 auto; color:var(--ink-soft); font-size:1.02rem; line-height:1.75}

.cta-row{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap}
.btn.cta{font-size:1rem; padding:11px 26px; border-radius:3px; text-decoration:none; display:inline-block}
a.btn.cta{background:var(--brass); color:#fff; font-family:"Heebo"; font-weight:700}
a.btn.cta:hover{background:#946416}
.demo{max-width:720px; margin:0 auto 26px; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:18px 20px 12px; box-shadow:0 6px 22px rgba(70,45,15,.1)}
.demo-hint{font-family:"Heebo"; font-size:.78rem; font-weight:700; color:var(--stamp); margin-bottom:8px; text-align:start}
.demo .seg-block{border-bottom:none; margin-bottom:0}
.demo-more{text-align:center; margin-top:6px; font-size:.86rem}
.steps{max-width:840px; margin:0 auto 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step3{display:flex; gap:10px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:14px}
.step3 .n{width:30px; height:30px; border-radius:50%; background:var(--brass); color:#fff; font-family:"Frank Ruhl Libre",serif; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.step3 b{display:block; font-family:"Frank Ruhl Libre",serif; font-size:1.02rem; color:var(--ink); margin-bottom:2px}
.step3 span{font-size:.85rem; color:var(--ink-soft); line-height:1.6}
.stats{max-width:840px; margin:0 auto 20px; display:grid; grid-template-columns:repeat(5,1fr); gap:9px}
.stat{background:var(--klaf-deep); border:1px solid var(--line); border-radius:3px; text-align:center; padding:14px 6px}
.stat b{display:block; font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.7rem; color:var(--stamp)}
.stat span{font-family:"Heebo"; font-size:.74rem; font-weight:700; color:var(--ink-soft)}
@media(max-width:640px){ .steps{grid-template-columns:1fr} .stats{grid-template-columns:repeat(3,1fr)} .hero h1{font-size:2.05rem} }

/* ==== AI translation: failures are visible, never silent ==== */
.tr-banner{max-width:840px; margin:6px auto 0; text-align:center; font-family:"Heebo";
  font-size:.8rem; color:#8a3524; background:#fdeee9; border:1px solid #e8c3b8;
  border-radius:3px; padding:7px 12px}
.tr-err{font-family:"Heebo"; font-size:.76rem; color:#8a3524; margin-top:4px; text-align:start}
@media print{.tr-banner,.tr-err{display:none}}


/* ==== click-to-translate ==== */
.tr-btn{font-family:"Heebo"; font-size:.74rem; font-weight:700; margin-top:6px;
  background:var(--paper); color:var(--brass); border:1px solid var(--brass-soft);
  border-radius:20px; padding:4px 13px; cursor:pointer; transition:.12s}
.tr-btn:hover{background:var(--brass); border-color:var(--brass); color:#fff}
.tr-btn:active{transform:translateY(1px)}
.arch-note{font-family:"Heebo"; font-size:.7rem; color:var(--ink-soft); text-align:center; margin:2px 0 0; opacity:.85}
.arch-note b{color:var(--stamp)}
@media print{.tr-btn,.arch-note{display:none}}

/* a freshly arrived translation announces itself gently, then settles */
.dh-body.just-tr{animation:trflash 1.2s ease-out}
@keyframes trflash{0%{background:#fdf3dd}100%{background:transparent}}
/* the daf holds its place while things open and close */
#daf{overflow-anchor:auto}

/* ==== Chassidus layer ==== */
/* Chassidus is a section of the bench, not a different kind of thing:
   same chip, same header standard — the stamp colour is all that sets it apart. */
.chas-box .rest-h{color:var(--stamp)}
.chas-box .cnt{background:#f6e6df; border-color:var(--maroon-soft); color:var(--stamp)}
.dh-item.chas .dh-mef{background:var(--stamp)}
/* a Chassidus row cites where it sits in its sefer — a citation, not a dibbur hamaschil */
.dh-cite{font-family:"Heebo"; font-size:.64rem; font-weight:500; color:var(--ink-soft);
  opacity:.9; margin-inline-start:auto; text-align:end; min-width:0}

/* sefer + school filters */
@media print{.chas-box{break-inside:avoid}}

/* ==== landing: the year band ==== */
.year{max-width:720px; margin:0 auto 22px; background:var(--paper); border:1px solid var(--line);
  border-radius:3px; padding:18px 22px; text-align:center}
.year-head{display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap}
.year-head .yr{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:2rem; color:var(--brass); line-height:1}
.year-head .mas{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.4rem; color:var(--ink)}
.year-p{color:var(--ink-soft); font-size:.93rem; line-height:1.75; margin:8px 0 12px}
.braisa{margin:0 0 12px; padding:10px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--klaf-deep)}
.braisa .q-he{font-family:"Frank Ruhl Libre",serif; font-size:1.1rem; color:var(--ink); direction:rtl; line-height:1.8}
.braisa .q-en{font-family:"Heebo"; font-size:.75rem; color:var(--ink-soft); margin-top:4px}

/* who it's for */
.who{max-width:840px; margin:0 auto 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.w3{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brass-soft);
  border-radius:3px; padding:14px 16px}
.w3 .wt{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.05rem; color:var(--stamp); margin-bottom:4px}
.w3 .wd{font-size:.85rem; color:var(--ink-soft); line-height:1.65}

/* closing call to action */
.cta-band{max-width:840px; margin:0 auto 8px; display:flex; gap:10px; justify-content:center;
  align-items:center; flex-wrap:wrap; padding:6px 0 2px}
@media(max-width:640px){ .who{grid-template-columns:1fr} }

/* ==== landing: masechta table of contents ==== */
.toc{max-width:840px; margin:0 auto 24px}
.toc-h{font-family:"Frank Ruhl Libre",serif; font-size:1.45rem; font-weight:900; text-align:center;
  margin:0 0 2px; color:var(--ink)}
.toc-s{text-align:center; color:var(--ink-soft); font-size:.88rem; margin:0 0 14px}
.pk{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:11px 14px; margin-bottom:6px; text-decoration:none; color:inherit; transition:.12s}
.pk:hover{border-color:var(--brass); background:#fffdf7; transform:translateX(2px)}
.pk-n{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.25rem; color:#fff;
  background:var(--brass); border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center}
.pk-t b{display:block; font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.06rem; color:var(--stamp)}
.pk-t i{display:block; font-style:normal; font-size:.83rem; color:var(--ink-soft); line-height:1.5; margin-top:1px}

.toc-all{text-align:center; margin-top:12px}
html[dir="rtl"] .pk:hover{transform:translateX(-2px)}
@media(max-width:560px){
  .pk{grid-template-columns:34px 1fr; gap:9px}
  .pk-d{grid-column:2; justify-self:start; margin-top:3px}
}

/* ==== worded language toggle: English · Yeshiva · עברית (pinned LTR, English leftmost) ==== */
.langbtn{font-family:"Heebo",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.01em;
  padding:5px 9px; white-space:nowrap}
.langsw .langbtn:last-child{font-family:"Frank Ruhl Libre",serif; font-size:.82rem}
@media(max-width:560px){
  .langbtn{font-size:.64rem; padding:5px 7px}
  .nav .links{flex-wrap:wrap; gap:5px}
}

/* ==== landing: where the masechta sits in Shas ==== */
.shas{max-width:840px; margin:0 auto 24px}
.moed{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:12px 0 16px}
.ms{font-family:"Heebo"; font-size:.72rem; font-weight:600; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:4px 11px}
.ms.prev{background:var(--klaf-deep); color:var(--stamp); border-color:var(--brass-soft)}
.ms.now{background:var(--brass); border-color:var(--brass); color:#fff; font-weight:800;
  box-shadow:0 2px 8px rgba(169,118,31,.3)}
.shas-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.sg{background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:14px 16px}
.sgt{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.02rem; color:var(--stamp); margin-bottom:5px}
.sgd{font-size:.86rem; color:var(--ink-soft); line-height:1.7}
.oddity{margin-top:12px; background:#fff8ec; border:1px solid var(--brass-soft); border-radius:3px;
  padding:10px 15px; font-size:.85rem; color:var(--ink-soft); line-height:1.65}
.odd-t{font-family:"Heebo"; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); display:block; margin-bottom:2px}
@media(max-width:640px){ .shas-grid{grid-template-columns:1fr} }

/* perek row: English title leads, Hebrew name beneath */
html[dir="ltr"] /* the language switch, made obvious */
.langlbl{font-family:"Heebo"; font-size:.68rem; font-weight:700; color:var(--ink-soft);
  letter-spacing:.04em; margin-inline-start:6px; align-self:center}
.langsw{box-shadow:0 1px 4px rgba(70,45,15,.14)}
.shas-note{max-width:720px; margin:0 auto 14px; font-size:.82rem; color:var(--ink-soft);
  line-height:1.65; text-align:center; background:var(--klaf-deep); border:1px solid var(--line);
  border-radius:3px; padding:9px 15px}

/* seder strip with perek counts */
.ms{display:inline-flex; align-items:baseline; gap:5px}
.ms i{font-style:normal; font-size:.62rem; font-weight:800; opacity:.65}
.ms.now i{opacity:.9}
/* sourced facts row */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 14px}
.fct{background:var(--klaf-deep); border:1px solid var(--line); border-radius:3px; padding:11px 14px}
.fct b{display:block; font-family:"Frank Ruhl Libre",serif; font-size:.95rem; color:var(--stamp); margin-bottom:3px}
.fct span{font-size:.8rem; color:var(--ink-soft); line-height:1.6}
@media(max-width:700px){ .facts{grid-template-columns:1fr} }

/* perek row: English left, Hebrew right — matching weight, daf range beneath in small */
.pk{direction:ltr}                                  /* pinned: number · English · Hebrew */
.pk-t{min-width:0}
.pk-r{text-align:right; direction:rtl; white-space:nowrap; padding-inline-start:10px}
.pk-r b{display:block; font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.06rem;
  color:var(--stamp); line-height:1.35}
.pk-r b:empty{display:none}
.pk-r i{display:block; font-style:normal; font-family:"Heebo",sans-serif; font-size:.72rem;
  font-weight:700; color:var(--brass); margin-top:2px; letter-spacing:.02em}
@media(max-width:560px){
  .pk{grid-template-columns:34px 1fr auto; gap:9px}
  .pk-r b{font-size:.95rem}
}

/* the DreamSite credit sits right under the footer — no dead space beneath it */
body > script + *, .credit, #dreamsite-credit{margin-bottom:0 !important}
.foot{margin-bottom:6px}

/* ==== Shas background: collapsible, doesn't interrupt the flow ==== */
.shas-more{max-width:720px; margin:0 auto 14px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper); overflow:hidden}
.shas-more summary{font-family:"Heebo"; font-size:.83rem; font-weight:700; color:var(--brass);
  padding:10px 15px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px}
.shas-more summary::-webkit-details-marker{display:none}
.shas-more summary::before{content:"▸"; font-size:.7rem; transition:transform .15s; color:var(--brass)}
.shas-more[open] summary::before{transform:rotate(90deg)}
.shas-more summary:hover{background:var(--klaf-deep)}
.sm-body{padding:2px 16px 12px; border-top:1px solid var(--line)}
.sm-body p{font-size:.86rem; color:var(--ink-soft); line-height:1.72; margin:10px 0 0}
.sm-body b{color:var(--stamp); font-weight:700}

/* ==== hero artwork beside the headline ==== */



/* two-group filter label (Nigla / Chassidus) */
.chip-lbl{font-family:"Heebo"; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass); text-align:center; margin:8px 0 3px}

/* ==== maroon accent, drawn from the medallion — used sparingly as a second accent ==== */
.eyebrow{color:var(--maroon)}                               /* the "source page for yeshivos" tag */
.year-head .mas{border-bottom:2px solid var(--maroon)}      /* masechta name underlined in maroon */
.pk-n{background:var(--maroon)}                             /* perek number discs */
.pk:hover{border-color:var(--maroon)}
.pk-r b{color:var(--maroon)}                                /* hebrew perek names */
.toc-h{border-bottom-color:var(--maroon)}
.fct b{color:var(--maroon)}
.sgt{color:var(--maroon)}
.ms.now{background:var(--maroon); border-color:var(--maroon)} /* current masechta chip in the strip */
.shas-more summary{color:var(--maroon)}
.shas-more summary::before{color:var(--maroon)}
.w3{border-left-color:var(--maroon)}                        /* who-it's-for cards */
.wt{color:var(--maroon)}
.stat b{color:var(--maroon)}                                /* the big numbers */
.cta{background:var(--maroon); border-color:var(--maroon)}  /* primary CTA button */
.cta:hover{background:#7a2a1c}
.brand{border-bottom:2px solid var(--maroon)}
.hero h1 b, .lede b{color:var(--maroon)}


.hero-row .eyebrow,

/* ===== hero: copy left, medallion right, tops aligned ===== */
.hero-row{display:grid; grid-template-columns:minmax(0,1fr) 220px; column-gap:36px; align-items:center; text-align:start; margin-top:8px}
.hero-copy{grid-column:1; grid-row:1; min-width:0; align-self:center}
.hero-copy .eyebrow, .hero-copy h1, .hero-copy .lede{text-align:start; margin-left:0; margin-right:0}
.hero-copy .lede{max-width:none; margin:6px 0 0}
.hero-art{grid-column:2; grid-row:1; align-self:center; justify-self:end; max-width:220px; width:100%; filter:drop-shadow(0 5px 16px rgba(122,46,34,.20))}
.hero-art img{width:100%; height:auto; display:block}
@media(max-width:720px){
  .hero-row{grid-template-columns:1fr; gap:14px; text-align:center; justify-items:center}
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy .lede{text-align:center}
  .hero-art{grid-column:1; order:-1; max-width:150px}
}