/* ==========================================================================
   The Studio (studio.html): page-specific layout only; components come from
   components.css. Sections: hero, story (cream), rooms, house & garden (cream),
   visit. The gear list and the 360° tour have their own pages (gear.html, gear.css;
   multimedia.html#tour, multimedia.css).
   Colour rhythm: dark hero → cream story → dark rooms → cream house → dark visit.
   Italic emphasis keeps the section text colour.
   Contextual tokens (--fg, --rule, --accent…) so themed sections work.
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------- */
.s-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5.5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background: var(--ink); color: var(--cream);
}
.s-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 88% 8%, rgba(124, 204, 191, .13), transparent 70%),
    radial-gradient(50% 45% at 4% 62%, rgba(255, 106, 43, .14), transparent 72%);
}
.s-hero__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: end; gap: 1.5rem clamp(2rem, 5vw, 6rem);
}
.s-hero__title { max-width: 9.5em; }   /* size: .t-hero (shared inner-page H1 scale) */
.s-hero__title em { font-weight: 300; padding-right: .04em; }
.s-hero__intro { display: grid; gap: 1.5rem; padding-bottom: .9rem; }
.s-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .84); max-width: 34ch; }
.s-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

.s-hero__stage { position: relative; margin-top: clamp(2.2rem, 5vw, 4rem); }
.s-hero__media {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 2.55 / 1; border-radius: var(--r-sm); background: var(--ink-3);
  box-shadow: var(--shadow-2);
}
.s-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 13, 12, .55), transparent 26%, transparent 66%, rgba(15, 13, 12, .7)),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8, 6, 5, .5) 100%);
}
.s-hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  filter: brightness(.82) saturate(.9) contrast(1.05) sepia(.1);
  transform-origin: 50% 60%;
}
.s-hero__hud { position: absolute; inset: 0 var(--gutter); pointer-events: none; color: rgba(243, 235, 224, .86); text-shadow: 0 1px 12px rgba(15, 13, 12, .9); }
.s-hud { position: absolute; display: inline-flex; align-items: center; gap: 1rem; }
.s-hud--tl { top: clamp(.9rem, 2vw, 1.4rem); left: clamp(.9rem, 2vw, 1.5rem); }
.s-hud--tr { top: clamp(.9rem, 2vw, 1.4rem); right: clamp(.9rem, 2vw, 1.5rem); }
.s-hud--br { bottom: clamp(.9rem, 2vw, 1.4rem); right: clamp(.9rem, 2vw, 1.5rem); }

.s-hero__nav { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.tracklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.track {
  position: relative; display: grid; gap: .45rem; padding: 1.1rem 1.25rem 1.2rem 0; min-height: 44px;
  color: var(--cream); transition: color .35s;
}
.tracklist li + li .track { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.track::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--mint);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.track__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.2rem, 1.6vw, 1.6rem); font-weight: 380; line-height: 1.1; letter-spacing: -.015em; }
.track__meta { color: var(--muted); }
.track:hover, .track:focus-visible { color: var(--mint-hi); }
.track:hover::before, .track:focus-visible::before { transform: scaleX(1); }

@media (max-width: 1100px) {
  .s-hero__head { grid-template-columns: 1fr; }
  .s-hero__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .s-hero { padding-top: calc(var(--header-h) + 2.25rem); }
  .s-hero__title { font-size: clamp(3rem, 14.2vw, 4.6rem); }
  .s-hero__intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .s-hero__ctas .btn { flex: 1 1 auto; }
  .s-hero__stage { padding-inline: 0; margin-top: 2rem; }
  .s-hero__media { aspect-ratio: 4 / 4.2; border-radius: 0; }
  /* the drum kit and cymbals, not the empty wall */
  .s-hero__img { object-position: 53% 50%; }
  .s-hud--tr { display: none; }
  .tracklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracklist li .track, .tracklist li + li .track { padding: .95rem .9rem 1rem 0; border-left: 0; }
  .tracklist li:nth-child(2n) .track { padding-left: .9rem; border-left: 1px solid var(--line); }
  .tracklist li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---- Story (cream) ---------------------------------------------------------- */
.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 2.5rem; }
.story__rail { grid-column: 1 / span 3; }
.story__ledger { display: grid; border-top: 1px solid var(--rule-strong); max-width: 17rem; }
.story__ledger > div { display: grid; gap: .3rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.story__ledger dt { color: var(--accent); }
.story__ledger dd { margin: 0; color: var(--fg); text-transform: none; letter-spacing: .02em; font-size: .82rem; }
.story__main { grid-column: 4 / -1; }
@media (min-width: 1001px) {
  .story__grid { align-items: start; }
  .story__rail { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.story__text { font-size: clamp(1.8rem, 3.7vw, 3.9rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 350; max-width: 23ch; }
.story__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.story__kicker { color: var(--accent); margin-bottom: 1rem; }
.story__vision { display: grid; gap: 1.1rem; align-content: start; max-width: 52ch; }
.story__vision .story__kicker { margin-bottom: 0; }
.principles { border-top: 1px solid var(--rule-strong); }
.principle { display: grid; row-gap: .25rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--rule); }
.principle__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-h5); font-weight: 450; line-height: 1.2; }
.principle__text { color: var(--fg-muted); font-size: var(--fs-small); }
.principle__text .link { color: var(--fg); }

.story__claim {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(2rem, 6vw, 7rem); align-items: end;
  margin-top: clamp(4.5rem, 9vw, 8rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-strong);
}
.story__claim-main { display: grid; gap: 1.4rem; }
.story__claim-main .story__kicker { margin-bottom: 0; }
.story__claim-text { font-size: var(--fs-d2); line-height: .98; letter-spacing: -.03em; font-weight: 360; max-width: 17ch; }
.story__services { display: flex; flex-wrap: wrap; gap: .5rem; }
.story__services li { padding: .42rem .8rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--fg); }
.story__claim-sub { max-width: 56ch; }
.founder { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0; padding: 1.25rem; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--cream-2); }
.founder__photo { border-radius: var(--r-sm); }
.founder__body { display: grid; gap: .45rem; }
.founder__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.45rem; font-weight: 420; line-height: 1.1; }
.founder__role { color: var(--accent); }
.founder__text { color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.55; }
.founder__link { margin-top: .3rem; min-height: 44px; }

