/* Inter (SIL OFL 1.1, rsms/inter via @fontsource-variable/inter 5.3.0) -- self-hosted; licence in fonts/Inter-OFL.txt.
   Variable weight + optical size: large headings get Inter Display shapes automatically. Brand GUIDELINES.md allows
   a "neutral geometric grotesque (Inter-class)". */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin-opsz-normal.woff2") format("woff2")}
/* --faint raised 2026-10-11 to pass WCAG AA (>= 4.5:1 on every background it sits on). */
/* moizz.in landing -- "an editorial register". Self-hosted, no fonts/CDNs/scripts (CSP default-src 'self').
   Design consult: astra-consults/20261011-moizz-landing-design.md. Dark first; light via prefers-color-scheme. */
:root{
  --bg:#0f1216; --bg2:#12161b; --surface:#161b21; --surface2:#1b2129; --line:#252c35; --line2:#323b46;
  --text:#e8edf3; --soft:#c4ccd6; --muted:#8e99a8; --faint:#7d8796;
  --accent:#6aa5ff; --accent-ink:#9cc3ff; --accent-wash:rgba(106,165,255,.10); --accent-line:rgba(106,165,255,.32);
  --seal:#d9b56a; --seal-wash:rgba(217,181,106,.10);
  --tile:#0f1216; --tile-ring:rgba(91,157,255,.32); --tile-stroke:#e8edf3;
  --grid:rgba(232,237,243,.035);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --max:1080px; --gutter:20px; --label:190px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f4ef; --bg2:#f1eee7; --surface:#fffdf8; --surface2:#faf7f0; --line:#e3ddd1; --line2:#d3cbbc;
    --text:#14181d; --soft:#2e3640; --muted:#5b6572; --faint:#656d77;
    --accent:#1c4f9c; --accent-ink:#1c3d6e; --accent-wash:rgba(28,79,156,.07); --accent-line:rgba(28,79,156,.30);
    --seal:#9a6b12; --seal-wash:rgba(154,107,18,.08);
    --grid:rgba(20,24,29,.045);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.62 var(--sans);letter-spacing:-.011em;
  font-optical-sizing:auto;font-feature-settings:"cv11","calt";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--text);padding:8px 12px;border-radius:6px;z-index:9}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}

/* ---------- the mark: THE GATE + custom wordmark, official vectors (brand/_gen.py), frozen geometry.
   Paper on dark, Ink on light via currentColor; no effects on the logo (brand GUIDELINES.md, Astra r2). ---------- */
.lockup{display:block;flex:none;color:var(--text);height:auto}
@media (prefers-color-scheme:light){.lockup{color:#0B0C0E}}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent}
@supports not (background:color-mix(in srgb,red 50%,blue)){.top{background:var(--bg)}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text);padding:4px 0}
.nav{display:flex;gap:22px;font-size:14px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 35%,#000 35%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 30% 35%,#000 35%,transparent 80%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:52px;
  align-items:center;padding-top:88px;padding-bottom:96px}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 22px;
  display:flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:22px;height:1px;background:var(--accent)}
h1{font-size:clamp(40px,6.4vw,68px);line-height:1.02;letter-spacing:-.036em;font-weight:700;margin:0 0 26px}
h1 .quiet{display:block;color:var(--accent-ink)}
.lead{font-size:19px;line-height:1.6;color:var(--soft);max-width:34em;margin:0 0 34px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:560;letter-spacing:-.006em;
  text-decoration:none;border:1px solid var(--line2);color:var(--text);background:var(--surface)}
