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

/* The opening is the way pages' own (styles.css, "a way's own page"). */

/* ---------- which rooms are mine (data-section="rooms") ----------
   3 buttons choose a way to stay; the group of rooms that is not part of it fades back. It needs no script: the
   buttons are radio inputs, and the section's own :has() rules read which one is chosen. With none chosen the
   whole house shows, and the Whole house button looks chosen. The buttons stay under the header while the rooms
   scroll past. Each group of rooms sits under a bracket, as the ways do on the home page. */
.th-rooms{padding-bottom:clamp(64px, 8vw, 140px)}
.sw-head{margin-top:clamp(36px, 4vw, 64px)}
.sw-head h2{font-size:clamp(23px, 19px + .6vw, 30px)}
.sw-head p{margin-top:6px;font-size:clamp(15px, 14px + .2vw, 17px);color:var(--mist);max-width:34em}
.sw-bar{position:sticky;top:var(--hh);z-index:6;background:var(--white);padding-block:12px 10px}
.sw{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.sw-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sw-l{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:4px 4px;border-radius:999px;cursor:pointer;text-align:center;line-height:1.2;transition:background-color .2s ease,color .2s ease}
.sw-name{font-weight:600;font-size:15px;white-space:nowrap}
.sw-long{display:none}
.sw-sleeps{font-size:14px;color:var(--mist)}
.sw-l:hover{background:var(--pool)}
.sw-in:checked+.sw-l,.sw:not(:has(.sw-in:checked)) .sw-whole{background:var(--velvet);color:var(--white)}
.sw-in:checked+.sw-l .sw-sleeps,.sw:not(:has(.sw-in:checked)) .sw-whole .sw-sleeps{color:var(--sage)}
.sw-in:focus-visible+.sw-l{outline:2px solid var(--lv-focus);outline-offset:2px}
@media (min-width:600px){
  .sw{display:inline-grid;grid-template-columns:repeat(3,auto)}
  .sw-l{flex-direction:row;gap:8px;padding:4px 22px}
  .sw-long{display:inline}
  .sw-name{font-size:16px}
}

.sw-lines{margin-top:12px}
.sw-line{display:none;font-size:clamp(15px, 14px + .2vw, 17px);line-height:1.5;max-width:48em}
.sw-line b{font-weight:600}
.sw-line a{display:inline-flex;align-items:center;min-height:44px;margin-left:4px;font-weight:600;text-underline-offset:5px}
.th-rooms:not(:has(.sw-in:checked)) .l-whole,
.th-rooms:has(#w-whole:checked) .l-whole,
.th-rooms:has(#w-suite:checked) .l-suite,
.th-rooms:has(#w-studio:checked) .l-studio{display:block}

.grp{margin-top:clamp(24px, 3vw, 44px);transition:opacity .4s ease,filter .4s ease}
.th-rooms:has(#w-suite:checked) .g-studio,
.th-rooms:has(#w-studio:checked) .g-suite{opacity:.26;filter:grayscale(1)}
@media (prefers-reduced-motion:reduce){ .grp,.sw-l{transition:none} }
.g-head h3{font-size:clamp(21px, 18px + .5vw, 26px)}
.g-head h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.g-head h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.g-head p{font-size:clamp(15px, 14px + .2vw, 17px);line-height:1.5;color:var(--mist);max-width:40em}
.grp .brace{margin:14px 0 18px}

/* The rooms: 2 to a row on a phone (the wide ones across both), then 12 columns from 900px, every photograph in a
   row the same height. */
.tiles{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:28px;grid-auto-flow:dense}
.rm{min-width:0}
.rm .photo{aspect-ratio:4/5}
.rm.wide,.rm.ph-wide{grid-column:1 / -1}
.rm.wide .photo,.rm.ph-wide .photo{aspect-ratio:4/3}
.rm h4{margin:12px 0 0;font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 50;font-size:clamp(19px, 17px + .4vw, 24px);line-height:1.2;letter-spacing:-.01em}
.rm p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--mist)}
.rm .tag{margin-top:8px;font-size:14px;line-height:1.35;color:var(--velvet);font-weight:600}
.door .door-words{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;padding:18px 16px;background:var(--pool);border-radius:2px}
.door .door-words h4{margin:0}
.rooms-foot{margin-top:clamp(28px, 3vw, 48px)}
@media (min-width:900px){
  .tiles{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(36px, 3.4vw, 56px);grid-auto-flow:row;
    --h-tall:clamp(320px, 34vw, 600px); --h-mid:clamp(300px, 30vw, 520px)}
  .rm{grid-column:span 4}
  .rm.wide{grid-column:span 8}
  .rm.half{grid-column:span 6}
  .rm .photo,.rm.wide .photo,.rm.ph-wide .photo{aspect-ratio:auto;height:var(--h-tall)}
  .r-3 .photo,.r-6 .photo{height:var(--h-mid)}
  .rm h4{margin-top:16px}
  .rm p{font-size:16px;max-width:34em}
  .door .door-words{aspect-ratio:auto;height:var(--h-mid);padding:clamp(24px, 2.4vw, 40px)}
  .door .door-words h4{font-size:clamp(26px, 18px + .9vw, 34px)}
  .door .door-words p{font-size:17px;color:var(--velvet)}
}

/* ---------- the welcome (data-section="welcome") ----------
   The wine on the kitchen counter, the owner's own welcome in one line, and a guest's words beside it. */
.th-welcome{padding-block:clamp(56px, 8vw, 140px);border-top:1px solid var(--line)}
.th-welcome-grid{display:grid;gap:28px}
.th-welcome-photo{aspect-ratio:4/5;max-width:520px}
.th-welcome-words .lede{margin-top:14px}
.th-welcome-review{margin-top:26px;max-width:36em}
@media (min-width:900px){
  .th-welcome-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .th-welcome-photo{grid-column:1 / 6;max-width:none}
  .th-welcome-words{grid-column:7 / 13}
}

/* ---------- what you'll find (data-section="amenities") ----------
   10 things guests ask about first, each with the platform's own mark, then every amenity by group behind a "see
   all". The list's words are the platform's amenity names. */
.th-has{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.th-has-head .lede{margin-top:14px}
.has-list{list-style:none;margin:clamp(26px, 3vw, 44px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.has-list li{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid var(--line);font-size:16px;line-height:1.3}
.has-icon{flex:none;display:inline-flex;width:24px;height:24px;color:var(--velvet)}
.has-icon svg,.has-icon .amenity-icon{width:24px;height:24px}
.sheet{margin-top:24px}
.sheet>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer;list-style:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.sheet>summary::-webkit-details-marker{display:none}
.sheet>summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;text-decoration:none}
.sheet[open]>summary::after{content:"\2013"}
.sheet-groups{display:grid;gap:28px;margin-top:22px}
.sheet-group h3{font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:0}
.sheet-group ul{list-style:none;margin:8px 0 0;padding:0}
.sheet-group li{font-size:15px;line-height:1.5;color:var(--mist);padding:3px 0}
@media (min-width:900px){
  .th-has-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .th-has-head h2{grid-column:1 / 7}
  .th-has-head .lede{grid-column:7 / 13;margin:0;justify-self:end;max-width:30em}
  .has-list{grid-template-columns:repeat(5,1fr);column-gap:var(--gap)}
  .sheet-groups{grid-template-columns:repeat(4,1fr);column-gap:var(--gap);row-gap:36px}
}

/* The beds in the 2 queen rooms, from the record (Bedroom 1 is the Studio's, Bedroom 2 the Suite's primary). The bunk
   room's beds stay in its words: the platform names beds in British terms ("Single", "Sofa Bed (Double)"). */
.rm .beds{margin-top:6px;font-size:15px;color:var(--velvet)}
.rm .beds+p{margin-top:2px}