@media (max-width: 1000px) {
  .story__rail { grid-column: 1 / -1; }
  .story__ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; border-top: 0; column-gap: 1rem; }
  .story__ledger > div { border-top: 1px solid var(--rule-strong); }
  .story__main { grid-column: 1 / -1; }
  .story__claim { grid-template-columns: 1fr; }
  .founder { max-width: 36rem; }
}
@media (max-width: 760px) {
  .story__ledger { grid-template-columns: 1fr; }
  .story__ledger > div { grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: .7rem 0; border-top: 0; }
  .story__ledger { border-top: 1px solid var(--rule-strong); }
  .story__cols { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 96px minmax(0, 1fr); padding: 1rem; gap: 1rem; }
}

/* ---- Rooms ---------------------------------------------------------------------- */
.rooms-x { background: var(--ink); overflow: hidden; }
.rooms-x__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 6rem); align-items: start;
  margin-bottom: clamp(4rem, 8vw, 7.5rem);
}
.rooms-x__title { font-size: clamp(3.6rem, 9vw, 10rem); }
.rooms-x__aside { display: grid; gap: 2rem; }
.rooms-x__aside .lead { color: var(--muted); max-width: 44ch; }
.rooms-x__gear { justify-self: start; min-height: 44px; }
.scale { margin: 0; display: grid; gap: .9rem; }
.scale__boxes { --unit: clamp(7.5rem, 11vw, 10rem); display: flex; align-items: flex-end; gap: .75rem; height: var(--unit); }
.scale__box {
  position: relative; display: block; width: calc(var(--unit) * var(--s)); height: calc(var(--unit) * var(--s));
  border: 1px solid var(--line-strong); border-radius: 3px; transform-origin: 0 100%;
  background: repeating-linear-gradient(135deg, rgba(243, 235, 224, .06) 0 1px, transparent 1px 7px);
}
.scale__box .mono { position: absolute; left: .35rem; top: .3rem; font-size: .6rem; white-space: nowrap; color: var(--cream); }   /* areas with their unit ("10 m²"), on one line even in the booth */
.scale__box--live { border-color: rgba(124, 204, 191, .6); background: repeating-linear-gradient(135deg, rgba(124, 204, 191, .16) 0 1px, transparent 1px 7px); }
.scale__box--live .mono { color: var(--mint-hi); }
.scale__cap { color: var(--muted); max-width: 46ch; text-transform: none; letter-spacing: .03em; }

.room-x {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: clamp(2rem, 3.5vw, 3rem); align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line);
}
.room-x__media { grid-column: 1 / span 7; position: relative; }
.room-x__photo { display: block; max-width: 907px; box-shadow: var(--shadow-2); }
.room-x__info { grid-column: 9 / -1; display: grid; gap: 1.05rem; align-content: center; }
.room-x--flip .room-x__media { grid-column: 6 / -1; grid-row: 1; justify-self: end; width: 100%; }
.room-x--flip .room-x__photo { margin-left: auto; }
.room-x--flip .room-x__info { grid-column: 1 / span 4; grid-row: 1; }
.room-x__kicker { color: var(--muted); }
.room-x__name { line-height: .9; font-size: clamp(2.9rem, 5.6vw, 6.6rem); }
.room-x__size {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 3.1rem); line-height: 1; color: var(--mint-hi);
}
.room-x__size span { font-style: normal; font-weight: 340; color: var(--cream); }
.room-x__text { color: var(--muted); max-width: 42ch; }
.spec-sheet { display: grid; margin-top: .4rem; border-top: 1px solid var(--line-strong); }
.spec-sheet > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .62rem 0; border-bottom: 1px dashed var(--line-strong); }
.spec-sheet dt { color: var(--muted); }
.spec-sheet dd { margin: 0; color: var(--cream); }

