/* 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(--display); /* paragraphs are set in the display face; mono is for labels */
  font-size: 15px;
  line-height: 1.55;
  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-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-button:hover,
.more-button:focus-visible { color: var(--ink); }
.more-button .plus { align-self: center; color: var(--ink); }

/* Details sit open on the page: a mono label over a short paragraph or two. */
.detail { max-width: 460px; }
.detail h3 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.detail p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
}

/* Format: the day in four words. On the house each one names its room; phones list them under the headline. */
.beats { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.beats li { display: flex; flex-direction: column; gap: 8px; font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--ink); }
.beats .beat-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-50); }
.step-format .support { max-width: 420px; }

/* ---------- 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 { 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 800ms 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); }
@media (min-width: 701px) { .tour[data-at="camp"] .facade-move { transform: translateX(-5%) scale(0.6); } } /* the headline takes the top left, as on every step */
.tour[data-at="request"] .facade-move { transform: translateX(-5%) scale(0.45); }
.tour[data-at="studio"]:not([data-from="format"]):has(.step-studio[data-state="shown"]) .facade { visibility: hidden; }
.tour:not([data-at="studio"]) .facade { animation: fade-in 400ms var(--ex) both; }
.tour[data-from="format"][data-at="studio"] .facade-push { animation: push 700ms 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: 52.5%; top: 26.5%; height: 16.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 550ms var(--ex) 50ms both; }
.tour[data-intro] .c-lower { animation: wipe-y 650ms var(--ex) 250ms both; }
.tour[data-intro] .c-steps { animation: wipe-y 330ms steps(3, end) 400ms both; }
.tour[data-intro] .c-upper-left { animation: wipe-y 600ms var(--ex) 520ms both; }
.tour[data-intro] .c-upper-right { animation: wipe-y 600ms var(--ex) 600ms both; }
.tour[data-intro] .c-balcony { animation: wipe-x 600ms steps(28, end) 770ms both; }
.tour[data-intro] .c-plants-left { animation: wipe-y 700ms var(--ex) 900ms both; }
.tour[data-intro] .c-plants-right { animation: wipe-y 700ms var(--ex) 980ms 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(18.4px, 1.1cqw); /* drawn at 0.6 scale, so it lands at 11px or more */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.room i { font-style: normal; color: var(--ink-50); margin-right: 1em; }
.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 700ms var(--io) both; }
.tour[data-at="format"] .room b { animation: fade-up-in 500ms var(--ex) both; }
.tour[data-intro] { --build: 1100ms; }
.tour[data-at="format"] .room-1 b, .tour[data-at="format"] .room-1::before { animation-delay: calc(var(--build, 0ms) + 350ms); }
.tour[data-at="format"] .room-2 b, .tour[data-at="format"] .room-2::before { animation-delay: calc(var(--build, 0ms) + 450ms); }
.tour[data-at="format"] .room-3 b, .tour[data-at="format"] .room-3::before { animation-delay: calc(var(--build, 0ms) + 550ms); }
.tour[data-at="format"] .room-4 b, .tour[data-at="format"] .room-4::before { animation-delay: calc(var(--build, 0ms) + 650ms); }

/* Wide screens name the beats on the rooms, so the list under the headline is read from here only.
   Short screens keep the list: there the room labels would shrink below 11px with the house. */
