/* Traveling Willbillies — family travel book
   Warm journal, mobile-first, print-friendly */

:root {
  --paper: #f6f0e6;
  --paper-2: #efe6d4;
  --paper-3: #e7dcc6;
  --card: #fffdf8;
  --ink: #2b241c;
  --ink-soft: #5a5146;
  --ink-faint: #8a7f70;
  --rule: #d4c6ae;
  --rule-strong: #c4b394;
  --gold: #a67c3a;
  --gold-soft: #f3e6c8;

  --cruise: #163544;
  --cruise-mid: #2a5f73;
  --cruise-soft: #d7e8ee;
  --cruise-ink: #0f2a36;

  --land: #8a3d2c;
  --land-mid: #3f5a38;
  --land-soft: #f4e2d4;
  --land-ink: #3d2118;

  --rv: #b67a16;
  --rv-mid: #5f6d32;
  --rv-soft: #f6e9c4;
  --rv-ink: #3d2e0c;

  --ok: #3d6b3a;
  --ok-soft: #e4f0dc;
  --warn: #8a5a16;
  --idea: #5a4a78;
  --idea-soft: #ece6f4;
  --plan: #2a5f73;
  --booked: #3d6b3a;
  --done: #5a5146;

  --shadow: 0 10px 28px rgba(43, 36, 28, 0.08);
  --shadow-sm: 0 2px 8px rgba(43, 36, 28, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --max: 72rem;
  --nav-h: 4.25rem;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 4.5rem);
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(166, 124, 58, 0.08), transparent 50%),
    radial-gradient(900px 400px at 100% 0%, rgba(42, 95, 115, 0.06), transparent 46%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; }
a { color: inherit; }

main {
  flex: 1 0 auto;
}
.site-footer { flex-shrink: 0; }

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  z-index: 100;
}
.skip:focus { top: 0.75rem; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, white);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.brand-sub {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}
.nav a {
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: var(--ink-soft);
}
.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--paper-2);
  color: var(--ink);
}
.nav a[aria-current="page"] { font-weight: 650; }

.nav-toggle {
  display: none;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink);
}

@media (max-width: 640px) {
  .wrap, main, .panel, .section, .share-bar, .trip-hero, .header-inner {
    overflow-x: clip;
    max-width: 100%;
  }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0.75rem 0.85rem;
  }
  .nav.is-open { display: flex; }
}

/* ===== Layout ===== */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem 1.1rem 3rem;
}

.hero {
  padding: 1.6rem 0 0.6rem;
}
.kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.45rem;
}
.hero h1,
.page-title {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(2rem, 5vw, 3.3rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 0.6rem;
}
.lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 1.4rem;
}

.section {
  margin: 2.2rem 0;
}
.section h2,
.card h2,
.panel h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.section-head h2 { margin: 0; }
.section-link {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ===== Cards / grids ===== */
.grid {
  display: grid;
  gap: 1rem;
}
.grid-3 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.2rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
}
a.card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-thumb {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.55rem;
  display: block;
  background: var(--paper-2);
}

.card .meta,
.meta {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0.35rem 0 0.6rem;
}

.card p { margin: 0.4rem 0 0; color: var(--ink-soft); }
.card h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  margin: 0.35rem 0 0;
  letter-spacing: -0.02em;
}