/* contact-sheet strip: film edge with sprocket holes */
.strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; min-width: 0; }
.strip__rail { min-width: 0; }
.strip__head { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }   /* "Open gallery" only: the "Contact sheet · 9 frames" labels went (Kais, 25 Oct 2026) */
.strip__open { min-height: 44px; color: var(--cream); }
.strip__open:hover { color: var(--mint-hi); }
.strip__rail {
  position: relative; padding: 18px 12px; border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 2.6px, transparent 3.1px) 0 4px / 18px 10px repeat-x,
    radial-gradient(circle at 50% 50%, var(--ink) 0 2.6px, transparent 3.1px) 0 calc(100% - 4px) / 18px 10px repeat-x,
    #1c1918;
  box-shadow: inset 0 0 0 1px var(--line);
}
.strip__track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.strip__item { min-width: 0; }
.strip__thumb { display: block; border-radius: 2px; --ratio: 3 / 2; }
.strip__thumb img { filter: saturate(.85) brightness(.9); transition: transform 1.2s var(--ease-out), filter .5s; }
.strip__thumb:hover img, .strip__thumb:focus-visible img { filter: saturate(1.05) brightness(1.02); }
.strip__track:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.strip__track:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* practice + school wing */
.wing {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  margin-top: clamp(1rem, 3vw, 2rem); padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(124, 204, 191, .1), transparent 60%),
    var(--ink-2);
}
.wing__photos { position: relative; aspect-ratio: 16 / 10.5; }
.wing__ph { position: absolute; margin: 0; box-shadow: var(--shadow-2); }
.wing__ph--a { left: 0; top: 0; width: 72%; }
.wing__ph--b { right: 0; bottom: 0; width: 46%; outline: 6px solid var(--ink-2); }
.wing__body { display: grid; gap: 1.1rem; justify-items: start; }
.wing__kicker { color: var(--mint); }
.wing__title { line-height: 1.02; }
.wing__body .muted { max-width: 52ch; }
.wing__rooms { display: grid; gap: .3rem; width: 100%; border-top: 1px solid var(--line); }
.wing__rooms li { display: grid; grid-template-columns: 6.5rem 1fr; padding: .6rem 0; border-bottom: 1px dashed var(--line-strong); color: var(--cream); }
.wing__rooms span { color: var(--muted); }
.wing__links { --cluster-gap: .5rem 2rem; }
.wing__links .link-arrow { min-height: 44px; }

