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

/* ---------- the opening (data-section="opening") ----------
   On a phone (under 900px) the page opens the way this line's sites do (Velero, Serenity): ONE photograph, the lodge on
   its pond in October gold, filling the screen from the header down to the price bar, cropped to the lodge, with the
   headline and the place line over its shaded foot and no caption under it (Michael, 23 Oct 2026: "shouldn't a hero
   take up the full viewport? Don't we normally have the wording on top of the hero's?"). The lodge is stored 1,440
   wide, so at this size it is enlarged on a phone's screen: Michael accepted that for this frame until the owner sends the
   drone original (a Swap on the Photos page). Lake Superior's shore from the air follows as the second photograph, with
   its caption. From 900px the shore (stored 2,560 wide) fills the screen under the header with the words on its shaded
   lower left, and the lodge is laid across its right-hand side, never wider than about 960px, hanging into the white
   below. Both photographs show at every width, so nothing hidden is fetched. */
.hero{position:relative;display:grid;grid-template-columns:100%;background:var(--ground);color:var(--pine)}
.hero h1{font-size:clamp(34px, 9.4vw, 44px);line-height:1.05;letter-spacing:-.01em}
.hero-place{margin-top:12px;font-size:17px;line-height:1.5;max-width:32em}
.hero-photo figcaption{padding-inline:var(--pad)}
.hero-stage{position:relative}
.hero-frame{position:relative;overflow:hidden;background:var(--birch)}
/* The way in to the 360 tour (round 2, 30 Oct 2026): the shore from the air is the door. On a phone the photograph is
   as it was and the line and the gold pill sit under it, before the caption; from 900px they sit over its lower left,
   where the water and the trees are darkest, on a soft dark graduation (never a box). */
.hero-door{padding:20px var(--pad) 0}
.hero-door-line{font-family:var(--display);font-size:clamp(26px, 7vw, 32px);line-height:1.12;max-width:16em;text-wrap:balance}
.hero-door .btn{margin-top:16px}
.hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .hero{grid-template-rows:max(520px, calc(100svh - var(--hh) - var(--bar))) auto}
  .hero-lodge{grid-area:1 / 1;position:relative;overflow:hidden;margin:0}
  .hero-lodge .photo{position:absolute;inset:0}
  .hero-lodge .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 48%}
  .hero-lodge::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(17,36,26,.9) 0%, rgba(17,36,26,.64) 34%, rgba(17,36,26,.26) 52%, rgba(17,36,26,0) 66%)}
  .hero-lodge figcaption{display:none}
  .hero-words{grid-area:1 / 1;align-self:end;position:relative;z-index:2;padding:0 var(--pad) clamp(26px, 6vw, 44px);color:var(--white)}
  .hero-photo{grid-area:2 / 1;margin-top:clamp(28px, 6vw, 44px)}
  .hero-frame{aspect-ratio:16/9}
  .hero-frame img{object-position:60% 60%}
}
@media (min-width:900px){
  /* Desktop, as Villa Perdido opens (Michael, 23 Oct 2026, of the shore-and-inset version: "I also hate the hero on the
     home page, can we make it more like Perdido's hero? big, bold, full viewport"): the whole screen under the header,
     pine at the left fading into the lodge on its pond across the right three quarters, the headline large at the upper
     left. The lodge is stored 1,440 wide, so it is enlarged on a wide screen: accepted by Michael until the owner's original
     arrives. The shore follows as a full-width band (stored 2,560 wide). */
  .hero{grid-template-rows:max(620px, min(1500px, calc(100svh - var(--hh)))) auto;color:var(--pine)}
  .hero-lodge{grid-area:1 / 1;position:relative;margin:0;background:var(--pine);overflow:hidden}
  .hero-lodge .photo{position:absolute;top:0;bottom:0;left:25%;right:0}
  .hero-lodge .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 52%}
  .hero-lodge .photo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(to right, var(--pine) 0%, rgba(30,58,44,.82) 30%, rgba(30,58,44,0) 100%)}
  .hero-lodge figcaption{display:none}
  .hero-words{grid-area:1 / 1;align-self:start;position:relative;z-index:2;margin:clamp(96px, 21svh, 320px) 0 0 var(--edge);width:min(44vw, 1000px);padding:0;color:var(--white)}
  .hero h1{font-size:clamp(52px, 22px + 3.4vw, 98px);line-height:1.0}
  .hero-place{margin-top:clamp(18px, 1.6vw, 30px);font-size:clamp(17px, 15px + .3vw, 22px);max-width:26em;color:var(--lichen)}
  .hero-photo{grid-area:2 / 1;margin:0}
  .hero-frame{aspect-ratio:21/9}
  .hero-frame img{object-position:50% 60%}
  .hero-photo figcaption{padding-inline:var(--edge)}
  .hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(17,36,26,.78) 0%, rgba(17,36,26,.5) 24%, rgba(17,36,26,0) 52%), linear-gradient(to right, rgba(17,36,26,.5) 0%, rgba(17,36,26,0) 46%)}
  .hero-door{position:absolute;z-index:2;left:var(--edge);bottom:clamp(24px, 3.2vw, 64px);padding:0;color:var(--white)}
  .hero-door-line{font-size:clamp(28px, 14px + 1.5vw, 52px);max-width:15em}
  .hero-door .btn{margin-top:clamp(16px, 1.4vw, 28px)}
}
/* On a wide screen the words would reach the lodge itself: the photograph starts further right, framed toward its
   right-hand side, and the words keep to 820px, so they never cross the house. */
@media (min-width:1800px){
  .hero-lodge .photo{left:34%}
  .hero-lodge .photo img{object-position:30% 52%}
  .hero-words{width:min(44vw, 820px)}
}


/* ---------- the lodge (data-section="the-lodge") ----------
   The heading and the words, then the great room large with the kitchen and the reading nook beside it, all inside the
   1,320px column (Michael, 23 Oct: the great room running off the left edge read as a section out of line). */
.rooms-sec{padding-block:clamp(48px, 7vw, 120px) clamp(64px, 9vw, 150px)}
.rooms-words .lede{margin-top:14px}
.rooms-words .more{margin-top:6px}
.rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.rooms-grid .big{grid-column:1 / -1;margin-inline:calc(-1*var(--pad))}
.rooms-grid .big .photo{aspect-ratio:4/3}
.rooms-grid .big figcaption{padding-inline:var(--pad)}
.rooms-grid .side .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .rooms-sec{padding-top:clamp(64px, 7vw, 128px)}
  .rooms-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .rooms-head h2{grid-column:1 / 6;max-width:12em}
  .rooms-words{grid-column:7 / 13;justify-self:end;max-width:33em}
  .rooms-words .lede{margin-top:0}
  .rooms-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)}
  .rooms-grid .big{grid-column:1 / 9;grid-row:1 / 3;margin:0;display:flex;flex-direction:column}
  .rooms-grid .big .photo{aspect-ratio:auto;flex:1;min-height:0}
  .rooms-grid .big .photo img{position:absolute;inset:0}
  .rooms-grid .big figcaption{padding:0}
  .rooms-grid .side{grid-column:9 / 13}
  .rooms-grid .side .photo{aspect-ratio:1/1}
  .rooms-grid .s-a{grid-row:1}
  .rooms-grid .s-b{grid-row:2}
}

/* ---------- the evenings (data-section="evenings") ----------
   The page's one pale ground. The fire pit with friends around it is the large photograph (stored 1,440 wide, so it
   stays inside the column) beside the words; under the words the sauna's open log door, a tall portrait (both sauna
   pictures are portrait), and under the fire pit the stones on the heater, small, beside the deck, which overlaps the
   fire pit's lower edge: door, stones, fire. On a phone: the words, the fire pit edge to edge, the door and the stones
   side by side, then the deck. */
