/* writing.css — long-form reading layer for /writing/*.
   Inherits every token from trail.css and defines NO colours of its own — only var() references —
   so the two can never drift. Load trail.css first.

   Contrast: until 2026-09-22 this file worked around two Trail tokens that failed AA as text
   (--ink-3, --saffron-deep) by substituting --ink/--ink-2 inside /writing/ only. Those tokens were
   then fixed at the source in trail.css, so the workaround is gone and guide links now look
   exactly like homepage links. Links keep a saffron underline for readability in long prose. */

.w-wrap{max-width:720px;margin:0 auto;padding:0 22px}   /* narrower than .wrap (1040): prose, not layout */

.w-meta,.w-foot,.w-toc .sub,.w-back,.w-pager a{color:var(--ink-3)}   /* 5.12:1 on sky, 5.89:1 on card */

/* Links: token colour (5.07:1 on sky), saffron underline. The underline also satisfies 1.4.1 —
   links are distinguishable from body text without relying on colour. */
.w-wrap a{color:var(--saffron-deep);text-decoration:underline;text-decoration-color:var(--saffron);
  text-decoration-thickness:2px;text-underline-offset:3px}
.w-wrap a:hover{text-decoration-color:var(--saffron-deep)}
.w-wrap a:focus-visible{outline:3px solid var(--saffron-deep);outline-offset:3px;border-radius:1px}

.w-head{padding:calc(var(--nav-h) + 56px) 0 8px}
.w-head h1{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.12;letter-spacing:-.015em;margin:10px 0 14px}
.w-head .lede{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0}
.w-meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 0}

.w-body{padding:8px 0 72px}
.w-body h2{font-family:var(--disp);font-weight:600;font-size:clamp(22px,3.2vw,28px);line-height:1.2;letter-spacing:-.01em;margin:52px 0 12px}
.w-body h3{font-family:var(--disp);font-weight:600;font-size:19px;margin:32px 0 8px}
.w-body p{margin:0 0 18px}
.w-body ul,.w-body ol{margin:0 0 18px;padding-left:22px}
.w-body li{margin:0 0 8px}
.w-body strong{font-weight:600;color:var(--ink)}

/* The one visual device: a pulled-out claim. Used sparingly — it stops meaning anything if every
   paragraph is one. */
.w-claim{border-left:3px solid var(--saffron);background:var(--saffron-soft);
  padding:16px 20px;margin:26px 0;font-size:19px;line-height:1.5;color:var(--ink)}

/* Failure entries. Pine rather than saffron: saffron is the site's "look here", pine is "this is a
   specimen". Title is an h3 (was h4, which skipped a level under the page's h2s). */
.w-case{border:1px solid var(--line);border-left:3px solid var(--pine);background:var(--card);
  padding:18px 20px;margin:18px 0;border-radius:2px}
.w-case h3{font-family:var(--disp);font-weight:600;font-size:17px;margin:0 0 6px;color:var(--pine)}
.w-case p{margin:0 0 10px;font-size:17px;line-height:1.55}
.w-case p:last-child{margin:0}
.w-case .fix{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--ink-2);
  border-top:1px dashed var(--line);padding-top:10px;margin-top:12px}

.w-toc{border:1px solid var(--line);background:var(--card);border-radius:2px;padding:18px 22px;margin:30px 0 8px}
.w-toc ol{margin:8px 0 0;padding-left:20px}
.w-toc li{margin:0 0 7px}
.w-toc .sub{display:block;font-size:15px;margin-top:1px}

.w-back{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* Pager between chapters. */
.w-pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:22px 0 8px}
.w-pager a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 0}
.w-pager .prev{margin-right:auto}
.w-pager .next{margin-left:auto;text-align:right}

/* Download block. Pine ground rather than saffron: saffron is the site's "look here" and this is
   the one place on the page that already has a button doing that job. All text is --pine-ink
   (6.68:1); --pine-muted measured 4.49:1, a hair under AA, so it is only used for the border. */
.w-dl{background:var(--pine);color:var(--pine-ink);border-radius:3px;padding:26px 24px;margin:40px 0 8px}
.w-dl .k{color:var(--pine-ink);opacity:1}
.w-dl h3{font-family:var(--disp);font-weight:600;font-size:22px;margin:8px 0 12px;color:var(--pine-ink)}
.w-dl p{margin:0 0 14px;color:var(--pine-ink);font-size:17px;line-height:1.55}
.w-dl code{font-family:var(--mono);font-size:14px;border:1px solid var(--pine-muted);padding:0 5px;border-radius:2px}
.w-dl a:not(.w-dlbtn){color:var(--pine-ink);text-decoration-color:var(--saffron)}
.w-dlbtn{display:inline-block;background:var(--saffron);color:var(--ink)!important;text-decoration:none!important;
  font-family:var(--disp);font-weight:600;font-size:17px;padding:12px 22px;border-radius:2px;margin-top:2px}
.w-dlbtn:hover{filter:brightness(1.06)}
.w-dlbtn:focus-visible{outline:3px solid var(--pine-ink);outline-offset:3px}
.w-dlnote{font-size:15px!important;margin:14px 0 0!important}

.w-foot{border-top:1px solid var(--line);padding:26px 0 60px;font-size:15px}

@media (max-width:640px){
  .w-head{padding-top:calc(var(--nav-h) + 32px)}
  .w-body h2{margin-top:40px}
  .w-head .lede{font-size:18px}
}