/* home.css: the home page (home28). The first screen has one job: "What do you want to do today?" (eight ways in, written out as a
   ruled list, not a grid of cards). Under it, quieter parts: a situation list, Seven small days and this week, a Tool of the day,
   one idea from the book with the four books, and a short note from Christian.
   One accent (#2B5B8C), Fraunces for the big words (real size and weight contrast), Lora for reading, the UI font for every control,
   no monospace, almost no boxes, no gradients. Light colours only: dark mode is the site's inversion filter, and site.css turns
   images, canvas and svg back. Works with the live site.css (no design17 tokens) and the dev one. */
:root{
  --h-ink:#2B2620; --h-muted:#554E42; --h-acc:#2B5B8C; --h-acc-h:#214A72; --h-acc-soft:#EEF3F9;
  --h-paper:#FAF6EB; --h-card:#FFFDF8; --h-line:#E4D9BE; --h-rule:#CFC3A4; --h-wash:#F1EADA;
  --h-ui:var(--d17-ui, var(--tol-sans, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  --h-head:"Fraunces", Georgia, serif; --h-read:"Lora", Georgia, serif;
}
html body.h18-page{ margin:0; background:var(--h-paper); }
html body main.read.h18{ max-width:70rem; margin:0 auto; padding:clamp(1rem, 3vw, 2.4rem) 16px 1.5rem; box-sizing:border-box; }
@media (min-width:700px){ html body main.read.h18{ padding-left:28px; padding-right:28px; } }
html body main.read.h18 > section{ margin:0 0 clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); padding:0; background:none; border:0; box-shadow:none; }
.h18 p, .h18 li, .h18 h1, .h18 h2, .h18 h3{ max-width:none; }
.h18 ul{ list-style:none; margin:0; padding:0; }
html body main.read.h18 li{ margin:0; padding:0; width:auto; max-width:none !important; background:none; border:0; box-shadow:none; }
.h18 li::before{ content:none !important; }
/* no text bubbles, "#" heading links or tips inside the home page's own parts (the live site.css has bubbles on) */
html body main.read.h18 :is(p, h1, h2, h3, li){ --bb-fill:transparent; --bb-edge:transparent; --bb-shadow:none; }
.h18 .tol-hl{ display:none !important; }
.h18 a:focus-visible, .h18 button:focus-visible, .h18 summary:focus-visible{ outline:3px solid var(--h-acc); outline-offset:2px; border-radius:6px; }

/* ---------- type ---------- */
html body main.read.h18 .h-h1{ margin:0; padding:0; font:500 clamp(2.5rem, 1.5rem + 5vw, 4.9rem)/1.01 var(--h-head); letter-spacing:-.028em; color:var(--h-ink); text-wrap:balance; background:none; border:0; }
.h18 .h-mark{ display:inline-block; padding-bottom:.08em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c14-5 22 3 38-1.5s24-4 38 .5 24 2.500 40-2' fill='none' stroke='%232B5B8C' stroke-width='3.200' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .24em no-repeat; }
.h18 .h-lede{ margin:0; font:400 clamp(1.06rem, 1rem + .3vw, 1.2rem)/1.55 var(--h-read); color:var(--h-muted); text-wrap:pretty; }
html body main.read.h18 .h-h2{ margin:0 0 .4rem; padding:0; font:500 clamp(1.45rem, 1.2rem + 1.1vw, 2rem)/1.12 var(--h-head); letter-spacing:-.015em; color:var(--h-ink); background:none; border:0; text-transform:none; }
.h18 .h-sub{ margin:0 0 1rem; font:400 1.02rem/1.5 var(--h-read); color:var(--h-muted); }

/* links and buttons */
.h18 .h-link{ display:inline-flex; align-items:center; min-height:44px; font:700 1rem/1.2 var(--h-ui); color:var(--h-acc); text-underline-offset:3px; }
.h18 .h-link::after{ content:"\a0\2192"; }
html body main.read.h18 .h-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.5rem 1.2rem; border-radius:999px; box-sizing:border-box;
  font:700 1rem/1.2 var(--h-ui); text-decoration:none; cursor:pointer; color:#22496F; background:transparent; border:1.5px solid var(--h-acc); box-shadow:none; }
html body main.read.h18 .h-btn:hover{ background:var(--h-acc-soft); }
.h18 .h-more{ margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:0 1.5rem; }

/* ---------- 1. the first screen ---------- */
.h18 .h-hero{ display:grid; gap:0; }
.h18 .h-intro{ display:grid; gap:1rem 3rem; margin:0 0 clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.h18 .h-welcome:empty{ display:none; }
@media (min-width:900px){
  .h18 .h-intro{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); align-items:end; }
  .h18 .h-lede{ padding-bottom:.5rem; }
}
.h18 .h-choose{ display:grid; gap:0 clamp(2rem, 5vw, 4.5rem); }
@media (min-width:900px){ .h18 .h-choose{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start; } .h18 .h-choose .h-notsure{ grid-column:1 / -1; } }
.h18 .h-group{ margin:0 0 1.2rem; }
html body main.read.h18 .h-group-k{ margin:0 0 .35rem; padding:0; font:italic 500 1.2rem/1.3 var(--h-head); letter-spacing:0; text-transform:none; color:var(--h-acc); background:none; border:0; }
.h18 .h-wants{ display:block; }
.h18 a.h-want{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:.2rem .8rem; min-height:44px; box-sizing:border-box;
  margin:0 -.7rem; padding:1.05rem .7rem 1.1rem; border-top:1px solid var(--h-rule); text-decoration:none; color:var(--h-ink); border-radius:0; }
.h18 .h-wants li:first-child a.h-want{ border-top:2px solid var(--h-ink); }
.h18 .h-wants li:last-child a.h-want{ border-bottom:1px solid var(--h-rule); }
.h18 .h-want-t{ grid-column:1; font:500 clamp(1.5rem, 1.25rem + 1.2vw, 2rem)/1.1 var(--h-head); letter-spacing:-.015em; }
.h18 .h-want-n{ grid-column:1; font:400 1rem/1.45 var(--h-read); color:var(--h-muted); }
.h18 a.h-want::after{ content:"\2192"; grid-column:2; grid-row:1 / span 2; font:700 1.5rem/1 var(--h-ui); color:var(--h-acc); transition:transform .18s; }
.h18 a.h-want:hover, .h18 a.h-want:focus-visible{ background:rgba(43,91,140,.07); }
.h18 a.h-want:hover .h-want-t, .h18 a.h-want:focus-visible .h-want-t{ color:var(--h-acc); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.h18 a.h-want:hover::after{ transform:translateX(5px); }
.h18 a.h-want:focus-visible{ outline-offset:-3px; }
/* the second list is quieter: smaller type */
.h18 .h-group-time .h-want-t{ font-size:clamp(1.3rem, 1.15rem + .7vw, 1.55rem); }
.h18 .h-group-time a.h-want{ padding-top:.85rem; padding-bottom:.9rem; }
.h18 .h-notsure{ margin:.4rem 0 0; font:400 1.02rem/1.5 var(--h-read); color:var(--h-muted); }
.h18 .h-notsure a{ color:var(--h-acc); font-weight:600; text-underline-offset:3px; }

/* ---------- "Welcome back" (this-week.js) sits above the question: one warm note, two columns on a laptop ---------- */
html body main.read.h18 .h-welcome .tw-back{ max-width:none; margin:0 0 clamp(1.6rem, 1rem + 2vw, 2.6rem); padding:1.1rem 1.25rem 1rem; border:0; border-radius:10px; background:var(--h-wash); }
@media (min-width:900px){
  html body main.read.h18 .h-welcome .tw-back{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 3rem; align-items:start; }
  html body main.read.h18 .h-welcome .tw-back > :not(.rs-last){ grid-column:1; }
  html body main.read.h18 .h-welcome .tw-back > .rs-last{ grid-column:2; grid-row:1 / span 6; margin:0; padding:0 0 0 2.2rem; border-top:0; border-left:1px solid var(--h-rule); }
}

/* ---------- Pick up where you left off (only when something is saved and Welcome back is not showing it) ---------- */
.h18 .h-resume[hidden]{ display:none; }
html body main.read.h18 .h-resume-list{ display:grid; gap:0; max-width:40rem; }
.h18 a.h-resume-item{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 1rem; min-height:44px; box-sizing:border-box; padding:.65rem 0; border-top:1px solid var(--h-rule); text-decoration:none; color:var(--h-ink); }
.h18 a.h-resume-item:hover .h-resume-t, .h18 a.h-resume-item:focus-visible .h-resume-t{ color:var(--h-acc); text-decoration:underline; }
.h18 .h-resume-t{ font:600 1.15rem/1.25 var(--h-head); }
.h18 .h-resume-k{ font:400 .9rem/1.2 var(--h-ui); color:var(--h-muted); }
.h18 .h-resume-more{ margin:.2rem 0 0; }

/* ---------- 2. start from what's going on: the heading on the left, a plain list on the right ---------- */
.h18 .h-sit{ display:grid; gap:.6rem 3rem; }
@media (min-width:900px){ .h18 .h-sit{ grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); align-items:start; } .h18 .h-sit .h-more{ grid-column:2; } }
.h18 .h-sit-list{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:600px){ .h18 .h-sit-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:2rem; } }
.h18 .h-sit-list a{ display:flex; align-items:center; min-height:44px; padding:.35rem 0; border-top:1px solid var(--h-line); font:400 1.05rem/1.3 var(--h-read); color:var(--h-ink); text-underline-offset:4px; text-decoration-color:rgba(43,91,140,.45); }
.h18 .h-sit-list a:hover{ color:var(--h-acc); }
.h18 .h-sit-list li:nth-child(n+9){ display:none; }
@media (min-width:600px){ .h18 .h-sit-list li:nth-child(n+9){ display:block; } }
.h18 .h-sit-head .h-sub{ margin:0; max-width:22rem; }

/* ---------- 3. seven small days, and this week ---------- */
.h18 .h-small-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap:1.6rem 3rem; align-items:start; }
.h18 .h-days .rt-host{ margin-left:0; margin-right:0; max-width:36rem; }
.h18 .h-days .h-remind{ margin:.4rem 0 0; font:400 .95rem/1.4 var(--h-read); color:var(--h-muted); }
.h18 .h-days .h-remind summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; list-style:none; font:700 .98rem/1.2 var(--h-ui); color:var(--h-acc); }
.h18 .h-days .h-remind summary::-webkit-details-marker{ display:none; }
.h18 .h-days .h-remind summary::before{ content:"\25B8"; margin-right:.45rem; }
.h18 .h-days .h-remind[open] summary::before{ content:"\25BE"; }
html body main.read.h18 .h-week .tw-card{ max-width:36rem; padding:0; border:0; border-radius:0; background:none; }
html body main.read.h18 .h-week .tw-card .tw-k{ color:var(--h-acc); }
html body main.read.h18 .h-week .tw-card a.tw-exlink{ background:transparent; border-radius:6px; }

