/* ===========================================================================
   Misc — "Field Notes"  (loaded on every /misc/* page via uses_misc_hub_assets)
   ---------------------------------------------------------------------------
   One premium editorial system across the hub + sub-pages: near-monochrome warm
   ink, Fraunces optical serif, hairline rules, refined figures, quiet motion.
   Overrides the boxed styles in _sass/custom/_misc.scss. The map's terrain vars
   are retoned to sepia here; its JS hooks/classes are preserved untouched.
   =========================================================================== */

/* ---- shared base: tokens, no box, body font ---- */
.misc-root {
  --ink: #1b1913;
  --title: #22201a;
  --muted: #8a8578;
  --faint: #b4afa2;
  --rule: rgba(28, 24, 18, 0.16);
  --hair: rgba(28, 24, 18, 0.09);
  --dot: #cbc6ba;
  --card: #fffefb;
  --card-border: rgba(28, 24, 18, 0.12);
  --card-shadow: 0 10px 30px rgba(28, 24, 18, 0.05);

  /* map: monochrome ink pins + sepia relief (terrain retoned for a premium map) */
  --accent: #2f2b22;
  --teal: #6f6957;
  --pin: #26221b;
  --pin-stroke: #fffefb;
  --ring-track: rgba(28, 24, 18, 0.13);
  --badge1: #f4f1ea;
  --badge2: #ece7dc;
  --badge-ink: #5f5947;
  --badge-border: rgba(28, 24, 18, 0.14);
  --terr-low: #ece7db;
  --terr-forest: #c9be9f;
  --terr-arid: #ded2b6;
  --terr-mtn: #c6bba2;
  --state-border: rgba(28, 24, 18, 0.16);
  --outline: rgba(28, 24, 18, 0.30);

  max-width: 860px;
  margin: 0.5rem auto 3.5rem;
  padding: 20px 30px 34px;
  background: none;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.misc-root.parks-page { max-width: 1120px; }

html[data-theme="dark"] .misc-root {
  --ink: #f0ede5;
  --title: #f3f0e9;
  --muted: #938e81;
  --faint: #66615a;
  --rule: rgba(255, 255, 255, 0.18);
  --hair: rgba(255, 255, 255, 0.09);
  --dot: rgba(255, 255, 255, 0.17);
  --card: #1e1d1a;
  --card-border: rgba(255, 255, 255, 0.10);
  --card-shadow: none;

  --accent: #d9d3c5;
  --teal: #b6b0a2;
  --pin: #ece7db;
  --pin-stroke: #1c1b18;
  --ring-track: rgba(255, 255, 255, 0.14);
  --badge1: #232220;
  --badge2: #1b1a17;
  --badge-ink: #b6b0a2;
  --badge-border: rgba(255, 255, 255, 0.12);
  --terr-low: #211f1a;
  --terr-forest: #38332a;
  --terr-arid: #423b2d;
  --terr-mtn: #34302a;
  --state-border: rgba(255, 255, 255, 0.14);
  --outline: rgba(255, 255, 255, 0.26);

  background: none;
  background-image: none;
  border: none;
  box-shadow: none;
}

/* ===================== shared header (all Field Notes pages) ================= */
.fn-head { margin: 0 0 6px; }
.fn-eyebrow {
  margin: 0 0 18px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.fn-title {
  margin: 0 0 16px;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 540;
  font-size: 3.5rem;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--title);
}
.fn-title--sub { font-size: 2.7rem; }
.fn-lead {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.68;
}
.fn-back {
  margin: 44px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.fn-back a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.fn-back a:hover { color: var(--ink); border-bottom-color: var(--faint); }

/* ===================== hub index ("The Contents Page") ====================== */
.fn-index {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.fn-entry { border-bottom: 1px solid var(--hair); }
.fn-entry:last-child { border-bottom: 1px solid var(--rule); }
.fn-link { display: block; padding: 30px 2px; text-decoration: none; color: inherit; }
.fn-link:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.fn-row { display: flex; align-items: baseline; }
.fn-num {
  flex: 0 0 auto; width: 2.7em;
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 400; font-size: 1.05rem; letter-spacing: 0.04em;
  color: var(--faint); transition: color 0.3s ease;
}
.fn-name {
  flex: 0 1 auto;
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 500; font-size: 1.9rem; line-height: 1.12; letter-spacing: -0.012em;
  color: var(--title); transition: color 0.3s ease;
}
.fn-dots {
  flex: 1 1 auto; align-self: baseline; position: relative; top: -0.3em;
  min-width: 28px; margin: 0 0.95em; border-bottom: 2px dotted var(--dot);
}
.fn-stat {
  flex: 0 0 auto; margin-right: 0.95em;
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 400; font-size: 1.02rem; color: var(--muted);
  white-space: nowrap; font-feature-settings: "tnum" 1;
}
.fn-stat b { font-weight: 600; color: var(--title); }
.fn-stat__d { margin: 0 2px; color: var(--faint); }
.fn-cue {
  flex: 0 0 auto; align-self: baseline; position: relative; top: -0.02em;
  font-size: 1.25rem; line-height: 1; color: var(--faint);
  transition: transform 0.3s ease, color 0.3s ease;
}
.fn-meta { display: block; margin: 13px 0 0; padding-left: 2.7em; }
.fn-kicker {
  display: block; margin: 0 0 6px;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.fn-desc { margin: 0; max-width: 460px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.fn-link:hover .fn-name, .fn-link:hover .fn-num { color: var(--ink); }
.fn-link:hover .fn-cue { color: var(--ink); transform: translateX(6px); }
.fn-link:hover .fn-dots { border-bottom-color: var(--muted); }

/* ===================== Hobbies — editorial list ============================= */
.hob-list {
  list-style: none; margin: 44px 0 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.hob-item {
  display: grid;
  grid-template-columns: 2.7em 1fr;
  align-items: baseline;
  column-gap: 0;
  padding: 26px 2px;
  border-bottom: 1px solid var(--hair);
}
.hob-item:last-child { border-bottom: 1px solid var(--rule); }
.hob-item__no {
  grid-row: 1 / span 2;
  align-self: start;
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 400; font-size: 1.05rem; color: var(--faint); letter-spacing: 0.04em;
}
.hob-item__icon {
  font-size: 1.05rem; line-height: 1;
  margin-right: 0.55em;
  opacity: 0.9;
  vertical-align: baseline;
}
.hob-item__body { display: block; }
.hob-item__title {
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 500; font-size: 1.55rem; line-height: 1.12; letter-spacing: -0.012em;
  color: var(--title);
}
.hob-item__blurb {
  display: block; margin-top: 7px;
  max-width: 540px; color: var(--muted); font-size: 0.92rem; line-height: 1.55;
}
.hob-now {
  margin: 32px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6;
}
.hob-now__label {
  display: inline-block; margin-right: 0.8em;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink);
}

/* ===================== Travel Photos — one continuous gallery wall ==========
   A single complete album. JS (misc-gallery.js) lays it out as justified rows —
   equal-height rows, edge-to-edge, full images (no crop) — for a gallery-wall
   feel. Before/without JS it falls back to a clean frameless masonry. */
.ph-grid { columns: 3; column-gap: 12px; margin: 46px 0 0; } /* fallback masonry */
.ph-grid.is-justified {
  columns: auto; column-gap: normal;
  display: flex; flex-wrap: wrap; gap: 12px; margin: 46px 0 0;
}
.misc-photo.ph-photo {
  break-inside: avoid; margin: 0 0 12px; position: relative; overflow: hidden;
  border-radius: 0; background: none; border: none; box-shadow: none; cursor: zoom-in;
  line-height: 0; /* kill the phantom line-box the whitespace after <img> creates */
  font-size: 0;
  transition: opacity 0.3s ease;
}
.ph-grid.is-justified .misc-photo.ph-photo { margin: 0; }
.ph-photo img {
  width: 100%; display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
  filter: saturate(0.94);
}
.ph-grid.is-justified .ph-photo img { height: 100%; object-fit: cover; }
.ph-photo:hover img { transform: scale(1.04); filter: saturate(1); }
/* gallery spotlight: hovering one frame quietly dims the rest */
.ph-grid.is-justified:hover .ph-photo { opacity: 0.62; }
.ph-grid.is-justified:hover .ph-photo:hover { opacity: 1; }
.misc-photo__cap.ph-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 30px 15px 13px; color: #f4f1ea; line-height: 1.3;
  background: linear-gradient(transparent, rgba(18, 15, 10, 0.74));
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.ph-photo:hover .ph-cap { opacity: 1; transform: translateY(0); }
.ph-cap b {
  display: block; font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.01em;
}
.ph-cap span { display: block; margin-top: 3px; color: rgba(244, 241, 234, 0.72); font-size: 0.74rem; letter-spacing: 0.02em; }

.ph-empty {
  margin: 44px 0 0; padding: 64px 24px; text-align: center;
  border: 1px solid var(--rule);
}
.ph-empty__icon { display: block; font-size: 1.8rem; color: var(--faint); margin-bottom: 14px; }
.ph-empty p { margin: 0 auto; max-width: 440px; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.ph-empty code {
  font-family: "SF Mono", Monaco, "Roboto Mono", Consolas, monospace;
  font-size: 0.85em; color: var(--ink);
}

/* lightbox */
.misc-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 5vh 5vw;
  background: rgba(20, 17, 12, 0.92); cursor: zoom-out;
}
.misc-lightbox[hidden] { display: none; }
.misc-lightbox__img { max-width: 92vw; max-height: 80vh; border-radius: 2px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.misc-lightbox__cap { margin: 0; color: #e8e3d8; font-size: 0.85rem; letter-spacing: 0.01em; }
.misc-lightbox__close {
  position: absolute; top: 20px; right: 26px; background: none; border: none;
  color: #f4f1ea; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.7;
  transition: opacity 0.2s;
}
.misc-lightbox__close:hover { opacity: 1; }

/* ===================== Parks — editorial chrome ============================= */
.parks-head.fn-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-bottom: 8px;
}
.parks-head__intro { flex: 1 1 340px; }
.parks-head__intro .fn-lead { max-width: 460px; }

.parks-progress { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; padding-top: 6px; }
.parks-ring { position: relative; width: 74px; height: 74px; }
.parks-ring svg { transform: rotate(-90deg); }
.parks-ring__track { stroke: var(--ring-track); }
.parks-ring__bar { stroke: var(--ink); }
.parks-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.parks-ring__num b {
  font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
  font-weight: 500; font-size: 1.2rem; line-height: 1; color: var(--title);
}
.parks-ring__num span { font-size: 0.52rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }
.parks-stats { font-size: 0.78rem; color: var(--muted); line-height: 1.7; }
.parks-stats b { color: var(--title); font-weight: 600; font-feature-settings: "tnum" 1; }

.parks-stage { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.parks-mapcard {
  position: relative; overflow: hidden; padding: 6px; border-radius: 3px;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: none;
}
.parks-map { width: 100%; height: auto; display: block; }
.parks-maperr { color: var(--muted); font-size: 0.85rem; padding: 0.5rem; }

.parks-legend {
  position: absolute; left: 16px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted);
  padding: 7px 12px; border-radius: 2px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--card-border);
}
.parks-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sw-forest { background: var(--terr-forest); }
.sw-arid { background: var(--terr-arid); }
.sw-mtn { background: var(--terr-mtn); }
.sw-visited { background: var(--pin); }
.sw-notyet { background: transparent; border: 1.6px solid var(--muted); }

.parks-pin { cursor: pointer; transition: r 0.15s ease, fill 0.15s ease; }
.parks-pin--visited { fill: var(--pin); stroke: var(--pin-stroke); stroke-width: 1.4; }
.parks-pin--notyet { fill: none; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.5; }
.parks-pin:hover { fill: var(--ink); stroke: var(--pin-stroke); }

.parks-tip {
  position: fixed; pointer-events: none; z-index: 50; opacity: 0; transform: translate(-50%, -135%);
  background: var(--ink); color: var(--card); font-size: 0.74rem; padding: 5px 9px; border-radius: 2px;
  white-space: nowrap; transition: opacity 0.12s;
}
.parks-tip.is-on { opacity: 1; }

/* detail card (structure is injected by parks-map.js — restyle only) */
.parks-detail {
  display: flex; flex-direction: row; overflow: hidden; border-radius: 3px;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: none;
}
.parks-detail__photo { width: 320px; flex: none; aspect-ratio: 16 / 10; position: relative; display: flex; align-items: center; justify-content: center; background: var(--badge2); }
.parks-detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parks-detail__photo--empty span:last-child { font-size: 2.4rem; opacity: 0.35; }
.parks-detail__badge {
  position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--card);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
}
.parks-detail__badge--no { background: var(--muted); }
.parks-detail__body { flex: 1; padding: 18px 20px 20px; }
.parks-detail__body h3 { margin: 0 0 5px; font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--title); }
.parks-detail__where { color: var(--muted); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.parks-detail__meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 10px; }
.parks-detail__meta b { color: var(--title); }
.parks-detail__note { font-size: 0.92rem; line-height: 1.55; color: var(--ink); }

.parks-territories { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.parks-territories__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.parks-chip { font-size: 0.78rem; padding: 4px 12px; border-radius: 2px; border: 1px solid var(--card-border); background: var(--card); color: var(--ink); }
.parks-chip.is-visited { border-color: var(--ink); }
.misc-tip-note { margin-top: 22px; font-size: 0.74rem; color: var(--faint); }

/* ===================== motion / responsive ================================= */
@media (prefers-reduced-motion: reduce) {
  .fn-num, .fn-name, .fn-cue, .fn-dots, .ph-photo img, .ph-cap, .fn-back a { transition: none; }
  .fn-link:hover .fn-cue { transform: none; }
  .ph-photo:hover img { transform: none; }
}
@media (max-width: 820px) {
  .parks-detail { flex-direction: column; }
  .parks-detail__photo { width: 100%; }
  .ph-grid { columns: 2; }
}
@media (max-width: 620px) {
  .misc-root { padding: 16px 18px 26px; }
  .fn-title { font-size: 2.5rem; }
  .fn-title--sub { font-size: 2.1rem; }
  .fn-lead { font-size: 0.96rem; }
  .fn-link { padding: 24px 2px; }
  .fn-num { width: 1.9em; font-size: 0.95rem; }
  .fn-name { font-size: 1.5rem; }
  .fn-dots { margin: 0 0.6em; }
  .fn-meta { padding-left: 1.9em; }
  .fn-desc { font-size: 0.87rem; }
  .hob-item { grid-template-columns: 1.9em 1fr; padding: 22px 2px; }
  .hob-item__title { font-size: 1.35rem; }
  .ph-grid { columns: 1; }
  .parks-head.fn-head { gap: 16px; }
}