/* Postcards — shared styles for the trip renderer (Phase 1) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%}

:root{
  --paper:#f0e7d7; --paper2:#e8dcc8;
  --ink:#2a2620; --soft:#5a5245;
  --teal:#305e5b; --tealc:#e9f0e8;
  --gold:#e6be7f; --rust:#b6572e;
}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}
@media(max-width:600px){ .wrap{padding:0 22px} }

.eyebrow{font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;}

/* photo box — aspect-ratio set inline per photo via style="aspect-ratio:…" */
.ph{position:relative; overflow:hidden; background:var(--paper2);}
.ph img{width:100%; height:100%; object-fit:cover; display:block;}

/* hero */
.hero{position:relative; min-height:90vh; display:flex; align-items:flex-end; background:#1a1712; overflow:hidden;}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.hero .scrim{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(22,17,12,.76) 0%,rgba(22,17,12,.12) 42%,rgba(22,17,12,0) 66%,rgba(22,17,12,.16) 100%);}
.hero .edge{position:absolute; inset:16px; border:1px solid rgba(240,231,215,.4); pointer-events:none; z-index:3;}
.hero .inner{position:relative; z-index:4; width:100%; max-width:1100px; margin:0 auto; padding:0 44px 8vh;}
.hero .eyebrow{color:var(--gold); margin:0 0 16px;}

.byline{display:flex; align-items:center; gap:12px; margin:0 0 20px;}
.byline .av{width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(240,231,215,.85); box-shadow:0 3px 14px rgba(0,0,0,.35); flex:0 0 auto;}
.byline .nm{color:var(--paper); font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;}

.h-title{font-family:'Archivo Black',sans-serif; color:var(--paper);
  font-size:clamp(48px,10vw,132px); line-height:.88; letter-spacing:-.015em; margin:0; text-transform:uppercase;
  text-shadow:0 2px 34px rgba(0,0,0,.3);}
.h-title span{display:block}

.meta{display:flex; gap:0; margin-top:28px; width:fit-content; flex-wrap:wrap;}
.meta .cell{padding:2px 26px 2px 0; margin-right:26px; border-right:1px solid rgba(240,231,215,.38);}
.meta .cell:last-child{border-right:0; margin-right:0; padding-right:0}
.meta .k{display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:5px;}
.meta .v{color:var(--paper); font-size:16px; font-weight:500; letter-spacing:.01em;}
@media(max-width:600px){ .hero .inner{padding:0 26px 8vh} .meta{flex-wrap:wrap; gap:14px 0} }

/* intro band (the one color moment) */
.intro{background:var(--teal); color:var(--tealc); padding:64px 0;}
.intro .grid{display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:start;}
.intro .lab{padding-top:9px; color:var(--gold); border-top:1px solid rgba(233,190,127,.5);}
.intro p{margin:0; font-size:clamp(18px,2.3vw,24px); line-height:1.55; max-width:44ch; font-weight:500;}
@media(max-width:600px){ .intro .grid{grid-template-columns:1fr; gap:14px} }

/* day divider */
.day{padding:66px 0 4px;}
.day .k{color:var(--teal); margin:0 0 8px;}
.day h2{font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(28px,5vw,52px); line-height:.94; letter-spacing:-.01em; margin:0;}
.day .rule{height:1px; background:rgba(42,38,32,.3); margin-top:20px;}

/* figure (single photo) */
.fig{padding:28px 0;}
.fig .frame{padding:8px; background:var(--paper2); border:1px solid rgba(42,38,32,.16);}
.fig .cap{margin-top:14px; max-width:60ch;}
.fig .tag{color:var(--teal); margin:0 0 6px;}
.fig p{margin:0; font-size:15.5px; line-height:1.55; color:var(--soft);}

/* album — responsive auto-grid, ~10 cap */
.album{padding:44px 0;}
.album h3{font-family:'Archivo',sans-serif; font-weight:800; font-size:20px; margin:0 0 18px; padding-top:14px; border-top:1px solid rgba(42,38,32,.3);}
.album .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;}
.album .ph{border:1px solid rgba(42,38,32,.14)}

