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

/* ---------- the opening (data-section="opening") ----------
   The page's one pine band: the heading and the lede in white on it. The riders photograph (the places row; stored
   2,560 wide) overlaps the band's bottom edge and runs off the screen's right edge, 2:1 so the riders and their sign
   stay in view. The words never sit on the photograph. Full width on a phone, 4:3. */
.sm-band{background:var(--pine);color:var(--white);padding-block:clamp(36px, 5vw, 88px) clamp(70px, 9vw, 170px)}
.sm-band h1{font-size:clamp(34px, 9.4vw, 44px);line-height:1.05;letter-spacing:-.01em;max-width:13em}
.sm-band .lede{margin-top:16px;color:var(--lichen)}
.sm-open-photo{margin-top:calc(-1 * clamp(44px, 6vw, 110px))}
.sm-open-photo .photo{aspect-ratio:4/3;background:var(--birch)}
.sm-open-photo .photo img{object-position:50% 55%}
.sm-open-photo figcaption{padding-inline:var(--pad)}
.sm-open-photo .credit{display:block;font-size:14px;margin-top:2px}
.sm-open{padding-bottom:clamp(40px, 5vw, 90px)}
@media (min-width:900px){
  .sm-band h1{font-size:clamp(50px, 22px + 2.9vw, 92px);line-height:1.02}
  .sm-band .lede{max-width:36em;margin-top:clamp(18px, 1.8vw, 30px)}
  .sm-open-photo{margin-left:max(var(--pad), calc((100vw - 1320px) / 2 + 12%))}
  .sm-open-photo .photo{aspect-ratio:2/1;box-shadow:0 18px 40px rgba(10,26,18,.18)}
  .sm-open-photo figcaption{padding-inline:0;max-width:44em}
}

/* ---------- shared heading shape: heading left, words right from 900px ---------- */
.sm-words .lede{margin-top:14px}
.sm-words .more{margin-top:6px}
.sm-words .small-line{margin-top:10px}
@media (min-width:900px){
  .sm-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .sm-head h2{grid-column:1 / 6}
  .sm-words{grid-column:7 / 13;justify-self:end;max-width:33em}
  .sm-words .lede{margin-top:0}
}

/* ---------- the trails (data-section="the-trails") ----------
   Where the trails go and when: three short answers side by side from 900px, stacked on a phone. */
.sm-trails{padding-block:clamp(56px, 8vw, 130px)}
.sm-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:26px}
.sm-points p{margin-top:8px;color:var(--moss);line-height:1.55}
.sm-points a{color:var(--pine)}
@media (min-width:900px){
  .sm-points{grid-template-columns:repeat(3,1fr);column-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)}
  .sm-points li{border-top:1px solid var(--line);padding-top:20px}
  .sm-points p{font-size:17px}
}

/* ---------- before you ride (data-section="before-you-ride") ----------
   The checklist: permit, registration, the DNR's page, parking, the road. Uses the shared fact list. */
.sm-before{padding-block:clamp(48px, 7vw, 120px);border-top:1px solid var(--line)}
.sm-before dd a{color:var(--pine);font-weight:600}

/* ---------- coming back (data-section="coming-back") ----------
   The page's one pale ground. The words, then the red front door inside the column (8 columns from 900px, framed on the door and the mat), then the gable, the entrance corner and the laundry as one group of different sizes. */
.sm-base{background:var(--birch);padding-block:clamp(56px, 8vw, 130px)}
.sm-door{margin-top:clamp(32px, 3.4vw, 56px)}
.sm-door .photo{aspect-ratio:4/3}
.sm-door .photo img{object-position:50% 70%}
.sm-trio{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:clamp(28px, 3vw, 48px)}
.sm-trio .photo{aspect-ratio:4/3}
.sm-a{grid-column:1 / -1}
.sm-c .photo{aspect-ratio:3/4}
.sm-a .photo img{object-position:50% 45%}
.sm-b .photo img{object-position:50% 60%}
@media (min-width:900px){
  .sm-door{width:calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap))}
  .sm-trio{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .sm-a{grid-column:1 / 8}
  .sm-c{grid-column:8 / 11;margin-top:clamp(30px, 5vw, 90px)}
  .sm-b{grid-column:5 / 10;grid-row:2;margin-top:clamp(20px, 3vw, 44px)}
  .sm-trio{row-gap:0}
}

/* ---------- non-riders (data-section="non-riders") ---------- */
.sm-others{padding-block:clamp(48px, 6vw, 100px)}
/* the owner's own riding pictures between the words and the 3 points (27 Oct 2026): the riders large, the shore track smaller
   and lower at the right; on a phone the riders full width, then the track at 70%. */
.sm-ride{display:grid;gap:12px;margin-top:28px}
.sm-ride-a{margin-inline:calc(-1*var(--pad))}
.sm-ride-a .photo{aspect-ratio:4/3;background:var(--birch)}
.sm-ride-a figcaption{padding-inline:var(--pad)}
.sm-ride-b{width:70%;margin-left:auto}
.sm-ride-b .photo{aspect-ratio:4/3;background:var(--birch)}
@media (min-width:900px){
  .sm-ride{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start;margin-top:clamp(32px, 3.4vw, 56px)}
  .sm-ride-a{grid-column:1 / 8;margin:0}
  .sm-ride-a figcaption{padding:0}
  .sm-ride-b{grid-column:9 / 13;width:auto;margin:clamp(40px, 6vw, 110px) 0 0}
}