/* Type ribbons */
.type-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.type-cruise { background: var(--cruise-soft); color: var(--cruise); }
.type-land { background: var(--land-soft); color: var(--land); }
.type-motorhome { background: var(--rv-soft); color: var(--rv-ink); }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  background: var(--gold-soft);
  color: #6d4e16;
  border: 1px solid #e4d09a;
}
.badge-example { background: #fff4cc; color: #6a4e00; }

.status {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.status-idea { background: var(--idea-soft); color: var(--idea); }
.status-planning { background: var(--cruise-soft); color: var(--plan); }
.status-booked { background: var(--ok-soft); color: var(--booked); }
.status-done { background: var(--paper-3); color: var(--done); }

/* Type cards on home */
.type-card {
  position: relative;
  overflow: hidden;
  min-height: 11.5rem;
  color: #fffdf8;
}
.type-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 30%;
  height: 8rem;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.type-card.cruise { background: linear-gradient(155deg, var(--cruise) 0%, var(--cruise-mid) 100%); }
.type-card.land { background: linear-gradient(155deg, var(--land) 0%, var(--land-mid) 100%); }
.type-card.motorhome { background: linear-gradient(155deg, #8a5a12 0%, var(--rv-mid) 100%); }
.type-card h3 { color: #fff; font-size: 1.5rem; }
.type-card p { color: rgba(255,253,248,0.86); }
.type-card .kicker { color: rgba(255,253,248,0.7); }

/* ===== Filters ===== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 1.1rem;
}
.chip {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}
.chip[aria-pressed="true"],
.chip.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ===== Trip pages ===== */
.trip-hero {
  border-radius: 22px;
  padding: 1.4rem 1.3rem 1.5rem;
  color: #fffdf8;
  margin-bottom: 1.3rem;
  position: relative;
  overflow: hidden;
}
.trip-hero.cruise { background: linear-gradient(145deg, #102833, var(--cruise-mid)); }
.trip-hero.land { background: linear-gradient(145deg, #5c261c, #4a6a42); }
.trip-hero.motorhome { background: linear-gradient(145deg, #6d4a10, #5f6d32); }
.trip-hero .kicker { color: rgba(255,253,248,0.72); }
.trip-hero h1 { margin: 0.15rem 0 0.45rem; }
.trip-hero .lede { color: rgba(255,253,248,0.88); margin-bottom: 0.7rem; }
.trip-hero .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.share-strip {
  background: var(--card);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
}
.share-strip h2 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.share-strip p { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: 0.98rem; }
.view-toggle {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.view-toggle button {
  font-family: var(--font-ui);
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--ink);
}
.view-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.family-only { }
body[data-view="friends"] .family-only { display: none; }
body[data-view="friends"] .friends-note { display: block; }
.friends-note { display: none; }

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.3rem;
  margin: 0 0 1rem;
}
.panel.family-only { border-left: 4px solid var(--gold); }

.fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .fields-2 { grid-template-columns: 1fr 1fr; }
  .fields-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.field {
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 12px;
  padding: 0.65rem 0.8rem 0.75rem;
}
.field dt {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.15rem;
}
.field dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
}
.field.blank dd { color: var(--ink-faint); font-style: italic; font-family: var(--font-body); font-size: 0.98rem; }

/* Tables */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
th, td {
  text-align: left;
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 650;
}
.day-cards { display: grid; gap: 0.75rem; }
.day-card {
  background: var(--paper);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
}
.day-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; font-family: var(--font-display); }
.day-card .when { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-soft); }

/* Checklists */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { margin: 0; }
.checklist label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.45rem 0.15rem;
  border-bottom: 1px solid var(--paper-2);
  cursor: pointer;
}
.checklist input {
  margin-top: 0.28rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ok);
}
.checklist label:has(input:checked) span {
  text-decoration: line-through;
  color: var(--ink-faint);
}

.prompt {
  background: var(--gold-soft);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  color: #4d3a14;
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
}
.note {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.how-box {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.4), rgba(255,253,248,0.1)),
    var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 1.2rem 1.25rem;
}
.how-box ol { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.how-box li { margin: 0.35rem 0; }

/* Wiki */
.wiki-card .icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.4rem 1.1rem 2rem;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.site-footer a { color: var(--ink); }

/* Empty / muted */
.muted { color: var(--ink-soft); }
.small { font-size: 0.92rem; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.6rem 0;
}

/* Print */
@media print {
  body { background: #fff; font-size: 11pt; }
  .site-header, .site-footer, .nav-toggle, .filters, .view-toggle, .share-strip { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .trip-hero, .card, .panel, .type-card { box-shadow: none; break-inside: avoid; }
  .trip-hero { color: #111; background: #eee !important; border: 1px solid #ccc; }
  .family-only { display: block !important; }
  a { text-decoration: none; }
}

/* Decorative map dots on home */
.compass {
  width: 3.2rem;
  height: 3.2rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--gold);
  margin-bottom: 0.8rem;
  background: var(--gold-soft);
}

/* ===== Buttons & share bar ===== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.btn,
.btn-ghost {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 0.48rem 0.9rem;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.2;
}
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn:hover { filter: brightness(1.08); }
.btn-ghost:hover { background: var(--paper-2); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-fb { background: var(--card); border-color: var(--rule-strong); color: var(--ink); }

.share-bar {
  position: sticky;
  top: calc(var(--nav-h) - 0.4rem);
  z-index: 30;
  background: color-mix(in srgb, var(--card) 92%, white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  margin: 0 0 1.1rem;
  box-shadow: var(--shadow-sm);
}
.share-bar p {
  margin: 0 0 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.share-bar .now-view {
  font-weight: 650;
  color: var(--ink);
}

.share-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}
.audience {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.audience code {
  font-size: 0.8rem;
  background: var(--paper-2);
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
}

.caption-box {
  width: 100%;
  min-height: 7.5rem;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 0.85rem;
}
.caption-box:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

details.how {
  margin-top: 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.55rem 0.85rem 0.7rem;
  background: var(--paper);
}
details.how summary {
  font-family: var(--font-ui);
  font-weight: 650;
  cursor: pointer;
}
details.how ol { margin: 0.45rem 0 0; padding-left: 1.2rem; }
details.how li { margin: 0.25rem 0; }

.toast {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  z-index: 80;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}
.toast.is-on {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.album-url {
  word-break: break-all;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

@media print {
  .share-bar, .share-card, .btn-row, .toast { display: none !important; }
}

/* ===== Quality lift: fluid type, tables, gallery ===== */
:root {
  --step--1: clamp(0.78rem, 0.72rem + 0.28vw, 0.9rem);
  --step-0: clamp(1.02rem, 0.96rem + 0.32vw, 1.16rem);
  --step-1: clamp(1.2rem, 1.04rem + 0.72vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.18rem + 1.35vw, 2.1rem);
  --step-3: clamp(2rem, 1.35rem + 2.4vw, 3.15rem);
  --step-4: clamp(2.55rem, 1.45rem + 3.8vw, 4.35rem);
}

body {
  font-size: var(--step-0);
  background-image:
    radial-gradient(1200px 500px at 10% -10%, rgba(166, 124, 58, 0.08), transparent 50%),
    radial-gradient(900px 400px at 100% 0%, rgba(42, 95, 115, 0.06), transparent 46%),
    linear-gradient(var(--paper), var(--paper));
}

.hero h1,
.page-title,
.trip-hero h1 { font-size: var(--step-4); font-style: italic; font-weight: 560; }
.section h2,
.panel h2,
.card h2 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); font-style: italic; }

.brand {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-mark { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-style: italic; }

.masthead {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(12rem, 32vw, 20rem);
  margin: 0 0 1.6rem;
  box-shadow: var(--shadow);
}
.masthead img {
  width: 100%;
  height: clamp(12rem, 32vw, 20rem);
  object-fit: cover;
  display: block;
}
.masthead .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,36,28,0.05), rgba(43,36,28,0.55));
}
.masthead .copy {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.1rem;
  color: #fffdf8;
}
.masthead .copy h1 { color: #fffdf8; font-style: italic; margin: 0 0 0.35rem; }
.masthead .copy p { margin: 0; max-width: 36rem; color: rgba(255,253,248,0.9); }
.masthead .copy .kicker { color: rgba(255,253,248,0.8); }

.trip-hero {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.trip-hero .cover {
  min-height: clamp(10rem, 28vw, 16rem);
  background-size: cover;
  background-position: center;
}
.trip-hero .copy { padding: 1.3rem 1.25rem 1.45rem; }
.trip-hero.cruise .cover { background-image: url("images/alaska-1.svg"); }
.trip-hero.land .cover { background-image: url("images/smoky-1.svg"); }
.trip-hero.motorhome .cover { background-image: url("images/parkway-1.svg"); }

.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-ui);
  margin: 0.4rem 0 1.1rem;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-strong), transparent);
}

/* Data tables */
.table-wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  margin: 0.4rem 0 0.2rem;
}
table.data {
  width: 100%;
  min-width: 38rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--step--1);
}
table.data th,
table.data td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  background: var(--card);
}
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-2);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  border-bottom: 2px solid var(--rule-strong);
}
table.data tbody tr:nth-child(even) th,
table.data tbody tr:nth-child(even) td { background: var(--paper); }
table.data tbody tr:nth-child(odd) th,
table.data tbody tr:nth-child(odd) td { background: var(--card); }
table.data tbody tr:hover th,
table.data tbody tr:hover td { background: var(--gold-soft); }
table.data th:first-child,
table.data td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 650;
  box-shadow: 4px 0 8px rgba(43,36,28,0.04);
}
table.data thead th:first-child { z-index: 3; }
table.data tbody th {
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: 650;
}
table.data .check-cell { width: 2.4rem; text-align: center; }
table.data caption {
  caption-side: bottom;
  text-align: left;
  padding: 0.55rem 0.75rem 0.7rem;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.9rem;
}
table.data [contenteditable="true"] {
  min-height: 1.15em;
  border-radius: 4px;
  font: inherit;
  color: inherit;
}
table.data [contenteditable="true"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  background: var(--card);
}
table.data [contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 400;
}
.table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin: 0.55rem 0 0.15rem;
}
.table-tools .note { margin: 0; font-size: 0.86rem; }
.filter-label { margin-bottom: 0.35rem; }
.share-more .btn-row,
.share-more .view-toggle { margin-top: 0.55rem; }
.album-heading { margin-top: 1.2rem; }
.btn-row.stack { margin-top: 0.7rem; }
.section > .note { margin-top: 0.85rem; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.polaroid {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.45rem 0.45rem 0.65rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: rotate(var(--tilt, 0deg));
}
.polaroid:nth-child(3n) { --tilt: -0.6deg; }
.polaroid:nth-child(3n+1) { --tilt: 0.5deg; }
.polaroid:nth-child(3n+2) { --tilt: -0.2deg; }
.polaroid button.thumb {
  border: 0;
  padding: 0;
  background: #d8cbb8;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
}
.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid figcaption,
.polaroid .cap {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-soft);
  width: 100%;
  border: 0;
  background: transparent;
  font-style: italic;
}
.polaroid .cap:focus { outline: 1px dashed var(--gold); }
.polaroid .cap::placeholder { color: var(--ink-faint); }
.polaroid .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}
.polaroid .kill {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}

