/* Home: one house through one Melbourne year (worldflight).
   Nothing here restyles the engine's mechanism; it positions this page's own
   layers inside the fixed stage and copy layer. */

body.home { overscroll-behavior-y: none; }
.world__pic { position: absolute; inset: 0; z-index: 0; }
.world__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.words { z-index: 20; }

/* ------------------------------------------------------------- hero planes */
.hero { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: opacity; }
.hero--front { z-index: 3; }
.hero__plane { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 100%; }
.hero__plane img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__sky { transform-origin: 50% 50%; }
.hero__near { transform-origin: 76% 100%; }
.hero__haze {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .85;
  background:
    radial-gradient(ellipse 70% 28% at 50% 64%, rgb(255 214 168 / .30), transparent 70%),
    radial-gradient(ellipse 120% 60% at 18% 0%, rgb(255 246 230 / .35), transparent 60%),
    linear-gradient(to top, rgb(255 186 120 / .16), transparent 42%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__haze { animation: shimmer 7s ease-in-out infinite alternate; }
  .hero.is-gone ~ .hero--front .hero__haze, .hero--front.is-gone .hero__haze { animation-play-state: paused; }
}
@keyframes shimmer { from { transform: translate3d(-0.6%, 0, 0) scale(1.01); opacity: .7; } to { transform: translate3d(0.6%, -0.4%, 0) scale(1.02); opacity: .95; } }
.is-gone { visibility: hidden; }

/* ------------------------------------------------------------ copy windows */
.w { position: absolute; z-index: 5; color: var(--bone); }
.w a:not(.btn) { color: inherit; }
.w--lead { left: var(--sc-gutter); bottom: clamp(4.5rem, 13vh, 8.5rem); width: min(34rem, 44vw); }
.w--trail { right: var(--sc-gutter); top: calc(var(--bar-top) + var(--bar-h) + clamp(2rem, 8vh, 5rem)); width: min(32rem, 40vw); }
.w__h { font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.7rem); letter-spacing: -0.03em; line-height: .98; font-variation-settings: "wdth" 84; }
.w__p { margin-top: 1rem; font-size: 1.08rem; line-height: 1.5; color: color-mix(in oklab, var(--bone) 90%, transparent); max-width: 36ch; }