.eve-sec{background:var(--birch);padding-block:clamp(56px, 8vw, 140px)}
.eve-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eve-words{grid-column:1 / -1;margin-bottom:16px}
.eve-words .lede{margin-top:14px}
.eve-words .more{margin-top:6px}
.eve-fire{grid-column:1 / -1;margin-inline:calc(-1*var(--pad))}
.eve-fire figcaption{padding-inline:var(--pad)}
.eve-fire .photo{aspect-ratio:4/3}
.eve-sauna .photo,.eve-stones .photo{aspect-ratio:3/4}
.eve-deck{grid-column:1 / -1}
.eve-deck .photo{aspect-ratio:16/9}
@media (min-width:900px){
  .eve-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .eve-words{grid-column:1 / 5;grid-row:1;margin:0;padding-top:clamp(0px, 2vw, 32px)}
  .eve-fire{grid-column:5 / 13;grid-row:1 / 3;margin:0}
  .eve-fire figcaption{padding:0}
  .eve-sauna{grid-column:1 / 5;grid-row:2 / 4;align-self:end;margin-top:clamp(28px, 3vw, 56px)}
  .eve-sauna .photo{aspect-ratio:3/4}
  .eve-stones{grid-column:5 / 8;grid-row:3;align-self:end;margin-top:clamp(28px, 3vw, 56px)}
  .eve-stones .photo{aspect-ratio:4/5}
  .eve-deck{grid-column:8 / 13;grid-row:3;margin-top:calc(-1 * clamp(60px, 7vw, 160px));position:relative;z-index:1}
  .eve-deck .photo{aspect-ratio:16/9;box-shadow:0 18px 44px rgba(10,26,18,.22)}
}


/* ---------- the seasons (data-section="the-seasons") ----------
   The trails from the door, then 4 doorways, one for each season's page. On a phone the doorways scroll sideways. */
.ways-sec{padding-block:clamp(56px, 8vw, 140px)}
.ways-words .lede{margin-top:14px}
.ways-words .more{margin-top:6px}
.doors{list-style:none;margin:28px calc(-1*var(--pad)) 0;padding:0 var(--pad);display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.doors::-webkit-scrollbar{display:none}
.doors li{scroll-snap-align:start}
.doors a{display:block;text-decoration:none}
.doors a:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.door-photo{margin:0 0 14px}
.door-photo .photo{aspect-ratio:4/3}
.door-photo{position:relative}
.door-photo .credit{position:absolute;left:8px;bottom:8px;margin:0;padding:2px 8px;border-radius:4px;background:rgba(17,36,26,.78);font-size:14px;line-height:1.35;color:var(--white)}
.doors h3{display:flex;align-items:center;gap:12px}
.doors h3::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.doors p{margin-top:6px;color:var(--moss);line-height:1.5;font-size:16px}
@media (min-width:900px){
  .ways-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .ways-head h2{grid-column:1 / 6}
  .ways-words{grid-column:7 / 13;justify-self:end;max-width:33em}
  .ways-words .lede{margin-top:0}
  .doors{grid-auto-flow:row;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(36px, 3.6vw, 64px);overflow:visible;margin:clamp(32px, 3.4vw, 56px) 0 0;padding:0}
  .doors p{font-size:16px;max-width:30em}
  /* 4 doors in 2 rows of 2, a wide one and a narrow one, swapping sides: never 4 identical cards. */
  .doors li:nth-child(1){grid-column:1 / 8}
  .doors li:nth-child(2){grid-column:8 / 13;padding-top:clamp(40px, 6vw, 120px)}
  .doors li:nth-child(3){grid-column:1 / 6;padding-top:clamp(24px, 4vw, 96px)}
  .doors li:nth-child(4){grid-column:6 / 13}
  .doors li:nth-child(1) .door-photo .photo,.doors li:nth-child(4) .door-photo .photo{aspect-ratio:16/10}
}

/* ---------- Marquette (data-section="marquette") ----------
   The harbor and its ore dock across the column (stored 1,680 wide, so never wider than the column), the words on a
   white panel that overlaps its lower left corner from 900px. On a phone the photograph runs edge to edge and the words
   follow. */
.town-sec{padding-block:clamp(56px, 8vw, 140px)}
.town-grid{display:grid;gap:22px}
.town-photo{margin-inline:calc(-1*var(--pad))}
.town-photo .photo{aspect-ratio:16/9}
.town-photo figcaption{padding-inline:var(--pad)}
.town-words .lede{margin-top:14px}
.town-words .more{margin-top:6px}
@media (min-width:900px){
  .town-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0}
  .town-photo{grid-column:1 / 13;grid-row:1;margin:0}
  .town-photo .photo{aspect-ratio:21/9}
  .town-photo figcaption{text-align:right}
  .town-words{grid-column:1 / 7;grid-row:1;align-self:end;position:relative;z-index:1;margin-bottom:calc(-1 * clamp(60px, 7vw, 140px));padding:clamp(28px, 3vw, 52px) clamp(28px, 3vw, 52px) 0 0;background:var(--ground)}
  .town-sec{padding-bottom:calc(clamp(56px, 8vw, 140px) + clamp(60px, 7vw, 140px))}
}