/* ============================================================================
   Tom's Long Strange Trip - tomslongstrangetrip.com
   A newsletter dressed up as a blog, for friends & family.

   Seven switchable editions, chosen with the button in the top right:
   Journal (default), Postcard, Pressroom, Expedition, Stillwater,
   Deep Dive, Fillmore. Colors are [data-theme] variable overrides near the
   top; structural/layout rules live in the Editions section at the bottom.
   The names below are slots, not descriptions: --cream is always the page
   background, --paper the card surface, --ink the text color, whatever their
   actual hues are in the active edition.
   ========================================================================== */

:root {
  --cream: #faf6ec;
  --paper: #fffdf6;
  --ink: #33261c;
  --ink-soft: #6f5f52;
  --terra: #c65f3a;
  --terra-deep: #a34a2a;
  --teal: #22676b;
  --teal-deep: #17494c;
  --gold: #e0a458;
  --plum: #7c4a86;
  --line: #e8dfca;
  --shadow: 0 1px 2px rgba(51, 38, 28, .06), 0 10px 28px -18px rgba(51, 38, 28, .35);
  --shadow-lift: 0 2px 4px rgba(51, 38, 28, .08), 0 18px 40px -18px rgba(51, 38, 28, .45);
  --radius: 16px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --maxw: 72rem;
  --map-bg: #e9e4d5;
  --tile-filter: saturate(.85);
  --trip-line-color: #c65f3a;
  --font-meta: var(--font-body);
  --media-filter: none;
}

/* ---- Theme: Fillmore '77 (dark concert poster) --------------------------- */
:root[data-theme="fillmore"] {
  color-scheme: dark;
  --cream: #191430;
  --paper: #242044;
  --ink: #f3edff;
  --ink-soft: #c4bbe2;
  --terra: #d95f98;
  --terra-deep: #f08bbe;
  --teal: #9d8cff;
  --teal-deep: #bcaeff;
  --gold: #f0b45a;
  --plum: #c99bff;
  --line: #3b3362;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -18px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 40px -18px rgba(0, 0, 0, .95);
  --map-bg: #14101f;
  --tile-filter: saturate(.55) brightness(.82);
  --trip-line-color: #d95f98;
}

/* ---- Edition: Postcard (airmail letter home) ----------------------------- */
:root[data-theme="postcard"] {
  color-scheme: light;
  --cream: #f7f1e3;
  --paper: #fffdf6;
  --ink: #33302a;
  --ink-soft: #6b6353;
  --terra: #c34a36;          /* airmail red */
  --terra-deep: #9d3626;
  --teal: #2c6fa8;           /* airmail blue */
  --teal-deep: #235a88;
  --gold: #d9a441;
  --plum: #8a5a7a;
  --line: #e4dbc6;
  --radius: 8px;
  --font-display: "Special Elite", "Courier New", monospace;
  --font-meta: "Special Elite", "Courier New", monospace;
  --map-bg: #e7e0cd;
  --tile-filter: sepia(.28) saturate(.85);
  --trip-line-color: #c34a36;
  --media-filter: sepia(.12);
}

/* ---- Edition: Pressroom (broadsheet newspaper) --------------------------- */
:root[data-theme="pressroom"] {
  color-scheme: light;
  --cream: #f4f1ea;
  --paper: #fbf9f4;
  --ink: #1c1b18;
  --ink-soft: #6b675d;
  --terra: #b3202c;
  --terra-deep: #8c1a24;
  --teal: #34555e;
  --teal-deep: #27424a;
  --gold: #b98a2e;
  --plum: #5c4a6b;
  --line: #d9d4c6;
  --radius: 0px;
  --shadow: none;
  --shadow-lift: none;
  --font-display: "Playfair Display", Georgia, serif;
  --map-bg: #e9e6dd;
  --tile-filter: grayscale(.92) contrast(1.04);
  --trip-line-color: #1c1b18;
  --media-filter: grayscale(.25) contrast(1.03);
}

/* ---- Edition: Expedition (field notes) ----------------------------------- */
:root[data-theme="expedition"] {
  color-scheme: light;
  --cream: #e9e1cd;
  --paper: #f4edda;
  --ink: #3a3226;
  --ink-soft: #665c46;
  --terra: #a35636;
  --terra-deep: #84432a;
  --teal: #54633f;
  --teal-deep: #46552f;
  --gold: #c09a45;
  --plum: #6d5a3a;
  --line: #d5c9a9;
  --radius: 3px;
  --shadow: 2px 3px 0 rgba(58, 50, 38, .18);
  --shadow-lift: 3px 5px 0 rgba(58, 50, 38, .22);
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-meta: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --map-bg: #e2d8bc;
  --tile-filter: sepia(.35) saturate(.8) contrast(1.02);
  --trip-line-color: #a35636;
  --media-filter: sepia(.22) contrast(1.04);
}

