/* =====================================================================
   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); }
.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); font-weight: 700; }
.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); }
.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 { max-height: 34rem; aspect-ratio: 16 / 9; }
  .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); }
  .hero-empty { max-height: 38rem; }
  /* 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; }
  .hero-empty { max-height: 42rem; }
  .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); }
  .hero-empty { max-height: 46rem; }
}
@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; }
}