/* reading.css — the reading pages' three zones on a computer (Oct 27, 2026; Fadi saw the preview: "Yes this is it ... It is perfect").
   The best long reads fill a big screen with things that do a job, not with longer lines: a contents list that stays put on
   the left, the text at a comfortable ~70 characters in the middle (type that grows with the screen), and a rail on the right
   with the author and the next step. Under 1100 px the page is one column: the contents fold into "On this page" at the top
   and the rail follows the text. Laid out by scripts/journal/reading-zones.mjs. */
:root{--rd-ink:#26231A;--rd-ink2:#4A4536;--rd-mut:#6E6853;--rd-line:rgba(84,78,46,.18);--rd-card:#E6E3D8;--rd-acc:#544E2E;--rd-acc-ink:#F4F3EE;--rd-top:88px;}
html.sar-dark{--rd-ink:#F4F3EE;--rd-ink2:#D5D0BF;--rd-mut:#9a957f;--rd-line:rgba(179,170,141,.2);--rd-card:#15140E;--rd-acc:#B3AA8D;--rd-acc-ink:#100F0A;}

/* ---------- the parts (every width) ---------- */
.rd{box-sizing:border-box;padding:0 var(--col-pad);}
.rd-toc details{border:1px solid var(--rd-line);border-radius:14px;padding:0 16px;margin:0 0 26px;}
.rd-toc summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rd-mut);}
.rd-toc summary::-webkit-details-marker{display:none;}
.rd-toc summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s;}
.rd-toc details[open] summary::after{transform:rotate(225deg) translateX(-2px);}
.rd-toc ol{list-style:none;margin:0 0 14px;padding:0;counter-reset:rd;}
.rd-toc li{counter-increment:rd;}
.rd .rd-toc a{display:flex;gap:12px;align-items:baseline;padding:9px 0 9px 14px;border-left:2px solid transparent;margin-left:-2px;font-family:Jost,sans-serif;font-size:14px;line-height:1.35;letter-spacing:.01em;color:var(--rd-ink2);text-decoration:none;transition:color .2s,border-color .2s;}
.rd-toc a::before{content:counter(rd,decimal-leading-zero);font-size:10px;letter-spacing:.12em;color:var(--rd-mut);flex:none;width:18px;}
.rd .rd-toc a:hover{color:var(--rd-ink);}
.rd .rd-toc a[aria-current="true"]{color:var(--rd-ink);border-left-color:var(--rd-acc);}
.rd-prog{display:none;}

.rd-fig{margin:0 0 clamp(26px,4vh,44px);}
.rd-fig > div{max-width:none !important;}
.rd-side{display:grid;gap:16px;margin:clamp(30px,5vh,48px) 0 0;}
.rd-card{border:1px solid var(--rd-line);background:var(--rd-card);border-radius:16px;padding:clamp(18px,1.4vw,26px);}
.rd-k{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--rd-mut);margin:0 0 10px;}
.rd-card p{margin:0 0 16px;font-family:Spectral,serif;font-weight:300;font-size:clamp(16px,.35vw + 11px,19px);line-height:1.5;color:var(--rd-ink2);}
.rd-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;}
.rd-author img{width:clamp(60px,4vw,84px);height:clamp(60px,4vw,84px);border-radius:50%;object-fit:cover;object-position:50% 22%;}
.rd .rd-name{display:block;font-family:Spectral,serif;font-size:clamp(19px,.45vw + 12px,23px);line-height:1.2;color:var(--rd-ink);text-decoration:none;}
.rd-name:hover{text-decoration:underline;text-underline-offset:3px;}
.rd-role{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.04em;color:var(--rd-mut);margin-top:4px;}
.rd-acts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rd .rd-acts a,.rd .rd-btn{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 14px;border-radius:999px;border:1px solid var(--rd-line);font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rd-ink);text-decoration:none;text-align:center;}
.rd .rd-acts a:last-child{grid-column:1/-1;background:var(--rd-acc);border-color:var(--rd-acc);color:var(--rd-acc-ink);}
.rd .rd-btn{background:var(--rd-acc);border-color:var(--rd-acc);color:var(--rd-acc-ink);}
.rd-acts a:focus-visible,.rd-btn:focus-visible,.rd-toc a:focus-visible,.rd-list a:focus-visible{outline:2px solid var(--rd-acc);outline-offset:2px;}
.rd-list{list-style:none;margin:0;padding:0;}
.rd-list li + li{border-top:1px solid var(--rd-line);}
.rd-list a{display:block;padding:12px 0;text-decoration:none;}
.rd-list small{display:block;font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rd-mut);margin-bottom:4px;}
.rd-list span{font-family:Spectral,serif;font-size:clamp(16px,.3vw + 12px,19px);line-height:1.3;color:var(--rd-ink);}
.rd-dates{display:grid;gap:6px;font-family:Jost,sans-serif;font-size:13px;color:var(--rd-ink2);}
.rd-dates b{font-weight:500;color:var(--rd-ink);}
.rd-by{display:flex;align-items:center;gap:12px;margin-top:22px;}
.rd-by img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;}
.rd-by a{color:inherit;}
.rd .a-body.rd-text,.rd .rd-text{box-sizing:border-box;max-width:none !important;margin-top:0 !important;margin-bottom:0 !important;padding:0 !important;}   /* the text's side margins: auto (centred) */
.rd-page.wrap{max-width:none !important;box-sizing:border-box;padding-left:0 !important;padding-right:0 !important;}
.rd-page > .eyebrow,.rd-page > h1,.rd-page > .meta{margin-left:var(--col-pad);margin-right:var(--col-pad);}

