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

/* ---------- the opening (data-section="opening") ----------
   The ice curtains at Pictured Rocks (a 3,840 file, credited) 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 foot. On a phone the photograph keeps a 16:10
   frame with no caption (the render's phone-opening-caption rule) and the words sit under it on white. */
.wn-open{position:relative}
.wn-open-photo .photo{aspect-ratio:16/10;background:var(--birch)}
.wn-open-photo figcaption{display:none}
.wn-open-words{padding:20px var(--pad) 36px}
.wn-open h1{font-size:clamp(36px, 9.6vw, 46px);line-height:1.05;letter-spacing:-.01em}
.wn-open .lede{margin-top:14px}
@media (min-width:900px){
  .wn-open{height:calc(100svh - var(--hh));min-height:600px;max-height:1500px;color:var(--white);overflow:hidden}
  .wn-open-photo{position:absolute;inset:0}
  .wn-open-photo .photo{position:absolute;inset:0;aspect-ratio:auto}
  .wn-open-photo .photo img{object-position:50% 40%}
  .wn-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,.6) 36%, rgba(17,36,26,0) 68%)}
  .wn-open-photo figcaption{display:block;position:absolute;z-index:2;right:var(--edge);bottom:20px;margin:0;max-width:24em;text-align:right;font-size:14px;color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .wn-open-photo figcaption a{color:var(--white)}
  .wn-open-words{position:absolute;z-index:2;left:var(--edge);bottom:clamp(64px, 11svh, 130px);width:min(58vw, 880px);padding:0}
  .wn-open h1{font-size:clamp(54px, 22px + 3.3vw, 88px);line-height:1.02}
  .wn-open .lede{margin-top:clamp(14px, 1.2vw, 22px);font-size:clamp(18px, 16px + .3vw, 23px);max-width:28em}
}
@media (max-width:899px){ .wn-open-photo figcaption{display:none} }

/* ---------- what the winter brings (data-section="the-winter-in-numbers") ----------
   The answer first, in large type at the left (the snow), with the one limit of the page under it; at the right the
   3 months as ruled rows with no cards and no icons: the heading of each month in the display face, its figures beside. */
.wn-numbers{padding-block:clamp(48px, 7vw, 120px)}
.wn-numbers-grid{display:grid;gap:32px}
.wn-numbers-head h2{margin-bottom:18px}
.wn-big{font-family:var(--display);font-size:clamp(30px, 7.6vw, 44px);line-height:1.12;max-width:15em;text-wrap:balance}
.wn-numbers-head .small-line{margin-top:20px;max-width:30em}
.wn-months{list-style:none;margin:0;padding:0}
.wn-months li{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line)}
.wn-months li:last-child{border-bottom:1px solid var(--line)}
.wn-months p{color:var(--moss);max-width:36em}
@media (min-width:900px){
  .wn-numbers-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .wn-numbers-head{grid-column:1 / 7}
  .wn-big{font-size:clamp(40px, 20px + 2.2vw, 62px)}
  .wn-months{grid-column:8 / 13;padding-top:12px}
  .wn-months li{padding:26px 0}
}

/* ---------- two weekends (data-section="two-winter-weekends") ----------
   The page's one pale ground. The heading, then the 2 events as large dated entries on a 12-column grid, the second set
   lower and further right so the pair steps down the page; on a phone one under the other with a hairline. */
.wn-dates{background:var(--birch);padding-block:clamp(56px, 8vw, 140px)}
.wn-events{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:36px}
.wn-events li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:1px solid var(--pine)}
.wn-when{font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--moss)}
.wn-events h3{font-size:clamp(30px, 7vw, 44px)}
.wn-events li p:not(.wn-when){color:var(--moss);max-width:30em}
@media (min-width:900px){
  .wn-events{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px);align-items:start}
  .wn-event-a{grid-column:1 / 6}
  .wn-event-b{grid-column:7 / 13;margin-top:clamp(60px, 8vw, 130px)}
  .wn-events h3{font-size:clamp(36px, 20px + 1.9vw, 56px)}
}

/* ---------- days out (data-section="days-out") ----------
   Four days out as a ruled list. At 900px and up the heading and the list sit at the left, the ice wall photograph
   (a frozen curtain seen from behind) large at the right with the Eben ice cave stepping under it, smaller. Both frames
   keep their files' own proportions so what each caption names is in view. On a phone: list, then the 2 photographs. */
