/* IdentityTrusts — scoped site
   Aesthetic: cryptographic terminal / sovereign primitive.
   Monochrome austere base, one proof-green accent used sparingly,
   monospace-dominant voice. Zero external requests. */

/* ---- font drop-in (optional) -------------------------------------------
   The site ships on a system monospace stack so it renders with zero
   network requests (required by the CSP / isolation model). To use a
   self-hosted face instead, drop a WOFF2 into /fonts/ and uncomment:

   @font-face {
     font-family: "Site Mono";
     src: url("/fonts/site-mono.woff2") format("woff2");
     font-weight: 100 900; font-display: swap;
   }
   then prepend "Site Mono" to --mono below. No CDN, ever.
------------------------------------------------------------------------- */

:root{
  --bg:        #0a0a0b;
  --bg-raise:  #0e0e11;
  --bg-panel:  #0c0c0f;
  --ink:       #e9e7e1;   /* bone */
  --ink-dim:   #9a978f;
  --ink-faint: #5d5b55;
  --line:      rgba(233,231,225,.10);
  --line-2:    rgba(233,231,225,.18);
  --proof:     #57f2a8;   /* signal green — verified / live / computed only */
  --proof-dim: rgba(87,242,168,.12);
  --warn:      #f2c14e;
  --bad:       #ff6b6b;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  --maxw: 980px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .01em;
  font-feature-settings: "ss01","cv01","calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* atmosphere: top glow + fine grain, both inert, no requests beyond data: */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(87,242,168,.05), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(255,255,255,.03), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer{ position:relative; z-index:1; }

::selection{ background: var(--proof); color:#04130c; }

a{ color: var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .15s, color .15s; }
a:hover{ color: var(--proof); border-color: var(--proof); }

strong{ color:var(--ink); font-weight:600; }
em{ font-style:normal; color:var(--proof); }

/* ---- layout ------------------------------------------------------------ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---- top status bar ---------------------------------------------------- */
.statusbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad); border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.statusbar .dot{ color:var(--proof); }
.statusbar nav{ display:flex; gap:18px; }
.statusbar nav a{ border:0; color:var(--ink-faint); }
.statusbar nav a:hover{ color:var(--proof); }

/* ---- hero -------------------------------------------------------------- */
.hero{ padding: clamp(56px, 12vh, 132px) 0 clamp(40px,8vh,80px); }
.hero h1{
  font-weight:600; line-height:1.04; letter-spacing:-.02em;
  font-size: clamp(34px, 6.4vw, 68px);
  max-width: 16ch;
}
.hero h1 .q{ color:var(--ink-dim); font-weight:400; }
.hero .lede{
  margin-top:28px; max-width:60ch; color:var(--ink-dim); font-size:clamp(15px,1.7vw,18px);
  line-height:1.7;
}
.hero .lede strong{ color:var(--ink); }

/* ---- manifesto blocks -------------------------------------------------- */
.blocks{ border-top:1px solid var(--line); }
.block{
  display:grid; grid-template-columns: 88px 1fr; gap: clamp(16px,4vw,48px);
  padding: clamp(28px,5vh,46px) 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.block .idx{ font-size:13px; color:var(--ink-faint); letter-spacing:.1em; padding-top:6px; }
.block .idx b{ display:block; color:var(--proof); font-size:11px; letter-spacing:.24em; margin-bottom:8px; }
.block h2{ font-size:clamp(15px,1.6vw,17px); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.block p{ margin-top:12px; color:var(--ink-dim); max-width:64ch; }
.block p strong{ color:var(--ink); }

/* ---- proof seal (live self-hash) -------------------------------------- */
.proof{
  margin: clamp(40px,8vh,72px) 0; padding: clamp(22px,4vw,34px);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:
    linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,
    linear-gradient(180deg, rgba(87,242,168,.25), transparent 40%) border-box;
  border:1px solid transparent;
}
.proof .head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.proof .label{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }
.proof .state{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--warn); }
.proof .state.ok{ color:var(--proof); }
.proof .state.err{ color:var(--bad); }
.proof .hash{
  margin-top:16px; font-size:clamp(12px,2.2vw,15px); line-height:1.9;
  word-break:break-all; color:var(--proof); min-height:1.9em;
}
.proof .hash.pending{ color:var(--ink-faint); }
.proof .cmd{
  margin-top:18px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,0,0,.25); color:var(--ink-dim); font-size:12.5px; overflow-x:auto; white-space:nowrap;
}
.proof .cmd .p{ color:var(--ink-faint); }
.proof .note{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); max-width:70ch; line-height:1.7; }

/* ---- contact ----------------------------------------------------------- */
.contact{ padding: clamp(36px,7vh,64px) 0; border-top:1px solid var(--line); }
.contact .eyebrow{ margin-bottom:18px; }
.contact .mailrow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.contact code{ color:var(--ink); }
.contact .fine{ margin-top:18px; color:var(--ink-faint); font-size:13px; max-width:64ch; line-height:1.75; }
.contact .fine .clean{ color:var(--proof); }

