/* Torahform — the weekly magazine. Phone first; the desktop layout is the min-width block at the end.
   Blue hero, a navy panel for the print booklet, then each kind of source as a section of headline cards. */
/* the palette: navy #031d44, blue #084887, orange #f58a07, light orange #f9ab55, off-white #f7f5fb */
:root{ --paper:#f7f5fb; --ink:#14171f; --muted:#5f6470; --faint:#9499a3; --rule:#e2e1ea; --accent:#084887;
       --deep:#031d44; --hot:#f58a07; --warm:#f9ab55; --soft:#fdf1e1; --cream:#f7f5fb; --gutter:22px; --sheet:22px }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.55 Literata,Charter,Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.he{font-family:"Frank Ruhl Libre","Noto Serif Hebrew",serif}
/* fixed, not absolute: a label's hidden input is focused on click, and the page must not scroll off to find it */
.sr{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px;z-index:20}

/* ---- shared pieces ---- */
.tag{font:600 10.5px/1.3 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pill{display:inline-block;border-radius:999px;padding:13px 20px;font:600 13.5px/1 Inter,sans-serif;white-space:nowrap;cursor:pointer}
.pill.c{background:var(--hot);color:var(--deep)} .pill.g{background:var(--accent);color:#fff}
.pill.o{border:1px solid var(--rule);color:var(--ink);background:#fff}
.pill.c:hover{background:var(--warm)} .pill.g:hover{background:var(--deep)}
.ai{display:block;margin-top:8px;font:600 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-style:normal}

.nav{display:flex;align-items:center;gap:20px;padding:16px var(--gutter);background:var(--accent);color:#fff}
.nav a{font:500 13px/1 Inter,sans-serif;opacity:.85}
.nav a:hover{opacity:1}
.nav .mark{margin-right:auto;font:900 20px/1 Fraunces,Georgia,serif;letter-spacing:-.01em;opacity:1}
.nav .wk{display:none}

/* on a phone each block is a sheet with rounded top corners, laid over the block above (--sheet) */
.hero{background:var(--accent);color:#fff;padding:14px var(--gutter) calc(26px + var(--sheet))}
.top-band{background:var(--deep)}
.top-band::after{content:"";display:block;height:var(--sheet);background:#fff;border-radius:var(--sheet) var(--sheet) 0 0}
.hero .he{display:block;margin-top:14px;font-size:22px;color:var(--warm)}
.hero h1{margin:0;font:900 52px/1 Fraunces,Georgia,serif;letter-spacing:-.03em;font-variation-settings:"SOFT" 20,"WONK" 1}
.hero .sub{margin:10px 0 0;font:400 13.5px/1.45 Inter,sans-serif;opacity:.82}

/* ---- the print booklet ---- */
.booklet{background:var(--deep);color:var(--cream);padding:24px var(--gutter) 26px;position:relative;margin-top:calc(-1 * var(--sheet));border-radius:var(--sheet) var(--sheet) 0 0}
.booklet .top{display:flex;gap:18px;align-items:flex-start}
.booklet img{width:112px;height:auto;flex:none;display:block;border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.35);transform:rotate(-2deg)}
.booklet .k{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.booklet h2{margin:8px 0 0;font:700 25px/1.1 Fraunces,serif;letter-spacing:-.01em}
.booklet p{margin:8px 0 0;font:400 13.5px/1.5 Inter,sans-serif;opacity:.85}
.booklet ol{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(247,245,251,.22)}
.booklet li{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid rgba(247,245,251,.22);font:600 15.5px/1.25 Fraunces,serif}
.booklet li .he{font-weight:400;font-size:15px;opacity:.7;width:52px;flex:none}
.booklet li small{display:block;font:400 12px/1.35 Inter,sans-serif;opacity:.7;margin-top:2px}
.booklet li .p{margin-left:auto;flex:none;white-space:nowrap;font:500 12px/1 Inter,sans-serif;opacity:.7}
.booklet .go{margin-top:20px}
.booklet .go .pill{display:block;text-align:center;padding:16px}
.booklet .note{margin:12px 0 0;text-align:center;font:400 12px/1.4 Inter,sans-serif;opacity:.65}

/* ---- chips: two filters (radios) and jump links ---- */
.chips{display:flex;gap:8px;padding:4px var(--gutter) 14px;overflow-x:auto;border-bottom:1px solid var(--rule);position:sticky;top:0;background:#fff;z-index:5}
.chips a,.chips label{white-space:nowrap;padding:8px 13px;border:1px solid var(--rule);border-radius:999px;font:500 13px/1 Inter,sans-serif;color:var(--muted);cursor:pointer}
#f-all:checked ~ .chips label[for=f-all], #f-in:checked ~ .chips label[for=f-in]{background:var(--ink);border-color:var(--ink);color:#fff}
#f-all:focus-visible ~ .chips label[for=f-all], #f-in:focus-visible ~ .chips label[for=f-in]{outline:2px solid var(--accent);outline-offset:2px}

/* ---- a section of cards ---- */
.sec{padding:26px var(--gutter) 6px;scroll-margin-top:56px}
.sec > h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding-bottom:10px;border-bottom:2px solid var(--ink);
          font:900 27px/1.1 Fraunces,serif;letter-spacing:-.02em}
.sec > h2 .he{font-weight:400;font-size:23px;color:var(--accent);letter-spacing:0}
.sec > h2 small{width:100%;font:500 12.5px/1 Inter,sans-serif;color:var(--muted);letter-spacing:0}
.sec > .about{margin:10px 0 0;font:400 13.5px/1.5 Inter,sans-serif;color:var(--muted)}
.feed{display:grid;gap:14px;margin-top:16px}
.card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:16px;padding:18px;background:#fff}
a.card:hover{border-color:var(--accent)}
.card.big{background:var(--soft);border-color:var(--soft)}
.card h3{margin:9px 0 0;font:700 21px/1.2 Fraunces,serif;letter-spacing:-.01em}
.card.big h3{font-size:27px;line-height:1.12}
.card p{margin:8px 0 0;font-size:15.5px;line-height:1.45;color:#33363d;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card .f{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;font:500 12px/1 Inter,sans-serif;color:var(--faint)}
.card .f b{color:var(--accent);font-weight:600}
/* the reading's cards carry a whole summary and a link out, so no clamp */
.reading .card p{display:block}
.card .f a{color:var(--accent);font-weight:600}
.more{display:block;margin-top:14px;padding:15px;text-align:center;border:1px solid var(--rule);border-radius:999px;font:600 13.5px/1 Inter,sans-serif;color:var(--accent);cursor:pointer}
.showall:focus-visible ~ .more{outline:2px solid var(--accent);outline-offset:2px}
/* long sections start short; the checkbox before the feed opens them, and the booklet filter shows all it has */
.feed .card:nth-child(n+6){display:none}
.showall:checked ~ .feed .card{display:flex}
.showall:checked ~ .more{display:none}
#f-in:checked ~ main .card.in{display:flex}
#f-in:checked ~ main .card:not(.in), #f-in:checked ~ main .more, #f-in:checked ~ main .line{display:none}

.line{display:flex;align-items:center;gap:14px;margin:26px var(--gutter) 0;padding:18px;border-radius:16px;background:var(--deep);color:#fff}
.line b{display:block;font:600 17px/1.2 Fraunces,serif} .line span{font:400 12.5px/1.35 Inter,sans-serif;opacity:.7}
.line i{margin-left:auto;font-style:normal}

/* ---- back issues, sources ---- */
.archive .week{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.archive .week b{font:700 19px/1.2 Fraunces,serif}
.archive .week b .he{font-weight:400;color:var(--accent);margin-right:8px}
.archive .week .d{grid-column:1/-1;font:400 12.5px/1.3 Inter,sans-serif;color:var(--faint);order:-1}
.archive .week .links{display:flex;gap:14px;font:600 12.5px/1 Inter,sans-serif;color:var(--accent)}
.archive .week .links a + a{color:var(--muted)}
.credits{margin:30px var(--gutter) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.credits summary{padding:15px 0;font:600 13.5px/1 Inter,sans-serif;color:var(--muted);cursor:pointer}
.credits table{width:100%;border-collapse:collapse;font:400 13px/1.4 Inter,sans-serif;margin-bottom:14px}
.credits td{border-top:1px solid var(--rule);padding:7px 0;vertical-align:top;color:var(--muted)}
.credits td:first-child{width:40%;padding-right:14px;color:var(--ink);font-weight:600}

footer{margin-top:44px;padding:30px var(--gutter) 40px;background:var(--deep);color:var(--cream);scroll-margin-top:0;border-radius:var(--sheet) var(--sheet) 0 0}
footer h2{margin:0 0 10px;font:700 22px/1.2 Fraunces,serif}
footer p{margin:0 0 12px;font:400 13.5px/1.6 Inter,sans-serif;opacity:.85}
footer a{border-bottom:1px solid rgba(247,245,251,.4)}
footer .links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:20px 0;font-weight:600;opacity:1}

/* ---- a teaching ---- */
.thead .back{display:inline-block;font:500 13px/1.3 Inter,sans-serif;opacity:.85}
.thead .tag{display:block;margin-top:26px;color:var(--warm)}
.thead h1{font-size:40px;margin-top:6px}
.article{padding:6px var(--gutter) 10px;position:relative;margin-top:calc(-1 * var(--sheet));background:#fff;border-radius:var(--sheet) var(--sheet) 0 0}
.article .q{margin:22px 0 0;font:600 24px/1.27 Fraunces,serif;letter-spacing:-.01em}
.article .gist{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:#33363d}
.article .gist b{font-weight:600}
.article .part{margin:30px 0 0;font:600 11px/1.4 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pair{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule)}
.pair .e p{margin:0 0 14px;font-size:17.5px;line-height:1.62}
.pair .e p:last-child{margin-bottom:0}
.pair .h{display:none;margin:14px 0 0;padding:14px 16px;background:var(--soft);border-radius:12px;text-align:right;
         font:400 19px/1.8 "Frank Ruhl Libre","Noto Serif Hebrew",serif}
#he:checked ~ main .pair .h{display:block}
.article .source{margin:18px 0 0;font:italic 400 13.5px/1.4 Literata,serif;color:var(--faint)}
.rail{display:grid;gap:12px;margin-top:30px}
.rail .box{padding:16px;border-radius:14px;background:var(--soft);font:400 13.5px/1.5 Inter,sans-serif;color:#26303f}
.rail .box b{display:block;margin-bottom:4px;font:600 16px/1.25 Fraunces,serif;color:var(--ink)}
.rail .box a{color:var(--accent);font-weight:600}
.rail .mini{display:block;padding:14px 16px;border:1px solid var(--rule);border-radius:14px}
.rail .mini b{display:block;margin-top:5px;font:600 15.5px/1.25 Fraunces,serif}
.rail .pill{text-align:center}
.bar{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--rule);padding:10px var(--gutter) 12px;display:flex;gap:8px;margin-top:26px}
.bar .pill{flex:1;text-align:center;padding:13px 10px}
.bar label.pill{flex:0 0 auto;font-family:"Frank Ruhl Libre",serif;font-size:16px;padding:11px 16px}
#he:checked ~ .bar label.pill{background:var(--ink);border-color:var(--ink);color:#fff}
#he:focus-visible ~ .bar label.pill{outline:2px solid var(--accent);outline-offset:2px}
.bar + footer{margin-top:0}

@media (min-width:860px){
  :root{--gutter:max(40px, calc((100vw - 1100px) / 2))}
  .nav{gap:26px} .nav .mark{font-size:22px} .nav .wk{display:inline}
  .top-band{display:grid;grid-template-columns:1fr 470px;background:var(--accent);padding:0 var(--gutter)}
  .top-band::after{content:none}
  footer{border-radius:0}
  .chips{padding-top:14px}
  .hero{padding:40px 40px 40px 0;display:flex;flex-direction:column;justify-content:flex-end}
  .hero .he{margin-top:0;font-size:30px} .hero h1{font-size:92px} .hero .sub{font-size:15px;max-width:460px;margin-top:16px}
  .booklet{padding:30px 32px;border-radius:20px 20px 0 0;margin-top:26px}
  .booklet img{width:128px} .booklet h2{font-size:28px} .booklet ol{margin-top:22px}
  .sec{padding-top:34px}
  .sec > h2{font-size:34px} .sec > h2 .he{font-size:28px}
  .sec > h2 small{width:auto;margin-left:auto}
  .feed{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
  .feed .big{grid-column:span 2} .feed .big h3{font-size:36px}
  .feed .card:nth-child(n+6){display:flex}
  .feed .card:nth-child(n+9){display:none}
  .more{width:fit-content;padding:14px 26px;margin-top:18px}
  .line{margin-top:34px}
  .archive .week{grid-template-columns:170px 1fr auto}
  .archive .week .d{grid-column:auto}
  footer{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding-top:40px}
  footer .links{margin-top:0}

  .thead{padding:34px var(--gutter) 40px} .thead h1{font-size:64px} .thead .tag{margin-top:34px}
  .article{display:grid;grid-template-columns:1fr 290px;gap:56px;padding-top:10px;padding-bottom:40px;margin-top:0;border-radius:0}
  .article .q{font-size:30px;margin-top:28px}
  .article .gist{font-size:16.5px;max-width:640px}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .pair.solo{grid-template-columns:minmax(0,640px)}
  .pair .h, #he:checked ~ main .pair .h{display:block;margin:0;padding:0;background:none;border-radius:0}
  .rail{position:sticky;top:20px;align-self:start;margin-top:28px}
  .bar{display:none}
}