.dropzone {
  margin-top: 0.9rem;
  border: 2px dashed var(--rule-strong);
  border-radius: 16px;
  padding: 1.1rem 1rem;
  text-align: center;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-ui);
}
.dropzone.is-over {
  background: var(--gold-soft);
  border-color: var(--gold);
}
.dropzone input[type="file"] { display: none; }
.dropzone .pick { margin-top: 0.55rem; }

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 70rem);
  width: 96vw;
}
.lightbox::backdrop { background: rgba(20, 16, 12, 0.82); }
.lightbox-inner {
  background: #14110e;
  color: #f6f0e6;
  border-radius: 12px;
  overflow: hidden;
}
.lightbox-inner img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #0c0a08;
  display: block;
}
.lightbox-bar {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.9rem 0.85rem;
  font-family: var(--font-ui);
}
.lightbox-bar p { margin: 0; font-style: italic; }

.site-footer {
  background:
    linear-gradient(180deg, transparent, rgba(43,36,28,0.04)),
    var(--paper-2);
  padding: 1.8rem 1.1rem 2.4rem;
}
.site-footer strong { color: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 560; }

@media print {
  .masthead { break-inside: avoid; }
  .dropzone, .lightbox, .polaroid .kill, .share-bar { display: none !important; }
  .polaroid { transform: none; box-shadow: none; break-inside: avoid; }
  table.data { min-width: 0; font-size: 9.5pt; }
  table.data th:first-child, table.data td:first-child { position: static; }
}

