/* Standing document pages: About, How We Test, Editorial Guidelines, Contact,
   and the legal set. Loaded on top of editorial.css.

   These are the pages a reader checks before deciding whether to believe the
   reviews, and the pages an answer engine reads to decide the same thing. They
   are short — 1,000 to 1,800 words of plain prose — so the layout's job is to
   make a short document look finished rather than stranded: a sheet at a
   readable measure, a contents rail beside it, and a column of context that
   turns each page into a route onward instead of a dead end. */

/* ---------- head ---------- */
.dochead{background:var(--cream);border-bottom:1px solid var(--rule);padding:46px 0 30px}
.doc-kick{margin:0 0 14px;font:800 11px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--flame-deep)}
.dochead h1{margin:0;max-width:17ch;
  font:400 clamp(32px,4.4vw,52px)/1.06 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  letter-spacing:-.024em;color:var(--ink);text-wrap:balance}
/* The standfirst is what a voice surface reads back, so it carries the whole
   answer in one sentence rather than trailing off into the body. */
.doc-stand{margin:18px 0 0;max-width:62ch;font-size:18.5px;line-height:1.6;color:var(--body)}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin:24px 0 0;padding-top:15px;
  border-top:1px solid var(--rule);
  font:400 13px/1.5 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.doc-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* On the header band (editorial.css). The flame kicker would be 1.6:1 on teal. */
