/* Noonmark: a section through a stone villa, cream ink on a cobalt sheet; yellow is light only. */
@font-face {
  font-family: "Tasa Orbiter";
  src: url("/assets/fonts/specimen/tasa-orbiter-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tasa Fallback";
  src: local("Avenir Next"), local("Segoe UI"), local("Arial");
  size-adjust: 104%; ascent-override: 94%; descent-override: 24%;
}

body.spec-noonmark { margin: 0; background: #2449C9; }

.nk-page {
  --nk-cobalt: #2449C9; --nk-cream: #F7F4EA; --nk-sun: #FFCB3D; --nk-night: #0D1A4A;
  --nk-cobalt-lit: #3A5FD6; --nk-cobalt-deep: #1B3AA8;
  --nk-cream-78: rgba(247, 244, 234, .78); --nk-cream-30: rgba(247, 244, 234, .3);
  --nk-stone: #D5AE6C; --nk-brick: #A24A32;
  --nk-ease: cubic-bezier(.2, .7, .1, 1);
  --nk-m: clamp(16px, 4vw, 64px);
  --nk-nav: 56px;
  --nk-pitch: 22.5;
  --nk-hatch: repeating-linear-gradient(-45deg, var(--nk-cream-30) 0 1px, transparent 1px 6px);
  background: var(--nk-cobalt); color: var(--nk-cream);
  font: 420 1.0625rem/1.6 "Tasa Orbiter", "Tasa Fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
.nk-page *, .nk-page *::before, .nk-page *::after { box-sizing: border-box; }
.nk-page a { color: var(--nk-cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.nk-page :focus-visible { outline: 2px solid var(--nk-cream); outline-offset: 3px; }
.nk-fig { font-variant-numeric: tabular-nums; font-weight: 640; }
.nk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nk-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--nk-m); box-sizing: content-box; }
.nk-page p { margin: 0; }

/* ── controls: cream outline, never yellow ─────────────────────────────────────────── */
.nk-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--nk-cream); background: transparent; color: var(--nk-cream);
  font: 600 .9375rem/1 inherit; font-family: inherit; text-decoration: none !important; cursor: pointer;
  transition: background-color .24s var(--nk-ease), color .24s var(--nk-ease);
}
.nk-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.nk-btn:hover { background: var(--nk-cream); color: var(--nk-cobalt); }
.nk-link { font-weight: 560; }

/* ── nav ─────────────────────────────────────────────────────────────────────────── */
.nk-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--nk-nav);
  background: var(--nk-cobalt); border-bottom: 1px solid transparent; transition: border-color .24s var(--nk-ease);
}
.nk-nav.is-down { border-bottom-color: var(--nk-cream-30); }
/* at the top of the page the nav shares the hero's sky, night included */
.nk-nav:not(.is-down) { background: var(--nk-sky, var(--nk-cobalt)); }
.nk-nav-in { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--nk-m); display: flex; align-items: center; gap: 24px; box-sizing: content-box; }
.nk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
.nk-mark { display: block; flex: none; }
.nk-nav-list { display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: .875rem; font-weight: 520; }
.nk-nav-list a { text-decoration: none; color: var(--nk-cream-78); }
.nk-nav-list a:hover { color: var(--nk-cream); text-decoration: underline; }
.nk-nav-ask { min-height: 38px; font-size: .875rem; }
@media (max-width: 899px) { .nk-nav-list { display: none; } .nk-nav-ask { margin-left: auto; } }
@media (max-width: 700px) { .nk-page { --nk-nav: 48px; } }
@media (max-width: 359px) { .nk-nav-in { gap: 12px; } .nk-nav-ask { padding: 0 12px; } }