/* ===== Brief §6 — tonight’s tightening ===== */
.lede { max-width: 40rem; }
.wiki-prose, .panel > p, .panel > ul, .panel > ol { max-width: 66ch; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.chip:focus-visible,
.view-toggle button:focus-visible,
.table-wrap:focus-visible,
.dropzone:focus-within,
.lightbox button:focus-visible,
.btn:focus-visible,
.btn-ghost:focus-visible,
.nav a:focus-visible,
.nav-toggle:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.table-wrap:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.table-wrap:focus:not(:focus-visible) { outline: none; }
table.data { font-variant-numeric: tabular-nums; }
table.data a { scroll-margin-top: 2.5rem; }
table.data thead th { box-shadow: 0 1px 0 var(--rule-strong); }

.trip-hero .cover-img {
  width: 100%;
  height: clamp(10rem, 28vw, 16rem);
  object-fit: cover;
  display: block;
}

.share-wide { display: none; margin-top: 0.55rem; }
.share-more {
  margin-top: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.share-more summary { cursor: pointer; font-weight: 650; color: var(--ink-soft); }
@media (min-width: 720px) {
  .share-wide { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
  .share-more { display: none; }
}

.pull-quote {
  margin: 0 0 1.3rem;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--gold);
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pull-quote figcaption {
  margin-top: 0.45rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.legend span.status { margin-right: 0.2rem; }

.empty-state {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media print {
  .share-bar, .share-card, .dropzone, .lightbox, .polaroid .kill,
  .no-print, [data-print-trip], .table-tools { display: none !important; }
  .family-only { display: block !important; }
}


/* ===== QA pass (seam, contrast, share, cards, wiki) ===== */

h2,
.panel,
.section,
[id] {
  scroll-margin-top: 6rem;
}

.kicker {
  color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink));
}
.kicker.filter-label { color: var(--ink); }
.hero .kicker {
  color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink));
}

th,
table.data thead th {
  color: var(--ink);
}
.field dt {
  color: var(--ink-soft);
}

.masthead {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(16rem, 42vw, 26rem);
}
.masthead img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.masthead .shade {
  background:
    linear-gradient(180deg,
      rgba(43, 36, 28, 0.22) 0%,
      rgba(43, 36, 28, 0.28) 32%,
      rgba(43, 36, 28, 0.55) 58%,
      rgba(43, 36, 28, 0.78) 82%,
      rgba(43, 36, 28, 0.88) 100%);
  z-index: 1;
}
.masthead .copy {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  padding: 4.2rem 1.35rem 1.45rem;
}
.masthead .copy .kicker,
.trip-hero .kicker {
  color: #fffdf8;
  text-shadow: 0 1px 8px rgba(43, 36, 28, 0.45);
}
.masthead .copy h1,
.masthead .copy p {
  text-shadow: 0 1px 12px rgba(43, 36, 28, 0.35);
}
.type-card .kicker {
  color: rgba(255, 253, 248, 0.92);
}

.trip-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(16rem, 40vw, 24rem);
  padding: 0;
}
.trip-hero .cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 32%;
  z-index: 0;
}
.trip-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(16, 22, 18, 0.12) 0%,
      rgba(16, 22, 18, 0.18) 34%,
      rgba(16, 22, 18, 0.58) 72%,
      rgba(16, 22, 18, 0.84) 100%);
}
.trip-hero .copy {
  position: relative;
  z-index: 2;
  padding: 4.4rem 1.3rem 1.5rem;
}
.trip-hero .lede { color: rgba(255, 253, 248, 0.94); }