/* two-up */
.two{padding:44px 0; display:grid; grid-template-columns:0.8fr 1.2fr; gap:28px; align-items:center;}
.two .frame{padding:8px; background:var(--paper2); border:1px solid rgba(42,38,32,.16);}
.two h3{font-family:'Archivo',sans-serif; font-weight:900; font-size:26px; margin:0 0 12px; color:var(--teal); letter-spacing:-.01em;}
.two p{margin:0; font-size:16px; line-height:1.6; color:var(--soft);}
@media(max-width:700px){ .two{grid-template-columns:1fr} }

/* text block — a standalone paragraph in the stream */
.textblock{padding:36px 0;}
.textblock p{margin:0; font-size:16px; line-height:1.7; color:var(--soft); max-width:66ch;}

/* gallery (floor render) — masonry via CSS columns, never crops panoramas */
.gallery{padding:14px 0 0;}
.gallery .col{columns:2; column-gap:14px;}
.gallery .col .ph{width:100%; margin:0 0 14px; break-inside:avoid; border:1px solid rgba(42,38,32,.14);}
@media(max-width:600px){ .gallery .col{columns:1} }
.lead{padding:0;}

/* finale */
.fin{position:relative; margin-top:52px; min-height:64vh; display:flex; align-items:flex-end; background:#1a1712; overflow:hidden;}
.fin .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%;}
.fin .scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(22,17,12,.78),transparent 58%);}
.fin .inner{position:relative; z-index:2; max-width:1100px; margin:0 auto; width:100%; padding:0 44px 46px; color:var(--paper);}
.fin h2{font-family:'Archivo Black',sans-serif; text-transform:uppercase; font-size:clamp(26px,4.6vw,48px); margin:0; line-height:.9;}
@media(max-width:600px){ .fin .inner{padding:0 26px 40px} }

/* colophon / footer */
.colo{background:var(--ink); color:var(--paper); padding:24px 0;}
.colo .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.colo .line{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#c9b48f;}
.colo .who{display:flex; align-items:center; gap:9px;}
.colo .who .av{width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid rgba(240,231,215,.5);}
.colo .who span{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#c9b48f;}

.loading, .error{padding:80px 28px; font-size:14px; color:var(--soft); text-align:center;}

/* trips index (Phase 2) */
.idx-head{padding:64px 0 8px;}
.idx-head h1{font-family:'Archivo Black',sans-serif; text-transform:uppercase;
  font-size:clamp(36px,7vw,64px); line-height:.9; letter-spacing:-.01em; margin:0;}

.idx{padding:28px 0 80px;}
.idx .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px;}
.idx .empty{color:var(--soft); font-size:14px;}

.tile{display:block; color:inherit; text-decoration:none; border:1px solid rgba(42,38,32,.16);
  background:var(--paper2); transition:transform .15s ease, box-shadow .15s ease;}
.tile:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(42,38,32,.14);}
.tile .ph{aspect-ratio:4/3;}
.tile .cap{padding:14px 16px 18px;}
.tile .cap h3{font-family:'Archivo',sans-serif; font-weight:800; font-size:19px;
  margin:0 0 4px; letter-spacing:-.01em;}
.tile .cap .meta{margin:0; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal);}

/* ===== Atlas (Phase 3) ===== */

/* container-query fix: trip-render.js's output is viewport-relative (clamp(...,vw,...),
   @media(max-width)) which only fires against the full window. When it's mounted into the
   atlas side panel (a fraction of the window's width), those rules never trigger. Scope
   container-relative overrides to panel mounts only — trip.html's full-page mount never
   gets this class, so its own responsive behavior is untouched. */
.panel-trip{ container-type: inline-size; }
.panel-trip .h-title{ font-size: clamp(32px, 10cqi, 88px); }
.panel-trip .fin h2{ font-size: clamp(22px, 4.6cqi, 40px); }
@container (max-width: 620px){
  .panel-trip .two{ grid-template-columns: 1fr; }
  .panel-trip .intro .grid{ grid-template-columns: 1fr; gap: 14px; }
  .panel-trip .gallery .col{ columns: 1; }
  .panel-trip .hero .inner{ padding: 0 26px 8vh; }
}

