:root{
  /* A hint of warm paper behind white panels; the name's green is the one
     site colour (links, buttons, focus); gold marks only the together tag.
     The w0..w7 tones follow a word through its card, its marks in the
     sources panel and its heading, so a group can be read by colour. */
  --bg:#fbf9f4; --panel:#fff; --ink:#1d1d1f; --dim:#6b675f; --faint:#8f8a7e;
  --line:#ebe6da; --accent:#1d6b2a; --accent-soft:#e6efe2; --shadow:0 1px 3px rgba(60,50,30,.06),0 8px 28px rgba(60,50,30,.05);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  --radius:14px; --heb:"Frank Ruhl Libre","SF Hebrew","Noto Sans Hebrew","Arial Hebrew","Times New Roman",serif;
  --brand:#14601f; --brand-sub:#2f6b3a;
  --gold:#8a6d2a; --gold-soft:#f2e8cf;
  --w0:#3f6690; --w1:#98583a; --w2:#2f7a72; --w3:#7a4f86; --w4:#6d7431; --w5:#9a4a5e; --w6:#4b5aa0; --w7:#8a5a24;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#12110e; --panel:#1c1a16; --ink:#f3efe6; --dim:#b1aa9c; --faint:#8f887a;
  --line:#2f2b24; --accent:#6cc27d; --accent-soft:#1c2a1e; --shadow:0 1px 3px rgba(0,0,0,.5);
  --brand:#6cc27d; --brand-sub:#8fcf9b;
  --gold:#d9b86b; --gold-soft:#2c2616;
  --w0:#8fb1d8; --w1:#e0a07e; --w2:#72c2b8; --w3:#c29bd0; --w4:#b8c070; --w5:#df95a8; --w6:#9aa8e6; --w7:#d9a36a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:940px;margin:0 auto;padding:0 22px 96px}

/* header ------------------------------------------------------------------ */
header.site{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:15px 26px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
/* The same serif wordmark as the home page. */
.brand{font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:700;color:var(--brand);font-size:24px;flex:0 0 auto;
  white-space:nowrap}
.brand:hover{text-decoration:none;opacity:.75}
.hsearch{flex:1 1 auto;position:relative;max-width:520px;margin:0 auto}
.hsearch input{width:100%;height:40px;padding:0 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);font-size:15px;outline:none}
.hsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
header.bare .brand{flex:1}
.navs{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--line);border-radius:9px}
/* Quieter than the browse control: it is a different kind of page, not a third
   way of looking at the same list. */
.meth{color:var(--dim);font-size:17px;font-weight:500;white-space:nowrap}
.meth:hover{color:var(--ink);text-decoration:none}
.meth.on{color:var(--ink)}
/* Frank Ruhl Libre runs small beside the interface face, so the Hebrew tabs take
   a size of their own to sit level with A-Z rather than under it. */
.seg a.ix{font-family:var(--heb);font-size:1.2em;line-height:1.15;position:relative;top:1px}
.seg a{position:relative;padding:6px 18px;border-radius:7px;font-size:17px;color:var(--dim);font-weight:500}
.seg a:hover{text-decoration:none;color:var(--ink);background:rgba(255,255,255,.55)}
.seg a.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* A hairline between the two segments. On an entry page neither is selected,
   and without it "Hebrew" and "English" were two identical grey labels 2px
   apart that read as one phrase. It hides beside a selected segment, as a
   segmented control does, since the raised pill already separates them. */
.seg a+a::before{content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:1px;
  background:var(--faint);opacity:.45}
.seg a.on::before,.seg a.on+a::before{opacity:0}
/* Phones. The header never wrapped, so every page was ~495px wide on a 375px
   screen and scrolled sideways: the English tab sat off the right edge and the
   header search was crushed to 29px. It now wraps to two rows, wordmark and
   tabs on the first and a full-width search on the second, measured at 430,
   390, 375 and 360px. Methodology stays visible at every one of them; only a
   320px screen takes a third row, and even there nothing scrolls sideways. */
