/* ============================================================
   TripReport — photo-first editorial design system
   ============================================================ */

:root{
  --ink:        #201d1a;
  --ink-soft:   #5a5450;
  --paper:      #faf7f2;
  --paper-dim:  #f1ebe1;
  --line:       #e4dccd;
  --accent:     #a8452f;   /* muted terracotta */
  --accent-ink: #7c3120;
  --accent-tint:#f4e2da;
  --focus:      #2f6f6a;   /* muted teal, used sparingly */
  --max-w:      1180px;
  --radius:     2px;
  --shadow:     0 18px 40px -22px rgba(32,29,26,.35);
  --shadow-sm:  0 6px 16px -10px rgba(32,29,26,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #efe9e0;
    --ink-soft:   #b8afa4;
    --paper:      #17140f;
    --paper-dim:  #1f1b15;
    --line:       #332c22;
    --accent:     #e0794f;
    --accent-ink: #f0a179;
    --accent-tint:#3a2620;
    --focus:      #6bbdb5;
    --shadow:     0 18px 40px -20px rgba(0,0,0,.6);
    --shadow-sm:  0 6px 16px -10px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ink:        #efe9e0;
  --ink-soft:   #b8afa4;
  --paper:      #17140f;
  --paper-dim:  #1f1b15;
  --line:       #332c22;
  --accent:     #e0794f;
  --accent-ink: #f0a179;
  --accent-tint:#3a2620;
  --focus:      #6bbdb5;
  --shadow:     0 18px 40px -20px rgba(0,0,0,.6);
  --shadow-sm:  0 6px 16px -10px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.display{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 .4em;
}
.eyebrow,.meta,.chip,nav,button,.ui{
  font-family:"Inter", -apple-system, "Segoe UI", sans-serif;
}
.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.meta{ font-size:.85rem; color:var(--ink-soft); }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* ---------- site header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:"Fraunces", serif; font-weight:600; font-size:1.15rem;
  text-decoration:none; display:flex; align-items:baseline; gap:.35em;
}
.brand .dot{ color:var(--accent); }
.site-nav{ display:flex; gap:28px; font-size:.9rem; }
.site-nav a{ text-decoration:none; color:var(--ink-soft); }
.site-nav a:hover,.site-nav a.active{ color:var(--ink); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:78vh;
  display:flex; align-items:flex-end;
  color:#fff;
  background:#3a332b;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,0) 35%, rgba(15,13,10,.78) 100%);
}
.hero-content{ position:relative; z-index:1; padding:64px 0 56px; }
.hero .eyebrow{ color:#f0c9b8; }
.hero h1{ font-size:clamp(2.2rem, 5.5vw, 4.2rem); color:#fff; max-width:14ch; }
.hero p.lede{ max-width:46ch; font-size:1.15rem; color:#efe6dc; }
.hero-stats{ display:flex; gap:32px; margin-top:22px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:"Fraunces",serif; font-size:1.5rem; }
.hero-stats .stat span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#d8cabd; }

/* ---------- intro / prose ---------- */
.intro{ padding:64px 0 24px; }
.intro .lede{ font-size:1.25rem; max-width:62ch; color:var(--ink-soft); }
.prose{ max-width:66ch; }
.prose p{ margin:0 0 1.1em; }
.pull-quote{
  font-family:"Fraunces", serif; font-size:1.6rem; font-weight:500;
  line-height:1.35; color:var(--accent-ink);
  border-left:3px solid var(--accent);
  padding:.2em 0 .2em 1em; margin:2em 0;
  max-width:44ch;
}

/* ---------- trip cards (hub) ---------- */
.trip-grid{
  display:grid; gap:36px; padding:24px 0 96px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
.trip-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.trip-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.trip-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.trip-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.trip-card .body{ padding:20px 22px 24px; }
.trip-card h3{ font-size:1.4rem; margin-bottom:.25em; }
.trip-card .teaser{ color:var(--ink-soft); font-size:.96rem; }
.trip-card .status-chip{
  display:inline-block; margin-top:14px;
  font-family:"Inter",sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background:var(--accent-tint); color:var(--accent-ink);
}
.trip-card.is-placeholder{ opacity:.55; }
.trip-card.is-placeholder:hover{ transform:none; box-shadow:none; }

/* ---------- chapter nav ---------- */
.chapter-nav{
  position:sticky; top:64px; z-index:30;
  background:var(--paper); border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.chapter-nav .wrap{ display:flex; gap:26px; height:52px; align-items:center; }
.chapter-nav a{
  white-space:nowrap; text-decoration:none; font-size:.86rem;
  color:var(--ink-soft); font-family:"Inter",sans-serif;
  padding:6px 0; border-bottom:2px solid transparent;
}
.chapter-nav a:hover,.chapter-nav a.active{ color:var(--ink); border-color:var(--accent); }

/* ---------- chapters ---------- */
.chapter{ padding:88px 0; border-bottom:1px solid var(--line); }
.chapter:last-of-type{ border-bottom:none; }
.chapter-head{ max-width:70ch; margin-bottom:36px; }
.chapter-head .meta{ margin-bottom:10px; }
.chapter-head h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }

/* day-based chapters (see data.js note): each day is its own block
   inside the chapter, with its own intro, map, and a run of sections */
.trip-day{ margin-bottom:64px; }
.trip-day:last-child{ margin-bottom:0; }
.day-head{ margin-bottom:18px; }
.day-head h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
.day-intro{ max-width:70ch; margin-bottom:8px; }
.day-section{ margin-top:52px; }
.day-section h3{
  font-size:1.3rem; margin-bottom:.5em;
  padding-top:8px; border-top:1px solid var(--line);
}
.day-section > .prose{ max-width:68ch; }

/* photo grid */
.photo-grid{
  display:grid; gap:14px; margin:36px 0;
  grid-template-columns:repeat(6, 1fr);
}
.photo-grid .ph{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--paper-dim); cursor:zoom-in;
}
.photo-grid .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.photo-grid .ph:hover img{ transform:scale(1.04); }
.photo-grid .ph .cap{
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px 7px;
  font-family:"Inter",sans-serif; font-size:.7rem; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  opacity:0; transition:opacity .2s ease;
}
.photo-grid .ph:hover .cap{ opacity:1; }
.photo-grid .span-2{ grid-column:span 2; aspect-ratio:4/3; }
.photo-grid .span-3{ grid-column:span 3; aspect-ratio:16/10; }
.photo-grid .span-4{ grid-column:span 4; aspect-ratio:16/9; }
.photo-grid .span-6{ grid-column:span 6; aspect-ratio:21/9; }
@media (max-width:820px){
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .photo-grid .span-2,.photo-grid .span-3,.photo-grid .span-4,.photo-grid .span-6{
    grid-column:span 2; aspect-ratio:4/3;
  }
}

/* collage layout — a tighter, scrapbook-style cluster for a single
   moment (e.g. the hair-spa sequence) rather than a uniform grid.
   Frames get a paper-white card, slight independent rotation, and
   overlap a little on wide screens; falls back to a plain stacked
   grid on narrow screens where rotation/overlap would feel cramped. */
.photo-grid.collage{
  grid-template-columns:repeat(12, 1fr);
  gap:28px 20px;
  margin:44px 0 56px;
  padding:20px 8px 8px;
}
.photo-grid.collage .ph{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:var(--shadow-sm);
  padding:8px 8px 0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.photo-grid.collage .ph img{ border-radius:2px; }
.photo-grid.collage .ph .cap{
  position:static; opacity:1; background:none; color:var(--ink-soft);
  padding:8px 2px 10px; font-size:.74rem; text-align:center;
}
.photo-grid.collage .ph:hover{ transform:translateY(-6px) rotate(0deg) !important; box-shadow:var(--shadow); z-index:2; }
.photo-grid.collage .ph.span-2,
.photo-grid.collage .ph.span-3,
.photo-grid.collage .ph.span-4{ grid-column:span 6; aspect-ratio:4/3; }
.photo-grid.collage .ph:nth-child(4n+1){ transform:rotate(-1.4deg); }
.photo-grid.collage .ph:nth-child(4n+2){ transform:rotate(1.1deg); }
.photo-grid.collage .ph:nth-child(4n+3){ transform:rotate(-0.8deg); }
.photo-grid.collage .ph:nth-child(4n+4){ transform:rotate(1.6deg); }
@media (min-width:640px){
  .photo-grid.collage .ph:nth-child(1){ grid-column:span 7; }
  .photo-grid.collage .ph:nth-child(2){ grid-column:span 5; margin-top:34px; }
  .photo-grid.collage .ph:nth-child(3){ grid-column:span 5; }
  .photo-grid.collage .ph:nth-child(4){ grid-column:span 7; margin-top:34px; }
}
@media (max-width:640px){
  .photo-grid.collage{ grid-template-columns:1fr; padding:12px 0 0; }
  .photo-grid.collage .ph{ transform:none !important; }
  .photo-grid.collage .ph.span-2,
  .photo-grid.collage .ph.span-3,
  .photo-grid.collage .ph.span-4{ grid-column:1; aspect-ratio:4/3; }
}

/* map */
.chapter-map{
  height:380px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); margin:28px 0;
  filter:saturate(.85) contrast(1.02);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chapter-map{ filter:saturate(.7) brightness(.9) invert(.92) hue-rotate(180deg); }
}
:root[data-theme="dark"] .chapter-map{ filter:saturate(.7) brightness(.9) invert(.92) hue-rotate(180deg); }
.chapter-map .leaflet-marker-icon{ filter:none !important; }
.map-caption{ font-size:.82rem; color:var(--ink-soft); margin-top:-16px; margin-bottom:8px; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(10,9,7,.94);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:40px 20px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1200px,92vw); max-height:74vh; box-shadow:var(--shadow); }
.lightbox .lb-cap{ color:#e9e2d8; font-family:"Inter",sans-serif; font-size:.9rem; margin-top:16px; max-width:70ch; text-align:center; }
.lightbox .lb-close{
  position:absolute; top:22px; right:28px; color:#fff; font-size:1.6rem;
  background:none; border:none; cursor:pointer; line-height:1;
}
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.08); border:none; color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:1.3rem; cursor:pointer;
}
.lightbox .lb-prev{ left:20px; } .lightbox .lb-next{ right:20px; }

/* lightbox engagement — like + comments, backed by /api/like and
   /api/comments (Cloudflare Pages Functions, see functions/api/) */
.lb-engage{
  display:flex; gap:10px; margin-top:14px; font-family:"Inter",sans-serif;
}
.lb-like-btn,.lb-comments-toggle{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#e9e2d8; border-radius:999px; padding:7px 14px; font-size:.82rem;
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s ease;
}
.lb-like-btn:hover,.lb-comments-toggle:hover{ background:rgba(255,255,255,.16); }
.lb-like-btn .heart{ font-size:1rem; }
.lb-like-btn.liked{ color:#e0794f; border-color:rgba(224,121,79,.5); }
.lb-comments-panel{
  display:none; width:min(560px,90vw); max-height:34vh;
  margin-top:14px; background:rgba(20,17,13,.92); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:14px 16px; overflow-y:auto;
}
.lb-comments-panel.open{ display:block; }
.lb-comments-list{ margin-bottom:12px; }
.lb-comment{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.lb-comment:last-child{ border-bottom:none; }
.lb-comment-head{ display:flex; justify-content:space-between; gap:10px; font-family:"Inter",sans-serif; font-size:.78rem; color:#c9beb2; margin-bottom:2px; }
.lb-comment-body{ color:#e9e2d8; font-size:.88rem; line-height:1.45; }
.lb-comment-empty{ color:#9b9086; font-size:.85rem; font-family:"Inter",sans-serif; text-align:center; padding:8px 0; }
.lb-comment-form{ display:flex; flex-direction:column; gap:8px; }
.lb-comment-name,.lb-comment-text{
  width:100%; box-sizing:border-box; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#e9e2d8;
  font-family:"Inter",sans-serif; font-size:.85rem; padding:8px 10px; resize:vertical;
}
.lb-comment-name::placeholder,.lb-comment-text::placeholder{ color:#8d8378; }
.lb-comment-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lb-comment-err{ color:#ff9b7a; font-size:.76rem; font-family:"Inter",sans-serif; }
.lb-comment-row button{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:7px 16px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:"Inter",sans-serif;
}
.lb-comment-row button:hover{ background:var(--accent-ink); }

/* password gate (see index.html / trip index.html inline block) */
#site-gate a{ color:inherit; }

/* placeholder art */
.ph-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, var(--paper-dim), var(--paper-dim) 10px, var(--line) 10px, var(--line) 11px);
  color:var(--ink-soft); font-family:"Inter",sans-serif; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:10px;
}

/* footer */
.site-footer{
  border-top:1px solid var(--line); padding:40px 0; margin-top:40px;
  font-family:"Inter",sans-serif; font-size:.85rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* buttons / links */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Inter",sans-serif; font-size:.88rem; font-weight:600;
  color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.btn:hover{ color:var(--accent); }