/* Shared shell for the reading pages (/method/ and the product pages).
   Same tokens, same type voice and same footer as index.html - the landing
   page keeps its own copy inline because it also carries the two house
   grounds, which nothing else needs. Legal pages predate this file and keep
   their inline copies; nothing here changes them. */

:root{
  color-scheme: light dark;
  --font-serif:"Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg:#fafaf8; --ink:#16212b; --muted:#55606b; --hair:#ddd9d0;
  --accent:#9a4f18;            /* accent as text, on paper */
  --ember:#c9702f;             /* accent as line, never as text */
  --focus:#b35a1c;
}
:root[data-theme="dark"]{
  --bg:#0d1b2a; --ink:#e8e5df; --muted:#9aa6b2; --hair:#24384a;
  --accent:#eba76e; --ember:#c9702f; --focus:#f0a35a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1b2a; --ink:#e8e5df; --muted:#9aa6b2; --hair:#24384a;
  --accent:#eba76e; --ember:#c9702f; --focus:#f0a35a;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-serif); font-size:1.05rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.15; margin:0; font-weight:600; letter-spacing:-.015em}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

.wrap{max-width:42rem; margin:0 auto; padding:1.5rem clamp(1.25rem,5vw,2rem) 3rem}
.wordmark{font-family:var(--font-serif); font-weight:700; font-size:1.15rem; letter-spacing:.005em; color:var(--ink); text-decoration:none}
.wordmark .lab{font-weight:400; color:var(--muted)}

.crumb{font-family:var(--font-sans); font-size:.85rem; color:var(--muted); margin-top:1.6rem}
h1{font-size:clamp(2rem,5.6vw,2.9rem); letter-spacing:-.022em; margin:.5rem 0 0}
.lede{margin-top:1.3rem; font-size:1.12rem; line-height:1.68}
.lede + .lede{margin-top:1rem; color:var(--muted)}

h2{font-size:clamp(1.3rem,3.4vw,1.6rem); margin:2.6rem 0 .9rem}
h3{font-size:1.05rem; margin:1.6rem 0 .4rem}
p + p{margin-top:1rem}
ul{margin:1rem 0; padding-left:1.15rem}
li{margin:.45rem 0}
li::marker{color:var(--ember)}

/* Source list: publisher, what is taken from it, licence. The whole civic
   claim of the estate is that this list exists, so it reads as a register. */
dl.sources{margin:1.2rem 0 0}
dl.sources dt{font-weight:600; margin-top:1.15rem}
dl.sources dd{margin:.15rem 0 0; color:var(--muted)}

.state{
  font-family:var(--font-sans); font-size:.92rem; line-height:1.6;
  border-left:2px solid var(--ember); padding:.15rem 0 .15rem .9rem; margin:1.4rem 0 0;
}
.state b{font-weight:600}

.visit{margin-top:1.8rem; font-size:1.1rem}
.visit a{border-bottom:2px solid var(--ember); text-decoration:none}
.visit a:hover{color:var(--ink)}
.visit .note{display:block; font-family:var(--font-sans); font-size:.85rem; color:var(--muted); margin-top:.35rem}

.ridge{position:relative; height:14px; margin:3rem 0 1.4rem}
.ridge::before{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair)}
.ridge svg{position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:block; color:var(--ember); background:var(--bg)}

.siblings{font-family:var(--font-sans); font-size:.85rem; color:var(--muted); margin:0 0 1.4rem}
.siblings a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.siblings a:hover{color:var(--ink); border-bottom-color:var(--ember)}
.siblings .sep{padding:0 .4rem}

nav.foot{font-family:var(--font-sans); font-size:.85rem; display:flex; flex-wrap:wrap; gap:1.4rem}
nav.foot a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
nav.foot a:hover{color:var(--ink); border-bottom-color:var(--ember)}