/* google-listing.css - the only stylesheet for /google-listing/.

   DELIBERATELY NOT ../styles.css, for the reason genesis.css gives: touching the shared
   sheet forces a ?v= bump across nine public pages (memory 1xev-public-page-gate), and this
   page has no business making the rest of the site re-download its CSS. So the tokens, the
   nav block and the footer block below are COPIES of styles.css's own rules, taken as they
   stand on 2026-09-19 - the page matches the site without depending on it.

   THE LOOK: the dark site ground, and on it ONE paper-white sheet about 640px wide with
   generous margins, so it reads like a printed guide. Ink on paper for every word of the
   body. The site's gold is spent on exactly three things - the five numerals, the five
   ticks, and the one link at the foot - and nowhere else.

   Every class this page invents is prefixed `gl-`, except `.chk` / `.box` / `.txt`, which are
   the library part `checklist-print`'s own names and are used as that part uses them. The
   prefix is not decoration: the nav and footer rules below come from a 1,278-line shared
   sheet, and a name like `.sub` or `.title` or `.num` invented here would collide with it
   (OPUS-MISTAKES 3). Every `gl-` name was grepped against the built page's whole CSS.
*/

/* ---------- tokens: copies of styles.css :root ---------- */
:root {
  --bg:        #0a0a0a;
  --bg-soft:   #121212;
  --panel:     #161616;
  --line:      rgba(255,255,255,.10);
  --ink:       #f4f2ee;
  --ink-dim:   #a8a49c;
  --ink-faint: #8a867d;
  --gold:      #c9a86a;
  --gold-soft: rgba(201,168,106,.14);
  --maxw: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);

  /* the sheet's own four. Paper is warm white, not #fff: on a phone at night a pure-white
     sheet on #0a0a0a is a torch. Ink and ink2 are read off the guide's own contrast needs -
     #16181c on #fbfaf7 is 14.8:1, #55595f is 6.4:1. */
  --paper:     #fbfaf7;
  --paper-2:   #f1efe9;
  --sheet-ink: #16181c;
  --sheet-ink2:#55595f;
  --sheet-line:#e2ded4;
  --sheet-max: 640px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 8px; top: -48px; background: var(--gold); color: #1a1509;
  padding: 10px 16px; border-radius: 2px; z-index: 200; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; transition: top .2s; }
.skip-link:focus { top: 8px; outline: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- NAV - copied from styles.css ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* the blur rides a pseudo-layer, NOT the header: backdrop-filter on <header> would make it
   the containing block for the fixed phone drawer inside it */
header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity .4s var(--ease);
  background: rgba(10,10,10,.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
header.scrolled::before, header.solid::before { opacity: 1; }
header.solid::before { background: rgba(10,10,10,.92); }
header.scrolled, header.solid { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; }
.brand { font-weight: 700; letter-spacing: .28em; font-size: 17px; }
.brand span { color: var(--gold); }
.nav-links { display: flex; gap: 34px; align-items: center; white-space: nowrap; }
.nav-links a { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); transition: color .3s; }
@media (max-width: 1100px) {
  .nav-links { gap: 10px; }
  .nav-links a { letter-spacing: .09em; }
}
@media (max-width: 1000px) {
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 12px; letter-spacing: .05em; }
  .nav-cta { padding: 8px 12px; }
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: var(--gold) !important; border: 1px solid var(--line); padding: 9px 18px; border-radius: 2px; }
.nav-cta:hover { border-color: var(--gold); }
.burger { display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer; padding: 6px; background: none; border: 0; min-width: 44px; min-height: 44px; }
.burger span { width: 24px; height: 2px; background: var(--ink); transition: .3s; }

.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group > a::after { content: "\25BE"; font-size: 9px; margin-left: 5px; opacity: .55; }
.nav-sub { position: absolute; top: calc(100% + 12px); left: -12px; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 10px;
  background: rgba(14,14,14,.94); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: transform .18s var(--ease), opacity .18s var(--ease), visibility .18s var(--ease); }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-links .nav-sub a { padding: 10px 12px; border-radius: 7px; font-size: 12px; letter-spacing: .06em; text-transform: none; }
.nav-links .nav-sub a:hover { background: rgba(255,255,255,.06); }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { visibility: visible; opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nav { position: relative; }
  .nav-links { position: absolute; top: calc(100% + 10px); right: 16px; left: auto; width: max-content;
    min-width: 176px; max-width: min(70vw,260px); background: #0d0d0d;
    border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 6px; z-index: 90; visibility: hidden; opacity: 0;
    transform: translateY(-8px); transform-origin: top right;
    transition: transform .22s var(--ease), opacity .22s var(--ease), visibility .22s var(--ease); }
  .nav-links a { padding: 13px 14px; border-radius: 3px; }
  .nav-links .nav-cta { border: 0; margin-top: 4px; background: rgba(201,168,106,.10); text-align: center; }
  .nav-links.open { transform: none; visibility: visible; opacity: 1; }
  .burger { display: flex; }
  .nav-group, .nav-sub { display: contents; }
  /* display:contents drops the panel box but visibility INHERITS - undo it on the links */
  .nav-links.open .nav-sub, .nav-links.open .nav-sub a { visibility: visible; opacity: 1; transform: none; }
  .nav-group > a::after { content: none; }
  .nav-links .nav-sub a { padding: 11px 14px 11px 30px; font-size: 12px; opacity: .85;
    text-transform: uppercase; letter-spacing: .09em; position: relative; }
  .nav-links .nav-sub a::before { content: "\2197"; position: absolute; left: 14px; opacity: .5; }
  .nav-links a { border-top: 1px solid rgba(255,255,255,.06); }
  .nav-links > a:first-child { border-top: 0; }
}