/* ---------- 4. tool of the day (tool-spotlight.js): no heading chrome, one plain feature ---------- */
.h18 .h-wtsec{ padding-top:1.4rem !important; border-top:2px solid var(--h-ink) !important; }
.h18 .h-wtsec[hidden]{ display:none !important; }

/* ---------- 5. one idea from the book: a big plain claim, and the four books beside it ---------- */
.h18 .h-ideasec{ display:grid; gap:1.4rem 3rem; align-items:center; }
.h18 .h-ideasec > .h-h2{ grid-column:1 / -1; margin:0; }
@media (min-width:900px){ .h18 .h-ideasec{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); } }
.h18 .h-idea-body{ min-height:11rem; }
html body main.read.h18 .h-idea-t{ margin:0 0 .5rem; font:italic 500 clamp(1.7rem, 1.3rem + 2vw, 2.6rem)/1.12 var(--h-head); letter-spacing:-.015em; color:var(--h-ink); }
.h18 .h-idea-n{ margin:0 0 .5rem; font:400 1.12rem/1.6 var(--h-read); color:var(--h-ink); max-width:36rem !important; }
.h18 .h-idea-from{ margin:0 0 .6rem; font:400 .95rem/1.4 var(--h-ui); color:var(--h-muted); }
.h18 .h-idea-from a{ color:var(--h-acc); text-underline-offset:3px; }
.h18 .h-idea-go{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.4rem; margin:0; }
.h18 .h-series{ display:flex; align-items:flex-end; justify-content:center; padding:.5rem 0 1rem; text-decoration:none; }
.h18 .h-series img{ display:block; width:min(23%, 112px); height:auto; margin-left:-3%; border-radius:3px; box-shadow:0 3px 10px rgba(43,38,32,.22); transform:rotate(var(--r, 0deg)); transform-origin:bottom center; transition:transform .2s; }
.h18 .h-series img:nth-child(1){ --r:-4deg; margin-left:0; } .h18 .h-series img:nth-child(2){ --r:-1deg; } .h18 .h-series img:nth-child(3){ --r:2deg; } .h18 .h-series img:nth-child(4){ --r:5deg; }
.h18 .h-series:hover img, .h18 .h-series:focus-visible img{ transform:rotate(0) translateY(-4px); }
@media (min-width:900px){ .h18 .h-series img{ width:min(24%, 150px); } .h18 .h-series{ grid-column:2; grid-row:2; } .h18 .h-idea{ grid-column:1; grid-row:2; } }

