/* Labels tour. Flat white line art on black; drama comes from masks and motion.
   Without labels.js (.is-tour absent) every step is a plain stacked section. */

.labels-page {
  --ex: cubic-bezier(0.16, 1, 0.3, 1);
  --in: cubic-bezier(0.7, 0, 0.84, 0);
  --io: cubic-bezier(0.76, 0, 0.24, 1);
  position: relative;
  min-height: 100svh;
  background: var(--paper);
}
.labels-page .top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-request {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink-35);
  background: var(--paper);
  padding: 11px 16px;
  transition: background 200ms var(--ex), color 200ms var(--ex), border-color 200ms var(--ex);
}
.header-request:hover,
.header-request:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.labels-page:has(.tour[data-at="request"]) .header-request { visibility: hidden; }

.tour { position: relative; overflow-x: clip; }
.tour [hidden] { display: none !important; }

/* ---------- Shared type ---------- */
.tour h1,
.tour h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  outline: none;
}
.tour .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.tour .line > span { display: block; }
.tour .support {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}
.tour .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tour-cta { gap: 28px; }
.tour-cta .arrow { flex: none; transition: transform 300ms var(--ex); }
.tour-cta:hover .arrow,
.tour-cta:focus-visible .arrow { transform: translateX(6px); }
.tour-back,
.tour-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--ink-20);
  align-self: flex-start;
}
.tour-back:hover,
.tour-link:hover,
.tour-back:focus-visible,
.tour-link:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }

.more { max-width: 440px; }
.more summary,
.more-button {
  list-style: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: 6px 0;
}
.more summary::-webkit-details-marker { display: none; }
.more .plus { align-self: center; color: var(--ink); transition: transform 300ms var(--ex); }
.more[open] .plus { transform: rotate(45deg); }
.more summary:hover,
.more summary:focus-visible,
.more-button:hover,
.more-button:focus-visible { color: var(--ink); }
.more-button .plus { align-self: center; color: var(--ink); }
.more p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-70);
  animation: fade-up-in 500ms var(--ex) both;
}

