/* proofmark.css: shared brand layer for the static marketing pages.
   The Proof House design system ("color is earned"): gunmetal grounds, bone ink,
   machined hairlines; the ONLY chroma is the status tokens (verified green,
   stale amber) doing semantic work. Dark-only. Mirrors apps/web/src (index.css +
   landing.css), which stays the source of truth. Linked BEFORE each page's own
   inline layout styles. */

/* ---- fonts (staged at /fonts) ------------------------------------------- */
@font-face{ font-family:'Bricolage Grotesque Variable'; font-style:normal; font-display:swap; font-weight:200 800; src:url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); }
@font-face{ font-family:'Geist Variable'; font-style:normal; font-display:swap; font-weight:100 900; src:url('/fonts/geist-latin-wght-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:400; src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:500; src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---- tokens ------------------------------------------------------------- */
:root{
  /* grounds */
  --bg:#15171a; --card:#22262b; --elevated:#2b2f36; --gunmetal:#2a2e33; --gunmetal-2:#22262b;
  /* ink */
  --fg:#e8e6df; --ink-sub:#c7cbd1; --muted:#9aa3ad; --steel:#9aa1a9;
  /* lines + accent surface */
  --hair:#454a52; --paper:#f4f2ec;
  /* the ONLY chroma: status colors doing semantic work */
  --verified:#0e6b3f; --verify-ink:#46a877;
  --stale:#b45309; --stale-ink:#d98a24;
  --unverified:#64748b; --unverified-ink:#93a0b2;
  /* faces */
  --sans:'Geist Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --grotesk:'Bricolage Grotesque Variable','Archivo Variable',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  /* page container width (overridden per page when wider/narrower) */
  --pm-wrap:960px;
  /* engraved wave-lattice (banknote guilloche): static, faint, header only */
  --pm-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='252' viewBox='0 0 1200 252' fill='none' stroke='%23454a52' stroke-opacity='0.5' stroke-width='1'%3E%3Cdefs%3E%3Cpath id='w' d='M-90,20 Q-45,-6 0,20 T90,20 T180,20 T270,20 T360,20 T450,20 T540,20 T630,20 T720,20 T810,20 T900,20 T990,20 T1080,20 T1170,20 T1260,20'/%3E%3C/defs%3E%3Cuse href='%23w'/%3E%3Cuse href='%23w' x='90' y='18'/%3E%3Cuse href='%23w' y='36'/%3E%3Cuse href='%23w' x='90' y='54'/%3E%3Cuse href='%23w' y='72'/%3E%3Cuse href='%23w' x='90' y='90'/%3E%3Cuse href='%23w' y='108'/%3E%3Cuse href='%23w' x='90' y='126'/%3E%3Cuse href='%23w' y='144'/%3E%3Cuse href='%23w' x='90' y='162'/%3E%3Cuse href='%23w' y='180'/%3E%3Cuse href='%23w' x='90' y='198'/%3E%3Cuse href='%23w' y='216'/%3E%3Cuse href='%23w' x='90' y='234'/%3E%3C/svg%3E");
}

/* ---- base --------------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ overflow-x:hidden }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased }
h1,h2,h3{ font-family:var(--grotesk); font-weight:800; letter-spacing:-.01em; text-wrap:balance; color:var(--fg) }
p{ max-width:68ch }
.mono{ font-family:var(--mono) }
a{ color:var(--fg); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--paper) }
:focus-visible{ outline:2px solid var(--fg); outline-offset:2px }
code{ font-family:var(--mono); font-size:.85em; background:var(--card); padding:1px 5px; border-radius:3px }
pre{ font-family:var(--mono); background:var(--card); border:1px solid var(--hair); border-radius:4px; padding:14px 16px; overflow-x:auto }
blockquote{ margin:0 }
.wrap{ max-width:var(--pm-wrap); margin:0 auto; padding:0 24px 96px }

/* ---- shared nav --------------------------------------------------------- */
.pm-nav{ max-width:var(--pm-wrap); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.pm-nav a{ text-decoration:none }
.pm-nav .pm-links{ display:inline-flex; align-items:center; gap:20px }
.pm-nav .pm-brand{ font-family:var(--grotesk); font-weight:800; letter-spacing:-.01em; color:var(--fg); font-size:1.02rem; display:inline-flex; align-items:center }
.pm-nav .pm-brand::before{ content:""; display:inline-block; width:12px; height:12px; border:2px solid var(--fg); margin-right:9px }
.pm-nav .pm-home{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.pm-nav .pm-home:hover{ color:var(--fg) }

/* ---- shared header band (full-bleed gunmetal; lattice on the header only) - */
.hero,.band{ background-color:var(--gunmetal); color:var(--paper); margin:0 -50vw; position:relative; left:50%; right:50%; width:100vw }
.hero{ background-image:var(--pm-wave); background-repeat:no-repeat; background-position:center; background-size:cover }
.hero-in,.band-in{ max-width:var(--pm-wrap); margin:0 auto; padding:58px 24px 54px; position:relative }
.eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel) }
.hero h1,.band h1{ font-size:clamp(2rem,5.3vw,3.05rem); line-height:1.05; margin:14px 0 12px; color:var(--paper) }
.hero .dek,.hero .sub,.hero p{ color:var(--ink-sub); font-size:1.02rem; max-width:62ch }
.hero .mark{ position:absolute; top:34px; right:24px; width:22px; height:22px; border:2px solid var(--fg) }
@media (max-width:640px){ .hero .mark{ display:none } }

/* ---- header provenance line (mono; middle-dot allowed here only) -------- */
.pm-prov{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--steel); margin:20px 0 0 }

/* ---- article section headings: Bricolage 750, tight, standing alone ------
   (no leading section-number device; a single hairline rule for rhythm) */
.pm-h2{ font-family:var(--grotesk); font-weight:750; letter-spacing:-.015em; text-transform:none;
        font-size:clamp(1.45rem,3vw,1.75rem); line-height:1.16; color:var(--fg);
        margin:58px 0 10px; padding-top:24px; border-top:1px solid var(--hair) }

/* ---- end-of-article plate: one factual line + two links (link, no form) -- */
.pm-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 26px;
         margin:56px 0 0; padding:22px 26px; background:var(--card); border:1px solid var(--hair); border-radius:4px }
