/* ==========================================================================
   The Latus Adventures — shared stylesheet
   Calendar palette and layout carried over from the Pacific Northwest plan.
   ========================================================================== */

:root{
  /* one accent per section — used by the tiles, the pills and the nav */
  --k-road:#3d7fb5;
  --k-weekend:#c07a2c;
  --k-backpacking:#4e9e77;
  --k-trail:#7a63b8;
  --k-scouting:#c0503b;
  --k-recipes:#b5464f;

  /* calendar categories */
  --act:#cdeadb;   --act-b:#4e9e77;
  --meal:#fad7d2;  --meal-b:#d4796d;
  --drive:#d6dcf5; --drive-b:#6b78c4;
  --lodge:#e3e3e1; --lodge-b:#9a9a96;
  --park:#d3e6f7;  --park-b:#3d7fb5;
  --note:#fde3bd;  --note-b:#d99a3c;
  --opt:#f2f1ed;   --opt-b:#a8a29a;

  /* neutrals */
  --ink:#1f2124;
  --mute:#6b7075;
  --line:#dcdee1;
  --line2:#eff0f2;
  --paper:#faf9f7;
  --green:#2f6b4f;
  --green-bg:#e6f3ec;

  --hour:84px;
  --gutter:60px;

  /* the page runs the full width of the screen — this is the breathing room at
     the edges. Individual blocks of prose still cap themselves at a readable
     measure (see .prose and .hero p), so only the grids get wider. */
  --pad:32px;

  /* sticky stack: the nav sits on top, the trip tab bar under it. The agenda's
     day headers park below both, so these have to stay in sync with reality. */
  --navh:56px;
  --tabh:45px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/* column layout so the footer sits on the bottom edge when a page is short,
   and simply follows the content when it is long */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

a{color:inherit}

/* ---------- top navigation ---------- */
.nav{
  position:sticky; top:0; z-index:100; min-height:var(--navh);
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:6px;
  padding:0 var(--pad);
}
.nav .brand{
  font-size:15.5px; font-weight:700; letter-spacing:-.015em;
  text-decoration:none; margin-right:14px; white-space:nowrap;
}
.nav .brand span{color:var(--green)}
.nav a.item{
  text-decoration:none; font-size:13.5px; font-weight:600; color:var(--mute);
  padding:8px 10px; border-radius:7px; white-space:nowrap;
}
.nav a.item:hover{background:#f3f3f1; color:var(--ink)}
.nav a.item.on{color:var(--ink); background:#f3f3f1}
.nav a.item small{
  font-size:12px; font-weight:600; opacity:.6; margin-left:2px;
  font-variant-numeric:tabular-nums;
}
.nav .navlinks{display:flex; align-items:center; gap:1px}
.navtoggle{display:none}

/* ---------- page header ---------- */
header.page{padding:26px var(--pad) 16px; border-bottom:1px solid var(--line); background:#fff}
header.page .inner{max-width:none}
h1{margin:0 0 5px; font-size:22px; font-weight:600; letter-spacing:-.015em}
.sub{color:var(--mute); font-size:13.5px}
.crumb{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
       font-weight:700; margin-bottom:8px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.legend{display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:14px}
.legend span{display:flex; align-items:center; gap:6px; font-size:12.5px; color:#54585c}
.sw{width:14px; height:14px; border-radius:3px; display:inline-block; flex:none}

.toggle{display:flex; margin-top:16px; border:1px solid var(--line); border-radius:8px;
        overflow:hidden; width:fit-content; background:#f3f3f1}
.toggle button{
  border:0; background:transparent; padding:8px 18px; font:inherit; font-size:13.5px;
  font-weight:600; color:var(--mute); cursor:pointer;
}
.toggle button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- generic section wrapper ---------- */
.wrap{max-width:none; padding:26px var(--pad)}
.wrap.wide{max-width:none}
h2.sec{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  font-weight:700; margin:0 0 12px;
}
.prose{max-width:74ch; font-size:15px; line-height:1.62}
.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose b{font-weight:600}

.card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px}

/* fact strip on a trip page */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
       gap:10px; margin-top:18px}
.fact{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 14px;
}
.fact .k{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
         color:var(--mute); font-weight:700}
.fact .v{font-size:16px; font-weight:600; margin-top:3px; letter-spacing:-.01em}

/* ---------- AGENDA ---------- */
.agenda{max-width:none; padding:22px var(--pad) 10px}
/* no overflow:hidden here — it would turn the card into a scroll container
   and break the sticky day header */
.daycard{background:#fff; border:1px solid var(--line); border-radius:12px;
         margin-bottom:16px}
.dhead{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line2); background:#fcfcfb;
  border-radius:11px 11px 0 0;
  position:sticky; top:calc(var(--navh) + var(--tabh)); z-index:5;
}
.dhead .n{font-size:15px; font-weight:700; letter-spacing:-.01em}
.dhead .w{font-size:13px; color:var(--mute)}
.dhead .p{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--green);
          background:var(--green-bg); padding:3px 10px; border-radius:20px}
.row{display:flex; border-bottom:1px solid var(--line2); align-items:stretch}
.row:last-child{border-bottom:0; border-radius:0 0 11px 11px}
.row .t{
  flex:none; width:118px; padding:11px 12px 11px 18px; font-size:12.5px;
  color:var(--mute); font-variant-numeric:tabular-nums; line-height:1.35;
}
.row .bar{flex:none; width:4px; margin:9px 0; border-radius:3px}
.row .c{padding:11px 18px 11px 13px; flex:1; min-width:0}
.row .c b{display:block; font-weight:600; font-size:14px; line-height:1.32}
.row .c i{display:block; font-style:normal; color:var(--mute); font-size:12.5px; margin-top:2px}
.row.optional{background:#fbfaf8}
.row.optional .c b{font-weight:500}
.chip{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.07em;
      border:1px dashed var(--opt-b); color:#7d776e; border-radius:4px;
      padding:1px 5px; margin-right:6px; vertical-align:1.5px}
.flag{display:inline-block; background:#c0392b; color:#fff; border-radius:3px;
      font-size:9.5px; font-weight:700; padding:1px 5px; margin-right:6px;
      vertical-align:1.5px; letter-spacing:.04em}

/* ---------- WEEK GRID ---------- */
.weekwrap{padding:12px var(--pad) 0; max-width:none}
.weeklabel{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
           color:var(--mute); margin:0 0 7px 4px; font-weight:700;
           display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.scrollhint{text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; opacity:.75}
/* scrolls both ways: sideways through the days, and down through the hours when
   the day will not compress far enough to fit the window. Height is capped by
   trip.js so the sideways scrollbar is always on screen. */
.scroller{overflow:auto; border:1px solid var(--line); border-radius:10px;
          background:#fff; margin-bottom:16px; overscroll-behavior:contain}
/* one continuous grid: seven day columns fill the scroller, the rest scroll into
   view. --daycol is set by trip.js from the measured width. */
.cal{width:max-content; --daycol:200px}
.cal.fits{width:100%}
/* top:0 — .scroller is an overflow container, so this sticks to the scroller,
   not to the viewport. Any other value just pushes the header down. */
.headrow{display:grid; border-bottom:1px solid var(--line); background:#fff;
         position:sticky; top:0; z-index:30;
         box-shadow:0 1px 0 var(--line), 0 6px 12px -9px rgba(0,0,0,.3)}
.headrow .corner{border-right:1px solid var(--line); background:#fff;
                 position:sticky; left:0; z-index:40}
/* the hour gutter has to sit under the day headers where the two overlap */
.times{z-index:20}
.dayhead{padding:10px 9px 11px; text-align:center; border-right:1px solid var(--line); background:#fff}
.dayhead:last-child{border-right:none}
.dayhead.off{background:#f7f7f5}
.dayhead.off .dow, .dayhead.off .dnum{color:#b8bbbe}
.col.off{background:var(--paper)}
.dow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); font-weight:600}
.dnum{font-size:clamp(18px,1.5vw,25px); font-weight:500; margin-top:1px; line-height:1.1}
.dloc{font-size:clamp(10.5px,.78vw,12.5px); color:var(--green); margin-top:4px; font-weight:600; line-height:1.25}
.body{display:grid; position:relative}
.times{border-right:1px solid var(--line); background:#fff;
       position:sticky; left:0; z-index:20}
.times div{height:var(--hour); font-size:11px; color:var(--mute); text-align:right;
           padding-right:8px; transform:translateY(-6px); font-weight:500}
/* the first label has no gridline above it to hang off — keep it inside the box */
.times div:first-child{transform:none; padding-top:3px}
.col{border-right:1px solid var(--line); position:relative}
.col:last-child{border-right:none}
.col .h{height:var(--hour); border-bottom:1px solid var(--line2)}
.ev{position:absolute; border-radius:5px; padding:4px clamp(4px,.45vw,8px); overflow:hidden;
    border-left:4px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.07);
    min-height:20px}
.ev b{display:block; font-weight:600; font-size:clamp(10.5px,.82vw,12.5px); line-height:1.28}
.ev u{display:block; text-decoration:none; font-size:clamp(9.5px,.72vw,11.5px); font-weight:600;
      opacity:.6; margin-top:2px; font-variant-numeric:tabular-nums}
.ev i{display:block; font-style:normal; opacity:.75; font-size:clamp(9.5px,.7vw,11.5px);
      margin-top:2px; line-height:1.3}

/* ---- how much of a block shows ----------------------------------------
   trip.js measures each block after layout and tags it. Whatever will not fit
   is dropped whole, and what is left is clamped, so nothing is ever cut off
   half way through a line. These rules must stay after the base .ev rules
   above or the display:block declarations win the cascade. */

/* every level clamps, so a narrow lane truncates cleanly instead of spilling */
.ev b{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ev i{-webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden}

/* the two halves of an overnight stay: square the edge where it runs off the
   bottom of one day and picks up again at the top of the next */
.ev.evening{border-bottom-left-radius:0; border-bottom-right-radius:0}
.ev.morning{border-top-left-radius:0; border-top-right-radius:0; opacity:.72}
.ev.morning u{display:none}

/* the recipe marker is absolutely placed, so it costs no height and stays put
   at every fit level — keep it out of the display:none rules below */
.ev .recdot{
  position:absolute; top:2px; right:2px; width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--k-recipes); opacity:.8;
}
.ev .recdot svg{width:11px; height:11px; fill:none; stroke:currentColor;
                stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ev .recdot:hover{opacity:1; background:rgba(255,255,255,.75)}
.ev.hasrec b{padding-right:15px}

/* lvl1 — one line: the start time folds into the title */
.ev.lvl1{padding-top:2px; padding-bottom:2px}
.ev.lvl1 u, .ev.lvl1 i, .ev.lvl1 a.reclink{display:none}
.ev.lvl1 b{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(10px,.75vw,11.5px); line-height:1.25;
}
.ev.lvl1 b::before{content:attr(data-t) " · "; opacity:.62}

/* lvl2 — one line of title plus the time range */
.ev.lvl2 i, .ev.lvl2 a.reclink{display:none}
.ev.lvl2 b{-webkit-line-clamp:1}

/* lvl3 — everything except the subtitle */
.ev.lvl3 i{display:none}
.ev.lvl3 b{-webkit-line-clamp:2}

/* Scoped to .ev on purpose. These were bare class selectors, which meant every
   element reusing the same vocabulary — the map markers, the list dots — picked
   up the pale calendar-block background and rendered as a coloured square. */
.ev.act{background:var(--act); border-left-color:var(--act-b)}
.ev.meal{background:var(--meal); border-left-color:var(--meal-b)}
.ev.drive{background:var(--drive); border-left-color:var(--drive-b)}
.ev.lodge{background:var(--lodge); border-left-color:var(--lodge-b)}
.ev.park{background:var(--park); border-left-color:var(--park-b)}
.ev.note{background:var(--note); border-left-color:var(--note-b)}
.ev.opt{background:var(--opt); border:1px dashed var(--opt-b); border-left:4px dashed var(--opt-b); color:#5f594f}

/* ---------- BUDGET ---------- */
.budget{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:20px}
.btile{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
       border-top:4px solid var(--line)}
.btile.lodging{border-top-color:var(--park-b)}
.btile.food{border-top-color:var(--meal-b)}
.btile.activities{border-top-color:var(--act-b)}
.btile.transportation{border-top-color:var(--drive-b)}
.btile.total{border-top-color:var(--ink); background:#fff}
.btile .k{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
          color:var(--mute); font-weight:700}
.btile .v{font-size:23px; font-weight:600; margin-top:5px; letter-spacing:-.02em;
          font-variant-numeric:tabular-nums}
.btile .pp{font-size:12px; color:var(--mute); margin-top:3px}

table.cost{width:100%; border-collapse:collapse; background:#fff;
           border:1px solid var(--line); border-radius:12px; overflow:hidden}
table.cost caption{
  text-align:left; padding:13px 18px; font-size:13px; font-weight:700;
  background:#fcfcfb; border-bottom:1px solid var(--line2);
}
table.cost td{padding:10px 18px; border-bottom:1px solid var(--line2); vertical-align:top}
table.cost tr:last-child td{border-bottom:0}
table.cost td.desc b{display:block; font-weight:600; font-size:13.5px}
table.cost td.desc i{display:block; font-style:normal; color:var(--mute); font-size:12.5px; margin-top:2px}
table.cost td.amt{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
                  font-weight:600; font-size:13.5px; width:1%}
table.cost tr.sum td{background:#fcfcfb; font-weight:700; border-top:1px solid var(--line)}
.costwrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
          gap:16px; align-items:start}
.tag{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em;
     padding:1px 6px; border-radius:4px; vertical-align:1.5px; margin-right:6px}
.tag.booked{background:var(--green-bg); color:var(--green)}
.tag.est{background:#f2f1ed; color:#7d776e}

/* ---------- HOME ---------- */
.hero{background:#fff; border-bottom:1px solid var(--line); padding:52px var(--pad) 44px}
.hero .inner{max-width:none}
.hero h1{font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:-.03em; margin-bottom:12px}
/* no measure cap here — the hero text already sits in a half-width grid
   column, so capping it again just left a gap between it and the photo */
.hero p{font-size:16.5px; line-height:1.6; color:#4b5054; margin:0 0 12px}
.hero p:last-of-type{margin-bottom:0}
/* the hero's split: text and stats on the left, cover picture on the right */
.herosplit{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px; align-items:stretch;
}
@media (max-width:980px){
  .herosplit{grid-template-columns:1fr; gap:20px}
  .herosplit .tripcover.empty{min-height:200px; aspect-ratio:16/9}
}

/* a handful of fact boxes that should sit at their natural width rather than
   stretch across the whole row the way a trip header's six do */
.facts.compact{display:flex; flex-wrap:wrap}
.facts.compact .fact{min-width:150px}

.next{
  background:linear-gradient(135deg,#1f3a2e,#2f6b4f); color:#fff; border-radius:14px;
  padding:26px 28px; margin-bottom:8px; display:flex; flex-wrap:wrap;
  gap:18px; align-items:center;
}
.next .k{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; opacity:.75; font-weight:700}
.next h3{margin:5px 0 6px; font-size:25px; font-weight:600; letter-spacing:-.02em}
.next p{margin:0; opacity:.85; font-size:14px}
.next .cta{
  margin-left:auto; background:#fff; color:#1f3a2e; text-decoration:none;
  font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:9px; white-space:nowrap;
}
.next .cta:hover{background:#eaf3ee}
.countdown{font-variant-numeric:tabular-nums}

/* upcoming trips beyond the next one */
.alsonext{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
          gap:12px; margin-top:12px}
a.planned{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--green); border-radius:12px; padding:14px 16px;
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
a.planned:hover{transform:translateY(-2px); box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
a.planned .k{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
             color:var(--mute); font-weight:700}
a.planned .n{display:block; font-size:16px; font-weight:600; margin-top:4px; letter-spacing:-.015em}
a.planned .w{display:block; font-size:12.5px; color:var(--mute); margin-top:3px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
a.trip{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; transition:border-color .12s, transform .12s, box-shadow .12s;
}
a.trip:hover{border-color:#bfc3c7; transform:translateY(-2px); box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
a.trip .yr{font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--mute)}
a.trip .nm{font-size:16.5px; font-weight:600; margin-top:4px; letter-spacing:-.015em}
a.trip .ds{font-size:12.5px; color:var(--mute); margin-top:5px; line-height:1.4}
a.trip .badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
a.trip .badge{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  padding:2px 8px; border-radius:20px; background:#f2f1ed; color:#7d776e;
}
a.trip .badge.up{background:var(--green-bg); color:var(--green)}
a.trip .badge.draft{background:#fdf1dd; color:#96631a}

/* which section a trip belongs to */
.pill{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; border-radius:20px; border:1px solid currentColor;
  opacity:.85; background:#fff;
}
.pill.road{color:var(--k-road)}
.pill.weekend{color:var(--k-weekend)}
.pill.backpacking{color:var(--k-backpacking)}
.pill.trail{color:var(--k-trail)}
.pill.scouting{color:var(--k-scouting)}

/* ---------- SECTION TILES ---------- */
.sections{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
a.sectile{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; border-top:4px solid var(--line);
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
a.sectile:hover{transform:translateY(-2px); box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
a.sectile .n{font-size:16px; font-weight:600; letter-spacing:-.015em}
a.sectile .c{font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
             color:var(--mute); margin-top:4px}
a.sectile .b{font-size:12.5px; color:var(--mute); margin-top:8px; line-height:1.45}
a.sectile.road{border-top-color:var(--k-road)}
a.sectile.weekend{border-top-color:var(--k-weekend)}
a.sectile.backpacking{border-top-color:var(--k-backpacking)}
a.sectile.trail{border-top-color:var(--k-trail)}
a.sectile.scouting{border-top-color:var(--k-scouting)}
a.sectile.recipes{border-top-color:var(--k-recipes)}

/* ---------- RECIPES ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.chips .chip{
  border:1px solid var(--line); background:#fff; border-radius:20px;
  padding:7px 15px; font:inherit; font-size:13px; font-weight:600;
  color:var(--mute); cursor:pointer;
}
.chips .chip:hover{border-color:#bfc3c7; color:var(--ink)}
.chips .chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chips .chip small{opacity:.6; margin-left:4px; font-variant-numeric:tabular-nums}

.recipegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
            gap:16px; align-items:start}
.recipe{background:#fff; border:1px solid var(--line); border-radius:12px;
        padding:18px 20px 20px; scroll-margin-top:70px}
.recipe.target{border-color:var(--k-recipes); box-shadow:0 0 0 3px rgba(181,70,79,.12)}
.rhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.rhead h3{margin:0; font-size:17px; font-weight:600; letter-spacing:-.015em}
.rmeal{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:2px 9px; border-radius:20px;
  background:#f2f1ed; color:#7d776e;
}
.rmeal.breakfast{background:#fdf1dd; color:#96631a}
.rmeal.lunch{background:var(--green-bg); color:var(--green)}
.rmeal.dinner{background:#fbe6e3; color:#a3453a}
.rmeal.dessert{background:#efe8f7; color:#5f4b8b}
.rmeta{font-size:12.5px; color:var(--mute); margin-top:5px}
.rbody{display:grid; grid-template-columns:minmax(150px,.8fr) 1.4fr; gap:20px; margin-top:16px}
.rbody h4{
  margin:0 0 8px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); font-weight:700;
}
.rbody ul, .rbody ol{margin:0; padding-left:18px}
.rbody li{font-size:13.5px; line-height:1.5; margin-bottom:5px}
.rbody ul{list-style:none; padding-left:0}
.rbody ul li{padding-left:14px; position:relative}
.rbody ul li::before{content:""; position:absolute; left:0; top:8px;
                     width:5px; height:5px; border-radius:50%; background:var(--k-recipes); opacity:.5}
.rnote{
  margin-top:16px; background:#fdf6e8; border-left:3px solid var(--note-b);
  border-radius:0 8px 8px 0; padding:10px 14px; font-size:13px; line-height:1.5; color:#5c4a2a;
}
.rtrips{margin-top:14px; font-size:12.5px; color:var(--mute)}
.rtrips a{color:var(--green); font-weight:600}

/* link from a meal on a trip calendar to its recipe */
a.reclink{
  display:inline-block; margin-top:4px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; color:var(--k-recipes); text-decoration:none;
}
a.reclink:hover{text-decoration:underline}
.ev a.reclink{font-size:clamp(9.5px,.7vw,11px); margin-top:3px; opacity:.85}

.yearhead{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  font-weight:700; margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.yearhead:first-of-type{margin-top:0}

.callout{
  background:#fdf6e8; border:1px solid #f0dcb4; border-left:4px solid var(--note-b);
  border-radius:10px; padding:14px 18px; font-size:13.5px; line-height:1.55; color:#5c4a2a;
}
.callout b{font-weight:700}

footer.site{
  border-top:1px solid var(--line); background:#fff; margin-top:auto;
  padding:20px var(--pad); color:var(--mute); font-size:13px;
}
footer.site p{margin:0}
footer.site .inner{max-width:none}
footer.site p{margin:7px 0}
footer.notes{padding:10px var(--pad) 20px; color:var(--mute); font-size:13px; max-width:none}
footer.notes p{margin:7px 0}

.hide{display:none !important}

/* nine flat items need room — collapse to the Menu button well before phone size */
@media (max-width:1140px){
  .nav{flex-wrap:wrap; padding:8px 14px; min-height:0}
  .navtoggle{
    display:block; margin-left:auto; border:1px solid var(--line); background:#fff;
    border-radius:7px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  }
  .nav .navlinks{display:none; width:100%; flex-direction:column;
                 align-items:stretch; gap:0; padding:6px 0 4px}
  .nav.open .navlinks{display:flex}
  .nav .navlinks .item{padding:10px; display:flex; justify-content:space-between}
  .nav .navlinks .item small{margin-left:0}
  :root{--navh:50px}        /* the collapsed nav is shorter */
}
@media (max-width:820px){
  .costwrap{grid-template-columns:1fr}
  .recipegrid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rbody{grid-template-columns:1fr; gap:16px}
}
@media (max-width:1140px){ :root{--pad:20px} }
@media (max-width:640px){
  :root{--hour:76px; --gutter:46px; --pad:12px}
  .agenda{padding-top:16px}
  .row .t{width:104px; padding-left:14px}
  .row .c{padding-right:14px}
  .weekwrap{padding-top:16px}
  .wrap{padding-top:20px; padding-bottom:20px}
  .hero{padding-top:36px; padding-bottom:32px}
  header.page{padding-top:22px}
  .next{padding:20px}
  .next .cta{margin-left:0}
}

/* ---------- TRIP TABS ---------- */
.tabbar{
  position:sticky; top:var(--navh); z-index:60;
  background:#fff; border-bottom:1px solid var(--line);
  padding:0 var(--pad); overflow-x:auto;
}
.tabs{display:flex; gap:2px; min-height:var(--tabh)}
.tab{
  border:0; background:transparent; font:inherit; font-size:14px; font-weight:600;
  color:var(--mute); padding:0 16px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); border-bottom-color:var(--green)}

/* A pane always fills at least the screen below the pinned tab bar. Without this,
   switching from a long pane to a short one shrinks the document, the browser
   clamps the scroll position, and the page lurches back to the top. */
.pane{
  animation:fade .16s ease-out;
  min-height:calc(100vh - var(--navh) - var(--tabh));
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.calhead{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
  padding:12px var(--pad) 0;
}
.calhead .legend{margin-top:0}
.calhead .toggle{margin-top:0; margin-left:auto}

/* ---------- PACKING LIST ---------- */
.packbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.packcount{
  font-size:13.5px; color:var(--mute);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:7px 15px;
}
.packcount b{color:var(--ink); font-variant-numeric:tabular-nums}
.packcount.done{background:var(--green-bg); border-color:#bcdcc9; color:var(--green)}
.packcount.done b{color:var(--green)}
.packreset{
  border:1px solid var(--line); background:#fff; border-radius:20px;
  padding:7px 15px; font:inherit; font-size:13px; font-weight:600;
  color:var(--mute); cursor:pointer;
}
.packreset:hover{border-color:#bfc3c7; color:var(--ink)}

/* multi-column, not grid — a grid puts the cards in rows and every short card
   leaves a hole under it. Columns let each card sit right under the last one. */
.packgrid{columns:290px; column-gap:14px}
.packgroup{background:#fff; border:1px solid var(--line); border-radius:12px;
           padding:15px 17px 17px; margin:0 0 14px;
           break-inside:avoid; page-break-inside:avoid}
.packgroup h4{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); font-weight:700;
}
.packgroup ul{list-style:none; margin:0; padding:0}
.packgroup li{margin-bottom:2px}
.packgroup label{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:13.5px; line-height:1.45; padding:3px 0;
}
.packgroup input{margin:2px 0 0; accent-color:var(--green); flex:none; width:15px; height:15px}
.packgroup label.ticked span{color:var(--mute); text-decoration:line-through}

/* ---------- TRIP INTRO (the write-up, in the page header) ---------- */
/* Write-up on the left, cover photo on the right. Splitting the row keeps each
   line at a readable measure without leaving half the screen empty. */
.tripsplit{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px; align-items:stretch; margin-top:18px;
}
.tripintro{font-size:14.5px; line-height:1.62; color:#40454a}
.tripintro p{margin:0 0 11px}
.tripintro p:last-child{margin-bottom:0}

.tripcover{
  position:relative; min-height:230px; border-radius:12px; overflow:hidden;
  background:#f2f1ed;
}
.tripcover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* "natural" shows the whole frame instead of cropping it to the height of the
   text beside it. Used on the home hero, where the picture is chosen for its
   own sake and cropping the tops off people's heads is not acceptable. */
.tripcover.natural{
  min-height:0; align-self:start; background:transparent;
  border-radius:12px; overflow:hidden;
}
.tripcover.natural img{position:static; width:100%; height:auto; display:block}
.tripcover.empty{
  background:#fbfaf8; border:1px dashed var(--opt-b);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px;
}
.tripcover.empty span{
  font-size:13px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#8b857b;
}
.tripcover.empty small{
  display:block; margin-top:7px; max-width:44ch;
  font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--mute); line-height:1.5;
}
.tripcover.empty code{font-size:12px}

@media (max-width:980px){
  .tripsplit{grid-template-columns:1fr; gap:18px}
  .tripcover{min-height:200px; aspect-ratio:16/9}
}

/* ---------- PHOTO GALLERY ---------- */
.gallery{columns:340px; column-gap:14px}

/* Credits under the gallery. Deliberately quiet — it is a footnote, not a
   feature — but always visible rather than tucked behind a toggle. */
.credits{
  margin:22px 0 0; padding:16px 18px;
  background:var(--card, #fff); border:1px solid var(--line); border-radius:12px;
  font-size:.86rem; color:#5f6b73;
}
.credits h3{margin:0 0 8px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#7b858c}
.credits p{margin:0 0 10px}
.credits ul{margin:0; padding-left:18px}
.credits li{margin:0 0 4px}
.credits li b{color:#404a51; font-weight:600}
.credits a{color:inherit}
.shot{
  margin:0 0 14px; break-inside:avoid; page-break-inside:avoid;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; cursor:zoom-in; transition:border-color .12s, box-shadow .12s;
}
.shot:hover{border-color:#bfc3c7; box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{padding:10px 14px 12px; font-size:12.5px; color:var(--mute); line-height:1.45}

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(16,17,19,.94);
  display:flex; align-items:center; justify-content:center; gap:8px; padding:32px;
}
.lightbox figure{margin:0; max-width:100%; max-height:100%; display:flex;
                 flex-direction:column; align-items:center; gap:12px}
.lightbox img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:6px}
.lightbox figcaption{color:#e8e8e6; font-size:13.5px; text-align:center; max-width:70ch}
.lbclose{
  position:absolute; top:16px; right:20px; width:40px; height:40px;
  border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
}
.lbnav{
  border:0; border-radius:50%; width:46px; height:46px; flex:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:1; cursor:pointer;
}
.lbclose:hover, .lbnav:hover{background:rgba(255,255,255,.24)}
@media (max-width:640px){
  .lightbox{padding:14px; gap:4px}
  .lbnav{width:38px; height:38px; font-size:24px}
}

/* ---------- MAP TAB ---------- */
.maptab{display:flex; flex-direction:column; gap:14px}
.mapchips{margin-bottom:0}
.mapchips .chip{display:inline-flex; align-items:center; gap:7px}
.mapchips .chip .sw{width:11px; height:11px; border-radius:3px}

/* list on the left, map on the right; the map fills the rest of the window */
.mapsplit{
  display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:14px; align-items:stretch;
  height:calc(100vh - var(--navh) - var(--tabh) - 190px);
  min-height:420px;
}
.mapaside{
  overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:#fff;
  overscroll-behavior:contain;
}
.mapcanvas{border:1px solid var(--line); border-radius:12px; overflow:hidden; position:relative}

/* fullscreen toggle, floated over the top-right of the map */
.mapfull{
  position:absolute; top:10px; right:10px; z-index:500;
  border:1px solid var(--line); background:rgba(255,255,255,.94); border-radius:8px;
  padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.mapfull:hover{background:#fff}

/* the native API handles its own sizing; this covers browsers that refuse it */
.mapsplit.faux-full{
  position:fixed; inset:0; z-index:400; background:var(--paper);
  height:auto; padding:12px; gap:12px;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);
}
.mapsplit:fullscreen{background:var(--paper); padding:12px; gap:12px; height:100%}
.mapsplit:fullscreen .mapaside{max-height:none}
#tripmap{width:100%; height:100%; background:#e8e6e1}

.maplist{list-style:none; margin:0; padding:6px}
.mapitem > button{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  border:0; background:transparent; font:inherit; cursor:pointer;
  padding:9px 10px; border-radius:8px;
}
.mapitem > button:hover{background:#f5f4f2}
.mapitem.on > button{background:var(--green-bg)}
.mapitem .dot{
  width:12px; height:12px; border-radius:50%; flex:none; margin-top:3px;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.mapitem .dot.act{background:var(--act-b)}
.mapitem .dot.meal{background:var(--meal-b)}
.mapitem .dot.drive{background:var(--drive-b)}
.mapitem .dot.park{background:var(--park-b)}
.mapitem .dot.lodge{background:var(--lodge-b)}
.mapitem .dot.note{background:var(--note-b)}
.mapitem .dot.opt{background:var(--opt-b)}
.mapitem .txt{min-width:0}
.mapitem .txt b{display:block; font-size:13.5px; font-weight:600; line-height:1.3}
.mapitem .txt .d{
  display:inline-block; margin-top:3px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
}
.mapitem .txt i{display:block; font-style:normal; font-size:12.5px; color:var(--mute);
                margin-top:2px; line-height:1.4}

/* markers, coloured to match the calendar */
.mapmarker span{
  display:block; width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.mapmarker.act span{background:var(--act-b)}
.mapmarker.meal span{background:var(--meal-b)}
.mapmarker.drive span{background:var(--drive-b)}
.mapmarker.park span{background:var(--park-b)}
.mapmarker.lodge span{background:var(--lodge-b)}
.mapmarker.note span{background:var(--note-b)}
.mapmarker.opt span{background:var(--opt-b)}

.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:13px; line-height:1.45}

@media (max-width:820px){
  /* stack: map first so it is the thing you see, list scrolls underneath */
  .mapsplit{grid-template-columns:1fr; height:auto; min-height:0}
  .mapcanvas{height:52vh; min-height:300px; order:-1}
  .mapaside{max-height:46vh}
}