/* The Studio's own passages, in page order. Served on /the-studio only, after styles.css (which holds the opening,
   the plan and the doorway to the whole house). */

/* The price in the header and the phone's bar is the site's lowest starting price, which is the Studio's own, so on
   this page it stays (on the 2-Bedroom Suite's page it steps aside). */

/* ---------- comfort and privacy (data-section="whats-yours") ----------
   Its own bathroom large, the coffee bar beside it, then the rest of what is the Studio's in 4 short lines (her own
   list: the private entrance, the queen bed, the smart TV and Wi-Fi, the welcome bottle). */
.st-yours{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.st-grid{display:grid;gap:24px;margin-top:clamp(24px, 3vw, 40px)}
.st-a .photo{aspect-ratio:16/10}
.st-b .photo{aspect-ratio:4/5}
.st-grid figcaption{font-size:16px;color:var(--mist)}
.st-grid figcaption b{color:var(--velvet);font-weight:600}
.st-list{list-style:none;margin:clamp(28px, 3vw, 48px) 0 0;padding:0;display:grid}
.st-list li{padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--mist)}
.st-list b{color:var(--velvet);font-weight:600}
@media (min-width:600px){ .st-grid{grid-template-columns:3fr 2fr;column-gap:16px} .st-a .photo,.st-b .photo{aspect-ratio:auto;height:clamp(260px, 40vw, 420px)} }
@media (min-width:900px){
  .st-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .st-a{grid-column:1 / 9}
  .st-b{grid-column:9 / 13}
  .st-a .photo,.st-b .photo{height:clamp(320px, 34vw, 580px)}
  .st-list{grid-template-columns:repeat(4,1fr);column-gap:var(--gap)}
  .st-list li{padding-right:12px}
}

/* ---------- the resort, steps away (data-section="the-resort") ----------
   The page's one pale ground: her own words about the resort, and 2 photographs of it. */
.st-resort{background:var(--pool);padding-block:clamp(56px, 8vw, 130px)}
.st-resort-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-resort-words{grid-column:1 / -1;margin-bottom:16px}
.st-resort-words .lede{margin-top:14px}
.st-resort-words .more{margin-top:6px}
.st-resort .photo{aspect-ratio:4/5}
@media (min-width:900px){
  .st-resort-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .st-resort-words{grid-column:1 / 6;margin:0}
  .st-r1{grid-column:6 / 10}
  .st-r2{grid-column:10 / 13}
  .st-r2 .photo{aspect-ratio:3/4}
}

/* ---------- your own front door (data-section="your-part") ----------
   Her photograph of the Studio's entrance, under the words that name it on a phone and beside them from 900px (the
   plan's shared head puts the heading and the lede on one line; here both stack at the left and the door takes the
   right). The photograph is 3:2 and is shown whole. */
.way-plan-head .door{margin-top:22px}
.way-plan-head .door .photo{aspect-ratio:3/2}
@media (min-width:900px){
  .way-plan-head{grid-template-rows:1fr auto auto 1fr}
  .way-plan-head h2{grid-column:1 / 7;grid-row:2;align-self:end}
  .way-plan-head .lede{grid-column:1 / 7;grid-row:3;justify-self:start;max-width:31em;margin-top:14px;align-self:start}
  .way-plan-head .door{grid-column:8 / 13;grid-row:1 / span 4;margin:0}
}