/* The cross-country skiing page's own passages, in page order. Served on this page only, after styles.css. */

/* ---------- the opening (data-section="opening") ----------
   The day is the page's idea, so the opening is the day's first picture: the groomed trail (stored 2,383 x 2,307, so a
   square, the only square on the site) runs off the screen's left edge at its own size, and the words sit beside it with
   the 4 hours of the day as links. Stacked on a phone: the square edge to edge, then the words. */
.xc-open-photo .photo{aspect-ratio:1/1;background:var(--birch)}
.xc-open-photo .photo img{object-position:50% 50%}
.xc-open-photo figcaption{padding-inline:var(--pad)}
.credit{display:block;font-size:14px;margin-top:2px}
.xc-open-words{padding:clamp(26px, 4vw, 48px) var(--pad) clamp(44px, 6vw, 90px)}
.xc-open h1{font-size:clamp(34px, 9.4vw, 44px);line-height:1.05;letter-spacing:-.01em}
.xc-open .lede{margin-top:16px}
.xc-index{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
@media (min-width:900px){
  .xc-open{display:grid;grid-template-columns:calc((100vw - 1320px)/2 + 660px) 1fr;align-items:center;min-height:min(86vh, 1100px)}
  .xc-open-photo{grid-column:1;margin:0}
  .xc-open-photo figcaption{padding:10px var(--pad) 0 var(--pad);max-width:34em}
  .xc-open-words{grid-column:2;padding:clamp(36px, 4vw, 80px) max(var(--pad), calc((100vw - 1320px)/2)) clamp(36px, 4vw, 80px) clamp(32px, 4vw, 72px)}
  .xc-open h1{font-size:clamp(46px, 22px + 2.6vw, 80px);line-height:1.02}
  .xc-open .lede{max-width:28em}
}
@media (max-width:1319px) and (min-width:900px){ .xc-open{grid-template-columns:56vw 1fr} .xc-open-photo figcaption{padding-left:var(--pad)} }

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

/* ---------- a winter day (data-section="a-winter-day") ----------
   The day as 4 rows in order, each the hour in display type and what it holds. The snowshoe sits small in the
   morning. Rows, not columns, so the hours read down the page like the day itself. */
.xc-day{padding-block:clamp(56px, 8vw, 130px) clamp(40px, 5vw, 80px);border-top:1px solid var(--line)}
.xc-hours{list-style:none;margin:28px 0 0;padding:0;display:grid}
.xc-hours li{border-top:1px solid var(--line);padding-block:22px;display:grid;gap:8px;scroll-margin-top:calc(var(--hh) + 16px)}
.xc-hours b{font-family:var(--display);font-weight:400;font-size:clamp(30px, 24px + 1.4vw, 54px);line-height:1.05}
.xc-hours p{color:var(--moss);line-height:1.55;max-width:34em}
.xc-hours p a{color:var(--pine);font-weight:600}
.xc-shoe{max-width:220px;margin-top:6px}
.xc-shoe .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .xc-hours{margin-top:clamp(32px, 3.4vw, 56px)}
  .xc-hours li{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;padding-block:clamp(26px, 3vw, 44px)}
  .xc-hours b{grid-column:1 / 5}
  .xc-hours p{grid-column:5 / 10;font-size:18px}
  .xc-shoe{grid-column:10 / 13;margin:0;max-width:none}
}

/* ---------- the sauna (data-section="the-sauna") ----------
   The day's end: the sauna's open log door (a portrait) inside the column, 5 columns from 900px, its words beside it. Stacked on a phone. */
.xc-sauna{padding-block:clamp(40px, 6vw, 100px) clamp(56px, 8vw, 130px)}
.xc-end{display:grid;gap:22px}
.xc-sauna-photo .photo{aspect-ratio:3/4}
.xc-sauna-photo{width:82%}
.xc-sauna-photo .photo img{object-position:50% 55%}
.xc-end-words .xc-words{margin-top:14px}
@media (min-width:900px){
  .xc-end{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .xc-sauna-photo{grid-column:1 / 6;width:auto}
  .xc-end-words{grid-column:8 / 13}
  .xc-end-words .xc-words{justify-self:start}
}

/* ---------- what else winter brings (data-section="winter-around") ----------
   The page's one pale ground: the frozen falls beside 2 short winter facts. */
.xc-more{background:var(--birch);padding-block:clamp(56px, 8vw, 130px)}
.xc-cols{display:grid;gap:28px;margin-top:28px}
.xc-falls .photo{aspect-ratio:4/3;background:var(--white)}
.xc-falls .photo img{object-position:50% 45%}
.xc-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.xc-list p{margin-top:6px;color:var(--moss);line-height:1.55}
.xc-list li{border-top:1px solid var(--line);padding-top:16px}
@media (min-width:900px){
  .xc-cols{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;margin-top:clamp(32px, 3.4vw, 56px)}
  .xc-falls{grid-column:1 / 8}
  .xc-list{grid-column:8 / 13}
}

/* On a phone the opening photograph carries no caption under it (the render's phone-opening-caption rule, from Michael's
   23 Oct 2026 correction on this site; the caption shows from 900px). */
@media (max-width:899px){ .xc-open-photo figcaption{display:none} }
/* the owner's own skiing pictures after the 4 hours of the day (27 Oct 2026): the trail sign large, the track smaller at the right. */
.xc-pair{display:grid;gap:12px;margin-top:28px}
.xc-pair-a{margin-inline:calc(-1*var(--pad))}
.xc-pair-a .photo{aspect-ratio:4/3;background:var(--birch)}
.xc-pair-a figcaption{padding-inline:var(--pad)}
.xc-pair-b{width:70%;margin-left:auto}
.xc-pair-b .photo{aspect-ratio:4/3;background:var(--birch)}
@media (min-width:900px){
  .xc-pair{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start;margin-top:clamp(32px, 3.4vw, 56px)}
  .xc-pair-a{grid-column:1 / 8;margin:0}
  .xc-pair-a figcaption{padding:0}
  .xc-pair-b{grid-column:9 / 13;width:auto;margin:clamp(40px, 6vw, 110px) 0 0}
}