/* ocean.css: shared styles for "How the sea works" (hub + chapters).
   PROTOTYPE 7 Oct 2026. In production: /Manly-Swim/ocean/ocean.css, loaded by every
   page as ocean.css?v=<first 8 hex of this file's sha1>. The first part is
   waves.html's stylesheet, copied verbatim (lines 65-211 at commit ef791a0). */
  :root{
    --cream:#fbf6ec; --cream2:#f3ede0;
    --ink:#0d2b3e; --text:#14333f; --dim:#5f8795; --faint:#8fb0bb;
    --sun:#e0982f; --ocean:#0a7ea4; --deep:#0b4f6c;
    --border:rgba(13,43,62,.13);
    --card:rgba(255,255,255,.66);
    --radius:14px;
    /* chart series — validated (dataviz validate_palette, light, surface #fbf6ec): all pass */
    --s7:#c2780f; --s10:#0a7ea4; --s13:#5b4bb0;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--cream);
    background-image:radial-gradient(120% 55% at 50% 0,#fff 0,rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--cream2),var(--cream2));
    background-attachment:fixed;
    color:var(--text);
    font-family:'Newsreader',Georgia,serif; font-weight:400;
    font-size:19px; line-height:1.62;
    padding:0 0 64px;
  }
  .wrap{max-width:640px; margin:0 auto; padding:0 18px}
  h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif; color:var(--ink)}
  .eyebrow,.mono,.back-link,.fig-cap,.ctl label,.out-k,.src li{font-family:'DM Mono',ui-monospace,monospace}
  .eyebrow{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}

  header{padding:calc(18px + env(safe-area-inset-top,0px)) 0 8px}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px}
  .topbar-name{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; font-size:17px; color:var(--ink)}
  .back-link{display:inline-flex; align-items:center; min-height:44px; margin:-11px 0; padding-left:14px;
    font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); text-decoration:none}
  .back-link:hover,.back-link:focus-visible{color:var(--sun)}

  .hero{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
    border:1px solid var(--border); border-radius:22px; padding:28px 24px 30px; text-align:center;
    box-shadow:0 4px 20px rgba(6,78,110,.07)}
  .hero .eyebrow{color:var(--sun)}
  h1{font-weight:800; font-size:clamp(40px,11vw,62px); line-height:.95; letter-spacing:-.02em; margin:4px 0 16px}
  .lede{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; font-size:clamp(20px,5vw,25px);
    line-height:1.28; color:var(--ink); max-width:24em; margin:0 auto}
  .hero p.why{font-size:18.5px; opacity:.88; margin:16px auto 0; max-width:30em}
  /* byline, as on guide.html: the photo is a CSS background (no long-press save, no
     drag-out), hard-locked in size so it never scales with the type */
  .hero-byline{display:flex; flex-direction:column; align-items:center; gap:9px; margin:22px 0 4px}
  .hero-photo{width:88px; height:88px; min-width:88px; max-width:88px; min-height:88px; max-height:88px; flex:0 0 88px;
    border-radius:50%; border:3px solid #fff; box-shadow:0 4px 14px rgba(6,78,110,.2);
    background-image:url('images/marco2.png'); background-size:cover; background-position:center; background-repeat:no-repeat;
    pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none}
  .hero-author{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:600; font-size:17px; color:var(--ink); margin:0}
  .hero-role{display:inline-block; font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:15px; letter-spacing:.01em;
    color:var(--dim); background:rgba(255,255,255,.5); border:1px solid var(--border); border-radius:999px; padding:3px 12px}
  @media (max-width:420px){
    .hero-byline{gap:8px}
    .hero-photo{width:78px; height:78px; min-width:78px; max-width:78px; min-height:78px; max-height:78px; flex:0 0 78px}
  }

  nav.toc{margin:22px 0 4px; display:flex; flex-wrap:wrap; gap:8px}
  nav.toc a{font-family:'DM Mono',monospace; font-size:12.5px; letter-spacing:.04em; text-decoration:none;
    color:var(--deep); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:6px 12px}
  nav.toc a:hover{border-color:var(--ocean)}

  section{margin-top:44px; scroll-margin-top:16px}
  h2{font-weight:800; font-size:clamp(27px,7vw,36px); line-height:1.05; letter-spacing:-.015em; margin:0 0 12px}
  h3{font-weight:600; font-size:20px; margin:22px 0 6px}
  p{margin:0 0 14px}
  strong{font-weight:500; color:var(--ink)}
  .num{font-family:'DM Mono',monospace; font-size:.86em; color:var(--deep); white-space:nowrap}

  .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:16px 0}
  .rule{border-left:3px solid var(--sun); padding:2px 0 2px 14px; margin:18px 0; font-style:italic; color:var(--ink)}
  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:16px 0}
  .fact{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
  .fact b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:26px; line-height:1.05; color:var(--ink)}
  .fact span{display:block; font-size:15px; line-height:1.35; color:var(--text); margin-top:4px}

  .fig{margin:16px 0}
  .fig-cap{font-size:12.5px; line-height:1.5; color:var(--dim); margin-top:8px}
  canvas{display:block; width:100%; border-radius:12px}

  /* controls */
  .ctl{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; margin:12px 0 4px}
  .ctl label{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
  .ctl output{font-family:'DM Mono',monospace; font-size:14px; color:var(--ink); text-align:right}
  .ctl input[type=range]{grid-column:1 / -1; width:100%; accent-color:var(--ocean); height:28px}
  .seg{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px}
  .seg button{font-family:'DM Mono',monospace; font-size:12.5px; border:1px solid var(--border); background:#fff;
    color:var(--deep); border-radius:999px; padding:7px 12px; cursor:pointer; min-height:36px}
  .seg button[aria-pressed=true]{background:var(--deep); color:#fff; border-color:var(--deep)}

  /* chart */
  .chart{position:relative}
  .chart svg{display:block; width:100%; height:auto; overflow:visible}
  .chart .tip{position:absolute; pointer-events:none; background:#fff; border:1px solid var(--border);
    border-radius:10px; padding:8px 10px; font-family:'DM Mono',monospace; font-size:12px; line-height:1.5;
    color:var(--text); box-shadow:0 4px 14px rgba(13,43,62,.12); opacity:0; transition:opacity .12s; white-space:nowrap}
  .legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-family:'DM Mono',monospace; font-size:12px; color:var(--text); margin:6px 0 2px}
  .legend i{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
  .legend i.dot{width:9px; height:9px; border-radius:50%; background:var(--ink)}
  details{margin-top:10px}
  summary{font-family:'DM Mono',monospace; font-size:12.5px; color:var(--deep); cursor:pointer}
  table{border-collapse:collapse; width:100%; font-family:'DM Mono',monospace; font-size:12.5px; margin-top:8px}
  th,td{padding:5px 6px; border-bottom:1px solid var(--border); text-align:right}
  th:first-child,td:first-child{text-align:left}

  /* simulator */
  .sim{background:linear-gradient(180deg,#fff,rgba(255,255,255,.7)); border:1px solid var(--border);
    border-radius:20px; padding:16px; box-shadow:0 4px 20px rgba(6,78,110,.08)}
  .map{border-radius:12px; overflow:hidden; border:1px solid var(--border)}
  .map svg{display:block; width:100%; height:auto}
  .ctl-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
  @media (max-width:520px){ .ctl-grid{grid-template-columns:1fr} }
  .ctl-head{grid-column:1 / -1; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:15px; color:var(--ink); margin:14px 0 -4px}
  .outs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
  @media (max-width:520px){ .outs{grid-template-columns:1fr} }
  .out{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px}
  .out-k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
  .out-v{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:25px; line-height:1.1; color:var(--ink); margin:4px 0 2px}
  .out-s{font-size:15px; line-height:1.4}
  .bar{height:6px; border-radius:3px; background:rgba(13,43,62,.08); margin-top:8px; overflow:hidden}
  .bar i{display:block; height:100%; background:var(--ocean); border-radius:3px}
  .caveat{font-size:15px; line-height:1.5; color:var(--dim); margin-top:14px}
  .ctl.span2{grid-column:1 / -1}
  .out.wide{grid-column:1 / -1}
  .sim-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px}
  .sim-share{font-family:'DM Mono',monospace; font-size:12.5px; border:1px solid var(--border); background:#fff;
    color:var(--deep); border-radius:999px; padding:8px 14px; cursor:pointer; min-height:40px}
  .sim-share:hover,.sim-share:focus-visible{border-color:var(--ocean)}
  .sim-msg{font-family:'DM Mono',monospace; font-size:12.5px; color:var(--dim); word-break:break-all}
  .sim-src{font-family:'DM Mono',monospace; font-size:12px; line-height:1.5; color:var(--dim); margin-top:10px}

  .src{list-style:none; font-size:12.5px; line-height:1.55}
  .src li{margin:0 0 8px; word-break:break-word}
  .src a{color:var(--deep)}
  footer{margin-top:44px; font-size:14px; color:var(--dim); text-align:center}
  footer a{color:var(--deep)}

  /* ── figure: hero ── */
  .hero-cv{max-width:30em; margin:14px auto -8px; border-radius:0}
  /* ── figure: size ── */
  /* 02 height & period figure: readouts under the sliders */
  .size-read{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
  /* 4 across needs ~105 px a cell for "90 km/h"; below a 600 px viewport go 2 x 2 */
  @media (max-width:600px){ .size-read{grid-template-columns:1fr 1fr} }
  .size-cell{background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0}
  .size-cell .out-k{font-size:10.5px; letter-spacing:.06em; line-height:1.3}
  .size-v{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:21px; line-height:1.15; color:var(--ink); margin-top:3px; white-space:nowrap}
  .size-sub{font-family:'DM Mono',ui-monospace,monospace; font-size:11px; line-height:1.3; color:var(--dim); margin-top:2px}

/* ══════════════════════════════════════════════════════════════════════════════
   HUB + CHAPTER FRAME (new, prototype 7 Oct 2026). Everything above this line is
   waves.html's stylesheet, copied verbatim; everything below is new.
   ══════════════════════════════════════════════════════════════════════════════ */

/* theme accents: bars, numbers and illustration tints only, never body text */
.t-waves{--theme:#0a7ea4; --tint:rgba(10,126,164,.15)}
.t-wind {--theme:#5b4bb0; --tint:rgba(91,75,176,.13)}
.t-sand {--theme:#c2780f; --tint:rgba(194,120,15,.15)}
.t-tides{--theme:#0b4f6c; --tint:rgba(11,79,108,.15)}
.t-temp {--theme:#2e7d5b; --tint:rgba(46,125,91,.15)}
.t-tools{--theme:#5f8795; --tint:rgba(95,135,149,.16)}

.wrap-wide{max-width:920px; margin:0 auto; padding:0 18px}
a.topbar-name{text-decoration:none}
a.topbar-name:hover,a.topbar-name:focus-visible{color:var(--deep)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* review-only note (prototype; not shipped) */
.proto-note{font-family:'DM Mono',ui-monospace,monospace; font-size:12px; line-height:1.6; color:var(--deep);
  border:1px dashed rgba(11,79,108,.35); border-radius:12px; padding:10px 12px; margin:0 0 16px; background:rgba(255,255,255,.5)}
.proto-note b{font-weight:500; color:var(--ink)}

/* buttons */
.cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:999px;
  font-family:'DM Mono',ui-monospace,monospace; font-size:13px; letter-spacing:.03em; text-decoration:none; cursor:pointer}
.btn-primary{background:var(--deep); color:#fff; border:1px solid var(--deep)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ink); border-color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--deep); border:1px solid var(--border)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ocean)}
.progress-line{font-family:'DM Mono',ui-monospace,monospace; font-size:12.5px; color:var(--dim); text-align:center; margin:14px 0 0}
.pbar{display:block; width:180px; height:4px; margin:8px auto 0; border-radius:2px; background:rgba(13,43,62,.08); overflow:hidden}
.pbar i{display:block; height:100%; width:0; background:var(--sun); border-radius:2px}

/* ── hub: the 60-second version ── */
.quick{margin-top:40px; background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  border:1px solid var(--border); border-radius:22px; padding:24px 20px 8px; box-shadow:0 4px 20px rgba(6,78,110,.06); scroll-margin-top:16px}
.quick > .eyebrow{color:var(--sun)}
.quick > h2{margin-bottom:4px}
.quick > p{font-size:17px; color:var(--text); opacity:.88}
.ideas{list-style:none; margin:8px 0 0}
.idea{display:grid; grid-template-columns:34px 1fr; gap:0 12px; padding:16px 0; border-top:1px solid var(--border)}
.idea-n{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:30px; line-height:1; color:var(--theme); padding-top:1px}
.idea h3{font-size:20px; line-height:1.2; margin:0 0 6px}
.idea p{font-size:17px; line-height:1.5; margin:0 0 8px}
.idea-go{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; width:max-content; max-width:100%; margin:2px 0;
  font-size:16.5px; line-height:1.35; color:var(--deep); text-decoration:none}
.idea-go span{font-family:'DM Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.idea-go:hover,.idea-go:focus-visible{color:var(--sun)}
.ch-extra,.end-links a{font-family:'DM Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em; color:var(--deep);
  text-decoration:none; border-bottom:1px solid rgba(11,79,108,.3)}
.ch-extra:hover,.end-links a:hover{color:var(--sun); border-color:var(--sun)}

/* ── hub: themes and chapter cards ── */
.themes{margin-top:8px}
.theme-jump{justify-content:center; margin:40px 0 0}
.theme{scroll-margin-top:16px}
@media (max-width:699px){ .ill{aspect-ratio:2/1} }
/* a theme with one chapter: illustration beside the text on wide screens */
@media (min-width:700px){
  .cards.solo{grid-template-columns:1fr}
  .cards.solo .ch-card{display:grid; grid-template-columns:1fr 1fr}
  .cards.solo .ill{aspect-ratio:auto; min-height:230px; border-bottom:0; border-right:1px solid var(--border)}
}
.theme{margin-top:44px}
.theme-head{display:grid; grid-template-columns:4px 1fr; gap:0 14px; margin-bottom:16px}
.theme-bar{border-radius:2px; background:var(--theme)}
.theme-head .eyebrow{margin-bottom:2px}
.theme-head h2{font-size:clamp(25px,6vw,32px); margin:0}
.theme-head p{font-size:17px; line-height:1.45; margin:6px 0 0; max-width:34em}
.cards{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:700px){ .cards{grid-template-columns:1fr 1fr; gap:16px} }
.ch-card{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; transition:border-color .15s, box-shadow .15s}
.ch-card:hover{border-color:var(--theme); box-shadow:0 6px 22px rgba(6,78,110,.10)}
.ch-body{display:flex; flex-direction:column; flex:1; padding:13px 16px 16px}
.ch-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.ch-meta .ch-n{color:var(--ink); font-weight:500}
.ch-card h3{font-size:22px; line-height:1.12; letter-spacing:-.01em; margin:6px 0}
.ch-card h3 a{color:var(--ink); text-decoration:none}
.ch-card h3 a::after{content:''; position:absolute; inset:0; z-index:1; border-radius:16px}
.ch-card h3 a:focus-visible{outline:none}
.ch-card h3 a:focus-visible::after{outline:3px solid var(--ocean); outline-offset:-3px}
.ch-hook{font-size:16.5px; line-height:1.45; margin:0 0 12px}
.ch-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:auto}
.ch-extra{position:relative; z-index:2; font-size:11.5px}
.chip{font-family:'DM Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.05em; border-radius:999px; padding:3px 9px;
  border:1px solid var(--border); color:var(--dim); background:rgba(255,255,255,.65)}
.chip-proto{border-style:dashed; border-color:rgba(11,79,108,.4); color:var(--deep)}
.chip-todo{color:#8a6a2f; border-color:rgba(194,120,15,.35); background:rgba(224,152,47,.08)}
.tick{display:inline-flex; align-items:center; gap:4px; color:#2e7d5b; font-weight:500; letter-spacing:.08em}
.tick svg{width:12px; height:12px}
.ch-card.is-read{border-color:rgba(46,125,91,.35)}
.ch-card.ref .ch-body{padding-top:16px}

/* ── illustration placeholders (slots for the Gemini illustrations) ── */
.ill{position:relative; text-align:left; aspect-ratio:16/9; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:14px 16px; background:linear-gradient(160deg,var(--tint),rgba(255,255,255,.25) 75%); color:var(--theme);
  border-bottom:1px solid var(--border)}
.ill::before{content:''; position:absolute; inset:8px; border:1px dashed rgba(13,43,62,.16); border-radius:10px; pointer-events:none}
.ill-art{position:absolute; left:0; right:0; bottom:0; width:100%; height:62%; opacity:.5; pointer-events:none}
.ill-tag{position:relative; align-self:flex-start; font-family:'DM Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); background:rgba(251,246,236,.85); border-radius:999px; padding:3px 9px}
.ill-brief{position:relative; font-style:italic; font-size:14.5px; line-height:1.38; color:var(--deep); max-width:28em;
  background:rgba(251,246,236,.72); border-radius:8px; padding:4px 8px; margin:0 -4px -2px}
.ill-hero{border:1px solid var(--border); border-radius:16px; margin:20px 0 0}

/* ── chapter page ── */
.ch-hero .eyebrow{color:var(--sun)}
.ch-hero h1{font-size:clamp(38px,10vw,56px); margin-bottom:14px}
.ch-hero .lede{font-style:normal}
.ch-info{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; margin:18px 0 0;
  font-family:'DM Mono',ui-monospace,monospace; font-size:12.5px; letter-spacing:.04em; color:var(--dim)}
.ch-info .by{display:inline-flex; align-items:center; gap:8px}
.mini-photo{width:28px; height:28px; min-width:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 8px rgba(6,78,110,.18);
  background-image:url('https://app.viz.net.au/Manly-Swim/images/marco2.png'); background-size:cover; background-position:center;
  pointer-events:none; -webkit-touch-callout:none; user-select:none}

/* sticky mini table of contents */
/* top: below the status bar inside the installed iPhone app (viewport-fit=cover, translucent
   status bar), where the strip above it is painted once it sticks; 0 everywhere else */
.ch-toc{position:sticky; top:0; top:env(safe-area-inset-top,0px); z-index:30; margin-top:22px; background:transparent;
  border-bottom:1px solid transparent; transition:background-color .2s, border-color .2s, box-shadow .2s}
.ch-toc.stuck{background:rgba(243,237,224,.92); -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom-color:var(--border); box-shadow:0 2px 14px rgba(6,78,110,.07)}
.ch-toc:not(.stuck) .ch-toc-bar{opacity:0}
.ch-toc.stuck::before{content:''; position:absolute; left:0; right:0; bottom:100%; height:env(safe-area-inset-top,0px);
  background:rgba(243,237,224,.92); -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px)}
.ch-toc .wrap{display:flex; align-items:center; gap:10px; padding-top:8px; padding-bottom:8px}
.ch-home{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px 0 0; border-right:1px solid var(--border);
  font-family:'DM Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.06em; color:var(--dim); text-decoration:none}
.ch-home svg{width:14px; height:14px}
.ch-home:hover,.ch-home:focus-visible{color:var(--deep)}
.ch-toc ol{display:flex; gap:6px; list-style:none; overflow-x:auto; flex:1; min-width:0; padding:2px 0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.ch-toc ol::-webkit-scrollbar{display:none}
.ch-toc a.chip-link{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-height:36px; padding:5px 12px;
  font-family:'DM Mono',ui-monospace,monospace; font-size:12.5px; text-decoration:none; color:var(--deep);
  background:rgba(255,255,255,.7); border:1px solid var(--border); border-radius:999px}
.ch-toc a.chip-link b{font-weight:500; color:var(--theme)}
.ch-toc a.chip-link[aria-current="true"]{background:var(--deep); border-color:var(--deep); color:#fff}
.ch-toc a.chip-link[aria-current="true"] b{color:#f6c27a}
.ch-toc-bar{height:2px; background:rgba(13,43,62,.06)}
.ch-toc-bar i{display:block; height:100%; background:var(--sun); transform:scaleX(0); transform-origin:0 50%}
body.has-toc section{scroll-margin-top:68px; scroll-margin-top:calc(68px + env(safe-area-inset-top,0px))}

/* the short version, at the end of each chapter */
.short{background:var(--card); border:1px solid var(--border); border-left:4px solid var(--theme); border-radius:var(--radius); padding:16px 18px 6px}
.short .eyebrow{margin-bottom:2px}
.short h2{font-size:24px; margin-bottom:8px}
.short ul{margin:0 0 10px 20px}
.short li{margin:0 0 8px}

/* end of chapter: read state, previous / next */
.ch-end{margin-top:48px; text-align:center}
.ch-end h2{font-size:22px; margin:0}
.ch-read{display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; padding:6px 12px; border-radius:999px;
  font-family:'DM Mono',ui-monospace,monospace; font-size:12.5px; color:#2e7d5b; background:rgba(46,125,91,.08); border:1px solid rgba(46,125,91,.25)}
.ch-read svg{width:13px; height:13px}
.ch-read[hidden]{display:none}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 0; text-align:left}
@media (max-width:560px){ .pn{grid-template-columns:1fr} .pn-next{order:-1} }
.pn a{display:flex; flex-direction:column; gap:4px; min-height:44px; padding:14px 16px; text-decoration:none; color:var(--text);
  background:var(--card); border:1px solid var(--border); border-radius:14px}
.pn a:hover,.pn a:focus-visible{border-color:var(--ocean)}
.pn-next{text-align:right; background:linear-gradient(180deg,#fff,rgba(255,255,255,.75)) !important; box-shadow:0 4px 16px rgba(6,78,110,.07)}
.pn-k{font-family:'DM Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.pn-t{font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:20px; line-height:1.15; color:var(--ink)}
.pn-h{font-size:15.5px; line-height:1.4; font-style:italic}
.end-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin:22px 0 0}
.physics-note{font-size:15px; line-height:1.5; color:var(--dim); text-align:center; max-width:30em; margin:28px auto 0}

@media (prefers-reduced-motion: reduce){ .ch-card,.ch-toc{transition:none} }

:root{--theme:#0a7ea4; --tint:rgba(10,126,164,.15)}