/* =========================================================
   NeoDarque — shared site stylesheet
   World: manufacturer spec-sheet / projector throw-chart grammar.
   Near-black blueprint ground, cool grey-blue rules, one brass/amber
   signal accent, monospace for data/measurement, geometric sans for
   headings. See /homepage-comp.html and PRODUCT.md for the direction
   contract this extends.
   ========================================================= */

:root{
  --ground:#0b0d10;
  --panel:#111418;
  --panel-raised:#15181d;
  --rule:#2a3038;
  --rule-strong:#3a424d;
  --ink:#e7eaee;
  --ink-dim:#93a0ad;
  --ink-faint:#788592;
  --signal:#dba463;
  --signal-dim:#7a5c37;
  --focus:#dba463;
  --measure:68ch;
}
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--signal); color:#100b04; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ground); }
::-webkit-scrollbar-thumb{ background:var(--rule-strong); border:2px solid var(--ground); border-radius:6px; }

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

.mono{
  font-family:'Space Mono',ui-monospace,monospace;
  letter-spacing:0.01em;
}

/* Drafting ground — a whisper of structure, not a tiled overlay */
.blueprint{ position:relative; }
.blueprint::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(180,196,212,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,196,212,0.05) 1px, transparent 1px);
  background-size:100% 25%, 12.5% 100%;
  pointer-events:none;
  z-index:0;
}

.calmark{
  position:absolute;
  width:15px; height:15px;
  pointer-events:none;
  z-index:3;
  opacity:0.6;
}
.calmark::before,.calmark::after{ content:""; position:absolute; background:var(--rule-strong); }
.calmark::before{ width:100%; height:1px; top:50%; left:0; }
.calmark::after{ width:1px; height:100%; left:50%; top:0; }
.calmark.tl{ top:16px; left:16px; }
.calmark.tr{ top:16px; right:16px; }
.calmark.bl{ bottom:16px; left:16px; }
.calmark.br{ bottom:16px; right:16px; }

/* ---------- Header / nameplate (identical on every page) ---------- */
header.site-header{
  position:relative;
  z-index:4;
  padding:28px clamp(20px,4vw,56px) 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--rule);
}
.nameplate{ display:flex; flex-direction:column; gap:6px; }
.nameplate a.mark{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.nameplate .mark svg{ flex:none; }
.nameplate .mark span{
  font-size:1.15rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink);
}
.nameplate .sub{
  font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.06em;
  text-transform:uppercase; max-width:34ch;
}
nav.site-nav{ display:flex; gap:clamp(16px,3vw,32px); padding-top:6px; }
nav.site-nav a{
  color:var(--ink-dim); text-decoration:none; font-size:0.78rem;
  letter-spacing:0.04em; text-transform:uppercase; font-family:'Space Mono',monospace;
  border-bottom:1px solid transparent; padding-bottom:4px;
  transition:color .18s ease, border-color .18s ease;
}
nav.site-nav a:hover, nav.site-nav a:focus-visible{ color:var(--signal); border-color:var(--signal); outline:none; }
nav.site-nav a[aria-current="page"]{ color:var(--signal); border-color:var(--signal-dim); }

@media (max-width: 860px){ nav.site-nav{ display:none; } }

