:root {
  color-scheme: light;
  --paper: #f7f6ee;
  --ink: #1e3228;
  --muted: #4c6052;
  --line: #c5ccbb;
  --pale: #e9edde;
  --accent: #dce78e;
  --serif: "DM Serif Text", Georgia, serif;
}
* { box-sizing: border-box; }
body.guide-page {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 1rem/1.62 "DM Sans", "Segoe UI", Arial, sans-serif;
}
.guide-page :where(a, a:visited) { color: var(--ink); text-underline-offset: .21em; }
.guide-page a:hover { color: #526c46; }
.guide-page :focus-visible { outline: 3px solid #94630c; outline-offset: 4px; }
.guide-main, body.guide-page > header, body.guide-page > footer {
  width: min(1040px, calc(100% - 3rem));
  margin-inline: auto;
}
.guide-page > header { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.guide-skip { position: absolute; left: 1rem; top: -5rem; background: white; padding: .65rem 1rem; z-index: 1; }
.guide-skip:focus { top: .5rem; }
.guide-page > header nav, .guide-header, .guide-mast {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.guide-header-note { color: var(--muted); font-size: .9rem; }
.guide-hero:first-child { margin-top: 0; }
.guide-related { margin-top: 2.5rem; }
.guide-page header a:first-child {font-weight: 650;}
.guide-main { padding-block: clamp(1.5rem, 4vw, 3.25rem); }
.guide-main h1, .guide-main h2, .guide-main h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.guide-main h1 { font-size: clamp(2.5rem, 6.5vw, 5.1rem); max-width: 20ch; line-height: 1; letter-spacing: -.052em; margin: 0 0 1rem; }
.guide-main h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 .65rem; }
.guide-main h3 { font-size: 1.45rem; line-height: 1.2; margin: .25rem 0 .45rem; }
.guide-main p { max-width: 70ch; margin: .4rem 0 .85rem; }
.guide-main header p, .guide-intro { font-size: clamp(1.05rem, 1.55vw, 1.25rem); color: var(--muted); }
.guide-main > section, .guide-main > aside { margin-top: clamp(1.8rem, 4vw, 3.4rem); }
.guide-kicker { font-size: .8rem; font-weight: 650; color: var(--muted); }
.guide-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2.5vw, 1.5rem); }
.guide-card { min-width: 0; padding: clamp(.95rem, 2.2vw, 1.6rem); border: 1px solid var(--line); background: #fffef7; border-radius: 8px; }
.guide-card :last-child, .guide-note :last-child { margin-bottom: 0; }
.guide-figure, .guide-main figure { margin: 0; }
.guide-main figure svg, .guide-main .guide-figure svg { display: block; max-width: 100%; height: auto; }
.guide-main figure figcaption { margin: .65rem 0 .2rem; color: var(--muted); font-size: .93rem; }
.guide-note { background: var(--pale); border-left: 4px solid #7d936f; padding: 1rem 1.25rem; }
.guide-main :where(ol, ul) { padding-left: 1.35rem; max-width: 76ch; }
.guide-main li + li { margin-top: .55rem; }
.guide-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.3rem; margin-top: 1.4rem; }
.guide-actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.guide-actions a:first-child { border-radius: 4px; padding: .6rem 1rem; text-decoration: none; background: var(--ink); color: white; }
.guide-actions a:first-child:hover { background: #354c3c; }
.guide-page > footer { padding: 1rem 0 2rem; border-top: 1px solid var(--line); font-size: .9rem; }
.guide-page svg .outline { fill: #f1ddc2; stroke: #33493c; stroke-width: 2; }
.guide-page svg .hair { fill: #405344; }
.guide-page svg .measure { fill:none; stroke:#657653; stroke-width:1.5; stroke-dasharray:4 3; }
.guide-page svg .end { fill: #8a431d; stroke:#fff; stroke-width:1; }
.guide-page svg .scale { font: 11px "Segoe UI", sans-serif; fill: #344639; }
@media (max-width: 650px) {
  .guide-main, body.guide-page > header, body.guide-page > footer { width: calc(100% - 2rem); }
  .guide-pair { grid-template-columns: 1fr; }
  .guide-main figure svg { max-height: 18rem; margin-inline:auto; }
}
@media print {
  body.guide-page { background: white; color: black; }
  .guide-page > header, .guide-page > footer, .guide-actions {display: none;}
  .guide-main { width:100%; padding:0; }
  .guide-card, figure { break-inside: avoid; }
}