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

/* ---------- the opening (data-section="opening") ----------
   The beach (a portrait file, 2,560 by 3,413) as a tall frame at the right that runs off the screen's edge from 900px,
   the words at the left. On a phone the beach comes first in a 4:5 frame, full width, and the words under it. The
   frame is 5 columns of the page plus the margin to the screen's edge, so it grows with the screen. */
.ls-open{display:flex;flex-direction:column}
.ls-open-photo{order:-1}
.ls-open-photo .photo{aspect-ratio:4/5;background:var(--birch)}
.ls-open-photo .photo img{object-position:50% 62%}
.ls-open-photo figcaption{padding-inline:var(--pad)}
.ls-open-grid{padding-block:26px clamp(44px, 8vw, 72px)}
.ls-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.05;letter-spacing:-.01em}
.ls-open .lede{margin-top:16px}
@media (min-width:900px){
  .ls-open{display:block;position:relative;--open-h:clamp(620px, calc(100svh - var(--hh)), 1500px);min-height:var(--open-h)}
  .ls-open-photo{position:absolute;top:0;right:0;bottom:0;width:calc(var(--edge) + (min(100vw - 2*var(--pad), 1320px) - 11*var(--gap)) * 5 / 12 + 4*var(--gap))}
  .ls-open-photo .photo{aspect-ratio:auto;position:absolute;inset:0}
  .ls-open-photo .photo img{object-position:50% 58%}
  .ls-open-photo figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:48px 20px 18px;color:var(--white);font-size:15px;background:linear-gradient(to top, rgba(17,36,26,.7), rgba(17,36,26,0))}
  .ls-open-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center;min-height:var(--open-h);padding-block:clamp(48px, 6vw, 120px)}
  .ls-open-words{grid-column:1 / 7}
  .ls-open h1{font-size:clamp(54px, 22px + 3.3vw, 88px);line-height:1.02}
  .ls-open .lede{margin-top:24px}
}

/* ---------- the shore (data-section="the-shore") ----------
   The walk in words, and 2 aerial photographs of different sizes that overlap: the long beach large at the right, the
   lodge's pond smaller across its lower left corner (a frame of white sets the top one off). The water and the
   evening sit at the right under the beach. On a phone they run one after another, the pond stepping in from the
   right. */
.ls-shore{padding-block:clamp(40px, 6vw, 110px) clamp(56px, 8vw, 140px)}
.ls-shore-grid{display:grid;gap:22px}
.ls-shore-words .lede{margin-top:14px}
.ls-shore-main{margin-inline:calc(-1*var(--pad))}
.ls-shore-main .photo{aspect-ratio:16/9}
.ls-shore-pond{position:relative;z-index:1;width:86%;margin:4px calc(-1*var(--pad)) 0 auto}
.ls-shore-pond .photo{aspect-ratio:4/3;border:8px solid var(--white);border-right:0}
.ls-shore-main figcaption,.ls-shore-pond figcaption{padding-inline:var(--pad)}
.ls-shore-after{display:grid;gap:12px}
.ls-shore-after .more{display:inline;min-height:0}
@media (min-width:1100px){
  .ls-shore-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;align-items:start}
  .ls-shore-words{grid-column:1 / 5;grid-row:1;padding-right:8px}
  .ls-shore-main{grid-column:5 / 13;grid-row:1;margin:0;position:relative}
  .ls-shore-main figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 18px 12px 70%;text-align:right;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.6);background:linear-gradient(to top, rgba(17,36,26,.88), rgba(17,36,26,.55) 40%, rgba(17,36,26,0))}
  .ls-shore-pond figcaption{padding:0 10px}
  .ls-shore-pond{grid-column:5 / 10;grid-row:2;width:auto;margin:-120px 0 0}
  .ls-shore-pond .photo{border:10px solid var(--white)}
  .ls-shore-after{grid-column:1 / 5;grid-row:2;align-self:end;gap:16px;padding-bottom:6px}
}

