/* =====================================================================
   kylandforms.com — public stylesheet (Instruction 04)
   ---------------------------------------------------------------------
   1. Tokens. Every colour, space, radius, shadow, type size and touch
      size is a variable. Components never contain a hex value or a pixel
      radius; they read tokens. The colours are in assets/tokens.css,
      shared with the map and /leads (22); the rest are here.
   2. Section accent. A page sets ONE attribute — <body data-section="…">
      — and every accent-coloured element follows. Adding a type = one
      line in the "section accents" block.
   3. Mobile first. Base rules are the phone layout; desktop is added with
      min-width queries at the two breakpoints (see --bp-* comments).
   ===================================================================== */

/* ---------- 1. tokens ---------- */
/* colour: assets/tokens.css, loaded first (22) — the page, ink and banner colours, the section accents, the neutrals */
:root {
  /* the banner's sizes by banner-only names: assets/banner.css (shared with the admin, 19.6) reads these here and its own
     fallbacks — these same values — on the admin, whose --page-max, --fs-xl, --fs-xs and --lh-body are different sizes */
  --banner-max: var(--page-max);
  --banner-name-size: var(--fs-xl);
  --banner-tag-size: var(--fs-xs);
  --banner-tag-line-height: var(--lh-body);

  /* type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Courier Prime', ui-monospace, 'SF Mono', Consolas, monospace;
  --fs-2xs: 0.58rem;      /* micro mono labels ("TAP TO COPY") */
  --fs-xs:  0.66rem;      /* mono eyebrows, section labels */
  --fs-sm:  0.8rem;       /* meta, table, nearby */
  --fs-md:  0.95rem;      /* body */
  --fs-lg:  1.05rem;      /* banner name, card titles */
  --fs-xl:  1.32rem;      /* running total, h2 in posts */
  --fs-2xl: 1.85rem;      /* record name on a phone */
  --fs-3xl: clamp(2rem, 4vw + 1rem, 2.6rem);   /* record name on desktop */
  --lh-tight: 1.12;
  --lh-body:  1.6;
  --track:      0.06em;
  --track-wide: 0.12em;

  /* space */
  --s1: 0.35rem;
  --s2: 0.7rem;
  --s3: 1.15rem;
  --s4: 1.8rem;
  --s5: 2.6rem;
  --s6: 4rem;
  --gutter: clamp(1rem, 4vw, 1.6rem);
  --measure: 62ch;
  /* container scale (Instruction 06): reading column < content column < wide media */
  --detail-max: 48rem;      /* the detail page's single column below 1024 px */
  --column-max: 64rem;      /* reading pages (posts, counties, submit): the page; the text inside sits in --reading-max, photos bleed to the page */
  --reading-max: 34rem;     /* the centred reading column on desktop (≈ 68ch of body text); 36rem from 1440 px */
  --page-max: 76rem;        /* the content column: indexes, county and region pages, home */
  --page-wide: 92rem;       /* media that earns the width: hero photos, the home map panel, card grids ≥ 1440 px */
  --bleed-max: var(--column-max);   /* how far a post's photos bleed past the reading column; the content column from 1440 px (14) */

  /* shape */
  --r:      3px;
  --r-lg:   6px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(46, 36, 24, 0.12);
  --sh-2: 0 6px 20px rgba(46, 36, 24, 0.16);
  --rule: 4px;                                 /* accent rule under the banner */

  /* interaction */
  --touch: 44px;
  --dur: 160ms;

  /* breakpoints (documentation — CSS cannot read variables in @media):
       --bp-md   760px   two columns, inline nav
       --bp-lg   1024px  three-column card grids, detail page gains a side column
       --bp-xl   1440px  wide media (--page-wide), four-column card grids, larger type on titles
       --bp-xxl  1920px  five-column card grids; nothing else grows — line length is capped by --measure */
}

/* section accents (body[data-section]) and per-element accents ([data-type]): assets/tokens.css (22) */

/* ---------- fonts (self-hosted, latin subset, swap) ---------- */
/* the three web fonts: assets/fonts.css, shared with the admin (19.6) */

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: var(--lh-tight); }
p { margin: 0 0 var(--s3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--s2) var(--s3); border-radius: var(--r);
}
.skip:focus { top: var(--s2); }

/* mono eyebrow / section label — used everywhere a small caps label is needed */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
/* outbound link marker: an arrow after the text, never an icon font */
.out::after { content: '\2197'; font-family: var(--font-mono); font-size: 0.85em; margin-left: 0.25em; opacity: 0.7; }

/* ---------- 3. banner: assets/banner.css, one definition shared with the admin (19.6) ---------- */

