/* ==========================================================================
   SHAPED JT — "The house" (loads after world.css). Master plan: docs/MASTER-PLAN.md
   One sunlit villa, one day. Every service owns a room (src/media.json); the real photos hang in it as proof.
   1 media figures · 2 three doors · 3 lives · 4 pillars · 5 journey pictures · 6 beauty · 7 reveal
   8 proof band · 9 coast · 10 where to start · 11 questions · 12 the letter · 13 fixes
   ========================================================================== */

/* ---------- 1. media figures ({{media}} and {{img}} from tools/media.mjs) ---------- */
.m { position: relative; margin: 0; overflow: hidden; isolation: isolate; aspect-ratio: var(--ar, 4 / 5); max-width: 100%;
  background: #E6DACB center / cover no-repeat; border-radius: var(--m-r, 0); transform: translateZ(0); }
.m--arch { --m-r: 50% 50% 0 0 / var(--av, 40%) var(--av, 40%) 0 0; }
.m--window { --m-r: 50% 50% 18px 18px / var(--av, 40%) var(--av, 40%) 18px 18px; }
.m--round { --m-r: 50%; }
.m--soft { --m-r: var(--radius); }
.m--wide { --m-r: 0; }
.m .m__img, .m .m__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); display: block; }
.m .m__v { z-index: 1; opacity: 0; transition: opacity 1s var(--ease); }
.m.is-live .m__v { opacity: 1; }
.m__cap { position: absolute; z-index: 2; inset: auto 0 0; padding: 48px 22px 18px; font-size: .72rem; font-weight: 500; letter-spacing: .08em;
  color: rgba(255, 248, 238, .94); background: linear-gradient(180deg, rgba(30, 20, 14, 0), rgba(30, 20, 14, .6)); }
img.lq { background-size: cover; background-position: center; }
.photo img.lq { filter: none; }
.js .photo:not(.is-loaded) img.lq { opacity: 1; }
.photo:has(img.lq) { animation: none; background: #E6DACB; }
.ring { position: relative; padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px) 0; }
.ring::before { content: ""; position: absolute; inset: 0 0 -1px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none;
  clip-path: inset(100% 0 0 0); transition: clip-path 2s var(--ease-out) .3s; }
.ring.is-in::before, .no-js .ring::before, .ring:not(.reveal)::before { clip-path: inset(0); }
.section--dark .ring::before, .scene .ring::before { border-color: rgba(255, 248, 238, .3); }
.kick { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; line-height: 1.6; color: var(--clay-deep); }
.go { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--espresso); }
.go .i { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.sheen { position: relative; }
.sheen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 228, .3) 50%, transparent 62%); transform: translateX(-130%); transition: transform 1.4s var(--ease-out); }
@media (hover: hover) { a:hover .sheen::after, .sheen:hover::after { transform: translateX(130%); } }

/* ---------- 2. three doors (home): each opens onto its world ---------- */
.doors { padding-bottom: clamp(84px, 10vw, 160px); }
.doors__head { text-align: center; max-width: 860px; margin: 0 auto clamp(44px, 5.5vw, 84px); }
.doors__head .h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); margin-top: 16px; }
.doors__head .lede { margin: 20px auto 0; }
.doors__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3.4vw, 60px); align-items: end; }
.door { display: grid; gap: clamp(20px, 2.2vw, 30px); color: inherit; text-decoration: none; outline: none; }
.door .ring::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -16px; height: 30px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(81, 51, 29, .3), rgba(81, 51, 29, 0)); }
.door .m { box-shadow: 0 60px 90px -56px rgba(81, 51, 29, .6); }
.door .m::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(var(--open, 0) * .9);
  background: radial-gradient(60% 40% at 50% 92%, rgba(255, 240, 220, .38), rgba(255, 240, 220, 0)); transition: opacity .3s; }