/* ── the block, the sun, the dial ───────────────────────────────────────────────── */
.nk-roof {
  position: relative; overflow: hidden;
  min-height: max(600px, calc(100svh - var(--bar-h, 40px) - var(--nk-nav)));
  display: grid; grid-template-rows: 1fr auto auto 48px;
  background: var(--nk-sky, var(--nk-cobalt));
  padding: 0 max(var(--nk-m), calc((100% - 1320px) / 2));
}
.nk-stage { position: absolute; inset: 0 0 calc(48px + var(--nk-deckh, 0px)) 0; }
.nk-gl, .nk-dial { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nk-gl { opacity: 0; }
.nk-roof.is-live .nk-gl { opacity: 1; }
.nk-roof.is-live .nk-poster { display: none; }
.nk-dial { pointer-events: none; overflow: visible; }
.nk-dial .ring { fill: none; stroke: var(--nk-cream-78); stroke-width: 1.25; }
.nk-dial .path { fill: none; stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-dial .tick { stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-dial .lead { stroke: var(--nk-cream-78); stroke-width: 1; fill: none; }
.nk-dial text { fill: var(--nk-cream); font: 560 12px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nk-dial .n { font-weight: 700; font-size: 13px; }

.nk-cells { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.nk-cell {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; pointer-events: auto; cursor: pointer;
}
.nk-cell:hover, .nk-cell:focus-visible, .nk-cell[aria-pressed="true"] { outline: 1px solid var(--nk-cream); outline-offset: 0; }
.nk-cellnote {
  position: absolute; z-index: 5; max-width: 300px; padding: 10px 12px 11px; background: var(--nk-night);
  border-top: 1px solid var(--nk-cream); font-size: .8125rem; line-height: 1.45; font-weight: 520; letter-spacing: .01em;
}
.nk-lb {
  position: absolute; z-index: 2; left: 0; top: 0; transform: translate(-50%, -100%); padding-bottom: 6px;
  font-size: 13px; letter-spacing: .02em; font-variation-settings: "wght" var(--nk-lbw, 600); white-space: nowrap;
  border-bottom: 1px solid var(--nk-cream-78); line-height: 1;
}
.nk-dialnote {
  position: absolute; z-index: 2; left: 0; top: 0; width: 15ch; transform: translate(-100%, -50%);
  font-size: .8125rem; font-weight: 560; line-height: 1.35; letter-spacing: .02em; color: var(--nk-cream-78); text-align: right;
}
.nk-page:not(.nk-js) .nk-lb, .nk-page:not(.nk-js) .nk-dialnote { display: none; }

/* the photograph, when the model can't be drawn: a detail called out on the sheet */
.nk-poster { position: absolute; margin: 0; inset: 7% var(--nk-m) 9% 45%; border: 1px solid var(--nk-cream); padding: 6px; }
.nk-poster picture, .nk-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nk-poster picture { position: relative; }
.nk-sweep { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.nk-sweep-tall { display: none; }
.nk-sweep-edges path { fill: rgba(13, 26, 74, .42); stroke: var(--nk-night); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.nk-sweep-tags circle { fill: var(--nk-night); stroke: var(--nk-cream); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.nk-sweep-tags text { fill: var(--nk-cream); font: 700 17px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; text-anchor: middle; }
.nk-js .nk-sweep-dial { display: none; }
.nk-sweep-dial ellipse, .nk-sweep-path { fill: none; stroke: var(--nk-cream); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.nk-sweep-sun { fill: var(--nk-sun); }
.nk-sweep-cap { position: absolute; left: 6px; bottom: -34px; font-size: .8125rem; font-weight: 560; color: var(--nk-cream-78); display: flex; gap: 8px; align-items: center; }
.nk-tag {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--nk-cream); border-radius: 50%;
  font-size: .75rem; font-weight: 700; color: var(--nk-cream); font-variant-numeric: tabular-nums; flex: none;
}

/* the words on the sheet, left of the block */
.nk-hero-text { position: relative; z-index: 3; grid-row: 1; align-self: end; width: min(560px, 42vw); padding-top: 32px; pointer-events: none; }
.nk-hero-text > * { pointer-events: auto; }
.nk-h1 {
  margin: 0 0 22px; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); font-weight: 760; line-height: .95; letter-spacing: -.03em;
  text-shadow: var(--nk-cast, 0.0113em 0.0113em 0 #0D1A4A, 0.0225em 0.0225em 0 #0D1A4A, 0.0338em 0.0338em 0 #0D1A4A, 0.0450em 0.0450em 0 #0D1A4A, 0.0563em 0.0563em 0 #0D1A4A, 0.0675em 0.0675em 0 #0D1A4A, 0.0788em 0.0788em 0 #0D1A4A, 0.0900em 0.0900em 0 #0D1A4A, 0.1013em 0.1013em 0 #0D1A4A, 0.1125em 0.1125em 0 #0D1A4A, 0.1238em 0.1238em 0 #0D1A4A, 0.1350em 0.1350em 0 #0D1A4A);
}
.nk-h1 span { display: block; }
.nk-lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 440; line-height: 1.5; max-width: 44ch; }
.nk-live { margin-top: 10px !important; font-size: .8125rem; font-weight: 540; line-height: 1.45; color: var(--nk-cream-78); }
.nk-live .nk-fig { color: var(--nk-sun); }
.nk-more { display: none; }
.nk-hint { margin-top: 12px !important; max-width: 46ch; font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); line-height: 1.45; }
.nk-page:not(.nk-js) .nk-hint { display: none; }
@media (min-width: 900px) { .nk-hint { display: none; } }
.nk-links { position: relative; z-index: 3; grid-row: 2; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px 0 22px; margin: 0; }


/* ── the deck under the block: the sun's arch, what the roof makes, what that runs ───────── */
.nk-deck {
  grid-row: 3; position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--nk-cream-30);
}
.nk-page:not(.nk-js) .nk-deck { display: none; }
.nk-dk { padding: 14px 28px 14px 0; min-width: 0; }
.nk-dk + .nk-dk { padding-left: 28px; border-left: 1px solid var(--nk-cream-30); }
.nk-dk:last-child { padding-right: 0; }
.nk-dk-h { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-cream); }
.nk-dk-sub { margin-left: .5em; font-weight: 520; letter-spacing: .04em; text-transform: none; color: var(--nk-cream-78); }

/* the arch */
.nk-arch { position: relative; height: clamp(130px, 16svh, 152px); margin-top: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.nk-arch.is-near { cursor: pointer; }
.nk-arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nk-arch-svg path { fill: none; stroke: var(--nk-cream); stroke-linecap: round; stroke-linejoin: round; }
.nk-arch-svg .nk-a-sky { stroke-width: 1; stroke: var(--nk-cream-30); }
.nk-arch-svg .nk-a-night { stroke-width: 2; stroke-dasharray: 0 7; stroke: var(--nk-cream-30); }
.nk-arch-svg .nk-a-day { stroke-width: 2; stroke-dasharray: 0 6; stroke: var(--nk-cream-78); }
.nk-arch-svg .nk-a-tick { stroke-width: 1.25; stroke: var(--nk-cream-78); }
.nk-arch-svg .nk-a-done { stroke-width: 2; }
.nk-arch-svg .nk-a-ic { stroke-width: 1.5; }
.nk-arch-svg .nk-a-noon { fill: var(--nk-cream-78); font: 600 11px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.nk-arch-time {
  position: absolute; left: 50%; bottom: calc(var(--nk-horizon, 12px) + 7px); translate: -50% 0; margin: 0; pointer-events: none; white-space: nowrap;
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 520; line-height: 1;
}
.nk-arch-time .nk-fig { font-weight: 760; letter-spacing: -.01em; }

/* the sun, and the moon it turns into: placed by translate and grown by scale, so growing never
   moves it off the line; a hard shadow like the headings' */
.nk-sun {
  position: absolute; left: 0; top: 0; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  translate: var(--sx, 0) var(--sy, 0); isolation: isolate; cursor: grab; touch-action: none; outline: none;
  transition: scale .25s var(--nk-ease);
}
.nk-sun svg { display: block; overflow: visible; filter: drop-shadow(2px 2px 0 var(--nk-night)); }
.nk-sun::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.nk-orb-sun { fill: var(--nk-sun); }
.nk-orb-moon { fill: var(--nk-cream); }
.nk-orb-rays { fill: none; stroke: var(--nk-sun); stroke-width: 2; stroke-linecap: round; }
.nk-orb-night { fill: var(--nk-night); stroke: var(--nk-cream-30); stroke-width: 1; }
@media (hover: hover) { .nk-sun:hover { scale: 1.16; } }
.nk-arch.is-held .nk-sun, .nk-arch.is-following .nk-sun { scale: 1.16; }
.nk-arch.is-held .nk-sun { cursor: grabbing; }
.nk-sun:focus-visible { outline: 2px solid var(--nk-cream); outline-offset: 3px; }
/* until the sun has been moved once, a ring goes out from it now and then, asking to be taken */
.nk-sun::after {
  content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 50%; border: 1.5px solid var(--nk-cream);
  opacity: 0; pointer-events: none; animation: nk-call 2.8s var(--nk-ease) 1.6s infinite;
}
.nk-arch.is-known .nk-sun::after { animation: none; }
@keyframes nk-call { 0% { opacity: .8; scale: .8; } 70%, 100% { opacity: 0; scale: 2.1; } }
@media (prefers-reduced-motion: reduce) { .nk-sun::after { animation: none; } .nk-sun { transition: none; } }

.nk-arch-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.nk-arch-edge { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--nk-cream-78); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nk-arch-edge:last-child { text-align: right; }
.nk-play { min-height: 40px; padding: 0 16px 0 13px; gap: 9px; }
.nk-play svg { fill: currentColor; stroke: none; }
.nk-play-bars { display: none; }
.nk-play.is-on .nk-play-tri { display: none; }
.nk-play.is-on .nk-play-bars { display: inline; }

/* what the roof makes */
.nk-now { margin-top: 10px !important; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nk-now .nk-fig { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); font-weight: 760; line-height: 1; letter-spacing: -.02em; color: var(--nk-sun); }
.nk-now-u { font-size: 1rem; font-weight: 700; }
.nk-now-l { font-size: .8125rem; font-weight: 560; color: var(--nk-cream-78); }
.nk-batt { position: relative; display: flex; align-items: center; height: 36px; margin: 12px 0 10px; padding-right: 58px; }
.nk-batt-body { position: relative; flex: 1; height: 100%; border: 1.5px solid var(--nk-cream); }
.nk-batt-fill, .nk-batt-cells { position: absolute; inset: 3px; }
.nk-batt-fill { background: var(--nk-sun); transform-origin: left center; transform: scaleX(0); }
.nk-batt-cells { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--nk-sky, var(--nk-cobalt)) calc(10% - 2px) 10%); }
.nk-batt-nub { flex: none; width: 5px; height: 14px; margin-left: 1px; background: var(--nk-cream); }
/* past a full day of the house, the spare spills out beyond the terminal */
.nk-batt-spill {
  position: absolute; right: 0; top: 6px; bottom: 6px; width: 48px; transform-origin: left center; transform: scaleX(0);
  background: repeating-linear-gradient(-45deg, var(--nk-sun) 0 2px, transparent 2px 6px); border-left: 2px solid var(--nk-sun);
}
.nk-batt-cap { font-size: .8125rem; font-weight: 540; line-height: 1.45; color: var(--nk-cream-78); }
/* the words that change with the sun keep their room, so the deck (and the arch in it) never shifts */
@media (min-width: 900px) {
  .nk-batt-cap, .nk-dk-sun .nk-live { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; height: calc(3 * 1.45em); -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (min-width: 900px) and (max-height: 960px) { .nk-h1 span { display: inline; } }
.nk-batt-cap .nk-fig, .nk-runs .nk-fig { color: var(--nk-sun); }
.nk-panels { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.nk-panels .nk-segb { min-width: 48px; }
.nk-pn-kw { font-size: .9375rem; font-weight: 600; }

/* what that runs */
.nk-runs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.nk-runs li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.nk-runs svg { grid-row: span 2; fill: none; stroke: var(--nk-cream); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.nk-runs .nk-fig { font-size: 1.375rem; font-weight: 760; line-height: 1.05; }
.nk-run-l { font-size: .75rem; font-weight: 560; line-height: 1.25; color: var(--nk-cream-78); }
.nk-runs-note { margin-top: 12px !important; font-size: .6875rem; line-height: 1.45; }

/* the year, under the house */
.nk-date { grid-row: 4; position: relative; z-index: 3; margin: 0 calc(-1 * max(var(--nk-m), (100vw - 1320px) / 2)); border-top: 1px solid var(--nk-cream-30); height: 48px; }
.nk-months {
  position: absolute; inset: 0; margin: 0; padding: 0 max(var(--nk-m), calc((100vw - 1320px) / 2)); list-style: none;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; pointer-events: none;
}
.nk-months li { text-align: center; font-size: .9375rem; font-weight: 500; letter-spacing: .3em; color: var(--nk-cream-78); padding-left: .3em; }
.nk-months li.is-on { font-weight: 800; color: var(--nk-cream); }
.nk-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 max(var(--nk-m), calc((100vw - 1320px) / 2)); box-sizing: border-box;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize;
}
.nk-range:disabled { cursor: default; }
.nk-range::-webkit-slider-runnable-track { height: 48px; background: transparent; }
.nk-range::-moz-range-track { height: 48px; background: transparent; }
.nk-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 18px; margin-top: 15px; background: var(--nk-cream); border: 0; border-radius: 0; }
.nk-range::-moz-range-thumb { width: 2px; height: 18px; background: var(--nk-cream); border: 0; border-radius: 0; }
.nk-range:focus-visible { outline-offset: -4px; }

/* laptops: the heading, the lede and the links keep above the deck */
@media (max-height: 860px) and (min-width: 900px) {
  .nk-h1 { margin-bottom: 16px; font-size: min(clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem), 3.75rem); }
  .nk-h1 span { display: inline; }
  .nk-lede { font-size: 1.0625rem; }
  .nk-links { padding: 14px 0 16px; }
  .nk-arch { height: clamp(128px, 15svh, 136px); }
  .nk-runs { gap: 10px 16px; margin-top: 10px; }
  .nk-now .nk-fig { font-size: 2rem; }
  /* the sun's sentence keeps to what shades the roof */
  .nk-dk-sun .nk-live .nk-live-a { display: none; }
  .nk-dk-sun .nk-live { height: calc(2 * 1.45em); -webkit-line-clamp: 2; line-clamp: 2; }
  .nk-arch-foot { margin-top: 6px; }
}
@media (max-height: 760px) and (min-width: 900px) {
  .nk-h1 { font-size: 2.75rem; margin-bottom: 12px; }
  .nk-h1 span { display: inline; }
  .nk-lede { font-size: 1rem; line-height: 1.45; max-width: 48ch; }
  .nk-links { padding: 10px 0 12px; }
  .nk-runs-note { display: none; }
  .nk-dk { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 900px) and (max-width: 1180px) and (max-height: 860px) {
  .nk-dk-sun .nk-live { height: calc(3 * 1.45em); -webkit-line-clamp: 3; line-clamp: 3; }
  .nk-h1 { font-size: 3rem; }
  .nk-lede { font-size: .9375rem; line-height: 1.45; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .nk-h1 { font-size: min(clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem), 3.5rem); }
  .nk-hero-text { width: min(440px, 43vw); }
  .nk-poster { left: 47%; }
  .nk-dk { padding-right: 18px; }
  .nk-dk + .nk-dk { padding-left: 18px; }
  .nk-runs { column-gap: 12px; }
}

/* phones and narrow tablets: the heading, the block, then the deck one part at a time */
@media (max-width: 899px) {
  .nk-roof { display: flex; flex-direction: column; height: auto; padding: 0; overflow: visible; }
  .nk-stage { position: relative; inset: auto; order: 1; height: 46svh; min-height: 300px; overflow: hidden; touch-action: pan-y; }
  .nk-hero-text { display: contents; }
  .nk-hero-text > *, .nk-links { padding-left: var(--nk-m); padding-right: var(--nk-m); }
  .nk-h1 { order: 0; margin: 20px 0 14px; font-size: 2.25rem; }
  .nk-h1 span { display: inline; }
  .nk-deck { display: contents; }
  .nk-dk, .nk-dk + .nk-dk { padding: 16px var(--nk-m) 20px; border-left: 0; border-top: 1px solid var(--nk-cream-30); }
  .nk-dk-sun { order: 2; border-top: 0; padding-top: 12px; }
  .nk-date { order: 3; margin: 0; height: 56px; border-top: 1px solid var(--nk-cream-30); }
  .nk-dk-made { order: 4; }
  .nk-dk-runs { order: 5; }
  .nk-lede { order: 6; max-width: none; padding-top: 24px; border-top: 1px solid var(--nk-cream-30); }
  .nk-hint { order: 7; }
  .nk-links { order: 8; padding-top: 20px; padding-bottom: 8px; }
  .nk-arch { height: clamp(140px, 40vw, 168px); }
  .nk-months, .nk-range { padding: 0 var(--nk-m); }
  .nk-range::-webkit-slider-runnable-track { height: 56px; }
  .nk-range::-webkit-slider-thumb { height: 28px; margin-top: 14px; }
  .nk-poster { inset: 0; border: 0; padding: 0; }
  .nk-sweep { inset: 0; width: 100%; height: 100%; }
  .nk-sweep-cap { left: var(--nk-m); right: var(--nk-m); top: 12px; bottom: auto; color: var(--nk-cream); text-shadow: 0 1px 0 var(--nk-night); }
  .nk-dialnote { display: none; }
}
@media (max-width: 700px) {
  .nk-sweep-wide { display: none; }
  .nk-sweep-tall { display: block; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .nk-stage { height: 40svh; min-height: 240px; }
  .nk-h1 { margin: 14px 0 10px; font-size: 1.875rem; }
}


/* ── the storeys: each one a cut through the house, divided by its own floor or ceiling ─── */
.nk-storey { position: relative; padding-block: clamp(72px, 9vw, 168px); --nk-pad: clamp(72px, 9vw, 168px); }
.nk-storey::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  border-top: 2px solid var(--nk-cream); background: var(--nk-hatch);
}
.nk-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.nk-under { margin-top: clamp(40px, 5vw, 72px); }
.nk-copy { display: grid; gap: 20px; align-content: start; }
.nk-copy-in { grid-column: 2 / span 5; }
.nk-h2 { margin: 0 0 12px; font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-wrap: balance; text-shadow: var(--nk-cast, none); }
.nk-page h3 { margin: 0 0 10px; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); font-weight: 640; line-height: 1.2; }
.nk-copy p, .nk-page .nk-close { max-width: 60ch; }
.nk-small { font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); line-height: 1.5; max-width: 52ch; }
.nk-close { font-weight: 560; }
.nk-notelist { margin: 8px 0 0; padding: 0; list-style: none; display: grid; }
.nk-notelist li { padding: 10px 0 10px 26px; border-top: 1px solid var(--nk-cream-30); font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); position: relative; }
.nk-notelist li::before { content: ""; position: absolute; left: 0; top: 17px; width: 14px; height: 1px; background: var(--nk-cream-78); }
.nk-notelist li::after { content: ""; position: absolute; left: 13px; top: 14px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--nk-cream-78); }
.nk-detail { margin: 0; }
.nk-detail picture { display: block; border: 1px solid var(--nk-cream); padding: 6px; }
.nk-detail img { display: block; width: 100%; height: auto; }
.nk-detail figcaption { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); }
.nk-cols > .nk-detail-wide { grid-column: 8 / span 4; }
.nk-cols > .nk-detail-tall { grid-column: 8 / span 4; max-width: 380px; }

/* the walls of the rooms: the section's two cut walls, lined up storey to storey */
.nk-walled .nk-wrap { position: relative; }
.nk-walls { position: absolute; top: calc(18px - var(--nk-pad)); bottom: calc(-1 * var(--nk-pad)); left: calc(var(--nk-m) + (100% - 2 * var(--nk-m) - 264px) / 12 + 24px); right: calc(var(--nk-m) + (100% - 2 * var(--nk-m) - 264px) / 12 + 24px); pointer-events: none; }
.nk-walls::before, .nk-walls::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22px; border-inline: 2px solid var(--nk-cream);
  background: repeating-linear-gradient(45deg, var(--nk-cream-30) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, var(--nk-cream-30) 0 1px, transparent 1px 7px);
}
.nk-walls::before { left: 0; } .nk-walls::after { right: 0; }
.nk-room { margin-inline: calc((100% - 264px) / 12 + 24px + 22px + clamp(16px, 2.6vw, 44px)); }
.nk-walled .nk-band { margin-inline: 0; }

/* ── drawings: cream ink on the sheet ───────────────────────────────────────────── */
.nk-band { position: relative; container-type: inline-size; }
.nk-draw { display: block; width: 100%; height: auto; overflow: visible; }
.nk-band .nk-draw { overflow: hidden; }
.nk-draw .nk-ink { fill: none; stroke: var(--nk-cream); stroke-width: 1.25; stroke-linejoin: miter; }
.nk-draw .nk-cut { stroke-width: 2.25; }
.nk-draw .nk-panel { fill: var(--nk-night); stroke-width: 1; }
.nk-draw .nk-cabinet { stroke-width: 2; }
.nk-draw .nk-module { fill: var(--nk-night); }
.nk-draw .nk-batts { fill: none; stroke: var(--nk-cream-30); stroke-width: 1.25; }
.nk-draw .nk-beyond path { fill: none; stroke: var(--nk-cream-78); stroke-width: 1.25; stroke-dasharray: 7 5; }
.nk-draw .nk-beyond .nk-course { stroke: var(--nk-cream-30); stroke-dasharray: none; }
.nk-draw .nk-course { fill: none; stroke: rgba(247, 244, 234, .14); stroke-width: 1; }
.nk-draw .nk-cable { fill: none; stroke: var(--nk-cream); stroke-width: 1.5; stroke-dasharray: 4 4; }
.nk-draw .nk-pulse { fill: none; stroke: var(--nk-sun); stroke-width: 3; stroke-linecap: round; }
.nk-draw .nk-dims { fill: none; stroke: var(--nk-cream-78); stroke-width: 1; }
.nk-draw .nk-dims text, .nk-draw .nk-lvls text, .nk-draw .nk-lbl { fill: var(--nk-cream-78); stroke: none; font: 560 16px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nk-draw .nk-lvls path { fill: none; stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-draw .nk-lvls text { fill: var(--nk-cream); }
.nk-draw .nk-hid { fill: none; stroke: var(--nk-cream-30); stroke-dasharray: 4 4; }
.nk-draw .nk-lead { fill: none; stroke: var(--nk-cream-78); stroke-width: 1; }
.nk-draw .nk-dtag circle { fill: var(--nk-cobalt); stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-draw .nk-dtag text { fill: var(--nk-cream); font: 700 15px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; }
.nk-draw .nk-rays path { fill: none; stroke: var(--nk-sun); stroke-width: 1.25; }
.nk-draw .nk-rays-cap { fill: var(--nk-cream-78); }
.nk-draw .nk-dir { font-weight: 700; fill: var(--nk-cream); }
.nk-hatch path { stroke: none; }

/* headings standing on the drawing: on the north rake, on the batts, on the garage floor */
.nk-band .nk-onband, .nk-band .nk-rake { position: absolute; margin: 0; font-size: clamp(1.5rem, 4.3cqi, 3.5rem); white-space: nowrap; }
.nk-band .nk-rake { left: 3.03%; top: 93.75%; transform-origin: 0 0; transform: rotate(calc(var(--nk-pitch) * -1deg)) translate(54.1cqi, -100%) translateY(-3.6cqi); transition: transform .24s var(--nk-ease); }
.nk-rake span, .nk-onfloor span { display: block; }
.nk-band-ceil .nk-onband { left: 42.4%; top: 69.6%; transform: translateY(calc(-100% - .12em)); }
.nk-band-batt .nk-onband { left: 12.9%; top: 87%; transform: translateY(calc(-100% - .1em)); }

/* ── the roof in plan (the year) ─────────────────────────────────────────────────── */
.nk-plan-col { grid-column: 1 / span 7; position: sticky; top: calc(var(--bar-h, 40px) + var(--nk-nav) + 32px); }
.nk-year-side { grid-column: 9 / span 4; display: grid; gap: 20px; }
.nk-plan { position: relative; aspect-ratio: 720 / 500; }
.nk-tint, .nk-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nk-plan-svg { overflow: visible; touch-action: none; }
.nk-year.is-live .nk-tint-static { display: none; }
.nk-tint-static polygon { fill: var(--nk-night); }
.nk-plan-ink { fill: none; stroke: var(--nk-cream); }
.nk-plan-ink .nk-eaves { stroke-width: 2; }
.nk-plan-ink .nk-hips { stroke-width: 1; }
.nk-plan-ink .nk-south { stroke: none; }
.nk-plan-ink .nk-chim { stroke-width: 1.5; }
.nk-plan-ink .nk-bound { stroke: var(--nk-cream-30); stroke-dasharray: 10 4 2 4; }
.nk-plan-ink .nk-can circle { fill: url(#nk-p-stip); stroke: none; }
.nk-plan-ink .nk-trunk { fill: var(--nk-cream); stroke: none; }
.nk-plan-ink text { fill: var(--nk-cream-78); stroke: none; font: 560 13px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .02em; }
.nk-plan-ink .nk-north circle { stroke-width: 1.25; }
.nk-plan-ink .nk-north path { fill: var(--nk-cream); stroke: none; }
.nk-plan-ink .nk-north text { font-weight: 700; fill: var(--nk-cream); }
.nk-plan-ink .nk-scalebar path { stroke-width: 1.25; }
.nk-grp { cursor: grab; outline: none; }
.nk-grp polygon { fill: var(--nk-sun); stroke: var(--nk-cream); stroke-width: 1; transition: fill .24s var(--nk-ease); }
.nk-grp .nk-grp-tag { fill: var(--nk-cobalt); stroke: var(--nk-cream); stroke-width: 1; }
.nk-grp text { fill: var(--nk-cream); font: 700 13px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; pointer-events: none; }
.nk-grp.is-sel polygon { stroke-width: 2.5; }
.nk-grp.is-sel .nk-grp-tag { fill: var(--nk-cream); }
.nk-grp.is-sel text { fill: var(--nk-cobalt); }
.nk-grp:focus-visible .nk-grp-tag { stroke-width: 3; }
.nk-grp:focus-visible polygon { stroke-dasharray: 3 2; }
.nk-plan-svg.is-drag .nk-grp { cursor: grabbing; }
.nk-plan-cap { margin-top: 14px !important; font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); max-width: 60ch; }
.nk-result { font-size: 1rem; font-weight: 520; line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--nk-cream-30); }
.nk-result .nk-fig, .nk-read .nk-fig, .nk-cabnote .nk-fig, #nk-year-pass .nk-fig { color: var(--nk-sun); }
.nk-months-fig { margin: 0; }
.nk-months-svg { display: block; width: 100%; max-width: 320px; height: auto; }
.nk-months-svg rect { fill: var(--nk-cream); }
.nk-months-svg text { fill: var(--nk-cream-78); font: 560 12px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; }
.nk-months-svg .nk-mt-id { fill: var(--nk-cream); font-weight: 700; }
.nk-months-fig figcaption { margin-top: 6px; font-size: .8125rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); }

/* controls: cream outlines, 44px; chosen is filled cream */
.nk-ctl { display: grid; gap: 14px; }
.nk-page:not(.nk-js) .nk-ctl-js, .nk-page:not(.nk-js) .nk-hint2 { display: none; }
.nk-ctl-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: 12px; }
.nk-ctl-l { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--nk-cream-78); }
.nk-chips, .nk-seg, .nk-step { display: flex; flex-wrap: wrap; }
.nk-chips { gap: 8px; }
.nk-chip, .nk-segb, .nk-stepb {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--nk-cream); background: transparent; color: var(--nk-cream);
  font: 600 .9375rem/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; cursor: pointer; border-radius: 0;
  transition: background-color .24s var(--nk-ease), color .24s var(--nk-ease);
}
.nk-seg .nk-segb + .nk-segb { margin-left: -1px; }
.nk-chip:hover, .nk-segb:hover, .nk-stepb:hover { background: var(--nk-cobalt-lit); }
.nk-chip[aria-pressed="true"], .nk-segb[aria-checked="true"] { background: var(--nk-cream); color: var(--nk-cobalt); }
.nk-stepb { display: inline-grid; place-items: center; padding: 0; }
.nk-stepb svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.nk-stepb:disabled { opacity: .4; cursor: default; }
.nk-step output { display: inline-grid; place-items: center; min-width: 5.5em; min-height: 44px; border-block: 1px solid var(--nk-cream); font-size: 1rem; }

/* ── your day ─────────────────────────────────────────────────────────────────────── */
.nk-day-head { grid-column: 1 / span 6; display: grid; gap: 16px; }
.nk-day-head p { max-width: 46ch; }
.nk-day-ctl { grid-column: 7 / span 6; justify-self: end; align-self: end; }
.nk-dayfig { grid-column: 1 / -1; position: relative; height: 452px; }
.nk-day-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nk-day-svg.is-in .nk-ribbon { animation: nk-in .2s var(--nk-ease); }
@keyframes nk-in { from { opacity: .35; } }
.nk-day-svg .nk-room path { fill: none; stroke: var(--nk-cream-30); stroke-width: 1.25; }
.nk-day-svg .nk-room-w rect { fill: url(#nk-p-cross); stroke: var(--nk-cream); stroke-width: 2; }
.nk-day-svg .nk-cable { fill: none; stroke: var(--nk-cream); stroke-width: 1.5; stroke-dasharray: 4 4; }
.nk-day-svg .nk-pulse { fill: none; stroke: var(--nk-sun); stroke-width: 3; stroke-linecap: round; }
.nk-b-roof { fill: var(--nk-sun); }
.nk-b-bat { fill: var(--nk-cream); fill-opacity: .9; }
.nk-b-grid { fill: url(#nk-p-grid); }
.nk-b-exp { fill: url(#nk-p-exp); }
.nk-b-chg { fill: url(#nk-p-chg); }
.nk-l-load { fill: none; stroke: var(--nk-cream); stroke-width: 2; }
.nk-l-gen { fill: none; stroke: var(--nk-sun); stroke-width: 1.25; }
.nk-day-svg .nk-floor { stroke: var(--nk-cream); stroke-width: 2.25; }
.nk-day-svg .nk-ticks, .nk-day-svg .nk-scale path { stroke: var(--nk-cream); stroke-width: 1; fill: none; }
.nk-day-svg text { fill: var(--nk-cream-78); font: 560 13px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nk-day-svg .nk-hourline { stroke: var(--nk-cream); stroke-width: 1; stroke-dasharray: 2 3; }
.nk-day-svg .nk-cab-o { fill: none; stroke: var(--nk-cream); stroke-width: 2; }
.nk-day-svg .nk-cab-none { stroke-dasharray: 5 4; stroke: var(--nk-cream-30); }
.nk-day-svg .nk-soc { fill: var(--nk-sun); }
.nk-day-svg .nk-res { stroke: var(--nk-cream); stroke-width: 1.25; stroke-dasharray: 3 3; }
.nk-tok {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; margin-left: 0;
  border: 1px solid var(--nk-cream); background: var(--nk-cobalt); color: var(--nk-cream); cursor: grab; touch-action: none; user-select: none;
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nk-tok svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; flex: none; }
.nk-tok::before { content: ""; position: absolute; left: -1px; top: 100%; width: 1px; height: var(--nk-pin, 100px); background: var(--nk-cream-78); }
.nk-tok::after { content: ""; position: absolute; left: -1px; top: calc(100% + 5px); width: var(--nk-span, 40px); height: 3px; background: var(--nk-cream); }
.nk-tok:hover, .nk-tok.is-held { background: var(--nk-cobalt-lit); }
.nk-tok.is-held { cursor: grabbing; }
.nk-hour { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; cursor: ew-resize; touch-action: none; border-radius: 50%; }
.nk-hour::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--nk-sun); }
.nk-hour:hover::after, .nk-hour:focus-visible::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid var(--nk-cream); }
.nk-page:not(.nk-js) .nk-hour { display: none; }
.nk-dayfig.is-tall .nk-tok { transform: translate(-100%, -50%); padding: 0 3px; height: 34px; }
.nk-dayfig.is-tall .nk-tok-t { display: none; }
.nk-dayfig.is-tall .nk-tok::before { left: auto; right: 100%; top: 50%; width: var(--nk-pin, 100px); height: 1px; }
.nk-dayfig.is-tall .nk-tok::after { left: auto; right: calc(100% + 4px); top: 50%; width: 3px; height: var(--nk-span, 40px); }
.nk-dayfig.is-tall .nk-cabnote { position: absolute; left: 72px; right: 0; top: auto; bottom: 0; width: auto; padding: 0; margin: 0 !important; }
.nk-cabnote { position: absolute; right: 0; top: 356px; width: 18%; font-size: .8125rem; font-weight: 560; letter-spacing: .01em; line-height: 1.4; color: var(--nk-cream); padding-left: 10px; }
.nk-day-foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; margin-top: 30px; }
.nk-day-foot .nk-read { grid-column: 1 / span 6; font-size: 1rem; font-weight: 520; }
.nk-day-foot .nk-result { grid-column: 1 / span 6; }
.nk-day-foot .nk-small { grid-column: 8 / span 5; grid-row: 1; }
.nk-day-foot .nk-close { grid-column: 8 / span 5; grid-row: 2; align-self: start; padding-top: 14px; border-top: 1px solid var(--nk-cream-30); }

/* ── afterwards: the meter box and a week of prints ─────────────────────────────── */
.nk-after .nk-copy-in { grid-column: 1 / span 6; }
.nk-after .nk-after-photo { grid-column: 8 / span 5; }
.nk-meter { grid-column: 1 / -1; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; align-items: start; margin-top: 24px; }
.nk-meterbox { width: 280px; }
.nk-metercut { overflow: visible; }
.nk-week { padding-top: 190px; }
.nk-prints { margin: 0; padding: 26px 0 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; border-top: 1px solid var(--nk-cream-78); }
.nk-prints li { position: relative; display: grid; gap: 8px; justify-items: start; font-size: .75rem; font-weight: 560; letter-spacing: .02em; color: var(--nk-cream-78); }
.nk-prints li::before { content: ""; position: absolute; left: 50%; top: -26px; height: 26px; width: 1px; background: var(--nk-cream-78); }
.nk-prints .nk-ring { fill: none; stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-prints svg { width: 100%; height: auto; display: block; }
.nk-prints .nk-pr-roof { fill: none; stroke: var(--nk-cream-78); stroke-width: 1; }
.nk-prints rect { fill: none; stroke: var(--nk-cream); stroke-width: 1; }
.nk-prints rect.nk-drop { fill: url(#nk-p-grid); }
.nk-prints li.is-drop span { color: var(--nk-cream); font-weight: 700; }
.nk-leader { margin-top: 18px !important; }

/* ── the job as a day ─────────────────────────────────────────────────────────────── */
.nk-arc .nk-h2 { max-width: 18ch; }
.nk-arc-lede { font-size: clamp(1.125rem, 1.02rem + .38vw, 1.3125rem); font-weight: 440; max-width: 40ch; margin-top: 8px !important; }
.nk-arcbox { margin-top: clamp(24px, 4vw, 56px); }
.nk-arccut .nk-sunpath { stroke-width: 1.5; }
.nk-arccut .nk-arc-ticks { fill: none; stroke: var(--nk-cream-78); stroke-width: 1; }
.nk-arccut .nk-leads path { fill: none; stroke: var(--nk-cream-30); stroke-width: 1; }
.nk-arccut .nk-stn { fill: var(--nk-cobalt); stroke: var(--nk-cream); stroke-width: 1.5; }
.nk-arccut .nk-key-pv { fill: none; stroke: var(--nk-night); stroke-width: 7; }
.nk-arcdisc { transform-box: view-box; transform-origin: 660px 700px; transform: rotate(var(--nk-dusk)); }
.nk-arcdisc circle { fill: var(--nk-sun); }
.nk-stations { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.nk-stations li { padding-top: 16px; border-top: 1px solid var(--nk-cream-30); }
.nk-stations p { font-size: 1rem; max-width: 34ch; }
.nk-stations .nk-detail { margin-top: 20px; max-width: 280px; }
.nk-st-dusk { background: linear-gradient(180deg, rgba(13, 26, 74, .0), rgba(13, 26, 74, .0)); }

/* ── the footing: ask us round ───────────────────────────────────────────────────── */
.nk-ask { padding-bottom: 0; }
.nk-ask-copy { grid-column: 2 / span 5; position: sticky; top: calc(var(--bar-h, 40px) + var(--nk-nav) + 32px); }
.nk-hills-fig { margin: 24px 0 0; }
.nk-hills { display: block; width: 100%; height: auto; overflow: visible; }
.nk-hills .nk-contour { fill: none; stroke: var(--nk-cream); stroke-width: 1.5; }
.nk-hills .nk-c2 { stroke: var(--nk-cream-30); stroke-width: 1; }
.nk-hills .nk-subs path { stroke: var(--nk-cream); stroke-width: 1.25; }
.nk-hills .nk-subs text { fill: var(--nk-cream-78); font: 560 13px/1 "Tasa Orbiter", "Tasa Fallback", sans-serif; letter-spacing: .02em; }
.nk-hills-fig figcaption { margin-top: 10px; }
.nk-footing { margin-top: clamp(72px, 9vw, 140px); }
.nk-footcut { max-height: 200px; }

.nk-form { grid-column: 8 / span 5; display: grid; gap: 22px; padding-top: 6px; }
.nk-field { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.nk-field > label, .nk-field legend { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--nk-cream-78); padding: 0; margin-bottom: 8px; }
.nk-field input[type="text"], .nk-field input[type="email"], .nk-field select, .nk-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--nk-cream); border-radius: 0; background: transparent; color: var(--nk-cream);
  font: 420 1rem/1.4 "Tasa Orbiter", "Tasa Fallback", sans-serif;
}
.nk-field select option { color: #0D1A4A; }
.nk-field textarea::placeholder { color: var(--nk-cream-78); }
.nk-opts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nk-opts-col { flex-direction: column; }
.nk-opt { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; min-height: 36px; }
.nk-opt input, .nk-pt input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--nk-cream); background: transparent; flex: none; display: grid; place-items: center; cursor: pointer; }
.nk-opt input[type="radio"], .nk-pt input { border-radius: 50%; }
.nk-opt input::after, .nk-pt input::after { content: ""; width: 10px; height: 10px; background: var(--nk-cream); transform: scale(0); transition: transform .18s var(--nk-ease); }
.nk-opt input[type="radio"]::after, .nk-pt input::after { border-radius: 50%; }
.nk-opt input:checked::after, .nk-pt input:checked::after { transform: scale(1); }
.nk-rose { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 8px 0 0; }
.nk-rose-svg { position: absolute; inset: 15%; width: 70%; height: 70%; fill: none; stroke: var(--nk-cream-30); stroke-width: 1.25; }
.nk-pt { position: absolute; width: 0; height: 0; font-size: .875rem; font-weight: 560; }
.nk-pt input { position: absolute; left: -10px; top: -10px; background: var(--nk-cobalt); }
.nk-pt::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; }
.nk-pt span { position: absolute; white-space: nowrap; cursor: pointer; }
.nk-pt-n { left: 50%; top: 20%; } .nk-pt-ne { left: 71.2%; top: 28.8%; } .nk-pt-e { left: 80%; top: 50%; } .nk-pt-se { left: 71.2%; top: 71.2%; }
.nk-pt-s { left: 50%; top: 80%; } .nk-pt-sw { left: 28.8%; top: 71.2%; } .nk-pt-w { left: 20%; top: 50%; } .nk-pt-nw { left: 28.8%; top: 28.8%; }
.nk-pt-n span { bottom: 16px; left: 0; transform: translateX(-50%); }
.nk-pt-s span { top: 16px; left: 0; transform: translateX(-50%); }
.nk-pt-e span { left: 18px; top: 0; transform: translateY(-50%); }
.nk-pt-w span { right: 18px; top: 0; transform: translateY(-50%); }
.nk-pt-ne span { left: 14px; bottom: 12px; } .nk-pt-nw span { right: 14px; bottom: 12px; }
.nk-pt-se span { left: 14px; top: 12px; } .nk-pt-sw span { right: 14px; top: 12px; }
.nk-pt input:checked + span { color: var(--nk-cream); font-weight: 700; }
.nk-formline { font-size: .9375rem; font-weight: 520; padding-top: 14px; border-top: 1px solid var(--nk-cream-30); }
.nk-form .nk-btn { justify-self: start; }
.nk-status { min-height: 1.5em; font-size: .9375rem; font-weight: 560; }

.nk-foot { position: relative; padding-block: 0 48px; }
.nk-titleblock { display: grid; grid-template-columns: 2fr 1.3fr 1.3fr 1fr; gap: 0; border: 1px solid var(--nk-cream); padding: 0; font-size: .8125rem; font-weight: 520; letter-spacing: .02em; }
.nk-titleblock > * { padding: 16px 18px; border-left: 1px solid var(--nk-cream-30); margin: 0; }
.nk-titleblock > :first-child { border-left: 0; }
.nk-foot-name { display: flex; gap: 12px; align-items: flex-start; font-weight: 640; }
.nk-foot-nav { list-style: none; display: grid; gap: 4px; }

.nk-check { display: none; }
.nk-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ── the section drawn in as you reach each storey ──────────────────────────────── */
@keyframes nk-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nk-hatch { from { opacity: 0; } to { opacity: 1; } }
@keyframes nk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nk-pulse { from { stroke-dashoffset: .05; } to { stroke-dashoffset: -1; } }
@keyframes nk-disc { from { transform: rotate(var(--nk-a0)); } to { transform: rotate(var(--nk-dusk)); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nk-storey { view-timeline: --nk-st block; }
    .nk-draw .nk-ink { stroke-dasharray: 1; animation: nk-ink linear both; animation-timeline: --nk-st; animation-range: entry 5% cover 30%; }
    .nk-draw .nk-hatch { animation: nk-hatch linear both; animation-timeline: --nk-st; animation-range: cover 20% cover 38%; }
    .nk-draw .nk-dims { animation: nk-fade linear both; animation-timeline: --nk-st; animation-range: cover 30% cover 42%; }
    .nk-draw .nk-lvls { animation: nk-fade linear both; animation-timeline: --nk-st; animation-range: cover 34% cover 46%; }
    .nk-draw .nk-lbls, .nk-draw .nk-dtag { animation: nk-fade linear both; animation-timeline: --nk-st; animation-range: cover 38% cover 50%; }
    .nk-draw .nk-pulse, .nk-day-svg .nk-pulse { stroke-dasharray: .05 1; animation: nk-pulse linear both; animation-timeline: --nk-st; animation-range: cover 25% cover 75%; }
    .nk-arcdisc { animation: nk-disc linear both; animation-timeline: --nk-st; animation-range: cover 10% cover 70%; }
  }
  .nk-nosda .nk-draw .nk-ink { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--nk-ease); }
  .nk-nosda .nk-draw .nk-hatch { opacity: 0; transition: opacity .4s var(--nk-ease) .2s; }
  .nk-nosda .nk-draw :is(.nk-dims, .nk-lvls, .nk-lbls, .nk-dtag) { opacity: 0; transition: opacity .24s var(--nk-ease) .4s; }
  .nk-nosda :is(.nk-draw, .nk-day-svg) .nk-pulse { stroke-dasharray: .05 1; stroke-dashoffset: .05; }
  .nk-nosda .nk-arcdisc { transform: rotate(var(--nk-a0)); transition: transform 1.2s var(--nk-ease); }
  .nk-nosda .is-drawn .nk-draw .nk-ink { stroke-dashoffset: 0; }
  .nk-nosda .is-drawn .nk-draw .nk-hatch { opacity: 1; }
  .nk-nosda .is-drawn .nk-draw :is(.nk-dims, .nk-lvls, .nk-lbls, .nk-dtag) { opacity: 1; }
  .nk-nosda .is-drawn :is(.nk-draw, .nk-day-svg) .nk-pulse { stroke-dashoffset: -1; transition: stroke-dashoffset 1.2s linear .5s; }
  .nk-nosda .is-drawn .nk-arcdisc { transform: rotate(var(--nk-dusk)); }
}

/* ── narrower sheets ──────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nk-year-side { grid-column: 8 / span 5; }
  .nk-day-ctl { grid-column: 1 / -1; justify-self: start; }
  .nk-day-head { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .nk-walls { display: none; }
  .nk-room { margin-inline: 0; }
  .nk-cols { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .nk-cols > *, .nk-copy-in, .nk-cols > .nk-detail-wide, .nk-cols > .nk-detail-tall, .nk-form, .nk-plan-col, .nk-year-side, .nk-ask-copy, .nk-after .nk-copy-in, .nk-after .nk-after-photo, .nk-day-head, .nk-day-ctl { grid-column: 1; }
  .nk-cols > .nk-detail-tall { max-width: 420px; }
  .nk-day-foot { grid-template-columns: minmax(0, 1fr); }
  .nk-day-foot > * { grid-column: 1 !important; grid-row: auto !important; }
  .nk-meter { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nk-week { padding-top: 0; }
  .nk-stations { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .nk-titleblock { grid-template-columns: minmax(0, 1fr); }
  .nk-titleblock > * { border-left: 0; border-top: 1px solid var(--nk-cream-30); }
  .nk-titleblock > :first-child { border-top: 0; }
}
@media (max-width: 899px) {
  .nk-year .nk-cols { row-gap: 22px; }
  .nk-year-side { display: contents; }
  .nk-year-side > * { order: 5; }
  .nk-year-side > .nk-h2 { order: 1; margin-bottom: 0; }
  .nk-year-side > .nk-h2 + p { order: 2; }
  .nk-plan-col { order: 3; position: static; }
  .nk-year-side > .nk-ctl { order: 4; }
  .nk-ask-copy { position: static; }
}
@media (max-width: 700px) {
  .nk-plan-col { overflow: hidden; margin-inline: calc(-1 * var(--nk-m)); padding-inline: var(--nk-m); }
  .nk-plan { width: 124%; margin-left: -14%; }
  .nk-plan-ink text { font-size: 17px; }
  .nk-band { display: flex; flex-direction: column; }
  .nk-band .nk-onband, .nk-band .nk-rake { position: static; order: -1; transform: none; white-space: normal; font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem); margin: 0 0 20px; }
  .nk-rake span, .nk-onfloor span { display: inline; }
  .nk-band .nk-draw { height: min(46svh, 260px); }
  .nk-draw .nk-lbls, .nk-draw .nk-dims text, .nk-draw .nk-lvls text, .nk-draw .nk-rays-cap { display: none; }
  .nk-stations { grid-template-columns: minmax(0, 1fr); }
  .nk-prints { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .nk-meterbox { width: 220px; }
  .nk-arccut .nk-leads { display: none; }
  .nk-prints li:nth-child(n+5)::before { display: none; }
  .nk-dayfig { height: 560px; }
  .nk-hills .nk-subs text { display: none; }
  .nk-ctl-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nk-segb { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nk-page *, .nk-page *::before, .nk-page *::after { transition: none !important; animation: none !important; }
}