/* ---------- Footer ---------- */
footer.site-footer{
  position:relative; z-index:4;
  padding:24px clamp(20px,4vw,56px);
  border-top:1px solid var(--rule);
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- Homepage hero ---------- */
.hero{ position:relative; padding:clamp(56px,8vw,120px) clamp(20px,4vw,56px) clamp(64px,8vw,104px); }
.hero-head{ max-width:56ch; margin-bottom:clamp(48px,6vw,80px); }
h1{ font-size:clamp(2.3rem,4.6vw,3.75rem); line-height:1.14; font-weight:500; letter-spacing:-0.025em; margin:0 0 22px; color:var(--ink); }
h1 em{ font-style:normal; color:var(--signal); font-weight:500; }
.hero-head p{ font-size:1.08rem; line-height:1.65; color:var(--ink-dim); margin:0; max-width:50ch; }

.instrument-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.instrument{ position:relative; background:var(--panel); padding:clamp(24px,3vw,36px) clamp(24px,3vw,36px) clamp(28px,3.4vw,40px); display:flex; flex-direction:column; min-height:360px; cursor:pointer; transition:background .22s ease; text-decoration:none; color:inherit; }
.instrument:hover, .instrument:focus, .instrument:focus-within{ background:var(--panel-raised); }
.instrument:hover .crosshair, .instrument:focus .crosshair, .instrument:focus-within .crosshair{ opacity:1; }
.instrument:hover .readout, .instrument:focus .readout, .instrument:focus-within .readout{ max-height:220px; opacity:1; margin-top:18px; }
.instrument:hover .id, .instrument:focus .id, .instrument:focus-within .id{ color:var(--signal); border-color:var(--signal); }
.id{ font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; color:var(--ink-faint); border:1px solid var(--rule-strong); padding:4px 9px; align-self:flex-start; transition:color .18s ease, border-color .18s ease; }
.instrument h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin:16px 0 8px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.instrument .tagline{ color:var(--ink-dim); font-size:0.95rem; line-height:1.5; max-width:44ch; margin:0; }
.readout{ max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .32s cubic-bezier(.16,1,.3,1), opacity .28s ease, margin-top .32s ease; border-top:1px solid var(--rule); padding-top:16px; display:grid; grid-template-columns:1fr; gap:6px; }
.readout div{ display:flex; justify-content:space-between; gap:16px; font-family:'Space Mono',monospace; font-size:0.76rem; color:var(--ink-dim); }
.readout div b{ color:var(--ink); font-weight:400; text-align:right; }
.readout div span:first-child{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; }
.crosshair{ position:absolute; top:20px; right:20px; width:34px; height:34px; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.crosshair svg{ width:100%; height:100%; }
.live-clock{ font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--signal); display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; }
.live-clock .tick{ width:6px; height:6px; background:var(--signal); border-radius:1px; animation:neodarque-blink 1s steps(2,jump-none) infinite; }
@keyframes neodarque-blink{ 50%{ opacity:0.15; } }

.secondary-row{ margin-top:1px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-top:none; }
.instrument.secondary{ min-height:auto; padding:20px clamp(20px,3vw,28px); flex-direction:row; align-items:center; gap:20px; }
.instrument.secondary .id{ font-size:0.68rem; padding:3px 7px; }
.instrument.secondary .sec-body{ flex:1; }
.instrument.secondary h3{ font-size:1rem; margin:0 0 4px; font-weight:600; color:var(--ink-dim); }
.instrument.secondary:hover h3, .instrument.secondary:focus h3, .instrument.secondary:focus-within h3{ color:var(--ink); }
.instrument.secondary .tagline{ font-size:0.82rem; color:var(--ink-faint); margin:0; max-width:46ch; }
.instrument.secondary .status{ font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--rule-strong); padding:3px 8px; white-space:nowrap; }

@media (max-width: 860px){
  .instrument-grid, .secondary-row{ grid-template-columns:1fr; }
  .instrument.secondary{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Product detail pages ---------- */
.product-hero{
  position:relative;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,56px) clamp(40px,5vw,64px);
  border-bottom:1px solid var(--rule);
}
.product-hero .id{ margin-bottom:18px; }
.product-hero h1{ margin-bottom:16px; }
.product-hero .tagline{ font-size:1.15rem; line-height:1.55; color:var(--ink-dim); max-width:60ch; margin:0 0 clamp(28px,3vw,40px); }

.hero-logo{
  width:96px;
  height:96px;
  margin-bottom:24px;
  border:1px solid var(--rule-strong);
  background:var(--panel);
  padding:14px;
}

.spec-readout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.spec-readout div{
  background:var(--panel);
  padding:14px 18px;
  font-family:'Space Mono',monospace;
  font-size:0.76rem;
}
.spec-readout div span{ display:block; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.spec-readout div b{ color:var(--ink); font-weight:400; }

.section{ padding:clamp(48px,6vw,84px) clamp(20px,4vw,56px); border-bottom:1px solid var(--rule); }
.section:last-of-type{ border-bottom:none; }
.section-head{ max-width:var(--measure); margin-bottom:clamp(28px,4vw,44px); }
.section-head .id{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.25rem); font-weight:500; letter-spacing:-0.02em; margin:0 0 12px; color:var(--ink); }
.section-head p{ color:var(--ink-dim); line-height:1.6; margin:0; max-width:60ch; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.feature-grid .feature{ background:var(--panel); padding:clamp(24px,3vw,32px); }
.feature h3{ font-size:1.1rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 10px; color:var(--ink); }
.feature p{ color:var(--ink-dim); font-size:0.94rem; line-height:1.55; margin:0; }

.use-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.use-grid .use{ background:var(--panel); padding:20px 22px; }
.use .id{ margin-bottom:10px; font-size:0.66rem; }
.use h3{ font-size:0.95rem; font-weight:600; margin:0 0 6px; color:var(--ink); }
.use p{ color:var(--ink-faint); font-size:0.85rem; line-height:1.5; margin:0; }

.faq{ max-width:var(--measure); }
.faq-item{ border-top:1px solid var(--rule); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--rule); }
.faq-item .id{ margin-bottom:10px; }
.faq-item h3{ font-size:1.02rem; font-weight:600; margin:0 0 8px; color:var(--ink); }
.faq-item p{ color:var(--ink-dim); font-size:0.94rem; line-height:1.6; margin:0; }

.shot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.shot-grid figure{ margin:0; border:1px solid var(--rule); background:var(--panel); }
.shot-grid img{ width:100%; height:auto; display:block; }
.shot-grid figcaption{ padding:10px 14px; font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--ink-faint); letter-spacing:0.04em; text-transform:uppercase; border-top:1px solid var(--rule); }