@media (max-width: 1100px) {
  .room-x__media, .room-x--flip .room-x__media { grid-column: 1 / -1; grid-row: auto; }
  .room-x__info, .room-x--flip .room-x__info { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .room-x__info > .room-x__kicker, .room-x__info > .room-x__name, .room-x__info > .room-x__size { grid-column: 1; }
  .room-x__info > .room-x__text { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .room-x__info > .spec-sheet { grid-column: 2; grid-row: 3 / span 2; margin-top: 0; }
  .room-x__photo { max-width: none; }
  .room-x--flip .room-x__photo { margin-left: 0; }
  .rooms-x__head { grid-template-columns: 1fr; }
  .wing { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .strip__track, .strip__track:has(> :nth-child(6):last-child), .strip__track:has(> :nth-child(7):last-child) {
    display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .strip__track::-webkit-scrollbar { display: none; }
  .strip__item { flex: none; width: clamp(150px, 38vw, 220px); scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .rooms-x__title { font-size: clamp(3.2rem, 15vw, 4.6rem); }
  .room-x { padding-block: 3rem; }
  .room-x__media, .room-x--flip .room-x__media { margin-inline: calc(var(--gutter) * -1); justify-self: stretch; width: auto; }   /* every room edge to edge, the flipped ones too */
  .room-x__photo { border-radius: 0; box-shadow: none; }
  .room-x__info, .room-x--flip .room-x__info { grid-template-columns: 1fr; }
  .room-x__info > * { grid-column: 1 !important; grid-row: auto !important; }
  .room-x__name { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
  .spec-sheet > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .strip__rail { margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding-inline: var(--gutter); }
  .strip__track { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .strip__item { width: 58vw; }
  .scale__boxes { --unit: 7.5rem; }
  .wing { padding: 1.25rem; }
}

/* ---- House & garden (cream) ----------------------------------------------------- */
.house__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.house__title { max-width: 12ch; }
.house__aside .body-lg { color: var(--fg-muted); max-width: 46ch; }
.house__switch { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.house__list.tabs__list {
  display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--cream-2);
}
.house__list .tabs__tab {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.2rem; border-radius: var(--r-pill);
  color: var(--fg-muted); transition: background-color .4s var(--ease-out), color .3s;
}
.house__list .tabs__tab::after { display: none; }
.house__list .tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.house__sun, .house__moon { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.house__sun { background: var(--hot-soft); box-shadow: 0 0 0 3px rgba(255, 179, 122, .25); }
.house__moon { background: transparent; box-shadow: inset -3px -1px 0 0 currentColor; transform: rotate(-20deg); }
.house__hint { color: var(--fg-muted); }
.house__panel { padding-top: 0; }

.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1rem); }
.mosaic__item > .media { display: block; height: 100%; }
.mosaic__item--a { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.mosaic__item--a > .media { aspect-ratio: auto; }
.mosaic__item--b { grid-column: 9 / span 4; grid-row: 1; }
.mosaic__item--c { grid-column: 9 / span 4; grid-row: 2; }
.mosaic__item--d { grid-column: 1 / span 4; }
.mosaic__item--e { grid-column: 5 / span 4; }
.mosaic__item--f { grid-column: 9 / span 4; }
/* dusk photos are 907 px wide: keep them at or below their pixel size */
.mosaic--dusk { max-width: 1340px; margin-inline: auto; }
.mosaic--dusk .mosaic__item--d { grid-column: 1 / span 6; }
.mosaic--dusk .mosaic__item--e { grid-column: 7 / span 6; }
.mosaic--dusk .mosaic__item--d > .media, .mosaic--dusk .mosaic__item--e > .media { --ratio: 16 / 9; }
.mosaic .media__caption { text-shadow: 0 1px 10px rgba(15, 13, 12, .85); }
.mosaic .media { box-shadow: 0 24px 50px -30px rgba(15, 13, 12, .6); }
@media (max-width: 760px) {
  .house__head { grid-template-columns: 1fr; }
  .house__switch { flex-direction: column; align-items: stretch; }
  .house__list.tabs__list { display: flex; }
  .house__list .tabs__tab { flex: 1; justify-content: center; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__item, .mosaic--dusk .mosaic__item--d, .mosaic--dusk .mosaic__item--e { grid-column: auto; grid-row: auto; }
  .mosaic__item--a { grid-column: 1 / -1; }
  .mosaic__item--a > .media { aspect-ratio: 4 / 3.4; }
  .mosaic--dusk .mosaic__item--a > .media { aspect-ratio: 3 / 2; }
  .mosaic--dusk .mosaic__item--d > .media, .mosaic--dusk .mosaic__item--e > .media { --ratio: 3 / 2; }
  .mosaic__item--f { grid-column: 1 / -1; }
  .mosaic__item--f > .media { --ratio: 16 / 9; }
}

/* ---- Visit ------------------------------------------------------------------------ */
.visit-x { background: var(--ink); border-top: 1px solid var(--line); }
.visit-x__anchor { position: absolute; top: 0; left: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.visit-x__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.visit-x__copy { display: grid; gap: clamp(1.4rem, 2.6vw, 2rem); justify-items: start; }
.visit-x__address { font-style: normal; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 360; }
.visit-x__clock { display: grid; gap: .5rem; padding: 1rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--ink-2); }
.visit-x__clock-label { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); }
.visit-x__time { font-family: var(--font-mono); font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--cream); }
.visit-x__list { display: grid; width: 100%; margin: 0; border-top: 1px solid var(--rule); }
.visit-x__list > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.visit-x__list dt { color: var(--muted); padding-top: .2em; }
.visit-x__list dd { margin: 0; font-size: 1.05rem; }
.visit-x__map-wrap { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 0 clamp(2rem, 6vw, 5rem); }
.visit-x__map { --ratio: 4 / 3.2; box-shadow: var(--shadow-2); }
.visit-x__sea {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl;
  color: rgba(124, 204, 191, .75); letter-spacing: .32em; font-size: .62rem; pointer-events: none;
}
.visit-x__photo { position: absolute; left: 0; top: 0; z-index: 2; width: min(38%, 300px); box-shadow: var(--shadow-2), 0 0 0 6px var(--ink); pointer-events: none; }
.visit-x__map.is-playing ~ .visit-x__photo { display: none; }
@media (pointer: coarse) { .visit-x__list dd a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 1000px) {
  .visit-x__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .visit-x__map-wrap { padding: 2.25rem 0 0 1.25rem; }
  .visit-x__photo { width: 40%; }
  .visit-x__list > div { grid-template-columns: 1fr; gap: .25rem; }
  .visit-x__ctas { width: 100%; }
  .visit-x__ctas .btn { flex: 1 1 100%; }
}