/* ---------- summer, by the lake (data-section="summer-nearby") ----------
   The page's one pale ground: the words at the left, July, August and Au Train as 3 short passages at the right (no
   table), and the way on to Marquette and the trails. */
.ls-summer{background:var(--birch);padding-block:clamp(56px, 8vw, 140px)}
.ls-summer-grid{display:grid;gap:30px}
.ls-summer-head .lede{margin-top:14px}
.ls-summer-items{display:grid;gap:26px}
.ls-summer-items h3{margin-bottom:6px}
.ls-summer-items p{max-width:34em;color:var(--moss)}
.ls-summer-items .ls-summer-more{font-size:15px;line-height:1.55}
.ls-summer-items a{color:var(--pine);font-weight:600}
@media (min-width:900px){
  .ls-summer-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .ls-summer-head{grid-column:1 / 6}
  .ls-summer-head h2{max-width:8em}
  .ls-summer-items{grid-column:7 / 13;gap:34px;padding-top:10px}
  .ls-summer-items p{font-size:clamp(17px, 16px + .25vw, 21px)}
  .ls-summer-items .ls-summer-more{font-size:16px}
}

/* ---------- the dark months (data-section="the-dark-months") ----------
   The page's one pine band: the northern lights photograph (credited) large at the left, the owner's own photograph of them
   (a night phone picture, no larger than 5 columns) across its lower right corner, the words at the right and the
   sea smoke last. Quiet words on pine are lichen. */
.ls-dark{background:var(--pine);color:var(--white);padding-block:clamp(56px, 7vw, 120px)}
.ls-dark-grid{display:grid;gap:26px}
.ls-dark-photo{margin-inline:calc(-1*var(--pad))}
.ls-dark-photo .photo{aspect-ratio:3/2}
.ls-dark-photo figcaption{padding-inline:var(--pad);color:var(--lichen)}
.ls-dark-photo .credit a{color:var(--lichen)}
.ls-dark-words{order:-1}
.ls-dark-words .lede{margin-top:16px;color:var(--white)}
.ls-dark-own{width:72%;margin-right:auto;position:relative;z-index:1}
.ls-dark-own .photo{aspect-ratio:3/4;border:8px solid var(--pine)}
.ls-dark-own figcaption{color:var(--lichen);padding-inline:8px}
.ls-dark-smoke{color:var(--lichen);max-width:34em}
@media (min-width:1100px){
  .ls-dark-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;align-items:start}
  .ls-dark-words{order:0;grid-column:9 / 13;grid-row:1;padding-top:6px}
  .ls-dark-words .lede{max-width:24em}
  .ls-dark-photo{grid-column:1 / 9;grid-row:1;margin:0}
  .ls-dark-photo figcaption{padding:0;margin-left:auto;width:36%}
  .ls-dark-own{grid-column:1 / 5;grid-row:2;width:auto;margin:-130px 0 0}
  .ls-dark-own .photo{border-width:10px;aspect-ratio:1/1}
  .ls-dark-own .photo img{object-position:50% 62%}
  .ls-dark-smoke{grid-column:6 / 11;grid-row:2;align-self:center;font-size:clamp(17px, 16px + .25vw, 21px);line-height:1.55}
}

/* 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){ .ls-open-photo figcaption{display:none} }
/* the owner's own summer picture of the lodge from above, across the column between the words and the 3 months (27 Oct 2026). */
.ls-summer-photo{margin-inline:calc(-1*var(--pad))}
.ls-summer-photo .photo{aspect-ratio:16/10;background:var(--white)}
.ls-summer-photo figcaption{padding-inline:var(--pad)}
@media (min-width:900px){
  .ls-summer-head,.ls-summer-items{grid-row:1}
  .ls-summer-photo{grid-column:1 / 13;grid-row:2;margin:clamp(28px, 3vw, 56px) 0 0}
  .ls-summer-photo .photo{aspect-ratio:21/9}
  .ls-summer-photo figcaption{padding:0}
}