/* ==========================================================================
   John's Photography — hipster editorial theme
   ========================================================================== */

:root{
  --cream:#e9edea;
  --paper:#dde6e1;
  --kraft:#ccd6d0;
  --forest:#2a3a3d;
  --forest-light:#44585c;
  --rust:#3d6b6f;
  --rust-dark:#25454c;
  --mustard:#7d8f74;
  --amber:#9c4a18;
  --amber-dark:#612e0f;
  --ink:#222b28;
  --ink-soft:#57625c;
  --line:#b7c4bd;
  --shadow: 0 18px 34px -18px rgba(18,26,28,0.45);
  --radius:2px;
  --serif-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --serif-body:'Lora', Georgia, serif;
  --mono:'Space Mono', 'Courier New', monospace;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--cream);
  background-image:
    radial-gradient(rgba(20,32,34,0.06) 1px, transparent 1px);
  background-size:3px 3px;
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--rust-dark); text-decoration:none; }
a:hover{ color:var(--rust); }

h1,h2,h3,h4{
  font-family:var(--serif-display);
  color:var(--forest);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.4em;
}

.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--rust-dark);
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

/* ---- Site header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,234,216,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1180px; margin:0 auto;
}
.wordmark{
  font-family:var(--serif-display);
  font-size:1.55rem;
  font-weight:600;
  color:var(--forest);
  letter-spacing:-0.01em;
}
.wordmark span{ color:var(--rust); }
.nav-links{
  display:flex; gap:30px; list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;
}
.nav-links a{ color:var(--ink); position:relative; padding-bottom:4px; }
.nav-links a:hover, .nav-links a.active{ color:var(--rust-dark); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber);
}
.nav-toggle{ display:none; background:none; border:1px solid var(--forest); padding:8px 10px; font-family:var(--mono); }

@media (max-width:760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--cream);
    flex-direction:column; gap:0; border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 28px; display:block; border-top:1px solid var(--line); }
  .nav-toggle{ display:block; }
}

/* ---- Torn paper divider ---- */
.torn{
  width:100%; height:26px; display:block;
  background:var(--forest);
}
.torn.flip{ transform:scaleY(-1); }

/* ---- Hero ---- */
.hero{
  position:relative;
  background:var(--forest);
  color:var(--cream);
  overflow:hidden;
}
.hero-inner{
  max-width:1180px; margin:0 auto; padding:110px 28px 90px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
@media (max-width:860px){ .hero-inner{ grid-template-columns:1fr; padding:70px 24px 60px; } }

.hero h1{
  color:var(--cream);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.05;
}
.hero p.lede{
  font-size:1.15rem; color:#c9d3ce; max-width:46ch; margin-top:18px;
}
.hero .eyebrow{ color:var(--mustard); }

.btn{
  display:inline-block; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.8rem; padding:13px 24px; border:1px solid currentColor; border-radius:var(--radius);
  margin-top:28px; transition:all .15s ease;
}
.btn-solid{ background:var(--amber); border-color:var(--amber); color:var(--cream); }
.btn-solid:hover{ background:var(--amber-dark); border-color:var(--amber-dark); color:var(--cream); }
.btn-outline{ color:var(--cream); }
.btn-outline:hover{ background:rgba(244,234,216,0.1); color:var(--cream); }

.hero-frame{
  position:relative; background:var(--paper); padding:14px 14px 54px; box-shadow:var(--shadow);
  transform:rotate(-2deg);
}
.hero-frame img{ filter:grayscale(0.25) contrast(1.05) saturate(0.85); }
.hero-frame figcaption{
  font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); text-align:center; margin-top:10px;
  text-transform:uppercase; letter-spacing:0.08em;
}

/* ---- Sections ---- */
section{ padding:80px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:2.1rem; margin-top:8px; }
.section-head p{ color:var(--ink-soft); }

/* ---- Adventure cards / grid ---- */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:34px;
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); box-shadow:var(--shadow); position:relative;
  transition:transform .2s ease;
}
.card:hover{ transform:translateY(-4px); }
.card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--kraft); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .tag{
  position:absolute; top:12px; left:12px; background:var(--forest); color:var(--cream);
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em;
  padding:5px 10px;
}
.card .body{ padding:20px 22px 26px; }
.card h3{ font-size:1.3rem; margin-bottom:6px; }
.card .meta{ font-family:var(--mono); font-size:0.72rem; color:var(--rust-dark); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:0.95rem; margin:0; }
.card a.card-link{ position:absolute; inset:0; z-index:2; }

/* ---- Adventure detail ---- */
.adv-header{ background:var(--forest); color:var(--cream); padding:70px 0 60px; }
.adv-header .eyebrow{ color:var(--mustard); }
.adv-header h1{ color:var(--cream); font-size:clamp(2rem,4vw,3rem); }
.adv-header .meta-row{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; font-family:var(--mono); font-size:0.82rem; color:#c9d3ce; text-transform:uppercase; letter-spacing:0.06em;
}
.adv-story{ max-width:70ch; margin:46px auto 0; font-size:1.08rem; color:var(--ink); }
.adv-story p{ margin:0 0 1.2em; }

/* ---- Day/section grouping within an Adventure ----
   One .masonry block per group (see photoRuns/drawAdventureGallery in
   js/main.js) — CSS columns naturally restart per container, so each
   group's photos flow independently rather than interleaving with the
   next group's. ---- */
.section-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin:50px 0 6px;
}
.section-nav a{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:7px 14px; border:1px solid var(--line); border-radius:20px; color:var(--ink-soft);
  transition:all .15s ease;
}
.section-nav a:hover{ border-color:var(--rust); color:var(--rust-dark); }

.gallery-section-heading{
  font-family:var(--serif-display); font-size:1.4rem; color:var(--forest);
  margin:40px 0 6px; scroll-margin-top:30px;
}
.gallery-section-heading:first-child{ margin-top:50px; }

.masonry{
  columns:3 260px; column-gap:26px; margin-top:20px;
}
.masonry:first-child{ margin-top:50px; }
@media (max-width:700px){ .masonry{ columns:1; } }
.masonry figure{
  break-inside:avoid; margin:0 0 26px; background:var(--paper); padding:10px 10px 16px; box-shadow:var(--shadow); position:relative;
}
.masonry img{ width:100%; cursor:zoom-in; }
.masonry figcaption{
  font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft); padding:8px 4px 0; display:flex; justify-content:space-between; gap:10px;
}
.masonry figcaption a{ color:var(--rust-dark); text-transform:uppercase; letter-spacing:0.06em; }

/* ---- Tag filtering (Gallery page, and within an Adventure) ----
   Tags are grouped into facets (Subject / Format / Colour / Light) with
   a search box over the open-ended Subject group — see mountTagFilter()
   in js/main.js. */
.tag-filter{ margin:36px 0 6px; }
.tag-filter-search{ margin-bottom:14px; max-width:280px; }
.tag-filter-search input{
  width:100%; font-family:var(--mono); font-size:0.78rem;
  padding:8px 12px; border:1px solid var(--line); border-radius:20px; background:var(--cream);
  color:var(--ink); outline:none; transition:border-color .15s ease;
}
.tag-filter-search input::placeholder{ color:var(--ink-soft); }
.tag-filter-search input:focus{ border-color:var(--rust); }

.tag-filter-group{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.tag-filter-label{
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-soft); padding-top:9px; flex:0 0 auto; min-width:64px;
}
.tag-filter-chips{ display:flex; flex-wrap:wrap; gap:10px; flex:1 1 auto; }

