/* css/pages/newbuild-scene.css : "One house, every inspection", the build model on new-construction.html (the scene
   agent's; js/scenes/newbuild.js; the markup between <!-- model:start --> and <!-- model:end -->). Linked after city.css
   and new-construction.css. Everything is scoped to .page--city .nb (and .nb-lab, .nb-tag inside it).
   Static first (no JS, reduced motion, Pause motion): the finished house in its square frame beside the whole list of
   checkpoints, every checkpoint a pill on the house. The controller adds .is-pin (T1 and T2) for the pinned story: a
   sticky screen, the stage full-bleed behind the copy, the model right of the copy on desktop and under the caption on
   phones. The page canvas (z 1) draws between the section's colour and the pin (z 2). The section's colour is the studio
   grey, going down to ink with the year-later dusk (--nb-ink, from the scene) and handing off to the ink section after.
   White page, neutral greys, his blue as the accent; no beige, gold or brass. */

/* ------------------------------------------------------------------ the section, static first */
.page--city .nb {
  --nb-ink: 0; --nb-inkc: #121110;
  --nb-bg: color-mix(in srgb, var(--nb-inkc) calc(var(--nb-ink) * 100%), var(--stage-paper, var(--paper-2)));
  position: relative; background: var(--nb-bg);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .nb { --nb-inkc: #080807; } }
:root[data-theme="dark"] .page--city .nb { --nb-inkc: #080807; }
.page--city .nb__pin { position: relative; display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(72px, 9vw, 128px) max(var(--gutter), 3vw); }
@media (min-width: 900px) { .page--city .nb__pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.page--city .nb__stage { position: relative; grid-row: 1; width: min(100%, 76vh); aspect-ratio: 1 / 1; justify-self: center; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .page--city .nb__stage { grid-column: 2; position: sticky; top: calc(var(--header-h) + 24px); } }
.page--city .nb__still { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); }
.page--city .nb .nb-nw { white-space: nowrap; }
.page--city .nb__frame {
  position: absolute; inset: 0; opacity: 0; background: var(--stage-paper) url(../../assets/renders/newbuild-model.webp) no-repeat 0 0 / 200% 400%;
  transition: opacity .7s var(--ease-out); transform: scale(calc(1 + .025 * var(--nb-drift, 0))); transform-origin: 50% 50%;
}
.page--city .nb__frame.is-on { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .nb__frame { background-image: url(../../assets/renders/newbuild-model-dark.webp); } }
:root[data-theme="dark"] .page--city .nb__frame { background-image: url(../../assets/renders/newbuild-model-dark.webp); }
.page--city .nb__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.page--city .nb__copy { display: grid; gap: 18px; align-content: start; min-width: 0; }
@media (min-width: 900px) { .page--city .nb__copy { grid-column: 1; grid-row: 1; } }
.page--city .nb__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .nb__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .nb__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.page--city .nb__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.page--city .nb__beat h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
.page--city .nb__beat p { max-width: 38ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .nb__close { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem) !important; line-height: 1.15 !important; letter-spacing: -.03em; color: var(--ink) !important; max-width: 20ch !important; text-wrap: balance; }
.page--city .nb__legend { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .nb__legend i { display: inline-block; width: 22px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--blue-fill), 0 0 10px color-mix(in srgb, var(--blue-fill) 28%, transparent); }
.page--city .nb__me { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.page--city .nb__me img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.page--city .nb__index { display: none; }
.page--city .nb__note { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.page--city .nb__src { max-width: 46ch; }
.page--city .nb__src .fineprint__body p + p { margin-top: 8px; }
/* in the pinned story the drawer opens inside the copy column: its body scrolls rather than pushing the column off screen */
.page--city .nb.is-pin .nb__src .fineprint__body { max-height: min(30svh, 260px); overflow: auto; overscroll-behavior: contain; padding-right: 8px; }
/* the studio grey eases back into the white page at the section's foot (static), and the ink into a white section after
   the pinned story (the ink section the page has after the model needs no fade: .nb--next-ink) */
.page--city .nb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 16vh, 180px); pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper)); }
.page--city .nb.nb--next-ink.is-pin::after { display: none; }

/* ------------------------------------------------------------------ the status tags (the callouts and the captions share them) */
.page--city .nb-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.page--city .nb-tag--you { background: var(--blue-fill); color: #FFFFFF; }
.page--city .nb-tag--city { background: var(--ink); color: var(--paper); }
.page--city .nb-tag--builder { color: var(--ink-2); background: color-mix(in srgb, var(--paper) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, transparent); }

/* ------------------------------------------------------------------ the callouts on the model: a dot on the point, a fine
   leader, a frosted card with the name and its tag */
.page--city .nb-lab { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; will-change: transform; }
.page--city .nb-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.page--city .nb-lab__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 3px color-mix(in srgb, #FFFFFF 85%, transparent), 0 0 0 8px color-mix(in srgb, var(--blue-fill) 16%, transparent); }
.page--city .nb-lab--city .nb-lab__dot { background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper) 85%, transparent), 0 0 0 8px color-mix(in srgb, var(--ink) 12%, transparent); }
.page--city .nb-lab--builder .nb-lab__dot { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-2), 0 0 0 3px color-mix(in srgb, var(--paper) 70%, transparent); }
.page--city .nb-lab__lead { position: absolute; left: -.5px; bottom: 8px; width: 1px; height: calc(34px + var(--lift, 0px)); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.page--city .nb-lab__box { position: absolute; left: 0; bottom: calc(42px + var(--lift, 0px)); display: grid; gap: 7px; justify-items: start; padding: 10px 13px 11px; white-space: nowrap; transform: translateX(calc(-50% + var(--dx, 0px))); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 12px; box-shadow: 0 22px 44px -26px rgba(21, 19, 17, .5); }
.page--city .nb-lab__box b { font-weight: 500; font-size: 15px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.page--city .nb-lab.is-on .nb-lab__box { animation: nb-lab-in .5s var(--ease-out) both; }
@keyframes nb-lab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.page--city .nb-lab.is-below .nb-lab__lead { top: 8px; bottom: auto; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.page--city .nb-lab.is-below .nb-lab__box { top: calc(42px + var(--lift, 0px)); bottom: auto; }
/* the last resort in a crowded frame: the card level with its dot, beside it, with no leader */
.page--city .nb-lab.is-side .nb-lab__lead { display: none; }
.page--city .nb-lab.is-side .nb-lab__box { top: 0; bottom: auto; transform: translate(13px, -50%); }
.page--city .nb-lab.is-side.is-left .nb-lab__box { transform: translate(calc(-100% - 13px), -50%); }
.page--city .nb-lab.is-side.is-on .nb-lab__box { animation: none; }
/* the whole house: every checkpoint as a pill (the name and a dot; the list beside it has the words) */
.page--city .nb__labels.is-all .nb-lab__lead { height: calc(14px + var(--lift, 0px)); }
.page--city .nb__labels.is-all .nb-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 6px 11px 6px 10px; grid-auto-flow: column; align-items: center; gap: 7px; border-radius: 999px; }
.page--city .nb__labels.is-all .nb-lab__box::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-fill); }
.page--city .nb__labels.is-all .nb-lab__box b { font-size: 12.5px; }
.page--city .nb__labels.is-all .nb-lab__dot { width: 8px; height: 8px; left: -4px; top: -4px; box-shadow: 0 0 0 2px color-mix(in srgb, #FFFFFF 85%, transparent); }
.page--city .nb__labels.is-all .nb-lab.is-below .nb-lab__box { top: calc(22px + var(--lift, 0px)); }

/* ------------------------------------------------------------------ the pinned story (T1 and T2) */
.page--city .nb.is-pin { height: 440vh; height: 440svh; } /* (seven checkpoints and two silent beats, paced by js/core/pace.js: 0.4 screen per beat weight) */
.page--city .nb.is-pin .nb__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.page--city .nb.is-pin .nb__stage { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; justify-self: auto; }
.page--city .nb.is-pin .nb__still { inset: auto; left: 0; top: 0; width: 100px; height: 100px; }
/* a soft fall of the stage's colour behind the copy, so the model never fights the words */
.page--city .nb.is-pin .nb__pin::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: min(62vw, calc(max(var(--gutter), 3vw) + 640px)); pointer-events: none; --sp: var(--nb-bg); background: linear-gradient(90deg, var(--sp) 0, var(--sp) 44%, color-mix(in srgb, var(--sp) 82%, transparent) 56%, color-mix(in srgb, var(--sp) 50%, transparent) 70%, color-mix(in srgb, var(--sp) 18%, transparent) 86%, color-mix(in srgb, var(--sp) 0%, transparent) 100%); }
.page--city .nb.is-pin .nb__copy { position: absolute; z-index: 3; left: max(var(--gutter), 3vw); top: calc(var(--header-h) + 3svh); bottom: 4svh; width: min(400px, 30vw); gap: 16px; align-content: center; }
.page--city .nb.is-pin .nb__beats { gap: 0; min-height: 14rem; align-content: start; }
.page--city .nb.is-pin .nb__beat { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.page--city .nb.is-pin .nb__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.page--city .nb.is-pin .nb__beat:not(.is-on) a { visibility: hidden; }
.page--city .nb__pin { color: var(--ink); transition: color .3s var(--ease-out); }
/* the pin takes .theme-dark at the dusk's midpoint (its tokens turn light on ink), but stays see-through: the page canvas
   draws the model under it (site.css gives .theme-dark an opaque background) */
.page--city .nb .nb__pin.theme-dark { background: transparent; }
.page--city .nb__pin :is(.nb__h, .nb__beat h3, .nb__beat p, .nb__legend, .nb__note, .fineprint__line, .fineprint__more) { transition: color .3s var(--ease-out); }
/* the checkpoints as a row of dots: done in ink, the current one a blue bar; each jumps to its checkpoint */
.page--city .nb.is-pin .nb__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.page--city .nb__index button { position: relative; width: 26px; height: 32px; padding: 0; background: transparent; cursor: pointer; }
.page--city .nb__index button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out), background-color var(--dur-2); }
.page--city .nb__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.page--city .nb__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.page--city .nb__index button:hover::after, .page--city .nb__index button:focus-visible::after { background: var(--blue-text); }
/* the note rides on the model's ground, so it sits on a soft pill (like Skip) and stays legible */
.page--city .nb.is-pin .nb__note { position: absolute; z-index: 3; right: max(var(--gutter), 3vw); bottom: 2.6svh; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); background: color-mix(in srgb, var(--nb-bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page--city .nb__skip { position: absolute; z-index: 8; top: calc(var(--header-h) + 2.5svh); right: max(var(--gutter), 3vw); display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--nb-bg) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 999px; transition: color var(--dur-2), border-color var(--dur-2); }
.page--city .nb__skip:hover, .page--city .nb__skip:focus-visible { color: var(--ink); border-color: var(--ink); }
.page--city .nb.is-live .nb__still { pointer-events: none; }
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .nb.is-pin .nb__copy { gap: 12px; }
  .page--city .nb.is-pin .nb__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .page--city .nb.is-pin .nb__beats { min-height: 12rem; }
}
/* phones: the copy at the top, the model below it (the camera fits the house under the caption) */
@media (max-width: 899px) {
  .page--city .nb__stage { border-radius: 14px; width: 100%; }
  .page--city .nb.is-pin { height: 570vh; height: 570svh; } /* phones: 0.55 small screen per beat weight (pacing plan) */
  .page--city .nb.is-pin .nb__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--nb-cap, calc(var(--header-h) + 210px)) + 44px); background: linear-gradient(180deg, var(--nb-bg) calc(100% - 64px), color-mix(in srgb, var(--nb-bg) 0%, transparent)); transition: height .45s var(--ease-out); }
  .page--city .nb.is-pin .nb__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .page--city .nb.is-pin .nb__h { font-size: clamp(1.625rem, 7.4vw, 2.25rem); }
  .page--city .nb.is-pin .nb__beats { min-height: 8rem; }
  .page--city .nb.is-pin .nb__beat { gap: 5px; }
  .page--city .nb.is-pin .nb__beat h3 { font-size: 1.1875rem; }
  .page--city .nb.is-pin .nb__beat p { font-size: .9375rem; line-height: 1.42; }
  .page--city .nb.is-pin .nb__close { font-size: 1.375rem !important; }
  .page--city .nb.is-pin .nb__index, .page--city .nb.is-pin .nb__src { display: none; }
  .page--city .nb.is-pin .nb__legend { display: none; }
  .page--city .nb.is-pin .nb__note { right: auto; left: var(--gutter); bottom: calc(var(--bar-h, 64px) + 14px); font-size: 9.5px; letter-spacing: .1em; }
  .page--city .nb__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .page--city .nb-lab__box { padding: 7px 10px 8px; gap: 5px; }
  .page--city .nb-lab__box b { font-size: 13px; }
  .page--city .nb-lab__lead { height: calc(26px + var(--lift, 0px)); }
  .page--city .nb-lab__box { bottom: calc(34px + var(--lift, 0px)); }
  .page--city .nb-lab.is-below .nb-lab__box { top: calc(34px + var(--lift, 0px)); }
  .page--city .nb-tag { min-height: 18px; padding: 0 7px; font-size: 9px; letter-spacing: .1em; }
  .page--city .nb__labels.is-all .nb-lab__lead { height: calc(12px + var(--lift, 0px)); }
  .page--city .nb__labels.is-all .nb-lab__box { bottom: calc(18px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .page--city .nb__labels.is-all .nb-lab__box b { font-size: 11.5px; }
  .page--city .nb__labels.is-all .nb-lab.is-below .nb-lab__box { top: calc(18px + var(--lift, 0px)); }
}
/* the short phones (an iPhone in Safari, about 664 px of 100svh): the caption tighter, so the model keeps its room */
@media (max-width: 899px) and (max-height: 700px) {
  .page--city .nb.is-pin .nb__h { font-size: clamp(1.5rem, 6.6vw, 1.875rem); }
  .page--city .nb.is-pin .nb__beat h3 { font-size: 1.0625rem; }
  .page--city .nb.is-pin .nb__beat p { font-size: .875rem; line-height: 1.38; }
  .page--city .nb.is-pin .nb__beat .nb-tag { display: none; }
}
/* the reduced-motion list on a phone: the house above the list */
@media (max-width: 899px) { .page--city .nb:not(.is-pin) .nb__stage { margin-bottom: 4px; } }
/* ?nbshot / ?nbhero render the bare model for the stills: nothing over it */
html.nb-shot .page--city .nb .nb__copy, html.nb-shot .page--city .nb .nb__labels, html.nb-shot .page--city .nb .nb__note, html.nb-shot .page--city .nb .nb__skip, html.nb-shot .page--city .nb .nb__pin::before, html.nb-shot .page--city .nb .nb__still { display: none; }
html.nb-shot .site-header, html.nb-shot .bottombar, html.nb-shot .toast { visibility: hidden !important; }