/* ---------- Frames: art keeps its drawn proportions and bleeds off the bottom ---------- */
.frame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 177.7svh;
  translate: -50% 0;
  container-type: size;
}
.facade-frame,
.camp-copy { height: 93.2svh; }
.studio-frame { width: 194svh; height: 100svh; translate: -50% 0; }
@media (max-aspect-ratio: 194/100) and (min-width: 701px) {
  .studio-frame { width: 100vw; height: 51.5vw; translate: -50% 0; mask-image: linear-gradient(to bottom, transparent, #000 15%); }
}
@media (max-aspect-ratio: 3/2) and (min-width: 701px) { .studio-frame { width: 150vw; height: 77.3vw; translate: -50% 0; } }
.frame .plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.cover {
  position: absolute;
  display: none;
  background: var(--paper);
  transform-origin: top;
}

/* ---------- Facade backdrop ---------- */
.facade {
  position: absolute;
  inset: 0;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
}
.tour:not(.is-tour) .facade { position: relative; }
.facade-move,
.facade-push { position: absolute; inset: 0; }
.facade-move {
  transform-origin: 100% 100%;
  transition: transform 1200ms var(--io);
}
.facade-push { transform-origin: 55.35% 66%; }
.tour:is([data-at="format"], [data-at="offer"]) .facade-move { transform: translateX(-5%) scale(0.6); }
.tour[data-at="request"] .facade-move { transform: translateX(-5%) scale(0.45); }
.tour[data-at="studio"]:not([data-from="format"]) .facade { visibility: hidden; }
.tour:not([data-at="studio"]) .facade { animation: fade-in 600ms var(--ex) both; }
.tour[data-from="format"][data-at="studio"] .facade-push { animation: push 1000ms var(--in) both; }

.door { position: absolute; left: 52.4%; top: 51.7%; width: 5.9%; height: 28.5%; }

/* Facade intro: the house assembles from the ground up. */
.c-ground { left: 0; width: 100%; top: 87.6%; height: 12.4%; transform-origin: right; }
.c-lower { left: 15%; width: 69%; top: 41.5%; height: 46.1%; }
.c-steps { left: 38%; width: 22.5%; top: 80%; height: 7.6%; }
.c-upper-left { left: 15%; width: 34%; top: 4%; height: 39%; }
.c-upper-right { left: 47.5%; width: 36.5%; top: 0; height: 27.5%; transform-origin: bottom; }
.c-balcony { left: 35%; width: 50.5%; top: 26.5%; height: 15.5%; transform-origin: right; }
.c-plants-left { left: 6.5%; width: 30.5%; top: 60%; height: 28%; }
.c-plants-right { left: 60.5%; width: 31%; top: 70%; height: 18%; }
.tour.is-tour[data-intro] .facade .cover { display: block; }
.tour[data-intro] .c-ground { animation: wipe-x 900ms var(--ex) 100ms both; }
.tour[data-intro] .c-lower { animation: wipe-y 1100ms var(--ex) 450ms both; }
.tour[data-intro] .c-steps { animation: wipe-y 540ms steps(3, end) 700ms both; }
.tour[data-intro] .c-upper-left { animation: wipe-y 1000ms var(--ex) 950ms both; }
.tour[data-intro] .c-upper-right { animation: wipe-y 1000ms var(--ex) 1100ms both; }
.tour[data-intro] .c-balcony { animation: wipe-x 1000ms steps(28, end) 1400ms both; }
.tour[data-intro] .c-plants-left { animation: wipe-y 1200ms var(--ex) 1650ms both; }
.tour[data-intro] .c-plants-right { animation: wipe-y 1200ms var(--ex) 1780ms both; }

/* Rooms: four outlines draw over the windows when the format is explained. */
.room {
  position: absolute;
  display: none;
}
.room::before {
  content: '';
  position: absolute;
  inset: -0.7cqw;
  border: 1px solid var(--ink);
}
.room b {
  position: absolute;
  left: -0.7cqw;
  bottom: calc(100% + 1.4cqw);
  font-family: var(--mono);
  font-weight: 400;
  font-size: max(11px, 1.1cqw);
  letter-spacing: 0.2em;
  color: var(--ink);
}
.room-1 { left: 20.6%; top: 15.7%; width: 11.2%; height: 13.2%; }
.room-2 { left: 58.2%; top: 15.7%; width: 15.3%; height: 11.8%; }
.room-3 { left: 19%; top: 48%; width: 10.6%; height: 22.5%; }
.room-4 { left: 62.7%; top: 47.6%; width: 16.2%; height: 22%; }
.tour.is-tour[data-at="format"] .room { display: block; }
.tour[data-at="format"] .room::before { animation: draw-corner 900ms var(--io) both; }
.tour[data-at="format"] .room b { animation: fade-up-in 600ms var(--ex) both; }
.tour[data-intro] { --build: 2200ms; }
.tour[data-at="format"] .room-1 b, .tour[data-at="format"] .room-1::before { animation-delay: calc(var(--build, 0ms) + 900ms); }
.tour[data-at="format"] .room-2 b, .tour[data-at="format"] .room-2::before { animation-delay: calc(var(--build, 0ms) + 1050ms); }
.tour[data-at="format"] .room-3 b, .tour[data-at="format"] .room-3::before { animation-delay: calc(var(--build, 0ms) + 1200ms); }
.tour[data-at="format"] .room-4 b, .tour[data-at="format"] .room-4::before { animation-delay: calc(var(--build, 0ms) + 1350ms); }

/* ---------- Steps ---------- */
.tour.is-tour .step { position: relative; z-index: 1; min-height: 100svh; }
.step-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 560px;
  padding: max(132px, 18svh) 40px 72px;
}
.step-copy h2 { font-size: clamp(48px, 5.6vw, 84px); }

/* Camp: copy sits in the open wall left of the entry door, measured off the comp. */
.camp-copy { pointer-events: none; }
.tour .camp-copy > * { pointer-events: auto; margin-left: 32.4cqw; width: 21cqw; }
.tour .camp-copy h1 { margin-top: 50.2cqh; font-size: max(30px, 2.1cqw); line-height: 1.12; }
.tour .camp-copy .support { margin-top: 0.5cqw; font-size: max(11px, 0.82cqw); letter-spacing: 0.02em; }
.camp-copy .actions { margin-top: 1.9cqw; }
.camp-copy .tour-cta {
  min-height: max(48px, 3.47cqw);
  min-width: 15.6cqw;
  padding: 0 max(20px, 1.4cqw);
  font-size: max(11px, 0.82cqw);
  gap: max(24px, 2.6cqw);
}

/* Studio: the desk room, entered through the door. */
.step-studio { background: var(--paper); overflow: hidden; }
.studio { position: absolute; inset: 0; pointer-events: none; }
.step-studio .step-copy { padding-top: max(108px, 12svh); gap: 18px; }
.step-studio .tour-back { align-self: center; }
.step-studio h2 { font-size: clamp(40px, 3.9vw, 60px); }
@media (min-width: 701px) and (max-width: 1000px) {
  .step-studio .tour-cta { padding: 0 10px; gap: 12px; font-size: 11px; letter-spacing: 0.16em; }
}
.c-floor { left: 0; width: 100%; top: 72%; height: 28%; }
.c-props { left: 0; width: 14%; top: 32%; height: 68%; transform-origin: left; }
.c-tower-left { left: 17.5%; width: 20%; top: 35%; height: 54%; }
.c-tower-right { left: 61.5%; width: 20%; top: 35%; height: 54%; }
.c-worktop { left: 34%; width: 31.5%; top: 45%; height: 13%; transform-origin: right; }
.c-screen { left: 37%; width: 25%; top: 4%; height: 42%; transform-origin: bottom; }
.c-stairs { left: 77.5%; width: 22.5%; top: 0; height: 72%; transform-origin: bottom; }
.step-studio[data-state="entering"] .cover { display: block; }
.step-studio[data-state="entering"] .c-floor { animation: wipe-y 900ms var(--ex) 300ms both; }
.step-studio[data-state="entering"] .c-props { animation: wipe-x 900ms var(--ex) 450ms both; }
.step-studio[data-state="entering"] .c-stairs { animation: wipe-y 900ms steps(8, end) 500ms both; }
.step-studio[data-state="entering"] .c-tower-left { animation: wipe-y 1000ms var(--ex) 600ms both; }
.step-studio[data-state="entering"] .c-tower-right { animation: wipe-y 1000ms var(--ex) 700ms both; }
.step-studio[data-state="entering"] .c-worktop { animation: wipe-x 800ms var(--ex) 950ms both; }
.step-studio[data-state="entering"] .c-screen { animation: wipe-y 900ms var(--ex) 1050ms both; }
.tour[data-from="format"] .step-studio[data-state="entering"] { animation: aperture 850ms var(--io) both; }

/* Offer */
.lengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(560px, 100%); }
.length {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 22px 22px 26px;
  border: 1px solid var(--ink-35);
  color: var(--ink);
  transition: background 240ms var(--ex), color 240ms var(--ex), border-color 240ms var(--ex);
}
.length:hover,
.length:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.length-days {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.length-price { display: block; overflow: hidden; font-family: var(--display); font-weight: 300; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; }
.length-price > span { display: block; }

/* Request */
.step-request .step-copy { max-width: 640px; }
.inquiry { width: 100%; display: flex; flex-direction: column; gap: 28px; margin-top: 12px; }
.part { display: flex; flex-direction: column; gap: 16px; }
.part > label,
.part .count,
.length-pick legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.part .count { color: var(--ink-50); margin: 0 14px 0 0; outline: none; }
.part > label .count { display: inline; }
.part input:not([type="radio"]) {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-35);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  padding: 6px 0 12px;
  outline: none;
  transition: border-color 200ms var(--ex);
}
.part input:not([type="radio"])::placeholder { color: var(--ink-50); }
.part input:not([type="radio"]):focus { border-bottom-color: var(--ink); }
.part input:not([type="radio"]):user-invalid { border-bottom-style: dashed; }
.length-pick { border: 0; margin: 0; padding: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.length-pick legend { float: left; margin-right: 12px; }
.length-pick label {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--ink-35);
  padding: 12px 16px;
  cursor: pointer;
}
.length-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.length-pick label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.length-pick label:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 4px; }
.review { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.review > div {
  display: grid;
  grid-template-columns: 9.5em 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.review dt,
.review .edit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.review dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.review .edit { background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.review .edit:hover,
.review .edit:focus-visible { color: var(--ink); }
.form-actions { display: flex; align-items: center; gap: 28px; }
.form-status { margin: 0; min-height: 1.6em; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.inquiry[data-done] .part input { border-bottom-color: var(--ink-10); }
.inquiry[data-done] [data-edit],
.inquiry[data-done] [data-part-back] { visibility: hidden; }
.inquiry[data-done] [data-submit] { display: none; }
.inquiry[data-done] .form-status { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-70); }
.inquiry[data-done] [data-part="review"] .count { visibility: hidden; }
/* Received: the heading swaps to the confirmation and builds in like every arrival. */
.step-request[data-received] .step-copy > .support { display: none; }
.step-request[data-received] .line > span { animation: line-in 1000ms var(--ex) 80ms both; }
.step-request[data-received] .line + .line > span { animation-delay: 170ms; }
.step-request[data-received] h2 { font-size: clamp(40px, 4.2vw, 64px); }
.inquiry[data-done] .form-actions { display: none; }

/* Gear sheet: a full black page over the studio; the list draws in group by group. */
.gear {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(96px, 12svh) 40px 64px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
}
.gear::backdrop { background: var(--paper); }
.gear[open] { animation: sheet-in 700ms var(--io) both; }
.gear-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.gear-head h2 { font-size: clamp(44px, 4.6vw, 72px); }
.gear-head form { grid-column: 2; }
.gear-head .tour-link { font-size: 13px; color: var(--ink); }
.gear-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, 30%), 1fr)); /* 3 x 3 when wide */
  gap: 36px 40px;
  padding-top: 36px;
}
.gear-group h3 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.gear-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gear-group li { font-size: 17px; line-height: 1.35; }
.gear[open] .gear-group { animation: fade-up-in 700ms var(--ex) both; }
.gear[open] .gear-group:nth-child(2) { animation-delay: 60ms; }
.gear[open] .gear-group:nth-child(3) { animation-delay: 120ms; }
.gear[open] .gear-group:nth-child(4) { animation-delay: 180ms; }
.gear[open] .gear-group:nth-child(5) { animation-delay: 240ms; }
.gear[open] .gear-group:nth-child(6) { animation-delay: 300ms; }
.gear[open] .gear-group:nth-child(7) { animation-delay: 360ms; }
.gear[open] .gear-group:nth-child(8) { animation-delay: 420ms; }
.gear[open] .gear-group:nth-child(9) { animation-delay: 480ms; }
@keyframes sheet-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Request calendar: taken days are struck through; the picked run fills. */
.calendar { display: flex; flex-direction: column; gap: 16px; }
.calendar-nav { display: flex; justify-content: space-between; }
.calendar-nav button:disabled { visibility: hidden; }
.calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.calendar-title {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-dow { font-family: var(--mono); font-size: 11px; color: var(--ink-50); text-align: center; padding-bottom: 6px; }
.calendar-day {
  aspect-ratio: 1;
  min-height: 36px;
  background: none;
  border: 1px solid transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--ex), color 160ms var(--ex), border-color 160ms var(--ex);
}
.calendar-day:hover:not([aria-disabled]) { border-color: var(--ink-50); }
.calendar-day:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.calendar-day[aria-disabled] { color: var(--ink-35); cursor: default; }
.calendar-day.is-taken { text-decoration: line-through; text-decoration-color: var(--ink-50); }
.calendar-day.is-picked { background: var(--ink); color: var(--paper); animation: fade-in 260ms var(--ex) both; }
.calendar.is-asking .calendar-grid { animation: nudge 420ms var(--io); }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Step motion ---------- */
.step[data-state="entering"] .line > span { animation: line-in 1000ms var(--ex) calc(var(--d, 0ms) + 80ms) both; }
.step[data-state="entering"] .line + .line > span { animation-delay: calc(var(--d, 0ms) + 170ms); }
.step[data-state="entering"] :is(.support, .more, .more-button, .lengths, .inquiry, .tour-back) { animation: fade-up-in 800ms var(--ex) calc(var(--d, 0ms) + 320ms) both; }
.step[data-state="entering"] .actions { animation: fade-up-in 800ms var(--ex) calc(var(--d, 0ms) + 420ms) both; }
.step[data-state="entering"] .tour-cta { animation: draw-box 900ms var(--io) calc(var(--d, 0ms) + 420ms) both; }
.step[data-state="entering"] .length { animation: draw-box 900ms var(--io) calc(var(--d, 0ms) + 260ms) both; }
.step[data-state="entering"] .length + .length { animation-delay: calc(var(--d, 0ms) + 360ms); }
.step[data-state="entering"] .length-price > span { animation: line-in 1100ms var(--ex) calc(var(--d, 0ms) + 520ms) both; }
.step[data-state="entering"] .length + .length .length-price > span { animation-delay: calc(var(--d, 0ms) + 640ms); }
.tour[data-dir="back"] .step[data-state="entering"] .line > span { animation-name: line-in-back; }
.step[data-state="leaving"] .line > span { animation: line-out 480ms var(--in) both; }
.step[data-state="leaving"] :is(.support, .more, .more-button, .actions, .lengths, .inquiry, .tour-back) { animation: fade-out 380ms var(--in) both; }
.step-studio { --d: 700ms; }
.tour[data-from="format"] .step-studio { --d: 1050ms; }
.tour[data-intro] :is(.step-format, .step-offer) { --d: 1500ms; }
.part:not([hidden]) { animation: fade-up-in 520ms var(--ex) both; }

