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

/* ---------- the opening (data-section="opening") ----------
   Words first in the column: one selling line and a sentence under it. Then the great room (stored 2,560 wide) as one
   band edge to edge, 4:3 on a phone and a wide strip from 900px, cropped from the sides and never from a portrait. */
.lo-open{padding-top:clamp(28px, 4vw, 64px)}
.lo-open h1{font-size:clamp(38px, 10vw, 46px);line-height:1.04;letter-spacing:-.015em;max-width:14em}
.lo-open .lede{margin-top:14px}
.lo-hero{margin-top:clamp(26px, 3.4vw, 56px)}
.lo-hero .photo{aspect-ratio:4/3}
.lo-hero img{object-position:50% 58%}
.lo-hero figcaption{padding-bottom:clamp(8px, 1vw, 16px)}
@media (min-width:900px){
  .lo-open h1{font-size:clamp(52px, 22px + 3.2vw, 96px);line-height:1;max-width:13em}
  .lo-open .lede{max-width:36em;margin-top:clamp(16px, 1.6vw, 28px)}
  .lo-hero .photo{aspect-ratio:2/1}
  .lo-hero img{object-position:50% 62%}
}
@media (min-width:1800px){ .lo-hero .photo{aspect-ratio:2.4/1} }

/* ---------- the way in to the 360 tour (class lodge-tour) ----------
   The page's one pine band, shown only while the house has its tour. The film itself lives on /virtual-tour: here the
   lodge from the air at the left (stored 1,440 wide, so inside 7 columns, never wider), the heading, the line and the
   link at the right. Stacked on a phone, the photograph first. */
.lodge-tour{background:var(--pine);color:var(--white);padding-block:clamp(48px, 6vw, 96px)}
.lo-tour-grid{display:grid;gap:22px}
.lodge-tour .lede{color:var(--white);margin-top:14px}
.lodge-tour .more{margin-top:18px;color:var(--white)}
.lo-tour-photo .photo{aspect-ratio:3/2}
@media (min-width:900px){
  .lo-tour-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .lo-tour-photo{grid-column:1 / 8}
  .lo-tour-words{grid-column:9 / 13}
  .lodge-tour .lede{max-width:24em}
}

/* ---------- a room-by-room passage (.lo-sec) ----------
   Heading left, our words right, then the photographs: one large and two beside it. The kitchen swaps the sides. */
.lo-sec{padding-block:clamp(56px, 8vw, 128px);border-top:1px solid var(--line)}
.lo-words .lede{margin-top:14px}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.trio .t-big{grid-column:1 / -1;margin-inline:calc(-1*var(--pad))}
.trio .t-big figcaption{padding-inline:var(--pad)}
.trio .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .lo-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .lo-head h2{grid-column:1 / 7;max-width:12em}
  .lo-words{grid-column:7 / 13;justify-self:end;max-width:33em}
  .lo-words .lede{margin-top:0}
  .trio{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)}
  .trio .t-big{grid-column:1 / 9;grid-row:1 / 3;margin:0}
  .trio .t-big figcaption{padding:0}
  .trio .t-a,.trio .t-b{grid-column:9 / 13}
  .trio .t-a{grid-row:1}
  .trio .t-b{grid-row:2}
  .trio.flip .t-big{grid-column:5 / 13}
  .trio.flip .t-a,.trio.flip .t-b{grid-column:1 / 5}
}
.lo-kitchen{background:var(--white)}

/* ---------- the great room (data-section="great-room") ----------
   One composed group rather than a heading over a row: the words and the ceiling photograph share the top row, the
   loft view runs large beneath, and the daylight photograph overlaps its lower corner. On a phone: the words, the loft
   view edge to edge, then the 2 smaller ones side by side. */
.lo-room .room-intro .lede{margin-top:14px}
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.room-intro,.g-big{grid-column:1 / -1}
.g-big{margin-inline:calc(-1*var(--pad));margin-top:16px}
.g-big figcaption{padding-inline:var(--pad)}
.room-grid .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .room-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .room-intro{grid-column:1 / 7;grid-row:1}
  .g-sky{grid-column:9 / 13;grid-row:1}
  .g-big{grid-column:1 / 9;grid-row:2;margin:clamp(32px, 3.4vw, 56px) 0 0}
  .g-big figcaption{padding:0;max-width:46%}
  .g-day{grid-column:7 / 12;grid-row:2;align-self:end;position:relative;z-index:2;margin-top:clamp(32px, 3.4vw, 56px);transform:translateY(clamp(16px, 2.4vw, 40px))}
  .g-day .photo{border:8px solid var(--white);box-sizing:content-box;width:calc(100% - 16px)}
  .lo-room{padding-bottom:clamp(120px, 14vw, 240px)}
}

/* ---------- who sleeps where (data-section="who-sleeps-where") ----------
   The page's one pale ground. The primary suite as the star of the
   section, then the 4 other rooms two photographs each, 2 across from 900px. */
.lo-sleep{background:var(--birch);padding-block:clamp(56px, 8vw, 128px);border-top:1px solid var(--line)}
.room h3{font-size:clamp(25px, 22px + .6vw, 32px)}
.room-beds{margin-top:4px;font-weight:600}
.room-words p+p,.room-words div+p{margin-top:10px;color:var(--moss);line-height:1.55;max-width:34em}
.room .photo{aspect-ratio:4/3}
.rooms .room{display:flex;flex-direction:column}
.rooms .room-words{order:-1;margin-bottom:14px}

