/* do.css: /do.html (home28), the page behind each way in on the home page. A big plain heading, one large first pick, then a ruled list
   with a button on each line. Same type and colour as the home page: Fraunces for the big words, Lora for reading, one accent (#2B5B8C),
   almost no boxes. Light colours only: dark mode is the site's inversion filter. */
:root{
  --d-ink:#2B2620; --d-muted:#554E42; --d-acc:#2B5B8C; --d-acc-h:#214A72; --d-acc-soft:#EEF3F9; --d-paper:#FAF6EB; --d-wash:#F1EADA; --d-rule:#CFC3A4; --d-line:#E4D9BE;
  --d-ui:var(--d17-ui, var(--tol-sans, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  --d-head:"Fraunces", Georgia, serif; --d-read:"Lora", Georgia, serif;
}
html body.dw-page{ margin:0; background:var(--d-paper); }
html body main.read.dw{ background:none; border:0; border-radius:0; box-shadow:none; max-width:62rem; margin:0 auto; padding:clamp(1rem, 3vw, 2.4rem) 16px 3rem; box-sizing:border-box; }
@media (min-width:700px){ html body main.read.dw{ padding-left:28px; padding-right:28px; } }
.dw p, .dw li, .dw h1, .dw h2, .dw h3{ max-width:none; }
.dw ul{ list-style:none; margin:0; padding:0; }
html body main.read.dw li{ margin:0; padding:0; width:auto; max-width:none !important; background:none; border:0; box-shadow:none; }
.dw li::before{ content:none !important; }
html body main.read.dw :is(p, h1, h2, h3, li){ --bb-fill:transparent; --bb-edge:transparent; --bb-shadow:none; }
.dw .tol-hl{ display:none !important; }
.dw a:focus-visible{ outline:3px solid var(--d-acc); outline-offset:2px; border-radius:6px; }
.dw-page .tol-outline, .dw-page .tol-otp, .dw-page .tol-puddles-hi, .dw-page .tol-pud-end{ display:none !important; }   /* the page has its own plain Professor Puddles link */
/* (the wrapper is marked no-bubble: site.css would otherwise draw a text bubble round it) */

.dw .dw-crumb{ margin:0 0 1.4rem; font:400 1rem/1.3 var(--d-ui); }
.dw .dw-crumb a{ display:inline-flex; align-items:center; min-height:44px; color:var(--d-acc); font-weight:700; text-underline-offset:3px; }
.dw .dw-crumb a::before{ content:"\2190\a0"; }

html body main.read.dw .dw-h1{ margin:0 0 .6rem; padding:0; border:0; background:none; font:500 clamp(2.3rem, 1.4rem + 4.4vw, 4.2rem)/1.03 var(--d-head); letter-spacing:-.026em; color:var(--d-ink); text-wrap:balance; }
.dw .dw-lead{ margin:0 0 clamp(1.6rem, 1rem + 2.4vw, 2.8rem); max-width:40rem !important; font:400 clamp(1.1rem, 1.04rem + .4vw, 1.3rem)/1.55 var(--d-read); color:var(--d-muted); text-wrap:pretty; }
html body main.read.dw .dw-h2{ margin:0 0 .5rem; padding:0; border:0; background:none; font:italic 500 1.3rem/1.25 var(--d-head); letter-spacing:0; text-transform:none; color:var(--d-acc); }

/* the first pick: large, with its button beside it on a laptop */
html body main.read.dw .dw-top{ display:grid; gap:1.1rem 3rem; margin:0 0 clamp(2rem, 1.4rem + 3vw, 3.6rem); padding:clamp(1.2rem, .8rem + 2vw, 2.2rem) clamp(1.1rem, .6rem + 2.4vw, 2.4rem); border-radius:10px; background:var(--d-wash); }
@media (min-width:820px){ html body main.read.dw .dw-top{ grid-template-columns:minmax(0, 1fr) auto; align-items:center; } }
.dw .dw-flag{ margin:0 0 .3rem; font:italic 500 1.1rem/1.3 var(--d-head); color:var(--d-acc); }
html body main.read.dw .dw-top-t{ margin:0 0 .5rem; padding:0; border:0; background:none; font:500 clamp(1.8rem, 1.3rem + 2.4vw, 3rem)/1.08 var(--d-head); letter-spacing:-.02em; text-transform:none; color:var(--d-ink); }
.dw .dw-top-why{ margin:0; max-width:38rem !important; font:400 clamp(1.08rem, 1.02rem + .3vw, 1.22rem)/1.6 var(--d-read); color:var(--d-ink); }
.dw .dw-top-side{ display:grid; gap:.5rem; justify-items:start; }
@media (min-width:820px){ .dw .dw-top-side{ justify-items:end; text-align:right; } }
.dw .dw-time{ margin:0; font:700 .95rem/1.3 var(--d-ui); color:var(--d-muted); }

/* the buttons */
.dw a.dw-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; padding:.5rem 1.2rem; border-radius:999px; text-align:center; text-decoration:none;
  font:700 1rem/1.2 var(--d-ui); color:#22496F; background:transparent; border:1.5px solid var(--d-acc); }
.dw a.dw-btn::after{ content:"\a0\2192"; }
.dw a.dw-btn:hover{ background:var(--d-acc-soft); }
.dw a.dw-btn.is-big{ min-height:54px; padding:.7rem 1.7rem; font-size:1.12rem; color:#fff; background:var(--d-acc); }
.dw a.dw-btn.is-big:hover{ background:var(--d-acc-h); border-color:var(--d-acc-h); }

/* the rest: a ruled list, a button on each line */
.dw .dw-list{ border-bottom:1px solid var(--d-rule); }
html body main.read.dw li.dw-item{ display:grid; gap:.7rem 2rem; padding:1.15rem 0 1.25rem; border-top:1px solid var(--d-rule); }
html body main.read.dw .dw-list li.dw-item:first-child{ border-top:2px solid var(--d-ink); }
@media (min-width:760px){ html body main.read.dw li.dw-item{ grid-template-columns:minmax(0, 1fr) 15rem; align-items:center; } }
html body main.read.dw .dw-item-t{ margin:0 0 .25rem; padding:0; border:0; background:none; font:500 clamp(1.3rem, 1.15rem + .7vw, 1.6rem)/1.15 var(--d-head); letter-spacing:-.01em; color:var(--d-ink); text-transform:none; }
.dw .dw-why{ margin:0; max-width:38rem !important; font:400 1.04rem/1.55 var(--d-read); color:var(--d-muted); }
.dw .dw-item-side{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; }
@media (min-width:760px){ .dw .dw-item-side{ flex-direction:column; align-items:flex-start; } }

/* the other ways in */
.dw .dw-others{ margin:clamp(2.4rem, 1.6rem + 3vw, 4rem) 0 0; }
.dw .dw-others ul{ display:flex; flex-wrap:wrap; gap:0 1.6rem; margin:0 0 .6rem; }
.dw .dw-others li a{ display:inline-flex; align-items:center; min-height:44px; font:400 1.12rem/1.3 var(--d-read); color:var(--d-ink); text-underline-offset:4px; text-decoration-color:rgba(43,91,140,.5); }
.dw .dw-others li a:hover{ color:var(--d-acc); }
.dw .dw-ask{ margin:0; font:400 1.02rem/1.5 var(--d-read); color:var(--d-muted); }
.dw .dw-ask a{ color:var(--d-acc); font-weight:600; text-underline-offset:3px; }

/* the eight ways in (no ?want) */
.dw .dw-choose{ display:grid; gap:0 clamp(2rem, 5vw, 4.5rem); }
@media (min-width:820px){ .dw .dw-choose{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; } }
.dw .dw-group{ margin:1.2rem 0 .35rem; font:italic 500 1.2rem/1.3 var(--d-head); color:var(--d-acc); }
.dw .dw-ways li:first-child a{ border-top:2px solid var(--d-ink); }
.dw .dw-ways a{ display:grid; gap:.15rem; min-height:44px; padding:1rem 0 1.05rem; border-top:1px solid var(--d-rule); text-decoration:none; color:var(--d-ink); }
.dw .dw-ways li:last-child a{ border-bottom:1px solid var(--d-rule); }
.dw .dw-way-t{ font:500 1.6rem/1.1 var(--d-head); letter-spacing:-.015em; }
.dw .dw-way-n{ font:400 1rem/1.45 var(--d-read); color:var(--d-muted); }
.dw .dw-ways a:hover .dw-way-t{ color:var(--d-acc); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }

/* no JavaScript: a plain list of everything */
.dw-nj-jump{ display:flex; flex-wrap:wrap; gap:0 1.4rem; margin:0 0 1.4rem; }
.dw-nj-jump a{ display:inline-flex; align-items:center; min-height:44px; color:var(--d-acc); font:700 1rem/1.2 var(--d-ui); }
.dw .dw-nj h2{ margin:1.6rem 0 .2rem; font:500 1.7rem/1.15 var(--d-head); color:var(--d-ink); }
.dw .dw-nj p{ margin:0 0 .4rem; font:400 1.05rem/1.5 var(--d-read); color:var(--d-muted); }
.dw .dw-nj li{ padding:.15rem 0; font:400 1.05rem/1.4 var(--d-read); }
.dw .dw-nj li a{ display:inline-flex; align-items:center; min-height:44px; color:var(--d-acc); font-weight:700; }
.dw .dw-nj li span{ color:var(--d-muted); font-size:.95rem; }