.rd-page > .meta{font-size:9.5px !important;}   /* the dates line stays a small label at every width */

/* ---------- a computer: three zones across the page's full width ---------- */
@media (min-width:1100px){
  .rd{display:grid;grid-template-columns:clamp(210px,14vw,340px) minmax(0,1fr) clamp(290px,19vw,470px);column-gap:clamp(36px,3.4vw,80px);align-items:start;}
  .rd-toc{position:sticky;top:var(--rd-top);max-height:calc(100vh - var(--rd-top) - 24px);overflow:auto;scrollbar-width:none;}
  .rd-toc details{border:0;padding:0;margin:0;}
  .rd-toc summary{pointer-events:none;min-height:0;margin:0 0 14px;}
  .rd-toc summary::after{display:none;}
  .rd-toc ol{border-left:1px solid var(--rd-line);margin:0;}
  .rd-prog{display:block;height:2px;background:var(--rd-line);margin:18px 0 0;border-radius:2px;overflow:hidden;}
  .rd-prog i{display:block;height:100%;width:0;background:var(--rd-acc);}
  .rd-mid{min-width:0;}
  /* the text: ~70 characters a line however wide the screen, centred in the middle zone; type grows with the screen */
  .rd .rd-text{width:min(100%,66ch);margin-inline:auto !important;font-size:clamp(18px,.55vw + 10.5px,25px);}
  .rd-text p,.rd-text li{font-size:1em !important;line-height:1.72 !important;}
  .rd-text > p:first-child{font-size:1.24em !important;line-height:1.5 !important;}
  .rd-text h2{font-size:clamp(28px,1vw + 16px,42px) !important;line-height:1.15 !important;scroll-margin-top:var(--rd-top);}
  .rd-text .a-box{display:none !important;}   /* the rail carries it */
  .rd-side{position:sticky;top:var(--rd-top);margin:0;}
  .a-more{display:none !important;}           /* the rail carries it */
  /* the opening: the full width, a big title */
  .a-hero{max-width:none !important;margin:0 !important;padding-left:var(--col-pad) !important;padding-right:var(--col-pad) !important;padding-bottom:clamp(26px,4vh,48px) !important;}
  .a-hero > div{max-width:none !important;}
  .a-hero .a-eye{margin-top:clamp(28px,5vh,60px) !important;}
  .a-hero h1{font-size:clamp(56px,3.4vw + 12px,104px) !important;max-width:22ch;text-wrap:balance;}
  .rd-page > h1{font-size:clamp(56px,3.4vw + 12px,104px);}
  .rd-page > .meta{margin-bottom:clamp(36px,6vh,72px);}
  .rd-page .rd-text h2{margin:56px 0 14px;}
  .rd-page .rd-text > p:first-child{font-size:1.18em !important;}
}
@media (prefers-reduced-motion:reduce){.rd-toc a,.rd-toc summary::after{transition:none;}}

/* the text lines up with the photo whenever the middle zone is too narrow for a breakout (a laptop): it fills the zone and its
   type is sized from the zone, so a line stays ~75 characters */
@media (min-width:1100px){
  .rd-mid{container-type:inline-size;}
  @container (max-width:860px){ .rd .rd-text{width:100%;font-size:clamp(17px,3.15cqi,23.5px);} }
}
/* a small laptop (1100–1399): two zones — the contents fold at the top of the text, the rail stays on the right */
@media (min-width:1100px) and (max-width:1399px){
  .rd{grid-template-columns:minmax(0,1fr) clamp(280px,24vw,330px);}
  .rd-toc{grid-column:1;grid-row:1;position:static;max-height:none;overflow:visible;}
  .rd-toc details{border:1px solid var(--rd-line);border-radius:14px;padding:0 16px;margin:0 0 26px;}
  .rd-toc summary{pointer-events:auto;min-height:48px;margin:0;}
  .rd-toc summary::after{display:block;}
  .rd-toc ol{border-left:0;margin:0 0 14px;}
  .rd-prog{display:none;}
  .rd-mid{grid-column:1;grid-row:2;}
  .rd-side{grid-column:2;grid-row:1 / span 2;}
}

/* a phone or tablet: an article's own calculator box and "More from the Journal" already follow its text, so its rail brings
   only the author card (no repeats) */
@media (max-width:1099px){ .rd-mid:has(.a-body) ~ .rd-side > .rd-card:not(.rd-author){display:none;} }