/* The trails page's own passages, in page order. Served on this page only, after styles.css. */

/* ---------- the opening and the owner's map (data-section="opening") ----------
   The page's one pale ground. The map first: the heading and one line, then the hosts' own trail-access map as large
   as the 1,320px column allows (it is stored 1,680 wide, so never wider than the column), its caption in the hosts'
   words. On a phone the frame is the map's "Access Points" inset at a size the print can be read at (about 78% of the
   file's own size), slid sideways with a finger; pressing it opens the whole map. From 900px the whole map shows. */
.map-sec{background:var(--birch);padding-block:clamp(36px, 5vw, 84px) clamp(44px, 6vw, 104px)}
.map-head .lede{margin-top:14px;max-width:30em}
.map-fig{margin:24px 0 0}
.map-link{display:block}
.map-fig .photo{height:calc(100vw * .9);max-height:360px;overflow-x:auto;overflow-y:hidden;background:var(--white);border:1px solid var(--line);border-radius:8px;scrollbar-width:none}
.map-fig .photo::-webkit-scrollbar{display:none}
.map-fig .photo img{width:1100px;max-width:none;height:auto;margin-left:-498px;margin-top:-285px}
/* The map's words sit under the figure as a paragraph of their own (a caption inside the figure counted as a hero caption on a
   phone, the render's phone-opening-caption rule, 27 Oct 2026); the words are the owner's own and stay at every width. */
.map-caption{font-size:16px;line-height:1.5;max-width:44em;margin-top:10px}
.map-caption b{color:var(--pine);font-weight:600}
.map-hint{margin-top:6px}
h1{font-size:clamp(36px, 9.4vw, 44px);line-height:1.05;letter-spacing:-.01em}
@media (min-width:900px){
  h1{font-size:clamp(48px, 22px + 2.6vw, 84px);line-height:1.02}
  .map-fig{margin-top:clamp(28px, 3vw, 48px)}
  .map-link{cursor:zoom-in}
  .map-fig .photo{height:auto;max-height:none;overflow:hidden;aspect-ratio:1680/946}
  .map-fig .photo img{width:100%;max-width:100%;height:100%;margin:0;object-fit:cover}
  .map-caption{margin-top:14px}
  .map-hint{display:none}
}

/* ---------- the two trails (data-section="the-two-trails") ----------
   The 2 photographs are one group, a large one and a smaller one that overlaps its corner and sits lower, and each
   trail is a short passage under its own side, not a table. Stacked on a phone. */
.two-sec{padding-block:clamp(56px, 8vw, 140px)}
.two-head .lede{margin-top:14px}
.two-photos{display:grid;gap:18px;margin-top:28px}
.two-photos .photo{aspect-ratio:4/3;background:var(--birch)}
.two-words{display:grid;gap:26px;margin-top:26px}
.trail h3{margin-bottom:8px}
.trail p{color:var(--moss);line-height:1.6;max-width:34em}
@media (min-width:900px){
  .two-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .two-head h2{grid-column:1 / 7;max-width:12em}
  .two-head .lede{grid-column:8 / 13;margin:0;justify-self:end;max-width:30em}
  .two-photos{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);gap:0 var(--gap);align-items:start;margin-top:clamp(32px, 3.4vw, 56px)}
  .tp-a{grid-column:1 / 9;grid-row:1}
  .tp-b{grid-column:8 / 13;grid-row:1;margin-top:clamp(60px, 9vw, 150px);position:relative;z-index:2}
  .tp-b .photo{border:8px solid var(--white);box-sizing:content-box;width:calc(100% - 16px)}
  .tp-b figcaption{padding-left:14%}
  .two-words{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:clamp(28px, 3vw, 48px)}
  .two-words .trail:first-child{grid-column:1 / 7}
  .two-words .trail:last-child{grid-column:8 / 13}
}

/* ---------- questions (data-section="questions") ----------
   The shared fact list: heading left, short answers right. */
.ask-sec{padding-block:clamp(48px, 7vw, 120px);border-top:1px solid var(--line)}
.ask-sec dd a{color:var(--pine);font-weight:600}

/* ---------- out of the door (data-section="the-corridor") ----------
   3 photographs that touch: the walkers at the sign large, the sandy track beside it and lower, the marker post tall
   on the right. One column of 3 on a phone, the marker beside the track. */
.air-sec{padding-block:clamp(56px, 8vw, 140px);border-top:1px solid var(--line)}
.air-head .lede{margin-top:14px}
.air-grid{display:grid;grid-template-columns:1.78fr 1fr;gap:18px 12px;margin-top:28px}
.air-a{grid-column:1 / -1}
.air-a .photo,.air-b .photo{aspect-ratio:4/3;background:var(--birch)}
.air-c .photo{aspect-ratio:3/4;background:var(--birch)}
@media (min-width:900px){
  .air-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .air-head h2{grid-column:1 / 6}
  .air-head .lede{grid-column:7 / 13;margin:0;justify-self:end;max-width:33em}
  .air-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;margin-top:clamp(32px, 3.4vw, 56px)}
  .air-a{grid-column:1 / 6}
  .air-b{grid-column:6 / 10;margin-top:clamp(50px, 8vw, 140px)}
  .air-c{grid-column:10 / 13}
}

/* ---------- what you may see (data-section="in-season") ----------
   The heading and words in the column, then 4 portraits as one strip that runs off the screen's edges: each in its own
   3:4 frame (every file is a 2,560-wide portrait, so the frames can grow with the screen). On a phone the strip slides
   sideways; from 900px all 4 are on screen, edge to edge. */
.seen-sec{padding-block:clamp(56px, 8vw, 140px) 0;border-top:1px solid var(--line)}
.seen-head .lede{margin-top:14px}
.seen-row{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--pad);scroll-padding-inline:var(--pad);margin-top:28px;scrollbar-width:none}
.seen-row::-webkit-scrollbar{display:none}
.seen-row figure{scroll-snap-align:start}
.seen-row .photo{aspect-ratio:3/4;background:var(--birch)}
@media (min-width:900px){
  .seen-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .seen-head h2{grid-column:1 / 6}
  .seen-head .lede{grid-column:7 / 13;margin:0;justify-self:end;max-width:33em}
  .seen-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;gap:0;overflow:visible;padding:0;margin-top:clamp(32px, 3.4vw, 56px)}
  .seen-row figcaption{padding-inline:12px}
}

/* ---------- the other seasons (data-section="other-seasons") ----------
   Three short passages pointing on: winter, the fall, and what lies beyond the trail. */
.more-sec{padding-block:clamp(48px, 6vw, 104px)}
.more-list{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.more-list p{margin-top:6px;color:var(--moss);max-width:28em}
.more-list .more-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
@media (min-width:900px){ .more-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)} }