.tag-filter button, .tag-filter-more, .tag-filter-clear{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:7px 14px; border:1px solid var(--line); border-radius:20px; background:var(--paper);
  color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
}
.tag-filter button:hover, .tag-filter-more:hover{ border-color:var(--rust); color:var(--rust-dark); }
.tag-filter button.active{ background:var(--rust); border-color:var(--rust); color:var(--cream); }
.tag-filter-more{ border-style:dashed; }
.tag-filter-clear{ display:block; margin-top:4px; border-color:var(--amber); color:var(--amber-dark); }
.tag-filter-clear:hover{ background:var(--amber); color:var(--cream); }
.tag-filter-empty-group{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); padding-top:9px; }
.tag-filter-empty{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin:36px 0 6px; }

@media (max-width:600px){
  .tag-filter-group{ flex-direction:column; gap:4px; }
  .tag-filter-label{ padding-top:0; }
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; background:rgba(12,18,20,0.92); display:none; align-items:center; justify-content:center; z-index:200; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox-content{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:92vw; max-height:88vh; }
.lightbox-content img{ max-height:80vh; max-width:92vw; box-shadow:0 30px 60px rgba(0,0,0,0.5); }
.lightbox-exif{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--cream); opacity:0.75; text-align:center;
}
.lightbox .close{
  position:absolute; top:22px; right:30px; color:var(--cream); font-family:var(--mono); font-size:1.6rem; cursor:pointer; background:none; border:none;
}
.lightbox .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--cream); background:none; border:none; cursor:pointer;
  font-family:var(--serif-display); font-size:2.6rem; line-height:1; padding:14px 18px;
  opacity:0.7; transition:opacity .15s ease;
}
.lightbox .nav-btn:hover{ opacity:1; }
.lightbox .nav-prev{ left:6px; }
.lightbox .nav-next{ right:6px; }
.lightbox-counter{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--cream); opacity:0.6; text-align:center;
}
@media (max-width:760px){
  .lightbox .nav-btn{ font-size:2rem; padding:10px 12px; }
  .lightbox .nav-prev{ left:0; }
  .lightbox .nav-next{ right:0; }
}

/* ---- Prints / commerce placeholder ---- */
.commerce-note{
  background:var(--paper); border:1px dashed var(--amber); padding:26px 28px; font-family:var(--mono); font-size:0.85rem; color:var(--ink-soft); margin:40px 0;
}
.commerce-note strong{ color:var(--amber-dark); }