/* ---------- 4. page scaffold ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--s3) var(--gutter) var(--s6); }
.page--narrow { max-width: var(--column-max); }
.page-title { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.015em; margin-bottom: var(--s1); }
.page-lede { color: var(--muted); max-width: var(--measure); margin-bottom: var(--s4); }
.section { margin: 0 0 var(--s4); }
.section-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 var(--s2); padding-bottom: 0.3rem; border-bottom: 1px solid var(--line);
}
.footer { border-top: 1px solid var(--line); margin-top: var(--s5); padding: var(--s4) var(--gutter) var(--s5); color: var(--muted); font-size: var(--fs-sm); }
.footer-inner { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.footer a { color: inherit; }

/* ---------- 5. buttons and controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--touch); padding: 0 var(--s3); border-radius: var(--r);
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font: 600 var(--fs-sm)/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.15); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--sm { min-height: 36px; font-size: var(--fs-xs); padding: 0 var(--s2); }
select, input[type="search"], input[type="text"] {
  min-height: var(--touch); padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: var(--fs-md) var(--font-body);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; margin-bottom: var(--s3); }
.filters label { display: flex; flex-direction: column; gap: var(--s1); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.filters select { min-width: 9rem; }
.count-line { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--muted); margin: 0 0 var(--s2); }

/* ---------- 6. homepage ---------- */
.total {
  font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.25; margin: var(--s2) 0 var(--s3);
}
.total b { font-weight: 700; }
.type-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: 0 0 var(--s3); list-style: none; padding: 0; }
.type-band a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-height: var(--touch); padding: var(--s1) 0.15rem; text-decoration: none; color: var(--ink);
  border-top: 3px solid var(--type-accent, var(--ink)); background: var(--surface); border-radius: 0 0 var(--r) var(--r);
}
.type-band b { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; }
.type-band span { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.band-note { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--muted); margin: calc(-1 * var(--s2)) 0 var(--s3); }   /* why the cells do not sum to the headline (14) */
.filters .filters-map { align-self: end; }
/* a type with no records yet reads as new, not broken (12) */
.type-band .is-new b { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--type-accent, var(--accent)); background: var(--surface-2); border: 1px solid var(--type-accent, var(--line)); border-radius: var(--r-pill, 1rem); padding: 0.1rem 0.5rem; line-height: 1.4; }
.empty-type { max-width: var(--measure); }
.empty-type .empty-def { background: var(--surface); border-left: 3px solid var(--accent); padding: var(--s2) var(--s3); border-radius: var(--r); margin: 0 0 var(--s3); }
.empty-type .btn { margin: var(--s1) 0 var(--s3); }   /* on its own line, never inside a sentence (13) */
.map-panel {
  display: block; position: relative; overflow: hidden; border-radius: var(--r); margin: 0 0 var(--s4);
  aspect-ratio: 21 / 9; background: var(--ink); color: var(--bg); text-decoration: none;
  background-image:
    linear-gradient(rgba(var(--on-dark-rgb), 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--on-dark-rgb), 0.10) 1px, transparent 1px);
  background-size: 14px 14px;
}
.map-panel-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s3); }
/* the panel's art (14): the state with every documented point, contours, or a base layer; the words sit on a dark gradient over it */
.map-panel--art { background-image: none; }
.map-panel-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.map-panel--art .map-panel-inner { background: linear-gradient(to top, rgba(var(--ink-rgb), 0.85) 0, rgba(var(--ink-rgb), 0.45) 30%, transparent 55%); text-shadow: 0 1px 3px rgba(20, 14, 8, 0.7); }   /* the tints follow the palette (23) */
/* the regions page's map (10) */
.region-map { margin: 0 0 var(--s4); }
.region-map img { width: 100%; height: auto; border-radius: var(--r-lg); }
.region-map figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--muted); margin-top: var(--s1); }
.map-panel .eyebrow { color: var(--banner-muted); }
.map-panel-title { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0; }
.map-panel-sub { font-size: var(--fs-sm); color: var(--banner-muted); margin: 0; }

/* ---------- 7. post list and post ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.post-item:first-child { border-top: 0; padding-top: 0; }
.post-item h2 a, .post-item h3 a { font-family: var(--font-display); font-size: var(--fs-lg); text-decoration: none; }
.post-item h2 a:hover, .post-item h3 a:hover { text-decoration: underline; }
.post-date { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--muted); margin: 0 0 var(--s1); }
.post-excerpt { margin: var(--s1) 0 0; color: var(--ink); max-width: var(--measure); }
.post-more { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; }
/* the homepage's newest post, in full (13) */
.post-full { padding: 0 0 var(--s2); }
.post-full-title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0 0 var(--s3); }
.post-full-title a { text-decoration: none; }
.post-full-title a:hover { text-decoration: underline; }
.post-full + .section-label { margin-top: var(--s4); }
.pagination { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s4); font-family: var(--font-mono); font-size: var(--fs-sm); }
.pagination a, .pagination span { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s2); }

.prose { max-width: var(--measure); }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin: var(--s4) 0 var(--s2); }
.prose h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin: var(--s3) 0 var(--s1); }
.prose h4 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); margin: var(--s3) 0 var(--s1); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 var(--s3); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 0 0 var(--s1); }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--s2); color: var(--muted); }
.prose img { border-radius: var(--r); margin: var(--s2) 0; }
.prose figure img, .prose picture img { width: 100%; height: auto; }
.prose figure { margin: var(--s3) 0; }
.prose figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); }
/* 36.3: a picture is never drawn wider than its own pixels. The renderer gives each upload its own width (--w, from the upload's
   stored width: on its figure, or on the picture itself in a line of words); one narrower than the column sits centred at that size
   with its caption under it, one as wide or wider fills the column as before, and on a phone one wider than the screen still fits.
   Its credit, a line beginning © right after it, carries the same --w and sits under it at its width too. A picture with no width
   known (none today), and every page stored before 36.3, as before: the column's width. */
.prose figure[style*="--w"] img, .prose img[style*="--w"] { width: var(--w); max-width: 100%; }
.prose figure[style*="--w"] img { margin-inline: auto; }
.prose figure[style*="--w"] figcaption, .prose p[style*="--w"] { max-width: var(--w); margin-inline: auto; }
/* 36.5: and never taller than the window, so it can be seen whole (Morris, at 36.3's deploy). The renderer gives each its shape too
   (--ar, its width over its height, as the record page's hero has it); one taller than the window less 2rem is drawn smaller to
   fit, keeping its shape, centred, its caption and its credit line under it at the width it is drawn at. The window's height is
   the small viewport's (svh): on a phone, the height left while the browser's bars show, which does not change as they come and go;
   vh for a browser older than 2022. Nothing on these pages is fixed to the top of the window. A page stored before 36.5 has no --ar
   and is drawn as before. */