.dochead{background:var(--band);border-bottom:0}
.doc-kick{color:var(--mustard)}
.dochead h1{color:#fff}
.doc-stand{color:var(--band-text)}
.doc-meta{border-top-color:var(--band-rule);color:var(--band-muted)}
.doc-meta b,.doc-meta a{color:#fff}

/* ---------- the three columns ----------
   200 + 250 either side of a 1200px wrap leaves the prose column at roughly
   66 characters, which is the measure the body type is set for. The columns
   are not decoration filling space — they are what the width is spent on. */
body.doc{background:var(--ground)}
.docgrid{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;
  gap:0 46px;align-items:start;padding:34px 0 56px}

/* ---------- contents rail ---------- */
.docnav{position:sticky;top:18px}
.docnav h2{margin:0 0 10px;font:800 10.5px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.docnav ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.docnav a{display:block;margin-left:-1px;padding:8px 0 8px 15px;
  border-left:2px solid transparent;text-decoration:none;
  font:400 13.5px/1.35 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.docnav a:hover{color:var(--ink)}
.docnav a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--flame)}

/* ---------- the sheet ---------- */
.docbody{background:var(--surface);border:1px solid var(--hairline);
  padding:32px 40px 38px;box-shadow:0 1px 2px rgba(60,48,34,.05)}
.docbody>*:first-child{margin-top:0}
.docbody h2{margin:36px 0 12px;padding-top:22px;border-top:1px solid var(--rule);
  font:400 26px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  letter-spacing:-.012em;color:var(--ink);scroll-margin-top:24px}
.docbody h2:first-child{padding-top:0;border-top:0}
.docbody h3{margin:26px 0 8px;
  font:600 19px/1.3 Charter,Georgia,serif;color:var(--ink);scroll-margin-top:24px}
.docbody p{margin:0 0 15px;max-width:66ch;
  font:400 17.5px/1.72 Charter,Georgia,serif;color:var(--body)}
.docbody ul{margin:0 0 18px;padding:0;list-style:none;max-width:66ch}
.docbody li{position:relative;margin:0 0 9px;padding-left:20px;
  font:400 17px/1.65 Charter,Georgia,serif;color:var(--body)}
.docbody li::before{content:"";position:absolute;left:2px;top:.72em;
  width:6px;height:6px;background:var(--flame);opacity:.75}
.docbody strong{color:var(--ink);font-weight:600}
.docbody em{font-style:italic}
/* Body links keep a non-colour cue, because colour alone is not enough to
   identify a link inside a paragraph. A tinted rule reads lighter than a
   text-decoration underline and does not collide with descenders. */
.docbody a{color:var(--flame-deep);text-decoration:none;
  border-bottom:1px solid rgba(232,69,31,.4);padding-bottom:1px}
.docbody a:hover{border-bottom-color:var(--flame-deep);background:rgba(232,69,31,.06)}

/* ---------- the context column ---------- */
.docaside{position:sticky;top:18px;display:grid;gap:16px}
.dcard{background:var(--surface);border:1px solid var(--hairline);padding:16px 18px 18px}
.dcard>h2{margin:0 0 12px;font:800 10.5px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dcard p{margin:0;font:400 14px/1.6 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.dcard p a{color:var(--flame-deep);text-decoration:none;border-bottom:1px solid rgba(232,69,31,.4)}
.dcard p a:hover{border-bottom-color:var(--flame-deep)}

/* Counted figures, on the pages that make claims about scale. */
.dnums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.dnums b{display:block;font:400 25px/1 Georgia,serif;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dnums span{display:block;margin-top:4px;font:400 11px/1.3 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.dlinks{list-style:none;margin:0;padding:0}
.dlinks li+li a{border-top:1px solid var(--hairline)}
.dlinks a{display:block;padding:9px 0;text-decoration:none;
  font:400 15px/1.35 Charter,Georgia,serif;color:var(--ink)}
.dlinks a:hover{color:var(--flame-deep)}
.dlinks a[aria-current="page"]{color:var(--muted)}

/* ---------- the way onward ---------- */
.docmore{border-top:1px solid var(--rule);padding:26px 0 8px}
.docmore h2{margin:0 0 14px;font:800 10.5px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.docmore ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.docmore a{display:block;padding:14px 16px;background:var(--surface);
  border:1px solid var(--hairline);text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease}
.docmore a:hover{border-color:var(--flame-deep);box-shadow:0 4px 16px rgba(60,48,34,.09)}
.docmore b{display:block;font:400 17px/1.3 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  font-weight:400;color:var(--ink)}
.docmore a:hover b{color:var(--flame-deep)}
.docmore span{display:block;margin-top:5px;font:400 13px/1.5 "Helvetica Neue",Arial,sans-serif;
  color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* ---------- not found ---------- */
/* padding-top/bottom only: this element is <main class="wrap doc404">, so a
   plain `padding:70px 0 80px` here sets padding-left/right to 0 as part of
   its shorthand - equal specificity to .wrap's own gutter and later in the
   cascade, so it always won (same bug as .sm-bar-in, found 24 Sept 2026). The
   404 page's text has been sitting flush against the edge on every screen size. */
.doc404{padding-top:70px;padding-bottom:80px;max-width:56ch}
.doc404 h1{margin:0 0 14px;
  font:400 clamp(32px,4.4vw,48px)/1.08 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  color:var(--ink)}
.doc404 p{margin:0 0 22px;font:400 18px/1.65 Charter,Georgia,serif;color:var(--body)}

/* ---------- narrower ---------- */
@media(max-width:1080px){
  .docgrid{grid-template-columns:186px minmax(0,1fr);gap:0 34px}
  .docaside{grid-column:1/-1;position:static;margin-top:26px;
    grid-template-columns:repeat(2,1fr);align-items:start}
  .docbody{padding:28px 30px 32px}
}
@media(max-width:760px){
  .dochead{padding:34px 0 24px}
  .docgrid{grid-template-columns:1fr;padding:24px 0 44px}
  /* The rail stops being a rail: at this width it is a contents list that
     scrolls away with the rest of the page. */
  .docnav{position:static;margin-bottom:22px;padding-bottom:20px;
    border-bottom:1px solid var(--rule)}
  .docnav ol{border-left:0;columns:2;column-gap:22px}
  .docnav a{padding:6px 0;border-left:0}
  .docnav a[aria-current="true"]{border-left:0}
  .docbody{padding:24px 22px 28px}
  .docbody p,.docbody li{font-size:16.5px}
  .docmore ul{grid-template-columns:1fr}
}
@media(max-width:520px){
  .docaside{grid-template-columns:1fr}
  .docnav ol{columns:1}
}