/* ---- About / contact ---- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }

.contact-form{ display:grid; gap:16px; max-width:520px; }
.contact-form label{ font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
.contact-form input, .contact-form textarea{
  font-family:var(--serif-body); font-size:1rem; padding:12px 14px; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); width:100%;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-notice{
  font-family:var(--mono); font-size:0.8rem; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--line);
}
.form-notice--ok{ color:var(--forest); background:var(--paper); border-color:var(--mustard); }
.form-notice--error{ color:#7a2f2f; background:var(--paper); border-color:#b35b5b; }

/* ---- Footer ---- */
.site-footer{ background:var(--forest); color:#a9b7b0; padding:50px 0 34px; }
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; }
.footer-row a{ color:#a9b7b0; }
.footer-row a:hover{ color:var(--mustard); }

/* ---- Subscribe band (above the footer, every page) ---- */
.subscribe-band{ background:var(--forest-light); color:var(--cream); padding:44px 0; }
.subscribe-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.subscribe-copy h2{ font-family:var(--serif-display); font-size:1.4rem; margin:0 0 6px; color:var(--cream); }
.subscribe-copy p{ margin:0; color:#c3d0c9; font-size:0.92rem; max-width:42ch; }
.subscribe-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.subscribe-form input[type="text"], .subscribe-form input[type="email"]{
  font-family:var(--serif-body); font-size:0.95rem; padding:11px 14px; border:1px solid rgba(233,237,234,0.3);
  background:rgba(233,237,234,0.08); color:var(--cream); border-radius:var(--radius); width:200px;
}
.subscribe-form input[type="text"]::placeholder, .subscribe-form input[type="email"]::placeholder{ color:#a9b7b0; }
.subscribe-prefs{
  display:flex; gap:16px; flex-wrap:wrap; flex-basis:100%; margin:-2px 0 2px;
}
.subscribe-prefs label{
  display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.05em; color:#c3d0c9; cursor:pointer;
}
.subscribe-prefs input[type="checkbox"]{ accent-color:var(--amber); width:14px; height:14px; margin:0; }
.subscribe-form .btn-solid{ margin-top:0; }
.subscribe-form .form-notice{ flex-basis:100%; background:rgba(233,237,234,0.08); border-color:rgba(233,237,234,0.3); color:var(--cream); }
.subscribe-form .form-notice--ok{ border-color:var(--mustard); }
.subscribe-form .form-notice--error{ border-color:#c97a7a; color:#e6b8b8; }
@media (max-width:760px){
  .subscribe-row{ flex-direction:column; align-items:flex-start; }
  .subscribe-form input[type="text"], .subscribe-form input[type="email"]{ width:100%; }
}

.empty-state{ text-align:center; color:var(--ink-soft); font-family:var(--mono); padding:60px 0; }

/* ---- Embedded video (About page) ---- */
.video-embed{
  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
  background:var(--forest); box-shadow:var(--shadow); overflow:hidden;
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-caption{
  font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft);
  margin-top:14px; text-align:center;
}
.video-caption a{ text-transform:uppercase; letter-spacing:0.06em; }

/* ---- World map (map.html) ---- */
.world-map{
  height:70vh; min-height:420px; width:100%;
  box-shadow:var(--shadow);
  filter:grayscale(0.15) saturate(0.9);
}

/* ---- Per-Adventure mini map (adventure.html) — a small, zoomed-in
   companion to the world map above, showing just this Adventure's
   general area. See initAdventureMiniMap() in js/main.js. ---- */
.adv-area-row{
  display:flex; align-items:stretch; gap:24px; margin-top:22px; flex-wrap:wrap;
}
.adventure-map{
  height:220px; max-width:420px; width:100%; margin-top:0; flex:1 1 380px;
  box-shadow:var(--shadow);
  filter:grayscale(0.15) saturate(0.9);
}
/* The "About this area" box next to the mini map — height-matched to it
   (same 220px) so the pair reads as one tidy row rather than the text
   running on past the map. AreaDescriptionService's prompt targets a
   length that should comfortably fit here on its own (see the app), but
   that's a request to the AI, not a guarantee, and John can also type
   his own text in by hand with no length check at all — so rather than
   scrolling a box that's meant to sit neatly beside a map (scrolling
   inside a small decorative panel like this reads as broken, not as an
   affordance), an overlong paragraph is clipped to however many lines
   actually fit, with an ellipsis, via -webkit-line-clamp below. Six
   lines is what genuinely fits the 220px box at this font size/line
   height once the heading and padding are accounted for (measured, not
   guessed) — see the mobile override for the taller, auto-height box. */
.adv-area-description{
  flex:1 1 260px; height:220px; max-width:480px;
  background:rgba(233,237,234,0.06); border:1px solid rgba(233,237,234,0.18);
  border-radius:var(--radius); padding:16px 20px; box-sizing:border-box;
}
.adv-area-description h2{
  font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--mustard); margin:0 0 10px;
}
.adv-area-description p{
  font-family:var(--serif-body); font-size:0.92rem; line-height:1.55; color:#d9dfdc; margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
  overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:700px){
  .adv-area-row{ flex-direction:column; }
  .adv-area-description{ height:auto; max-height:260px; }
  .adv-area-description p{ -webkit-line-clamp:8; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:var(--paper); color:var(--ink); border-radius:var(--radius);
}
.map-popup{ display:flex; flex-direction:column; gap:4px; min-width:160px; font-family:var(--serif-body); }
.map-popup img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:4px; }
.map-popup strong{ font-family:var(--serif-display); color:var(--forest); font-size:1.05rem; }
.map-popup span{ font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }
.map-popup a{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; }