/* ---------- 6. who made this ---------- */
.h18 .h-back{ display:grid; gap:1.2rem 3rem; align-items:end; padding-top:1.6rem !important; border-top:1px solid var(--h-rule) !important; }
@media (min-width:900px){ .h18 .h-back{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); } }
.h18 .h-made p{ margin:0 0 .7rem; font:400 1.12rem/1.65 var(--h-read); color:var(--h-ink); max-width:38rem !important; }
.h18 .h-made a{ color:var(--h-acc); font-weight:600; text-underline-offset:3px; }
.h18 .h-art img{ display:block; width:100%; max-width:26rem; height:auto; margin-left:auto; }
@media (max-width:899px){ .h18 .h-art img{ max-width:15rem; margin-left:0; } }

/* ---------- Quiet mode: the same short page, without the pictures ---------- */
html.tol-quiet .h18 :is(.h-art, .h-series){ display:none !important; }
html.tol-quiet .h18 a.h-want::after{ transition:none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){ .h18 a.h-want::after, .h18 .h-series img{ transition:none !important; } .h18 a.h-want:hover::after{ transform:none; } }

/* ---------- the site's extras that don't belong on a page this short ---------- */
@media (max-width:640px){ html.h18-top .tol-pud-fab, html.h18-top .tol-breathe-btn{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } }
@media (min-width:641px){ html.h18-top .tol-help{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } }
.h18-page .tol-outline, .h18-page .tol-otp, .h18-page .tol-puddles-hi{ display:none !important; }

/* the Brain Map feature (home29) */
.h18 .h-brainsec{ display:grid; gap:1.2rem 3rem; align-items:center; padding-top:1.4rem !important; border-top:2px solid var(--h-ink) !important; }
.h18 .h-brainsec > .h-brain-art{ display:block; max-width:520px; justify-self:center; width:100%; border-radius:18px; }
.h18 .h-brain-art img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 10px 28px rgba(60,45,20,.16); }
.h18 .h-brain-k{ margin:0 0 .35rem; font:700 .8rem/1 var(--h-ui, system-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--h-acc); }
.h18 .h-brain-p{ margin:.2rem 0 1rem; max-width:34rem; font:400 1.06rem/1.55 var(--h-read, Georgia, serif); color:var(--h-ink); }
.h18 .h-brain-go{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; margin:0; }
@media (min-width:900px){ .h18 .h-brainsec{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); } .h18 .h-brainsec > .h-brain-art{ justify-self:end; } }
html body main.read.h18 .h-btn.h-btn-main{ color:#fff; background:var(--h-acc); border-color:var(--h-acc); }
html body main.read.h18 .h-btn.h-btn-main:hover{ background:var(--h-acc-h); border-color:var(--h-acc-h); }