.callout{
  border:1px solid var(--rule-strong);
  background:var(--panel);
  padding:clamp(22px,3vw,30px);
  max-width:var(--measure);
}
.callout p{ margin:0; color:var(--ink-dim); line-height:1.6; }
.callout p + p{ margin-top:12px; }
.callout a{ color:var(--signal); }

.cta-line{ margin-top:clamp(24px,3vw,36px); display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.badge-link{ display:inline-flex; align-items:center; line-height:0; }
.app-store-badge{ height:44px; width:auto; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ground); background:var(--signal);
  padding:11px 18px; text-decoration:none; border:1px solid var(--signal);
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:transparent; color:var(--signal); }
.btn.btn-outline{ background:transparent; color:var(--ink-dim); border-color:var(--rule-strong); }
.btn.btn-outline:hover{ color:var(--signal); border-color:var(--signal); }

/* ---------- Support / minimal single-panel pages ---------- */
.simple-page{ padding:clamp(64px,10vw,140px) clamp(20px,4vw,56px) clamp(80px,10vw,140px); max-width:var(--measure); }
.simple-page h1{ margin-bottom:20px; }
.simple-page p{ color:var(--ink-dim); line-height:1.65; font-size:1.05rem; }
.contact-panel{ border:1px solid var(--rule-strong); background:var(--panel); padding:clamp(24px,3vw,32px); margin-top:28px; }
.contact-panel .id{ margin-bottom:14px; }
.contact-panel a{ font-family:'Space Mono',monospace; font-size:1.1rem; color:var(--signal); text-decoration:none; }
.contact-panel a:hover{ text-decoration:underline; }

/* ---------- Legal / Read-mode documents ---------- */
.legal-page{ padding:clamp(56px,8vw,100px) clamp(20px,4vw,56px) clamp(80px,10vw,140px); }
.legal-head{ max-width:var(--measure); margin-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--rule); padding-bottom:clamp(28px,4vw,40px); }
.legal-head .id{ margin-bottom:16px; }
.legal-head h1{ font-size:clamp(2rem,4vw,2.75rem); margin-bottom:14px; }
.legal-head .meta{ font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--ink-faint); letter-spacing:0.04em; text-transform:uppercase; }
.legal-body{ max-width:var(--measure); }
.legal-clause{ border-top:1px solid var(--rule); padding:clamp(24px,3vw,32px) 0; }
.legal-clause:last-child{ padding-bottom:0; }
.legal-clause .id{ margin-bottom:14px; }
.legal-clause h2{ font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 12px; color:var(--ink); }
.legal-clause p{ color:var(--ink-dim); line-height:1.7; font-size:0.98rem; margin:0 0 14px; }
.legal-clause p:last-child{ margin-bottom:0; }
.legal-clause ul{ color:var(--ink-dim); line-height:1.7; font-size:0.98rem; margin:0 0 14px; padding-left:1.2em; }
.legal-clause a{ color:var(--signal); }
.legal-intro{ color:var(--ink-dim); line-height:1.7; font-size:1.02rem; max-width:var(--measure); margin:0 0 clamp(28px,4vw,40px); }