.pm-cta p{ margin:0; font-size:1rem; line-height:1.6; color:var(--fg); max-width:52ch }
.pm-cta .pm-cta-links{ display:inline-flex; flex-wrap:wrap; gap:22px; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em }
.pm-cta a{ white-space:nowrap; text-decoration:none; color:var(--fg) }
.pm-cta a:hover{ color:var(--paper) }

/* ---- shared footer ------------------------------------------------------ */
footer{ margin-top:56px; padding-top:18px; border-top:1px solid var(--hair); color:var(--muted); font-size:.82rem; line-height:1.6 }
.pm-foot-nav{ display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; margin-bottom:18px }
.pm-foot-nav a{ color:var(--muted); text-decoration:none }
.pm-foot-nav a:hover{ color:var(--fg) }
.pm-colophon{ margin:0; max-width:82ch }

/* ---- the hallmark: a mark STRUCK INTO metal (mirrors landing .l-stamp) ----
   Gunmetal brushed face, engraved bone lettering, one inset ring, inset depth.
   Green is earned: only the tick + attestor + date lines carry --verify-ink. */
.pm-hallmark{ width:168px; aspect-ratio:1; flex:0 0 auto; border-radius:50%; display:grid; place-content:center; justify-items:center; gap:3px; padding:0 .7rem; position:relative; text-align:center; text-transform:uppercase; font-family:var(--mono); color:var(--fg); border:1px solid var(--hair); transform:rotate(-5deg);
  background:
    repeating-linear-gradient(90deg, rgba(232,230,223,.02) 0 1px, transparent 1px 3px),
    linear-gradient(120deg, rgba(232,230,223,.07) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.2) 100%),
    #1e2124;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 2px rgba(232,230,223,.08); }
.pm-hallmark::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(232,230,223,.14);
  background:conic-gradient(from 210deg, rgba(232,230,223,.1), transparent 24%, transparent 60%, rgba(232,230,223,.08), transparent 84%); }
.pm-hallmark > *{ position:relative }
/* green is earned: only the tick and the attested-date line (.s) carry it;
   the attestor + version line (.m) stays bone. */
.pm-hallmark .tick{ color:var(--verify-ink); font-size:1.2rem; line-height:1; font-weight:700 }
.pm-hallmark .k{ font-size:.62rem; font-weight:600; letter-spacing:.2em; color:var(--fg) }
.pm-hallmark .m{ font-size:.56rem; letter-spacing:.05em; margin-top:2px; color:var(--fg) }
.pm-hallmark .s{ font-size:.5rem; letter-spacing:.04em; color:var(--verify-ink) }
/* the deliberately-hollow counterexample: a status a model produced, no signer:
   dashed, unverified slate, no green, no struck-metal depth. */
.pm-hallmark.hollow{ background:#1e2124; border:1.5px dashed var(--unverified); box-shadow:none; color:var(--unverified-ink) }
.pm-hallmark.hollow::before{ border-style:dashed; border-color:rgba(147,160,178,.3); background:none }
.pm-hallmark.hollow .k,.pm-hallmark.hollow .m,.pm-hallmark.hollow .s{ color:var(--unverified-ink) }

/* ---- film grain: one feTurbulence tile, overlay-blended (mirrors atmosphere) */
.pm-grain{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ---- phones: >=44px tap targets on nav + footer links (Apple HIG) -------- */
@media (max-width:640px){
  .pm-nav .pm-brand, .pm-nav .pm-home{ display:inline-flex; align-items:center; min-height:44px }
  .pm-foot-nav a, .pm-cta .pm-cta-links a{ display:inline-flex; align-items:center; min-height:44px }
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }