: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}
  /* `order:-1` cannot lift the medallion here: .hero-copy is placed EXPLICITLY at
     grid-row 1, and an explicitly-placed grid item ignores order — so the art was
     auto-placed into row 2 and sat below the copy, the opposite of what the
     stacked layout is for. Naming both rows says it outright and cannot be
     out-voted by placement. Measured at 375px: art top 110, copy top 190. */
  .hero-art{grid-column:1; grid-row:1; order:-1; max-width:150px}
  .hero-copy{grid-column:1; grid-row:2}
}

/* ---- the language strip (torah.today) ---------------------------------------
   This page sits inside torah.today, which carries its own shared nav, so the
   landing's nav bar was removed. The three-register toggle had to survive it:
   these are the same .langsw/.langbtn controls, in a strip of their own with the
   wordmark, so the page still says what it is and can still be read in English,
   Yeshiva English or עברית. */
.langbar{max-width:840px; margin:0 auto 14px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; flex-wrap:wrap}
.langbar .brand{font-family:"Heebo",sans-serif; font-weight:900; color:var(--stamp);
  font-size:1.15rem; text-decoration:none; border-bottom:2px solid var(--maroon)}
.langbar .brand:hover{color:var(--brass)}
.langbar .langwrap{display:inline-flex; align-items:center; gap:6px}
html[dir="rtl"] .langbar .brand{font-family:"Frank Ruhl Libre",serif}
@media print{ .langbar{display:none} }

/* ---- the curriculum strip (torah.today) -------------------------------------
   One school learns Pesachim, another Kiddushin, and the same page has to serve
   both without either being buried. Every masechta this site carries sits here,
   one click apart, on every one of their pages. */
.curric{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:840px; margin:0 auto 16px}
.curric .cu{display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line);
  padding:6px 14px; transition:.14s}
.curric .cu .he{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1rem; color:var(--stamp)}
.curric .cu .en{font-family:"Heebo",sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase; direction:ltr}
.curric .cu:hover{border-color:var(--brass)}
.curric .cu:hover .he{color:var(--brass)}
.curric .cu.on{background:var(--brass); border-color:var(--brass)}
.curric .cu.on .he,.curric .cu.on .en{color:#fff}
/* a row with no numbered disc — the shiur's seforim, which have no perek number */
.pk.nolead{grid-template-columns:1fr auto}

/* ---- living inside torah.today ----------------------------------------------
   Yeshiva 101 keeps its own identity — the brass, the oxblood, the medallion —
   but it is a room in this house now, not a separate building. So it takes the
   house's GROUND and the house's geometry: the same warm greys the reader and
   the library are drawn on, and the same square corners. The accent colours are
   untouched; what changes is what they sit on. */
:root{
  --klaf:#eae7dc;        /* torah.today --page */
  --klaf-deep:#e1ded2;   /* torah.today --deep */
  --paper:#f9f6ee;       /* torah.today --raise */
  --line:#d5cdb8;        /* a hairline that reads on both */
}
.sheet,.masintro,.cards .card,.pk,.w3,.fct,.sg,.oddity,.langbar .brand,
.curric .cu,.langsw,.langbtn,.pgbtn,.btn,.pill,.ms,.tchip{border-radius:0}

/* A hero with no medallion — a masechta whose own artwork is not made yet — must
   not leave the 220px art column standing empty beside the copy. */
.hero-row:not(:has(.hero-art)){grid-template-columns:minmax(0,1fr)}

/* ---- the house's type ------------------------------------------------------
   Yeshiva 101 arrived with its own two faces — Frank Ruhl Libre for Hebrew and
   display, Heebo for everything else — while torah.today sets its chrome in
   Space Grotesk and its numbers and labels in IBM Plex Mono. Two typographic
   systems in one site is the thing you notice without being able to name.
   Frank Ruhl STAYS: it is the manuscript voice this page is built on, and the
   daf landing already uses it, so it is part of the house rather than a guest.
   What changes is the CHROME — labels, buttons, small caps, counts — which now
   speaks in the site's own voice. */
/* `.hero .eyebrow` (0,2,0) outranks a bare `.eyebrow`, so the eyebrow is named
   at that weight too rather than left as the one label still in the old face */
.hero .eyebrow,.eyebrow,.kick,.pill,.btn,.pgbtn,.langbtn,.curric .cu .en,.pk-t i,.pk-en,
.bench-h .lbl,.bench-h .names,.dh-mef,.seg-num,.hint,.foot,.langlbl,
.mf-lang button,.navbtn,.wd,.lede,.why,.sgt,.fct,.oddity,.shas-more summary{
  font-family:'Space Grotesk','Heebo',sans-serif}
/* numbers, ranges and addresses — tabular, mono, the same as everywhere else */
.pk-r b,.pk-n,.stat b,.curric .cu .en,.seg-num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* the perek disc keeps its Hebrew letter in the display face */
.pk-n{font-family:'Frank Ruhl Libre',serif}