.btn.btn-fb,
.btn-ghost.btn-fb,
.btn-fb {
  background: var(--card);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn.btn-fb:hover,
.btn-ghost.btn-fb:hover,
.btn-fb:hover {
  background: var(--paper-2);
  border-color: var(--gold);
  color: var(--ink);
  filter: none;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--paper-3);
  color: var(--ink-soft);
  border: 1px dashed var(--rule-strong);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}

.share-wide { display: none !important; }
.share-more {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--rule);
}
.share-more summary {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.88rem;
}
.share-more .note {
  margin: 0.45rem 0 0.6rem;
  max-width: 42rem;
}
.share-more .btn-row { margin-top: 0.35rem; }
@media (min-width: 720px) {
  .share-wide { display: none !important; }
  .share-more { display: block; }
}

#trip-list > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
#trip-list .card .card-thumb {
  width: 100%;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
}
#trip-list .card h3 {
  min-height: 2.56em;
  line-height: 1.28;
  width: 100%;
}
#trip-list .card .meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "when status"
    "where status";
  column-gap: 0.55rem;
  row-gap: 0.12rem;
  min-height: 3.85rem;
  width: 100%;
  align-items: start;
  flex-wrap: unset;
}
#trip-list .card .meta > span:nth-child(1) { grid-area: when; }
#trip-list .card .meta > span:nth-child(2) {
  grid-area: where;
  min-height: 2.4em;
  line-height: 1.35;
}
#trip-list .card .meta > .status { grid-area: status; }
#trip-list .card > p:last-of-type {
  width: 100%;
  margin-top: 0.45rem;
  min-height: 3.3em;
}