/* ---- Edition: Stillwater (sitting still) --------------------------------- */
:root[data-theme="stillwater"] {
  color-scheme: light;
  --cream: #f4f3ef;
  --paper: #f9f8f4;
  --ink: #33383b;
  --ink-soft: #687072;
  --terra: #6d8a7e;          /* sage as the working accent */
  --terra-deep: #55705f;
  --teal: #56675f;
  --teal-deep: #44534c;
  --gold: #b5a27e;
  --plum: #756a59;
  --line: #e3e1d8;
  --radius: 22px;
  --shadow: none;
  --shadow-lift: none;
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --map-bg: #e6e6df;
  --tile-filter: saturate(.55) brightness(1.02);
  --trip-line-color: #6d8a7e;
}

/* ---- Edition: Deep Dive (below the surface) ------------------------------ */
:root[data-theme="deepdive"] {
  color-scheme: dark;
  --cream: #0e2a33;
  --paper: #143843;
  --ink: #eaf4f4;
  --ink-soft: #9dbcc2;
  --terra: #38c5c9;          /* dive light cyan */
  --terra-deep: #7fdce0;
  --teal: #33aab5;
  --teal-deep: #8ed4da;
  --gold: #ffd27a;
  --plum: #b39ddb;
  --line: #1f4c58;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0, 10, 14, .5), 0 14px 34px -16px rgba(0, 0, 0, .65);
  --shadow-lift: 0 3px 6px rgba(0, 10, 14, .55), 0 22px 44px -16px rgba(0, 0, 0, .8);
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;
  --map-bg: #0a222a;
  --tile-filter: brightness(.78) saturate(.7) sepia(.35) hue-rotate(155deg);
  --trip-line-color: #38c5c9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  background-image: radial-gradient(1100px 500px at 50% -180px, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); }

a { color: var(--terra-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--terra); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream); padding: .6rem 1rem; z-index: 100;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Masthead & navigation
   -------------------------------------------------------------------------- */

.masthead { text-align: center; padding: 2.6rem 1rem 0; }

.masthead-inner { position: relative; max-width: var(--maxw); margin: 0 auto; }

.kicker {
  font-family: var(--font-meta);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .9rem;
}

.site-title-row {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}

.site-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
}
.site-title:hover { color: var(--terra-deep); }

.emblem { flex: none; transform: rotate(-2deg); margin-top: .4rem; }

.tagline {
  color: var(--ink-soft);
  font-style: italic;
  margin: .7rem auto 1.4rem;
  max-width: 38rem;
  font-size: 1.02rem;
}

.site-nav {
  display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.site-nav a {
  font-family: var(--font-meta);
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .48rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: all .18s ease;
}
.site-nav a:hover { color: var(--terra-deep); border-color: var(--terra); transform: translateY(-1px); }
.site-nav a.active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

/* The top-right "site version" switcher */
.theme-toggle {
  position: absolute; right: 0; top: .15rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .42rem .95rem;
  cursor: pointer;
  transition: all .18s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  color: var(--terra-deep); border-color: var(--terra);
  transform: translateY(-1px); outline: none;
}
.theme-toggle svg { display: block; }

@media (max-width: 640px) {
  .masthead { padding-top: 3.7rem; }
  .theme-toggle { top: -3rem; padding: .5rem .62rem; }
  .theme-toggle-label { display: none; }
}

.rainbow-bar {
  height: 5px;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #c65f3a 0%, #e0a458 22%, #9aa76a 45%, #22676b 68%, #7c4a86 88%, #c65f3a 100%);
  opacity: .85;
}

.trip-line { max-width: var(--maxw); margin: 0 auto; height: 26px; }
.trip-line svg { display: block; width: 100%; height: 26px; }

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 2.2rem 1.2rem 4rem; }

/* ---- home ---------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.hero-media { display: block; min-height: 300px; background: linear-gradient(135deg, var(--teal) 0%, var(--plum) 100%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media-fallback { background: linear-gradient(135deg, var(--teal) 0%, var(--plum) 100%); }

.hero-body { padding: 2.1rem 2.2rem 2rem; display: flex; flex-direction: column; justify-content: center; }

.hero-kicker {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-deep); margin: 0 0 .55rem; font-weight: 600;
}

.map-teaser {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--teal) 8%, transparent), color-mix(in srgb, var(--gold) 12%, transparent));
  border: 1px dashed color-mix(in srgb, var(--teal) 45%, transparent);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  margin-bottom: 2.4rem;
  color: var(--teal-deep);
  flex-wrap: wrap;
}

.posts { margin-bottom: 1rem; }

.year {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--terra-deep);
  margin: 1.6rem 0 1.1rem;
  display: flex; align-items: center; gap: 1rem;
}
.year::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.3rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.card-media { display: block; height: 190px; background: linear-gradient(135deg, var(--teal), var(--plum)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media-fallback {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cream) 22%, transparent), transparent 55%),
    linear-gradient(135deg, var(--teal), var(--plum));
  color: color-mix(in srgb, var(--cream) 85%, transparent);
}

.card-body { padding: 1.15rem 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.25;
  margin: 0;
}
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--terra-deep); }

.summary { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.card-more { margin: auto 0 0; }
.text-btn { text-decoration: none; font-weight: 600; font-size: .93rem; }
.text-btn:hover span { display: inline-block; transform: translateX(3px); transition: transform .18s ease; }

/* ---- shared bits ---------------------------------------------------------- */

