/* Site developed and built by sitethreesixty.com */

/* ============================================================
   home-critical.css — System base + homepage Zone 1 (hero)
   Everything needed for first paint on the homepage.

   Contains (per 00-FOUNDATION.md): reset, Frame, Framework, Zone base,
   positions, 1000px breakpoint, the two shared FIXTURES (nav + slim
   footer — both position:fixed, so both are critical per the CLS rule),
   the hero-top coordinate/breadcrumb pattern (§9), and Home's own Zone 1.
   ============================================================ */

/* ============================================================
   SHARED BASE
   Everything from here to END SHARED BASE must be BYTE-FOR-BYTE
   IDENTICAL to the same region in the other critical file (Lesson #5).
   Verify with checklist gate B4 before every handover:
     sed -n '/^   SHARED BASE$/,/^   END SHARED BASE$/p' css/home-critical.css  > /tmp/sb1
     sed -n '/^   SHARED BASE$/,/^   END SHARED BASE$/p' css/inner-critical.css > /tmp/sb2
     diff /tmp/sb1 /tmp/sb2 && echo IDENTICAL
   Add to BOTH files or NEITHER. Never one.
   ============================================================ */

/* --- Reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  color: var(--text-on-light);
  background-color: var(--bg-light);
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}

/* No-flash guards for JS-revealed UI (confirmation zone + sources modal).
   These are visibility rules that must hold on first paint before the
   deferred sheet loads (CLS mental model — §CLAUDE.md).
   `!important` is a PLANNER-APPROVED EXCEPTION (Steve, 4 Aug 2026): it
   guards against the site's own display:flex/grid rules winning on
   specificity — the same category as a third-party override. Without it,
   hidden modal content can flash on first paint. */
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }

/* --- Skip link --- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-small);
  z-index: var(--z-overlay);
  background-color: var(--chalk);
  color: var(--graphite);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* --- Global focus indicator (WCAG 2.2 AA, 2.4.7 + 2.4.11) ---
   Added 4 Aug 2026 after the 2nd independent inspection found NO global
   focus style: only .skip-link, .cite and two footer links had one, so
   nav, every button, every body link and the CTA were invisible to
   keyboard users. Critical, not deferred — a focus ring that arrives with
   a deferred sheet leaves early keyboard interaction unindicated.
   :focus-visible (not :focus) so it never shows on mouse clicks.
   Torch reads AA on both Graphite and Chalk; the offset keeps it clear of
   the element's own border. */
:focus-visible {
  outline: var(--border-medium) solid var(--torch);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Inputs replace their border-glow with the ring rather than stacking both */
.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: var(--border-medium) solid var(--torch);
  outline-offset: 1px;
}

/* Flex and grid children default to min-width:auto and refuse to shrink
   below their content's intrinsic width — the longest unbreakable word in a
   heading then forces horizontal scroll. Every hero copy column needs
   min-width:0. Extended 4 Aug 2026 after larger (legible) text pushed 320px
   viewports over. Shared-base rule: keep byte-identical across both files. */
.hero-inner,
.hero-copy,
.hero-gauge,
.core-hero-inner,
.core-hero-copy,
.managed-hero .hero-copy,
.pricing-hero .hero-copy {
  min-width: 0;
}

/* --- Frame --- */

.frame {
  width: 100%;
  padding: 0 var(--container-pad);
}

/* --- Framework --- */

.framework {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* --- Zone base (subgrid) --- */

.zone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--zone-pad);
}

/* --- Positions (§5 / §6.0 — the ONLY layer a width cap may live on) --- */

.pos-full    { grid-column: 1 / -1; }
.pos-wide    { grid-column: 2 / -2; }
.pos-content { grid-column: 3 / -3; width: 100%; max-width: 1200px; justify-self: center; }
.pos-narrow  { grid-column: 4 / -4; width: 100%; max-width: 900px; justify-self: center; }
.pos-left    { grid-column: 1 / 7; }
.pos-right   { grid-column: 7 / -1; }

/* --- Responsive: single breakpoint at 1000px --- */

@media (max-width: 1000px) {
  /* Build Lesson #13 (fine-line CLAUDE.md): when positions collapse to
     grid-column:1/-1 the content goes edge-to-edge within the subgrid — the
     zone must provide the side gutter. System-level shared-base rule; keep
     this block byte-for-byte identical to inner-critical.css (Lesson #5). */
  .zone {
    padding-inline: var(--container-pad);
  }

  .pos-full,
  .pos-wide,
  .pos-content,
  .pos-narrow,
  .pos-left,
  .pos-right {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }

}