.atlas-map{ position:fixed; inset:0; }
.atlas-map .maplibregl-marker{ z-index:5; }

/* marker tiers — visual language lifted from the atlas mockup */
.mk{ cursor:pointer; }
.mk:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; border-radius:4px; }
.mk.dot .d{ width:11px; height:11px; border-radius:50%; background:var(--ink);
  border:2px solid var(--paper); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.mk.dot .lb{ position:absolute; left:15px; top:-8px; white-space:nowrap; font-size:11px; font-weight:600;
  color:#4a4436; text-shadow:0 1px 2px rgba(240,231,215,.9); letter-spacing:.02em; }

.mk.locket .pin{ position:relative; width:52px; height:52px; border-radius:50%;
  background-size:cover; background-position:center; border:3px solid var(--paper);
  box-shadow:0 5px 16px rgba(40,25,10,.4); }
.mk.locket .pin::after{ content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--paper); }
.mk.locket .lb{ position:absolute; left:50%; top:56px; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; font-weight:700; color:#3a3327; text-shadow:0 1px 2px rgba(240,231,215,.95); letter-spacing:.02em; }

.mk.feature .card, .mk.cluster .card{ position:relative; width:112px; background:var(--paper);
  padding:5px 5px 0; border-radius:6px; box-shadow:0 8px 22px rgba(40,25,10,.45); transition:transform .15s; }
.mk.feature .card .img, .mk.cluster .card .img{ height:74px; border-radius:3px; background-size:cover; background-position:center; }
.mk.feature .card .ttl, .mk.cluster .card .ttl{ font-family:'Archivo',sans-serif; font-weight:800; font-size:12px;
  letter-spacing:-.01em; padding:5px 3px 6px; color:var(--ink); line-height:1.15; }
.mk.feature .card::after, .mk.cluster .card::after{ content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--paper); }
.mk.feature .star, .mk.cluster .star{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:999px;
  background:var(--rust); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center;
  padding:0 5px; box-shadow:0 2px 6px rgba(0,0,0,.3); }

/* cluster with no cover photo among its members — an honest richer-dot instead of a blank card */
.mk.cluster.plain .d{ width:16px; height:16px; border-radius:50%; background:var(--teal);
  border:2px solid var(--paper); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.mk.cluster.plain .star{ position:absolute; top:-8px; right:-9px; min-width:17px; height:17px; border-radius:999px;
  background:var(--rust); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center;
  padding:0 4px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.mk.cluster.plain .lb{ position:absolute; left:20px; top:-2px; white-space:nowrap; font-size:11px; font-weight:600;
  color:#4a4436; text-shadow:0 1px 2px rgba(240,231,215,.9); letter-spacing:.02em; }
.mk.locket:hover .pin, .mk.feature:hover .card, .mk.cluster:hover .card{ transform:scale(1.06); }
/* !important: maplibre-gl's Marker class writes `style.opacity` inline on every position
   update (pan/zoom), which otherwise always beats a plain external rule. */
.mk.faded{ opacity:0 !important; pointer-events:none; }
.mk{ transition:opacity .25s ease; }

/* floating cards over the map — no standard site nav; the wordmark in the top card carries the
   way back to "/". Paper + blur + hairline border + soft shadow, matching the card language
   already used for trip tiles and the mockup's legend, instead of a full-bleed gradient scrim
   (which only reads right over a dark photo, not a light map). */
.atlas-card{ position:absolute; z-index:20; background:rgba(240,231,215,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(42,38,32,.14); border-radius:14px;
  padding:12px 18px; box-shadow:0 8px 24px rgba(40,25,10,.18); }

.atlas-top{ top:20px; left:20px; }
.atlas-top .home{ display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.14em; color:var(--soft); text-decoration:none; }
.atlas-top .home:hover{ color:var(--ink); }
.atlas-top h1{ margin:2px 0 0; font-family:'Archivo Black',sans-serif; font-size:20px;
  letter-spacing:-.01em; color:var(--ink); }

.stats{ left:20px; bottom:20px; display:flex; align-items:center; gap:20px; }
.stats .stat .n{ font-family:'Archivo Black',sans-serif; font-size:20px; line-height:1; color:var(--ink); }
.stats .stat .l{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-top:3px; }

@media(max-width:600px){
  .atlas-card{ padding:10px 14px; border-radius:12px; }
  .atlas-top{ top:14px; left:14px; }
  .atlas-top h1{ font-size:17px; }
  .stats{ left:14px; bottom:14px; gap:14px; }
  .stats .stat .n{ font-size:17px; }
}

/* side panel */
.atlas-panel{ position:fixed; top:0; right:0; bottom:0; width:460px; max-width:92vw;
  background:var(--paper); box-shadow:-12px 0 40px rgba(0,0,0,.25);
  transform:translateX(100%); transition:transform .32s ease; overflow-y:auto; z-index:40; }
.atlas-panel.open{ transform:translateX(0); }
.atlas-panel-close{ position:sticky; top:14px; left:100%; transform:translateX(-46px);
  width:32px; height:32px; border-radius:50%; background:rgba(20,15,10,.55); color:#fff;
  border:0; cursor:pointer; font-size:14px; z-index:41; }
.atlas-panel-close:hover{ background:rgba(20,15,10,.8); }

@media(max-width:860px){
  .atlas-panel{ width:100%; max-width:100%; height:88vh; top:auto;
    border-radius:16px 16px 0 0; transform:translateY(100%); }
  .atlas-panel.open{ transform:translateY(0); }
  .stats{ gap:16px; }
  .atlas-top h1{ font-size:18px; }
}

/* add-trip (owner-only, unlisted — revealed via ?edit) */
.add-trigger{ top:20px; right:20px; font:inherit; font-weight:800; font-size:13px; letter-spacing:.04em;
  color:var(--ink); cursor:pointer; }
.add-trigger:hover{ background:rgba(240,231,215,.98); }
.add-trigger.placing{ background:var(--teal); color:var(--tealc); border-color:var(--teal); }
.atlas-map.placing{ cursor:crosshair; }

.atlas-modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(30,22,12,.4); backdrop-filter:blur(2px); }
.atlas-modal[hidden]{ display:none; }

.add-form, .add-result{ width:100%; max-width:420px; max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:16px; padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(20,15,10,.4); position:relative; }
.add-form .eyebrow, .add-result .eyebrow{ color:var(--teal); margin:0 0 4px; }
.add-coords{ font-size:12px; color:var(--soft); margin:0 0 18px; }
.add-form-close{ position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%;
  background:rgba(42,38,32,.08); border:0; cursor:pointer; font-size:13px; color:var(--soft); }
.add-form-close:hover{ background:rgba(42,38,32,.16); color:var(--ink); }

.add-form label{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--soft); margin:16px 0 6px; }
.add-form label .req{ color:var(--rust); }
.add-form label .hint{ text-transform:none; font-weight:500; letter-spacing:0; color:#8a8171; }
.add-form input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper2); border:1px solid rgba(42,38,32,.16); border-radius:8px; padding:9px 11px; }
.add-form input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.add-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.add-form-submit, .add-result button{ font:inherit; font-weight:700; font-size:14px; letter-spacing:.02em;
  cursor:pointer; border-radius:8px; padding:12px 16px; border:0; }
.add-form-submit{ width:100%; margin-top:22px; background:var(--ink); color:var(--paper); }
.add-form-submit:hover{ background:#3a352c; }

.add-result-note{ font-size:13px; line-height:1.6; color:var(--soft); margin:0 0 14px; }
.add-result-note code{ background:var(--paper2); padding:1px 5px; border-radius:4px; font-size:12px; }
.add-result-manifest, #add-result-manifest{ width:100%; box-sizing:border-box; min-height:150px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; line-height:1.5; color:var(--ink);
  background:var(--paper2); border:1px solid rgba(42,38,32,.16); border-radius:8px; padding:10px; resize:vertical; }
.add-result .add-form-row{ margin-top:14px; }
.add-result .add-form-row button{ background:var(--paper2); color:var(--ink); border:1px solid rgba(42,38,32,.16); }
.add-result .add-form-row button:hover{ background:rgba(42,38,32,.08); }
#add-result-done{ background:var(--ink); color:var(--paper); border-color:var(--ink); }