/* stratavoxel.com -- v1 coming-soon styles.
   Engineering-meets-craft: dark, structural, precise. Mobile-first;
   tap targets >= 44px. No web fonts (CSP + speed) -- system stack. */

:root {
  --bg:      #0a0c10;
  --bg-2:    #11141b;
  --line:    #232834;
  --ink:     #e8eaed;
  --ink-dim: #9aa3b2;
  --accent:  #4d9fff;
  --ok:      #3ddc91;
  --err:     #ff6b6b;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* Background: plain dark --bg. Mozader directive ~19:2xZ -- reverted the
     entire layered-background line (D10-1A voxelgrid + D11 strata-glow +
     silhouettes + strata-lines): "id rather have the black background no
     lines no failed attempt at a picture rendering." Back to the original
     approved baseline (the one "looks amazing" was on). voxelgrid.svg +
     silhouettes.svg are now orphaned background assets (not deleted; flagged
     to Dispatch/UI Design). hero/wordmark/og/favicon SVGs are unaffected --
     they are content marks, not the background. */
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { min-height: 100%; }

/* Subtle horizontal strata -- layered rock lines, very low contrast. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: max(1.25rem, env(safe-area-inset-top))
           1.25rem
           max(1.25rem, env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 46px,
      rgba(255,255,255,0.018) 46px,
      rgba(255,255,255,0.018) 47px),
    radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 70%);
}

.hero-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* D10-3A: .wordmark is now the bespoke voxel SVG (UI Design). Height-clamp
   matches the old font-size so hero layout/responsive sizing is unchanged;
   SVG aspect-ratio drives width. (doc-hero h1 stays system-font 900 — its
   text is page-specific, not "STRATA", so the wordmark can't substitute.) */
.wordmark {
  display: block;
  height: clamp(3rem, 16vw, 6.5rem);
  width: auto;
  max-width: 100%;
  margin: 0;
}

.tagline {
  margin: 0.9rem 0 0;
  font-size: clamp(1.05rem, 4.5vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
}

.pitch {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

.placeholder-note {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #5a6373;
  font-style: italic;
}

.sub-helper {
  margin: 1.9rem 0 0.15rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.sub-fine {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0;
  width: 100%;
  max-width: 30rem;
}

.sub-input {
  flex: 1 1 14rem;
  min-height: 48px;
  padding: 0 1rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.sub-input::placeholder { color: #5a6373; }

.sub-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77,159,255,0.18);
}

.sub-btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #06121f;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.sub-btn:hover { filter: brightness(1.08); }
.sub-btn:active { transform: translateY(1px); }
.sub-btn:disabled { opacity: 0.6; cursor: progress; }

.sub-msg {
  margin: 0.85rem 0 0;
  min-height: 1.3rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.sub-msg.is-ok  { color: var(--ok); }
.sub-msg.is-err { color: var(--err); }

.foot {
  flex: 0 0 auto;
  max-width: 40rem;
  width: 100%;
  margin: 2.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: #5a6373;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (min-width: 768px) {
  .hero { padding: 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sub-btn { transition: filter .12s ease, transform .06s ease; }
  .sub-input { transition: border-color .12s ease, box-shadow .12s ease; }
}

/* ===================================================================
   v1.0 multi-page chrome + doc pages (D5/D6/D7/D8). Framework-free,
   CSP-clean. Mobile drawer = pure-CSS checkbox hack (no JS).
   =================================================================== */
:root { --nav-h: 56px; --maxw: 60rem; }

.skip { position:absolute; left:-999px; top:0; z-index:100;
  background:var(--accent); color:#06121f; padding:.5rem .9rem; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:1rem; height:var(--nav-h); padding:0 1rem;
  background:rgba(10,12,16,.92); border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px); }
.brand { font-weight:800; letter-spacing:.06em; color:var(--ink);
  text-decoration:none; font-size:1.15rem; }
.brand-dot { color:var(--accent); }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:1.4rem; }
.nav-links a { color:var(--ink-dim); text-decoration:none; font-size:.95rem; padding:.4rem 0; }
.nav-links a:hover { color:var(--ink); }
.nav-links a.is-active { color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.nav-cta { color:#06121f !important; background:var(--accent);
  padding:.5rem .9rem !important; border-radius:8px; font-weight:700; }
.nav-cta:hover { filter:brightness(1.08); }
.nav-burger, .nav-cb { display:none; }

@media (max-width:767.98px) {
  .nav-burger { display:flex; margin-left:auto; width:44px; height:44px;
    align-items:center; justify-content:center; cursor:pointer; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    content:""; display:block; width:22px; height:2px; background:var(--ink); }
  .nav-burger span { position:relative; }
  .nav-burger span::before { position:absolute; top:-6px; }
  .nav-burger span::after  { position:absolute; top:6px; }
  .nav-links { position:fixed; top:var(--nav-h); right:0; bottom:0;
    width:min(78vw,260px); flex-direction:column; align-items:flex-start;
    gap:0; margin:0; padding:1rem; background:var(--bg-2);
    border-left:1px solid var(--line); transform:translateX(110%);
    transition:transform .18s ease; }
  .nav-links a { width:100%; padding:.9rem .25rem; font-size:1.05rem; }
  .nav-cta { margin-top:.6rem; }
  .nav-cb:checked ~ .nav-links { transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .nav-links { transition:none; } }

.site-foot { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center;
  max-width:var(--maxw); margin:3rem auto 0; padding:1.2rem;
  border-top:1px solid var(--line); font-size:.82rem; color:#5a6373; }
.foot-brand { font-weight:800; letter-spacing:.06em; color:var(--ink-dim); }
.foot-links { display:flex; gap:1rem; }
.foot-links a { color:var(--ink-dim); text-decoration:none; }
.foot-links a:hover { color:var(--ink); }
.foot-fine { margin-left:auto; }

.hero { min-height: calc(100svh - var(--nav-h)); }
.hero-more { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.6rem; }
.hero-more a { color:var(--accent); text-decoration:none; font-size:.95rem; }

.doc, .tech-body { max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 0; }
.doc-hero { padding:1.5rem 0 1rem; }
.doc-hero h1 { font-size:clamp(2rem,7vw,3.2rem); font-weight:900; letter-spacing:-.005em; margin:.3rem 0 0; }
.doc-sec { padding:1.4rem 0; border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + 12px); }
.doc-sec h2 { font-size:clamp(1.3rem,4.5vw,1.8rem); margin:0 0 .7rem; }
.doc-sec p { font-size:1.02rem; line-height:1.7; color:var(--ink-dim); max-width:42rem; }
.doc-sec a, .lede a { color:var(--accent); }
.lede { font-size:1.1rem; line-height:1.7; color:var(--ink); }
.doc-engine .doc-sec p { font-size:1.08rem; }

.tech { max-width:72rem; margin:0 auto; display:flex; gap:2rem; padding:0 1rem; }
.tech-rail { display:none; }
.tech-body { padding-top:1.5rem; }
/* D-RESP F2: /tech rail at >=900px (catches large/landscape tablets) */
@media (min-width: 900px) {
  .tech-rail { display:flex; flex-direction:column; gap:.3rem; position:sticky;
    top:calc(var(--nav-h) + 12px); align-self:flex-start; width:13rem;
    padding:1.5rem 0; font-size:.9rem; }
  .tech-rail a { color:var(--ink-dim); text-decoration:none; padding:.3rem .5rem;
    border-left:2px solid transparent; }
  .tech-rail a:hover { color:var(--ink); }
  .tech-rail a.on { color:var(--ink); border-left-color:var(--accent); }
  .tech-body { flex:1 1 auto; min-width:0; }
}
/* D-RESP F2+F4: chip-bar <900px with >=44px tap targets */
@media (max-width: 899.98px) {
  .tech { flex-direction:column; gap:0; padding:0; }
  .tech-rail { display:flex; gap:.5rem; overflow-x:auto; position:sticky;
    top:var(--nav-h); background:var(--bg); padding:.6rem 1rem;
    border-bottom:1px solid var(--line); }
  .tech-rail a { white-space:nowrap; color:var(--ink-dim); text-decoration:none;
    font-size:.9rem; padding:.55rem .85rem; border:1px solid var(--line);
    border-radius:999px; min-height:44px; display:inline-flex; align-items:center; }
}

/* Upgrade 2 — spec-sheet: values are the story (UI Design polish brief). */
.spec { display:table; width:100%;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92rem; }
.spec tbody { display:contents; }
.spec tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem;
  padding:.65rem 0; border-bottom:1px solid var(--line); }
.spec tr:first-child { border-top:1px solid var(--line); }
.spec th { text-align:left; font-weight:500; color:var(--ink-dim); letter-spacing:.01em; }
.spec td { text-align:right; color:var(--ink); font-weight:600;
  font-feature-settings:"tnum" 1; }
.spec td.is-headline { color:var(--accent); font-size:1.08rem; }
.spec td.is-ok { color:var(--ok); }
.spec-foot { font-size:.78rem; color:#5a6373; margin-top:.8rem; line-height:1.55; }
@media (max-width:479.98px) {
  .spec tr { grid-template-columns:1fr; gap:.15rem; }
  .spec td { text-align:left; }
}

/* Upgrade 3 — numbered subsystem dividers + accent-border rhythm. */
.doc-sec.sub { border-top:2px solid;
  border-image:linear-gradient(90deg, var(--accent) 0, var(--accent) 32px, var(--line) 32px) 1; }
.doc-sec.sub h2::before { content:attr(data-num) "  ";
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--accent); font-weight:500; font-size:.82em; letter-spacing:.08em; }

.diag { margin:0 0 1rem; }
.diag svg { width:100%; height:auto; max-width:100%; }
.d-box rect { fill:var(--bg-2); stroke:var(--line); stroke-width:1.5; }
.d-box text { fill:var(--ink-dim); font-size:13px; text-anchor:middle;
  font-family:ui-sans-serif,system-ui,sans-serif; }
.d-accent rect { stroke:var(--accent); }
.d-accent text { fill:var(--ink); }
.d-arr line { stroke:var(--ink-dim); stroke-width:1.5; }
.diag-todo { display:none; }
.diag figcaption { font-size:.8rem; color:#5a6373; margin-top:.4rem; }

.tech-pts { margin:.4rem 0 0; padding-left:1.1rem; }
.tech-pts li { font-size:.98rem; line-height:1.6; color:var(--ink-dim); margin:.45rem 0; }
.pending-note { font-style:italic; color:#5a6373; font-size:.92rem; }

.phases { list-style:none; margin:0; padding:0; }
.phase { display:flex; gap:1rem; padding:.9rem 0 .9rem 1rem;
  border-left:2px solid var(--line); }
.phase-tag { flex:0 0 4.5rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; padding-top:.15rem; }
.phase-now { color:var(--ok); }
.phase-next { color:var(--accent); }
.phase-later { color:var(--ink-dim); }
.phase p { margin:0; color:var(--ink-dim); }
.phase-pending p { font-style:italic; color:#5a6373; }
.phase-body { flex:1 1 auto; min-width:0; }
.phase-body p { margin:0; color:var(--ink-dim); line-height:1.6; }
.rm-items { list-style:none; margin:.1rem 0 0; padding:0; }
.rm-items li { padding:.6rem 0; border-top:1px solid var(--line);
  font-size:.97rem; line-height:1.62; color:var(--ink-dim); }
.rm-items li:first-child { border-top:0; padding-top:0; }
.rm-items strong { color:var(--ink); font-weight:650; }

.cta { margin-top:2rem; scroll-margin-top:calc(var(--nav-h) + 12px); }
.doc .cta, .tech-body .cta { border-top:1px solid var(--line); padding-top:1.5rem; }

/* Upgrade 5 — typography uplift + hover craft (CSS-only). */
.doc-engine .doc-hero .eyebrow,
.tech .doc-hero .eyebrow,
.doc-roadmap .doc-hero .eyebrow { color:var(--accent); }

@media (hover:hover) {
  .spec tr:hover { background:var(--bg-2); }
  .spec tr:hover th { color:var(--ink); }
  .doc-sec h2 { position:relative; }
  .doc-sec h2:hover::after { content:" #"; color:var(--ink-dim); opacity:.5; }
}

/* ============ Upgrade 1: hero voxel artifact (UI Design) ============ */
/* D-RESP F1: hero-art fluid (phone~220 / tablet~280-310 / desktop max 380) */
.hero-art {
  display: block;
  width: clamp(220px, 30vw, 380px);
  max-width: 100%;
  height: auto;
  margin-top: 1.4rem;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
/* D-RESP F1: hero 2-col grid at 720px (catches tablets), not 900px */
@media (min-width: 720px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
    max-width: 60rem;
  }
  .hero-inner > .eyebrow,
  .hero-inner > .wordmark,
  .hero-inner > .tagline,
  .hero-inner > .pitch,
  .hero-inner > .cta,
  .hero-inner > .hero-more { grid-column: 1; }
  .hero-art { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin-top: 0; }
}
.doc-art {
  float: right;
  width: 140px;
  height: auto;
  margin: 0 0 .25rem 1.2rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
@media (max-width: 520px) {
  .doc-art { display: none; }
}

/* ============ Upgrade 4: subsystem glyphs (UI Design) ============ */
.subsym-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--ink-dim);
  vertical-align: middle;
}
.doc-sec.sub h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: nowrap;
}
.doc-sec.sub h2 .subsym-icon { order: -1; }
.doc-sec.sub h2:hover .subsym-icon { color: var(--ink); }
@media (max-width: 480px) {
  .subsym-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .doc-sec.sub h2 { gap: .4rem; }
}

/* ================= D10 round 2 (Dispatch-locked 18:01Z) ================= */

/* 2B — subscribe button: accent ring pulse, bounded to focus only. */
@keyframes ctaRing {
  from { box-shadow: 0 0 0 0 rgba(77,159,255,.45); }
  to   { box-shadow: 0 0 0 12px rgba(77,159,255,0); }
}
.sub-btn:focus-visible, .sub-btn:focus { animation: ctaRing 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sub-btn:focus, .sub-btn:focus-visible { animation: none; }
}

/* 4A — /tech subsystem blocks read as discrete lifted cards
   (keeps the Upgrade-3 accent top-stub; inset ring instead of a real
   border so border-image is untouched). */
.doc-sec.sub {
  padding: 1.4rem 1.25rem;
  border-radius: 6px;
  margin: 1.1rem 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.30),
              0 1px 2px  rgba(0,0,0,.20),
              inset 0 0 0 1px var(--line);
}

/* 4B — chrome floats: nav casts a soft halo down, footer up. */
.nav { box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.site-foot { box-shadow: 0 -8px 24px -8px rgba(0,0,0,.6); }

/* 4C — subscribe button physical presence. */
.sub-btn        { box-shadow: 0 2px 8px  rgba(77,159,255,.30); }
.sub-btn:hover  { box-shadow: 0 4px 12px rgba(77,159,255,.45); }
.sub-btn:active { box-shadow: 0 1px 2px  rgba(77,159,255,.20); }

/* 4D — spec-row inset accent rail on hover ("selected for inspection"). */
@media (hover:hover) {
  .spec tr:hover { box-shadow: inset 4px 0 0 0 var(--accent); }
}

/* ===== D-RESP responsive optimization pass (UI Design spec, Dispatch 20:48Z) =====
   F1 (hero-art clamp + grid@720) + F2 (tech rail@900 + chip 44px) applied above
   as in-place replacements. F3 resolved by F1's clamp. F7 deferred (large desktop
   caps are intentional restraint). Below: F4 tap targets, F5 <480 overflow-wrap,
   F6 landscape-phone short-viewport. Additive only; identity/content unchanged. */

/* F4 — >=44px tap targets (chip-bar handled in F2 block above) */
@media (max-width: 767.98px) {
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
}
.foot-links a { padding: .35rem 0; display: inline-block; min-height: 44px; line-height: 1.6; }
.hero-more a  { padding: .35rem 0; display: inline-block; min-height: 44px; line-height: 1.4; }

/* F5 — no horizontal scroll on long tokens at narrow widths (targeted, not global) */
@media (max-width: 479.98px) {
  .rm-items strong, .rm-items li { overflow-wrap: anywhere; word-break: normal; }
  .doc-sec p, .lede { overflow-wrap: break-word; }
  .pitch { overflow-wrap: break-word; }
  .spec td, .spec th { overflow-wrap: anywhere; }
}

/* F6 — short landscape (phone rotated): let hero shrink to content, smaller art */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: auto; padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .hero-art { width: clamp(140px, 18vw, 200px); }
}