/* Nav hides over the hero, then slides in solid past it. Every page has a
   dark Zone 1 carrying its own wordmark, and js/fixtures.js adds .nav-hidden
   on all of them — Pricing and Explore Managed were showing a nav over their
   hero (duplicate wordmark) purely because this rule was missing from
   inner-critical.css. Consolidated into the shared base 4 Aug 2026 (Steve).
   Keep byte-identical across both critical files. */
.nav {
  transition: background-color var(--speed-normal) var(--ease-default),
              border-color var(--speed-normal) var(--ease-default),
              padding var(--speed-normal) var(--ease-default),
              transform var(--speed-normal) var(--ease-default),
              opacity var(--speed-normal) var(--ease-default);
}

.nav.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   END SHARED BASE
   Everything below this line is HOMEPAGE-SPECIFIC.
   ============================================================ */

/* ============================================================
   FIXTURE 1 — Nav (§8a)
   Sits outside the grid entirely, anchored to viewport not content.
   position:fixed + mobile hidden/drawer state + scroll-colour transition
   are all critical — never deferred (workspace CLS rule).
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1.5rem, 5vw, 4rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--speed-normal) var(--ease-default),
              border-color var(--speed-normal) var(--ease-default),
              padding var(--speed-normal) var(--ease-default),
              transform var(--speed-normal) var(--ease-default),
              opacity var(--speed-normal) var(--ease-default);
}

.nav.solid {
  background: var(--graphite);
  border-bottom-color: color-mix(in srgb, var(--chalk) 10%, transparent);
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.nav .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.4rem;
  letter-spacing: var(--tracking-tight);
  color: var(--chalk);
  text-decoration: none;
}

.nav .brand .tsx { color: var(--torch); }
.nav .brand .deg { color: var(--torch); font-size: .78em; vertical-align: .32em; }

.nav .links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav .links a {
  font-family: var(--font-body);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-normal);
  color: var(--chalk);
  text-decoration: none;
  position: relative;
  padding: .25rem 0;
  transition: color var(--speed-fast) var(--ease-default);
}

.nav .links a:hover { color: var(--torch-bright); }
.nav .links a.active { color: var(--torch-bright); }
.nav .links a.active::after {
  content: "\00B0";
  position: absolute;
  right: -.7em;
  top: -.1em;
  color: var(--torch);
  font-size: 1.1em;
  line-height: 1;
}

.nav .cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--font-caption);
  color: var(--chalk);
  background: var(--torch-deep);
  padding: .65rem 1.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-default);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  white-space: nowrap;
}

.nav .cta:hover { background: var(--torch-deepest); }

/* Mobile nav — minimal drawer. Hidden/off-screen initial state must be
   critical (CLS rule 7) — the toggle-open state can be handled by JS
   adding .nav-open and is safe to keep here alongside it. */
.nav .nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--chalk);
  cursor: pointer;
  padding: .5rem;
}

@media (max-width: 1000px) {
  .nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav .links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: 2rem clamp(1.5rem, 8vw, 3rem);
    background: var(--graphite);
    transform: translateX(100%);
    transition: transform var(--speed-normal) var(--ease-default);
  }

  .nav .links.is-open {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav .links {
    transition: none;
  }
}


/* ============================================================
   Hero-top coordinate + breadcrumb pattern (§9 — every page)
   ============================================================ */

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Wrap + shrink: at 360px the wordmark and the coordinate readout no
     longer fit on one row now that small text renders at a legible size,
     and the coords overflowed the viewport by 5-21px. flex-wrap lets the
     coords drop; min-width:0 lets them shrink rather than push. */
  flex-wrap: wrap;
  gap: var(--space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
}

.brandcol {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);   /* 600 — the brand statement (Steve, 2 Aug) */
  font-size: clamp(1.75rem, 3vw, 2.4rem); /* noticeably bigger — carries the brand alone on the hero (nav is hidden here) */
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.wordmark .tsx { color: var(--torch); }
.wordmark .deg { color: var(--torch); font-size: .72em; vertical-align: .3em; }

.breadcrumb-bearing {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  display: flex;
  gap: .55em;
  align-items: center;
}

.bc-page { color: var(--chalk); }
.bc-sep { color: var(--slate); }
.bc-deg { color: var(--torch-bright); }

.coords {
  min-width: 0;
  /* The readout ships with the GREENWICH fallback for a correct first paint
     (zero CLS), then /api/where swaps in the visitor's real city AFTER LCP.
     Without this the text simply flicked from one word to another. The swap
     now cross-fades: JS sets .is-swapping, changes the text, clears it.
     Motion here is a SETTLE, not decoration — the same grammar as the
     instruments (perform once, then rest). */
  transition: opacity var(--speed-slow) var(--ease-default);
  /* On one row this sits right, opposite the wordmark. Once .hero-top's
     flex-wrap drops it to its OWN row, a shrink-to-fit box with text-align
     right leaves "LONDON" floating mid-line — right-aligned inside a narrow
     box that itself sits at the row start. margin-left:auto keeps it right
     while it shares a row, and full-width + left when it does not. */
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--font-mono);
  line-height: 1.5;
}

.coords.is-swapping { opacity: 0; }

.coords .loc {
  display: block;
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--chalk);
}

.coords .loc.live { color: var(--torch-bright); }
.coords .loc.live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--torch);
  margin-right: 6px;
  vertical-align: middle;
}

.coords .ll {
  display: block;
  /* The coordinate is ONE value — it must not break after "°N". At ~160px in
     mono it fits inside a 360px viewport with room to spare, so nowrap costs
     nothing; without it the string splits across two lines for no reason.
     (.hero-top's flex-wrap still lets the whole block drop below the wordmark
     when it genuinely cannot sit alongside — that is a different wrap.) */
  white-space: nowrap;
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-normal);
  color: var(--slate);
  margin-top: .15rem;
}

/* ============================================================
   Homepage Zone 1 — Hero (dark scheme) — the Bearings Hero
   BLUEPRINTS/02-HOME.md §Zone 1. Above-the-fold in full: hero-top
   (shared, above), hero-inner two-column grid (copy + instrument
   panel), H1/sub/button, panel border/rows. Zero reflow on first
   paint (§CLS mental model).
   ============================================================ */

/* --- Zone 1 colour scheme --- */

.zone-hero {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

/* --- Hero container --- */

.hero {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- Hero-inner: copy (~1.1fr) / panel (~0.9fr), collapses ≤800px --- */

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Hero eyebrow --- */

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--torch-bright);
}

/* --- Hero H1 (LOCKED copy, BLUEPRINTS/02-HOME.md §Zone 1) --- */

.hero-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--chalk);
}

.hero-h1 .dot {
  color: var(--torch);
}

/* Line-break control (§CLS font-swap lesson) — hidden by default, shown
   only above the breakpoint where the break reads correctly. */


/* --- Hero sub (LOCKED copy) — ch measure only, never px/rem (§5/§6.0a) --- */

.hero-sub {
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
  color: var(--chalk);
  max-width: 34ch;
}

/* --- Hero CTA --- */

.hero .btn-primary {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--weight-bold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  background-color: var(--torch-deep);
  color: var(--text-on-dark);
  transition: background-color var(--speed-normal) var(--ease-default),
              transform var(--speed-fast) var(--ease-default);
}

.hero .btn-primary:hover {
  background-color: var(--torch-deepest);
  color: var(--chalk);
  transform: translateY(-2px);
}

/* --- The instrument panel (hero-mockup.html Version A, §Zone 1) ---
   Bordered mono panel: header row (MANAGEMENT LEVELS / 360°), three
   tier rows (name + desc + bearing figure + compass letter), ratio
   strip footer. All above-the-fold — fully critical, zero reflow. */

.panel {
  border: 1px solid color-mix(in srgb, var(--chalk) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.75rem;
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--chalk) 2%, transparent);
}

.panel-label {
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}

.tier-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--chalk) 12%, transparent);
}

.tier-row:last-of-type {
  border-bottom: none;
}

.tier-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.35rem;
  letter-spacing: var(--tracking-tight);
  color: var(--chalk);
}

.tier-name .dot {
  color: var(--torch);
}

.tier-desc {
  /* Uppercase mono with wide tracking breaks badly at "SELF-MANAGED";
     balance spreads the two lines evenly instead of orphaning a fragment. */
  text-wrap: balance;
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-top: .15rem;
}

.tier-bearing {
  /* "22° E" is one reading — it must never break between figure and cardinal. */
  white-space: nowrap;
  font-size: var(--font-body-size);
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

.tier-bearing .bearing-fig {
  color: var(--torch-bright);
}

.ratio-strip {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--slate);
}

.ratio-strip b {
  color: var(--chalk);
  font-weight: var(--weight-regular);
}