.door__title { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 2.7vw, 2.75rem); line-height: 1.04; color: var(--ink); transition: color .5s var(--ease); }
.door__line { display: block; margin-top: 12px; max-width: 30em; font-size: .96rem; line-height: 1.62; color: var(--muted); }
.door .go { margin-top: 16px; }
.door:hover .door__title, .door:focus-visible .door__title { color: var(--clay); }
.door:hover .go .i, .door:focus-visible .go .i { transform: translateX(5px); }
.door:focus-visible .m { outline: 2px solid var(--clay); outline-offset: 6px; }
@media (max-width: 759px) {
  .doors__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 8px var(--gutter) 22px; margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); scrollbar-width: none; align-items: start; }
  .doors__row::-webkit-scrollbar { display: none; }
  .door { scroll-snap-align: center; }
  .door__line { font-size: .92rem; }
}

/* ---------- 3. lives: the women it is built for ---------- */
.lives__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4.4vw, 76px); align-items: start; }
.life:nth-child(2) { margin-top: clamp(56px, 10vw, 160px); }
.life .m { box-shadow: var(--shadow-soft); }
.life .kick { margin-top: 30px; }
.life h3 { margin-top: 10px; font-size: clamp(2.1rem, 3.1vw, 3rem); line-height: 1; }
.life p { margin-top: 14px; max-width: 30em; color: var(--muted); }
@media (max-width: 759px) {
  .lives__row { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .life { width: 86%; } .life:nth-child(2) { margin-top: 0; justify-self: end; }
}

/* ---------- 4. pillars: a colonnade, the open one widens and plays its room ---------- */
.pillars__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px clamp(40px, 6vw, 100px); align-items: end; margin-bottom: clamp(44px, 5vw, 76px); }
.pillars__head .h2 { margin-top: 16px; }
.pillars__row { display: flex; gap: clamp(10px, 1.1vw, 16px); height: clamp(540px, 78vh, 800px); }
.pl { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 999px 999px 24px 24px; background: #2b1d15; color: var(--cream);
  cursor: pointer; outline: none; transition: flex-grow 1.05s var(--ease-out), box-shadow .8s; box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .14); }
.pl.is-open { flex-grow: 2.8; cursor: default; }
.pl .m { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; --m-r: 0; z-index: -1; }
.pl .m .m__img { transform: scale(1.05); filter: brightness(.8) saturate(.92); transition: transform 1.8s var(--ease-out), filter 1.2s var(--ease); }
.pl.is-open .m .m__img { transform: none; filter: none; }
.pl::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 15, 10, 0) 38%, rgba(24, 15, 10, .82) 100%); }
.pl__body { position: absolute; z-index: 2; inset: auto 0 0; padding: clamp(22px, 2.4vw, 36px); }
.pl__num { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 3.6vw, 3.6rem); line-height: 1; color: #EADCC8; }
.pl h3 { margin-top: 10px; font-size: clamp(1.3rem, 1.75vw, 1.9rem); line-height: 1.12; color: var(--cream); }
.pl__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 1s var(--ease-out), opacity .7s var(--ease); }
.pl__more > div { overflow: hidden; min-height: 0; }
.pl.is-open .pl__more { grid-template-rows: 1fr; opacity: 1; }
.pl p { margin-top: 12px; max-width: 32em; font-size: .96rem; line-height: 1.6; color: rgba(255, 248, 238, .88); }
.pl:focus-visible { box-shadow: inset 0 0 0 2px #EADCC8; }
@media (max-width: 1099px) {
  .pillars__head { grid-template-columns: minmax(0, 1fr); }
  .pillars__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .pl { aspect-ratio: 3 / 4; } .pl .pl__more { grid-template-rows: 1fr; opacity: 1; }
  .pl .m .m__img { filter: none; transform: none; }
}
@media (max-width: 639px) {
  .pillars__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .pillars__row::-webkit-scrollbar { display: none; }
  .pl { scroll-snap-align: center; aspect-ratio: 3 / 4.5; }
}

/* ---------- 5. the journey: one picture per phase, beside the glass panel ---------- */
.journey__art { position: absolute; z-index: 0; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); bottom: clamp(118px, 17svh, 170px);
  width: clamp(220px, 22vw, 360px); aspect-ratio: 3 / 4; pointer-events: none; }