.kicker-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .84rem; color: var(--ink-soft);
  margin: 0;
  font-family: var(--font-meta);
}
.kicker-row .date { letter-spacing: .06em; }
.kicker-row .loc { display: inline-flex; align-items: center; gap: .32rem; color: var(--teal-deep); font-weight: 600; }
.pin-ic { flex: none; margin-bottom: -1px; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--cream);
  background: var(--terra-deep);
  border: 1px solid var(--terra-deep);
  padding: .62rem 1.3rem;
  border-radius: 999px;
  transition: all .18s ease;
  width: fit-content;
}
.btn:hover { background: color-mix(in srgb, var(--terra-deep) 80%, #000); color: var(--cream); transform: translateY(-1px); }
.btn.ghost {
  background: transparent; color: var(--teal-deep);
  border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent);
}
.btn.ghost:hover { background: color-mix(in srgb, var(--teal) 9%, transparent); color: var(--teal-deep); }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
  color: var(--teal-deep);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border-radius: 999px;
  padding: .34rem .9rem;
  transition: all .18s ease;
}
.chip:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal-deep); }

.tag-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  padding: 0; margin: .2rem 0 0;
}
.tag-list li {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--plum);
  background: color-mix(in srgb, var(--plum) 10%, transparent);
  border-radius: 999px;
  padding: .18rem .7rem;
}

.empty-state {
  max-width: 34rem; margin: 4rem auto; text-align: center; color: var(--ink-soft);
}
.empty-state h1 { font-family: var(--font-display); color: var(--ink); margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   Article page
   -------------------------------------------------------------------------- */

.page-post main { max-width: 46rem; }

.post-header { margin-bottom: 1.7rem; }

.post-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: .45rem 0 .5rem;
}
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: var(--terra-deep); }

.post-meta { color: var(--ink-soft); margin: .1rem 0 .4rem; font-size: .95rem; font-family: var(--font-meta); }
.post-actions { margin: .8rem 0 0; }

.post-body { font-size: 1.08rem; }

.post-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.3em;
  float: left;
  line-height: .78;
  padding: .12em .1em 0 0;
  color: var(--terra);
}

.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 2.2rem 0 .8rem;
  letter-spacing: -.008em;
}
.post-body h2 { font-size: 1.65rem; color: var(--terra-deep); }
.post-body h3 { font-size: 1.3rem; }
.post-body h4, .post-body h5, .post-body h6 { font-size: 1.12rem; }

.post-body a { text-decoration-thickness: 1.5px; }

.post-body blockquote {
  margin: 1.8rem 0;
  padding: .35rem 0 .35rem 1.4rem;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink-soft);
}
.post-body blockquote p { margin: .4rem 0; }

.post-body figure.photo {
  margin: 2rem 0;
}
.post-body figure.photo img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: block;
}
p.caption, .post-body figcaption.caption {
  text-align: center; font-size: .86rem; font-style: italic;
  color: var(--ink-soft); margin: -1.1rem 0 1.6rem;
}

.post-body ul, .post-body ol { padding-left: 1.5rem; }
.post-body li { margin: .35rem 0; }
.post-body li::marker { color: var(--terra); font-weight: 600; }