/* ============================================================
   Homepage Zone 2 — Solari board RESTING layout (critical)
   §Zone 2 / §CLS rule 10: the board sits immediately under the hero
   (above or at the fold on desktop) — its zone padding, grid layout,
   eyebrow, and tile RESTING dimensions must be critical to avoid a
   section-height shift when the deferred flip-animation CSS loads.
   Only the flip ANIMATION (@keyframes solari-drop, .is-flipping) and
   the seam-line pseudo-element defer — both live in css/home.css,
   scoped to the SAME selector family, never duplicated here.
   ============================================================ */

.zone-solari {
  padding-top: 0;
}

.solari-eyebrow {
  color: var(--torch-bright);
  margin-bottom: var(--space-lg);
}

.solari-board {
  /* The four --_bg/--_fg/--_accent/--_muted aliases were removed 4 Aug 2026
     (A2 HARD FAIL, 2nd inspection): tokens.css is the only file that may
     define custom properties. zones.css:521 consumed --_bg/--_fg, which are
     declared HERE — a cross-file dependency that resolved only because the
     Solari board happens to be home-only. Resolve to canonical tokens. */
  background: transparent;
  color: var(--chalk);
  font-family: var(--font-display);
}

/* Internal grid — NO max-width/margin:auto here (§5): the .pos-content
   wrapper on the module's host <div> does the capping instead. */
.solari-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.solari-board-headline {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: var(--weight-medium);
  letter-spacing: 0;   /* was tracking-tight (negative) — caused flap letters to overlap (Steve, 2 Aug). Flap cells set their own spacing. */
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  min-height: 1.1em;
}

.solari-board-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: 0;   /* was tracking-mono — on a flex of single-char flaps it
                          jumbled the letters (adds space INSIDE each flap, not
                          between). The flap margin below provides the tracked look. (Steve, 2 Aug) */
  color: var(--slate-light);   /* dark ground — --slate is 2.96:1 here (Steve, 5 Aug) */
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  text-transform: uppercase;
  min-height: 1.2em;
}

/* ============================================================
   SOLARI FLAPS — the real fix (Steve, 2 Aug, ref: hello-mat split-flap).
   A split-flap board is inherently MONOSPACED: every flap is an
   identical physical tile. Rendering it in the proportional display
   font (Jost) is what caused every problem — overlap, collapse,
   "Wegow", uneven spacing. The fix: render flap characters in the
   MONO font, in FIXED-WIDTH cells, each character CENTRED in its cell.
   Then spaces hold their tile, wide/narrow letters all occupy the same
   slot, and nothing can overlap or collapse. This is what a departures
   board actually is — a uniform grid of tiles.
   ============================================================ */
/* .solari-board-eyebrow is NOT in this selector: it already sets
   font-family: var(--font-mono) and letter-spacing: 0 at its own rule
   above. Repeating them here was a B3 duplication (2nd inspection,
   4 Aug 2026) — "not one line" means not one line, even inside the
   same file. Only the headline needs the mono override here. */
.solari-board-headline {
  font-family: var(--font-mono);   /* the board is monospaced by nature */
  letter-spacing: 0;
}
.solari-board-flap {
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* centre the glyph in its fixed tile */
  position: relative;
  width: .62em;                    /* fixed tile — every flap identical */
  min-width: .62em;
}
.solari-board-flap-sp {          /* a space is just an empty tile, same width */
  width: .62em;
  min-width: .62em;
}
/* eyebrow tiles are a touch tighter (smaller mono) but still uniform */
.solari-board-eyebrow .solari-board-flap,
.solari-board-eyebrow .solari-board-flap-sp {
  width: .66em;
  min-width: .66em;
}

.solari-board-flap .solari-board-ch {
  display: inline-block;
  backface-visibility: hidden;
  transform-origin: center;
}

.solari-board-flap.is-accent .solari-board-ch {
  color: var(--torch-bright);   /* accent flaps ONLY — the board is mostly chalk */
}

/* ============================================================
   PAGE-SPECIFIC 1000px COLLAPSE — must be the LAST rule in this file.
   The shared base cannot hold these: it has to come FIRST so pages
   inherit the system, which means every page rule below it wins on
   load order. Same breakpoint value, different position — the collapse
   lives with what it collapses. (Learned three times, 4 Aug 2026.)
   ============================================================ */

@media (max-width: 1000px) {
  .hero-inner,
  .core-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-gauge {
    order: -1;
  }

  .solari-board-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

/* https://www.sitethreesixty.com */