.prose figure[style*="--ar"] img, .prose img[style*="--ar"] { width: min(var(--w), 100%, calc((100vh - 2rem) * var(--ar))); width: min(var(--w), 100%, calc((100svh - 2rem) * var(--ar))); }
.prose figure[style*="--ar"] figcaption, .prose p[style*="--ar"] { max-width: min(var(--w), 100%, calc((100vh - 2rem) * var(--ar))); max-width: min(var(--w), 100%, calc((100svh - 2rem) * var(--ar))); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 0.25em; border-radius: var(--r); }
.prose pre { background: var(--surface-2); padding: var(--s2); border-radius: var(--r); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-sm); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.prose a.landform-ref::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--type-accent, var(--accent)); margin-right: 0.3em; vertical-align: 0.05em; }

/* ---------- 8. index cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.card { display: grid; grid-template-columns: 5.2rem 1fr; gap: var(--s2); align-items: center; background: var(--surface); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); min-height: var(--touch); }
.card:hover .card-name { text-decoration: underline; }
.card-thumb { width: 5.2rem; aspect-ratio: 1 / 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-thumb svg { width: 2rem; height: 2rem; opacity: 0.45; }
.card-body { padding: var(--s1) var(--s2) var(--s1) 0; min-width: 0; }
.card-name { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; display: block; }
.card-meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
.card-meta b { color: var(--accent-ink, var(--accent)); font-weight: 700; }   /* 35: a site may give text in its accent a darker colour of its own */
.card-out { box-shadow: inset 0 0 0 1px var(--line); }
.out-host { color: var(--muted); white-space: nowrap; }
.out-host.out::after { opacity: 0.9; }
.out-none { font-style: italic; text-transform: none; letter-spacing: 0; }
.cards-near { margin-bottom: var(--s2); }
/* review cards (09.1): the cover is the point, so it is shown whole in a portrait frame; the series reads as the meta line in its own case */
.cards-covers .card-thumb { aspect-ratio: 2 / 3; }
.cards-covers .card-thumb img { object-fit: contain; }
.cards-covers .card-meta { text-transform: none; letter-spacing: 0; }
.review-series { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }
.review-cover { float: right; width: 40%; max-width: 12rem; margin: 0 0 var(--s2) var(--s3); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.review-cover img { width: 100%; height: auto; display: block; margin: 0; }
.more { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.btn-more { text-transform: none; letter-spacing: 0; }
.btn-more[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* county / region lists */
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { border-top: 1px solid var(--line); }
.list-plain a { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--touch); padding: var(--s1) 0; text-decoration: none; }
.list-plain .name { font-family: var(--font-display); font-size: var(--fs-lg); }
.list-plain .n { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--muted); letter-spacing: 0.02em; }   /* near the name's size (14) */
.type-dots { display: inline-flex; gap: 0.25rem; margin-left: var(--s1); vertical-align: middle; }
.dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; flex: 0 0 auto; background: var(--type-accent, var(--accent)); display: inline-block; }

/* ---------- 9. detail page ---------- */
/* the hero (23.1): the photo whole, in its own shape — nothing cut off, no bars — as wide as its space allows without being
   taller than 80% of the window (62% from 760 px, §11); narrower than its space, it is centred on the page background. detail.php
   gives the photo's shape as --ar (width over height); without a photo there is no --ar, and the hero keeps the full-width box it
   always had. The same 80 and 62 are in site_hero_sizes() (layout.php). */