.wiki-card .icon {
  color: var(--ink);
}
.wiki-card .icon svg {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}

.polaroid-cluster {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 10rem;
  margin: 0 0 1.5rem;
  pointer-events: none;
}
.polaroid-cluster .polaroid {
  width: 7.6rem;
  padding: 0.35rem 0.35rem 1.1rem;
  position: relative;
}
.polaroid-cluster .polaroid:nth-child(1) {
  transform: rotate(-9deg) translateY(0.55rem);
  z-index: 1;
}
.polaroid-cluster .polaroid:nth-child(2) {
  transform: rotate(1.5deg) translateY(-0.45rem);
  z-index: 3;
  margin: 0 -1rem;
}
.polaroid-cluster .polaroid:nth-child(3) {
  transform: rotate(8deg) translateY(0.4rem);
  z-index: 2;
}
.polaroid-cluster img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  background: #d8cbb8;
}

.note-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.note-badge .badge { flex: none; }
.note-badge > span { min-width: 0; }

@media print {
  .masthead img,
  .trip-hero .cover-img { position: static; height: 8rem; }
  .trip-hero::after,
  .masthead .shade { display: none; }
  .polaroid-cluster { display: none; }
}

/* ===== Last polish: land contrast, paper kickers already above ===== */
.type-card.land {
  background:
    linear-gradient(165deg, rgba(36, 16, 12, 0.3), rgba(16, 20, 14, 0.36)),
    linear-gradient(155deg, var(--land) 0%, var(--land-mid) 100%);
}
.type-card.land p {
  color: #fff8ee;
}

@media print {
  body { display: block; min-height: 0; }
  main { flex: none; }
}


/* ===== Travel Plans: Flying / RV aliases + book forms ===== */

