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

/* ---------- the opening (data-section="opening") ----------
   Words first, on white: the headline and the lede, then one credited photograph (Bridalveil Falls, a 2.1:1 file) inside
   the 1,320px column (from 900px 10 of its 12 columns, set to the right under the lede, because the file is 1,200 wide and
   a full column would stretch it). No full-screen hero: spring opens quietly. On a phone it is the same order, the
   photograph a 3:2 frame cropped on the falls. */
.sp-open-words{padding-block:clamp(36px, 5vw, 84px) clamp(24px, 3vw, 44px)}
.sp-open h1{font-size:clamp(38px, 10vw, 48px);line-height:1.04;letter-spacing:-.01em;max-width:13em}
.sp-open .lede{margin-top:18px}
.sp-open-photo .photo{aspect-ratio:3/2;background:var(--birch)}
.sp-open-photo .photo img{object-position:58% 50%}
.sp-open-photo{margin-bottom:clamp(40px, 6vw, 96px)}
@media (min-width:900px){
  .sp-open-words{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .sp-open h1{grid-column:1 / 8;font-size:clamp(60px, 24px + 3.6vw, 96px);line-height:1.0}
  .sp-open .lede{grid-column:8 / 13;margin-top:0}
  /* The falls across the whole column (the file is 3,840 wide and data-size="full" asks the platform for its 2,560 rendition). */
  .sp-open-photo{width:100%;margin-left:0}
  .sp-open-photo .photo{aspect-ratio:21/9}
}

/* ---------- the cold (data-section="the-cold") ----------
   A ruled ledger: one hairline row per month, the month at the left, its average high and low in large numerals, the
   plain line at the right. The one place the page says spring is cold. On a phone the 3 parts stack in each row. */
.sp-months{padding-block:clamp(24px, 4vw, 72px) clamp(48px, 6vw, 100px)}
.sp-ledger{list-style:none;margin:clamp(22px, 3vw, 44px) 0 0;padding:0}
.sp-ledger li{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line)}
.sp-ledger li:last-child{border-bottom:1px solid var(--line)}
.sp-temp{font-family:var(--display);font-size:clamp(34px, 9vw, 44px);line-height:1.05}
.sp-ledger li p:last-child{color:var(--moss);max-width:34em}
@media (min-width:900px){
  .sp-ledger li{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:baseline;padding:28px 0}
  .sp-ledger h3{grid-column:1 / 3}
  .sp-temp{grid-column:3 / 7;font-size:clamp(48px, 24px + 2.6vw, 76px)}
  .sp-ledger li p:last-child{grid-column:8 / 13}
}

/* ---------- the light (data-section="the-light") ----------
   One sentence of large type, the answer; under it a quiet dated paragraph in the page's small moss text. No columns,
   no rule: it reads differently from the ledger above it. */
.sp-light{padding-block:clamp(16px, 3vw, 48px) clamp(56px, 8vw, 130px)}
.sp-big{font-size:clamp(32px, 8vw, 44px);line-height:1.1;max-width:15em}
.sp-dates{margin-top:22px;font-size:15px;line-height:1.55;color:var(--moss);max-width:36em}
@media (min-width:900px){
  .sp-big{font-size:clamp(46px, 20px + 2.9vw, 84px);line-height:1.04}
  .sp-dates{margin-top:30px;font-size:17px}
}

/* ---------- the ice (data-section="the-ice") ----------
   The page's one pale ground. The words at the left and 2 photographs of different sizes placed by hand, both in the
   column: the bay's floes large at the right, the river and its ice smaller and set lower at the left under the words.
   Frames are 4:3 so what the captions name is in view. On a phone: words, the floes, the river inset to the right. */
.sp-ice{background:var(--birch);padding-block:clamp(56px, 8vw, 140px)}
.sp-ice-words .lede{margin-top:14px}
.sp-ice-words .more{margin-top:6px}
.sp-ice-a,.sp-ice-b{margin-top:26px}
.sp-ice .photo{aspect-ratio:4/3}
.sp-ice-b{width:78%;margin-left:auto}
@media (min-width:900px){
  .sp-ice-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .sp-ice-words{grid-column:1 / 6;grid-row:1}
  .sp-ice-a{grid-column:6 / 13;grid-row:1 / 3;margin:0}
  .sp-ice-b{grid-column:2 / 6;grid-row:2;width:auto;margin:clamp(40px, 5vw, 80px) 0 0}
}

/* ---------- the water (data-section="the-water") ----------
   Words at the left, 3 falls as short passages with a hairline above each; the woodland floor in May at the right
   (4:3, in the column). On a phone the words and the list first, then the photograph. */
.sp-water{padding-block:clamp(56px, 8vw, 140px)}
.sp-water-words .lede{margin-top:14px}
.sp-falls{list-style:none;margin:22px 0 18px;padding:0}
.sp-falls li{padding:16px 0;border-top:1px solid var(--line)}
.sp-falls h3{margin-bottom:4px}
.sp-falls p{color:var(--moss);max-width:34em}
.sp-water-photo{margin-top:24px}
.sp-water-photo .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .sp-water-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .sp-water-words{grid-column:1 / 7}
  .sp-water-photo{grid-column:8 / 13;margin:0}
}

/* ---------- the trails (data-section="the-trails") ----------
   Good to know's own shape (heading at the left, name and line at the right), here for the practical limits, each said once. */
.sp-trails{padding-block:0 clamp(56px, 8vw, 130px)}
/* A link inside a line sits on its own row, so it never splits the sentence before it (it was breaking a line mid-sentence at 390). */
.sp-trails dd .more{display:flex}

/* ---------- at the lodge (data-section="at-the-lodge") ----------
   The lodge's gifts in one passage and 2 real photographs, the stones on the sauna heater (a portrait, 4:5) at the left, the
   great room (4:3) set lower at the right. On a phone the words, then the stones inset to the left, then the great room inset to the right. */
.sp-lodge{padding-block:clamp(48px, 7vw, 120px) clamp(72px, 9vw, 150px);border-top:1px solid var(--line)}
.sp-lodge-words .lede{margin-top:14px}
.sp-lodge-words .more{margin-top:6px}
.sp-lodge-grid .photo{aspect-ratio:4/3}
.sp-lodge-a,.sp-lodge-b{margin-top:26px}
.sp-lodge-a .photo{aspect-ratio:4/5}
.sp-lodge-a{width:62%}
.sp-lodge-b{width:78%;margin-left:auto}
@media (min-width:900px){
  .sp-lodge-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .sp-lodge-words{grid-column:1 / 5;grid-row:1}
  .sp-lodge-a{grid-column:5 / 9;grid-row:1;margin:0;width:auto}
  .sp-lodge-b{grid-column:9 / 13;grid-row:1;width:auto;margin:clamp(60px, 8vw, 130px) 0 0}
}