@media (max-width:700px){
  header.site{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .brand{font-size:17px}
  .navs{gap:8px;margin-left:auto}
  .meth{font-size:13px;padding:6px 0}
  .seg a{padding:4px 9px;font-size:13px}
  .hsearch{order:3;flex:1 1 100%;max-width:none;margin:0}
  .hsearch input{height:34px}
}
@media (max-width:400px){
  header.site{gap:8px}
  .brand{font-size:16px}
  .navs{gap:6px}
  .meth{font-size:12.5px}
  .seg a{padding:4px 8px;font-size:12.5px}
}

/* home -------------------------------------------------------------------- */
.hero{padding:64px 0 30px;text-align:center}
.banner{margin:0 0 30px}
/* A serif wordmark over a letterspaced small-caps line and a short rule. The
   byline moved to the footer: "By Rabbi Klein" under the title read as though
   he wrote this site, and the footer says exactly what the site owes him. */
.hero .wm{font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:700;color:var(--brand);font-size:56px;line-height:1.05;
  letter-spacing:-.01em;margin:0 0 12px}
.wm-sub{color:var(--dim);font-size:12.5px;font-weight:600;margin:0;letter-spacing:.18em;text-transform:uppercase}
.wm-rule{width:48px;height:1px;background:var(--line);margin:20px auto 26px;border:0}
/* The credit sits under the subtitle and the rule closes the block, so it is
   set a step quieter: two small-caps lines at one size read as two subtitles. */
.wm-credit{margin-top:11px;font-size:11.5px;font-weight:500;letter-spacing:.12em;color:var(--faint)}
/* On a phone the credit breaks before his name, never inside it. */
.nw{white-space:nowrap}
@media (max-width:640px){.hero .wm{font-size:38px}.wm-sub{font-size:11.5px;letter-spacing:.14em}
  .wm-credit{font-size:10.5px;letter-spacing:.1em}}
.hero h1{font-size:44px;line-height:1.08;letter-spacing:-.022em;font-weight:600;margin:0 0 14px}
.lede{color:var(--dim);font-size:17px;max-width:620px;margin:0 auto 30px}
.tally{font-variant-numeric:tabular-nums;display:inline-block;text-align:right;color:var(--ink);font-weight:500}
/* margin:0 here would drop the auto side-margins that centre the block, leaving the text centred inside a left-hugging box rather than on the page */
.browse .lede[lang="he"]{font-family:var(--heb);font-size:22px;margin:0 auto}
.bigsearch{position:relative;max-width:620px;margin:0 auto}
.bigsearch input{width:100%;height:60px;padding:0 22px 0 54px;font-size:17px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow);outline:none;transition:border-color .15s,box-shadow .15s}
.bigsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow)}
.mag{position:absolute;left:20px;top:20px;width:20px;height:20px;fill:none;
  stroke:var(--faint);stroke-width:2;stroke-linecap:round;pointer-events:none}
.home-h{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:600;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.week{margin:22px auto 0;max-width:620px}
.week-h{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:600;margin-bottom:10px}
.week-h b{color:var(--accent);font-weight:600}
.week-l{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.week-l a{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:5px 14px 6px;color:var(--ink);font-size:15px;transition:border-color .15s}
.week-l a:hover{text-decoration:none;border-color:var(--accent)}
.week-l .chev{color:var(--accent)}
.week-l bdi{font-size:18px;line-height:1;color:var(--accent)}
.how{margin-top:20px}
.how-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:step}
.how-steps li{padding:2px 22px;font-size:15px;line-height:1.5;color:var(--dim);counter-increment:step}
.how-steps li:first-child{padding-left:0}
.how-steps li:last-child{padding-right:0}
.how-steps li+li{border-left:1px solid var(--line)}
.how-steps b{display:block;color:var(--accent);font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;margin-bottom:4px}
.how-steps b::before{content:counter(step) " \00b7  "}
/* On a phone the three steps stack, so the label runs into its line instead of
   sitting over it: three lines a step became two, and the questions come up a
   screen sooner. */
@media (max-width:760px){.how-steps{grid-template-columns:1fr}
  .how-steps li{padding:9px 0}.how-steps li:first-child{padding-top:0}.how-steps li:last-child{padding-bottom:0}
  .how-steps li+li{border-left:0;border-top:1px solid var(--line)}
  .how-steps b{display:inline;margin:0 7px 0 0}}
.taste{margin-top:40px}
.taste-q{font-size:20px;margin:0 0 14px;line-height:1.35}
.taste-go{display:block;color:var(--ink)}
.taste-go:hover{text-decoration:none}
.taste-go .chev{color:var(--accent);font-size:15px;margin-left:10px;display:inline-block;transition:transform .15s}
.taste-go:hover .chev{transform:translateX(3px)}
.taste-go:hover .taste-q{color:var(--accent)}
.taste-go:hover .wcard{border-color:var(--dim)}
.asks{margin-top:40px}
.asks-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.asks-list a{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;color:var(--ink);font-size:15px;line-height:1.45;transition:border-color .15s}
.asks-list .chev{color:var(--accent);flex:0 0 auto}
.asks-list a:hover{text-decoration:none;border-color:var(--accent)}
.asks-list a i{color:var(--dim)}
@media (max-width:640px){.asks-list{grid-template-columns:1fr}.taste-q{font-size:18px}}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
@media (max-width:640px){.hero h1{font-size:33px}.hero{padding:52px 0 20px}}
/* The two browse cards are the page's other clickable panels, so they are
   built like the question cards rather than as a pair of billboards. */
.card{display:block;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--ink);transition:border-color .15s}
.card:hover{text-decoration:none;border-color:var(--accent)}
.card h3{margin:0 0 3px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.card .chev{color:var(--accent);font-weight:400}
.card p{margin:0;color:var(--dim);font-size:14px}

/* autocomplete ------------------------------------------------------------ */
.ac{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;text-align:left;max-height:60vh;overflow-y:auto;z-index:60}
.ac .row{display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:14px;
  padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--ink)}