.star{margin-top:clamp(36px, 4vw, 64px)}
.star-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.star-photos .s-bed{grid-column:1 / -1}
.s-pair{grid-column:1 / -1;display:grid;grid-template-columns:1.87fr 1fr;gap:12px;align-items:start}
.s-pair figure:last-child .photo{aspect-ratio:2560/3690}
@media (min-width:900px){
  .star{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .star .room-words{grid-column:1 / 5;position:sticky;top:calc(var(--hh) + 28px)}
  .star-photos{grid-column:5 / 13;grid-template-columns:repeat(8,1fr);gap:var(--gap);margin-top:0}
  .star-photos .s-bed{grid-column:1 / 9}
  .star-photos .s-sit{grid-column:1 / 5}
  .star-photos .s-study{grid-column:5 / 9}
  .s-pair{grid-column:1 / 9;grid-template-columns:1.87fr 1fr;gap:var(--gap)}
}

.rooms{display:grid;gap:clamp(30px, 3vw, 44px);margin-top:clamp(40px, 5vw, 80px);padding-top:clamp(30px, 3vw, 44px);border-top:1px solid var(--line)}
.room-photos{display:grid;gap:12px}
.room-photos.pair{grid-template-columns:1fr 1fr}
.room-photos.duo{grid-template-columns:1fr 1.78fr;align-items:start}
.room-photos .r-tall .photo{aspect-ratio:3/4}
@media (min-width:900px){
  .rooms{grid-template-columns:1fr 1fr;column-gap:clamp(32px, 4vw, 72px);row-gap:clamp(40px, 4vw, 64px)}
  .room-photos{gap:var(--gap)}
}

/* ---------- bathrooms (data-section="bathrooms") ----------
   The wide room beside the narrow one, cut to the same height so the pair sits level. */
.bath-photos{display:grid;grid-template-columns:1.78fr 1fr;gap:12px;align-items:start;margin-top:28px}
.bath-photos .b-tall .photo{aspect-ratio:3/4}
@media (min-width:900px){
  .bath-photos{margin-top:clamp(32px, 3.4vw, 56px);gap:var(--gap);max-width:960px}
}

/* ---------- the rest of the house (data-section="beyond-the-bedrooms") ----------
   One composed group: the stair and the deck as 2 tall frames (the deck set lower), the games loft and the workspace
   stacked beside them. On a phone the 4 slide sideways rather than stacking 4 photographs one under another. */
.lo-more .lede a{text-underline-offset:4px}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-inline:var(--pad);margin:28px calc(-1*var(--pad)) 0;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cards figure{scroll-snap-align:start}
.cards .photo{aspect-ratio:4/3}
.cards .c-stair .photo,.cards .c-deck .photo{aspect-ratio:3/4}
.cards figcaption{font-size:15px;color:var(--moss);line-height:1.5}
.cards figcaption b{color:var(--pine);font-weight:600}
.lo-all{margin-top:22px}
@media (min-width:900px){
  .cards{grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-auto-columns:auto;gap:var(--gap);overflow:visible;padding:0;margin:clamp(32px, 3.4vw, 56px) 0 0;align-items:start}
  .cards figcaption{font-size:16px}
  .c-stair{grid-column:1 / 5;grid-row:1 / 3}
  .c-deck{grid-column:5 / 9;grid-row:1 / 3;margin-top:clamp(40px, 6vw, 110px)}
  .c-loft{grid-column:9 / 13;grid-row:1}
  .c-desk{grid-column:9 / 13;grid-row:2}
}

/* ---------- the amenities (id="amenities") ----------
   A sentence names the ones guests ask about; the record's whole list (all 24, as it is typed) waits behind one plain
   "Show all" line at every width (a checkbox and its label, no script). Open, it runs in 3 columns from 900px. */
.lo-has-grid{display:grid;gap:18px}
.lo-has-intro .lede{margin-top:14px}
.lo-groups{display:grid;gap:28px 24px;grid-template-columns:1fr;margin-top:8px}
.lo-group h3{font-size:clamp(19px, 17px + .4vw, 22px);margin:0 0 8px}
.lo-group ul{list-style:none;margin:0;padding:0;color:var(--moss);line-height:1.5}
.lo-group li{padding:6px 0;border-top:1px solid var(--line)}
.lo-has-toggle{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);opacity:0}
.lo-has-body{position:relative}
.lo-has-label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:600;cursor:pointer}
.lo-has-label::after{content:"+";font-size:26px;line-height:1;font-weight:400}
.lo-has-toggle:checked + .lo-has-label::after{content:"\2212"}
.lo-has-toggle:focus-visible + .lo-has-label{outline:2px solid var(--pine);outline-offset:4px}
.lo-has-hide{display:none}
.lo-has-toggle:checked + .lo-has-label .lo-has-show{display:none}
.lo-has-toggle:checked + .lo-has-label .lo-has-hide{display:inline}
.lo-has-toggle:not(:checked) ~ .lo-groups{display:none}
.lo-has-toggle:checked ~ .lo-groups{margin-top:24px}
@media (min-width:600px){.lo-groups{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .lo-has-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .lo-has-intro{grid-column:1 / 6}
  .lo-has-body{grid-column:6 / 13;align-self:end}
  .lo-groups{grid-template-columns:repeat(3,1fr);gap:36px var(--gap)}
}

/* ---------- the small things (data-section="the-small-things") ----------
   4 close-ups in their own portrait frames (each photograph is upright), the record's own words as their alt: the
   photographs home, curated from the gallery by slug. 2 to a row on a phone, 4 from 900px. */
.lo-details .lo-det-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.lo-details .lo-det-row .photo{aspect-ratio:3/4}
@media (min-width:900px){ .lo-details .lo-det-row{grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)} }

/* 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){ .lo-hero figcaption{display:none} }

/* A fourth kitchen picture (the owner's own) runs under the big one, at the big one's width (27 Oct 2026). */
.trio .t-c{grid-column:1 / -1}
.trio .t-c .photo{aspect-ratio:2/1}
@media (min-width:900px){
  .trio .t-c{grid-column:1 / 9;grid-row:3}
  .trio.flip .t-c{grid-column:5 / 13}
}