/* The atlas shares the field guide's typefaces, paper and landscape photography. */
:root {
  --atlas-ink: #183b2c;
  --atlas-paper: #f7f5ec;
  --atlas-ochre: #e8bc66;
}
.site-header.wrap { border-color: transparent; }
#site-nav a { font-size: .88rem; }
.atlas-kicker { margin: 0 0 1rem; font: 650 .74rem/1.25 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.atlas-opening { position: relative; background: var(--paper); }
.atlas-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(440px, 64vh, 650px); background: #243b38; color: #fff; }
.atlas-panorama { position: absolute; z-index: -1; inset: 0; margin: 0; overflow: hidden; }
.atlas-panorama img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 46%; }
.atlas-panorama::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,29,24,.83), rgba(8,29,24,.54) 38%, rgba(8,29,24,.04) 71%),linear-gradient(0deg, rgba(8,29,24,.28),transparent 32%); }
.atlas-panorama figcaption { position: absolute; z-index: 1; right: var(--page-gutter); bottom: 29px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; color: white; font-size: .76rem; padding: 1px 12px; border-radius: 2px; background: rgba(16,41,31,.82); }
.atlas-panorama figcaption .photo-credit { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.atlas-hero-words { padding-block: clamp(45px,5vw,82px) 64px; }
.atlas-hero-words .atlas-kicker { display: inline-flex; align-items: center; gap: .75rem; color: #ffe1a4; }
.atlas-hero-words .atlas-kicker::before { content: ''; display: inline-block; width: 32px; height: 2px; background: currentColor; }
.atlas-hero-words h1 { margin: 0; color: #fffaf0; font-family: var(--display); font-size: clamp(6.5rem, 10.4vw, 10rem); font-weight: 400; line-height: .78; letter-spacing: -.035em; }
.atlas-hero-words h1 em { display: inline-block; margin-top: .045em; color: #ffe1a4; font-family: var(--editorial-italic); font-size: .68em; font-style: italic; font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.atlas-hero-words > p:last-child { width: 36ch; max-width: 55%; margin: 1.5rem 0 0; color: #fffcf6; font-size: clamp(1rem,1.35vw,1.3rem); line-height: 1.45; }
.atlas-finder-wrap { position: relative; }
.atlas-transit-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--atlas-ink); text-underline-offset: .22em; font-weight: 650; }
.transport-checklist { margin-block: 2rem 3rem; padding-block: 1.4rem; border-block: 1px solid #b8c2b4; }
.transport-checklist h2 { margin: 0; color: var(--atlas-ink); font: 600 clamp(1.65rem,3vw,2.25rem)/1.18 var(--serif); }
.transport-checklist p { max-width: 60ch; }
.atlas-search { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(140px,.55fr); background: var(--atlas-paper); border-bottom: 1px solid #9ca99a; padding: 1.1rem 0; gap: 0; }
.atlas-select { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 0 clamp(15px,2.5vw,42px); border-right: 1px solid #b8c2b4; }
.atlas-select:first-child { padding-left: 0; }
.atlas-select > span { color: #4c6351; font-size: .69rem; letter-spacing: .09em; font-weight: 650; text-transform: uppercase; line-height: 1.1; }
.atlas-select select { display: block; width: 100%; min-height: 44px; margin: 0; padding: .1rem .1rem .1rem 0; border: 0; background: transparent; color: var(--atlas-ink); font-size: clamp(1rem,1.45vw,1.35rem); font-weight: 600; cursor: pointer; }
.atlas-search button { align-self: center; min-height: 52px; margin-left: clamp(14px,2.5vw,42px); padding: 10px 18px; background: var(--atlas-ink); border: 1px solid var(--atlas-ink); color: var(--atlas-paper); font-weight: 650; white-space: nowrap; }
.atlas-search button:hover { color: var(--atlas-ink); background: var(--atlas-ochre); }
.atlas-search :focus-visible, .atlas-jump :focus-visible { outline: 3px solid #b36a1a; outline-offset: 3px; }
.atlas-landscapes { display: grid; align-items: start; gap: clamp(30px,7vw,150px); grid-template-columns: .9fr 1.25fr; padding-block: clamp(56px,7vw,110px); }
.atlas-section-heading h2, .atlas-walks-head h2, .atlas-prep h2 { margin: 0; font: 600 clamp(2.7rem,4.5vw,5rem)/.99 var(--serif); letter-spacing: -.055em; }
.atlas-section-heading h2 em, .atlas-walks-head h2 em, .atlas-prep h2 em { font-family: var(--editorial-italic); font-style: italic; font-weight: 400; }
.atlas-section-heading > p:last-child { margin: 1.2rem 0 0; max-width: 36ch; font-size: 1.07rem; line-height: 1.55; }
.atlas-index { border-top: 1px solid #53705d; }
.atlas-index-row { display: grid; grid-template-columns: 22px 1fr auto; gap: clamp(10px,1.5vw,24px); align-items: center; min-height: 63px; padding: 10px 7px; border-bottom: 1px solid #abbaaa; text-decoration: none; }
.atlas-index-row:hover, .atlas-index-row:focus-visible { background: #e6ebdd; }
.atlas-index-title { font: 600 clamp(1.32rem,2vw,1.85rem)/1.16 var(--serif); letter-spacing: -.025em; }
.atlas-index-count { white-space: nowrap; text-align: right; font-size: .85rem; color: #3f5b49; }
.atlas-category-symbol { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #39734c; }
.symbol-mountain { clip-path: polygon(0 90%,42% 12%,58% 39%,70% 24%,100% 90%); border-radius: 0; }
.symbol-river { background: repeating-linear-gradient(140deg, transparent 0 3px, #36768b 3px 6px); border-radius: 18px 0; }
.symbol-coast { border-radius: 50% 0 50% 0; background: #246b72; transform: rotate(-15deg); }
.symbol-beach { border-radius: 50% 50% 0 0; height: 11px; background: #b37c2b; }
.symbol-recreation { background: #997652; border-radius: 45% 45% 8% 8%; }
.atlas-walks { padding-block: clamp(52px,6.3vw,94px); background: var(--atlas-ink); color: var(--atlas-paper); }
.atlas-walks-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(24px,3vw,44px); }
.atlas-walks-head .atlas-kicker { color: var(--atlas-ochre); }
.atlas-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; font-size: .94rem; font-weight: 650; }
.atlas-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.atlas-walk-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,2.5vw,42px); }
.atlas-walk-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #65745d; }
.atlas-walk-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atlas-walk-meta { margin-top: 17px; color: #ebcf96; text-transform: uppercase; font-size: .71rem; font-weight: 600; letter-spacing: .09em; }
.atlas-walk h3 { margin: 7px 0 0; font: 600 clamp(1.5rem,2.15vw,2.5rem)/1.15 var(--serif); letter-spacing: -.04em; }
.atlas-walk h3 a { display: inline-block; min-height: 44px; text-decoration: none; }
.atlas-walk h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.atlas-walk p { color: #d3dfcf; margin: 3px 0 0; font-size: .9rem; }
.atlas-prep { display: grid; grid-template-columns: 1fr .85fr auto; align-items: center; gap: 35px; padding-block: clamp(50px,6vw,95px); }
.atlas-prep > p { max-width: 33ch; font-size: 1.04rem; }
.atlas-jump { display: flex; flex-wrap: wrap; gap: 4px clamp(12px,2.3vw,32px); margin-top: 1rem; }
.atlas-jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: .94rem; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .atlas-hero { min-height: 380px; }
  .atlas-hero-words { padding-block: 34px 95px; }
  .atlas-hero-words h1 { font-size: clamp(5.8rem,16vw,7.2rem); }
  .atlas-hero-words > p:last-child { max-width: 82%; width: 30ch; margin-top: .85rem; }
  .atlas-panorama figcaption { left: var(--page-gutter); right: auto; bottom: 12px; }
  .atlas-panorama::after { background: linear-gradient(90deg,rgba(8,29,24,.78),rgba(8,29,24,.4) 57%,rgba(8,29,24,.05)),linear-gradient(0deg,rgba(8,29,24,.4),transparent 45%); }
  .atlas-search { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 0; padding: 13px 0 17px; }
  .atlas-select { padding-inline: 12px; }
  .atlas-select:nth-child(2) { border-right: 0; padding-right: 0; }
  .atlas-search button { grid-column: 1/-1; margin: 0; min-height: 44px; }
  .atlas-landscapes { grid-template-columns: 1fr; gap: 22px; }
  .atlas-section-heading > p:last-child { max-width: 45ch; }
  .atlas-walk-grid { grid-template-columns: 1fr; gap: 28px; }
  .atlas-walk-image { aspect-ratio: 16/10; }
  .atlas-walks-head { flex-wrap: wrap; }
  .atlas-prep { grid-template-columns: 1fr; gap: 14px; }
  .atlas-prep > p { margin: 0; }
  .atlas-prep .atlas-link { justify-self: start; }
}
@media (max-width: 370px) {
  .atlas-hero { min-height: 350px; }
  .atlas-panorama figcaption { font-size: .65rem; gap: 0 5px; padding-inline: 6px; }
  .atlas-index-row { grid-template-columns: 15px 1fr auto; gap: 8px; padding-inline: 1px; }
  .atlas-category-symbol { width: 14px; }
  .atlas-index-title { font-size: 1.2rem; }
  .atlas-index-count { font-size: .74rem; }
}
@media print {
  .atlas-hero { min-height: auto; color: black; background: white; }
  .atlas-panorama, .atlas-finder-wrap { display: none; }
  .atlas-hero-words h1, .atlas-hero-words h1 em, .atlas-hero-words > p:last-child { color: black; }
}