.lines { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--bone) 22%, transparent); }
.lines li { border-bottom: 1px solid color-mix(in oklab, var(--bone) 16%, transparent); }
.lines a { display: grid; gap: .15rem; padding: .8rem 0; text-decoration: none; min-height: 44px; }
.lines b { font-weight: 600; font-size: 1.08rem; display: inline-flex; align-items: center; gap: .45rem; }
.lines b::after { content: "\2192"; font-weight: 500; opacity: .7; transition: transform 160ms var(--sc-ease-out); }
.lines span { color: color-mix(in oklab, var(--bone) 84%, transparent); font-size: .98rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .lines a:hover b::after { transform: translateX(3px); opacity: 1; } .lines a:hover b { color: #fff; } }

.said--w { margin: 0; }
.said--w blockquote { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "wdth" 92; font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.25vw, 2.05rem); line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; }
.said--w blockquote p::before { content: "\201C"; margin-left: -.45em; color: #FF7A3D; }
.said--w blockquote p::after { content: "\201D"; color: #FF7A3D; }
.said--w figcaption, .said--sm figcaption { margin-top: 1rem; font-size: .95rem; color: color-mix(in oklab, var(--bone) 86%, transparent); }
.said--w figcaption b, .said--sm figcaption b { color: var(--bone); margin-right: .35rem; }
.said--sm { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid color-mix(in oklab, var(--bone) 18%, transparent); }
.said--sm blockquote { margin: 0; font-size: 1.02rem; line-height: 1.5; font-style: italic; color: color-mix(in oklab, var(--bone) 94%, transparent); }
.said--sm blockquote p::before { content: "\201C"; } .said--sm blockquote p::after { content: "\201D"; }

.w--peak { width: min(44rem, 56vw); bottom: clamp(4rem, 12vh, 8rem); }
.w__peak { font-size: clamp(2.8rem, 1.4rem + 4.6vw, 6.2rem); letter-spacing: -0.035em; line-height: .94; font-variation-settings: "wdth" 80; font-weight: 600; }
.w__hint { margin-top: 1.4rem; font-size: 1.05rem; color: color-mix(in oklab, var(--bone) 92%, transparent); display: inline-flex; align-items: center; gap: .6rem; }
.w__hint::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; }
.w__hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .w__hint-fine { display: none; } .w__hint-touch { display: inline; } }

.facts-w { list-style: none; margin: 1.3rem 0 1rem; padding: 0; display: grid; gap: .7rem; }
.facts-w li { font-size: 1.02rem; line-height: 1.45; color: color-mix(in oklab, var(--bone) 90%, transparent); padding-left: 1rem; position: relative; }
.facts-w li::before { content: ""; position: absolute; left: 0; top: .72em; width: .45rem; height: 2px; background: #FF7A3D; }
.facts-w b { color: var(--bone); font-weight: 600; }
.facts-w small { display: block; font-size: .85rem; color: color-mix(in oklab, var(--bone) 78%, transparent); margin-top: .15rem; }
.w a.more { color: var(--bone); }

/* hero copy: dark ink on the bleached February sky */
.w--hero { z-index: 2; left: var(--sc-gutter); top: calc(var(--bar-top) + var(--bar-h) + clamp(1.4rem, 6vh, 4rem)); width: min(40rem, 50vw); color: #101418; }
.w__hero-h { font-size: clamp(3rem, 1.6rem + 4.4vw, 6.4rem); line-height: .9; letter-spacing: -0.04em; font-variation-settings: "wdth" 78; font-weight: 650; color: #0E1216; }
.w__hero-p { margin-top: 1.1rem; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); line-height: 1.4; max-width: 30ch; color: #1C2228; font-weight: 500; }
.w__hero-act { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.w__hero-act .btn--line { color: #101418; border-color: color-mix(in oklab, #101418 45%, transparent); background: rgb(255 255 255 / .35); }
.w--hero :focus-visible { outline-color: #101418; }

/* scrim plates: siblings of the copy (the contrast pass hides copy and its
   children, so a scrim must never be a pseudo-element of the text). */
.plate { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; will-change: opacity; }
.plate--lead { background: linear-gradient(90deg, rgb(8 10 13 / .88) 0%, rgb(8 10 13 / .78) 30%, rgb(8 10 13 / .45) 50%, transparent 66%); }
.plate--trail { background: linear-gradient(270deg, rgb(8 10 13 / .88) 0%, rgb(8 10 13 / .78) 30%, rgb(8 10 13 / .45) 50%, transparent 64%); }
.plate--bright.plate--trail { background: linear-gradient(270deg, rgb(8 10 13 / .93) 0%, rgb(8 10 13 / .88) 38%, rgb(8 10 13 / .6) 54%, transparent 70%); }
.plate--bright.plate--lead { background: linear-gradient(90deg, rgb(8 10 13 / .93) 0%, rgb(8 10 13 / .88) 38%, rgb(8 10 13 / .6) 54%, transparent 70%); }
.plate--wide { background: linear-gradient(90deg, rgb(8 10 13 / .82) 0%, rgb(8 10 13 / .66) 34%, rgb(8 10 13 / .28) 58%, transparent 74%); }
.plate--glare { z-index: 2; background:
  radial-gradient(ellipse 70% 80% at 10% 26%, rgb(250 249 245 / .93) 0%, rgb(248 246 240 / .86) 42%, rgb(246 243 236 / .5) 64%, transparent 84%); }
.plate--finale { background: linear-gradient(90deg, rgb(8 10 13 / .5), transparent 42%), linear-gradient(to top, rgb(8 10 13 / .55), transparent 26%); }

/* -------------------------------------------------------------- the close */
.finale-wrap { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.finale-wrap.is-live { pointer-events: auto; }
.w--dock, .w--foot { position: relative; }
.finale { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; padding: calc(var(--bar-top) + var(--bar-h) + clamp(1rem, 4vh, 2.5rem)) var(--sc-gutter) 1.5rem; }
.dock { width: min(31rem, 100%); background: color-mix(in oklab, var(--night) 92%, transparent); border-radius: var(--r-panel); padding: clamp(1.3rem, 2.4vw, 2rem); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 24px 60px -24px rgb(0 0 0 / .6); }
.dock__head { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.dock__dial { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #2B323A, #121619 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 0 0 6px #191E23, 0 8px 18px -6px rgb(0 0 0 / .6); font-family: var(--sc-font-display); font-variation-settings: "wdth" 70; font-weight: 600; font-size: 2rem; color: var(--bone); }
.dock__dial i { font-style: normal; font-size: .6em; align-self: start; margin-top: .55em; }
.dock__h { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; font-variation-settings: "wdth" 84; }
.dock__p { margin-top: .4rem; color: color-mix(in oklab, var(--bone) 86%, transparent); font-size: .98rem; line-height: 1.45; }
.form--dock { margin-top: 1.3rem; gap: .9rem; }
.form--dock .field label { color: var(--bone); }
.form--dock .field .opt { color: color-mix(in oklab, var(--bone) 70%, transparent); }
.form--dock .field input, .form--dock .field select { background: #FBFAF7; }
.form--dock .field__err { color: #FFB4A6; }
.form--dock .lead-notice { color: color-mix(in oklab, var(--bone) 78%, transparent); }
.form--dock .lead-status[data-state="ok"] { background: #1D3A27; color: #DDF3E3; }
.form--dock .lead-status[data-state="fail"] { background: #47201B; color: #FFE1DC; }
.dock__go { width: 100%; min-height: 50px; font-size: 1rem; }
.dock__alt { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; border-top: 1px solid color-mix(in oklab, var(--bone) 14%, transparent); }
.dock__alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); font-weight: 600; font-size: .95rem; }
.finale__foot { margin-top: auto; padding-top: 2.5rem; color: var(--bone); }
@media (min-width: 1101px) and (orientation: landscape) {
  .finale { display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: 1.25rem; padding-bottom: 1rem; }
  .dock { grid-column: 1; grid-row: 1; align-self: start; }
  .finale__foot { grid-column: 1 / -1; grid-row: 2; align-self: end; margin-top: 0; padding: .95rem 1.3rem .8rem; border-radius: var(--r-panel);
    background: color-mix(in oklab, var(--night) 90%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 24px 60px -24px rgb(0 0 0 / .6); }
  .finale__foot .links { grid-template-columns: 1.3fr 1.15fr 1fr 1.25fr; gap: .6rem 1.8rem; }
  .finale__foot .links ul, .finale__foot .links__col--contact ul { display: block; }
  .finale__foot .links li { display: inline; }
  .finale__foot .links li:not(:last-child)::after { content: "\00A0\00B7\200B"; color: var(--bone-soft); margin-right: .38rem; }
  .finale__foot .links li a, .finale__foot .links__plain { display: inline; padding: .1rem 0; font-size: .84rem; line-height: 1.62; }
  .finale__foot .links__h { margin-bottom: .2rem; font-size: .7rem; }
  .finale__foot .hours, .finale__foot .links .hours div { display: inline; }
  .finale__foot .hours { margin: 0; font-size: .8rem; line-height: 1.6; }
  .finale__foot .hours::before { content: ""; display: block; height: .3rem; }
  .finale__foot .hours dt, .finale__foot .hours dd { display: inline; margin: 0; }
  .finale__foot .hours dt::after { content: " "; }
  .finale__foot .hours div:not(:last-child) dd::after { content: " \00B7 "; color: var(--bone-soft); }
  .finale__foot .links__base { margin-top: .6rem; padding-top: .55rem; font-size: .76rem; }
  .finale__foot .links__bpc { height: 28px; }
  .dock { padding: 1.25rem 1.4rem 1.1rem; width: 100%; }
  .dock__dial { width: 66px; height: 66px; font-size: 1.65rem; }
  .dock__h { font-size: 2rem; }
  .dock__p { font-size: .92rem; }
  .form--dock { margin-top: 1rem; gap: .7rem; }
  .form--dock .field { gap: .3rem; }
  .form--dock .field input, .form--dock .field select { min-height: 44px; padding-block: .55rem; }
  .dock__go { min-height: 48px; }
  .dock__alt { margin-top: .7rem; padding-top: .55rem; gap: 0 1.1rem; }
  .dock__alt a { font-size: .9rem; min-height: 40px; }
}
.finale__foot .links { padding-top: 0; }
.finale__foot .links__base { margin-top: 1.4rem; }

/* ------------------------------------------------------------- thermostat */
.thermo { position: fixed; z-index: 40; right: var(--sc-gutter); bottom: 22px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; color: var(--bone); transform-origin: 100% 100%; }
.thermo__dial { position: relative; width: 164px; height: 164px; border-radius: 50%; flex: none; transform-origin: 50% 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 50% 32%, #303841 0%, #1A1F25 54%, #101317 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -2px 6px rgb(0 0 0 / .5), 0 2px 4px rgb(0 0 0 / .35), 0 18px 40px -10px rgb(0 0 0 / .55); }
.thermo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thermo__bezel { fill: none; stroke: rgb(255 255 255 / .07); stroke-width: 1; }
.thermo__track { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 7; stroke-linecap: round; }
.thermo__fill { fill: none; stroke: var(--thermo-c, #FF7A3D); stroke-width: 7; stroke-linecap: round; transition: stroke 300ms linear; }
.thermo__tick { stroke: rgb(255 255 255 / .28); stroke-width: 1.2; }
.thermo__tick--way { stroke: rgb(255 255 255 / .75); stroke-width: 2.2; }
.thermo__knob { fill: #FBFAF7; stroke: #0E1114; stroke-width: 2; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); }
.thermo__ring { position: absolute; inset: 0; border-radius: 50%; cursor: grab; touch-action: none; outline: none; }
.thermo__ring:active { cursor: grabbing; }
.thermo__ring:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #FF7A3D; }
.thermo__face { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; margin: -31% 0 0 -31%; border-radius: 50%; pointer-events: none;
  display: grid; place-content: center; justify-items: center; text-align: center; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
  background: radial-gradient(circle at 50% 30%, #262C33, #14181C 75%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 0 rgb(0 0 0 / .4); }
.thermo__face.is-held { transition: none; }
.thermo__in-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-soft); line-height: 1; }
.thermo__in { font-family: var(--sc-font-display); font-variation-settings: "wdth" 68; font-weight: 600; font-size: 2.6rem; line-height: .95; letter-spacing: -0.02em; display: inline-flex; }
.thermo__in i { font-style: normal; font-size: .55em; margin-top: .12em; }
.thermo__hold { position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; white-space: nowrap; font-size: .72rem; padding: .25rem .5rem; border-radius: 6px; background: var(--hot); color: var(--sc-accent-ink); font-weight: 600; opacity: 0; transition: opacity 200ms var(--sc-ease-out); }
.thermo__face.is-held .thermo__hold, .thermo__face.is-flash .thermo__hold { opacity: 1; }
.thermo__side { display: grid; gap: .45rem; padding: .7rem .8rem; border-radius: 12px; background: color-mix(in oklab, var(--night) 84%, transparent); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .6); will-change: opacity; }
.thermo__out { display: flex; align-items: baseline; gap: .4rem; font-size: .92rem; white-space: nowrap; }
.thermo__month { font-weight: 600; }
.thermo__month-short { display: none; }
.thermo__out .temp { font-family: var(--sc-font-display); font-variation-settings: "wdth" 70; font-size: 1.6rem; font-weight: 600; color: var(--thermo-c, #FF7A3D); min-width: 2.2ch; text-align: right; transition: color 300ms linear; }
.thermo__out-l { color: var(--bone-soft); }
.thermo__months { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.thermo__months button { min-width: 44px; min-height: 36px; padding: 0 .5rem; border-radius: 8px; border: 1px solid rgb(255 255 255 / .16); background: transparent; color: color-mix(in oklab, var(--bone) 86%, transparent); font-weight: 600; font-size: .82rem; cursor: pointer; }
.thermo__months button[aria-current="true"] { background: var(--bone); color: var(--night); border-color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .thermo__months button:hover { border-color: rgb(255 255 255 / .5); } }
.thermo__note { font-size: .7rem; color: color-mix(in oklab, var(--bone) 72%, transparent); }
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* ------------------------------------------------------------- phones */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .w--lead, .w--trail, .w--peak { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(54px + env(safe-area-inset-bottom) + 1.4rem); }
  .w__h { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.6rem); }
  .w__peak { font-size: clamp(2.5rem, 1.6rem + 5vw, 3.6rem); }
  .lines a { padding: .6rem 0; }
  .lines span { font-size: .92rem; }
  .said--w blockquote { font-size: 1.25rem; }
  .plate--lead, .plate--trail, .plate--wide { background: linear-gradient(to top, rgb(8 10 13 / .9) 0%, rgb(8 10 13 / .76) 34%, rgb(8 10 13 / .3) 56%, transparent 72%); }
  .w--hero { left: 16px; right: auto; width: calc(100% - 32px - 104px); top: calc(var(--bar-top) + var(--bar-h) + 1.2rem); }
  .thermo__side { width: 96px; justify-items: center; }
  .thermo__out { justify-content: center; }
  .thermo__out-l, .thermo__month-long { display: none; }
  .thermo__month-short { display: inline; }
  .w__hero-h { font-size: clamp(2.5rem, 1.4rem + 6vw, 3.4rem); }
  .w__hero-p { font-size: 1.02rem; max-width: 24ch; }
  .w__hero-call { display: none; }
  .thermo { top: calc(var(--bar-top) + var(--bar-h) + 10px); right: 8px; bottom: auto; flex-direction: column; align-items: flex-end; gap: 6px; transform-origin: 100% 0; }
  .thermo__dial { width: 96px; height: 96px; }
  .thermo__in { font-size: 1.55rem; }
  .thermo__in-label { font-size: .55rem; letter-spacing: .1em; }
  .thermo__track, .thermo__fill { stroke-width: 9; }
  .thermo__knob { r: 11px; }
  .thermo__side { padding: .35rem .55rem; gap: 0; }
  .thermo__out { font-size: .78rem; gap: .3rem; }
  .thermo__out .temp { font-size: 1.15rem; }
  .thermo__months, .thermo__note { display: none; }
  .thermo__hold { top: auto; bottom: calc(100% + 6px); }
  .finale { padding-top: 30vh; padding-left: 12px; padding-right: 12px; padding-bottom: calc(54px + env(safe-area-inset-bottom) + 1rem); }
  .dock { width: 100%; }
  .dock__dial { width: 64px; height: 64px; font-size: 1.6rem; }
  .finale__foot { padding-inline: 4px; }
  .plate--bright.plate--lead, .plate--bright.plate--trail { background: linear-gradient(to top, rgb(8 10 13 / .95) 0%, rgb(8 10 13 / .92) 52%, rgb(8 10 13 / .6) 70%, transparent 86%); }
  .plate--finale { background: linear-gradient(to top, rgb(8 10 13 / .96) 0%, rgb(8 10 13 / .92) 62%, rgb(8 10 13 / .3) 78%, transparent 90%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__plane { transform: none !important; }
  .thermo__face { transition: none; }
}

/* phones: the portrait February sky is tall, so the heat glare is wider and higher */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .plate--glare { background: radial-gradient(ellipse 125% 64% at 22% 18%, rgb(250 249 245 / .94) 0%, rgb(248 246 240 / .88) 48%, rgb(246 243 236 / .5) 72%, transparent 92%); }
}
/* short phones (360x640 and friends): blocks are tall against the frame */
@media (max-width: 860px) and (max-height: 720px) {
  .plate--lead, .plate--trail, .plate--wide,
  .plate--bright.plate--lead, .plate--bright.plate--trail { background: linear-gradient(to top, rgb(8 10 13 / .95) 0%, rgb(8 10 13 / .92) 56%, rgb(8 10 13 / .62) 74%, transparent 90%); }
  .w__h { font-size: 1.75rem; }
  .w__peak { font-size: 2.4rem; }
  .lines { margin-top: .9rem; }
  .lines a { padding: .45rem 0; }
  .lines span { font-size: .86rem; }
  #w-work .said--sm { display: none; }
  .facts-w { gap: .4rem; margin: .8rem 0 .5rem; }
  .facts-w li { font-size: .9rem; }
  .said--w blockquote { font-size: 1.1rem; }
  .w--lead, .w--trail, .w--peak { bottom: calc(54px + env(safe-area-inset-bottom) + .9rem); }
}