: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;
  --gold:#8a6d2a; --gold-soft:#f2e8cf; --err:#a3372b;
  --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);
  --gold:#d9b86b; --gold-soft:#2c2616; --err:#e38b7d;
  --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:22px;
  padding:10px 24px;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 logo, words to the right of the drawing. Its green is its own, set in
   the SVG (LOGO_INK in build_site.py), so it follows the colour scheme there. */
.brand{flex:0 0 auto;display:block;line-height:0}
.brand img{display:block;height:42px;width:auto}
.brand:hover{opacity:.75}
.hsearch{flex:1 1 auto;position:relative;max-width:520px;margin:0 auto}
.hsearch input{width:100%;height:36px;padding:0 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink);font-size:14px;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:18px;flex:0 0 auto}
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--line);border-radius:9px;font-size:15px}
/* 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:15px;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. The size is
   set on .seg, not on the links, so that 1.2em scales with it: set on the links,
   the phone sizes reached A-Z only and left the Hebrew at 20px beside 12.5px. */
.seg a.ix{font-family:var(--heb);font-size:1.2em;line-height:1.15;position:relative;top:1px}
.seg a{position:relative;padding:5px 15px;border-radius:7px;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, logo and tabs
   on the first and a full-width search on the second, measured at 430, 390,
   375 and 360px. About stays visible at every one of them. Below
   BRAND_MARK_ONLY the logo drops its words, so a 320px screen keeps two rows
   as well, and nothing scrolls sideways at any width. */
@media (max-width:700px){
  header.site{flex-wrap:wrap;gap:7px 10px;padding:7px 12px}
  .brand img{height:34px}
  .navs{gap:8px;margin-left:auto}
  .meth{font-size:12px;padding:7px 0}
  .seg{font-size:12px}
  /* The text a step smaller, the padding a step taller: the tabs were already
     short of a comfortable tap, and they keep the height they had. */
  .seg a{padding:5px 8px}
  /* The tabs stand 28px, short of a thumb's 44. An invisible margin of 8px
     above and below takes the tap without making the pill look bigger. */
  .seg a::after,.meth::after{content:"";position:absolute;inset:-8px 0}
  .meth{position:relative}
  .hsearch{order:3;flex:1 1 100%;max-width:none;margin:0}
  /* 16px, not the desktop 14: iOS Safari zooms the page in on any field set
     smaller, and it stays zoomed after the search is done. It goes by the
     field's own size, so the placeholder can stay at 14 with the header. */
  .hsearch input{height:32px;font-size:16px}
  .hsearch input::placeholder{font-size:14px}
}
@media (max-width:400px){
  header.site{gap:7px 8px}
  .brand img{height:31px}
  .navs{gap:6px}
  .meth{font-size:11.5px}
  .seg{font-size:11.5px}
  .seg a{padding:5px 7px}
}

/* home -------------------------------------------------------------------- */
.hero{padding:36px 0 30px;text-align:center}
.banner{margin:0 0 30px}
/* The logo, words under the drawing, 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{margin:0 0 20px;line-height:0}
/* Sized so the search box still sits well above the fold on a laptop: the
   drawing makes the logo nearly square, and at 290px it pushed the box to 624px. */
.hero .wm img{display:block;margin:0 auto;width:230px;height:auto}
.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 img{width:200px}.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:28px 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}
/* In the header the search box narrows with the window, to 247px at 780, and
   the dropdown narrowed with it until the button in its first row ran past the
   edge and was cut off. It keeps to the box's left edge but never goes under
   440px, which at the narrowest such header (701px) still ends 45px short of
   the window. Below 700 the search has a full-width row of its own. */
@media (min-width:701px){.hsearch .ac{right:auto;width:max(100%,440px)}}
.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;line-height:1.15;letter-spacing:-.021em;font-weight:600;margin:0 0 6px;text-transform:capitalize}
/* About is an entry and prose both, and the entry rule above, coming later,
   took its title's 18px down to 6. The loose line height hid it until now. */
.entry.prose h1{margin-bottom:18px}
.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}
  /* One card a row on a phone, and at full height the median entry's five
     words filled a screen before "In short" (the 18 of anger, four). Here the
     English and transliteration stand at the left with the Hebrew beside them,
     and the distinction runs under both: about a third shorter a card. */
  .wcards{gap:8px}
  .wcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"we wh" "wt wh" "wd wd";
    column-gap:14px;padding:9px 13px 10px}
  .wtop{display:contents}
  .wh{grid-area:wh;align-self:center;font-size:23px;text-align:right}
  .we{grid-area:we;margin:0;padding:0;border:0}
  .wt{grid-area:wt;font-size:13px;line-height:1.4}
  .wd{grid-area:wd;font-size:13.5px;line-height:1.45;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .entry h1{font-size:31px}}
.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}

/* feedback ------------------------------------------------------------------
   One quiet round button at the bottom right of every page; it opens a box
   headed with the page the reader is on. Panel-white with the site green, so
   it is findable without shouting over the entry. */
.fb{position:fixed;right:20px;bottom:20px;z-index:60}
.fb-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--accent);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 1px 3px rgba(60,50,30,.10),0 6px 20px rgba(60,50,30,.10);transition:border-color .15s}
.fb-btn:hover,.fb.open .fb-btn{border-color:var(--accent)}
.fb-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.fb-btn svg{width:22px;height:22px}
.fb-panel{position:absolute;right:0;bottom:60px;width:360px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(60,50,30,.08),0 16px 44px rgba(60,50,30,.14);padding:16px 16px 14px}
.fb-panel[hidden]{display:none}
.fb-head{display:flex;align-items:flex-start;gap:10px}
.fb-kicker{margin:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.fb-page{margin:3px 0 0;font-size:18px;line-height:1.3;font-weight:600;color:var(--ink)}
.fb-x{margin-left:auto;border:0;background:none;color:var(--faint);font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.fb-x:hover{color:var(--ink)}
.fb-lede{margin:8px 0 10px;font-size:14px;line-height:1.45;color:var(--dim)}
.fb-panel textarea,.fb-panel input[type=email]{display:block;width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none}
.fb-panel textarea{min-height:112px;resize:vertical;line-height:1.45}
.fb-panel input[type=email]{margin-top:8px;height:38px}
.fb-panel textarea:focus,.fb-panel input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-status{flex:1;font-size:13.5px;line-height:1.35;color:var(--dim)}
.fb-status.ok{color:var(--accent)}
.fb-status.err{color:var(--err)}
.fb-send{border:0;border-radius:9px;background:var(--accent);color:var(--panel);font:inherit;font-size:14.5px;
  font-weight:600;padding:8px 18px;cursor:pointer}
.fb-send:disabled{opacity:.6;cursor:default}
@media (max-width:700px){
  .fb{right:14px;bottom:14px}
  .fb-btn{width:44px;height:44px}
  .fb-panel{position:fixed;left:12px;right:12px;bottom:68px;width:auto;max-width:none}
}
@media print{.fb{display:none}}
.muted{color:var(--faint)}