.journey__art::before { content: ""; position: absolute; inset: -12px -12px 0; border: 1px solid rgba(255, 248, 238, .38); border-bottom: 0; border-radius: 999px 999px 0 0; }
.jart { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 1.2s var(--ease), transform 2.6s var(--ease-out); }
.jart.is-on { opacity: 1; transform: none; }
.jart .m { width: 100%; height: 100%; box-shadow: 0 44px 80px -44px rgba(20, 12, 8, .85); }
.jart .m .m__img { animation: none; }
.jart.is-on .m .m__img { animation: jart-drift 9s var(--ease-out) both; }
@keyframes jart-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
.jart__label { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 999px;
  font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cream); background: rgba(30, 20, 14, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.journey__stage .journey__no { z-index: -1; }
@media (max-width: 899px) {
  .journey__art { right: var(--gutter); top: clamp(210px, 30svh, 290px); bottom: auto; width: min(34vw, 17svh); }
  .journey__art::before { inset: -8px -8px 0; }
  .jart__label { display: none; }
}
@media (max-height: 660px) and (max-width: 899px) { .journey__art { display: none; } }

/* ---------- 6. beauty: the real treatment large, the villa suite beside it ---------- */
.beauty__media { position: relative; padding-bottom: clamp(40px, 6vw, 90px); }
.beauty__media .ring { width: 84%; }
.beauty__inset { position: absolute; right: 0; bottom: 0; width: 44%; z-index: 2; }
.beauty__inset .m { box-shadow: 0 30px 70px -30px rgba(81, 51, 29, .6); outline: 6px solid var(--paper); }
.ticker { overflow: hidden; margin-top: clamp(56px, 7vw, 100px); border-block: 1px solid var(--line); padding-block: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 56s linear infinite; }
.ticker__group { display: flex; gap: 44px; padding-right: 44px; }
.ticker__group span { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.2; color: var(--cocoa); white-space: nowrap; }
.ticker__group span::after { content: "·"; margin-left: 44px; color: var(--clay); font-style: normal; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (max-width: 899px) { .beauty__media { max-width: 560px; } }

/* ---------- 7. reveal: that forgotten room, before becomes after as you scroll ---------- */
.reveal-room__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px clamp(40px, 6vw, 100px); align-items: end; margin-bottom: clamp(34px, 4vw, 60px); }
.reveal-room__head .h2 { margin-top: 16px; }
.reveal-room__head .list-check { margin-top: 20px; }
.reveal-room .compare { aspect-ratio: 16 / 9; border-radius: clamp(24px, 3vw, 44px); }
.reveal-room .compare-tabs { justify-content: center; margin-top: 24px; }
.reveal-room__foot { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: 28px; }
@media (max-width: 899px) { .reveal-room__head { grid-template-columns: minmax(0, 1fr); } .reveal-room .compare { aspect-ratio: 4 / 3; } }
@media (max-width: 559px) { .reveal-room .compare { aspect-ratio: 4 / 4.4; } }

/* ---------- 8. proof band: the numbers over the gallery hall ---------- */
.proofband { position: relative; isolation: isolate; overflow: hidden; background: #2b1d15; color: var(--cream); padding-block: clamp(110px, 13vw, 210px); }
.proofband > .m { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; --m-r: 0; z-index: -2; }
.proofband::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 20, 14, .62), rgba(30, 20, 14, .42) 42%, rgba(30, 20, 14, .76)); }
.proofband .kicker-quote p { color: var(--cream); text-shadow: 0 2px 30px rgba(20, 12, 8, .5); }
.proofband .kicker-quote cite { color: rgba(255, 248, 238, .78); }
.proofband .stats { border-top-color: rgba(255, 248, 238, .28); }
.proofband .stat + .stat { border-left-color: rgba(255, 248, 238, .2); }
.proofband .stat__num { color: var(--cream); }
.proofband .stat__label { color: rgba(255, 248, 238, .78); }

