/* Apartments: a street of three doors.
   1. The name of the page on the wall, three arched doorways in front of it; one doorway after another opens wide
      (scroll, or the pointer on a desk), the other two stay ajar.
   2. One chapter per apartment: you walk through its doorway into its biggest photograph, then its rooms, its facts.
   3. The three side by side. 4. Which key: three painted doors, each ajar on its photograph.
   Without motion (or before the script) every part stands complete and still. */

/* ================= 1. the wall and the three doorways ================= */
.ov-open { position: relative; }
.ov-wall {
  position: relative; z-index: 0; padding: clamp(26px, 3vw, 46px) var(--g) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cr intro" "h1 h1"; column-gap: 40px; align-items: end;
}
.ov-crumbs { grid-area: cr; align-self: start; }
.ov-intro { grid-area: intro; justify-self: end; display: grid; grid-template-columns: minmax(0, 23em) auto; column-gap: clamp(24px, 3vw, 54px); align-items: end; }
.ov-lead { font: 500 clamp(17px, 1.3vw, 20px)/1.45 var(--ft); color: var(--ink2); text-wrap: pretty; }
.ov-count { display: flex; gap: clamp(18px, 2vw, 34px); }
.ov-count span { display: flex; flex-direction: column; gap: 6px; font: 600 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.ov-count b { font: 900 clamp(38px, 3.4vw, 58px)/.8 var(--fd); letter-spacing: -.04em; color: var(--ink); text-transform: none; }
.ov-count span:first-child b { color: var(--terra); }
/* the name of the page, the full width of the wall; the doorways stand on its lower third */
.ov-h1 { grid-area: h1; --fs: calc((100vw - 2 * var(--g)) / 4.34); font: 900 var(--fs)/.8 var(--fd); letter-spacing: -.05em; white-space: nowrap; margin: clamp(10px, 1.6vw, 28px) 0 0 -.055em; padding-top: .06em; }
html[lang="en"] .ov-h1 { --fs: calc((100vw - 2 * var(--g)) / 4.91); }
html[lang="it"] .ov-h1 { --fs: calc((100vw - 2 * var(--g)) / 5.70); }

/* the doorways, still: three arches, each with its name under it */
.ov-doors { position: relative; z-index: 1; margin-top: calc(var(--fs, 200px) * -.2); padding: 0 var(--g) clamp(90px, 10vw, 160px); }
.ov-doors { --fs: calc((100vw - 2 * var(--g)) / 4.34); }
html[lang="en"] .ov-doors { --fs: calc((100vw - 2 * var(--g)) / 4.91); }
html[lang="it"] .ov-doors { --fs: calc((100vw - 2 * var(--g)) / 5.70); }
.ov-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 26px); align-items: start; }
.ov-a { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.ov-f { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 3px 3px; background: #cbbfa8; }
.ov-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-no { display: none; }
.ov-t { display: flex; flex-direction: column; padding-top: 22px; }
.ov-k { font: 600 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.ov-n { margin-top: 10px; font: 900 clamp(40px, 4.4vw, 80px)/.9 var(--fd); letter-spacing: -.035em; }
.ov-na { display: block; margin: 0 0 .1em .06em; font-size: .38em; font-weight: 800; letter-spacing: -.01em; color: var(--green); }
.ov-s { margin-top: 14px; font: 500 17px/1.45 var(--ft); color: var(--ink2); max-width: 24em; text-wrap: pretty; }
.ov-st { margin-top: 8px; font: 700 12px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--green); }
.ov-go { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 18px; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgba(34, 28, 22, .3); font: 700 14.5px/1 var(--ft); white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s; }
.ov-go svg, .ov-dg svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
@media (hover: hover) { .ov-a:hover .ov-go { background: var(--ink); border-color: var(--ink); color: var(--lime); } .ov-a:hover .ov-go svg { transform: translateX(4px); } }
.ov-det { display: none; }

/* the doorways, alive: pinned; the row is one stage, each doorway is a clipped view onto its photograph */
.ov-doors.live { height: 280vh; padding: 0; margin-top: calc(var(--fs, 200px) * -.2 - var(--hd) - 14px); }
.live .ov-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.live .ov-row { position: absolute; display: block; pointer-events: auto; left: var(--g); right: var(--g); top: calc(var(--hd) + 14px); bottom: 178px; }
.live .ov-d { position: absolute; inset: 0; }
.live .ov-a { position: absolute; inset: 0; display: block; }
.live .ov-f { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; pointer-events: auto; background: transparent; }
.live .ov-f img { inset: auto; top: 0; left: 0; width: var(--bw, 60%); max-width: none; height: 100%; will-change: transform; }
.live .ov-f::after { content: ''; position: absolute; inset: 0; background: #cbbfa8; z-index: -1; }
.live .ov-t { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live .ov-no { display: block; position: absolute; left: 0; top: calc(100% + 12px); font: 700 12px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--ink3); transition: color .4s; will-change: transform; }
.live .ov-d.on .ov-no { color: var(--terra); }
.live .ov-det { display: block; position: absolute; left: var(--g); right: var(--g); bottom: 20px; height: 128px; pointer-events: auto; }
html.ck-on .live .ov-det { bottom: calc(10px + var(--ckh, 0px)); }
html.ck-on .live .ov-row { bottom: calc(168px + var(--ckh, 0px)); }
.ov-bar { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
.ov-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; background: var(--rule); }
.ov-bf { position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.ov-bd { position: absolute; top: 0; left: calc(var(--p, 0) * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 5px rgba(198, 93, 59, .2); }
.ov-db {
  position: absolute; left: 0; right: 0; top: 30px; bottom: 0;
  display: grid; grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1fr) auto; column-gap: clamp(20px, 2.6vw, 48px); align-items: end;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .3s, visibility 0s .25s;
}
.ov-db.on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s .12s, transform .8s .12s var(--ease), visibility 0s; }
.ov-dk { display: flex; flex-direction: column; gap: 8px; }
.ov-dk b { font: 900 clamp(64px, 6vw, 96px)/.78 var(--fd); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ov-dk span { font: 600 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.ov-dn { font: 900 clamp(40px, 4.2vw, 72px)/.88 var(--fd); letter-spacing: -.035em; white-space: nowrap; }
.ov-ds { font: 500 16.5px/1.45 var(--ft); color: var(--ink2); max-width: 30em; text-wrap: pretty; padding-bottom: 3px; }
.ov-ds span { display: block; margin-top: 6px; font: 700 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--green); }
.ov-dg { padding-bottom: 2px; }
.ov-dg a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--lime); text-decoration: none; font: 700 15px/1 var(--ft); white-space: nowrap; transition: background-color .3s; }
.ov-dg a:hover { background: var(--green); }
.ov-dg a:hover svg { transform: translateX(4px); }

/* ================= 2. a chapter per apartment ================= */
/* 2a. the doorway you walk through */
.ov-walk { position: relative; padding: clamp(70px, 8vw, 130px) var(--g) 0; }
.ov-wt { max-width: 60em; }
.ov-wk { display: flex; align-items: baseline; gap: 14px; }
.ov-wk b { font: 900 clamp(26px, 2.2vw, 36px)/1 var(--fd); color: var(--terra); letter-spacing: -.02em; }
.ov-wk span { font: 600 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.ov-wn { margin: 14px 0 0 -.045em; font: 900 clamp(64px, 11vw, 210px)/.82 var(--fd); letter-spacing: -.045em; }
.ov-wn .ov-na { margin-left: .1em; font-size: .3em; }
.ov-wb { display: block; }
.ov-wl { margin-top: clamp(18px, 2vw, 30px); max-width: 17em; font: 800 clamp(24px, 2.3vw, 38px)/1.12 var(--fd); letter-spacing: -.018em; color: var(--green); text-wrap: balance; }
.ov-wa { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font: 700 12px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.ov-wa span:first-child { color: var(--ink); }
.ov-wf { margin-top: clamp(30px, 3.4vw, 50px); }
.ov-wz { overflow: hidden; border-radius: 4px; background: #cbbfa8; }
.ov-wz img { width: 100%; height: auto; }
.ov-wc { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.ov-wc b { color: var(--green); font-weight: 700; }
.ov-wc b::after { content: ''; display: inline-block; width: 18px; height: 1.5px; margin-left: 12px; background: currentColor; vertical-align: .3em; }

.ov-walk.live { height: 160vh; padding: 0; }
.live .ov-wpin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.live .ov-wt { position: absolute; z-index: 1; top: calc(var(--hd) + 5vh); left: var(--g); width: 46%; will-change: transform, opacity; }
.ov-mir .live .ov-wt { left: auto; right: var(--g); text-align: right; }
.ov-mir .live .ov-wk, .ov-mir .live .ov-wa { justify-content: flex-end; }
.ov-mir .live .ov-wn { margin-left: 0; margin-right: -.02em; }
.ov-mir .live .ov-wl { margin-left: auto; }
.live .ov-wf { position: absolute; inset: 0; z-index: 2; margin: 0; will-change: clip-path; }
.live .ov-wz { position: absolute; inset: 0; border-radius: 0; }
.live .ov-wz img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.live .ov-wc { position: absolute; left: var(--g); bottom: 22px; margin: 0; padding: 12px 18px 12px 16px; border-radius: 3px; background: var(--lime); box-shadow: 0 12px 26px -18px rgba(40, 26, 12, .6); opacity: 0; will-change: opacity, transform; }
html.ck-on .live .ov-wc { bottom: calc(12px + var(--ckh, 0px)); }

/* 2b. the rooms: the facts stand still in their column while the photographs of the rooms pass beside them */
.ov-rooms {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; align-items: stretch;
  padding: clamp(60px, 6vw, 100px) var(--g) clamp(80px, 8vw, 130px);
}
.ov-side { grid-column: 1 / span 4; grid-row: 1; }
.ov-photos { grid-column: 5 / span 8; grid-row: 1; }
.ov-mir .ov-side { grid-column: 9 / span 4; }
.ov-mir .ov-photos { grid-column: 1 / span 8; }
.ov-stick { position: sticky; top: calc(var(--hd) + 26px); }
.ov-say-t { margin-top: 18px; font: 750 clamp(21px, 1.75vw, 28px)/1.24 var(--fd); letter-spacing: -.015em; text-wrap: pretty; }
.ov-figs { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 22px; }
.ov-figs span { display: flex; flex-direction: column-reverse; gap: 6px; font: 600 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.ov-figs b { font: 800 clamp(19px, 1.5vw, 24px)/1.15 var(--fd); letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.ov-stick .ledger { max-width: none; margin-top: 24px; }
.ov-stick .lg { grid-template-columns: minmax(96px, .4fr) 1fr; gap: 14px; padding: 8px 0 9px; }
.ov-stick .lg dd { font-size: 15.5px; }
.ov-go2 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
.ov-go2 .door { min-height: 52px; padding: 0 24px; font-size: 19px; }
.ov-go2 .more { font-size: clamp(17px, 1.3vw, 20px); }
.ov-r { display: block; color: var(--ink); text-decoration: none; }
.ov-rf { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 3px; background: #d9ccb4; }
.ov-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.2vw; margin: clamp(34px, 3.6vw, 56px) 0; }
.ov-pair .ov-rf { aspect-ratio: 4 / 5; }
.ov-pair .ov-r3 { margin-top: clamp(50px, 7vw, 120px); }
.ov-rz { position: absolute; left: 0; right: 0; top: -7%; bottom: -7%; will-change: transform; }
.ov-rz img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ov-r:hover .ov-rz img, .ov-r:focus-visible .ov-rz img { transform: scale(1.035); }
.ov-rc { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font: 600 11.5px/1.35 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.ov-rc b { color: var(--terra); font-weight: 700; }
.ov-all { margin-top: 30px; }
.ov-mir .ov-all { text-align: right; }
.ov-all a { font: 700 12px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.ov-all a:hover { color: var(--ink); }

/* ================= 3. the three side by side ================= */
.ov-cmp { padding: clamp(80px, 8vw, 130px) var(--g); }
.ov-cmp-wrap { margin-top: clamp(34px, 4vw, 60px); }
.ov-swipe { display: none; align-items: center; gap: 10px; margin-top: 18px; font: 600 12px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.ov-swipe svg { width: 18px; height: 18px; animation: nudgear 2.4s var(--ease) infinite; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--rule); }
.cmp thead th, .cmp thead td { padding-top: 0; padding-bottom: 18px; border-bottom: 1.6px solid var(--ink); vertical-align: bottom; }
.cmp thead a { display: flex; align-items: flex-end; gap: 18px; color: var(--ink); text-decoration: none; }
.cmp-f { flex: none; display: block; width: clamp(56px, 5vw, 84px); aspect-ratio: 3 / 4.2; overflow: hidden; border-radius: 999px 999px 2px 2px; background: #cbbfa8; }
.cmp-f img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cmp thead a:hover .cmp-f img { transform: scale(1.08); }
.cmp-n { font: 900 clamp(28px, 2.8vw, 48px)/.92 var(--fd); letter-spacing: -.03em; }
.cmp-a { display: block; margin-bottom: .14em; font-size: .42em; font-weight: 800; letter-spacing: -.01em; color: var(--green); }
.cmp thead a:hover .cmp-n > span + * , .cmp thead a:hover .cmp-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cmp tbody th { width: 16%; font: 600 12px/1.9 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.cmp tbody td { width: 28%; font: 500 16.5px/1.5 var(--ft); transition: background-color .3s; }
.cmp-big { font: 800 clamp(19px, 1.5vw, 23px)/1.25 var(--fd); letter-spacing: -.01em; }
.cmp-st, .cmp-town { display: block; }
.cmp-st { font-weight: 600; }
.cmp-town { color: var(--ink2); }
.cmp-ph { font-weight: 600; text-underline-offset: 4px; text-decoration-color: rgba(34, 28, 22, .35); }
.cmp-ph:hover { text-decoration-color: var(--ink); }
.cmp td.hl { background: rgba(255, 250, 240, .55); }

/* ================= 4. which key ================= */
.ov-pick { padding: clamp(80px, 8vw, 130px) var(--g) clamp(60px, 6vw, 100px); }
.ov-pick-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26em); column-gap: 4vw; align-items: end; }
.ov-pick-h { font: 900 clamp(64px, 10.4vw, 200px)/.84 var(--fd); letter-spacing: -.045em; margin-left: -.05em; }
.ov-pick-head .lead { margin: 0 0 .6em; }
.ov-pdoors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 30px); margin-top: clamp(40px, 5vw, 80px); }
.ov-pd { position: relative; display: block; aspect-ratio: 3 / 3.5; overflow: hidden; border-radius: 3px; color: #F6F1E7; text-decoration: none; background: #cbbfa8; }
.ov-pd-ph { position: absolute; inset: 0; }
.ov-pd-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.4s var(--ease); }
/* the painted leaf: it stands ajar once the door is in view, and opens further under the pointer */
.ov-pd-leaf {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 30px);
  background: var(--green); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--door);
  box-shadow: inset -3px 0 0 rgba(255, 250, 238, .18);
}
.ov-pd-leaf::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(255, 250, 238, .55); }
.js .rv.in .ov-pd-leaf { clip-path: inset(0 22% 0 0); }
.js .rv.in .ov-pd-leaf::after { right: 22%; }
.ov-pd-leaf::after { transition: right 1.1s var(--door); }
@media (hover: hover) {
  .js .rv.in .ov-pd:hover .ov-pd-leaf, .js .rv.in .ov-pd:focus-visible .ov-pd-leaf { clip-path: inset(0 44% 0 0); }
  .js .rv.in .ov-pd:hover .ov-pd-leaf::after, .js .rv.in .ov-pd:focus-visible .ov-pd-leaf::after { right: 44%; }
  .ov-pd:hover .ov-pd-ph img { transform: scale(1.02); }
}
.ov-pd-k { font: 900 clamp(84px, 8.4vw, 150px)/.78 var(--fd); letter-spacing: -.05em; color: rgba(246, 241, 231, .2); margin-left: -.04em; }
.ov-pd-n { margin-top: auto; font: 900 clamp(34px, 3.3vw, 58px)/.9 var(--fd); letter-spacing: -.035em; max-width: 5em; }
.ov-pd-n span { display: block; margin-bottom: .1em; font-size: .42em; font-weight: 800; letter-spacing: -.01em; color: rgba(246, 241, 231, .78); }
.ov-pd-s { margin-top: 14px; font: 700 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 241, 231, .75); }
.ov-pd-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 800 clamp(18px, 1.4vw, 21px)/1.1 var(--fd); }
.ov-pd-go svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.ov-pd:hover .ov-pd-go svg { transform: translateX(5px); }
.ov-any { margin-top: clamp(30px, 3.4vw, 50px); font: 800 clamp(22px, 2vw, 32px)/1.2 var(--fd); letter-spacing: -.015em; }
.ov-any a { color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ov-any a:hover { color: var(--ink); }
.ov-pick-ct { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: clamp(26px, 4vw, 70px); align-items: start; margin-top: clamp(50px, 6vw, 90px); padding-top: 26px; border-top: 1.6px solid var(--ink); }
.ov-pick-ct .label { grid-row: 1 / span 3; }
.ov-ct-n { font: 800 20px/1.3 var(--fd); }
.ov-ct-m { grid-column: 2; font: 600 16.5px/1.5 var(--ft); }
.ov-ct-m a { text-underline-offset: 4px; text-decoration-color: rgba(34, 28, 22, .35); }
.ov-adr { grid-column: 3; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 0 clamp(26px, 3vw, 50px); }
.ov-adr .adr-town { flex-basis: 100%; }

/* ================= tablets ================= */
@media (max-width: 999px) {
  .ov-wall { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cr" "intro" "h1"; row-gap: 22px; }
  .ov-intro { justify-self: start; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ov-row { grid-template-columns: minmax(0, 1fr); row-gap: 60px; }
  .ov-d { display: block; }
  .ov-a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: 26px; align-items: end; }
  .live .ov-row { bottom: 200px; }
  .live .ov-det { height: 170px; }
  .ov-db { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; }
  .ov-dk { grid-column: 1; grid-row: 1; flex-direction: row; align-items: baseline; gap: 10px; }
  .ov-dk b { font-size: 15px; line-height: 1; letter-spacing: .02em; font-weight: 800; color: var(--terra); }
  .ov-dn { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: clamp(34px, 7vw, 54px); white-space: normal; }
  .ov-ds { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; font-size: 15px; }
  .ov-dg { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .ov-rooms { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .ov-side, .ov-mir .ov-side, .ov-photos, .ov-mir .ov-photos { grid-column: 1; grid-row: auto; }
  .ov-stick { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
  .ov-stick > .label, .ov-say-t, .ov-figs { grid-column: 1 / -1; }
  .ov-stick .ledger { grid-column: 1 / -1; }
  .ov-go2 { grid-column: 1 / -1; }
  .ov-mir .ov-all { text-align: left; }
  .ov-pick-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ov-pdoors { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ov-pd { aspect-ratio: auto; height: clamp(170px, 30vw, 240px); }
  .ov-pd-k { position: absolute; right: 30%; top: 18px; font-size: 90px; }
  .ov-pd-n { max-width: none; }
  .ov-pick-ct { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ov-pick-ct .label, .ov-ct-m, .ov-adr { grid-column: 1; grid-row: auto; }
  .ov-adr { margin-top: 10px; }
  .cmp th, .cmp td { padding-right: 14px; }
  .cmp tbody td { font-size: 15px; }
  .cmp tbody th { width: 17%; }
}
@media (max-width: 999px) and (min-width: 641px) {
  .ov-a { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
}

/* ================= phones ================= */
@media (max-width: 640px) {
  .ov-wall { padding-top: 22px; }
  .ov-count b { font-size: 40px; }
  .ov-h1 { margin-top: 4px; }
  .ov-a { grid-template-columns: minmax(0, 1fr); }
  .ov-f { aspect-ratio: 3 / 3.4; }
  .ov-n { font-size: clamp(44px, 13vw, 60px); }
  .ov-doors.live { height: 310vh; }
  .live .ov-row { top: calc(var(--hd) + 12px); bottom: 214px; }
  .live .ov-det { bottom: 14px; height: 186px; }
  html.ck-on .live .ov-row { bottom: calc(204px + var(--ckh, 0px)); }
  .ov-db { top: 24px; }
  .ov-dn { font-size: clamp(34px, 10.4vw, 44px); }
  .ov-ds { font-size: 14.5px; line-height: 1.42; }
  .ov-dg a { padding: 12px 15px; font-size: 14px; }
  .ov-dg a span, .ov-dg .lbl { display: none; }
  .ov-walk.live { height: 200vh; }
  .live .ov-wt { top: calc(var(--hd) + 22px); left: var(--g); right: var(--g); width: auto; }
  .ov-mir .live .ov-wt { left: var(--g); right: var(--g); }
  .ov-wn { font-size: clamp(56px, 17vw, 84px); }
  .ov-wl { font-size: clamp(21px, 6vw, 26px); }
  .live .ov-wc { left: var(--g); right: var(--g); bottom: 14px; }
  .ov-rooms { padding-top: 56px; row-gap: 36px; }
  .ov-r1, .ov-r4 { margin: 0 calc(var(--g) * -1); }
  .ov-r1 .ov-rf, .ov-r4 .ov-rf { border-radius: 0; aspect-ratio: 4 / 3.3; }
  .ov-r1 .ov-rc, .ov-r4 .ov-rc { padding: 0 var(--g); }
  .ov-pair { column-gap: 10px; margin: 30px 0; }
  .ov-pair .ov-r3 { margin-top: 44px; }
  .ov-rc { font-size: 10.5px; letter-spacing: .12em; }
  .ov-go2 { flex-direction: column; align-items: stretch; }
  .ov-go2 .door { width: 100%; }
  .ov-go2 .more { width: fit-content; }
  .ov-stick .lg { grid-template-columns: minmax(92px, .42fr) 1fr; gap: 12px; }
  .ov-pick-h { font-size: clamp(60px, 18vw, 90px); }
  .ov-pd { height: 168px; }
  .ov-pd-leaf { padding: 16px 18px; }
  .ov-pd-k { position: absolute; right: 26%; top: 14px; font-size: 64px; }
  .ov-pd-n { font-size: clamp(30px, 9vw, 40px); }
  .ov-pd-go { margin-top: 12px; font-size: 17px; }
  .ov-pd-s { margin-top: 8px; }
  /* on a phone the three columns walk sideways under a fixed column of row names */
  .ov-cmp-wrap { overflow-x: auto; margin: 26px calc(var(--g) * -1) 0; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: calc(104px + var(--g)); }
  .ov-cmp-wrap::-webkit-scrollbar { display: none; }
  .cmp { width: auto; }
  .cmp th, .cmp td { padding: 12px 14px 12px 0; }
  .cmp thead th, .cmp tbody td { width: 62vw; min-width: 62vw; scroll-snap-align: start; }
  .cmp thead td, .cmp tbody th { position: sticky; left: 0; z-index: 1; width: 104px; min-width: 104px; padding-left: var(--g); background: var(--plaster); box-shadow: 10px 0 12px -10px rgba(60, 40, 20, .25); }
  .cmp tbody th { font-size: 10.5px; letter-spacing: .12em; line-height: 1.6; }
  .cmp thead a { gap: 12px; }
  .cmp-f { width: 46px; }
  .cmp-n { font-size: 28px; }
  .cmp tbody td { font-size: 14.5px; }
  .cmp-big { font-size: 17px; }
  .ov-swipe { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-swipe svg { animation: none; }
  .ov-pd-leaf, .ov-pd-leaf::after, .ov-pd-ph img { transition: none; }
  .js .rv.in .ov-pd-leaf { clip-path: inset(0 30% 0 0); }
  .js .rv.in .ov-pd-leaf::after { right: 30%; }
}