.hero { width: min(100%, calc(80vh * var(--ar, 999))); width: min(100%, calc(80svh * var(--ar, 999))); margin-inline: auto; background: var(--surface-2); overflow: hidden; position: relative; }
.hero picture { display: block; }
.hero img { display: block; width: 100%; height: auto; }
.hero-empty { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s4); color: var(--muted-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; }
.hero-credit { position: absolute; right: var(--s2); bottom: var(--s1); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.8); }
/* the photo's caption (28): the sheet's Image Caption, under the photo it belongs to and as wide as it, on every type's page */
.hero-caption { width: min(100%, calc(80vh * var(--ar, 999))); width: min(100%, calc(80svh * var(--ar, 999))); margin: 0 auto; padding: var(--s1) var(--gutter) 0; font-size: var(--fs-sm); font-style: italic; color: var(--muted); }
.detail { max-width: var(--detail-max); margin: 0 auto; padding: var(--s3) var(--gutter) var(--s5); }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-text); padding: 0.28rem 0.5rem; border-radius: var(--r); margin-bottom: var(--s2);
}
.detail h1 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.015em; margin-bottom: var(--s1); }
.place { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s3); }
.place a { color: inherit; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-bottom: var(--s3); }
.act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; min-height: var(--touch);
  padding: var(--s2) var(--s1); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--surface);
}
.act--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.act b { font-size: var(--fs-sm); font-weight: 600; }
.act span { font-family: var(--font-mono); font-size: var(--fs-2xs); opacity: 0.7; letter-spacing: 0.04em; text-transform: uppercase; }
.coords {
  grid-column: 1 / -1; min-height: var(--touch); text-align: center; font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: 0.6rem; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--ink); background: transparent; cursor: pointer; width: 100%;
}
.coords em { display: block; font-style: normal; font-size: var(--fs-2xs); opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.15rem; }
.coords.is-copied em { opacity: 1; color: var(--accent-ink, var(--accent)); }
.desc { max-width: var(--measure); margin: 0 0 var(--s4); }
.desc p { margin: 0 0 var(--s2); }
.data { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.data td, .data th { padding: 0.45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-weight: 400; }
.data th { color: var(--muted); width: 44%; }
.data td { text-align: right; overflow-wrap: anywhere; }
.data tr:last-child td, .data tr:last-child th { border-bottom: 0; }
.data a { color: inherit; }
.near { margin-bottom: var(--s4); }
.nrow { display: flex; align-items: center; gap: 0.6rem; min-height: var(--touch); padding: 0.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.nrow:last-child { border-bottom: 0; }
.nrow b { font-size: var(--fs-sm); font-weight: 600; flex: 1; min-width: 0; }
.nrow small { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 0.4em; }
.nrow span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.near-empty { color: var(--muted); font-size: var(--fs-sm); }
.cta { background: var(--surface-2); border-radius: var(--r); padding: var(--s3); text-align: center; }
.cta p { margin: 0 0 var(--s2); font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 10. utility pages ---------- */
.notice { background: var(--surface); border-left: 3px solid var(--accent); padding: var(--s2) var(--s3); border-radius: var(--r); margin: 0 0 var(--s3); max-width: var(--measure); }
.placeholder { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--s4) var(--s3); text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---------- 11. desktop enhancements ---------- */
@media (min-width: 760px) {
  /* the banner's wide-screen row is in assets/banner.css (19.6) */
  .page { padding-top: var(--s4); }
  .page-title { font-size: var(--fs-3xl); }
  .total { font-size: var(--fs-2xl); }
  .type-band { gap: var(--s2); grid-template-columns: repeat(6, 1fr); }
  .type-band b { font-size: var(--fs-lg); }
  .type-band .is-new b { font-size: var(--fs-xs); }
  .type-band span { font-size: var(--fs-xs); }
  .map-panel { aspect-ratio: 32 / 9; }
  .map-panel-inner { padding: var(--s4); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { grid-template-columns: 6.5rem 1fr; }
  .card-thumb { width: 6.5rem; }
  /* long-form pages (14): the reading column is centred as soon as the page is wider than it — it was only centred from
     1024 px, so a laptop between 760 and 1023 CSS px read hard left with the right half empty — and photos bleed past it
     to --bleed-max (the page column; the content column from 1440), not only from 1440 */
  .page--narrow .page-title, .page--narrow .page-lede, .page--narrow .post-date, .page--narrow .review-series, .page--narrow .prose, .page--narrow .notice, .page--narrow .sform, .page--narrow .done, .page--narrow .post-more,
  .post-full .post-date, .post-full-title, .post-full .prose { max-width: var(--reading-max); margin-inline: auto; }
  .page--narrow .prose figure, .post-full .prose figure { margin-inline: calc((min(var(--bleed-max), 100vw - 2 * var(--gutter)) - 100%) / -2); }
  .prose figure img { border-radius: var(--r-lg); }
  .detail { padding-top: var(--s4); }
  .detail h1 { font-size: var(--fs-3xl); }
  /* 24.2: the hero no taller than 62% of the window, so the record's name is in the first screen (80% put it at a laptop's foot);
     a phone keeps 80%, where a tall photo still fills the screen's width */
  .hero { width: min(100%, calc(62vh * var(--ar, 999))); width: min(100%, calc(62svh * var(--ar, 999))); }
  .hero-caption { width: min(100%, calc(62vh * var(--ar, 999))); width: min(100%, calc(62svh * var(--ar, 999))); }
  .hero-empty { aspect-ratio: auto; height: 9rem; }   /* 39: no photo, a short band: the name starts near the top (a 16:9 box put it at 766 px) */
  .acts { grid-template-columns: 1fr 1fr 1.4fr; }
  .coords { grid-column: auto; }
  .home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s5); align-items: start; }
}
@media (min-width: 1024px) {
  :root { --measure: 68ch; }
  .page--narrow .page-lede { margin-bottom: var(--s4); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .hero-wrap { max-width: var(--page-wide); margin: 0 auto; }
  .hero { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  /* detail page: the actions in one row and Nearby's cards across the page, as below 1024 px; the description and the facts in
     the wide column, Vista Conditions beside them where a type has it (§15). 24.2: the side column (06) held the actions and a
     text list; since 07.5 Nearby's cards, sized for the page, sat in its 22rem three to five abreast — a letter a line.
     DOM order is unchanged (phones read top to bottom); named areas place it. */
  .detail { max-width: var(--page-max); display: grid; column-gap: var(--s5); align-items: start;
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "badge badge" "title title" "place place" "acts acts" "desc ." "datah ." "data ." "nearh nearh" "near near" "cta cta"; }
  .detail .badge { grid-area: badge; justify-self: start; }   /* 33: a small label, as on a phone — not stretched across the grid's row */
  .detail h1 { grid-area: title; }
  .detail .place { grid-area: place; }
  .detail .desc { grid-area: desc; max-width: var(--measure); }
  .detail .acts { grid-area: acts; align-self: start; }
  .detail .data-h { grid-area: datah; }
  .detail .data { grid-area: data; align-self: start; }
  .detail .near-h { grid-area: nearh; }
  .detail .near, .detail .near-empty { grid-area: near; }
  .detail .cta { grid-area: cta; }
  .home-cols { grid-template-columns: minmax(0, 1fr) 24rem; }
}
@media (min-width: 1440px) {
  :root { --gutter: 2rem; --measure: 72ch; --reading-max: 36rem; --bleed-max: var(--page-max); }
  .page { max-width: var(--page-max); }
  .page--narrow { max-width: var(--page-max); }   /* room for photos to bleed to the content column (14) */
  .page--wide { max-width: var(--page-wide); }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { grid-template-columns: 7rem 1fr; }
  .card-thumb { width: 7rem; }
  .type-band b { font-size: var(--fs-xl); }
  .map-panel { aspect-ratio: 36 / 9; }
  .detail h1 { font-size: clamp(2.4rem, 2.2vw + 1rem, 3.2rem); }
  .page-title { font-size: var(--fs-3xl); }
}
@media (min-width: 1920px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
}
@media print {
  .banner, .nav, .rule, .acts, .cta, .footer, .map-panel { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 11. submit form (Instruction 06) ---------- */
.sform { max-width: 40rem; }
.sform fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.sform legend { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--s2); padding: 0; }
.field { margin: 0 0 var(--s3); }
.field label, .field .label-like { display: block; font-weight: 600; margin-bottom: var(--s1); }
.field .opt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); font-weight: 400; margin-left: var(--s1); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field select, .field textarea {
  width: 100%; min-height: var(--touch); padding: 0.55rem var(--s2); font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.field input[type="file"] { width: 100%; min-height: var(--touch); padding: var(--s2); border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); font: inherit; }
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: #A63D2F; border-width: 2px; }
.fhint { font-size: var(--fs-sm); color: var(--muted); margin: var(--s1) 0 0; }
.ferr { font-size: var(--fs-sm); color: #A63D2F; font-weight: 600; margin: var(--s1) 0 0; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.radios { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.radios label, .check { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); font-weight: 400; cursor: pointer; }
.radios input, .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
/* .field label (above) is a block with a bottom margin; a checkbox label inside a field is the row, box centred on the whole text block (13) */
.field label.check { display: flex; align-items: center; margin-bottom: 0; font-weight: 400; line-height: 1.35; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.factions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.notice--err { border-left-color: #A63D2F; }
.done { background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--r); padding: var(--s3); }
.done-h { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--s2); }
.done .mactions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

/* ---------- 12. a sister site's front page (23) ---------- */
.site-welcome { max-width: var(--measure); margin: 0 0 var(--s3); }
.site-ways { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.badge-mark { display: inline-block; width: 1.25em; height: 1.25em; margin-right: 0.3em; vertical-align: -0.3em; }
/* the sunrise-and-sunset widget (catalogue #29): its sky colours are the drawing's own; everything around them reads the tokens */
.sunw { max-width: 28rem; margin: 0 0 var(--s4); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sunw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sunw-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin: 0; }
.sunw-toggle { min-height: var(--touch); padding: 0 var(--s3); border: 0; border-radius: var(--r); background: var(--accent); color: var(--accent-text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.sunw-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sunw-date { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--muted); margin: var(--s1) 0 var(--s2); }
.sunw-map { position: relative; }
.sunw-map canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.sunw-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sunw-tz-line { fill: none; stroke: rgba(var(--sun-over-rgb), 0.75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; }
#sunw-tz-labels text { font-family: var(--font-body); font-size: 26px; font-weight: 700; fill: rgb(var(--sun-over-rgb)); paint-order: stroke; stroke: rgba(var(--sun-shade-rgb), 0.55); stroke-width: 4px; }
#sunw-probe { fill: rgba(var(--sun-over-rgb), 0.9); stroke: var(--ink); stroke-width: 3; }
.sunw-readout { margin-top: var(--s2); padding: var(--s1) var(--s2); background: var(--surface-2); border-radius: var(--r); min-height: 3.2rem; }
.sunw-loc { font-size: var(--fs-xs); color: var(--muted); }
.sunw-time { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin-top: 2px; }
.sunw-legend { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.sunw-bar { flex: 1; height: 6px; border-radius: 3px; }

/* ---------- 13. the record page's photos: the strip and the lightbox (24; feature.photo_strip) ---------- */
.hero-open { display: block; cursor: zoom-in; }
.pstrip { margin: var(--s3) 0 0; }
.pstrip-list { list-style: none; margin: 0; padding: 0 0 var(--s1); display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.pstrip-item { flex: 0 0 auto; margin: 0; scroll-snap-align: start; max-width: 85vw; }
.pstrip-open { display: block; border-radius: var(--r); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.pstrip-open img { display: block; height: 9rem; width: auto; max-width: none; }
.pstrip-credit { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--muted); margin: var(--s1) 0 0; max-width: 14rem; }
.pstrip-credit a { color: inherit; }
html.lbox-open { overflow: hidden; }
.lbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lightbox-bg); color: var(--lightbox-text); }
.lbox::backdrop { background: var(--lightbox-bg); }
.lbox[open] { display: block; }
.lbox-fig { margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--touch) 0; touch-action: pan-y pinch-zoom; }
.lbox-fig picture { display: contents; }
.lbox-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lbox-close, .lbox-step { position: absolute; display: flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: rgba(var(--on-dark-rgb), 0.16); color: var(--lightbox-text); font: 400 1.8rem/1 var(--font-body); cursor: pointer; }
.lbox-close { top: var(--s2); right: var(--s2); }
.lbox-step { top: 50%; transform: translateY(-50%); }
.lbox-prev { left: var(--s2); }
.lbox-next { right: var(--s2); }
.lbox-close:focus-visible, .lbox-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lbox-count { position: absolute; top: var(--s2); left: var(--s2); margin: 0; line-height: var(--touch); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); }
.lbox-credit { position: absolute; right: var(--s2); bottom: var(--s2); left: var(--s2); margin: 0; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; }
.lbox-credit a { color: inherit; }

/* ---------- 14. Vista Conditions (24; lf_type.show_conditions) ---------- */
.vcard { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--surface); border-left: 6px solid var(--muted-2); border-radius: var(--r); }
.vcard--clear { border-left-color: var(--vc-clear); }
.vcard--low { border-left-color: var(--vc-good); }
.vcard--moderate { border-left-color: var(--vc-hazy); }
.vcard--high { border-left-color: var(--vc-poor); }
.vcard--fog_likely { border-left-color: var(--vc-fog); }
.vcard-h { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
.vcard-rating { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; margin: var(--s1) 0 0; }
.vcard-why { font-size: var(--fs-sm); margin: 0.15rem 0 var(--s2); }
.vcard-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--s1) var(--s2); margin: 0 0 var(--s2); }
.vcard-read div { margin: 0; }
.vcard-read dt { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.vcard-read dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; }
.vcard-src { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* ---------- 15. the record page's third action, and the trip sheet in print (24) ---------- */
.acts--3 { grid-template-columns: repeat(3, 1fr); }
.acts--3 .act { padding-inline: 0.2rem; text-align: center; }
.trip { display: none; }
@media (min-width: 760px) {
  .acts--3 { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
}
@media (min-width: 1024px) {
  /* 24.2: the actions keep their one row (760 px above); the card sits in the side column beside the description and the facts */
  .detail--cond { grid-template-areas: "badge badge" "title title" "place place" "acts acts" "desc cond" "datah cond" "data cond" "nearh nearh" "near near" "cta cta"; }
  .detail--cond .vcard { grid-area: cond; }
}
@media print {
  @page { margin: 12mm; }
  body:has(.trip) { font-size: 10pt; }
  body:has(.trip) .skip, body:has(.trip) .near-h, body:has(.trip) .near, body:has(.trip) .pstrip, body:has(.trip) .vcard, body:has(.trip) .hero-credit { display: none !important; }
  body:has(.trip) .hero-wrap { max-width: none; }
  body:has(.trip) .hero-wrap:has(.hero-empty) { display: none; }   /* no photo yet: nothing to print */
  body:has(.trip) .hero { width: min(100%, calc(3.3in * var(--ar, 999))) !important; border-radius: 0; background: none; }
  body:has(.trip) .hero img { max-height: 3.3in; }
  body:has(.trip) .detail { display: block; max-width: none; padding: 0.12in 0 0; }
  body:has(.trip) .detail h1 { font-size: 20pt; margin: 0 0 2pt; }
  body:has(.trip) .badge { margin-bottom: 4pt; }
  body:has(.trip) .place { margin: 0 0 6pt; }
  body:has(.trip) .desc { margin: 0 0 6pt; max-width: none; font-size: 9.5pt; line-height: 1.35; }
  body:has(.trip) .desc p { margin: 0 0 3pt; }
  body:has(.trip) .data { font-size: 8.5pt; margin-bottom: 6pt; }
  body:has(.trip) .data td, body:has(.trip) .data th { padding: 1.5pt 0; }
  body:has(.trip) .data-h { margin: 0 0 3pt; }
  .trip { display: grid; grid-template-columns: minmax(0, 1fr) 3.1in; gap: 0 12pt; align-items: start; break-inside: avoid; }
  .trip-line { margin: 0 0 3pt; font-size: 9pt; overflow-wrap: anywhere; }
  .trip-line b { display: block; font-family: var(--font-mono); font-size: 7pt; letter-spacing: var(--track); text-transform: uppercase; font-weight: 600; }
  .trip-coords { font-family: var(--font-mono); font-size: 11pt; font-weight: 700; }
  .trip-map { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .trip-map img { width: 100%; height: auto; }
  .trip-map figcaption { font-size: 7pt; line-height: 1.3; margin-top: 2pt; }
}

/* ---------- 16. Golden Hour (24; feature.golden_hour) ---------- */
.gh-back { margin: 0 0 var(--s1); font-size: var(--fs-sm); }
.gh-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s1); }
.gh-date label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.gh-date input[type="date"] { min-height: var(--touch); padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: var(--fs-md) var(--font-body); }
.gh-today { font-size: var(--fs-sm); }
.gh-day { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--s3); }
.gh-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin: 0 0 var(--s4); }
.gh-card { background: var(--surface); border-radius: var(--r); padding: var(--s1) var(--s2); border-left: 4px solid var(--muted-2); min-width: 0; }
.gh-card--rise { border-left-color: var(--gh-rise); }
.gh-card--set { border-left-color: var(--gh-set); }
.gh-card--golden { border-left-color: rgb(var(--gh-golden-rgb)); }
.gh-card--blue { border-left-color: rgb(var(--gh-blue-rgb)); }
.gh-card--noon { border-left-color: var(--ink); }
.gh-card-l { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: 0; }
.gh-card-v { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; margin: 0.1rem 0 0; }
.gh-card-s { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.gh-compass { margin: 0 0 var(--s2); max-width: 34rem; }
.gh-compass-box { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.gh-compass-box img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gh-compass-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gh-rim { fill: none; stroke: rgba(var(--ink-rgb), 0.55); stroke-width: 2; }
.gh-compass-box--plain .gh-rim { fill: rgba(var(--ink-rgb), 0.04); }
.gh-w--golden { fill: rgba(var(--gh-golden-rgb), 0.42); }
.gh-w--blue { fill: rgba(var(--gh-blue-rgb), 0.34); }
.gh-view { fill: rgba(var(--gh-view-rgb), 0.28); stroke: rgb(var(--gh-view-rgb)); stroke-width: 3; stroke-dasharray: 10 6; }
.gh-view-line { stroke: rgb(var(--gh-view-rgb)); stroke-width: 5; stroke-dasharray: 10 6; }
.gh-path { fill: none; stroke: var(--gh-sun); stroke-width: 4; stroke-dasharray: 2 7; stroke-linecap: round; }
.gh-l { stroke-width: 5; stroke-linecap: round; }
.gh-l--rise { stroke: var(--gh-rise); }
.gh-l--set { stroke: var(--gh-set); }
.gh-l--noon { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 12 8; }
.gh-ray { stroke: var(--gh-sun); stroke-width: 3; }
.gh-sun { fill: var(--gh-sun); stroke: var(--bg); stroke-width: 3; }
.gh-sun.is-down { fill: var(--muted-2); }
.gh-here { fill: var(--ink); stroke: var(--bg); stroke-width: 3; }
.gh-t { font-family: var(--font-body); font-size: 26px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: rgba(var(--on-dark-rgb), 0.9); stroke-width: 6px; stroke-linejoin: round; }
.gh-t-dir { font-family: var(--font-mono); font-size: 24px; }
.gh-t-view { fill: rgb(var(--gh-view-rgb)); }
.gh-cap { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); }
.gh-key { white-space: nowrap; }
.gh-key::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; border-radius: 2px; margin: 0 0.25em 0 0.4em; vertical-align: -0.05em; }
.gh-key--golden::before { background: rgba(var(--gh-golden-rgb), 0.7); }
.gh-key--blue::before { background: rgba(var(--gh-blue-rgb), 0.6); }
.gh-key--path::before { background: var(--gh-sun); height: 0.25em; vertical-align: 0.2em; }
.gh-key--view::before { background: rgba(var(--gh-view-rgb), 0.5); }
.gh-slide { margin: 0 0 var(--s4); max-width: 34rem; }
.gh-slide label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.gh-slide input[type="range"] { display: block; width: 100%; height: var(--touch); margin: var(--s1) 0; accent-color: var(--gh-sun); cursor: pointer; }
.gh-slide output { display: block; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; min-height: 2.6em; }
.gh-chart { margin: 0 0 var(--s4); }
.gh-chart svg { display: block; width: 100%; height: auto; }
.gh-b--golden { fill: rgba(var(--gh-golden-rgb), 0.3); }
.gh-b--blue { fill: rgba(var(--gh-blue-rgb), 0.22); }
.gh-grid { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.gh-horizon { stroke: var(--line-strong); stroke-width: 2; }
.gh-curve { fill: none; stroke: var(--gh-sun); stroke-width: 4; stroke-linejoin: round; }
.gh-t-ax { font-size: 20px; font-weight: 400; stroke-width: 0; fill: var(--muted); }
.gh-year-wrap { overflow-x: auto; }
.gh-year { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.gh-year th, .gh-year td { width: auto; padding: 0.4rem 0 0.4rem var(--s2); white-space: nowrap; overflow-wrap: normal; text-align: right; }
.gh-year th:first-child { padding-left: 0; text-align: left; }
.gh-year thead th { white-space: normal; vertical-align: bottom; font-size: var(--fs-xs); }
.gh-year .is-now th, .gh-year .is-now td { font-weight: 700; }
.gh-note { font-size: var(--fs-sm); color: var(--muted); max-width: var(--measure); }
@media (min-width: 760px) {
  .gh-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 17. a type's own questions on the submit form (24; feature.type_questions) ---------- */
.tq { margin: 0 0 var(--s3); padding: var(--s2) var(--s3) var(--s1); background: var(--surface-2); border-left: 4px solid var(--line-strong); border-radius: var(--r); }
.tq--overlook { border-left-color: var(--accent-overlooks); }
.tq-h { margin: 0 0 var(--s2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
@supports selector(:has(a)) {
  /* each type's block only while that type is chosen; the height and width only for a type that is asked them */
  .tq { display: none; }
  .sform:has(#f-kind option[value="tunnel"]:checked) .tq--tunnel, .sform:has(#f-kind option[value="lake"]:checked) .tq--lake,
  .sform:has(#f-kind option[value="arch"]:checked) .tq--arch, .sform:has(#f-kind option[value="overlook"]:checked) .tq--overlook,
  .sform:has(#f-kind option[value="waterfall"]:checked) .tq--waterfall, .sform:has(#f-kind option[value="chimney"]:checked) .tq--chimney,
  .sform:has(#f-kind option[value="cave"]:checked) .tq--cave { display: block; }
  .sform:has(#f-kind option[data-size="0"]:checked) .q-size { display: none; }
}

/* ---------- 18. Waterfall of the Week and the writing's covers (36.1; the site table's week and covers: waterfalls) ---------- */
/* the week's essay on the front page: the old site's order — the week, the picture, the title — in one box, phones first */
.week-box { margin: 0 0 var(--s4); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.week-eyebrow { margin: 0 0 var(--s2); }
.week-eyebrow a { color: inherit; text-decoration: none; }
.week-eyebrow a:hover { text-decoration: underline; }
.week-pic { display: block; margin: 0 0 var(--s2); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.week-pic img, .week-full-pic img, .post-full-cover img, .post-cover img { width: 100%; height: auto; display: block; }
.week-title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0 0 var(--s1); }
.week-title a { text-decoration: none; }
.week-title a:hover { text-decoration: underline; }
.week-excerpt { margin: 0 0 var(--s2); max-width: var(--measure); }
.week-ways { margin: 0; }
/* its page: the essay in full under its picture */
.week-full-pic { margin: 0 0 var(--s3); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.week-full + .section-label { margin-top: var(--s4); }
/* the latest article in full, under its cover; each listed article with its cover beside it, on the right */
.post-full-cover { display: block; margin: 0 0 var(--s3); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.post-item.has-cover { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0 var(--s3); align-items: start; }
.post-item.has-cover .post-cover { grid-column: 2; grid-row: 1; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.post-item.has-cover .post-item-text { grid-column: 1; grid-row: 1; min-width: 0; }
@media (min-width: 760px) {
  .post-item.has-cover { grid-template-columns: minmax(0, 1fr) 9rem; }
  .post-full .post-full-cover, .week-full .week-full-pic { max-width: var(--reading-max); margin-inline: auto; margin-bottom: var(--s3); }
}

/* ---------- 19. the Moonbow Tracker and a waterfall's video (36.2; the site table's moonbow, lf_waterfall.youtube_video_id: waterfalls) ---------- */
/* the tracker: a night-sky card in the site's banner colours, on the front page and on the falls' own page */
.moonbow { margin: 0 0 var(--s4); padding: var(--s3); background: var(--banner-bg); color: var(--banner-text); border-radius: var(--r-lg); }
.moonbow a { color: var(--banner-text); }
.moonbow-head { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
.moonbow-moon { flex: none; }
.moonbow-moon .moon-dark { fill: rgba(var(--on-dark-rgb), 0.12); stroke: rgba(var(--on-dark-rgb), 0.4); stroke-width: 0.75; }
.moonbow-moon .moon-lit { fill: var(--banner-text); }
.moonbow-title { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0; color: inherit; }
.moonbow-sub { margin: 0.15rem 0 0; font-size: var(--fs-sm); color: var(--banner-muted); }
.moonbow-when { margin: 0 0 var(--s2); max-width: var(--measure); }
.moonbow-cols { display: grid; gap: 0 var(--s4); }
.moonbow-h { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600; color: var(--banner-muted); margin: var(--s3) 0 var(--s1); }
.moonbow-nights, .moonbow-dates { list-style: none; margin: 0; padding: 0; }
.moonbow-nights li, .moonbow-dates li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); padding: 0.3rem 0; border-top: 1px solid rgba(var(--on-dark-rgb), 0.16); }
.moonbow-date { min-width: 6.5rem; font-family: var(--font-mono); font-size: var(--fs-sm); }
.moonbow-dates .moonbow-date { min-width: 9rem; }
.moonbow-pct, .moonbow-full { font-size: var(--fs-sm); color: var(--banner-muted); }
.moonbow-note, .moonbow-about { font-size: var(--fs-sm); color: var(--banner-muted); margin: var(--s2) 0 0; max-width: var(--measure); }
.moonbow-ways { margin: var(--s2) 0 0; }
@media (min-width: 760px) {
  .moonbow-cols { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
/* a waterfall's video: its picture, with the play button over it, until a tap puts YouTube's player in its place (assets/video.js) */
.video { margin: 0 0 var(--s3); }
.video-play, .video-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--banner-bg); border: 0; }
.video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.video-button-bg { fill: var(--banner-bg); fill-opacity: 0.85; }
.video-button-arrow { fill: var(--banner-text); }
.video-play:hover .video-button-bg, .video-play:focus-visible .video-button-bg { fill: var(--accent); fill-opacity: 1; }
.video figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); }
@media (min-width: 1024px) {
  /* the video under the description, in its column; the tracker in the side column, as Vista Conditions is (§15) */
  .detail--video { grid-template-areas: "badge badge" "title title" "place place" "acts acts" "desc ." "video ." "datah ." "data ." "nearh nearh" "near near" "cta cta"; }
  .detail--moonbow { grid-template-areas: "badge badge" "title title" "place place" "acts acts" "desc moonbow" "video moonbow" "datah moonbow" "data moonbow" "nearh nearh" "near near" "cta cta"; }
  .detail .video { grid-area: video; max-width: var(--measure); }
  .detail--moonbow .moonbow { grid-area: moonbow; }
}
@media print {
  .moonbow, .video { display: none !important; }   /* the trip sheet stays one page; a front page prints without them */
}

/* ---------- 20. the Top 10 lists (41): /top-10 and /top-10/<list> on every host (includes/site/top10.php) ---------- */
.top10-index a { flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--s2); }
.top10-index .top10-what { flex: 1 1 100%; color: var(--muted); font-size: var(--fs-sm); padding-bottom: 0.15rem; }
.top10-group { margin-top: var(--s4); }
.top10-back { margin: 0 0 var(--s1); }
.top10-back a { color: inherit; }
.top10 { width: 100%; border-collapse: collapse; margin: 0 0 var(--s3); }
.top10 th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; font-weight: 600; color: var(--muted); text-align: left; padding: 0 0 var(--s1); border-bottom: 1px solid var(--line-strong); }
.top10 td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.top10 .top10-place { width: 3.2rem; }
.top10 td.top10-place { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.top10 .top10-name { font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-tight); padding-right: var(--s2); overflow-wrap: anywhere; }
.top10 .top10-n { text-align: right; white-space: nowrap; }
.top10 td.top10-n { font-family: var(--font-mono); font-size: var(--fs-md); }
.top10-note { font-size: var(--fs-sm); margin: 0 0 var(--s2); max-width: var(--measure); }
.top10-more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }