/* ==========================================================================
   North Star — "Ink & Paper" design system
   Source of truth: docs/refactor/north-star/docs/CRAFT-STANDARD.md
   Token values taken from the running prototypes (design/*.dc.html).
   North Star pages link ONLY this sheet (+ Google Fonts). Markup is
   prototype-faithful inline styles referencing these tokens; this file
   carries what inline can't: tokens, reset, keyframes, focus/hover/active
   states, reduced-motion.
   ========================================================================== */

:root {
  /* surfaces */
  --paper: #ffffff;          /* page bg where you read */
  --paper-2: #f6f6f4;        /* alternating / subtle panel */
  --panel: #ffffff;          /* card bg */
  --ink: #0d0d0f;            /* instrument band bg; primary ink on white */
  --ink-warm: #0d0d0f;       /* dark band variant */
  --ink-soft: #22201b;

  /* gold — the single rationed signal */
  --gold: #d8a035;           /* bright gold — DARK bands only */
  --gold-deep: #946810;      /* gold text on white (AA) */
  --gold-deep-alt: #8b6a1f;
  --gold-soft: #f3d89c;
  --gold-line: #c9a049;

  /* text */
  --t1: #0d0d0f;             /* body on white */
  --t2: #44444a;             /* secondary */
  --t3: #6b6b72;             /* tertiary / captions */

  /* hairlines */
  --hair: rgba(0, 0, 0, 0.09);
  --hair2: rgba(0, 0, 0, 0.16);
  --haird: rgba(255, 255, 255, 0.13);

  /* type */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Outfit', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  /* stage palette (engine parcel field) */
  --stage-inactive: #d8d8d4;
  --stage-proposed: #8a7cb8;
  --stage-approved: #3f72d4;
  --stage-construction: #d8a035;
  --stage-completed: #3a9d5d;

  /* motion */
  --m-micro: 150ms;
  --m-state: 300ms;
  --m-entrance: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* cadence tokens — one source so the page's pulses/scans can't drift */
  --c-pulse: 2.4s;   /* gold "live" status dot */
  --c-scan: 6.5s;    /* instrument scan sweep */
  --c-sweep: 3.2s;   /* one-shot solve convergence */
}

/* ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--t1);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; }
::selection { background: #d8a035; color: #141414; }

/* ── interaction-state system: focus-visible + active on every control ── */
a, button, input, select, textarea, [role="group"] button { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
button:active { transform: translateY(1px); }
button, a { -webkit-tap-highlight-color: transparent; }

/* ── keyframes (demonstrate, never decorate) ────────────────────────────── */
@keyframes helioRise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes helioScan  { 0% { transform: translateX(-110%); } 100% { transform: translateX(720%); } }
@keyframes helioPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@keyframes wfSweep    { 0% { left: 1%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 99%; opacity: 0; } }
@keyframes invPulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes invScan    { 0% { transform: translateX(-120%); } 100% { transform: translateX(780%); } }
@keyframes mapScan    { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(420%); opacity: 0; } }
@keyframes solveShimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }   /* idle "living archive" breathe on the Cost node — CSS so the §02 rAF rests at 0 */

/* ── component states (the prototype's style-hover, made real) ──────────── */
.ns-navlink { transition: color var(--m-micro) ease; }
.ns-navlink:hover { color: var(--ink); }

