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

/* ---------- the opening (data-section="opening") ----------
   Kayakers under Lovers Leap (3,094 wide, the sunlit one, credited) opens the page. On a phone the photograph fills the
   the photograph fills the first screen between the header and the price bar with the words on its darkened foot (the kayaks sit under the lede at 390, small); from 900px it fills the
   first screen, the words low at the RIGHT (the kayaks sit low in the middle) on a soft graduation from the right and the
   foot, the credit bottom left. */
.mu-open{position:relative;height:max(520px, calc(100svh - var(--hh) - var(--bar)));color:var(--white);overflow:hidden;background:var(--pine)}
.mu-open-photo{position:absolute;inset:0}
.mu-open-photo .photo{position:absolute;inset:0}
.mu-open-photo .photo img{width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.mu-open-photo figcaption{display:none}
.mu-open::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(17,36,26,.9) 0%, rgba(17,36,26,.66) 30%, rgba(17,36,26,0) 60%)}
.mu-open-words{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(26px, 6vw, 44px)}
.mu-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.05;letter-spacing:-.01em}
.mu-open .lede{margin-top:12px;font-size:16px;color:var(--white)}
@media (min-width:900px){
  .mu-open{display:block;height:calc(100svh - var(--hh));min-height:600px;max-height:1500px}
  .mu-open-photo{position:absolute;inset:0}
  .mu-open-photo .photo{position:absolute;inset:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
  .mu-open-photo .photo img{object-position:50% 82%}
  .mu-open::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(17,36,26,.72) 0%, rgba(17,36,26,.38) 28%, rgba(17,36,26,0) 52%), linear-gradient(to left, rgba(17,36,26,.6) 0%, rgba(17,36,26,.34) 28%, rgba(17,36,26,0) 48%)}
  .mu-open-photo figcaption{display:block;position:absolute;z-index:2;left:var(--edge);bottom:20px;margin:0;max-width:24em;font-size:14px;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .mu-open-words{position:absolute;padding:0;margin:0;left:auto;right:var(--edge);bottom:clamp(64px, 11svh, 130px);width:min(34vw, 600px)}
  .mu-open h1{font-size:clamp(40px, 18px + 2.3vw, 74px);line-height:1.02}
  .mu-open .lede{margin-top:clamp(14px, 1.2vw, 22px);font-size:clamp(17px, 15px + .3vw, 22px)}
}
@media (min-width:1800px){
  .mu-open-words{right:3vw;width:27vw}
}

/* ---------- from the water (data-section="from-the-water") ----------
   The words, then 5 photographs of different sizes that touch: the kayakers under the arch large and bleeding off the
   left edge, the cruise boat stepping over its right corner, the kayaks along the cliffs and Miners Castle smaller below
   them, Chapel Rock last; then the boats as a ruled list of lines, each row a link to its own site. On a phone the
   photographs follow one another, stepping left and right. */
