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

/* ---------- the opening (data-section="opening") ----------
   The steps down into the gold (a 2,560 file) edge to edge and the full height of the first screen from 900px, the
   words low at the left on a pine shade that rises from the bottom (the steps are dark there already). On a phone the
   photograph keeps its own 4:3 and the words sit under it on white. */
.fc-open{position:relative}
.fc-open-photo .photo{aspect-ratio:4/3;background:var(--birch)}
.fc-open-photo figcaption{padding-inline:var(--pad);margin-top:8px}
.fc-open-words{padding:20px var(--pad) 36px}
.fc-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.05;letter-spacing:-.01em}
.fc-open .lede{margin-top:14px}
@media (min-width:900px){
  .fc-open{height:calc(100svh - var(--hh));min-height:600px;max-height:1500px;color:var(--white);overflow:hidden}
  .fc-open-photo{position:absolute;inset:0}
  .fc-open-photo .photo{position:absolute;inset:0;aspect-ratio:auto}
  .fc-open-photo .photo img{object-position:50% 55%}
  .fc-open::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(17,36,26,.88) 0%, rgba(17,36,26,.55) 34%, rgba(17,36,26,0) 66%),linear-gradient(to right, rgba(17,36,26,.35) 0%, rgba(17,36,26,0) 55%)}
  .fc-open-photo figcaption{position:absolute;z-index:2;right:var(--edge);bottom:20px;margin:0;padding:0;font-size:15px;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .fc-open-words{position:absolute;z-index:2;left:var(--edge);bottom:clamp(44px, 8svh, 104px);width:min(60vw, 900px);padding:0}
  .fc-open h1{font-size:clamp(54px, 22px + 3.3vw, 88px);line-height:1.02}
  .fc-open .lede{margin-top:clamp(14px, 1.2vw, 22px);font-size:clamp(18px, 16px + .3vw, 23px);max-width:28em}
}

/* ---------- when the color comes (data-section="when-the-color-comes") ----------
   The answer first, in large type: the first half of October at the lodge. Then the season as a short passage and 2
   plain paragraphs (West of Marquette, the town), no table. */
.fc-when{padding-block:clamp(48px, 7vw, 120px)}
.fc-when-grid{display:grid;gap:20px}
.fc-big{font-family:var(--display);font-size:clamp(30px, 7.6vw, 44px);line-height:1.12;max-width:16em;text-wrap:balance}
.fc-when-words .lede{margin-top:20px}
.fc-when-two{display:grid;gap:14px;margin-top:22px;color:var(--moss);max-width:40em}
.fc-when-two b{color:var(--pine);font-weight:600}
@media (min-width:900px){
  .fc-when-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .fc-when-grid h2{grid-column:1 / 5}
  .fc-when-words{grid-column:5 / 13}
  .fc-big{font-size:clamp(40px, 20px + 2.2vw, 64px)}
  .fc-when-two{grid-template-columns:1fr 1fr;column-gap:var(--gap);margin-top:30px;max-width:none}
}

/* ---------- at the lodge (data-section="at-the-lodge") ----------
   The page's one pale ground. The heading and words, then 4 October photographs of different sizes placed by hand on
   a 12-column grid: the pines large at the left, the low sun smaller and set lower at the right, the clearing
   stepping over the pines' lower edge and the aerial of the pond and the trail to the right. Every frame is the
   photograph's own 4:3 so what each caption names is in view; all four are stored 1,440 wide and stay in the column.
   On a phone the first runs full width and the other 3 follow, alternating sides. */
.fc-at{background:var(--birch);padding-block:clamp(56px, 8vw, 140px)}
.fc-at-words .lede{margin-top:14px}
.fc-at-words .more{margin-top:6px}
.fc-grid{display:grid;gap:18px;margin-top:28px}
.fc-grid .photo{aspect-ratio:4/3}
.fc-grid .fc-a{margin-inline:calc(-1*var(--pad))}
.fc-grid .fc-a figcaption{padding-inline:var(--pad)}
.fc-grid .fc-b{width:62%;margin-left:auto}
.fc-grid .fc-c{width:70%}
.fc-grid .fc-d{margin-inline:calc(-1*var(--pad));margin-left:18%}
.fc-grid .fc-d figcaption{padding-right:var(--pad)}
@media (min-width:900px){
  .fc-at-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .fc-at-head h2{grid-column:1 / 7;max-width:11em}
  .fc-at-words{grid-column:7 / 13;justify-self:end;max-width:33em}
  .fc-at-words .lede{margin-top:0}
  .fc-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;margin-top:clamp(32px, 3.4vw, 56px);align-items:start}
  .fc-grid .fc-a{grid-column:1 / 8;grid-row:1;margin:0}
  .fc-grid .fc-a figcaption{padding:0;max-width:28%}
  .fc-grid .fc-b{grid-column:9 / 13;grid-row:1;width:auto;margin:clamp(60px, 9vw, 150px) 0 0}
  .fc-grid .fc-c{grid-column:4 / 9;grid-row:2;width:auto;margin:-60px 0 0;position:relative;z-index:1}
  .fc-grid .fc-c .photo{border:10px solid var(--birch)}
  .fc-grid .fc-c figcaption{padding:0 10px}
  .fc-grid .fc-d{grid-column:9 / 13;grid-row:2;width:auto;margin:clamp(40px, 5vw, 80px) 0 0}
  .fc-grid .fc-d figcaption{padding:0}
}

/* ---------- the drives (data-section="the-drives") ----------
   H-58 under golden maples (credited) inside the 1,320px column beside 3 drives for color, told as 3 short passages
   (Michael, 23 Oct: a photograph running off one edge mid-page reads as a section out of line). */
.fc-drives{padding-block:clamp(56px, 8vw, 140px)}
.fc-drive-photo{margin:0 calc(-1*var(--pad)) 28px}
.fc-drive-photo .photo{aspect-ratio:4/3}
.fc-drive-photo figcaption{padding-inline:var(--pad)}
.fc-drive-list{display:grid;gap:22px;margin-top:20px}
.fc-drive-list h3{margin-bottom:4px}
.fc-drive-list p{color:var(--moss);max-width:34em}
.fc-drives-note{margin-top:24px;font-size:15px;line-height:1.5;color:var(--moss);max-width:40em}
@media (min-width:900px){
  .fc-drives-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .fc-drive-photo{grid-column:1 / 8;margin:0}
  .fc-drive-photo figcaption{padding:0}
  .fc-drive-words{grid-column:9 / 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){ .fc-open-photo figcaption{display:none} }