/* The Guide's stylesheet (CT-122, module 1 → *The Guide*): /help is a static public page, plain
   HTML a crawler reads without running JavaScript. Linked after legal.css, which gives it the
   public pages' palette, masthead, h1 and footer; this file adds the self-hosted Literata (the same
   files home.css uses — the legal pages still ask Google Fonts, which the CSP blocks) and the
   Guide's own parts: the contents list, a card per section with its drawing beside the words from
   48rem (above them on a phone), the "Before you share" note and the three ways-to-use cards.
   Static, no script, no inline style (CSP style-src 'self'). Linked as guide.css?v=<CT> — bump it
   on change, as site/* is cached an hour. */

@font-face{
  font-family:"Literata";
  src:url("/site/fonts/literata-roman-latin.woff2") format("woff2");
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Literata";
  src:url("/site/fonts/literata-italic-latin.woff2") format("woff2");
  font-style:italic; font-weight:300 500; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The drawings carry these as hex attributes (as home.html's do), so a change here must be
   repeated in help.html. */
:root{ --cover-ochre:#B38A45; }

.masthead nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pen-soft)}

.guide{max-width:64rem}
/* Zero specificity, so every spacing rule below wins over it. */
:where(.guide) :where(p,ol,ul,h2,h3){margin:0}
.guide h1{max-width:22ch}
.guide-lead{margin-top:1.1rem;max-width:58ch;font-size:clamp(1.1rem,1.7vw,1.24rem);line-height:1.55;color:var(--ink-2)}

/* Contents — one column on a phone, two from 36rem */
.guide-contents{margin-top:clamp(1.75rem,4vw,2.5rem);padding:1.1rem 1.4rem 1.2rem;background:var(--sheet);
  border:1px solid var(--rule);border-radius:3px}
.guide-contents-label{font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.guide-contents ol{list-style:none;margin-top:.5rem;padding:0;display:grid;gap:0 2rem}
@media (min-width:36rem){.guide-contents ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
.guide-contents a{display:inline-flex;align-items:baseline;gap:.7rem;padding-block:.35rem;color:var(--ink-2);text-decoration:none}
.guide-contents a:hover{color:var(--pen);text-decoration:underline}
.n{color:var(--pen);font-weight:600;font-variant-numeric:tabular-nums}
.guide-contents .n{min-width:1ch;text-align:right;font-size:.95rem}

/* A card per section */
.guide-sections{margin-top:clamp(2rem,4vw,2.75rem);display:grid;gap:1.5rem}
.guide-section{scroll-margin-top:1.25rem;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(1.25rem,4vw,2.25rem)}
.guide-section h2{display:flex;align-items:baseline;gap:.75rem;font-size:clamp(1.45rem,3vw,1.75rem);font-weight:400;
  line-height:1.2;letter-spacing:-.016em}
.guide-section h2 .n{font-size:1rem}
.guide-body{margin-top:1.25rem;display:grid;gap:1.5rem}
.guide-drawing{width:100%;max-width:22.5rem;margin-inline:auto;padding:.6rem;background:var(--paper);border-radius:3px}
.guide-drawing svg{display:block;width:100%;height:auto}
.guide-words{min-width:0;max-width:65ch;color:var(--ink-2)}
.guide-words > * + *{margin-top:1rem}
.guide strong{color:var(--ink);font-weight:600}
/* From 48rem the words at a reading measure, the drawing beside them. */
@media (min-width:48rem){
  .guide-body{grid-template-columns:minmax(0,1fr) 18rem;column-gap:2.5rem;align-items:start}
  .guide-drawing{grid-column:2;grid-row:1;max-width:none;margin:0}
  .guide-words{grid-column:1;grid-row:1}
}
@media (min-width:64rem){.guide-body{grid-template-columns:minmax(0,1fr) 22rem}}

.guide-steps{padding-left:1.6rem}
.guide-steps li + li{margin-top:.6rem}
.guide-steps li::marker{color:var(--pen);font-weight:600}
.guide-list{padding-left:1.4rem}
.guide-list li + li{margin-top:.5rem}
.guide-list li::marker{color:var(--pen)}
.address{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;color:var(--ink);word-break:break-all}
.guide-tip{font-size:1rem;color:var(--ink-3)}

/* What a shared login can do, and who may use it */
.guide-note{padding:1rem 1.25rem 1.1rem;border:1px solid rgba(179,138,69,.45);border-radius:3px;background:rgba(179,138,69,.08)}
.guide-note h3{font-size:1.15rem;font-weight:500;line-height:1.3;color:var(--ink)}
.guide-note ul{margin-top:.5rem;padding-left:1.25rem}
.guide-note li + li{margin-top:.5rem}
.guide-note li::marker{color:var(--cover-ochre)}

/* Ways to use spaces — phone: drawing above the words; 48-64rem: one card per row, the drawing beside
   the words; from 64rem three cards side by side. */
.guide-uses{list-style:none;margin-top:1.5rem;padding:0;display:grid;gap:1rem}
.guide-use{padding:1.2rem 1.2rem 1.35rem;background:var(--paper);border-radius:3px}
.guide-use svg{display:block;width:100%;max-width:15rem;height:auto;margin-bottom:1rem}
.guide-use h3{font-size:1.15rem;font-weight:500;line-height:1.3;color:var(--ink)}
.guide-use p{margin-top:.45rem;font-size:1rem;line-height:1.55;color:var(--ink-2)}
@media (min-width:48rem) and (max-width:63.99rem){
  .guide-use{display:grid;grid-template-columns:15rem minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:1.75rem}
  .guide-use svg{grid-row:1 / -1;margin-bottom:0}
  .guide-use h3{grid-column:2;grid-row:2}
  .guide-use p{grid-column:2;grid-row:3}
}
@media (min-width:64rem){.guide-uses{grid-template-columns:repeat(3,minmax(0,1fr))}}