/* nav dropdown — a navlink that opens a small paper panel (hover on pointer, focus-within + click for keyboard/touch). Reuses navlink hover; gold stays rationed. */
.ns-navdrop { position: relative; }
.ns-navdrop__trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: color var(--m-micro) ease; }
.ns-navdrop__trigger:hover { color: var(--ink); }
.ns-navdrop__caret { font-size: 9px; line-height: 1; color: var(--t3); transition: transform var(--m-micro) ease, color var(--m-micro) ease; }
.ns-navdrop:hover .ns-navdrop__caret,
.ns-navdrop:focus-within .ns-navdrop__caret,
.ns-navdrop[data-open] .ns-navdrop__caret { transform: rotate(180deg); color: var(--ink); }
.ns-navdrop__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 184px; padding: 6px; background: var(--paper); border: 1px solid var(--hair); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(13,13,15,0.05), 0 14px 34px -18px rgba(13,13,15,0.4);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 91;
  transition: opacity var(--m-micro) ease, transform var(--m-micro) ease, visibility var(--m-micro) ease;
}
/* a small hover bridge so the cursor can cross the gap without the panel closing */
.ns-navdrop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ns-navdrop:hover .ns-navdrop__panel,
.ns-navdrop:focus-within .ns-navdrop__panel,
.ns-navdrop[data-open] .ns-navdrop__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ns-navdrop__item { display: block; padding: 9px 12px; min-height: 44px; box-sizing: border-box; font-size: 13.5px; font-weight: 500; color: var(--t2); letter-spacing: 0.01em; border-radius: 2px; transition: color var(--m-micro) ease, background var(--m-micro) ease; }
.ns-navdrop__item:hover { color: var(--ink); background: var(--paper-2); }

.ns-footlink { transition: color var(--m-micro) ease; }
.ns-footlink:hover { color: #fff; }

.ns-cta-dark { transition: background var(--m-state) ease, border-color var(--m-state) ease, transform var(--m-micro) ease; }
.ns-cta-dark:hover { border-color: var(--gold); background: #16161a; transform: translateY(-1px); }

/* ghost (outlined) CTA — peer-weight secondary door on light surfaces */
.ns-cta-ghost { transition: border-color var(--m-state) ease, transform var(--m-micro) ease; }
.ns-cta-ghost:hover { border-color: var(--gold-line); transform: translateY(-1px); }

.ns-btn-gold { transition: background var(--m-state) ease, border-color var(--m-state) ease; }
.ns-btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

.ns-underline { transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.ns-underline:hover { color: var(--gold-deep); border-color: var(--gold) !important; }

/* cards: gold top-rule reveal + subtle bg shift, all via CSS */
.ns-card { transition: background var(--m-state) ease; }
.ns-card:hover { background: #f8f8f6; }
.ns-card [data-topline] { transition: opacity var(--m-micro) ease; }
.ns-card:hover [data-topline] { opacity: 1 !important; }

.ns-proj { transition: border-color var(--m-state) ease; }
.ns-proj:hover { border-color: var(--hair2); }

.ns-figframe { transition: border-color var(--m-state) ease; }
.ns-figframe:hover { border-color: var(--gold-line); }
.ns-maplaunch { transition: transform var(--m-state) cubic-bezier(0.16,1,0.3,1), box-shadow var(--m-state) ease; will-change: transform; }
.ns-maplaunch:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 32px 64px -26px rgba(216,160,53,0.4) !important; }
/* devmap launcher scene — stage-coloured massing rises in view; static otherwise */
[data-devmap-scene] .bld { transform-box: fill-box; transform-origin: 50% 100%; }
[data-devmap-scene].is-live .bld { animation: bldRise 0.85s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--d, 0s); }
[data-devmap-scene] .scan2 { opacity: 0; }
[data-devmap-scene].is-live .scan2 { animation: mapScan 4.4s ease-in-out 1s infinite; }
@keyframes bldRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── type primitives: one eyebrow / fig / dark-footnote spec so the scale can't drift ── */
.ns-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; }
.ns-fig { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }
.ns-foot-dark { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.6; color: rgba(255,255,255,0.7); }
.ns-solve-resolve:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
/* §02 instrument corner telemetry — desktop only (would crowd the ring on phones) */
.ns-solve-corner { position: absolute; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); pointer-events: none; max-width: 42%; line-height: 1.4; }
@media (max-width: 767px) { .ns-solve-corner { display: none; } }

