:root {
  --paper:#faf8f2;
  --card:#fffefa;
  --ink:#172f2b;
  --muted:#53665d;
  --green:#194a3e;
  --tint:#eaf0e6;
  --line:#d4dacf;
  --orange:#ef9b66;
  --serif:Georgia,"Times New Roman",serif;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column }
main { flex:1 }
button { font:inherit }
a { color:var(--green); text-underline-offset:.19em; text-decoration-thickness:1px }
button,a { touch-action:manipulation }
button { cursor:pointer }
:focus-visible { outline:3px solid #af531f; outline-offset:4px }
.wrap { width:min(100% - 3rem,72rem); margin-inline:auto }
.skip { position:fixed; z-index:10; inset:.5rem auto auto .5rem; transform:translateY(-160%); background:var(--card); padding:.6rem 1rem }
.skip:focus { transform:none }
.mast { background:var(--green); color:#fffdf6; border-bottom:3px solid var(--orange) }
.mast-row,.brand,.section-bar,.turn-page,.dialog-header,.place-links { display:flex; align-items:center; gap:1rem }
.mast-row { min-height:4.25rem; justify-content:space-between }
.brand { color:inherit; text-decoration:none; font:500 clamp(1.04rem,2.5vw,1.34rem)/1.1 var(--serif); gap:.7rem }
.mark { width:2.33rem;height:2.33rem;border:1px solid #a4bdaf;border-radius:7px;display:grid;place-items:center;color:#f8c19b;flex-shrink:0 }

h1,h2,h3,p { margin:0 }
h1,h2,h3 { color:var(--ink);text-wrap:balance;overflow-wrap:anywhere;line-height:1.09;font-family:var(--serif);font-weight:400 }
h1 { font-size:clamp(2.45rem,6.5vw,5.2rem);letter-spacing:-.045em }
h2 { font-size:clamp(1.8rem,3vw,2.75rem);letter-spacing:-.035em }
h3 { font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.025em }
.eyebrow { font-weight:720;letter-spacing:.11em;text-transform:uppercase;font-size:.69rem;color:var(--green);line-height:1.5;margin-bottom:.8rem }
.lead { font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.5;max-width:62ch;margin-top:1rem }
.button { display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:2.62rem;padding:.5rem 1rem;border:1px solid transparent;border-radius:6px;font-size:.9rem;font-weight:650;text-decoration:none;text-align:center }
.primary { color:#fffefa;background:var(--green) }
.primary:hover { background:#113a31 }
.ghost { color:var(--green);background:var(--card);border-color:#b5c3b8 }
.ghost:hover,.zone-link:hover { background:var(--tint) }
.footer { border-top:1px solid var(--line);padding:1.125rem 0 1.8rem;font-size:.8rem;color:var(--muted) }
.footer span { color:#a37550;margin:0 .4rem }
.footer p+p { margin-top:.3rem }

.index-intro { display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:clamp(2.6rem,7vw,5.6rem) 0 1.6rem }
.index-intro .button { flex-shrink:0 }
.directory { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.2rem;border-top:2px solid var(--green);margin:0 0 clamp(2.75rem,6vw,5rem) }
.zone-link { display:flex;align-items:baseline;gap:.85rem;min-height:5.25rem;border-bottom:1px solid var(--line);padding:1rem .5rem;text-decoration:none }
.zone-name { font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.15;color:var(--ink) }
.zone-name small { font:400 .82rem/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--muted);display:block;margin-top:.23rem }
.number,.ordinal { font:600 .77rem/1.4 ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--green) }
.arrow { margin-left:auto;color:#577164;font-size:1.2rem }
.crumb { margin-top:1.25rem;font-size:.87rem }
.zone-header { border-bottom:2px solid var(--green);padding:clamp(1.65rem,4vw,3rem) 0 clamp(1.4rem,3.5vw,2.5rem) }
.subtitle { font-size:clamp(1.05rem,2vw,1.35rem);font-weight:640;color:var(--green);margin-top:.4rem }
.route-note { font-size:.94rem;max-width:78ch;margin-top:.55rem;color:var(--muted) }
.section-bar { justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;margin:1.8rem 0 1.2rem }
.section-bar a { font-size:.86rem }
.landmarks { margin:2rem 0 2.4rem }
.landmark-legend { margin:.6rem 0 1rem;max-width:76ch;color:var(--muted);font-size:.91rem }
.landmark-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.85rem;padding:0;margin:0;list-style:none }
.landmark-list li { display:flex;flex-direction:column;padding:1.05rem 1.15rem;border:1px solid var(--line);border-radius:8px;background:var(--card) }
.landmark-list .eyebrow { margin-bottom:.4rem }
.landmark-list h3 { font-size:1.42rem }
.landmark-card { min-width:0 }
.landmark-photo { margin:.85rem 0 .3rem }
.landmark-photo .image-frame { border-radius:5px }
.landmark-photo .image-frame:not([data-zoom]) { cursor:pointer }
.landmark-photo .image-frame img { object-fit:cover }
.landmark-photo iframe { display:block;width:100%;height:25rem;border:1px solid var(--line);border-radius:5px;background:var(--card) }
.landmark-photo iframe.flickr-photo { height:auto;aspect-ratio:4/3 }
.landmark-caption { margin:.45rem 0 .15rem;color:var(--ink);font-size:.84rem;line-height:1.4 }
.landmark-photo .credits { border:0;padding:0 }
.landmark-note { margin:.6rem 0 .8rem;font-size:.95rem }
.landmark-distance { margin-top:auto;color:var(--muted);font-size:.83rem }
.landmark-distance a { color:inherit;text-decoration-style:dotted }
.landmark-links { display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.55rem;font-size:.88rem }
.gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem }
.place { min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column }
.image-frame,.outside-photo { aspect-ratio:16/10;position:relative;background:#e6e9df;display:flex;align-items:center;justify-content:center;overflow:hidden }
.image-frame { cursor:zoom-in }
.image-frame img { display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0 }
.image-frame:focus-visible { outline-offset:-4px;z-index:1 }
.enlarge { position:absolute;right:.65rem;bottom:.65rem;background:#18392edc;color:white;line-height:1;font-size:1.1rem;border-radius:5px;padding:.31rem .48rem }
.image-frame.unloaded { cursor:pointer }
.unloaded img { visibility:hidden }
.unloaded .enlarge { position:static;font-size:.9rem;font-weight:600;line-height:1.5;padding:.6rem .9rem }
.outside-photo { padding:2rem;align-items:flex-start;flex-direction:column;border-bottom:1px solid var(--line) }
.outside-photo p { line-height:1.35;font-family:var(--serif);font-size:1.25rem }
.outside-photo .button { margin-top:1rem }
.place-body { padding:clamp(1.15rem,2.15vw,1.75rem);display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:.68rem }
.place-body .eyebrow { margin:0 }
.ordinal { margin-right:.5rem;padding-right:.45rem;border-right:1px solid #96a998 }
.scene,.location { font-size:.89rem;color:var(--muted) }
.location { border-left:2px solid #dca57d;padding-left:.65rem }
.place-links { gap:.8rem;flex-wrap:wrap;margin:.1rem 0 .5rem }
.place-links>a:not(.button) { font-size:.85rem }
.credits { padding-top:.75rem;border-top:1px solid var(--line);margin-top:auto;width:100%;font-size:.76rem;color:var(--muted);overflow-wrap:anywhere }
.credits span { display:block }
.panoramas { margin-top:clamp(2.5rem,6vw,5rem);scroll-margin-top:1rem }
.stops { list-style:none;margin:1.2rem 0 0;padding:0;border-top:2px solid var(--green) }
.stops li { display:grid;grid-template-columns:1.65rem 1fr auto;align-items:start;gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--line) }
.stops .number { padding-top:.32rem }
.stops h3 { font-size:clamp(1.2rem,2.2vw,1.55rem) }
.stops p { margin-top:.43rem;font-size:.94rem }
.stops small { display:block;color:var(--muted);font-size:.79rem;margin-top:.35rem }
.turn-page { justify-content:space-between;align-items:flex-start;margin:2rem 0 3rem;font-size:.91rem }
.next { margin-left:auto;text-align:right }
.notice { max-width:48rem;padding:clamp(3.2rem,8vw,6rem) 0 }
.notice p+p,.notice .button { margin-top:1.25rem }
dialog { padding:0;border:0;border-radius:10px;max-width:min(66rem,95vw);width:100%;max-height:92vh;max-height:92dvh;color:var(--ink);background:var(--card) }
dialog::backdrop { background:#102c24dc }
.dialog-header { justify-content:space-between;padding:.75rem 1rem }
.dialog-header h2 { font-size:1.32rem }
.dialog-header .button { min-height:2.25rem;white-space:nowrap }
#dialog-image { background:#e6e9df }
#dialog-image img { display:block;width:100%;max-height:65vh;object-fit:contain }
#dialog-caption { padding:1rem;line-height:1.4 }
#dialog-caption .credits { margin-top:.65rem }
@media (max-width:780px) {
  .index-intro { align-items:flex-start;flex-direction:column;gap:1.1rem }

  .gallery { gap:.9rem }
  .stops li { grid-template-columns:1.45rem 1fr }
  .stops .button { grid-column:2;justify-self:start }
}
@media (max-width:600px) {
  .wrap { width:calc(100% - 2rem) }
  .mast-row { min-height:3.7rem;gap:.6rem }
  .brand { gap:.5rem }

  .gallery,.directory { grid-template-columns:1fr }

  .directory { column-gap:0 }
  .zone-link { min-height:4.2rem;padding:.8rem .3rem }
  .image-frame,.outside-photo { aspect-ratio:16/10 }
  .notice h1 { font-size:2.5rem }
}