:root {
  color-scheme: light;
  --bg: #fdf6d8;
  --card-bg: #fffdf3;
  --card-bg-hover: #fff9df;
  --sub-item-bg: #f5f3ed;
  --text: #2b2b1f;
  --muted: #7a7a5c;
  --line: #b8ac7a;
  --finalized: #4a2c47;
  --finalized-border: rgba(74, 44, 71, 0.65); /* --finalized at 65% opacity, borders only */
  --tentative: #a3791c;
}

* {
  box-sizing: border-box;
}

body {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas,
    "Liberation Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  background: var(--bg);
  border-bottom: 2px solid rgba(184, 172, 122, 0.5); /* --line at 50% opacity */
  padding: 0.85rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-spacer {
  width: 1px;
}

.brand {
  justify-self: center;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
}

.nav-dropdown {
  position: relative;
}

.trips-dropdown {
  /* own flexible grid column between brand and hamburger, centered within it */
  justify-self: center;
}

.menu-dropdown {
  justify-self: end;
  margin-right: 0.6rem; /* pull the hamburger in a bit from the edge */
}

/* Both triggers share the same height so, once centered in the header row via
   align-items: center, their top/bottom edges actually line up with each other —
   letting each dropdown position itself with `top: 100%` (relative to its own
   trigger's real height) instead of a magic constant that only fit one of them. */
.trips-toggle {
  box-sizing: border-box;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
  padding: 0 0.6rem;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.trips-toggle::-webkit-details-marker {
  display: none;
}

.trips-toggle:hover {
  background: var(--card-bg-hover);
  color: var(--finalized);
}

.trips-toggle::after {
  content: " \25BE";
}

.menu-toggle {
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  width: 22px;
  height: 2rem;
  position: relative;
  border-radius: 3px;
}

.menu-toggle::-webkit-details-marker {
  display: none;
}

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform 0.15s ease, top 0.15s ease, background 0.15s ease;
}

.menu-toggle::before {
  top: 10px;
}

.menu-toggle::after {
  top: 19px;
}

.menu-toggle:hover::before,
.menu-toggle:hover::after {
  background: var(--finalized);
}

.menu-dropdown[open] .menu-toggle::before {
  top: 15px;
  transform: rotate(45deg);
}

.menu-dropdown[open] .menu-toggle::after {
  top: 15px;
  transform: rotate(-45deg);
}

.nav-dropdown ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  min-width: 12rem;
}

.nav-dropdown li a {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  border-radius: 3px;
}

.nav-dropdown li a:hover {
  background: var(--card-bg-hover);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid var(--line);
}

/* .leg-wrap is the spacing unit between timeline entries (holds .leg + its
   sub-items, so the gap before the NEXT entry accounts for both, whether or
   not sub-items are currently visible). Also the positioning + toggle context
   for .leg-stack — see note below on why it can't live inside <details>. */
.leg-wrap {
  position: relative;
  margin-bottom: 2.25rem;
}