/* ── composition primitives (DESIGN-DOCTRINE) — so pages COMPOSE these instead of re-deriving ── */
/* P5 · surface scopes: a band declares its surface; text never hard-codes a colour that can go invisible */
.on-paper { color: var(--t2); }
.on-ink { color: rgba(255,255,255,0.66); }
/* P4 · in-line keyword emphasis (the scan layer) — ink-weight on light, white on dark; gold is NEVER body emphasis */
.ns-key { font-weight: 600; color: var(--ink); }
.on-ink .ns-key, [data-band="ink"] .ns-key { color: #fff; }
/* MESSAGING-DOCTRINE L6 · the highlight — the ONE "read this" phrase per block (the marker treatment from ::selection). Rationed ~1/block; ink text on a soft-gold band, box-decoration-break so it wraps cleanly. */
.ns-mark { background: var(--gold-soft); color: var(--ink); font-weight: 600; padding: 0.04em 0.18em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.on-ink .ns-mark, [data-band="ink"] .ns-mark { background: var(--gold-soft); color: #1a1208; }
/* P4 · mono-square bullets (terminal register, never disc) */
.ns-blist { list-style: none; margin: 0; padding: 0; }
.ns-blist li { position: relative; padding-left: 17px; margin: 0 0 8px; }
.ns-blist li:last-child { margin-bottom: 0; }
.ns-blist li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 7px; height: 7px; background: var(--gold-deep); }
.on-ink .ns-blist li::before, [data-band="ink"] .ns-blist li::before { background: var(--gold); }
/* P7 · the named-noun link (quieter than a CTA; the noun itself is the proof link) */
.ns-herolink { color: var(--gold-deep); border-bottom: 1.5px solid var(--gold); font-weight: 500; transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.ns-herolink:hover { color: var(--ink); border-color: var(--gold-deep); }
/* P3 · hero ratio — text-dominant, gadget the witness; collapses to one column (message first) on phones */
.ns-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px,5vw,52px); align-items: center; }
@media (min-width: 768px) { .ns-hero-grid { grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: clamp(40px,4.5vw,64px); } }
/* P2 · section header — lead column + supporting column (full-width earns its width) */
.ns-sec-head { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,36px); }
@media (min-width: 960px) { .ns-sec-head { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(40px,5vw,72px); align-items: center; } }
/* P1/P2 · the SaaS console — left context rail · centre stage · right telemetry rail; one viewport on desktop, stacks on phone */
.ns-console { display: grid; grid-template-columns: 1fr; gap: clamp(18px,2.4vw,26px); position: relative; }
@media (min-width: 1024px) {
  .ns-console { grid-template-columns: minmax(168px,1fr) minmax(0,2.1fr) minmax(200px,1.18fr); gap: 0; align-items: stretch; }
  .ns-console > * { padding-inline: clamp(14px,1.5vw,24px); }
  .ns-console > * + * { border-left: 1px solid rgba(216,160,53,0.14); }
}
.ns-rail { display: flex; flex-direction: column; gap: clamp(14px,1.6vw,20px); }
/* P8 · reusable instrument figure-ground (hairline + radial, never drop-shadow theatrics) — for any dark data band */
.ns-instrument { box-shadow: inset 0 0 0 1px rgba(216,160,53,0.12); }

/* ── R5 mobile: dense underwrite grid stays readable; comfortable tap targets ── */
.ns-uw-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .ns-uw-records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* secondary interactive controls — bump to a comfortable touch height */
[data-pchip], [data-mass-btn], [data-deq-btn], [data-wfbtn], [data-wfrun] { min-height: 44px; }
/* horizontal-scroll wrappers for the wide diagrams get momentum scroll on touch */
.ns-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   LOCATION HEADER — the unified site chrome for the /developments/ location
   pages (the area hub + the 49 area dossiers). Matches the main marketing
   site's <header>: white bar + bottom hairline, the "● HELIO" gold-dot
   wordmark → "/", ns-style nav links, a dark "Work with us" CTA (ns-cta-dark).
   CSS-ONLY responsive (these static pages do NOT load js/ns.js) — the nav
   collapses on phones but every control stays a ≥44px tap target and visible.
   Namespaced `.loc-*` so it can't collide with the main site's inline nav or
   the dossier's `.dc-*` styles.
   ========================================================================== */
/* skip link — off-screen until focused (the hub links ONLY ns.css, so this must live here, not
   only in the area template's inline <style>; the area page's inline rule is identical) */