.type-flying { background: var(--land-soft); color: var(--land); }
.type-rv { background: var(--rv-soft); color: var(--rv-ink); }
.type-card.flying {
  background:
    linear-gradient(165deg, rgba(36, 16, 12, 0.3), rgba(16, 20, 14, 0.36)),
    linear-gradient(155deg, var(--land) 0%, var(--land-mid) 100%);
}
.type-card.flying p { color: #fff8ee; }
.type-card.rv { background: linear-gradient(155deg, #8a5a12 0%, var(--rv-mid) 100%); }
.trip-hero.flying { background: linear-gradient(145deg, #5c261c, #4a6a42); }
.trip-hero.rv { background: linear-gradient(145deg, #6d4a10, #5f6d32); }

.brand-mark {
  font-size: clamp(1.02rem, 0.88rem + 0.7vw, 1.32rem);
  max-width: 18rem;
}
.brand-plans { font-weight: 500; }

.masthead-tools,
.hero-photo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin: 0.15rem 0 1.2rem;
  font-family: var(--font-ui);
}
.masthead-tools { margin-top: -0.35rem; }
.masthead-tools .note,
.hero-photo-tools .note { margin: 0; flex: 1 1 100%; }
.hero-photo-tools input[type="file"],
.masthead-tools input[type="file"],
.pick input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.album-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.album-field input[type="url"],
.field input[type="url"] {
  flex: 1 1 12rem;
  width: 100%;
  min-width: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}
.album-field input[type="url"]:focus,
.field input[type="url"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.album-field input.is-invalid,
.field input.is-invalid {
  border-color: #9a3b2f;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

body.examples-hidden [data-example] { display: none !important; }

.form-stack {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
.form-stack label {
  font-family: var(--font-ui);
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}
.form-stack input[type="text"],
.form-stack input[type="date"],
.form-stack select,
.form-stack textarea {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.req {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.type-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.type-picks label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--font-ui);
  font-weight: 650;
  cursor: pointer;
}
.type-picks label:has(input:checked) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dest-extra { margin-top: 0.45rem; }

table.data-wide { min-width: 68rem; }
table.data select,
table.data input[type="text"] {
  width: 100%;
  min-width: 5.5rem;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  padding: 0.22rem 0.35rem;
}
table.data select:focus,
table.data input[type="text"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.checklist [contenteditable="true"] {
  min-width: 8rem;
  border-radius: 4px;
}
.checklist [contenteditable="true"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin: 0.55rem 0 0;
}

.prose-edit {
  min-height: 4.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper);
}
.prose-edit:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.prose-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-style: italic;
}

.field [contenteditable="true"] {
  min-height: 1.2em;
  border-radius: 4px;
}
.field [contenteditable="true"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.status-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin: 0.35rem 0 0;
  font-family: var(--font-ui);
}
.status-picker select {
  font: inherit;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  background: var(--card);
  color: var(--ink);
}

.ask-grok {
  margin-top: 0.75rem;
}

@media print {
  .masthead-tools, .hero-photo-tools, .list-tools, .status-picker,
  [data-hide-examples], .form-stack button { display: none !important; }
}

fieldset.type-picks {
  border: 0;
  padding: 0;
  margin: 0 0 0.25rem;
}
fieldset.type-picks legend {
  padding: 0;
  margin-bottom: 0.45rem;
  width: 100%;
}
.field .status-picker { margin-top: 0.2rem; }

/* ===== Road Trip type + editable home + stack cards ===== */

:root {
  --road: #9a4e2a;
  --road-mid: #6e3a22;
  --road-soft: #f5e3d4;
  --road-ink: #3d1f14;
}

.type-road { background: var(--road-soft); color: var(--road); }
.type-card.road {
  background:
    linear-gradient(165deg, rgba(36, 16, 12, 0.28), rgba(16, 20, 14, 0.3)),
    linear-gradient(155deg, var(--road) 0%, var(--road-mid) 100%);
}
.type-card.road p { color: #fff8ee; }
.trip-hero.road { background: linear-gradient(145deg, #5c261c, #7a3a22); }

.visually-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.yn, fieldset.yn { position: relative; overflow: hidden; }
.table-wrap .visually-hidden { clip-path: inset(50%); }

.card-link,
.card-meta-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card .card-link { width: 100%; }
.card [contenteditable="true"] { cursor: text; border-radius: 4px; }
.card [contenteditable="true"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.masthead .copy h1[contenteditable],
.masthead .copy p[contenteditable],
.trip-hero [contenteditable] {
  border-radius: 6px;
}
.masthead .copy [contenteditable]:hover,
.trip-hero [contenteditable]:hover {
  outline: 1px dashed rgba(255, 253, 248, 0.45);
}
.masthead .copy [contenteditable]:focus,
.trip-hero [contenteditable]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stack-list {
  display: grid;
  gap: 1rem;
}
.stack-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0.95rem 1.05rem 1.05rem;
}
.stack-card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0 0 0.7rem;
}
.stack-card .fields { margin: 0; }
.field-wide { grid-column: 1 / -1; }
.stack-card .field dd input,
.stack-card .field dd select,
.stack-card .field dd textarea {
  width: 100%;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.05rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  min-height: 1.35em;
}
.stack-card .field dd input:focus,
.stack-card .field dd select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-radius: 4px;
}
.stack-card input.activity-name {
  min-height: 2.6em;
  font-size: 1.2rem;
}
.cost-field {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.cost-field::before {
  content: "$";
  font-family: var(--font-ui);
  color: var(--ink-soft);
}
.yn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.yn label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  cursor: pointer;
}
.yn input[type="radio"] {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  background: transparent;
  flex: none;
}
.yn input[type="radio"]:checked {
  background: var(--ink);
  box-shadow: inset 0 0 0 3px var(--card);
  border-color: var(--ink);
}
.yn input[type="radio"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.is-hidden { display: none !important; }
.cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.cat-row select { flex: 1 1 10rem; min-width: 8rem; }
.cat-row input[data-new-cat] {
  flex: 1 1 8rem;
  min-width: 7rem;
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  background: var(--card) !important;
  padding: 0.28rem 0.5rem !important;
}
.itin-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 650;
  margin: 0 0 0.7rem;
  cursor: pointer;
}
.stack-tools,
.stack-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  margin: 0.65rem 0 0;
}
.stack-card-tools { margin-top: 0.75rem; }
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.todo-item {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--paper-2);
}
.todo-main {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.todo-check { display: inline-flex; margin-top: 0.2rem; }
.todo-check input {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--ink-soft);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.todo-check input:checked {
  background: var(--ok);
  border-color: var(--ok);
  box-shadow: inset 0 0 0 2px var(--card);
}
.todo-text {
  flex: 1;
  min-height: 1.35em;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1.08rem;
}
.todo-notes {
  margin-left: 1.8rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.todo-text:focus,
.todo-notes:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.todo-text:empty::before,
.todo-notes:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-style: italic;
}
.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--ink-faint);
}

table.data .yn {
  flex-wrap: nowrap;
}

@media print {
  .stack-tools, .stack-card-tools, [data-add-cat], [data-new-cat] { display: none !important; }
}

article.card[data-trip] {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
article.card[data-trip]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
#family-trip-grid > .card,
#rearview-grid > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
#family-trip-grid .card .card-thumb,
#rearview-grid .card .card-thumb {
  width: 100%;
}

/* ===== Phone vs iPad =====
   Phones (≤640): stack tools, wrap copy, no page overflow.
   iPad (≥641): keep side-by-side tools and 2–3 column grids. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
img, svg, video { max-width: 100%; height: auto; }
.wrap, .share-bar, .panel, .card, .trip-hero, .masthead, .hero-photo-tools,
.masthead-tools, .album-field, .btn-row, .form-stack, .field, .note {
  min-width: 0;
  max-width: 100%;
}
.note, .share-bar-lead, .share-bar p, .lede, .hero-photo-tools .note, p, li, dd, h1, h2, h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
input, select, textarea {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.btn, .btn-ghost {
  white-space: normal;
  max-width: 100%;
}

@media (max-width: 640px) {
  .header-inner {
    gap: 0.55rem;
  }
  .brand-mark {
    font-size: 1.02rem;
  }
  .hero-photo-tools,
  .masthead-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-photo-tools .pick,
  .hero-photo-tools > .btn-ghost,
  .hero-photo-tools .album-field,
  .masthead-tools .pick {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 2.75rem;
    text-align: center;
  }
  .album-field {
    flex-direction: column;
    align-items: stretch;
  }
  .album-field input[type="url"],
  .field input[type="url"],
  .field input,
  .field select,
  .form-stack input,
  .form-stack select,
  .form-stack textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .btn-row.share-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .btn-row.share-primary .btn,
  .btn-row.share-primary .btn-ghost {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.5rem;
  }
  .section-actions,
  .list-tools,
  .stack-tools,
  .stack-card-tools,
  .cat-row {
    flex-wrap: wrap;
    min-width: 0;
  }
  .cat-row select {
    flex: 1 1 100%;
    min-width: 0;
  }
}

@media (min-width: 641px) {
  .hero-photo-tools {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn-row.share-primary {
    display: flex;
    flex-wrap: wrap;
  }
}


/* ===== Family account / sync ===== */
.twb-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
.twb-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 650;
}
.twb-who { color: var(--ink-soft); }
.twb-login-link, .twb-signout {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.2rem 0.35rem;
  text-decoration: underline;
  cursor: pointer;
}
.twb-auth-wrap { max-width: 28rem; }
.twb-auth-card label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  margin: 0.7rem 0;
}
.twb-auth-card input, .twb-auth-card select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  font: inherit;
}
.twb-mod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.7rem;
  margin-top: 0.4rem;
}
.twb-mod { font-family: var(--font-ui); font-size: 0.88rem; }
.twb-mod input { width: auto; display: inline; margin-right: 0.3rem; }
.twb-err { color: #8a3d2c; }
.twb-lock-note { background: var(--gold-soft); padding: 0.6rem 0.8rem; border-radius: 10px; }
body.twb-readonly [contenteditable="true"] { caret-color: transparent; }
@media (max-width: 390px) {
  .header-inner { padding-left: 0.7rem; padding-right: 0.7rem; }
}