/* Boca Dream Island concept. Direction: place-carries-it (seed 384757065).
   Palette taken from the island itself: mangrove green ground, sand ink, flats turquoise accent. */
:root {
  --bg: #0f2e28;
  --surface: #173b34;
  --ink: #ebeae4;
  --muted: #bcc2b9;
  --accent: #74d3c3;
  --accent-ink: #0b2621;
  --paper: #ebeae4;
  --paper-ink: #0f2e28;
  --paper-muted: #44564f;

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.125rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.75rem, 11vw, 12rem);

  --m: clamp(20px, 4.4vw, 72px);
  --gap: clamp(120px, 14vw, 200px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.6 var(--sans);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, .display {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
h2 { font-size: var(--step-head); }

/* Buttons: one shape, square corners, flat fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--step-body)/1 var(--sans); text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease-out);
}
.btn:hover { background: var(--ink); }
.btn:active { transform: translateY(1px) scale(.99); }
.text-link {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  color: var(--ink); font: 500 var(--step-body)/1.2 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  transition: color .2s, text-underline-offset .2s;
}
.text-link:hover { color: var(--accent); text-underline-offset: 8px; }

/* Bar */
.bar {
  position: absolute; z-index: 5; inset: 0 0 auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--m);
  font-size: var(--step-body);
}
.bar a { text-decoration: none; color: #fff; transition: color .2s; }
.bar a:hover { color: var(--accent); }
.bar-mark { font-family: var(--serif); font-size: var(--step-lead); letter-spacing: -0.01em; }
.bar-cta { justify-self: end; }

/* Hero: the place, full-bleed, name on the bottom edge */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: drift 28s ease-in-out infinite alternate; transform-origin: 55% 55%; }
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.2%, -0.8%); } }
/* neutral scrims under the text areas only */
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 22%; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,0)); } /* taste-skill-ignore: scrim */
.hero::after { bottom: 0; height: 52%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); } /* taste-skill-ignore: scrim */