.dc-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100; }
.dc-skip:focus { left: 16px; top: 16px; }
.loc-hdr { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.loc-hdr__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* wordmark — gold dot + HELIO, → home (identical treatment to the main site) */
.loc-logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.loc-logo__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216,160,53,0.16); }
.loc-logo__word { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: 0.16em; color: var(--ink); }
/* nav — ns navlinks (sentence-case, t2 → ink on hover), reuse .ns-navlink for the hover transition */
.loc-nav { display: flex; align-items: center; gap: clamp(18px,3vw,32px); }
.loc-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--t2); }
.loc-nav a.is-active { color: var(--ink); }
.loc-hdr .ns-cta-dark { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 11px 18px; border: 1.5px solid var(--ink); border-radius: 3px; flex: none; }
.loc-hdr .ns-cta-dark span { font-family: var(--mono); color: var(--gold); }
/* phones: the bar stays one row; the inline nav drops (the two destinations live in
   the footer + body links and the CTA carries the primary action) so nothing wraps or overflows */
@media (max-width: 720px) {
  .loc-nav { display: none; }
  .loc-hdr__inner { min-height: 60px; }
  .loc-logo__word { font-size: 19px; }
}

/* ==========================================================================
   AREA DIRECTORY (hub) — the /developments/neighborhoods/ index rebuilt on
   ns.css. An Ink & Paper card grid: real surface, hairline border, area name
   in display type, "N projects · M units" in mono, a gold underline reveal on
   hover. Namespaced `.loc-dir*`.
   ========================================================================== */
.loc-main { max-width: 1280px; margin: 0 auto; padding: clamp(36px,5vw,64px) clamp(20px,4vw,40px) clamp(56px,7vw,88px); }
.loc-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); margin: 0 0 18px; }
.loc-crumb a { color: var(--t3); border-bottom: 1px solid var(--hair); transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.loc-crumb a:hover { color: var(--ink); border-color: var(--gold-line); }
.loc-h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(34px,4.6vw,54px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.loc-lead { font-size: clamp(15px,1.3vw,17px); line-height: 1.65; color: var(--t2); max-width: 68ch; margin: 0 0 clamp(28px,3.5vw,40px); text-wrap: pretty; }
.loc-lead b { color: var(--ink); font-weight: 600; }
.loc-dir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.loc-dir__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 116px; background: var(--panel); border: 1px solid var(--hair); border-radius: 6px; padding: 18px 20px; color: var(--ink); transition: border-color var(--m-state) ease, background var(--m-state) ease, transform var(--m-micro) ease; }
.loc-dir__card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); border-radius: 6px 6px 0 0; opacity: 0; transition: opacity var(--m-micro) ease; }
.loc-dir__card:hover { border-color: var(--hair2); background: #f8f8f6; transform: translateY(-2px); }
.loc-dir__card:hover::after { opacity: 1; }
.loc-dir__name { font-family: var(--disp); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.loc-dir__card:hover .loc-dir__name { color: var(--gold-deep); }
.loc-dir__meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; color: var(--t2); font-variant-numeric: tabular-nums; }
.loc-dir__go { font-family: var(--mono); color: var(--gold-deep); font-size: 13px; transition: transform var(--m-micro) ease; }
.loc-dir__card:hover .loc-dir__go { transform: translateX(3px); }
/* closing owner CTA — a quiet paper panel with the dark "Work with us" door */
.loc-cta { margin-top: clamp(36px,4.5vw,56px); background: var(--paper-2); border: 1px solid var(--hair); border-radius: 8px; padding: clamp(24px,3vw,36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.loc-cta__txt { max-width: 46ch; }
.loc-cta__h { font-family: var(--disp); font-weight: 600; font-size: clamp(19px,2vw,24px); line-height: 1.2; color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
.loc-cta__sub { font-size: 14px; line-height: 1.55; color: var(--t2); margin: 0; }
.loc-foot { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px) clamp(40px,5vw,64px); }
.loc-foot__rule { border: 0; border-top: 1px solid var(--hair); margin: 0 0 20px; }
.loc-foot p { font-family: var(--mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.01em; color: var(--t3); margin: 0; max-width: 80ch; }
.loc-foot a { color: var(--t2); border-bottom: 1px solid var(--hair); transition: color var(--m-micro) ease, border-color var(--m-micro) ease; }
.loc-foot a:hover { color: var(--ink); border-color: var(--gold-line); }

/* reduced motion: show final state, no movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}