.wn-days{padding-block:clamp(56px, 8vw, 140px)}
.wn-days-grid{display:grid;gap:26px}
.wn-days-list{list-style:none;margin:0;padding:0}
.wn-days-list li{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.wn-days-list li:last-child{border-bottom:1px solid var(--line)}
.wn-days-list p{color:var(--moss);max-width:34em}
.wn-wall .photo{aspect-ratio:3/2;background:var(--birch)}
.wn-eben .photo{aspect-ratio:4/3;background:var(--birch)}
.wn-days figcaption{max-width:34em}
@media (min-width:900px){
  .wn-days-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .wn-days-grid>h2{grid-column:1 / 6;grid-row:1}
  .wn-days-list{grid-column:1 / 6;grid-row:2;margin-top:28px}
  .wn-wall{grid-column:7 / 13;grid-row:1 / 3}
  .wn-eben{grid-column:9 / 13;grid-row:3;margin-top:clamp(28px, 3.4vw, 56px)}
}

/* ---------- the lake, smoking (data-section="the-lake") ----------
   The page's one pine band: the sea smoke words in lichen at the left, the credited photograph at the right in its own
   3:2, both inside the column. */
.wn-smoke{background:var(--pine);color:var(--white);padding-block:clamp(56px, 8vw, 130px)}
.wn-smoke-grid{display:grid;gap:28px}
.wn-smoke-words .lede{margin-top:16px;color:var(--lichen)}
.wn-smoke-words .more{margin-top:8px}
.wn-smoke-photo .photo{aspect-ratio:3/2;background:#2a4a3a}
.wn-smoke figcaption{color:var(--lichen)}
.wn-smoke figcaption a{color:var(--white)}
@media (min-width:900px){
  .wn-smoke-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .wn-smoke-words{grid-column:1 / 5}
  .wn-smoke-photo{grid-column:6 / 13}
}

/* ---------- back before dark (data-section="back-before-dark") ----------
   The real photographs of the house (no photograph of the lodge in snow exists, so none is implied): the sauna's open
   log door at the left, a tall portrait (the true sauna picture is portrait), the words and the lodge's gifts beside it,
   the great room smaller below the words. On a phone the sauna, the words, then the great room. */
.wn-home{padding-block:clamp(56px, 8vw, 140px)}
.wn-home-grid{display:grid;gap:26px}
.wn-sauna .photo,.wn-room .photo{aspect-ratio:4/3;background:var(--birch)}
.wn-sauna .photo{aspect-ratio:3/4}
.wn-sauna{width:82%}
.wn-home-words .lede{margin-top:14px}
.wn-gifts{list-style:none;margin:22px 0 10px;padding:0}
.wn-gifts li{padding:12px 0;border-top:1px solid var(--line);color:var(--moss);max-width:34em}
.wn-gifts b{color:var(--pine);font-weight:600}
@media (min-width:900px){
  .wn-home-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .wn-sauna{grid-column:1 / 6;grid-row:1 / 3;width:auto}
  .wn-home-words{grid-column:7 / 13;grid-row:1;padding-top:clamp(0px, 2vw, 32px)}
  .wn-room{grid-column:7 / 12;grid-row:2;margin-top:clamp(28px, 3.4vw, 56px)}
}

/* ---------- two ways to spend a day (data-section="two-doors") ----------
   The 2 activity pages as large type lines with hairlines, the whole row a link; a quiet line of other pages under. */
.wn-doors{padding-block:clamp(48px, 7vw, 110px);border-top:1px solid var(--line)}
.wn-doors-grid{display:grid;gap:22px}
.wn-door-list{list-style:none;margin:0;padding:0}
.wn-door-list li{border-top:1px solid var(--line)}
.wn-door-list li:last-child{border-bottom:1px solid var(--line)}
.wn-door-list a{display:grid;gap:4px;padding:22px 0;text-decoration:none}
.wn-door-name{font-family:var(--display);font-size:clamp(32px, 8vw, 48px);line-height:1.1}
.wn-door-line{color:var(--moss);max-width:34em}
.wn-door-list a:hover .wn-door-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.wn-door-more{display:flex;flex-wrap:wrap;gap:0 24px}
@media (min-width:900px){
  .wn-doors-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .wn-doors-grid>h2{grid-column:1 / 5}
  .wn-door-list{grid-column:5 / 13}
  .wn-door-more{grid-column:5 / 13}
  .wn-door-list a{grid-template-columns:repeat(8,1fr);column-gap:var(--gap);align-items:baseline;padding:30px 0}
  .wn-door-name{grid-column:1 / 5;font-size:clamp(36px, 20px + 1.9vw, 54px)}
  .wn-door-line{grid-column:5 / 9}
}

/* ---------- the opening on a wide screen (27 Oct 2026, the owner's own snow picture leads) ----------
   His picture of the lodge in the snow is 1,448 wide. Up to 1,500px it covers the screen as before (1,448 across 1,440 is
   its own size). From 1,500px it keeps its own size at the right, 1,086 tall at most, and the pine ground fills the left,
   fading into the photograph under the words, as the home page's opening does, so the lodge is never enlarged. */
@media (min-width:1500px){
  .wn-open{height:min(calc(100svh - var(--hh)), 1086px);min-height:0;background:var(--pine)}
  .wn-open-photo{background:var(--pine)}
  .wn-open-photo .photo{left:auto;right:0;width:1448px}
  .wn-open-photo .photo::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:1;pointer-events:none;background:linear-gradient(to right, var(--pine) 0%, rgba(30,58,44,.85) 28%, rgba(30,58,44,0) 100%)}
  .wn-open-photo .photo img{object-position:50% 50%}
}

/* ---------- the lodge in the snow (data-section="the-lodge-in-the-snow") ----------
   the owner's own winter pictures of the place: the shore from the air beside the words, and the lodge from straight above
   set lower at the left, both inside the 1,320 column. On a phone the words, the shore full width, then the lodge at 70%. */
.wn-snow{padding-block:clamp(48px, 7vw, 120px)}
.wn-snow-grid{display:grid;gap:22px}
.wn-snow-words .lede{margin-top:14px}
.wn-snow-words .more{margin-top:6px}
.wn-snow-a{margin-inline:calc(-1*var(--pad))}
.wn-snow-a .photo{aspect-ratio:4/3;background:var(--birch)}
.wn-snow-a figcaption{padding-inline:var(--pad)}
.wn-snow-b{width:70%}
.wn-snow-b .photo{aspect-ratio:4/3;background:var(--birch)}
@media (min-width:900px){
  .wn-snow-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .wn-snow-words{grid-column:1 / 5;grid-row:1;padding-right:8px}
  .wn-snow-a{grid-column:5 / 13;grid-row:1 / 3;margin:0}
  .wn-snow-a figcaption{padding:0}
  .wn-snow-b{grid-column:1 / 5;grid-row:2;width:auto;margin-top:clamp(28px, 3vw, 56px)}
}