.ac .row:hover{text-decoration:none}
.ac .row:last-child{border-bottom:0}
.ac .row:hover,.ac .row.sel,.ac .row:active{background:var(--accent-soft)}
.ac .h{font-family:var(--heb);font-size:20px;direction:rtl;text-align:right}
.ac .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac .tr{font-style:italic;color:var(--dim)}
.ac .t{color:var(--dim);font-size:14px;font-style:italic;min-width:96px}
.ac .e{font-weight:500}
.ac .c{color:var(--faint);font-size:13px}
.ac .none{padding:16px;color:var(--dim);font-size:15px}
.ac-cap{padding:9px 16px 8px;font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--line)}
.ac .row{grid-template-columns:96px minmax(0,1fr) auto}
.ac .top-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.ac .cmp{font-size:13px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:3px 11px;white-space:nowrap;justify-self:end}
.ac .row:hover .cmp,.ac .row.sel .cmp{background:var(--accent);color:var(--panel)}
.ac .row.top{grid-template-columns:96px minmax(0,1fr);align-items:start;padding:14px 16px 16px;
  background:color-mix(in srgb,var(--accent-soft) 45%,var(--panel))}
.ac .row.top .h{font-size:24px;padding-top:2px}
.ac .row.top .d{color:var(--dim);font-size:14.5px;line-height:1.45;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac .cta{align-self:flex-start;margin-top:8px;font-size:13.5px;color:var(--panel);background:var(--accent);
  border-radius:999px;padding:4px 13px;white-space:nowrap}
/* The chevron is always visible and always in the accent colour. It used to
   light up only on hover, which a phone does not have, so on a phone nothing
   said the row opened anything. */
.ac .go,.rows .go{color:var(--accent);font-size:24px;line-height:1;justify-self:end;
  transition:transform .15s}
.ac .row:hover .go,.ac .row.sel .go,.rows .r:hover .go{transform:translateX(3px)}

/* browse ------------------------------------------------------------------ */
.browse{padding:46px 0 0}
.browse h1{font-size:36px;letter-spacing:-.02em;font-weight:600;margin:0 0 8px;text-align:center}
.browse > .lede{text-align:center}
.letters{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:26px 0 30px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.letters.heb{direction:rtl}
.ltr{min-width:44px;height:44px;padding:0 8px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:11px;font:inherit;font-size:17px;cursor:pointer;
  transition:background .12s,border-color .12s}
.letters.heb .ltr{font-family:var(--heb);font-size:22px}
.ltr:hover{border-color:var(--dim)}
.ltr.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ltr[disabled]{opacity:.3;cursor:default}
.rows{display:flex;flex-direction:column}
.rows .r{display:grid;grid-template-columns:120px minmax(0,1fr) 20px;gap:18px;align-items:center;
  padding:10px 6px;border-bottom:1px solid var(--line)}
.rows.en3 .r{grid-template-columns:minmax(0,260px) minmax(0,150px) minmax(0,1fr) 20px}
.rows.roots .r{grid-template-columns:110px minmax(0,200px) minmax(0,1fr) auto;align-items:baseline;
  padding:9px 6px;gap:16px}
.rexp{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
  border:1px solid var(--line);border-radius:999px;color:var(--dim);background:var(--panel);
  align-self:center;transition:color .15s,border-color .15s,background .15s}
.rows.roots .r:hover .rexp{color:var(--accent);border-color:var(--accent)}
.rows.roots .r[aria-expanded="true"] .rexp{color:var(--accent);border-color:var(--accent);
  background:var(--accent-soft)}
.rexp-v{transform-origin:center;transition:opacity .15s,transform .15s}
.rows.roots .r[aria-expanded="true"] .rexp-v{opacity:0;transform:rotate(90deg)}
.rows.roots .r.has-rad{cursor:pointer}
.rows.roots .r.has-rad:hover{background:var(--panel)}
.rad{font-family:var(--heb);font-size:16px;line-height:1.5;color:var(--dim);overflow:hidden}
.rad.sense{font:400 15px/1.5 var(--ui);color:var(--ink);text-align:left}
.rad.points{font:400 14px/1.5 var(--ui);color:var(--faint);text-align:left}
.rad.points a{font-size:16px;color:var(--dim)}
.rad.none{font:400 13.5px/1.5 var(--ui);color:var(--faint);font-style:italic;text-align:left}
/* It sits inside his Hebrew, which is RTL, so a narrow block would be held to
   the right; these margins keep the English at the left edge of the card. It
   takes the same measure as his Hebrew below it, so the two end on the same
   line and the card does not look as though something were missing. */
.rad-en{font-family:var(--ui);direction:ltr;margin:0 auto 18px 0;padding:0 0 16px;text-align:left;
  max-width:46em;border-bottom:1px solid var(--line)}
.rad-en-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  font-weight:600;margin:0 0 5px}
.rad-en-s{font:400 17px/1.55 var(--ui);color:var(--ink);margin:0}
.rad-en-p{margin:13px 0 0}
.rad-en-t{font:600 12.5px/1.4 var(--ui);color:var(--ink);margin:0 0 1px}
/* The summary column: what his entry holds, a line a part, each opening on to
   the whole of it. Folded it keeps the column near the length of the Hebrew it
   sits beside; opened it loses the reader nothing. */
.rad-en-l{margin:9px 0 0}
.rad-en-d{border-top:1px solid var(--line)}
.rad-en-d:last-child{border-bottom:1px solid var(--line)}
.rad-en-d>summary{font:600 12.5px/1.45 var(--ui);color:var(--ink);padding:6px 0 6px 15px;
  position:relative;cursor:pointer;list-style:none}
.rad-en-d>summary::-webkit-details-marker{display:none}
.rad-en-d>summary::before{content:"\203a";position:absolute;left:2px;top:5px;color:var(--accent);
  font-size:14px;line-height:1.3;transition:transform .12s ease;transform-origin:50% 55%}
.rad-en-d[open]>summary::before{transform:rotate(90deg)}
.rad-en-d>summary:hover{color:var(--accent)}
.rad-en-d>.rad-en-b{padding:0 0 9px 15px}
.rad-en-b{font:400 15.5px/1.7 var(--ui);color:var(--dim);margin:0}
.rad-en-b bdi,.rad-en-b [lang="he"]{font-family:var(--heb)}
.rad-en bdi,.rad-en-s bdi{font-family:var(--heb)}
/* The same tracks as a row, including the one the open-and-close sign sits in,
   so each heading stands over its own column. */
.rhead{display:grid;grid-template-columns:110px minmax(0,200px) minmax(0,1fr) auto;gap:18px;padding:0 6px 6px;
  border-bottom:1px solid var(--line);color:var(--faint);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.rhead span:last-child{text-align:left}
/* What the column holds is not what a reader gets by clicking, and nothing on
   the page said the rows opened at all. It sits beside the heading rather than
   under it, so the header stays one line deep. */
.rhint{text-transform:none;letter-spacing:0;font-size:11.5px;
  font-style:italic;color:var(--faint);margin-left:12px;white-space:nowrap}
.rhead em{font-style:normal}
.rad-open{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 22px 20px;margin:4px 0 14px}
.rad-who{margin:0 0 10px;color:var(--dim);font-size:13px}
.rad-who bdi{font-family:var(--heb);font-size:16px;color:var(--accent)}
.rad-body,.rad-text{font-family:var(--heb);font-size:19px;line-height:1.9;color:var(--ink);text-align:right}
/* The measure belongs to his Hebrew, not to the English above it, which starts
   at the left edge of the card as the label does. */
.rad-body>p:not(.rad-hw),.rad-text>p:not(.rad-hw){max-width:46em;margin-left:auto}
.rad-body strong,.rad-text strong{font-weight:700;color:var(--accent)}
.rad-body .ref,.rad-text .ref{font-size:.72em;color:var(--faint);white-space:nowrap}
/* The affordance was scoped to .rad-body, which an entry page never had and the
   roots page stopped having when its panel became two columns: the citations
   still opened, but nothing showed they could be opened. */
.rad-body .ref.has-p,.rad-text .ref.has-p{cursor:pointer;border-bottom:1px dotted var(--accent)}
.rad-body .ref.has-p:hover,.rad-text .ref.has-p:hover{color:var(--accent)}
.rad-body .ref.on,.rad-text .ref.on{color:var(--accent);background:var(--accent-soft);border-radius:3px}
/* The pasuk opens as a block where it is cited, so his text keeps the whole
   width of the card and carries on under it. */
.rad-pasuk{display:block;margin:10px 0;padding:10px 14px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;text-align:right}
.rad-pasuk-r{display:block;font:400 12px/1.4 var(--ui);color:var(--faint);
  direction:rtl;margin:0 0 4px}
.rad-pasuk-t{display:block;font-family:var(--heb);font-size:18px;line-height:1.7;color:var(--ink)}
.rad-body p,.rad-text p{margin:0 0 14px}
.rad-body p:last-child,.rad-text p:last-child{margin-bottom:0}
p.rad-hw{font-family:var(--ui);direction:ltr;font-size:13px;line-height:1.5;color:var(--dim);text-align:left;margin:0 0 4px}
.rad-body mark,.rad-text mark{background:var(--accent-soft);color:inherit;border-radius:4px;padding:0 3px}
p.rad-hw bdi{font-family:var(--heb);font-size:17px;color:var(--accent)}
.radak-credit{color:var(--faint);font-size:13px;margin:22px 0 0;line-height:1.5}
.radak h4{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px;font-size:15px}
.radak h4 a{font-family:var(--heb);font-size:18px;color:var(--accent)}
.radak h4 .rootnote{font:400 13px/1.4 var(--ui);color:var(--faint)}
.radak h4 .rootnote bdi{font-family:var(--heb);font-size:15px}
.rad-text{margin:0 0 0 auto}
/* On the entry page his Hebrew sits beside its English rather than under it,
   and both run smaller and tighter than on the roots page: the section is
   background, and two columns let a reader put the one against the other. */
.rad-pair{display:grid;gap:4px 26px;margin:0 0 6px}
.radak .rad-pair .rad-text{font-size:17px;line-height:1.75;max-width:none;margin:0}
.radak .rad-pair .rad-text p{max-width:none;margin:0 0 8px}
.rad-pair-en .rad-en{border:0;padding:0;margin:0;max-width:none}
.rad-pair-en .rad-en-s{font:400 14.5px/1.55 var(--ui);color:var(--ink)}
.rad-pair-en .rad-en-p{margin:9px 0 0}
.rad-pair-en .rad-en-t{font-size:11.5px}
.rad-pair-en .rad-en-b{font:400 13.5px/1.6 var(--ui)}
.radak .rad-pair .rad-pasuk{margin:8px 0}
.radak .rad-pair .rad-pasuk-t{font-size:16px;line-height:1.6}
/* The roots page pairs the same way, but it is the page a reader comes to for
   the whole entry, so its parts stand open and both sides run larger. */
.rad-open .rad-pair{margin:0 0 20px}
.rad-open .rad-pair:last-child{margin-bottom:0}
.rad-pair .rad-text>p:not(.rad-hw){max-width:none;margin-left:0}
.rad-open .rad-pair-en .rad-en{padding:0;border:0}
.rad-open .rad-pair-en .rad-en-s{font:400 16px/1.6 var(--ui)}
.rad-open .rad-pair-en .rad-en-b{font:400 14.5px/1.7 var(--ui)}
@media (min-width:900px){
  .rad-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
  .rad-pair.alone{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){.rows.roots .r{grid-template-columns:90px minmax(0,1fr) auto;row-gap:4px;gap:10px}
  .rows.roots .rexp{grid-column:3;grid-row:1}
  .rhead{display:none}
  .rad-open{padding:14px 16px 16px}
  .rad-body,.rad-text{font-size:18px;line-height:1.8}
  /* A fold is opened by thumb here, so its row is a 44px target. */
  .rad-en-d>summary{padding:12px 0 12px 18px;font-size:13.5px}
  .rad-en-d>summary::before{top:11px}
  .rows.roots .rad{grid-column:1/-1}}
.rows.roots .h{font-size:20px;line-height:1.3}
.rlinks{color:var(--dim);font-size:14px;line-height:1.5}
.rlinks a{color:var(--ink)}
.rows.en3 .cl{text-align:right}
.rows .tx{min-width:0}
.rows .r{color:var(--ink)}
/* The browse filter hides rows with el.hidden, which leans on the browser's
   own [hidden]{display:none}. An author rule beats a user-agent rule, so the
   display:grid above kept every row on screen and the letter buttons appeared
   to do nothing while the count changed. Anything the script hides must be
   hidden here too. */
[hidden]{display:none!important}
.rows .rhead{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rows.en3 .h{text-align:left}
.rows .rhead:hover{background:none}
.rows .r:hover{background:var(--panel);text-decoration:none}
.rows .r:active{background:var(--accent-soft)}
.rows .h{font-family:var(--heb);font-size:21px;direction:rtl;text-align:left}
.rows .en{font-family:inherit;font-size:17px;font-weight:600;direction:ltr;text-align:left}
.rows .t{color:var(--dim);font-style:italic;font-size:14px}
.rows .e{font-weight:500;font-size:16px}
.rows .d{color:var(--dim);font-size:14px;line-height:1.45;display:block;margin-top:1px}
.rows .cl{color:var(--faint);font-size:13.5px}
/* Phones: one tidy line per row, word then text then chevron, instead of the
   word stacked over its text with nothing to tap toward. The search dropdown
   drops its fixed transliteration column, which left a wide empty gap and
   squeezed the English to one word per line. */
@media (max-width:700px){
  .rows .r{grid-template-columns:88px minmax(0,1fr) 18px;gap:12px;padding:10px 4px}
  .rows .h{text-align:right}
  .rows.en3 .r{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"en h go" "cl cl go";row-gap:2px}
  .rows.en3 .en{grid-area:en}.rows.en3 .h{grid-area:h}.rows.en3 .cl{grid-area:cl;text-align:left}.rows.en3 .go{grid-area:go}
  .ac .row{grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  .ac .row.top{grid-template-columns:64px minmax(0,1fr)}
  /* On a phone the word "Compare" squeezed the text column to a sliver; the
     row already says "vs.", so the button shrinks to its arrow. */
  .ac .cmp{font-size:0;padding:2px 10px}
  .ac .cmp span{font-size:18px}
  /* A word's distinction line ran six lines on a phone. Two, with an ellipsis,
     keeps the list scannable and the ellipsis itself says there is more. */
  .rows .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Where the group line is a row's only text it is the row's content, not a
   footnote, and in the faint grey it read as disabled. */
.rows .tx > .cl:only-child,.ac .tx > .c:only-child{color:var(--dim);font-size:15px}
.rows .tx > .cl:only-child{font-size:14px}
.count{color:var(--faint);font-size:14px;margin:0 0 14px}

/* entry ------------------------------------------------------------------- */
.entry{padding:44px 0 0;max-width:760px}
.prose h1{font-size:34px;margin:0 0 18px;text-transform:none}
.tabs{display:inline-flex;gap:2px;padding:2px;background:var(--line);border-radius:9px;margin:0 0 26px}
.tab{border:0;background:none;color:var(--dim);font:inherit;font-size:14px;font-weight:500;
  padding:6px 15px;border-radius:7px;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pdf{width:100%;height:min(82vh,1000px);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.pdfnote{color:var(--faint);font-size:14px;margin:12px 0 0}
.prose h2{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:8px;margin:34px 0 14px}
.prose h3{font-size:18px}
.eyebrow{color:var(--faint);font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 8px}
.entry h1{font-size:38px;letter-spacing:-.021em;font-weight:600;margin:0 0 6px;text-transform:capitalize}
.heb-title{font-family:var(--heb);font-size:30px;font-weight:400;line-height:1.3;
  color:color-mix(in srgb,var(--ink) 72%,var(--bg));margin:2px 0 30px;direction:ltr;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 28px}
.entry h1+.glance{margin-top:34px}
.wcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px 13px}
/* row-reverse keeps the Hebrew at the right; if a long name and its
   transliteration cannot share the row, the transliteration drops under it. */
.wtop{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:0 10px}
.wcards.stack .wtop{flex-direction:column;align-items:flex-end}
.wh{font-family:var(--heb);font-size:26px;font-weight:500;line-height:1.15}
.we{font-weight:600;font-size:15px;line-height:1.35;margin:4px 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.wt{font-style:italic;color:var(--dim);font-size:14px}
.wd{font-size:14px;line-height:1.5;color:var(--dim)}
.wd .who{color:var(--ink)}
.wcard.w0{--wc:var(--w0)}.wcard.w1{--wc:var(--w1)}.wcard.w2{--wc:var(--w2)}.wcard.w3{--wc:var(--w3)}
.wcard.w4{--wc:var(--w4)}.wcard.w5{--wc:var(--w5)}.wcard.w6{--wc:var(--w6)}.wcard.w7{--wc:var(--w7)}
.wcard[class*=" w"]{border-top:3px solid var(--wc)}
.wcard[class*=" w"] .wh{color:var(--wc)}
.pv mark.w0,bdi.w0{color:var(--w0)}.pv mark.w1,bdi.w1{color:var(--w1)}.pv mark.w2,bdi.w2{color:var(--w2)}.pv mark.w3,bdi.w3{color:var(--w3)}
.pv mark.w4,bdi.w4{color:var(--w4)}.pv mark.w5,bdi.w5{color:var(--w5)}.pv mark.w6,bdi.w6{color:var(--w6)}.pv mark.w7,bdi.w7{color:var(--w7)}
/* On this page. Wide screens only: on anything narrower there is no margin to
   put it in, and a phone reader scrolls. The layout widens main just enough for
   the rail, so the article column itself stays 760px. */
.toc{display:none}
.entry [id]{scroll-margin-top:76px}
@media (min-width:1100px){
  main:has(.entry-layout){max-width:1030px}
  .entry-layout{display:grid;grid-template-columns:180px minmax(0,760px);gap:0 44px}
  .toc{display:block;position:sticky;top:76px;align-self:start;margin-top:52px;
    max-height:calc(100vh - 96px);overflow-y:auto;font-size:13.5px;line-height:1.35;
    scrollbar-width:thin}
  .toc-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
    font-weight:600;margin:0 0 10px}
  .toc ul{list-style:none;margin:0;padding:0}
  .toc li{margin:0}
  .toc a{display:block;padding:4px 0 4px 12px;border-left:2px solid var(--line);color:var(--dim)}
  .toc a:hover{color:var(--ink);text-decoration:none}
  .toc a.on{color:var(--accent);border-left-color:var(--accent)}
  .toc ul ul a{padding:3px 0 3px 22px;display:flex;align-items:baseline;gap:7px;
    white-space:nowrap;overflow:hidden}
  .toc .tt{overflow:hidden;text-overflow:ellipsis}
  .toc bdi[lang="he"]{font-size:1.12em}
}
/* Pesukim panel. A citation the entry makes (Yeshayahu 45:16) is a quiet link;
   on a wide screen the panel on the right shows the pesukim cited in the part
   of the entry being read, and on anything narrower the pasuk opens under the
   line when the citation is tapped. */
.entry a.cite{color:inherit;text-decoration:none;border-bottom:1px dotted var(--accent);cursor:pointer}
.entry a.cite:hover,.entry a.cite.lit{color:var(--accent);background:var(--accent-soft);border-radius:3px;text-decoration:none}
.prail{display:none}
.pcard{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:9px 12px 10px;margin:0 0 10px}
.pcard.on{border-color:var(--accent)}
.pref{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:12.5px;color:var(--dim)}
.ptog{font-size:11.5px;color:var(--gold);background:var(--gold-soft);border-radius:999px;padding:1px 8px;white-space:nowrap}
.ptog bdi{font-family:var(--heb);font-size:13px}
.pv{font-family:var(--heb);font-size:18px;line-height:1.6;text-align:right;margin-top:3px;color:var(--ink)}
.pv mark{background:none;color:var(--accent);font-weight:600}
.pell{color:var(--faint)}
.plink{display:inline-block;font-size:13.5px;margin-top:4px}
.prail-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:600;margin:0 0 10px}
.prail-f{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.prail-f button{font-family:var(--heb);font-size:15px;border:1px solid var(--line);background:var(--panel);
  border-radius:999px;padding:0 10px;cursor:pointer;color:var(--dim)}
.prail-f button.on{border-color:var(--accent);color:var(--accent)}
.prail-none{font-size:13px;color:var(--faint);margin:0}
.prail-credit{font-size:11.5px;line-height:1.4;color:var(--faint);margin:12px 0 0}
.ppop{margin:8px 0 6px}
.ppop .pcard{cursor:default;margin:0}
/* Under a bullet the card takes back the bullet's indent: on a phone that
   indent is a fifth of the width. */
li > .ppop{margin-inline-start:-1.4em}
.pclose{border:0;background:none;color:var(--faint);font-size:20px;line-height:1;padding:0 2px;cursor:pointer;margin-left:auto}
.pclose:hover{color:var(--ink)}
@media (min-width:1360px){
  main:has(.entry-layout.has-rail){max-width:1320px}
  .entry-layout.has-rail{grid-template-columns:180px minmax(0,760px) 250px;gap:0 40px}
  .prail{display:block;position:sticky;top:76px;align-self:start;margin-top:52px;
    max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:520px){.wcards{grid-template-columns:1fr}.wh{font-size:24px}.heb-title{font-size:26px;gap:0 22px}}
.entry section{margin:0 0 34px}
.entry h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
  font-weight:600;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.entry h3{font-size:19px;font-weight:600;margin:24px 0 6px}
.entry p{margin:0 0 14px}
.entry li{margin:0 0 8px}
.entry ul,.entry ol{padding-inline-start:1.4em}
.entry li::marker{color:var(--faint)}
.xref ul{list-style:none;padding:0}
.xref li{margin:0 0 8px}
.xref .xw{color:var(--dim);margin-left:10px;font-size:15px}
.bottomline{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px 8px;box-shadow:var(--shadow)}
.bottomline h2{border:0;padding:0}
.bottomline p{font-size:18px}
.inshort p{color:var(--ink)}
.root-note{color:var(--dim);font-size:15px;margin:-4px 0 12px}
.method-note{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;margin:14px 0 32px}
.method-note p{margin:0;font-size:16px;line-height:1.55}
/* Hebrew inside English text (a gloss in a sentence, the Also-discussed roots,
   a word card) takes the Hebrew face too, a touch larger, since a
   serif Hebrew set at the sans size reads small beside it. */
[lang="he"]{font-family:var(--heb)}
:not([lang="he"]) > bdi[lang="he"]{font-size:1.08em;line-height:1}
.disagree{border-left:3px solid var(--line);padding-left:20px}
.tablewrap{overflow-x:auto;margin:0 0 16px}
details.guide,details.radak{margin:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.guide>summary,details.radak>summary{display:flex;align-items:baseline;gap:12px;padding:14px 2px;cursor:pointer;
  list-style:none;-webkit-user-select:none;user-select:none}
details.guide>summary::-webkit-details-marker,details.radak>summary::-webkit-details-marker{display:none}
details.guide>summary h2,details.radak>summary h2{margin:0;display:inline}
details.guide>summary::before,details.radak>summary::before{content:"";flex:0 0 auto;width:7px;height:7px;align-self:center;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(-45deg);transition:transform .15s}
details.guide[open]>summary::before,details.radak[open]>summary::before{transform:rotate(45deg)}
details.guide>summary:hover h2,details.radak>summary:hover h2{color:var(--accent)}
.guide-hint{color:var(--faint);font-size:13px;font-weight:500}
details.guide[open]>summary{padding-bottom:6px}
details.guide>:not(summary){padding-bottom:10px}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font-weight:600;color:var(--faint);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;padding:0 14px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:first-child{font-family:var(--heb);font-size:20px;white-space:nowrap}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--line);padding:1px 5px;border-radius:5px}
footer{max-width:940px;margin:0 auto;padding:30px 22px 60px;border-top:1px solid var(--line);
  color:var(--dim);font-size:14px}
footer p{margin:0 0 6px}
.muted{color:var(--faint)}