@media (min-width: 701px) and (min-aspect-ratio: 3001/2000) and (min-height: 700px) {
  .tour.is-tour .step-format .beats { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 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,
.tour .camp-copy h1 { font-size: clamp(44px, 4.4vw, 64px); }

/* Camp: the headline sits top left like every step, over the house. */
.camp-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
  padding: max(132px, 18svh) 40px 72px;
}
.camp-copy .tour-cta { min-height: 52px; padding: 0 20px; font-size: 11px; }
/* The hero button is symbols only: a short arrow, then the house mark. */
.camp-copy .tour-cta.cta-mark { min-width: 0; padding: 0 18px; gap: 12px; }
.cta-mark .house { flex: none; }

/* 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; }
@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 550ms var(--ex) 150ms both; }
.step-studio[data-state="entering"] .c-props { animation: wipe-x 550ms var(--ex) 230ms both; }
.step-studio[data-state="entering"] .c-stairs { animation: wipe-y 550ms steps(8, end) 260ms both; }
.step-studio[data-state="entering"] .c-tower-left { animation: wipe-y 600ms var(--ex) 320ms both; }
.step-studio[data-state="entering"] .c-tower-right { animation: wipe-y 600ms var(--ex) 380ms both; }
.step-studio[data-state="entering"] .c-worktop { animation: wipe-x 500ms var(--ex) 520ms both; }
.step-studio[data-state="entering"] .c-screen { animation: wipe-y 550ms var(--ex) 580ms both; }
.tour[data-from="format"] .step-studio[data-state="entering"] { animation: aperture 600ms var(--io) both; }
/* Coming back to the studio (or landing on it) it fades in over the house, with no build. */
.tour:not([data-from="format"]) .step-studio[data-state="entering"] { animation: fade-in 450ms var(--ex) both; }
.tour:not([data-from="format"]) .step-studio[data-state="entering"] .cover { display: none; }

/* 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; }
.length .arrow { flex: none; transition: transform 300ms var(--ex); }
.length:hover .arrow,
.length:focus-visible .arrow { transform: translateX(6px); }

/* 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 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* screen readers hear it; the heading shows it */
.inquiry[data-done] [data-part="review"] .count { display: none; }
/* 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 800ms var(--ex) 40ms both; }
.step-request[data-received] .line + .line > span { animation-delay: 110ms; }
.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 500ms 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; }
.readout { margin: 0; min-height: 1.7em; font-family: var(--mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink-70); }
.readout:empty { visibility: hidden; } /* keeps its line, so picking a day moves nothing */
.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 {
  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 ---------- */
/* The words lead: they start as the page turns, while the house is still moving behind them. */
.step[data-state="entering"] .line > span { animation: line-in 800ms var(--ex) calc(var(--d, 0ms) + 40ms) both; }
.step[data-state="entering"] .line + .line > span { animation-delay: calc(var(--d, 0ms) + 110ms); }
.step[data-state="entering"] :is(.support, .detail, .more-button, .lengths, .inquiry, .tour-back) { animation: fade-up-in 600ms var(--ex) calc(var(--d, 0ms) + 180ms) both; }
.step[data-state="entering"] .beats li { animation: fade-up-in 600ms var(--ex) calc(var(--d, 0ms) + 160ms + var(--i, 0) * 60ms) both; }
.beats li:nth-child(2) { --i: 1; }
.beats li:nth-child(3) { --i: 2; }
.beats li:nth-child(4) { --i: 3; }
.step-format[data-state="entering"] .support { animation-delay: calc(var(--d, 0ms) + 380ms); }
.step[data-state="entering"] .actions { animation: fade-up-in 600ms var(--ex) calc(var(--d, 0ms) + 240ms) both; }
.step[data-state="entering"] .tour-cta { animation: draw-box 700ms var(--io) calc(var(--d, 0ms) + 240ms) both; }
.step[data-state="entering"] .length { animation: draw-box 700ms var(--io) calc(var(--d, 0ms) + 140ms) both; }
.step[data-state="entering"] .length + .length { animation-delay: calc(var(--d, 0ms) + 210ms); }
.step[data-state="entering"] .length-price > span { animation: line-in 900ms var(--ex) calc(var(--d, 0ms) + 280ms) both; }
.step[data-state="entering"] .length + .length .length-price > span { animation-delay: calc(var(--d, 0ms) + 360ms); }
.tour[data-dir="back"] .step[data-state="entering"] .line > span { animation-name: line-in-back; }
.step[data-state="leaving"] .line > span { animation: line-out 320ms var(--in) both; }
.step[data-state="leaving"] :is(.support, .detail, .beats, .more-button, .actions, .lengths, .inquiry, .tour-back) { animation: fade-out 260ms var(--in) both; }
.step-studio { --d: 250ms; }
.tour[data-from="format"] .step-studio { --d: 350ms; }
.tour[data-intro] :is(.step-format, .step-offer) { --d: 300ms; }
.part:not([hidden]) { animation: fade-up-in 420ms var(--ex) both; }

/* Camp intro on first arrival: the words come in as the house starts to draw, not after it. */
.tour[data-intro] .step-camp .line > span { animation: line-in 900ms var(--ex) 450ms both; }
.tour[data-intro] .step-camp .line + .line > span { animation-delay: 530ms; }
.tour[data-intro] .step-camp .support { animation: fade-up-in 700ms var(--ex) 700ms both; }
.tour[data-intro] .step-camp .tour-cta { animation: draw-box 800ms var(--io) 800ms both; }
.labels-page:has(.tour[data-intro]:not([data-from="intro"])) .header-request { animation: fade-in 600ms var(--ex) 1000ms both; }

@keyframes wipe-x { to { transform: scaleX(0); } }
@keyframes wipe-y { to { transform: scaleY(0); } }
@keyframes push { 65% { opacity: 1; } to { transform: scale(7); opacity: 0; } }
@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); } }

/* ---------- Variant D: the logo becomes the house, one page per scroll ---------- */
/* The first page is the logo alone. Its seven strokes then stretch into the house's outline and stay
   there as its lines; the drawing builds inside them the way it always has. */
.ml {
  position: absolute;
  display: none;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  transition: left 750ms var(--io), top 750ms var(--io), width 750ms var(--io), rotate 750ms var(--io), height 750ms var(--io), margin 750ms var(--io);
}
/* Past the logo page the wall strokes fade out after the morph: drawn to the ground they would cut through the plants. */
.tour.is-tour:not([data-at="intro"]) :is(.ml-wall-l, .ml-wall-r) { opacity: 0; transition-property: left, top, width, rotate, height, margin, opacity; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 750ms; transition-duration: 750ms, 750ms, 750ms, 750ms, 750ms, 750ms, 400ms; }
.tour.is-tour .ml { display: block; }
.ml-wall-l { left: 15.59cqw; top: 4.84cqh; width: 43.82cqw; rotate: 90deg; }
.ml-roof-l { left: 15.59cqw; top: 4.84cqh; width: 33.2cqw; rotate: 0deg; }
.ml-roof-r { left: 47.98cqw; top: 1.33cqh; width: 34.99cqw; rotate: 0deg; }
.ml-wall-r { left: 83.14cqw; top: 1.33cqh; width: 45.67cqw; rotate: 90deg; }
.ml-door-l { left: 52.42cqw; top: 51.76cqh; width: 15.01cqw; rotate: 90deg; }
.ml-door-r { left: 58.31cqw; top: 51.76cqh; width: 15.01cqw; rotate: 90deg; }
.ml-ground { left: 0; top: 88.44cqh; width: 100cqw; rotate: 0deg; }
.tour.is-tour[data-at="intro"] .ml { height: max(3px, 0.31cqw); margin-top: min(-1.5px, -0.155cqw); }
.tour.is-tour[data-at="intro"] .ml-wall-l { left: 43.36cqw; top: 43.14cqh; width: 7.77cqw; rotate: 90deg; }
.tour.is-tour[data-at="intro"] .ml-roof-l { left: 43.36cqw; top: 43.14cqh; width: 8.62cqw; rotate: -39.7deg; }
.tour.is-tour[data-at="intro"] .ml-roof-r { left: 50cqw; top: 32.64cqh; width: 8.62cqw; rotate: 39.7deg; }
.tour.is-tour[data-at="intro"] .ml-wall-r { left: 56.64cqw; top: 43.14cqh; width: 7.77cqw; rotate: 90deg; }
.tour.is-tour[data-at="intro"] .ml-door-l { left: 48.34cqw; top: 46.86cqh; width: 4.86cqw; rotate: 90deg; }
.tour.is-tour[data-at="intro"] .ml-door-r { left: 51.66cqw; top: 46.86cqh; width: 4.86cqw; rotate: 90deg; }
.tour.is-tour[data-at="intro"] .ml-ground { left: 48.34cqw; top: 51.49cqh; width: 3.32cqw; rotate: 0deg; }
/* On the logo page, and while its strokes become the outline, the drawing waits under its covers. */
.tour.is-tour:is([data-at="intro"], [data-from="intro"]) .facade .cover { display: block; }
.tour.is-tour .step-intro { min-height: 100svh; }

/* A small push leans the page toward the next one and it settles back; labels.js sets --lean. */
.tour.is-tour .facade,
.tour.is-tour .step:not([hidden]) { translate: 0 calc(var(--lean, 0) * -1px); transition: translate 520ms var(--ex); }
.tour.is-tour.is-leaning .facade,
.tour.is-tour.is-leaning .step:not([hidden]) { transition: none; }

/* Tracker: the H sits in the door; each page pulls one stroke out of it into the house (the walls
   from its uprights, the roof from its crossbar), and on Book the finished mark goes solid. */
