:root{--site-header-block:72px;--dossier-shelf-gap:12px}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--site-header-block);padding:10px clamp(20px,4vw,64px);border-bottom:1px solid rgba(240,234,223,.16);background:rgba(9,11,11,.96);backdrop-filter:blur(18px);color:#f0eadf;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.site-header .site-brand{display:inline-flex;align-items:center;gap:12px;flex:none;white-space:nowrap;color:#f0eadf;font:400 18px/1 Georgia,serif;letter-spacing:.2em;text-decoration:none}
.site-header .brand-mark{display:inline-block;flex:none}
.site-header .brand-mark{width:27px;height:31px;border:1px solid #c8a96d;border-radius:15px 15px 2px 2px;position:relative}
.site-header .brand-mark:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#f7f0e3;top:8px;right:3px}
.site-header .brand-mark span{width:8px;height:13px;border-left:1px solid #c8a96d;border-bottom:1px solid #c8a96d;position:absolute;bottom:3px;left:7px}
.skip-link{position:fixed;left:12px;top:-80px;z-index:1000;background:#f0eadf;color:#090b0b;padding:10px 14px;text-decoration:none}.skip-link:focus{top:12px}
.site-desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2vw,30px);min-width:0}
.site-header .site-nav,.site-header .site-utilities{display:flex;align-items:center;gap:clamp(4px,.65vw,11px)}
.site-header a:not(.site-brand){display:inline-flex;align-items:center;min-height:44px;padding:8px 7px;color:#bdb6aa;text-decoration:none;font:500 12px/1.25 Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap}
.site-header a:hover,.site-header a:focus-visible,.site-header a[aria-current="page"]{color:#f0eadf}
.site-header a[aria-current="page"]{box-shadow:inset 0 -2px #c8a96d}
.site-header .site-utilities{padding-left:clamp(8px,1.3vw,18px);border-left:1px solid #414039}
.site-header .site-utilities a:last-child{color:#e2c58f}
.site-header :focus-visible,.site-footer a:focus-visible{outline:2px solid #e2c58f;outline-offset:3px}
.site-mobile-menu{display:none;position:relative}
.site-mobile-menu summary{list-style:none;min-height:44px;display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid #6a6359;border-radius:3px;color:#f0eadf;cursor:pointer;font:500 12px Inter,ui-sans-serif,system-ui,sans-serif}
.site-mobile-menu summary::-webkit-details-marker{display:none}
.site-mobile-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(350px,calc(100vw - 32px));padding:16px;background:#111311;border:1px solid #555046;box-shadow:0 16px 50px #000a}
.site-mobile-panel .site-nav,.site-mobile-panel .site-utilities{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.site-mobile-panel .site-utilities{margin-top:10px;padding:10px 0 0;border-left:0;border-top:1px solid #414039}
.site-mobile-panel a{white-space:normal!important}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px clamp(20px,4vw,64px);border-top:1px solid #36342f;background:#090b0b;color:#9d978e;font:italic 13px/1.4 Georgia,serif}
.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 20px}
.site-footer a{color:#bdb6aa;text-decoration:none;font:500 12px/1.4 Inter,ui-sans-serif,system-ui,sans-serif}
.site-footer a:hover{color:#f0eadf}
.site-footer .footer-promise a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:#f0eadf;font:italic 13px/1.4 Georgia,serif;text-decoration:underline;text-underline-offset:3px}
.site-footer .footer-promise a:hover,.site-footer .footer-promise a:focus-visible{color:#f0eadf}
@media(max-width:1120px){.site-desktop-nav{display:none}.site-mobile-menu{display:block}}
@media(max-width:650px){.site-header{min-height:64px;padding-inline:16px}.site-header .site-brand{font-size:15px;letter-spacing:.14em}.site-footer{align-items:flex-start;flex-direction:column}}
.trails-index-list{list-style:none;padding:0;margin:0;border-top:1px solid #36342f}
.trails-index-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:28px 0;border-bottom:1px solid #36342f}
.trails-index-number{padding-top:8px;color:#c8a96d;font:600 11px/1.2 ui-monospace,monospace}
.trails-index-list h2{margin:0 0 12px;font:400 clamp(30px,4vw,50px)/1.05 Georgia,serif;letter-spacing:-.035em}
.trails-index-list h2 a{color:#f0eadf;text-decoration:none}
.trails-index-list h2 a:hover,.trails-index-list h2 a:focus-visible{text-decoration:underline;text-decoration-color:#c8a96d;text-underline-offset:5px}
.trails-index-list p{max-width:68ch;margin:0 0 14px;color:#bdb6aa;line-height:1.6}
.trails-index-action{display:inline-flex;align-items:center;min-height:44px;color:#c8a96d;font-size:12px;line-height:1.3;text-decoration:none}
.trails-index-action:hover,.trails-index-action:focus-visible{color:#f0eadf;text-decoration:underline;text-decoration-color:#c8a96d;text-underline-offset:4px}
.trails-index-action:focus-visible{outline:2px solid #e2c58f;outline-offset:3px}
.trails-index-list p.trails-index-stops{margin:0 0 12px;color:#bdb6aa;font:500 13px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:none}
@media(max-width:650px){.trails-index-list li{grid-template-columns:32px minmax(0,1fr);gap:12px}}
.trails-index-with-cover{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:8px 32px;align-items:start}
.trail-cover-link{display:block;color:inherit;text-decoration:none}
.trail-cover-link:focus-visible{outline:2px solid #e2c58f;outline-offset:3px}
.trail-cover{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#141615}
.trail-cover-figure{margin:28px 0 0}
.trail-cover-figure .trail-cover{width:min(100%,420px)}
@media(max-width:650px){.trails-index-with-cover{grid-template-columns:minmax(0,1fr)}.trails-index-with-cover .trail-cover-link{max-width:220px}}
@media(min-width:1100px){
  .public-page-head.has-trail-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);column-gap:48px;align-items:start;max-width:1080px}
  .public-page-head.has-trail-cover > :not(.trail-cover-figure){grid-column:1}
  .public-page-head.has-trail-cover .trail-cover-figure{grid-column:2;grid-row:1 / span 5;margin:36px 0 0}
  .public-page-head.has-trail-cover .trail-cover{width:100%}
}
.site-footer .dossier-feed-link{display:inline-flex;align-items:center;min-height:24px}
/* Desktop Dossier shelf sticks under the site header. When the source list is taller than the space left on screen, it scrolls there instead of hiding the lower sources until the article ends. Phone widths keep the shelf in normal flow (v4.css / public.css set position:static). */
@media (min-width: 1051px) {
  .public-dossier .source-shelf {
    align-self: start;
    top: calc(var(--site-header-block) + var(--dossier-shelf-gap));
    max-height: calc(100vh - var(--site-header-block) - var(--dossier-shelf-gap) - 16px);
    max-height: calc(100dvh - var(--site-header-block) - var(--dossier-shelf-gap) - 16px);
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 169, 109, .7) transparent;
  }
}
/* Short landscape screens (a sideways phone): the header scrolls away with the page instead of taking a fifth of the height. Portrait, tablet and desktop keep it sticky. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header { position: relative; }
}
/* With no header pinned above it, the desktop shelf sticks at the top of the viewport. */
@media (min-width: 1051px) and (orientation: landscape) and (max-height: 500px) {
  .public-dossier .source-shelf {
    top: var(--dossier-shelf-gap);
    max-height: calc(100vh - var(--dossier-shelf-gap) - 16px);
    max-height: calc(100dvh - var(--dossier-shelf-gap) - 16px);
  }
}