.post-body hr {
  border: none; height: 26px; margin: 2.4rem auto; width: 60%;
  background: var(--terra);
  -webkit-mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M2 13 Q 16 3 30 13 T 58 13 T 86 13 T 114 13' fill='none' stroke='%23000' stroke-width='2.2' stroke-dasharray='1 8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M2 13 Q 16 3 30 13 T 58 13 T 86 13 T 114 13' fill='none' stroke='%23000' stroke-width='2.2' stroke-dasharray='1 8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.table-wrap table {
  border-collapse: collapse; width: 100%; font-size: .95rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.table-wrap td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tr:nth-child(even) td { background: color-mix(in srgb, var(--line) 25%, transparent); }

.post-footer {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1.2rem;
}

.pn { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pn-link {
  display: flex; flex-direction: column; gap: .15rem;
  text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: .8rem 1rem;
  transition: all .18s ease;
}
.pn-link:hover { border-color: var(--terra); transform: translateY(-2px); }
.pn-link.older { text-align: right; }
.pn-label {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.pn-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.3; }

/* --------------------------------------------------------------------------
   Map page
   -------------------------------------------------------------------------- */

.page-fullbleed main { max-width: none; padding: 0; }

.map-page { display: flex; flex-direction: column; height: 100%; }

.map-head {
  text-align: center;
  padding: 1.8rem 1rem 1.2rem;
}
.map-head .post-title { margin-bottom: .2rem; }
.map-head p { color: var(--ink-soft); margin: 0 auto; max-width: 40rem; }

.map-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  height: calc(100vh - 15.5rem);
  min-height: 480px;
}

.map-panel {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 1rem .9rem 2rem;
  background: var(--paper);
}

.map-panel-loading, .noscript-note { color: var(--ink-soft); padding: .5rem .6rem; }

.stop {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .7rem;
  padding: .85rem .6rem .9rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
}
.stop:hover, .stop:focus-visible { background: color-mix(in srgb, var(--gold) 12%, transparent); outline: none; }
.stop.active { background: color-mix(in srgb, var(--terra) 10%, transparent); }

.stop-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--cream);
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--line);
}
.stop.newest .stop-num { background: var(--gold); color: var(--ink); }

.stop-title { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.25; font-size: 1.04rem; }
.stop-meta { font-size: .8rem; color: var(--ink-soft); margin: .15rem 0 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.stop-read { font-size: .85rem; margin: .3rem 0 0; color: var(--terra-deep); font-weight: 600; text-decoration: none; }

.map-frame { position: relative; min-height: 420px; }
#map { position: absolute; inset: 0; background: var(--map-bg); }

.map-empty {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  padding: 2rem;
}
.map-empty[hidden] { display: none; }
.map-empty code {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .4rem;
}

/* Leaflet look & feel */
.leaflet-container { font-family: var(--font-body); }

/* OSM's standard colors are fully saturated; soften them toward the palette
   (dark themes dim the tiles further via --tile-filter) */
.map-frame .leaflet-tile-pane { filter: var(--tile-filter, saturate(.85)); }

.trip-pin {
  background: transparent !important; border: none !important;
}
.trip-pin .pin-disc {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--cream);
  background: var(--teal);
  border: 2.5px solid var(--paper);
  box-shadow: 0 2px 8px rgba(51, 38, 28, .4);
  transition: transform .15s ease;
}
.trip-pin.newest .pin-disc { background: var(--gold); color: var(--ink); }
.trip-pin:hover .pin-disc, .trip-pin.selected .pin-disc { transform: scale(1.22); background: var(--terra-deep); color: var(--cream); }
.trip-pin.selected.newest .pin-disc { background: var(--terra-deep); }

.postcard-popup .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.postcard-popup .leaflet-popup-content { margin: .9rem 1.1rem; font-family: var(--font-body); line-height: 1.5; }
.postcard-popup .pop-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin: 0 0 .2rem; }
.postcard-popup .pop-meta { font-size: .8rem; color: var(--ink-soft); margin: 0 0 .45rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.postcard-popup .pop-summary { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.postcard-popup .pop-link { font-weight: 600; font-size: .9rem; }
.postcard-popup .leaflet-popup-tip { background: var(--paper); border: 1px solid var(--line); }
.postcard-popup a.leaflet-popup-close-button { color: var(--ink-soft); }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--cream) 88%, transparent) !important;
  color: var(--ink-soft) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--teal-deep) !important; }
.leaflet-bar a {
  background: var(--paper) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about { max-width: 46rem; margin: 0 auto; }
.about-body h2 {
  font-family: var(--font-display); color: var(--terra-deep);
  font-size: 1.6rem; margin: 2.4rem 0 .8rem;
}
.about-body h2:first-child { margin-top: .5rem; }
.about-body .signature { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--terra-deep); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 2.2rem 1rem 2.6rem;
  margin-top: 2rem;
}
.page-map .site-footer { margin-top: 0; }
.footer-rose { opacity: .85; margin-bottom: .4rem; }
.footer-note { margin: 0 0 .5rem; font-style: italic; color: var(--ink-soft); }
.fine { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.fine a { color: var(--teal-deep); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 220px; max-height: 300px; }
  .hero-body { padding: 1.6rem 1.4rem 1.7rem; }

  .map-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(340px, 52vh) auto;
    height: auto;
  }
  .map-frame { order: -1; min-height: 340px; height: 52vh; position: relative; }
  #map { position: absolute; inset: 0; }
  .map-panel { border-right: none; border-top: 1px solid var(--line); max-height: 45vh; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .pn { grid-template-columns: 1fr; }
  .pn-link.older { text-align: left; }
  .emblem { width: 52px; height: auto; }
  .site-nav a { padding: .42rem .9rem; font-size: .8rem; }
}