.leg {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Decorative "card stack" behind legs that have sub-items — signals there's more
   inside before you even open it. Lives on .leg-wrap, NOT inside .leg/<details>:
   native <details> hides every non-<summary> child while closed, which is exactly
   the state these need to be VISIBLE in — putting them inside <details> made them
   invisible in both states (hidden-while-closed natively, hidden-while-open by an
   explicit rule). Sized via inset:0 against .leg-wrap, which in the closed state
   is exactly .leg's own size (.sub-items contributes 0 height when hidden).
   DOM order (stack-2, stack-1, then .leg) sets paint order too: all three are
   `position`ed (so painted after any static content, in DOM order among
   themselves) — no z-index needed, .leg naturally ends up on top. */
.leg-stack {
  position: absolute;
  inset: 0;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  pointer-events: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.leg-stack.tentative {
  border-style: dashed;
  border-color: var(--tentative);
}

.leg-stack.finalized {
  border-style: solid;
  border-color: var(--finalized-border);
}

.leg-stack-1 {
  transform: translate(6px, -6px);
}

.leg-stack-2 {
  transform: translate(12px, -12px);
}

.leg-wrap:has(.leg[open]) .leg-stack {
  display: none;
}

/* Hovering the front card fans the stack behind it out slightly too, instead of
   only the top card visibly reacting. */
.leg-wrap:has(.leg:hover) .leg-stack {
  background: var(--card-bg-hover);
}

.leg-wrap:has(.leg:hover) .leg-stack-1 {
  transform: translate(8px, -8px);
}

.leg-wrap:has(.leg:hover) .leg-stack-2 {
  /* +2px on each axis, same delta as stack-1's 6->8px — not a proportional
     scale-up, which would double the back layer's movement (see analysis). */
  transform: translate(14px, -14px);
}

.leg::before {
  /* absolute positioning measures from .leg's PADDING edge (inside its own border),
     which sits at: .timeline border (3px) + .timeline padding-left (2rem) + .leg's
     own border (2px) = 2rem + 5px in from the spine (x=0). To land the tick's left
     edge exactly on the spine with zero left overhang, left = -(2rem + 5px) exactly,
     then the full 1rem width extends only rightward from there. */
  content: "";
  position: absolute;
  left: calc(-2rem - 5px);
  top: 1.35rem;
  width: 1rem;
  height: 3px;
  border-radius: 1px;
  background: var(--muted);
  transition: transform 0.15s ease;
}

.leg:hover::before {
  /* .leg:hover shifts the whole box (and its pseudo-elements) up 2px — cancel that
     out here so the tick stays visually fixed while only the card lifts. */
  transform: translateY(2px);
}

.leg.current::before {
  background: var(--finalized);
}

.leg.past {
  opacity: 0.65;
}

.leg:hover {
  background: var(--card-bg-hover);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.leg.tentative {
  border-style: dashed;
  border-color: var(--tentative);
}

.leg.finalized {
  border-style: solid;
  border-color: var(--finalized-border);
}

.leg-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.leg.tentative .leg-badge {
  color: var(--tentative);
  border: 1px dashed var(--tentative);
}

.leg.finalized .leg-badge {
  color: var(--finalized);
  border: 1px solid var(--finalized);
}

.leg summary {
  cursor: pointer;
  list-style: none;
}

.leg summary::-webkit-details-marker {
  display: none;
}

.leg h2 {
  margin: 0 0.5rem 0.2rem 0;
  font-size: 1.1rem;
  display: inline-block;
}

.leg h2::after {
  content: " \25BE";
  font-size: 0.75em;
  color: var(--muted);
}

.leg[open] h2::after {
  content: " \25B4";
}

.leg .dates {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.leg img {
  width: 100%;
  border-radius: 4px;
  margin: 0.5rem 0;
  display: block;
}

.leg .notes {
  font-size: 0.9rem;
}

.leg .booking-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
}

.leg-details {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
}

.leg-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.9rem;
}

.leg-details dt {
  color: var(--muted);
}

.leg-details dd {
  margin: 0;
}

.leg-details .no-details {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* Sibling of .leg (not nested inside .leg-details), toggled purely via the
   native <details> [open] attribute — no JS. Reads as a separate block below
   the card, not more content inside it. */
.sub-items {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
  flex-direction: column;
  gap: 0.75rem;
}

.leg[open] ~ .sub-items {
  display: flex;
}

.sub-item {
  position: relative;
  background: var(--sub-item-bg);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.sub-item.tentative {
  border-style: dashed;
  border-color: var(--tentative);
}

.sub-item.finalized {
  border-style: solid;
  border-color: var(--finalized-border);
}

.sub-item .leg-badge {
  top: 0.6rem;
  right: 0.75rem;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
}

.sub-item-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-right: 4.5rem;
}

.sub-item-notes {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}