.mu-water{padding-block:clamp(48px, 7vw, 120px)}
.mu-water-grid{display:grid;gap:22px}
.mu-water-words .lede{margin-top:14px;max-width:30em}
.mu-water figure .photo{background:var(--birch)}
.mu-w-a{margin-inline:calc(-1*var(--pad))}
.mu-w-a .photo{aspect-ratio:3/2}
.mu-w-a figcaption{padding-inline:var(--pad)}
.mu-w-b{width:88%;margin-left:auto;margin-right:0} /* no bleed on a phone: the boat is at the right edge of the photograph */
.mu-w-b .photo{aspect-ratio:3/2}
.mu-w-b figcaption{padding-right:var(--pad)}
.mu-w-c{width:84%}
.mu-w-c .photo{aspect-ratio:4/3}
.mu-w-d .photo,.mu-w-e .photo{aspect-ratio:3/2}
.mu-w-e{width:80%;margin-left:auto}
.mu-ops h3{font-size:clamp(28px, 6.8vw, 34px);margin-bottom:12px}
.mu-ops .mu-opname{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mu-oplist{list-style:none;margin:0;padding:0}
.mu-oplist li{border-top:1px solid var(--line)}
.mu-oplist li:last-child{border-bottom:1px solid var(--line)}
.mu-oplist a{display:grid;gap:4px;padding:18px 0;text-decoration:none}
.mu-opname{font-family:var(--display);font-size:clamp(26px, 6.4vw, 32px);line-height:1.1}
.mu-opline{color:var(--moss);max-width:36em}
.mu-oplist a:hover .mu-opname{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.mu-ops .small-line{margin-top:14px;max-width:36em}
@media (min-width:900px){
  .mu-water-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .mu-water-words{grid-column:1 / 6;grid-row:1}
  .mu-w-a{grid-column:1 / 9;grid-row:2;margin:clamp(24px, 3vw, 48px) 0 0 calc(-1*var(--edge))}
  .mu-w-a figcaption{padding:0 0 0 var(--edge);max-width:calc(var(--edge) + 48%)}
  .mu-w-b{grid-column:8 / 13;grid-row:2;width:auto;margin:clamp(120px, 16vw, 300px) calc(-1*var(--edge)) 0 0;position:relative;z-index:2}
  .mu-w-b .photo{border:8px solid var(--white);border-right:0;margin-left:calc(-1*clamp(30px, 4vw, 80px))}
  .mu-w-b figcaption{padding:0 var(--edge) 0 0}
  .mu-w-c{grid-column:2 / 6;grid-row:3;width:auto;margin-top:clamp(28px, 3vw, 56px)}
  .mu-w-d{grid-column:6 / 10;grid-row:3;margin-top:clamp(70px, 8vw, 150px)}
  .mu-w-e{grid-column:10 / 13;grid-row:3;width:auto;margin-top:clamp(28px, 3vw, 56px)}
  .mu-ops{grid-column:5 / 13;grid-row:4;margin-top:clamp(56px, 7vw, 120px)}
  .mu-ops h3{font-size:clamp(30px, 14px + 1.2vw, 40px)}
  .mu-oplist a{grid-template-columns:repeat(8,1fr);column-gap:var(--gap);align-items:baseline;padding:22px 0}
  .mu-opname{grid-column:1 / 4;font-size:clamp(26px, 14px + .9vw, 34px)}
  .mu-opline{grid-column:4 / 9}
}

/* ---------- by car and on foot (data-section="by-car-and-on-foot") ----------
   The page's one pale ground. The 3 places as ruled entries in words at the left, Miners Castle large at the right with
   the Log Slide and the lighthouse stepping under it. */
.mu-car{background:var(--birch);padding-block:clamp(48px, 7vw, 120px)}
.mu-car-grid{display:grid;gap:26px}
.mu-carlist{list-style:none;margin:20px 0 0;padding:0}
.mu-carlist li{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--pine)}
.mu-carlist h3{font-size:clamp(26px, 6.4vw, 32px)}
.mu-carlist p{color:var(--moss);max-width:34em}
.mu-car-words .small-line{margin-top:14px;max-width:34em}
.mu-car figure .photo{background:var(--white)}
.mu-c-a .photo{aspect-ratio:3/2}
.mu-c-b .photo,.mu-c-c .photo{aspect-ratio:4/3}
.mu-c-b{width:80%}
.mu-c-c{width:80%;margin-left:auto}
@media (min-width:900px){
  .mu-car-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .mu-car-words{grid-column:1 / 6;grid-row:1 / 4}
  .mu-c-a{grid-column:7 / 13;grid-row:1}
  .mu-c-b{grid-column:7 / 10;grid-row:2;width:auto;margin-top:clamp(24px, 3vw, 48px)}
  .mu-c-c{grid-column:10 / 13;grid-row:2;width:auto;margin:clamp(60px, 7vw, 120px) 0 0}
}

/* ---------- the falls (data-section="the-falls") ----------
   The closure first, in plain words under the heading. Four photographs of different shapes: Munising Falls tall at the
   left, Miners Falls wide beside it, Wagner and Bridalveil smaller under it; the 3 kinds of fall (from the road, on foot,
   from the water) as one run of lines under the photographs, no rules. */
.mu-falls{padding-block:clamp(48px, 7vw, 120px)}
.mu-falls-grid{display:grid;gap:22px}
.mu-note{margin-top:16px;max-width:36em;padding-left:16px;border-left:3px solid var(--lichen)}
.mu-note b{font-weight:600}
.mu-falls figure .photo{background:var(--birch)}
.mu-f-a{width:72%}
.mu-f-a .photo{aspect-ratio:3/4}
.mu-f-b{margin-inline:calc(-1*var(--pad))}
.mu-f-b .photo{aspect-ratio:3/2}
.mu-f-b figcaption{padding-inline:var(--pad)}
.mu-f-c{width:80%}
.mu-f-c .photo,.mu-f-d .photo{aspect-ratio:3/2}
.mu-f-d{width:80%;margin-left:auto}
.mu-falllist{list-style:none;margin:0;padding:0}
.mu-falllist li{padding:0 0 18px}
.mu-falllist h3{font-size:clamp(22px, 5.4vw, 26px);margin-bottom:4px}
.mu-falllist p{color:var(--moss);max-width:40em}
.mu-falllist b{color:var(--pine);font-weight:600}
@media (min-width:900px){
  .mu-falls-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .mu-falls-head{grid-column:1 / 7;grid-row:1}
  .mu-f-a{grid-column:1 / 5;grid-row:2;width:auto;margin-top:clamp(28px, 3vw, 56px)}
  .mu-f-b{grid-column:5 / 13;grid-row:2;margin:clamp(60px, 7vw, 130px) calc(-1*var(--edge)) 0 0}
  .mu-f-b .photo{aspect-ratio:16/9}
  .mu-f-b figcaption{padding:0}
  .mu-f-c{grid-column:5 / 9;grid-row:3;width:auto;margin-top:clamp(28px, 3vw, 56px)}
  .mu-f-d{grid-column:9 / 13;grid-row:3;width:auto;margin-top:clamp(60px, 6vw, 110px)}
  .mu-falllist{grid-column:5 / 13;grid-row:4;margin-top:clamp(40px, 5vw, 90px)}
  .mu-falllist h3{display:inline;margin:0 10px 0 0}
  .mu-falllist p{display:inline}
}

/* ---------- Munising in winter (data-section="in-winter") ----------
   The page's one pine band: the words at the left in lichen, the ice curtains large at the right with the ice wall and the
   frozen bay stepping under it. */
.mu-winter{background:var(--pine);color:var(--white);padding-block:clamp(48px, 7vw, 120px)}
.mu-winter-grid{display:grid;gap:22px}
.mu-winter-words .lede{margin-top:14px;color:var(--lichen);max-width:30em}
.mu-winter-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.mu-winter .more{color:var(--white)}
.mu-winter figure .photo{background:#2a4a3a}
.mu-winter figcaption{color:var(--lichen)}
.mu-winter figcaption a{color:var(--white)}
.mu-v-a .photo{aspect-ratio:3/2}
.mu-v-b .photo,.mu-v-c .photo{aspect-ratio:4/3}
.mu-v-b{width:80%}
.mu-v-c{width:80%;margin-left:auto}
@media (min-width:900px){
  .mu-winter-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .mu-winter-words{grid-column:1 / 5;grid-row:1 / 3}
  .mu-v-a{grid-column:5 / 13;grid-row:1}
  .mu-v-b{grid-column:5 / 9;grid-row:2;width:auto;margin-top:clamp(24px, 3vw, 48px)}
  .mu-v-c{grid-column:9 / 13;grid-row:2;width:auto;margin:clamp(60px, 6vw, 110px) 0 0}
}

/* ---------- getting there (data-section="getting-there") ----------
   The heading at the left, the 3 answers as ruled rows at the right: a name and its words, no cards. */
.mu-there{padding-block:clamp(48px, 7vw, 130px)}
.mu-there-grid{display:grid;gap:22px}
.mu-there-list{margin:0;display:grid}
.mu-there-list>div{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.mu-there-list>div:last-child{border-bottom:1px solid var(--line)}
.mu-there-list dt{font-family:var(--display);font-size:clamp(24px, 6vw, 30px);line-height:1.15}
.mu-there-list dd{margin:0;color:var(--moss);max-width:38em}
@media (min-width:900px){
  .mu-there-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .mu-there-grid>h2{grid-column:1 / 5}
  .mu-there-list{grid-column:5 / 13}
  .mu-there-list>div{grid-template-columns:repeat(8,1fr);column-gap:var(--gap);align-items:baseline;padding:24px 0}
  .mu-there-list dt{grid-column:1 / 3}
  .mu-there-list dd{grid-column:3 / 9}
}

/* ---------- back at the lodge (data-section="back-at-the-lodge") ----------
   The house that is selling, back in the page: the fire pit photograph edge to edge, then the heading at the left and the
   evening in 2 lines at the right with 2 underlined doors. */
.mu-back{padding-bottom:clamp(48px, 7vw, 120px)}
.mu-back-photo{margin:0 auto;max-width:1480px}
.mu-back-photo .photo{aspect-ratio:4/5;background:var(--birch)}
.mu-back-grid{display:grid;gap:14px;padding-top:clamp(26px, 4vw, 56px)}
.mu-back-words .lede{max-width:30em}
.mu-back-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:6px}
@media (min-width:900px){
  .mu-back-photo .photo{aspect-ratio:2/1}
  .mu-back-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .mu-back-grid>h2{grid-column:1 / 7}
  .mu-back-words{grid-column:7 / 13}
}