/* Home: the house in the hour you set, the island where the sun lands, the two coasts, three houses and their
   days, one arc drawn by scrolling, and the hours of light as the way in to a visit. */

/* ---------- 1. hero: a full-bleed panel, the photograph is the hour ---------- */
.hero {
  height: calc(100svh - 2 * var(--gutter)); min-height: 600px; max-height: 1100px;
  background: #b9bbc0; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.hero__bg img { object-position: 54% 62%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 14, 17, 0.26) 0%, rgba(12, 14, 17, 0) 24%, rgba(12, 14, 17, 0) 52%, rgba(12, 14, 17, 0.55) 100%);
}
.hero .guides { z-index: 2; }

.hero__giant {
  --w: min(560px, 38vw);
  position: absolute; z-index: 4; left: clamp(20px, 3.4vw, 52px); bottom: clamp(20px, 5vh, 54px); width: var(--w);
  color: #ffffff; --mark-hole: #10161c; filter: drop-shadow(0 20px 46px rgba(16, 18, 22, 0.45));
}
.hero__giant svg { width: 100%; height: auto; overflow: visible; }
.hero__chips {
  position: absolute; z-index: 5; left: clamp(20px, 3.4vw, 52px);
  bottom: calc(clamp(20px, 5vh, 54px) + min(560px, 38vw) / 3.351 + 16px);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero__chips .tag { position: static; height: 34px; padding: 0 14px; }
.hero__chip {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; color: #1c1d20; text-decoration: none;
  font-family: var(--mono); font-size: 0.65625rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: gap 250ms var(--ease);
}
.hero__chip b { font-weight: 700; }
.hero__chip span + span::before, .hero__chip b + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background: currentColor; opacity: 0.45; vertical-align: middle; }
.hero__chip svg { width: 13px; height: 13px; }
.hero__chip:hover { gap: 13px; }
/* the chips sit over the crosshairs: near-solid, so no guide line or mark shows through their words */
.hero__chips .glass, .masthead__chips .glass { background: #ffffff; }
html[data-theme="night"] .hero__chips .glass, html[data-theme="night"] .masthead__chips .glass { background: rgba(30, 32, 36, 0.92); }

/* the glass card: the line, and the instrument that moves the sun */
.hero__col {
  position: absolute; z-index: 5; right: clamp(16px, 3.2vw, 46px); bottom: clamp(24px, 5vh, 52px);
  width: min(470px, 38vw); padding: clamp(24px, 2.2vw, 36px); border-radius: 22px;
}
.hero__kicker { color: rgba(255, 255, 255, 0.86); margin-bottom: 12px; }
.hero__tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1rem + 1.7vw, 2.85rem); line-height: 1.04; letter-spacing: -0.005em; color: #ffffff; }
.hero__tagline em { display: block; font-style: italic; }
.hero__body { margin-top: 14px; max-width: 34ch; font-family: var(--mono); font-size: 0.65625rem; line-height: 1.75; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.hero__instrument { margin-top: clamp(14px, 2svh, 22px); padding-top: clamp(12px, 1.8svh, 18px); border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; gap: 6px; }
.hero__instrument > .readout { color: #ffffff; font-size: 0.65625rem; }
.hero .seasons { display: flex; width: 100%; }
.hero .seasons button { flex: 1; min-height: 30px; padding: 0 6px; font-size: 0.625rem; }
.hero__arc { margin-top: 2px; }
.hero__lit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.hero__lit p { display: grid; gap: 3px; }
.hero__lit .label { color: rgba(255, 255, 255, 0.82); }
.hero__names { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: #ffffff; text-wrap: balance; }
.hero__mini .island__orbit-line { opacity: 0; }

.hero__cue { position: absolute; z-index: 5; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.mouse { position: relative; width: 24px; height: 38px; border: 1.5px solid rgba(255, 255, 255, 0.78); border-radius: 14px; }
.mouse__wheel { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: #ffffff; transform: translateX(-50%); animation: wheel 1.7s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 25% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 11px); } 100% { opacity: 0; transform: translate(-50%, 13px); } }

/* the arrival: the photograph opens out of a smaller frame, the mark rises, the card settles */
html.js[data-motion="on"] .hero__bg { animation: hero-open 1.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.js[data-motion="on"] .hero__giant { animation: hero-rise 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
html.js[data-motion="on"] .hero__col, html.js[data-motion="on"] .hero__chips { animation: hero-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
html.js[data-motion="on"] .hero .guides .plus { animation: hero-plus 0.5s var(--ease) 0.8s both; }
@keyframes hero-open { from { clip-path: inset(9% 9% 9% 9% round 30px); transform: scale(1.14); } to { clip-path: inset(0 0 0 0 round 0); transform: none; } }
@keyframes hero-rise { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-plus { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (min-width: 821px) and (max-width: 1240px) {
  .hero__col { width: min(430px, 40vw); }
}
@media (min-width: 821px) and (max-height: 800px) {
  .hero__body { display: none; }
  .hero__tagline { font-size: clamp(1.8rem, 1rem + 1.4vw, 2.4rem); }
}

/* ---------- 2. the island: the dark map panel ---------- */
.isle {
  display: grid; grid-template-columns: minmax(270px, 3.5fr) minmax(0, 8.5fr); column-gap: clamp(24px, 3vw, 56px);
  height: calc(100svh - 2 * var(--gutter)); min-height: 640px; max-height: 1100px;
  padding: clamp(78px, 6.4vw, 96px) var(--pad) clamp(26px, 2.6vw, 40px);
}
.isle__side { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 0; }
.isle__title { display: grid; gap: 14px; }
.isle__lede { color: #b8b9be; font-size: 1rem; line-height: 1.55; max-width: 36ch; }
.isle__controls { display: grid; gap: 12px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--line); }
.isle__stage { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.isle__arc { margin-bottom: 6px; }
.isle__map { min-height: 0; container-type: size; display: grid; place-items: center; }
.isle__map > .island { width: min(100cqw, 100cqh * 1.3757); }
.isle .pin { height: 28px; font-size: 0.78125rem; padding: 0 12px 0 8px; }
.isle__foot { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.isle__lit { display: grid; gap: 6px; }
.isle__names { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: #ffffff; text-wrap: balance; }
.isle__credit { font-size: 0.75rem; color: var(--muted); }
.isle__credit a { color: #d7d8dc; text-underline-offset: 0.15em; }

/* ---------- 3. the coasts ---------- */
.coasts__lead { position: relative; max-width: min(820px, 100%); margin-bottom: clamp(36px, 5vw, 70px); font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.9rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; }
.type__ghost { visibility: hidden; }
.type__live { position: absolute; inset: 0; }
.type__caret { display: inline-block; width: 3px; height: 0.86em; margin-left: 5px; vertical-align: -1px; background: var(--ink); animation: caret 0.8s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.coasts__stage { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 5.4fr) minmax(0, 3.3fr); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.coast { position: relative; display: grid; gap: 14px; align-content: start; }
.coast__print { aspect-ratio: 5 / 4; }
.coast__chip { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.coast__title { margin-top: 6px; }
.coast__title a { text-decoration: none; }
.coast__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.coast__text { color: var(--muted); font-size: 0.9375rem; max-width: 36ch; }
.coast__houses { display: grid; margin-top: 2px; position: relative; z-index: 2; border-top: 1px solid var(--line); }
.coast__houses a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding 300ms var(--ease); }
.coast__houses .serif-line { font-size: 1.125rem; transition: opacity 200ms; }
.coast__houses a:hover { padding-left: 8px; }
.coast__houses a:hover .serif-line { opacity: 0.65; }
.coast__map { display: none; }

.coasts__island { position: relative; align-self: center; padding: 40px 0 34px; }
.coasts__hint { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.split__svg { width: 100%; height: auto; overflow: visible; display: block; }
.split__half { transition: transform 500ms var(--ease); }
.coasts__stage[data-lift="north"] .split__half--north { transform: translateY(-44px); }
.coasts__stage[data-lift="south"] .split__half--south { transform: translateY(44px); }
.split__half--north .split__land { fill: var(--stone); }
.split__half--south .split__land { fill: var(--paper-shade); }
.split__cut { stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.coasts .island__bin--lit { stroke: var(--ink); }
.split__dot { fill: var(--panel); stroke: var(--muted); stroke-width: 2.4; transition: fill 250ms, stroke 250ms; transform-box: fill-box; transform-origin: center; }
.split__dot.is-lit { fill: var(--lime); stroke: var(--ink); }
.split__dot.is-active { transform: scale(1.7); stroke: var(--ink); }

/* ---------- 4. three houses ---------- */
.three__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(20px, 2vw, 32px); align-items: start; }
.card { position: relative; display: grid; gap: 18px; }
.card__name { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.card__name a { text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__idx { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.card__idx span { opacity: 0.6; }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 0.65625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card__line { font-size: 1.375rem; line-height: 1.2; max-width: 30ch; text-wrap: pretty; }
.card .strip { margin: 8px 0 22px; }
.card__plate { display: block; }
.card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.card__foot { display: flex; align-items: center; gap: 18px; position: relative; z-index: 2; }

/* the lead: one big lime card */
.card--lead {
  grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0;
  min-height: clamp(460px, 40vw, 580px); border-radius: 22px; overflow: hidden; background: var(--lime); color: #1e2c08;
}
.card--lead .card__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(30px, 3.6vw, 60px); }
.card--lead .card__idx { color: #38470f; }
.card--lead .card__name { font-size: clamp(2.4rem, 1rem + 3vw, 4.25rem); color: #1e2c08; }
.card--lead .card__meta { color: #3d4c12; }
.card--lead .card__line { font-size: clamp(1.4rem, 1rem + 0.8vw, 1.85rem); color: #1e2c08; }
.card--lead .strip { --bar: rgba(35, 48, 10, 0.2); --bar-lit: #23300a; --head: #141517; margin-bottom: 26px; }
.card--lead .strip__axis { color: #3d4c12; }
.card--lead .strip__axis span::before { background: rgba(35, 48, 10, 0.3); }
.card--lead .price-pill { background: #141517; color: #ffffff; box-shadow: none; }
.card--lead.is-lit .price-pill { color: var(--lime); }
.card--lead .link-arrow { color: #1e2c08; }
.card--lead .card__plate { border-radius: 0; height: 100%; }
.card--lead .card__plate img { object-position: 50% 60%; }
.card--b { grid-column: 1 / span 6; grid-row: 2; }
.card--c { grid-column: 7 / span 6; grid-row: 2; margin-top: clamp(40px, 7vw, 120px); }
.card--b .card__plate, .card--c .card__plate { aspect-ratio: 16 / 11; }
.card--b .card__body, .card--c .card__body { display: grid; gap: 10px; padding: 4px 4px 0; }
.card--b .card__plate img { object-position: 40% 50%; }
.three__more { margin-top: clamp(28px, 3vw, 44px); display: flex; justify-content: center; }

/* ---------- 5. how it works ---------- */
.how .section-head { justify-items: center; text-align: center; }
.how__arc { width: 100%; height: auto; display: block; overflow: visible; margin-bottom: -2px; }
.how__track { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; }
.how__drawn { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.how__drop { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 5; }
.how__node { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; transition: fill 400ms, stroke 400ms; }
.how__node.is-lit { fill: var(--lime); stroke: var(--ink); }
.how__sun { fill: var(--lime); stroke: var(--ink); stroke-width: 2; }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 8px; }
.step { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; align-content: start; padding-top: 26px; }
html.js .step { opacity: 0.32; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
html.js .step.is-in, html.reveal-all .step { opacity: 1; transform: none; }
html[data-motion="off"] .step { opacity: 1 !important; transform: none !important; }
.step__node { display: none; }
.step__title { max-width: 16ch; }
.step__title .num { display: inline-block; margin-right: 0.2em; color: var(--muted); font-family: var(--mono); font-size: 0.6em; vertical-align: 0.25em; letter-spacing: 0; }
.step__text { color: var(--muted); max-width: 36ch; font-size: 0.96875rem; text-wrap: pretty; }
.step__object { margin-top: 12px; width: 100%; max-width: 320px; }
.note { padding: 20px 22px; background: var(--panel-soft); border-radius: var(--r-card); font-family: var(--serif); font-style: italic; font-size: 1.375rem; line-height: 1.25; text-align: left; transform: rotate(-1.2deg); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.35); }
.step__object--plan { padding: 16px; background: var(--panel-soft); border-radius: var(--r-card); }
.step__object--plan svg { width: 100%; max-width: 220px; margin-inline: auto; height: auto; }
.plan__wall { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.plan__wedge { fill: var(--lime-deep); opacity: 0.85; }
.plan__door { stroke: var(--panel-soft); stroke-width: 4; }
.titleblock { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ink); text-align: left; }
.titleblock > div { padding: 10px 14px 11px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; gap: 2px; }
.titleblock > div:nth-child(2n) { border-right: 0; }
.titleblock > div:nth-child(n + 3) { border-bottom: 0; }
.titleblock dt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.titleblock dd { font-size: 1rem; font-weight: 500; line-height: 1.25; }

/* ---------- 6. the close: the house floats over the wordmark, the hours run under it ---------- */
.close__aside { display: grid; gap: 20px; justify-items: start; }
.close__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(320px, 34vw, 500px); margin-inline: calc(var(--pad) * -1); }
.close__marquee { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; z-index: 0; }
.close__run { display: flex; align-items: center; gap: clamp(50px, 7vw, 110px); flex: none; animation: run 46s linear infinite; color: var(--ink); opacity: 0.06; --mark-hole: var(--panel); }
.close__run svg { height: clamp(80px, 13vw, 190px); width: auto; flex: none; overflow: visible; }
@keyframes run { to { transform: translateX(-50%); } }
.close__photo { position: relative; z-index: 2; width: min(600px, 64%); aspect-ratio: 16 / 10; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.45); }
.close__photo img { object-position: 54% 60%; }
.close__label { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; color: #1c1d20; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
.close__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px #1c1d20; }
.hours { margin-top: clamp(30px, 4vw, 56px); border-top: 1px solid var(--line); }
.hours li { border-bottom: 1px solid var(--line); }
.hour {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 24px; align-items: center;
  padding: clamp(14px, 1.6vw, 24px) 4px; text-decoration: none;
}
.hour__name { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; transition: transform 450ms var(--ease), opacity 250ms; }
.hour__time { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--panel-soft); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; transition: background-color 250ms, color 250ms, box-shadow 250ms; }
.hour__time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.hour__plus { justify-self: end; font-size: 1.5rem; font-weight: 300; color: var(--muted); transition: transform 350ms var(--ease); }
.hour:hover .hour__name, .hour:focus-visible .hour__name { transform: translateX(12px); }
.hour:hover .hour__time, .hour.is-touched .hour__time { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.hour:hover .hour__time::before, .hour.is-touched .hour__time::before { opacity: 1; }
.hour:hover .hour__plus { transform: rotate(90deg); color: var(--ink); }
.close__note { margin-top: 18px; font-size: 0.8125rem; color: var(--muted); }

/* ====================================================== phone ====================================================== */
@media (max-width: 820px) {
  .hero { height: calc(100svh - var(--strip-h) - 2 * var(--gutter) - var(--dock-h, 112px) + 8px); min-height: 560px; max-height: none; }
  .hero .guides, .hero__cue, .hero__instrument { display: none; }
  .hero__bg img { object-position: 52% 55%; }
  .hero__giant { --w: min(74vw, 360px); width: var(--w); left: 20px; bottom: auto; top: 112px; }
  .hero__chips { left: 16px; right: 16px; bottom: auto; top: 66px; flex-wrap: nowrap; }
  .hero__chips .tag { height: 30px; padding: 0 11px; }
  .hero__chip { height: 30px; padding: 0 12px; font-size: 0.5625rem; gap: 8px; }
  .hero__chip b, .hero__chip b + span::before, .hero__chip span:last-of-type { display: none; }
  .hero__col { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 20px 20px 22px; border-radius: 18px; }
  .hero__tagline { font-size: clamp(1.75rem, 7.6vw, 2.15rem); }
  .hero__body { font-size: 0.59375rem; max-width: none; margin-top: 10px; }

  .isle { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 30px var(--pad) 18px; }
  .isle__foot { order: 3; }
  .isle__side { display: contents; }
  .isle__controls, .isle__arc { display: none; }
  .isle__map {
    container-type: normal; display: block; position: relative; overflow: hidden; touch-action: pan-y;
    margin: 22px calc(var(--pad) * -1) 0; height: min(112vw, 520px); background: #131417; border-block: 1px solid var(--line);
  }
  .isle__map > .island { position: absolute; left: 0; top: 0; width: 200%; transform-origin: 0 0; will-change: transform; }
  .isle__map .pin { transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); }
  .isle__foot { margin-top: 16px; border-top: 0; padding-top: 0; }
  .isle__names { font-size: 1rem; }

  .coasts__stage { grid-template-columns: 1fr; row-gap: 14px; }
  .coasts__island { display: none; }
  .coast { background: var(--panel-soft); border-radius: var(--r-card); padding: 0 0 16px; gap: 12px; overflow: hidden; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .coast--north { background: #ececef; }
  html[data-theme="night"] .coast--north { background: #1d1f22; }
  .coast__map .island__bin { stroke-width: 2.6; }
  .coast__map .island__bin--lit { stroke-width: 6; }
  .coast__map .split__cut { stroke-width: 3.2; }
  .coast__map .split__dot { r: 12; stroke-width: 3.2; }
  .coast__map { display: block; padding: 22px 18px 4px; }
  .coast__map .split__svg { max-height: 170px; margin-inline: auto; }
  .coast > :not(.coast__map) { margin-inline: 16px; }
  .coast > .coast__print { margin-inline: 0; border-radius: 0; }
  .coast__text { max-width: none; }
  .coast__houses a:hover { padding-left: 2px; }
  .coast .split__half { transition: transform 420ms var(--ease); }
  .coasts__stage[data-lift="north"] .split__half--north { transform: translateY(-26px); }
  .coasts__stage[data-lift="south"] .split__half--south { transform: translateY(26px); }

  .three__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 10px; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .three__grid::-webkit-scrollbar { display: none; }
  .card, .card--lead, .card--b, .card--c { flex: 0 0 min(84vw, 360px); margin: 0; scroll-snap-align: start; align-content: start; }
  .card--lead { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: var(--r-card); }
  .card--lead .card__plate { aspect-ratio: 16 / 11; height: auto; }
  .card--lead .card__body { padding: 22px 20px 20px; gap: 10px; }
  .card--lead .card__name { font-size: 2.2rem; }
  .card--lead .card__line, .card__line { font-size: 1.1875rem; }
  .card--b .card__body, .card--c .card__body { padding: 0 2px; }
  .card .strip { margin-bottom: 24px; }

  .how .section-head { justify-items: start; text-align: left; }
  .how__body { position: relative; padding-left: 34px; }
  .how__body::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
  .how__body::after { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ink); transform: scaleY(var(--p, 0)); transform-origin: top; }
  .how__steps { grid-template-columns: 1fr; row-gap: 40px; }
  .step { justify-items: start; text-align: left; padding-top: 0; }
  .step__node { display: block; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--muted); z-index: 1; transition: background-color 400ms, border-color 400ms; }
  .step.is-in .step__node { background: var(--lime); border-color: var(--ink); }
  .step__title { max-width: none; }
  .step__object { max-width: none; }
  .step__object--plan svg { margin-inline: 0; }
  .note { transform: none; }

  .close__aside .button { width: 100%; }
  .close__stage { min-height: 260px; }
  .close__photo { width: 84%; }
  .hour { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; min-height: 64px; padding-block: 12px; }
  .hour__plus { display: none; }
  .hour__name { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hour:hover .hour__name { transform: none; }
}