.btn:hover{border-color:var(--accent-line);background:var(--surface2)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary:hover{background:var(--soft);border-color:var(--soft)}
.btn .arr{font-family:var(--mono);opacity:.75}

/* the signature card: anatomy of a register entry (schematic -- no real data) */
.entry{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 60px -30px rgba(0,0,0,.55);position:relative}
@media (prefers-color-scheme:light){.entry{box-shadow:0 1px 0 #fff inset,0 24px 50px -32px rgba(60,48,20,.35)}}
.entry-h{display:flex;justify-content:space-between;align-items:center;font:500 11.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:1px dashed var(--line2);margin-bottom:6px}
.entry-h .id{color:var(--text)}
.entry dl{margin:0}
.entry .row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.4}
.entry .row:last-of-type{border-bottom:0}
.entry dt{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.entry dd{margin:0;color:var(--soft)}
.tag{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:5px;white-space:nowrap}
.tag.frozen{color:var(--accent-ink);background:var(--accent-wash);border:1px solid var(--accent-line)}
.tag.sealed{color:var(--seal);background:var(--seal-wash);border:1px solid color-mix(in srgb,var(--seal) 35%,transparent)}
.tag.open{color:var(--muted);border:1px dashed var(--line2)}
.entry-f{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2);font:12px/1.5 var(--mono);color:var(--faint)}

/* ---------- register spine: numbered sections ---------- */
.sec{border-bottom:1px solid var(--line)}
.sec .wrap{display:grid;grid-template-columns:var(--label) minmax(0,1fr);gap:40px;padding-top:84px;padding-bottom:84px;position:relative}
.sec .wrap:before{content:"";position:absolute;left:calc(var(--gutter) + 13px);top:0;bottom:0;width:1px;
  background:linear-gradient(var(--line2),var(--line2)) no-repeat;background-size:1px 100%}
.marker{position:relative;align-self:start;position:sticky;top:92px}
.marker .n{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--bg);
  border:1px solid var(--line2);font:600 11px/1 var(--mono);color:var(--text);position:relative;z-index:1}
.marker .l{display:block;margin:12px 0 0 0;font:500 11.5px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.028em;font-weight:650;margin:0 0 20px;max-width:20em}
h3{font-size:18px;line-height:1.3;margin:0 0 8px;font-weight:620;letter-spacing:-.014em}
.prose{max-width:40em;color:var(--soft)}
.prose p{margin:0 0 16px}
.prose b{color:var(--text);font-weight:640}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 10px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden}
.fact{padding:22px 22px 20px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact .num{font:600 clamp(30px,4vw,44px)/1 var(--sans);letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums}
.fact .what{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.45}
.snap{font:12px/1.5 var(--mono);color:var(--faint);margin:10px 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font:12.5px/1 var(--mono);color:var(--soft);padding:8px 11px;border:1px solid var(--line2);border-radius:999px;background:var(--bg2)}

/* method steps */
.steps{list-style:none;margin:30px 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 16px 16px;position:relative}
.steps li:before{counter-increment:s;content:"0" counter(s);font:600 11px/1 var(--mono);color:var(--accent-ink);letter-spacing:.08em}
.steps h3{margin-top:12px;font-size:16px}
.steps p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.steps li:not(:last-child):after{content:"";position:absolute;top:50%;right:-12px;width:12px;height:1px;background:var(--line2)}
.pull{margin:8px 0 30px;padding:4px 0 4px 20px;border-left:2px solid var(--seal);font-size:clamp(20px,2.4vw,24px);line-height:1.4;
  letter-spacing:-.01em;color:var(--text);max-width:24em}
.pull span{display:block;font:12px/1.6 var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:8px}

/* case study */
.case{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:28px 0 30px;overflow:hidden}
.case .r{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 20px;border-top:1px solid var(--line)}
.case .r:first-child{border-top:0}
.case .k{font:600 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case .v{font-size:15px;color:var(--soft)}
.case code{font:13.5px var(--mono);color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* other work */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.card p{margin:0;font-size:15px;color:var(--muted)}
.card .tag{display:inline-block;margin-bottom:14px}
.card.wide{grid-column:1/-1}

/* contact */
.mail{display:inline-block;font:700 clamp(26px,4vw,40px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--text);
  text-decoration:none;border-bottom:2px solid var(--accent-line);padding-bottom:4px;margin:6px 0 24px}
.mail:hover{border-bottom-color:var(--accent)}
.scope{display:flex;gap:12px;align-items:flex-start;max-width:44em;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg2);font-size:14.5px;color:var(--muted);line-height:1.55}
.scope b{color:var(--text)}

/* footer */
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding-top:30px;padding-bottom:40px;
  font-size:13px;color:var(--faint)}
.foot .lockup{color:var(--muted)}
.foot a{color:var(--muted)}
.colo{line-height:1.6}
.founder{color:var(--accent-ink);font-weight:600;letter-spacing:-.005em}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:64px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(2):after{display:none}
}
@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  /* phones: the menu moves to its own row under the logo and scrolls sideways if needed (was hidden; 2026-10-22) */
  .top .wrap{height:auto;flex-wrap:wrap;row-gap:4px;padding-top:12px;padding-bottom:10px}
  .nav{width:100%;gap:18px;font-size:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:4px 0}
  .sec .wrap{grid-template-columns:1fr;gap:14px;padding-top:58px;padding-bottom:58px}
  .sec .wrap:before{display:none}
  .marker{position:static;display:flex;align-items:center;gap:12px}
  .marker .l{margin:0}
  .facts{grid-template-columns:1fr}
  .fact{border-left:0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:16px}
  .fact:first-child{border-top:0}
  .fact .what{margin-top:0}
  .cards{grid-template-columns:1fr}
  .case .r{grid-template-columns:1fr;gap:4px}
  .lead{font-size:17.5px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .steps li:after{display:none}
  .entry{padding:18px 16px 14px}
  .entry .row{grid-template-columns:78px minmax(0,1fr) auto;gap:10px;font-size:13px}
  .entry dt{font-size:10.5px}
  .btn{flex:1 1 auto;justify-content:center}
}
/* ---------- motion (Astra r2): presentation only -- every final state is in the HTML; nothing loops, nothing
   simulates live activity; all of it is off under prefers-reduced-motion. ---------- */
@media (prefers-reduced-motion:no-preference){
  /* 1. the register card's annotations arrive in reading order, then the seal */
  .entry .tag.frozen,.entry .tag.sealed{animation:tagin .34s cubic-bezier(.2,.7,.3,1) both}
  .entry .row:nth-child(1) .tag{animation-delay:.30s}
  .entry .row:nth-child(2) .tag{animation-delay:.42s}
  .entry .row:nth-child(3) .tag{animation-delay:.54s}
  .entry .row:nth-child(4) .tag{animation-delay:.66s}
  .entry .row:nth-child(5) .tag{animation-delay:.98s;animation-duration:.42s}
  /* 2. the section spine draws itself: with the scroll where supported, once on load elsewhere */
  .sec .wrap:before{transform-origin:top;animation:spine .75s ease-out .15s both}
  @supports (animation-timeline:view()){
    .sec .wrap:before{animation:spine linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
  /* 3. links acknowledge attention: the underline grows from the left */
  .prose a,.colo a{text-decoration:none;padding-bottom:1px;
    background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,
               linear-gradient(var(--accent-line),var(--accent-line)) 0 100%/100% 1px no-repeat;
    transition:background-size .16s ease-out}
  .prose a:hover,.prose a:focus-visible,.colo a:hover,.colo a:focus-visible{background-size:100% 1px,100% 1px}
}
@keyframes tagin{from{opacity:.15;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes spine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media print{.top{position:static}.hero:before{display:none}}