/* ---------- 9. the coast: Canada ---------- */
.coast { position: relative; z-index: 3; margin-top: calc(var(--rise) * -1); background: var(--linen); }
.coast__film { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); border-radius: 50% 50% 0 0 / var(--rise) var(--rise) 0 0; box-shadow: 0 -34px 60px -44px rgba(30, 20, 14, .55); }
.coast__film > .m { width: 100%; aspect-ratio: 21 / 9; min-height: 380px; --m-r: 0; }
.coast__film::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(30, 20, 14, .1) 30%, rgba(30, 20, 14, .6)); }
.coast__title { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(30px, 5vw, 72px); }
.coast__title .eyebrow { color: rgba(255, 248, 238, .94); }
.coast__title .h2 { margin-top: 14px; max-width: 16em; color: var(--cream); text-shadow: 0 2px 30px rgba(20, 12, 8, .5); }
.coast__title .h2 em { color: #EADCC8; }
.coast__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 30px clamp(40px, 6vw, 100px); padding-block: clamp(56px, 7vw, 110px); align-items: start; }
.coast__body .btn-row { margin-top: 28px; }
.coast .provinces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0 clamp(20px, 3vw, 44px); max-width: none; margin: 0; padding: 0; list-style: none; }
.coast .provinces li { padding: 14px 0 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  color: var(--espresso); display: flex; align-items: baseline; gap: 12px; transition: color .4s, padding-left .5s var(--ease-out); }
.coast .provinces li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); opacity: .7; flex: none; transform: translateY(-2px); }
.coast .provinces li:hover { background: none; color: var(--clay); transform: none; padding-left: 6px; }
@media (max-width: 899px) { .coast__body { grid-template-columns: minmax(0, 1fr); } .coast__film > .m { aspect-ratio: 4 / 3; min-height: 0; } }

/* ---------- 10. where do I start: four doors, each onto its room ---------- */
.starts__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 100px); align-items: end; margin-bottom: clamp(38px, 4.4vw, 66px); }
.starts__head .h2 { margin-top: 16px; }
.starts__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.start { display: grid; gap: 18px; align-content: start; color: inherit; text-decoration: none; outline: none; }
.start .m { box-shadow: 0 40px 70px -46px rgba(81, 51, 29, .6); }
.start .m .m__img { transition: transform 1.6s var(--ease-out); }
.start:hover .m .m__img { transform: scale(1.05); }
.start strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.12; color: var(--ink); transition: color .4s; }
.start small { display: block; margin-top: 8px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.start .go { margin-top: 12px; }
.start:hover strong, .start:focus-visible strong { color: var(--clay); }
.start:hover .go .i, .start:focus-visible .go .i { transform: translateX(5px); }
.start:focus-visible .m { outline: 2px solid var(--clay); outline-offset: 5px; }
@media (max-width: 1099px) { .starts__head { grid-template-columns: minmax(0, 1fr); } .starts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } }
@media (max-width: 559px) {
  .starts__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .starts__row::-webkit-scrollbar { display: none; }
  .start { scroll-snap-align: start; }
}

/* ---------- 11. questions: title beside the answers ---------- */
.qa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 34px clamp(40px, 6vw, 110px); align-items: start; }
.qa__head { position: sticky; top: 120px; }
.qa__head .h2 { margin-top: 16px; }
.qa__head .ring { width: min(100%, 300px); margin-top: 34px; }
.qa .faq { max-width: none; margin: 0; }
@media (max-width: 899px) { .qa { grid-template-columns: minmax(0, 1fr); } .qa__head { position: static; } .qa__head .ring { display: none; } }

