:root {
  --ink: #172126;
  --muted: #607077;
  --paper: #fbfaf7;
  --line: #dcd9d1;
  --accent: #176b73;
  --deep: #142429;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; }
a { color: var(--accent); }
.site-header { height: 70px; display: flex; align-items: center; padding: 0 clamp(18px, 4vw, 58px); position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.brand { color: var(--ink); text-decoration: none; font-size: 24px; letter-spacing: .23em; font-weight: 500; }
.site-header nav { margin-left: auto; display: flex; gap: 25px; }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
.nav-toggle { display: none; margin-left: auto; border: 0; background: transparent; font-size: 24px; }
.destination-home { max-width: 1420px; margin: auto; padding: 20px clamp(14px, 3vw, 38px) 70px; }
.home-intro { display: flex; align-items: baseline; gap: 15px; padding: 6px 2px 14px; }
.home-intro strong { font-size: 13px; letter-spacing: .17em; }
.home-intro span { color: var(--muted); font-size: 14px; }
.deep-destination-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 14px; min-height: 520px; }
.destination-card { position: relative; overflow: hidden; min-height: 300px; border-radius: 8px; background-size: cover; background-position: center; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(16,26,30,.13); transition: transform .18s ease; }
.destination-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.03) 25%,rgba(0,0,0,.78)); }
.destination-card:hover { transform: translateY(-2px); }
.destination-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 26px; }
.destination-copy span { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.destination-copy h2 { margin: 5px 0 7px; font-family: var(--serif); font-size: clamp(27px, 3vw, 42px); font-weight: 400; line-height: 1.05; }
.destination-copy p { margin: 0; color: rgba(255,255,255,.9); max-width: 440px; font-size: 14px; }
.camino-card { background: radial-gradient(circle at 72% 25%,#d2a24a 0 7%,transparent 8%), linear-gradient(145deg,#8f642f,#45331f); }
.camino-card:before { content: '→'; position: absolute; right: 35px; top: 25px; font-size: 135px; font-weight: 800; color: rgba(255,255,255,.22); transform: rotate(-15deg); }
.mini-heading { display: flex; align-items: baseline; gap: 14px; margin: 34px 2px 12px; }
.mini-heading strong { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.mini-heading span { color: var(--muted); font-size: 13px; }
.mini-destination-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.mini-destination-grid .destination-card { min-height: 240px; }
.mini-destination-grid .destination-copy { padding: 18px; }
.mini-destination-grid .destination-copy h2 { font-size: 25px; }
.mini-destination-grid .destination-copy p { font-size: 12px; }
.galapagos-card { background: linear-gradient(155deg,#1f7c91,#173d52); }
.iceland-card { background: linear-gradient(155deg,#8095a1,#31454f); }
.norway-card { background: linear-gradient(155deg,#315f65,#162f39); }
.banff-card { background: linear-gradient(155deg,#617e83,#263e46); }
.burning-card { background: linear-gradient(155deg,#a96d42,#4b2c26); }
.home-explainer { max-width: 880px; margin: 45px auto 0; font-family: var(--serif); font-size: 21px; text-align: center; color: #46545a; }
.guide-top { background: var(--deep); color: #fff; }
.guide-cover { height: min(48vh,560px); min-height: 320px; background-size: cover; background-position: center; }
.guide-title { max-width: 1050px; margin: auto; padding: 44px 26px 48px; }
.guide-title > span, .note-top > span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.guide-title h1, .note-top h1, .plain h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 70px); line-height: 1; margin: 8px 0 14px; }
.guide-title p { font-size: 19px; color: #dce4e5; max-width: 820px; margin: 0; }
.guide-meta { margin-top: 17px; font-size: 13px; color: #bdcbce; }
.guide-shell { max-width: 1100px; margin: auto; padding: 45px 26px 95px; }
.legacy-guide { max-width: 850px; font-family: var(--serif); font-size: 18px; line-height: 1.72; }
.legacy-guide h2 { scroll-margin-top: 90px; font-family: var(--sans); font-size: 30px; line-height: 1.18; margin: 50px 0 15px; }
.legacy-guide h3, .legacy-guide h4 { font-family: var(--sans); }
.legacy-guide img { max-width: 100%; height: auto; display: block; margin: 22px auto; border-radius: 4px; }
.legacy-guide figure { margin: 28px 0; }
.legacy-guide figcaption { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.legacy-guide ul, .legacy-guide ol { padding-left: 24px; }
.legacy-guide table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.legacy-guide th, .legacy-guide td { border: 1px solid var(--line); text-align: left; padding: 8px; vertical-align: top; }
.table-wrap { overflow-x: auto; margin: 25px 0; }
.full-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 24px 0 35px; }
.full-gallery img { margin: 0; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.year-note, .callout { font-family: var(--sans); padding: 15px 18px; border-radius: 7px; font-size: 14px; margin: 0 0 28px; }
.year-note { background: #f2eee5; }
.callout { background: #edf5f4; border-left: 4px solid var(--accent); }
.lessons { font-family: var(--sans); background: #f1eee7; padding: 24px; border-radius: 10px; margin: 40px 0; }
.lessons h2 { margin-top: 0; }
.figure-note { font-family: var(--sans); padding: 13px 16px; background: #f5f5f3; border: 1px dashed #bbb; border-radius: 7px; }
.note-page { max-width: 980px; margin: auto; padding: 70px 26px 100px; }
.note-top { padding-bottom: 35px; border-bottom: 1px solid var(--line); }
.note-top p { font-size: 19px; color: var(--muted); }
.note-page article { max-width: 760px; font-family: var(--serif); font-size: 18px; }
.note-page h2 { font-family: var(--sans); margin-top: 42px; }
.plain { max-width: 950px; margin: auto; padding: 70px 26px 100px; }
.plain p { font-size: 18px; color: var(--muted); }
.photo-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.photo-strip img { width: 100%; height: 260px; object-fit: cover; border-radius: 6px; }
footer { max-width: 1420px; margin: auto; border-top: 1px solid var(--line); padding: 32px clamp(18px,4vw,58px) 50px; display: flex; justify-content: space-between; gap: 25px; color: var(--muted); }
footer .small { max-width: 540px; font-size: 12px; }
@media (max-width: 980px) {
  .deep-destination-grid { grid-template-columns: 1fr 1fr; min-height: auto; }
  .deep-destination-grid .destination-card:first-child { grid-column: 1 / -1; min-height: 440px; }
  .mini-destination-grid { grid-template-columns: repeat(2,1fr); }
  .full-gallery { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 700px) {
  .site-header { height: 64px; }
  .brand { font-size: 19px; }
  .nav-toggle { display: block; }
  .site-header nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 16px; background: var(--paper); padding: 20px 24px; border-bottom: 1px solid var(--line); }
  .site-header nav.open { display: flex; }
  .destination-home { padding-top: 10px; }
  .home-intro { padding-bottom: 10px; }
  .deep-destination-grid { display: block; }
  .deep-destination-grid .destination-card { display: block; min-height: 320px; margin-bottom: 10px; }
  .deep-destination-grid .destination-card:first-child { min-height: 360px; }
  .mini-destination-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mini-destination-grid .destination-card { min-height: 210px; }
  .destination-copy h2 { font-size: 29px; }
  .mini-destination-grid .destination-copy h2 { font-size: 21px; }
  .guide-cover { min-height: 250px; height: 37vh; }
  .guide-title { padding: 34px 20px 38px; }
  .guide-shell { padding: 34px 20px 75px; }
  .legacy-guide { font-size: 17px; }
  .legacy-guide h2 { font-size: 25px; }
  .full-gallery { grid-template-columns: repeat(2,1fr); }
  footer { display: block; }
  footer .small { margin-top: 14px; }
}
@media (max-width: 430px) {
  .mini-destination-grid { grid-template-columns: 1fr; }
  .mini-destination-grid .destination-card { min-height: 190px; }
  .full-gallery { grid-template-columns: 1fr 1fr; gap: 5px; }
}


html { scroll-behavior: auto; }
[id] { scroll-margin-top: 95px; }
.legacy-guide { max-width: 850px; margin: auto; overflow-wrap: anywhere; }
.legacy-guide p { margin: 0 0 1.25em; }
.legacy-guide h2 { font-size: 27px; }
.legacy-guide h2 a { font-size: 14px; font-weight: normal; }
.guide-shell { padding-top: 28px; }
.guide-top .guide-cover { min-height: 180px; height: 240px; }
.guide-title h1 { font-size: clamp(36px,5vw,60px); }
.guide-title { padding: 30px 26px; }
.guide-toc { max-width: 850px; margin: 0 auto 35px; font-size: 16px; }
.guide-toc ul { columns: 2; padding-left: 20px; }
.guide-toc li { margin: 7px 0; break-inside: avoid; }
.section-start { padding-top: 28px; border-top: 1px solid var(--line); }
.source-image-link { display: block; }
.guide-controls { display:flex; flex-wrap:wrap; gap:20px; max-width:850px; margin: 0 auto 30px; }
.back-to-contents { position:fixed; bottom:18px; right:18px; padding:10px 18px; border-radius:24px; background:var(--deep); color:white; font:14px var(--sans); text-decoration:none; z-index:20; }
.full-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.full-gallery figure { margin:0; }
.full-gallery figcaption { margin:6px 0 12px; font-size:14px; }
.full-gallery img { height:180px; }
.source-caption { font-size:16px; }
.destination-copy span,.guide-title>span { font-size:13px; }
.mini-destination-grid .destination-copy p,.mini-heading span,footer .small { font-size:14px; }
.site-header nav a:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid #d49d29;outline-offset:4px; }
@media(max-width:700px) { .guide-toc ul {columns:1;} .full-gallery {grid-template-columns:repeat(2,minmax(0,1fr));} .full-gallery img {height:130px;} .guide-title h1 {font-size:36px;} }
@media print { .site-header,.back-to-contents,.guide-controls,footer {display:none;} .guide-cover {display:none;} .guide-title {background:white;color:black;} .guide-title p {color:black;} }

/* Consistent modern typography throughout the site. */
:root { --serif: Arial, Helvetica, sans-serif; --sans: Arial, Helvetica, sans-serif; }
body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
.legacy-guide { font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.8; }
.full-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0 16px; }
.full-gallery figure { position: relative; margin: 0; min-width: 0; }
.full-gallery a { display: block; border-radius: 10px; overflow: hidden; background: #e4e8ea; }
.full-gallery img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; margin: 0; border-radius: 0; transition: transform .2s; }
.full-gallery a:hover img { transform: scale(1.035); }
.full-gallery figcaption { font-size: 14px; line-height: 1.4; margin: 7px 2px 12px; }
.full-gallery .photo-number { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 3px 8px; border-radius: 20px; background: #142429d9; color: white; font-size: 12px; pointer-events: none; }
.full-gallery figure[hidden] { display: none; }
.gallery-expand { display: block; margin: 0 auto 36px; padding: 12px 22px; border: 1px solid #bbc6ca; border-radius: 24px; background: transparent; color: #172126; font-size: 15px; cursor: pointer; }
.photo-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #172126; overflow: hidden; }
.photo-viewer::backdrop { background: #fff; }
.photo-viewer[open] { display: block; }
.viewer-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img { display: block; width: calc(100vw - 8px); height: calc(100vh - 8px); height: calc(100dvh - 8px); max-width: none; max-height: none; object-fit: contain; }
.viewer-stage img[hidden] { display: none; }
.viewer-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; }
.viewer-top p { margin: 0; padding: 8px 10px; font-size: 13px; background: #ffffffe8; border-radius: 6px; }
.photo-viewer button, .photo-viewer a { color: #172126; background: #ffffffe8; border: 1px solid #e5e7e9; border-radius: 6px; padding: 10px 14px; font: 14px Arial, Helvetica, sans-serif; text-decoration: none; cursor: pointer; pointer-events: auto; }
.photo-viewer button:hover, .photo-viewer a:hover { background: #f1f3f4; }
.photo-viewer button:disabled { opacity: .25; cursor: default; }
.photo-viewer .viewer-prev, .photo-viewer .viewer-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; padding: 0; font-size: 46px; line-height: 1; z-index: 3; }
.viewer-prev { left: 10px; }
.viewer-next { right: 10px; }
.viewer-original { position: absolute; bottom: 12px; right: 14px; z-index: 2; }
.viewer-caption { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 300px); margin: 0; padding: 6px 10px; border-radius: 6px; background: #ffffffe8; color: #172126; font-size: 13px; text-align: center; z-index: 2; }
.viewer-caption:empty { display: none; }
.viewer-error { position: absolute; top: 45%; left: 15%; right: 15%; text-align: center; z-index: 2; background: white; }
.viewer-error[hidden] { display: none; }
body.photo-open { overflow: hidden; }
@media(max-width:700px) {
  .full-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .photo-viewer .viewer-prev, .photo-viewer .viewer-next { width: 40px; height: 52px; font-size: 36px; }
  .viewer-prev { left: 4px; }
  .viewer-next { right: 4px; }
  .viewer-caption { bottom: 54px; max-width: calc(100% - 28px); }
}
@media(prefers-reduced-motion:reduce) { .full-gallery img { transition:none; } }


/* Dated photo journal: original proportions and closely spaced rows. */
.photo-journal { padding: 24px 12px 48px; background: white; }
.journal-heading { max-width: 1100px; margin: 12px auto 32px; text-align: center; }
.journal-heading h1 { font-size: clamp(30px,4vw,48px); margin: 10px 0; }
.journal-heading p { color: #5d696e; }
.photo-day { margin: 0 0 28px; }
.photo-day h2 { font: 500 22px Arial, sans-serif; margin: 24px 0 12px; }
.dated-row { display: flex; flex-wrap: wrap; gap: 4px; }
.dated-row figure { margin: 0; width: 220px; }
.dated-row a { display: block; width: 100%; height: 100%; }
.dated-row img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; background: #f6f6f6; }

.dated-gallery { display: flex; flex-wrap: wrap; gap: 4px; }
.photo-day, .dated-row { display: contents; }
.dated-row figure { position: relative; margin: 0; }
.photo-day h2 { position: absolute; top: 0; left: 0; margin: 0; height: 36px; font-size: 18px; line-height: 36px; white-space: nowrap; }
.dated-row a { margin-top: 36px; height: calc(100% - 36px); }
@media(max-width:600px) { .photo-day h2 { font-size: 14px; } }

/* Clickable journal previews within each guide. */
.journal-preview{margin:24px 0 36px;}
.journal-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.journal-preview-grid a{display:block;text-decoration:none;color:inherit;}
.legacy-guide .journal-preview-grid img{display:block;width:100%;height:190px;object-fit:cover;object-position:center top;border-radius:5px;margin:0;}
.journal-preview-grid span{display:block;font-size:14px;line-height:1.4;margin:6px 0 12px;}
.journal-preview-grid a:hover img{filter:brightness(.9);}
.journal-preview-grid a:focus-visible{outline:3px solid #28636b;outline-offset:3px;}
.journal-preview-link{font-weight:600;}
@media(max-width:600px){.journal-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.legacy-guide .journal-preview-grid img{height:145px;}}