.hero-text {
  position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end;
}
.hero h1 { grid-column: 1 / 9; font-size: var(--step-display); line-height: 0.92; }
.hero h1 .line-2 { padding-left: 18%; }
.hero-side { grid-column: 9 / 13; padding-bottom: 0.9vw; }
.hero-lead { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero .text-link { color: #fff; }

/* masked line reveal */
.lines .line { display: block; overflow: hidden; padding: 0.14em 0 0.1em; margin: -0.14em 0 -0.1em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 750ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 80ms); }
  .js [data-hero-after] { opacity: 0; transform: translateY(16px); animation: rise 600ms var(--ease-out) 400ms forwards; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Section entrances */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}

/* STATS: figure on the photograph's edge */
.stats { padding-top: var(--gap); }
.stats-photo { position: relative; height: 88svh; min-height: 560px; overflow: hidden; color: #fff; }
.stats-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.stats-photo::before, .stats-photo::after { content: ""; position: absolute; left: 0; right: 0; } /* neutral scrims under text only */
.stats-photo::before { top: 0; height: 22%; background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,0)); } /* taste-skill-ignore: scrim */
.stats-photo::after { bottom: 0; height: 40%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); } /* taste-skill-ignore: scrim */
.stats-title { position: absolute; z-index: 1; top: 28px; left: var(--m); font-size: var(--step-head); }
.stats-figure {
  position: absolute; z-index: 1; left: var(--m); bottom: clamp(18px, 2.2vw, 36px);
  font-family: var(--serif); font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.03em;
}
.stats-note { position: absolute; z-index: 1; right: var(--m); bottom: clamp(30px, 3.4vw, 54px); max-width: 30ch; text-align: right; font-size: var(--step-lead); line-height: 1.35; }
.stats-more { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding: 40px var(--m) 0; }
.mini-figure { display: flex; align-items: baseline; gap: 18px; }
.mini-figure:first-child { grid-column: 1 / 7; }
.mini-figure:last-child { grid-column: 7 / 13; }
.mini-figure strong { font: 500 var(--step-head)/1 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
.mini-figure span { color: var(--muted); max-width: 24ch; }

/* SHOWCASE: one frame, four distances */
.plate { position: relative; margin-top: var(--gap); }
.plate-stage { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 80px var(--m) 40px; }
.plate-markers { height: 200vh; display: grid; grid-template-rows: repeat(4, 1fr); margin-top: -100svh; pointer-events: none; }
.plate-title { text-align: center; font-size: var(--step-head); }
.plate-title span { display: block; }
.plate-b { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .plate-b { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .plate.past-0 .plate-b { opacity: 1; transform: none; }
}
.plate-body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: start; }
/* The frame holds an SVG: the real overhead frame plus traced land shapes, zoomed by viewBox so nothing spills out */
.plate-frame { grid-column: 2 / 10; aspect-ratio: 16 / 9; background: var(--surface); overflow: hidden; }
.plate-svg { width: 100%; height: 100%; display: block; }
.plate-svg .hl { fill: var(--accent); fill-opacity: .18; stroke: #fff; stroke-opacity: 0; stroke-width: 3; transition: fill-opacity .6s, fill .6s, stroke-opacity .6s; }
.plate-svg .tag, .plate-svg .dim { opacity: 0; transition: opacity .5s .25s; }
.plate-svg .tag rect, .plate-svg .dim rect { fill: var(--paper); }
.plate-svg text { font: 500 22px var(--sans); fill: var(--paper-ink); text-anchor: middle; }
.plate-svg .tag-main text { font-size: 28px; }
.plate-svg .tag-islet text, .plate-svg .dim text { font-size: 17px; }
.plate-svg .dim path { stroke: var(--paper); stroke-width: 5; fill: none; }
[data-stage="0"] .hl { fill-opacity: .28; }
[data-stage="1"] .hl-main { fill-opacity: .42; stroke-opacity: .9; }
[data-stage="1"] .tag-main { opacity: 1; }
[data-stage="2"] .hl-islet { fill-opacity: .5; stroke-opacity: .9; }
[data-stage="2"] .tag-islet, [data-stage="2"] .dim { opacity: 1; }
[data-stage="3"] .hl { fill: #06140f; fill-opacity: .62; }
.plate-caption { grid-column: 10 / 13; padding-top: 4px; }
.plate-fig { font: 500 var(--step-head)/1 var(--serif); letter-spacing: -0.02em; margin-bottom: 14px; }
.plate-text { max-width: 28ch; }
.plate-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tab {
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--surface); color: var(--ink); font: 500 var(--step-body)/1 var(--sans);
  transition: background-color .25s, color .25s, transform .2s var(--ease-out);
}
.tab span { color: var(--muted); margin-left: 6px; white-space: nowrap; font-weight: 400; font-variant-numeric: tabular-nums; }
.tab:hover { background: #21483f; }
.tab:active { transform: scale(.98); }
.tab.is-on { background: var(--accent); color: var(--accent-ink); }
.tab.is-on span { color: var(--accent-ink); }

/* FEATURES: one scene, stepping statements */
.zoning { position: relative; margin-top: var(--gap); }
.zoning-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.zoning-markers { height: 220vh; margin-top: -100svh; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.zoning-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zoning-stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; background: linear-gradient(rgba(6,20,17,.86), rgba(6,20,17,.6) 60%, rgba(6,20,17,0)); z-index: 1; } /* taste-skill-ignore: scrim */
.zoning-list { position: relative; z-index: 2; text-align: center; padding-top: clamp(84px, 12vh, 130px); display: grid; gap: 12px; }
.zoning-list li { font: 400 var(--step-lead)/1.25 var(--sans); color: var(--ink); transition: color .4s; }
.zoning-list li h2 { font: inherit; letter-spacing: 0; color: inherit; }
.zoning-list li.on { color: var(--accent); font-weight: 500; }
.zoning-list li:first-child { font-family: var(--serif); font-size: var(--step-head); line-height: 1; margin-bottom: 10px; color: #fff; }
.zoning-pics { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.zp { position: absolute; height: auto; object-fit: cover; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.zp.on { opacity: 1; transform: none; }
.zp-l { left: var(--m); top: 50%; width: clamp(200px, 21vw, 320px); aspect-ratio: 3 / 2; }
.zp-r { right: var(--m); top: 34%; width: clamp(200px, 21vw, 320px); aspect-ratio: 3 / 2; }
.zoning-cap { position: absolute; z-index: 2; right: var(--m); bottom: 20px; max-width: calc(100% - 2 * var(--m)); padding: 8px 12px; font-size: var(--step-small); background: var(--paper); color: var(--paper-ink); }

/* GALLERY: rising triptych */
.vision { position: relative; height: 210svh; margin-top: var(--gap); }
.vision-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.vision-head { position: relative; z-index: 2; text-align: center; padding: clamp(64px, 9vh, 100px) var(--m) 0; }
.vision-head h2 { font-size: var(--step-head); margin-bottom: 18px; }
.vision-head p { max-width: 52ch; margin: 0 auto; }
.vision-pics { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.vp { position: absolute; overflow: hidden; }
.vp img { width: 100%; height: 100%; object-fit: cover; }
.vp-c { left: 50%; width: clamp(300px, 44vw, 760px); aspect-ratio: 4 / 5; transform: translate(-50%, var(--y, 52vh)); }
.vp-l, .vp-r { width: clamp(220px, 25vw, 380px); aspect-ratio: 360 / 530; }
.vp-l { right: calc(50% + clamp(150px, 22vw, 380px) + 10px); transform: translateY(calc(var(--y, 62vh) + 55px + var(--yo, 0px))); }
.vp-r { left: calc(50% + clamp(150px, 22vw, 380px) + 10px); transform: translateY(calc(var(--y, 62vh) + 55px + var(--yo, 0px))); }
@media (prefers-reduced-motion: reduce) {
  .vision { height: auto; }
  .vision-stage { position: relative; height: auto; overflow: visible; padding-bottom: 40px; }
  .vision-pics { position: relative; height: auto; display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px; padding: 40px var(--m) 0; }
  .vp { position: relative; left: auto; right: auto; width: auto; transform: none !important; }
}

/* ACCESS: reached by water (text left, footage right, mirrors the location section below) */
.access { margin-top: var(--gap); padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: center; }
.access-text { grid-column: 1 / 6; }
.access h2 { margin-bottom: 24px; }
.access-lead { font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; }
.access-list { margin-top: 40px; display: grid; gap: 22px; }
.access-list div { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 20px; align-items: baseline; }
.access-list dt { font: 500 var(--step-head)/1 var(--serif); letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
.access-list dd { max-width: 26ch; }
.access-media { grid-column: 7 / 13; }
.access-media video { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 75% 50%; background: var(--surface); }
.access-media figcaption { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }

/* ABOUT: wide photo, colour tile, facts */
.place { margin-top: var(--gap); padding: 0 var(--m); }
.place h2 { margin-bottom: 24px; }
.place-lead { font-size: var(--step-lead); line-height: 1.4; max-width: 40ch; }
.place-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 72px; align-items: start; }
.place-photo { grid-column: 1 / 9; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.place-photo img { width: 100%; height: 100%; object-fit: cover; }
.place-over { position: absolute; top: 0; right: 0; width: 340px; padding: 22px; background: var(--paper); color: var(--paper-ink); font-size: var(--step-body); line-height: 1.5; }
.place-side { grid-column: 9 / 13; }
.place-tile { background: var(--surface); }
.place-tile img { width: 100%; height: auto; aspect-ratio: 550 / 380; object-fit: cover; }
.place-tile figcaption { padding: 10px 14px; font-size: var(--step-small); color: var(--muted); }
.place-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 24px; }
.place-facts dt { color: var(--muted); font-size: var(--step-small); }
.place-facts dd { font-weight: 500; }

/* LIST: the offering sheet */
.sheet-band { margin-top: var(--gap); background: var(--surface); padding: clamp(64px, 8vw, 120px) var(--m); }
.sheet {
  max-width: 680px; margin: 0 auto; background: var(--paper); color: var(--paper-ink);
  padding: 72px 64px 64px; text-align: center;
  --s: 14px;
  /* scalloped top and bottom edges, a mask and not a fill */
  -webkit-mask: radial-gradient(var(--s) at 50% var(--s), #0000 98%, #000) 50% calc(-1 * var(--s)) / calc(2 * var(--s)) 100% repeat-x, /* taste-skill-ignore: mask */
                radial-gradient(var(--s) at 50% calc(100% - var(--s)), #0000 98%, #000) 50% calc(var(--s)) / calc(2 * var(--s)) 100% repeat-x; /* taste-skill-ignore: mask */
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.sheet h2 { font-size: var(--step-head); margin-bottom: 12px; }
.sheet-note { color: var(--paper-muted); }
.sheet-group { margin-top: 52px; }
.sheet-group h3 { font: 500 var(--step-lead)/1.2 var(--serif); margin-bottom: 18px; }
.sheet-group dl { max-width: 460px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.sheet-group dl div { display: flex; justify-content: space-between; gap: 20px; }
.sheet-group dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.sheet-end { margin-top: 56px; font: 500 var(--step-lead)/1.4 var(--serif); }

/* CONTACT: visit card on a photograph */
.visit { position: relative; min-height: 100svh; margin-top: 0; }
.visit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.visit-card {
  position: absolute; top: 60px; right: var(--m); width: 400px;
  background: var(--paper); color: var(--paper-ink); padding: 32px 32px 0; border-radius: 0;
  display: grid; gap: 22px;
}
.visit-card h2 { font-size: var(--step-head); }
.agent p { font-size: var(--step-body); line-height: 1.45; }
.agent .agent-name { font-weight: 500; }
.agent a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.agent a:hover { color: #1f6f62; }
.btn-block { margin: 6px -32px 0; min-height: 56px; }

/* FOOTER: contact as the headline */
.close { background: var(--accent); color: var(--accent-ink); padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.close-phone { margin-top: clamp(140px, 22vh, 260px) !important; }
.close-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; }
.close-top p { font-size: var(--step-small); }
.close-mark { grid-column: 1 / 3; font-family: var(--serif); font-size: var(--step-body) !important; }
.close-top p:nth-child(2) { grid-column: 3 / 8; max-width: 52ch; }
.close-up { grid-column: 11 / 13; justify-self: end; font-size: var(--step-small); }
.close a { color: var(--accent-ink); }
.close-phone {
  margin-top: auto; display: block; text-decoration: none;
  font: 500 var(--step-display)/0.9 var(--serif); letter-spacing: -0.03em; white-space: nowrap;
  transition: opacity .2s;
}
.close-phone:hover { opacity: .75; }
.close-meta { display: flex; justify-content: space-between; gap: 24px; margin-top: 36px; font-size: var(--step-small); }
.close-meta p:first-child { display: flex; gap: 22px; flex-wrap: wrap; }

/* Film dialog */
.film { width: min(1100px, 92vw); padding: 0; border: 0; background: #000; color: #fff; }
.film::backdrop { background: rgba(4, 14, 12, .85); }
.film video { width: 100%; height: auto; }
.film-close { position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 16px; border: 0; background: var(--paper); color: var(--paper-ink); font: 500 var(--step-small)/1 var(--sans); cursor: pointer; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .hero h1 { grid-column: 1 / -1; }
  .hero-side { grid-column: 1 / -1; padding-top: 22px; }
  .plate-frame { grid-column: 1 / -1; }
  .plate-caption { grid-column: 1 / -1; padding-top: 18px; display: flex; gap: 24px; align-items: baseline; }
  .plate-fig { flex: none; margin: 0; }
  .place-photo { grid-column: 1 / -1; }
  .access-text, .access-media { grid-column: 1 / -1; }
  .access-media { margin-top: 40px; }
  .place-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .place-facts { margin-top: 0; align-content: start; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  :root { --step-display: 13.4vw; --step-head: 2.125rem; }
  .bar { grid-template-columns: 1fr auto; padding: 16px var(--m); }
  .bar-link:first-child { display: none; }
  .hero { min-height: 560px; }
  .hero-media img { object-position: 46% 50%; }
  .hero::after { height: 70%; }
  .hero h1 .line-2 { padding-left: 22vw; }
  .hero-lead { margin-bottom: 20px; }
  .hero-side { padding-top: 16px; }

  .stats-photo { height: 80svh; min-height: 500px; }
  .stats-photo img { object-position: 22% 70%; }
  .stats-photo::after { height: 62%; }
  .stats-figure { bottom: 10px; }
  .stats-note { left: var(--m); right: var(--m); bottom: calc(13.4vw + 30px); text-align: left; }
  .stats-more { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .mini-figure { flex-direction: column; gap: 4px; }
  .mini-figure:first-child, .mini-figure:last-child { grid-column: 1; }

  .plate-stage { padding-top: 64px; gap: 18px; }
  .plate-frame { aspect-ratio: 4 / 3; }
  .plate-caption { display: block; }
  .plate-fig { margin-bottom: 8px; }
  .plate-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .tab { padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; line-height: 1.1; }
  .tab span { margin: 0; }

  .zoning-stage::before { inset: auto 0 0 0; height: 70%; background: linear-gradient(rgba(6,20,17,0), rgba(6,20,17,.7) 30%, rgba(6,20,17,.9)); } /* taste-skill-ignore: scrim */
  .zoning-list { position: absolute; left: var(--m); right: var(--m); bottom: 56px; padding: 0; text-align: left; gap: 8px; }
  .zoning-list li { font-size: var(--step-body); }
  .zp-l { display: none; }
  .zp-r { top: 76px; right: var(--m); width: 44vw; aspect-ratio: 4 / 3; }
  .zoning-cap { bottom: 12px; left: var(--m); right: auto; }
  .zoning-list { bottom: 72px; }

  .vp-c { width: 64vw; }
  .vp-l { right: calc(100% - 40px); }
  .vp-r { left: calc(100% - 40px); }
  .vp-l, .vp-r { width: 44vw; }

  .place-grid { margin-top: 40px; }
  .access-list div { grid-template-columns: 1fr; gap: 4px; }
  .place-photo { aspect-ratio: 4 / 3; overflow: visible; }
  .place-photo img { aspect-ratio: 4 / 3; height: auto; }
  .place-over { position: static; width: auto; margin-top: 0; padding: 18px; }
  .place-side { grid-template-columns: 1fr; }

  .sheet-band { padding: 48px 10px; }
  .sheet { padding: 56px 24px 48px; }

  .visit { min-height: auto; display: flex; flex-direction: column; }
  .visit-photo { position: relative; height: 70svh; }
  .visit-card { position: relative; top: auto; right: auto; width: auto; margin: -80px var(--m) 0; }
  .btn-block { min-height: 56px; }

  .close-top { grid-template-columns: 1fr; gap: 10px; }
  .close-mark, .close-top p:nth-child(2), .close-up { grid-column: 1; justify-self: start; }
  .close-meta { flex-direction: column; gap: 6px; }
}