/* ---- buttons / inputs -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--ink); background:transparent; border:1px solid var(--line-2);
  border-radius:var(--r); padding:11px 16px; transition:.15s;
}
.btn:hover{ border-color:var(--proof); color:var(--proof); background:var(--proof-dim); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ border-color:var(--proof); color:var(--proof); }
.btn.primary:hover{ background:var(--proof); color:#04130c; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn .k{ font-size:11px; color:var(--ink-faint); }

label.field{ display:block; margin:18px 0 0; }
label.field .lab{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; display:block; }
input[type=text], textarea{
  width:100%; font-family:var(--mono); font-size:14px; color:var(--ink);
  background:rgba(0,0,0,.25); border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; line-height:1.6; resize:vertical;
}
input[type=text]:focus, textarea:focus{ outline:none; border-color:var(--proof); box-shadow:0 0 0 1px var(--proof-dim); }
textarea{ min-height:150px; word-break:break-all; }

.out{
  margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,0,0,.25); font-size:12.5px; line-height:1.8; color:var(--ink-dim);
  word-break:break-all; white-space:pre-wrap; display:none;
}
.out.show{ display:block; }
.out .key{ color:var(--ink-faint); }
.out .val{ color:var(--proof); }
.verdict{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
.verdict.ok{ color:var(--proof); } .verdict.err{ color:var(--bad); }

kbd{ font-family:var(--mono); border:1px solid var(--line-2); border-radius:3px; padding:1px 6px; font-size:12px; color:var(--ink-dim); }
code{ font-family:var(--mono); }

/* ---- page header for sub-pages ---------------------------------------- */
.pagehead{ padding: clamp(48px,9vh,96px) 0 clamp(20px,4vh,40px); }
.pagehead h1{ font-size:clamp(26px,4vw,40px); font-weight:600; letter-spacing:-.01em; }
.pagehead p{ margin-top:14px; color:var(--ink-dim); max-width:64ch; }

.prose h2{ font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:36px 0 10px; }
.prose p{ color:var(--ink-dim); margin:0 0 14px; max-width:70ch; }
.prose ul{ list-style:none; margin:0 0 18px; padding:0; max-width:70ch; }
.prose li{ color:var(--ink-dim); padding-left:20px; position:relative; margin-bottom:8px; }
.prose li::before{ content:"—"; position:absolute; left:0; color:var(--ink-faint); }

/* ---- footer ------------------------------------------------------------ */
footer{ border-top:1px solid var(--line); padding:26px 0 56px; }
footer .row{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--ink-faint); letter-spacing:.06em; }
footer a{ border:0; color:var(--ink-faint); } footer a:hover{ color:var(--proof); }
footer .hash-mini{ color:var(--ink-faint); word-break:break-all; }
footer .hash-mini b{ color:var(--proof); font-weight:400; }

/* ---- entrance reveal --------------------------------------------------- */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i,0) * 80ms); }
}

@media (max-width:640px){
  .block{ grid-template-columns:1fr; gap:10px; }
  .block .idx{ padding-top:0; }
  .statusbar nav{ gap:14px; }
}

/* ====================================================================
   v0.1 copy components (hero CTAs, pillars, demonstration, compare,
   partners intake, license footer)
==================================================================== */

.ctarow{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.hero .tagline{
  margin-top:18px; font-size:clamp(15px,2vw,19px); color:var(--proof);
  letter-spacing:.02em;
}
.hero .tagline::before{ content:"// "; color:var(--ink-faint); }

/* pillars */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pillar{ background:var(--bg); padding:clamp(22px,3vw,30px); }
.pillar .n{ font-size:11px; letter-spacing:.24em; color:var(--proof); text-transform:uppercase; }
.pillar h3{ margin-top:14px; font-size:16px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.pillar p{ margin-top:10px; color:var(--ink-dim); font-size:14px; line-height:1.7; }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }

/* section scaffold */
.sect{ padding: clamp(44px,8vh,84px) 0; border-top:1px solid var(--line); }
.sect h2{ font-size:clamp(22px,3.4vw,34px); font-weight:600; letter-spacing:-.01em; }
.sect .body{ margin-top:20px; max-width:64ch; }
.sect .body p{ color:var(--ink-dim); margin-bottom:14px; }
.sect .body p strong{ color:var(--ink); }
.caveat{
  margin-top:22px; padding:14px 16px; border-left:2px solid var(--warn);
  background:rgba(242,193,78,.05); color:var(--ink-dim); font-size:13.5px; line-height:1.7;
  max-width:70ch;
}

/* IS / IS NOT compare */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.compare > div{ background:var(--bg); padding:clamp(18px,2.5vw,26px); }
.compare .col-is .h{ color:var(--proof); }
.compare .col-isnot .h{ color:var(--ink-faint); }
.compare .h{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px; }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{ color:var(--ink-dim); padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.compare li:last-child{ border-bottom:0; }
.compare .col-isnot li{ color:var(--ink-faint); }
@media (max-width:680px){ .compare{ grid-template-columns:1fr; } }

/* partners intake (client-side mail composer; no form element, no backend) */
.intake{ margin-top:26px; max-width:560px; }
.intake .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .intake .grid2{ grid-template-columns:1fr; } }

/* license footer */
.licenses{ margin-top:20px; font-size:11.5px; color:var(--ink-faint); line-height:1.9; letter-spacing:.02em; }
.licenses b{ color:var(--ink-dim); font-weight:400; }
.tm{ font-size:.62em; vertical-align:super; color:var(--ink-faint); letter-spacing:0; }