/* Camp intro on first arrival. */
.tour[data-intro] .step-camp .line > span { animation: line-in 1100ms var(--ex) 1650ms both; }
.tour[data-intro] .step-camp .line + .line > span { animation-delay: 1760ms; }
.tour[data-intro] .step-camp .support { animation: fade-up-in 900ms var(--ex) 2000ms both; }
.tour[data-intro] .step-camp .tour-cta { animation: draw-box 1000ms var(--io) 2150ms both; }
.labels-page:has(.tour[data-intro]) .header-request { animation: fade-in 800ms var(--ex) 2400ms both; }

@keyframes wipe-x { to { transform: scaleX(0); } }
@keyframes wipe-y { to { transform: scaleY(0); } }
@keyframes push { to { transform: scale(7); } }
@keyframes aperture { from { clip-path: var(--aperture, inset(50% 50% 50% 50%)); } to { clip-path: inset(0 0 0 0); } }
@keyframes line-in { from { transform: translateY(108%); } }
@keyframes line-in-back { from { transform: translateY(-108%); } }
@keyframes line-out { to { transform: translateY(-108%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes draw-box { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw-corner { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Narrow screens: copy above, art below ---------- */
@media (max-width: 700px) {
  /* The mark still links home; the header keeps room for the one route that matters here. */
  .labels-page .site-menu { display: none; }
  .header-request { padding: 9px 12px; font-size: 11px; white-space: nowrap; }
  .facade-frame { width: 210vw; height: 110vw; }
  .studio-frame { width: 150vw; height: 77.3vw; translate: -49.5% 0; mask-image: linear-gradient(to bottom, transparent, #000 15%); }
  .tour[data-at="request"] .facade { visibility: hidden; }
  .tour.is-tour .step-camp { display: flex; flex-direction: column; }
  .camp-copy {
    position: relative;
    left: auto;
    bottom: auto;
    translate: none;
    width: auto;
    height: auto;
    container-type: normal;
    padding: 104px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .tour .camp-copy > * { margin-left: 0; width: auto; }
  .tour .camp-copy h1 { margin-top: 0; font-size: 42px; }
  .tour .camp-copy .support { margin-top: 0; font-size: 11px; }
  .camp-copy .actions { margin-top: 4px; }
  .camp-copy .tour-cta { min-height: 52px; padding: 0 20px; font-size: 11px; }
  .tour:is([data-at="format"], [data-at="offer"]) .facade-move { transform: scale(0.47); transform-origin: 50% 100%; }
  .room b { display: none; } /* unreadable at the 0.47 house scale; the outlines carry the four rooms */
  .step-copy { padding: 104px 24px 48px; gap: 20px; }
  .gear { padding: 88px 24px 48px; }
  .calendar-months { grid-template-columns: 1fr; }
  .calendar-month + .calendar-month { display: none; }
  .gear-head { grid-template-columns: 1fr; }
  .gear-head form { grid-column: 1; grid-row: auto; }
  .step-studio { padding-bottom: 77.3vw; }
  .step-copy h2 { font-size: 44px; }
  .tour .line > span { text-wrap: balance; }
  .step-request[data-received] h2 { font-size: 38px; }
  .lengths { gap: 10px; }
  .length { padding: 16px 14px 18px; gap: 20px; }
  .length-price { font-size: 30px; }
  .review > div { grid-template-columns: 1fr auto; }
  .review dt { grid-column: 1 / -1; }
  .length-pick legend { float: none; margin: 0 0 12px; } /* above the chips, so 1–4 to 13–16 fit one row */
}