/* --------------------------------------------------------------------------
   Print - make every article a nice letter
   -------------------------------------------------------------------------- */

@media print {
  /* whichever theme is active, paper is paper */
  :root, :root[data-theme] {
    --cream: #fff; --paper: #fff; --ink: #000; --ink-soft: #444;
    --terra: #000; --terra-deep: #000; --teal: #000; --teal-deep: #000;
    --gold: #555; --plum: #000; --line: #bbb; --map-bg: #fff;
  }
  body { background: #fff; font-size: 12pt; }
  .masthead, .site-nav, .site-footer, .post-footer, .post-actions, .skip { display: none !important; }
  main { max-width: none; padding: 0; }
  .post-body figure.photo img { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   Editions — structural variations per theme (layout, type voice, edges,
   textures, button behavior). Colors live in the [data-theme] blocks up top;
   everything here is shape and movement. Slain by prefers-reduced-motion
   above, which always wins.
   ========================================================================== */

.hero-media img, .card-media img, .post-body figure.photo img {
  filter: var(--media-filter, none);
}

/* ---- Fillmore: a little marquee glow ------------------------------------- */
[data-theme="fillmore"] .site-title {
  text-shadow: 0 0 26px rgba(240, 139, 190, .38);
}
/* ink is the light color here; the gold "newest" disc needs the dark tone */
[data-theme="fillmore"] .stop.newest .stop-num,
[data-theme="fillmore"] .trip-pin.newest .pin-disc { color: var(--cream); }

/* ---- Postcard: perforations, tilt, airmail stripes ----------------------- */
[data-theme="postcard"] .rainbow-bar {
  background: repeating-linear-gradient(-45deg,
    #c34a36 0 14px, #f7f1e3 14px 26px, #2c6fa8 26px 40px, #f7f1e3 40px 52px);
  opacity: 1;
}
[data-theme="postcard"] .site-title { text-shadow: 2px 2px 0 rgba(195, 74, 54, .16); }
[data-theme="postcard"] .card { position: relative; border: 1px solid #d9cdb2; }
[data-theme="postcard"] .card::before {           /* perforation strip */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; z-index: 1;
  background: radial-gradient(circle at 6px 3.5px, var(--cream) 3px, transparent 3.6px);
  background-size: 12px 7px;
  background-repeat: repeat-x;
}
[data-theme="postcard"] .card:nth-child(odd) { transform: rotate(-.7deg); }
[data-theme="postcard"] .card:nth-child(even) { transform: rotate(.55deg); }
[data-theme="postcard"] .card:hover { transform: rotate(0deg) translateY(-3px); }
[data-theme="postcard"] .card-media { border-bottom: 1px dashed #d9cdb2; }
[data-theme="postcard"] .site-nav a { border-style: dashed; }
[data-theme="postcard"] .btn { border-style: dashed; border-width: 2px; }
[data-theme="postcard"] .btn:hover { transform: rotate(-1.2deg) translateY(-1px); }
[data-theme="postcard"] .chip { border-style: dashed; }
[data-theme="postcard"] .tag-list li { border: 1px dashed color-mix(in srgb, var(--plum) 45%, transparent); }
[data-theme="postcard"] figure.photo img {
  border: 10px solid var(--paper);
  outline: 1px dashed #d9cdb2;
  transform: rotate(-.5deg);
}

/* ---- Pressroom: rules instead of shadows, articles as front-page rows ----- */
[data-theme="pressroom"] .rainbow-bar, [data-theme="pressroom"] .trip-line { display: none; }
[data-theme="pressroom"] .masthead-inner {
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1.2rem;
}
[data-theme="pressroom"] .kicker {
  color: var(--ink);
  display: inline-block;
  padding: 0 .8rem .35rem;
  border-bottom: 1px solid var(--ink);
  letter-spacing: .3em;
}
[data-theme="pressroom"] .site-title { font-weight: 900; text-transform: uppercase; }
[data-theme="pressroom"] .site-nav {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: .55rem 0; gap: 1.7rem; margin-top: 1.3rem; flex-wrap: nowrap;
}
[data-theme="pressroom"] .site-nav a {
  border: none; background: none; border-radius: 0;
  padding: .1rem 0; letter-spacing: .22em;
}
[data-theme="pressroom"] .site-nav a:hover {
  transform: none; color: var(--terra-deep);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
[data-theme="pressroom"] .site-nav a.active {
  background: none; color: var(--terra-deep);
  border-bottom: 3px solid var(--terra); border-radius: 0;
}
[data-theme="pressroom"] .hero { border: 1px solid var(--ink); }
[data-theme="pressroom"] .hero-body { border-left: 1px solid var(--line); }
[data-theme="pressroom"] .cards-grid { grid-template-columns: 1fr; gap: 0; }
[data-theme="pressroom"] .card {
  flex-direction: row; gap: 0;
  border: none; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 1.5rem 0;
}
[data-theme="pressroom"] .card:hover { transform: none; box-shadow: none; }
[data-theme="pressroom"] .card-media { width: 240px; height: auto; min-height: 175px; flex: none; border: 1px solid var(--line); }
[data-theme="pressroom"] .card-body { padding: 0 0 0 1.7rem; }
[data-theme="pressroom"] .card-title { font-size: 1.72rem; font-weight: 800; }
[data-theme="pressroom"] .card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-theme="pressroom"] .year { color: var(--ink); font-weight: 800; }
[data-theme="pressroom"] .btn { border-radius: 0; background: var(--ink); border-color: var(--ink); }
[data-theme="pressroom"] .btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); transform: none; }
[data-theme="pressroom"] .chip { border-radius: 0; }
[data-theme="pressroom"] .pn-link { border-radius: 0; box-shadow: none; }
[data-theme="pressroom"] .pn-link:hover { transform: none; border-color: var(--terra); }
[data-theme="pressroom"] figure.photo img { border-radius: 0; box-shadow: none; border: 1px solid var(--ink); }
[data-theme="pressroom"] .table-wrap table { border-color: var(--ink); }
[data-theme="pressroom"] .stop { border-radius: 0; }
[data-theme="pressroom"] .trip-pin .pin-disc { border-radius: 0; }
@media (max-width: 640px) {
  [data-theme="pressroom"] .card { flex-direction: column; }
  [data-theme="pressroom"] .card-media { width: 100%; height: 190px; min-height: 0; }
  [data-theme="pressroom"] .card-body { padding: 1rem 0 0; }
  [data-theme="pressroom"] .hero-body { border-left: none; border-top: 1px solid var(--line); }
}

/* ---- Expedition: field-patch cards, stitched borders, press-down buttons -- */
[data-theme="expedition"] body {
  background-image:
    radial-gradient(1100px 500px at 50% -180px, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(90, 107, 69, .055) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(90, 107, 69, .055) 34px 35px);
}
[data-theme="expedition"] .site-title { text-transform: uppercase; letter-spacing: .04em; }
[data-theme="expedition"] .kicker { color: var(--terra-deep); }
[data-theme="expedition"] .rainbow-bar {
  background: repeating-linear-gradient(90deg,
    var(--teal) 0 46px, var(--gold) 46px 92px, var(--terra) 92px 138px, var(--ink) 138px 141px);
  opacity: .9;
}
[data-theme="expedition"] .site-nav a {
  border-radius: 0; border-width: 1.5px;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .74rem;
}
[data-theme="expedition"] .site-nav a.active { background: var(--teal); border-color: var(--teal-deep); color: var(--paper); }
[data-theme="expedition"] .card { border: 2px solid var(--ink); position: relative; }
[data-theme="expedition"] .card::after {          /* stitching */
  content: ""; position: absolute; inset: 5px; z-index: 1;
  border: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 2px; pointer-events: none;
}
[data-theme="expedition"] .card:hover { transform: translateY(-2px); }
[data-theme="expedition"] .card-title { text-transform: uppercase; letter-spacing: .035em; font-weight: 600; }
[data-theme="expedition"] .year { text-transform: uppercase; letter-spacing: .12em; font-size: 1.2rem; }
[data-theme="expedition"] .post-title { text-transform: uppercase; line-height: 1.15; }
[data-theme="expedition"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; box-shadow: 2px 3px 0 rgba(58, 50, 38, .25); }
[data-theme="expedition"] .btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); transform: translateY(2px); box-shadow: none; }
[data-theme="expedition"] .tag-list li { border-radius: 0; border: 1px dashed color-mix(in srgb, var(--plum) 55%, transparent); }
[data-theme="expedition"] .chip { border-radius: 0; }
[data-theme="expedition"] figure.photo img { border-radius: 0; border: 1.5px solid var(--ink); }
[data-theme="expedition"] .theme-toggle { border-radius: 0; font-family: var(--font-meta); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---- Stillwater: hairlines, circle thumbnails, slow air ------------------- */
[data-theme="stillwater"] body { font-size: 18.5px; line-height: 1.85; background-image: none; }
[data-theme="stillwater"] * { transition-duration: .5s; }
[data-theme="stillwater"] .kicker { letter-spacing: .42em; }
[data-theme="stillwater"] .site-title { font-weight: 500; }
[data-theme="stillwater"] .rainbow-bar {
  height: 2px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--teal) 30%, var(--gold) 70%, transparent);
  border-radius: 0;
}
[data-theme="stillwater"] .trip-line { opacity: .4; }
[data-theme="stillwater"] .site-nav a {
  border: none; background: none; padding: .3rem .7rem;
  letter-spacing: .26em; font-size: .78rem;
}
[data-theme="stillwater"] .site-nav a:hover { transform: none; color: var(--terra-deep); }
[data-theme="stillwater"] .site-nav a.active {
  background: none; color: var(--ink);
  text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px;
}
[data-theme="stillwater"] .hero { grid-template-columns: 1fr; border: none; background: transparent; box-shadow: none; }
[data-theme="stillwater"] .hero-media { display: none; }
[data-theme="stillwater"] .hero-body { padding: .4rem 1rem 1.6rem; align-items: center; text-align: center; }
[data-theme="stillwater"] .cards-grid { grid-template-columns: 1fr; gap: 0; max-width: 46rem; margin: 0 auto; }
[data-theme="stillwater"] .card {
  flex-direction: row; align-items: center; gap: 1.5rem;
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
  padding: 1.7rem 0;
}
[data-theme="stillwater"] .card:hover { transform: none; box-shadow: none; }
[data-theme="stillwater"] .card:hover .card-title a { color: var(--terra-deep); }
[data-theme="stillwater"] .card-media { width: 96px; height: 96px; min-height: 0; border-radius: 50%; flex: none; }
[data-theme="stillwater"] .card-media-fallback { border-radius: 50%; }
[data-theme="stillwater"] .card-body { padding: 0; gap: .3rem; }
[data-theme="stillwater"] .card-title { font-size: 1.52rem; font-weight: 600; }
[data-theme="stillwater"] .summary { font-size: 1.02rem; }
[data-theme="stillwater"] .year { justify-content: center; color: var(--teal-deep); }
[data-theme="stillwater"] .btn {
  background: transparent; color: var(--terra-deep);
  border: 1px solid color-mix(in srgb, var(--terra) 55%, transparent);
}
[data-theme="stillwater"] .btn:hover { background: color-mix(in srgb, var(--terra) 12%, transparent); transform: none; }
[data-theme="stillwater"] figure.photo img { border-radius: 18px; box-shadow: none; }
@keyframes stillwater-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
[data-theme="stillwater"] .theme-toggle:hover {
  animation: stillwater-breathe 3.4s ease-in-out infinite;
  transform: none;
}
@media (max-width: 560px) {
  [data-theme="stillwater"] .card { gap: 1.1rem; }
  [data-theme="stillwater"] .card-media { width: 72px; height: 72px; }
}

/* ---- Deep Dive: under the surface ----------------------------------------- */
[data-theme="deepdive"] body {
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(56, 197, 201, .16), transparent 70%),
    linear-gradient(180deg, #0c2831 0%, #0e2a33 45%, #0a2029 100%);
}
[data-theme="deepdive"] .site-title {
  background: linear-gradient(90deg, #7fdce0, #38c5c9 45%, #ffd27a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-theme="deepdive"] .site-title:hover { color: transparent; }
[data-theme="deepdive"] .kicker { color: var(--terra); }
[data-theme="deepdive"] .rainbow-bar {
  background: linear-gradient(90deg, #38c5c9, #2e9aa6 35%, #b39ddb 70%, #ffd27a);
  opacity: .9;
}
[data-theme="deepdive"] .hero,
[data-theme="deepdive"] .card {
  background: color-mix(in srgb, #ffffff 6%, transparent);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
[data-theme="deepdive"] .hero-media-fallback,
[data-theme="deepdive"] .card-media-fallback {
  background: linear-gradient(135deg, #0f4a56, #3a2c63);
}
[data-theme="deepdive"] .card:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 220, 224, .5);
  box-shadow: 0 0 24px -6px rgba(56, 197, 201, .35);
}
[data-theme="deepdive"] .site-nav a {
  background: color-mix(in srgb, #ffffff 5%, transparent);
  border-color: rgba(255, 255, 255, .14);
  color: var(--ink-soft);
}
[data-theme="deepdive"] .site-nav a.active {
  background: color-mix(in srgb, #38c5c9 22%, transparent);
  color: #eaffff; border-color: rgba(56, 197, 201, .5);
}
[data-theme="deepdive"] .btn {
  background: linear-gradient(120deg, #33aab5, #38c5c9);
  border-color: #14707a;
  box-shadow: 0 4px 16px -6px rgba(56, 197, 201, .5);
}
[data-theme="deepdive"] .btn:hover {
  box-shadow: 0 6px 22px -4px rgba(56, 197, 201, .65);
  filter: brightness(1.08);
}
/* ink is the light color here; the gold "newest" disc needs the dark tone */
[data-theme="deepdive"] .stop.newest .stop-num,
[data-theme="deepdive"] .trip-pin.newest .pin-disc { color: var(--cream); }
[data-theme="deepdive"] .chip { background: color-mix(in srgb, #38c5c9 10%, transparent); border-color: rgba(56, 197, 201, .4); }
[data-theme="deepdive"] .theme-toggle {
  background: color-mix(in srgb, #ffffff 6%, transparent);
  border-color: rgba(255, 255, 255, .16);
}
[data-theme="deepdive"] .map-layout, [data-theme="deepdive"] .map-panel { background: #0d2a33; }
[data-theme="deepdive"] .stop:hover, [data-theme="deepdive"] .stop:focus-visible {
  background: color-mix(in srgb, #38c5c9 10%, transparent);
}
[data-theme="deepdive"] .postcard-popup .leaflet-popup-content-wrapper {
  background: rgba(16, 48, 58, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
}
[data-theme="deepdive"] .postcard-popup .leaflet-popup-tip { background: rgba(16, 48, 58, .93); }
[data-theme="deepdive"] .stop-num { box-shadow: 0 0 0 3px #0d2a33, 0 0 0 4.5px var(--line); }
[data-theme="deepdive"] figure.photo img { border-color: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   Snow report (Mt. Shasta Ski Park)
   -------------------------------------------------------------------------- */

.snow-page { max-width: 62rem; margin: 0 auto; padding: 2.2rem 1rem 3.5rem; }

.snow-head { text-align: center; padding: 1.6rem 0 1.4rem; }
.snow-head .post-title { margin-bottom: .3rem; }
.snow-head p { color: var(--ink-soft); margin: 0 auto; max-width: 40rem; }

.snow-card { padding: 1.7rem 1.8rem 1.4rem; display: flex; flex-direction: column; gap: 1.25rem; }
.snow-card:hover { transform: none; }  /* a report, not a post card - it doesn't lift */

.snow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.snow-stat {
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border: 1px solid var(--line);
  border-radius: max(0px, calc(var(--radius) - 6px));
  padding: .85rem 1rem .75rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.snow-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.15; }
.snow-stat .lbl { font-family: var(--font-meta); font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-soft); }

.snow-terrain { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.2rem, 1fr)); gap: .8rem; }
.snow-tile { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.snow-tile .k { font-family: var(--font-meta); font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-soft); }
.snow-tile .v { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }
.snow-tile .of { font-family: var(--font-meta); font-weight: 400; font-size: .78rem; color: var(--ink-soft); }
.snow-bar { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.snow-bar i { display: block; height: 100%; background: var(--terra); }

.snow-lines { border-top: 1px dashed var(--line); padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.snow-line { display: flex; gap: .7rem; font-size: .97rem; }
.snow-line .k { flex: none; width: 5.4rem; font-family: var(--font-meta); font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-soft); padding-top: .35em; }
.snow-line .v { color: var(--ink); }
.snow-weather .temp { font-family: var(--font-display); font-weight: 700; margin-right: .45rem; }
.snow-weather .forecast { color: var(--ink-soft); }

.snow-meta {
  border-top: 1px solid var(--line); padding-top: .85rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; justify-content: space-between;
  font-family: var(--font-meta); font-size: .82rem; color: var(--ink-soft);
}
.snow-meta time { font-style: italic; }
.snow-links { display: inline-flex; gap: 1.1rem; align-items: baseline; }
.snow-links .text-btn { font-family: var(--font-meta); font-size: .82rem; }
#snow-refresh { background: none; border: none; padding: 0; cursor: pointer; color: var(--teal-deep); }
#snow-refresh:hover { color: var(--terra); }

.snow-off { text-align: center; padding: 1.2rem .6rem; }
.snow-off-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 .5rem; }
.snow-off p:last-child { margin: 0 auto; max-width: 34rem; color: var(--ink-soft); }

@media (max-width: 680px) {
  .snow-stats { grid-template-columns: 1fr; }
  .snow-card { padding: 1.25rem 1.1rem 1.1rem; }
}

[data-theme="postcard"] .snow-stat, [data-theme="postcard"] .snow-lines { border-style: dashed; }
[data-theme="pressroom"] .snow-stat { background: #f2efe7; }
[data-theme="expedition"] .snow-card { border: 2px solid var(--ink); }
[data-theme="deepdive"] .snow-card, [data-theme="fillmore"] .snow-card {
  background: color-mix(in srgb, var(--cream) 55%, transparent);
}
/* postcard/pressroom/stillwater restyle every .card; the report keeps its
   stacked panel shape (this section sits last, so it wins the tie) */
[data-theme] .snow-card { flex-direction: column; align-items: stretch; padding: 1.7rem 1.8rem 1.4rem; }