/* ---------- THE SHEET ---------- */
/* The header is fixed, so main opens its own air under it. 96px is the header's own height
   (22px padding x2 + the 17px brand line) plus room to breathe, measured, not guessed. */
main { padding: 96px 0 0; }

.gl-sheet {
  width: 100%;
  max-width: var(--sheet-max);
  margin: 0 auto 64px;
  background: var(--paper);
  color: var(--sheet-ink);
  border-radius: 3px;
  padding: clamp(26px, 6vw, 52px) clamp(22px, 5.5vw, 48px) clamp(30px, 6vw, 52px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
/* The 18px gutter between the sheet's edge and the phone's edge. It lives on a wrapper rule
   rather than on the sheet's own margin so the shadow is never clipped by overflow:clip. */
@media (max-width: 700px) {
  main { padding: 108px 18px 0; }
  .gl-sheet { margin-bottom: 40px; }
}

.gl-sheet h1 {
  font-size: clamp(27px, 6.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--sheet-ink);
  margin-bottom: 10px;
}
.gl-sub { font-size: 17px; color: var(--sheet-ink2); line-height: 1.55; }

/* "Print or save as PDF" is a real <button> (it runs script), set to read as the text link
   it is: no box, no uppercase, and a 44px hit box that the underline sits inside. */
.gl-print { margin-top: 4px; }
.gl-printlink {
  background: none; border: 0; padding: 12px 0; min-height: 44px;
  font: inherit; font-size: 15px; color: var(--sheet-ink2);
  text-decoration: underline; text-decoration-color: rgba(85,89,95,.45);
  text-underline-offset: 3px; cursor: pointer;
  transition: color .25s, text-decoration-color .25s;
}
.gl-printlink:hover { color: var(--sheet-ink); text-decoration-color: currentColor; }
.gl-printlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.gl-sheet p { font-size: 17.5px; line-height: 1.62; max-width: 62ch; }
.gl-lede { margin-top: 20px; }
.gl-start { margin-top: 14px; }

/* ---------- the five ---------- */
.gl-items { margin-top: 30px; }
.gl-item { border-top: 1px solid var(--sheet-line); padding: 22px 0 20px; }
.gl-item:first-child { border-top: 0; padding-top: 6px; }

.gl-title {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 20px; line-height: 1.25; font-weight: 700;
  color: var(--sheet-ink); margin-bottom: 8px;
}
/* The numeral IS content on this page - it is the checklist's own counting, and the reader
   works down it (OPUS-MISTAKES 10 is about numbers nobody asked for; these were asked for).
   No other number is printed anywhere on the page. */
.gl-num {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  font-size: 19px; font-weight: 700; line-height: 1;
  color: #8a6a2a;                 /* the gold, darkened to 4.8:1 on paper - #c9a86a is 2.1:1 */
  transform: translateY(6px);     /* baseline-aligned flex puts the disc's cap line on the title's */
  transition: background .25s, color .25s, border-color .25s;
}
.gl-t { flex: 1 1 auto; min-width: 0; }
.gl-text { color: var(--sheet-ink); }

/* A word Google puts on the reader's screen, set as a key so the eye finds the tap target. */
.gl-key {
  display: inline-block;
  font-size: .88em; font-weight: 600; font-style: normal;
  line-height: 1.25;
  padding: 2px 8px 3px;
  border: 1px solid var(--sheet-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--sheet-ink);
  white-space: nowrap;
}
.gl-text i { font-style: italic; }

/* ---------- the tick (library part: checklist-print) ---------- */
.gl-tick { margin-top: 14px; }
.chk {
  display: inline-flex; gap: 10px; align-items: center;
  min-height: 44px; padding: 9px 16px 9px 12px;
  background: none; border: 1px solid var(--sheet-line); border-radius: 999px;
  color: var(--sheet-ink2); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: border-color .25s, color .25s;
}
.chk:hover { border-color: #8a6a2a; color: var(--sheet-ink); }
.chk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chk .box {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 1.5px solid var(--sheet-line); border-radius: 4px;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: var(--paper);
  transition: background .25s, border-color .25s;
}
.chk[aria-pressed="true"] { border-color: #8a6a2a; color: var(--sheet-ink); }
.chk[aria-pressed="true"] .box { background: #8a6a2a; border-color: #8a6a2a; }
.chk[aria-pressed="true"] .box::after { content: "\2713"; }
/* ticked: the block's numeral fills */
.gl-item.is-done .gl-num { background: #8a6a2a; border-color: #8a6a2a; color: var(--paper); }

/* ---------- after the rule ---------- */
.gl-rule { border: 0; border-top: 1px solid var(--sheet-line); margin: 28px 0 22px; }
.gl-cta { margin-top: 14px; }
/* THE ONE UNPREFIXED CLASS ON THIS PAGE, and it is not a style, it is an interface:
   lewis-county-outreach/sitemap_gen.py matches the literal `<a class="door"` to read
   this page's Keep-going hop and draw it on the site's route map, so the NAME is the
   contract and `class="door gl-ctalink"` would silently not be a door. Grepped against
   this whole sheet: the copied nav and footer blocks define no .door (OPUS-MISTAKES 3). */
.door {
  color: #8a6a2a; font-weight: 700;
  /* The one link in the body of this page, and it is the $128. Its own line box is 20px
     tall; the vertical padding takes the HIT BOX to 44px without moving a single word,
     because vertical padding on an inline box does not affect the line. Measured at 390.
     It cannot steal a tap from anything: the line above it is plain prose and the sign-off
     below is 26px clear. */
  padding-block: 12px;
  text-decoration: underline; text-decoration-color: rgba(138,106,42,.45);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .25s, text-decoration-color .25s;
}
.door:hover { color: var(--sheet-ink); text-decoration-color: currentColor; }
.gl-sign { margin-top: 26px; font-size: 14.5px !important; color: var(--sheet-ink2); }

/* the empty square the printed sheet is ticked in by hand - off screen, on on paper */
.gl-box { display: none; }

/* ---------- FOOTER - copied from styles.css ---------- */
footer { border-top: 1px solid var(--line); padding: 50px 0 40px; }
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.foot .brand { font-size: 15px; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); transition: color .3s; }
.foot-links a:hover { color: var(--gold); }
@media (max-width: 900px) {
  .foot-links { gap: 4px 26px; }
  .foot-links a { padding: 11px 0; }
}
.foot .fine { color: var(--ink-faint); font-size: 13px; }

/* ---------- PRINT: one US-Letter sheet, black ink, empty boxes ---------- */
/* Measured with headless Chrome page.pdf({format:"Letter"}) and the page count read off the
   PDF, not guessed: make_google_listing.py --pages does it and the brief's gate is that the
   count is 1. Every size below is the size that fits; nothing is cut and no word is dropped. */
@media print {
  @page { size: Letter; margin: 0.45in 0.5in; }

  html { overflow-x: visible; }
  body { background: #fff; color: #000; font-size: 10.4pt; line-height: 1.36; }
  header, footer, .skip-link, .gl-print { display: none !important; }

  main { padding: 0 !important; }
  .gl-sheet {
    max-width: none; margin: 0; padding: 0;
    background: #fff; color: #000; border-radius: 0; box-shadow: none;
  }
  .gl-sheet h1 { font-size: 19pt; line-height: 1.1; margin-bottom: 4pt; color: #000; }
  .gl-sub { font-size: 10.8pt; color: #333; }
  .gl-sheet p { font-size: 10.4pt; line-height: 1.36; max-width: none; }
  .gl-lede { margin-top: 8pt; }
  .gl-start { margin-top: 5pt; }

  .gl-items { margin-top: 10pt; }
  .gl-item { border-top: 0.5pt solid #bbb; padding: 7pt 0 0; break-inside: avoid; }
  .gl-item:first-child { padding-top: 7pt; border-top: 0.5pt solid #bbb; }
  .gl-title { font-size: 11.6pt; gap: 7pt; margin-bottom: 3pt; align-items: center; }

  /* the hand-tick box, and the numeral back to plain ink beside it */
  .gl-box {
    display: inline-block; flex: 0 0 auto;
    width: 12pt; height: 12pt; border: 0.75pt solid #000; border-radius: 1pt;
  }
  .gl-num {
    width: auto; height: auto; border: 0; border-radius: 0;
    font-size: 11.6pt; color: #000; background: none; transform: none; display: inline;
  }
  .gl-item.is-done .gl-num { background: none; color: #000; }

  .gl-key { border: 0.5pt solid #999; border-bottom-width: 0.5pt; background: #fff;
    color: #000; padding: 0 3pt 1pt; border-radius: 2pt; font-size: .9em; }

  /* the ticks are a screen control; on paper the square above is the tick */
  .gl-tick { display: none !important; }

  .gl-rule { margin: 8pt 0 6pt; border-top: 0.5pt solid #bbb; }
  .gl-cta { margin-top: 4pt; }
  /* padding-block:12px is the screen's thumb target; on paper there is no thumb, and 24px
     of it would push the sign-off down for nothing */
  .door { color: #000; text-decoration: underline; font-weight: 700; padding-block: 0; }
  .gl-sign { margin-top: 9pt; font-size: 9.2pt !important; color: #333; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}