.tracker { position: absolute; right: 43px; top: 92px; width: 35px; height: 35px; opacity: 0.75; pointer-events: none; transition: opacity 600ms var(--io); }
.tr {
  position: absolute;
  height: 1px;
  margin-top: -0.5px;
  background: var(--ink);
  transform-origin: 0 50%;
  transition: left 600ms var(--io), top 600ms var(--io), width 600ms var(--io), rotate 600ms var(--io), opacity 600ms var(--io);
}
.tr-h-l { left: 12.8px; top: 19.6px; width: 12.8px; rotate: 90deg; }
.tr-h-r { left: 21.2px; top: 19.6px; width: 12.8px; rotate: 90deg; }
.tr-h-x { left: 12.8px; top: 25.9px; width: 8.5px; rotate: 0deg; }
.tr-wall-l { left: 12.8px; top: 19.6px; width: 12.8px; rotate: 90deg; opacity: 0; }
.tr-wall-r { left: 21.2px; top: 19.6px; width: 12.8px; rotate: 90deg; opacity: 0; }
.tr-roof-l { left: 12.8px; top: 25.9px; width: 4.2px; rotate: 0deg; opacity: 0; }
.tr-roof-r { left: 17px; top: 25.9px; width: 4.2px; rotate: 0deg; opacity: 0; }
.labels-page:is([data-at="camp"], [data-at="format"], [data-at="studio"], [data-at="offer"], [data-at="request"]) .tr-wall-l { left: 0; top: 14.4px; width: 20.4px; rotate: 90deg; opacity: 1; }
.labels-page:is([data-at="format"], [data-at="studio"], [data-at="offer"], [data-at="request"]) .tr-wall-r { left: 34px; top: 14.4px; width: 20.4px; rotate: 90deg; opacity: 1; }
.labels-page:is([data-at="studio"], [data-at="offer"], [data-at="request"]) .tr-roof-l { left: 0; top: 14.4px; width: 22.3px; rotate: -40.4deg; opacity: 1; }
.labels-page:is([data-at="offer"], [data-at="request"]) .tr-roof-r { left: 17px; top: 0; width: 22.3px; rotate: 40.4deg; opacity: 1; }
.labels-page[data-at="request"] .tracker { opacity: 1; }
.labels-page:not([data-at]) .tracker { display: none; } /* without labels.js there are no pages to count */
.labels-page[data-at="intro"] .tracker { opacity: 0; } /* the logo page is the mark itself */

/* ---------- Squarer screens: the words need the width, so the house sits under them ---------- */
@media (min-width: 701px) and (max-aspect-ratio: 3/2) {
  .tour.is-tour .facade { height: auto; }
  .tour:is([data-at="camp"], [data-at="format"], [data-at="offer"]) .facade-move { transform: scale(0.45); transform-origin: 50% 100%; }
  :is(.step-format, .step-offer) .step-copy, .camp-copy { padding-bottom: calc(42svh + 32px); }
  .room b { display: none; } /* the beats sit under the headline here, so the rooms go unlabeled */
}
@media (min-width: 701px) and (max-height: 699px) { .room b { display: none; } }

/* ---------- Narrow screens: copy above, art below ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  /* 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; }
  .tracker { right: 27px; top: 80px; }
  .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 { padding: 104px 24px 0; gap: 18px; }
  .tour .camp-copy h1 { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.12; }
  .tour .camp-copy h1 .line > span { white-space: nowrap; } /* one sentence per line */
  .tour:is([data-at="format"], [data-at="offer"]) .facade-move { transform: scale(0.47); transform-origin: 50% 100%; }
  /* Where the words run past the screen, the house sits under them instead of behind them. */
  .tour.is-tour .facade { height: auto; }
  :is(.step-format, .step-offer) .step-copy { padding-bottom: calc(52vw + 8px); }
  .beats { gap: 12px 22px; }
  .beats li { font-size: 26px; }
  .detail p { font-size: 14px; }
  .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:not(:has(.is-picked, [tabindex="0"])) { display: none; } /* shown once a picked run or the keyboard reaches it */
  .calendar-months { gap: 20px; }
  .gear-head { position: sticky; top: -88px; z-index: 2; margin: -88px -24px 0; padding: 88px 24px 20px; background: var(--paper); }
  .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 */
}