/* ---------- 12. the letter (newsletter) ---------- */
.letter__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 34px clamp(40px, 6vw, 110px); align-items: center; }
.letter__art .m { box-shadow: var(--shadow-soft); }
.letter__copy .h2 { margin-top: 16px; }
.letter__copy .lede { margin-top: 18px; }
.letter .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; align-items: start; }
.letter .form .btn { grid-column: 1 / -1; justify-self: start; }
.letter .form .check { grid-column: 1 / -1; }
@media (max-width: 899px) { .letter__grid { grid-template-columns: minmax(0, 1fr); } .letter__art { max-width: 420px; } }
@media (max-width: 519px) { .letter .form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 13. fixes ---------- */
.newsletter .form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.newsletter .form .btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .jart, .jart.is-on .m .m__img, .pl, .pl__more, .ticker__track { transition: none; animation: none; }
}

/* ---------- 14. inner pages: pictured cards and phases, living photos inside arches, questions beside answers ---------- */
.m--fill { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; --m-r: 0; }
.card--media { padding: 0; display: flex; flex-direction: column; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); background: linear-gradient(180deg, #FFFDF9, #FBF4EA); }
.card--media::after { display: none; }
.card--media .card__media { position: relative; overflow: hidden; }
.card--media .card__media .m { --m-r: 0; width: 100%; }
.card--media .card__media .m .m__img { transition: transform 1.8s var(--ease-out); }
.card--media .card__body { flex: 1; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 38px) clamp(28px, 3vw, 40px); }
.card--media .card__body > h3:first-child { margin-top: 0; }
@media (hover: hover) { .card--media:hover .card__media .m .m__img { transform: scale(1.05); } }
.phase--media .phase__media { margin-top: 24px; max-width: 440px; }
.phase--media .phase__media .m { box-shadow: var(--shadow-soft); }
@media (min-width: 900px) {
  .section:has(> .container > .faq) > .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 110px); align-items: start; }
  .section:has(> .container > .faq) .section-head { position: sticky; top: 120px; margin: 0; text-align: left; }
  .section:has(> .container > .faq) .section-head .eyebrow::after { display: none; }
  .section:has(> .container > .faq) .section-head .lede { margin-inline: 0; }
  .section:has(> .container > .faq) .faq { max-width: none; margin: 0; }
}
.section-head.center .h2 { max-width: 18em; margin-inline: auto; }
.card--dark.card--media, .section--dark .card--media { background: linear-gradient(180deg, rgba(255, 248, 238, .09), rgba(255, 248, 238, .03)); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .16), 0 40px 70px -46px rgba(0, 0, 0, .7); }

/* ---------- 15. the Lounge teaser: the words beside the night terrace and its key ---------- */
.lounge-window__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px clamp(40px, 7vw, 120px); align-items: center; text-align: left; }
.lounge-window__grid .lounge-window__copy { max-width: 620px; }
.lounge-window__grid .lede { margin-inline: 0; }
.lounge-window__grid .btn-row, .lounge-window__grid .countdown { justify-content: flex-start; }
.lounge-window__art { position: relative; justify-self: end; width: min(100%, 440px); padding-bottom: 40px; }
.lounge-window__art .m { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }
.lounge-window__key { position: absolute; left: -12%; bottom: 0; width: 38%; z-index: 2; }
.lounge-window__key .m { outline: 5px solid rgba(255, 248, 238, .16); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
@media (max-width: 899px) {
  .lounge-window__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .lounge-window__grid .lounge-window__copy { margin-inline: auto; }
  .lounge-window__grid .lede { margin-inline: auto; }
  .lounge-window__grid .btn-row, .lounge-window__grid .countdown { justify-content: center; }
  .lounge-window__art { justify-self: center; width: min(78%, 380px); }
  .lounge-window__key { left: -8%; }
}