/* Tea Room read pages: styles only these pages need. Shared look comes from c.css.
   One reading column, left aligned, no pictures or boxes: a read is plain prose, like the About page text. */
.rd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.rd-col{grid-column:1 / span 7;max-width:680px}
.rd-hero{padding-top:152px}
.rd-hero .rd-grid{display:block;width:min(920px,calc(100% - 2 * var(--gutter)))}
.rd-hero .rd-col{max-width:none}
.f-hero-premise a{color:inherit;text-decoration:none}
.f-hero-premise a:hover{color:var(--deep)}
.rd-title{margin:0;font:300 clamp(42px,4.6vw,66px)/1.1 var(--serif);letter-spacing:-.03em;color:#1b3832;text-wrap:balance}
.rd-lede{max-width:740px;margin:28px 0 0;font:300 clamp(20px,1.6vw,23px)/1.45 var(--serif);letter-spacing:-.015em;color:var(--deep);text-wrap:pretty}
/* Author and cuppas: small and quiet. #6b716d is the lightest grey that still passes AA contrast on the paper. */
.rd-meta{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--small-print)}
.rd-body{margin-top:56px}
.rd-body .rd-grid{display:block;width:min(690px,calc(100% - 2 * var(--gutter)))}
.rd-body .rd-col{max-width:none}
.rd-prose h2{margin:56px 0 20px;font:300 34px/1.2 var(--serif);letter-spacing:-.025em;color:var(--deep);text-wrap:balance}
.rd-prose h2:first-child{margin-top:0}
.rd-prose p,.rd-prose li{font-size:19px;line-height:1.7;color:var(--body);text-wrap:pretty}
.rd-prose p{margin:0 0 24px}
.rd-prose ol{margin:0 0 22px;padding-left:1.4em}
.rd-prose > ol{margin:26px 0 38px;padding:24px 28px 18px 52px;background:#edf3ef}
.rd-prose li{margin:0 0 10px;padding-left:4px}
.rd-prose strong{font-weight:500;color:var(--deep)}
.rd-prose .rd-book{margin:30px 0 30px}
.rd-book .f-btn{min-height:50px;padding:0 20px;font-size:14.5px}
.f-faq-ch{margin-top:clamp(112px,10vw,144px)}
.f-faq-ch > .f-wrap{display:block;width:min(760px,calc(100% - 2 * var(--gutter)))}
.f-faq-ch .f-faq-intro{max-width:none}
.f-faq-ch .f-faq-intro h2{font:300 34px/1.2 var(--serif);letter-spacing:-.025em}
.f-faq-list{margin-top:32px}
.f-faq-row summary{font-size:21px;line-height:1.35}
.f-faq-row p{font-size:18px;line-height:1.65}
@media (prefers-reduced-motion:no-preference){
  html.js .rd-title,html.js .rd-lede,html.js .rd-meta{animation:f-rise 1.1s var(--ease) both}
  html.js .rd-title{animation-delay:.06s}
  html.js .rd-lede,html.js .rd-meta{animation-delay:.2s}
}
@media (max-width:760px){
  .rd-hero{padding-top:128px}
  .rd-title{font-size:clamp(34px,9.6vw,48px);line-height:1.08}
  .rd-lede{font-size:20px}
  .rd-meta{margin-top:24px;padding-top:16px}
  .rd-body{margin-top:40px}
  .rd-prose p,.rd-prose li{font-size:18px;line-height:1.7}
  .rd-prose h2{margin-top:44px;font-size:28px}
  .rd-prose > ol{padding:22px 18px 16px 42px}
  .f-faq-ch{margin-top:88px}
  .f-faq-ch .f-faq-intro h2{font-size:28px}
  .f-faq-row summary{font-size:20px}
  .f-faq-row p{font-size:17px}
  .rd-book .f-btn{width:100%;min-height:52px;font-size:15px}
}

/* The Tea Room link above the title: a bigger tap area, with no change to the layout. */
.rd-hero .f-hero-premise a{display:inline-block;padding:12px 0;margin:-12px 0}

/* ---- Tea Room reads (.rd-read): built for reading first. ----
   The text column stays at 690px (about 70 characters a line), 19px with generous line height.
   On wide screens a quiet contents list and the tea mug sit in the left margin, well clear of the text. */
.rd-body .rd-grid:has(.rd-read){display:grid;width:min(1240px,calc(100% - 2 * var(--gutter)));grid-template-columns:minmax(0,1fr) minmax(0,690px) minmax(0,1fr);column-gap:clamp(32px,4vw,64px)}
.rd-body .rd-grid:has(.rd-read) .rd-col{grid-column:2;grid-row:1}
.rd-read h2{margin-top:64px}
.rd-read h2:first-child{margin-top:0}

/* The tea mug: a small light-teal box in the left margin that empties as you read and counts down the minutes.
   Quiet on purpose: pale, small and only its words change, so it never pulls the eye off the text. */
.rd-rail{grid-column:1;grid-row:1;justify-self:end;align-self:start;position:sticky;top:128px}
.rd-mug{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:var(--teal-soft);border-radius:14px 17px 13px 16px / 16px 13px 17px 14px;font:500 13px/1.3 var(--sans);color:var(--deep);white-space:nowrap}
.rd-mug svg{flex:none;width:34px;height:34px}
.rd-mug-tea{fill:#c49a6c;opacity:.8;transition:y .3s,height .3s}

/* Pull quote: one line already in the read, set large with the homepage's teal bar. */
.rd-read .rd-pull{position:relative;margin:48px 0;padding-left:28px;font:300 clamp(26px,2.5vw,32px)/1.3 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.rd-read .rd-pull::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:1.5px;background:var(--teal)}

/* The exercise: a notepad card. Each step is numbered in a hand-drawn teal circle, like the buttons' shapes. */
.rd-read > ol{counter-reset:rd-step;list-style:none;margin:32px 0 40px;padding:32px 32px 18px;background:#edf3ef;border-radius:20px 26px 18px 24px / 24px 18px 26px 20px}
.rd-read > ol > li{counter-increment:rd-step;position:relative;margin:0 0 18px;padding-left:50px}
.rd-read > ol > li::before{content:counter(rd-step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:32px;height:32px;background:var(--teal-ink);color:#fff;font:500 15px/1 var(--sans);border-radius:14px 17px 13px 16px / 16px 13px 17px 14px;transform:rotate(-4deg)}
.rd-read > ol > li:nth-child(2n)::before{border-radius:17px 13px 16px 14px / 13px 16px 14px 17px;transform:rotate(3deg)}
.rd-read > ol > li:nth-child(3n)::before{transform:rotate(-1deg)}

/* Hand over, keep, check: three marked steps, each lead line as a small heading above its paragraph. */
.rd-steps{display:grid;gap:32px;margin:8px 0 48px}
.rd-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;align-items:start}
.rd-step-mark{display:grid;place-items:center;width:44px;height:44px;background:var(--teal-soft);color:var(--teal-ink);border-radius:18px 22px 17px 21px / 21px 17px 22px 18px}
.rd-step-mark svg{width:24px;height:24px}
.rd-read .rd-step p{margin:0}
.rd-read .rd-step strong{display:block;margin:6px 0 8px;font:400 22px/1.3 var(--serif);letter-spacing:-.015em;color:var(--deep)}

/* Below 1180px there is no room in the margin: the same box floats in the corner while the read is on screen. */
@media (max-width:1180px){
  .rd-body .rd-grid:has(.rd-read){display:block;width:min(690px,calc(100% - 2 * var(--gutter)))}
  .rd-rail{display:contents}
  .rd-mug{position:fixed;left:16px;bottom:16px;z-index:30;box-shadow:0 10px 24px -14px rgba(17,17,17,.3);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}
  .rd-mug.is-on{opacity:1;transform:none}
}
@media (max-width:760px){
  .rd-read h2{margin-top:52px}
  /* Glen, 6 Oct: no mug on phones. The floating badge sat over the text being read. */
  .rd-mug{display:none}
  .rd-read .rd-pull{margin:40px 0;padding-left:20px;font-size:25px}
  .rd-read > ol{padding:24px 20px 12px;border-radius:16px 20px 15px 19px / 19px 15px 20px 16px}
  .rd-read > ol > li{padding-left:44px}
  .rd-read > ol > li::before{width:30px;height:30px;font-size:14px}
  .rd-steps{gap:28px}
  .rd-step{grid-template-columns:36px minmax(0,1fr);column-gap:14px}
  .rd-step-mark{width:36px;height:36px}
  .rd-step-mark svg{width:20px;height:20px}
  .rd-read .rd-step strong{margin-top:4px;font-size:20px}
}