/* monobrain.ai — shared chrome: tokens, fonts, nav, mark, components, footer.
   Page-specific layout stays inline per page. (research 10 §Shared infrastructure) */

@font-face{
  font-family:'CodexMono';
  src:url('/fonts/CodexMono.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('/fonts/Newsreader.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('/fonts/Newsreader-Italic.woff2') format('woff2');
  font-weight:200 800;font-style:italic;font-display:swap;
}
:root{
  --ink:#0a0a0b;
  --ink-raise:#101012;
  --paper:#e9e7e2;
  --warm:#f7f1e4;
  --chalk:#dcdad4;
  --dim:#98968f;
  --faint:#5c5b58;
  --line:#232322;
  --stroke:#62615c;
  --p-ink:#0f0f0e;
  --p-dim:#5d5b55;
  --p-faint:#8a8780;
  --p-line:#d5d2c9;
  --serif:'Newsreader','Iowan Old Style',Palatino,Charter,Georgia,serif;
  --mono:'CodexMono',ui-monospace,Menlo,Consolas,monospace;
  --grotesk:-apple-system,'Helvetica Neue',Inter,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:420;
  line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(247,241,228,.22);color:#fff}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
a:hover{text-decoration-color:var(--warm)}
a:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
em{font-style:italic}
strong{font-weight:700;color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.wrap--essay{max-width:46rem}

/* the mark — a circle that is also a 1 */
/* the mark: the monolex torus, mathematically projected — rests at the exact 60-degree
   family pose (the published invariant); spins only on hover */
.mark{position:relative;width:26px;height:26px;perspective:270px;flex:0 0 auto}
.mark svg{display:block;width:100%;height:100%;fill:var(--chalk)}
@media (hover:hover){.mark:hover svg{animation:markspin 1.4s ease}}
@keyframes markspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* nav */
nav{
  display:flex;align-items:center;gap:.9rem;
  padding:1.4rem clamp(1.25rem,4vw,3rem);
  max-width:72rem;margin:0 auto;
}
.nav-wordmark{display:block;text-decoration:none}
.nav-wordmark img{display:block;height:1rem;width:auto}
.nav-links{margin-left:auto;display:flex;gap:1.7rem;flex-wrap:wrap}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  color:var(--dim);text-decoration:none;text-transform:uppercase;
}
.nav-links a:hover{color:var(--warm)}
.nav-links a[aria-current]{color:var(--warm)}
@media (max-width:640px){
  nav{flex-wrap:wrap;row-gap:.7rem}
  .nav-links{margin-left:0;flex-basis:100%;gap:1.1rem}
}

/* shared section grammar */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:400;
  letter-spacing:.3em;color:var(--faint);text-transform:uppercase;
  margin-bottom:1.4rem;
}
.pull{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.3;
  text-wrap:balance;color:var(--warm);
}
.cite{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase;
}
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  border:1px solid var(--stroke);color:var(--paper);
  padding:.85rem 1.4rem;border-radius:0;
}
.btn:hover{border-color:var(--warm);color:var(--warm)}
.btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--solid:hover{background:var(--warm);color:var(--ink)}

/* terminal block */
.term{
  font-family:var(--mono);
  background:var(--ink-raise);border:1px solid var(--line);
  padding:1.2rem 1.4rem;margin:3rem 0 0;
  font-size:clamp(11px,2.6vw,14.5px);line-height:1.7;
  overflow-x:auto;border-radius:0;
}
.term .ps1{color:var(--faint)}
.term .out{color:var(--warm)}

/* whoami */
.whoami{
  font-family:var(--mono);font-size:1.05rem;color:var(--dim);
  text-align:center;padding:4rem 1.5rem 5rem;
}
.whoami .ps1{color:var(--faint)}
.cursor{
  display:inline-block;width:.62em;height:1.15em;
  background:var(--warm);vertical-align:text-bottom;margin-left:.15em;
  box-shadow:0 0 16px rgba(247,241,228,.55);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* footer */
footer{border-top:1px solid var(--line);padding:4rem 0 0;overflow:hidden}
.foot-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:2.5rem;max-width:72rem;margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
}
.foot-grid h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--faint);text-transform:uppercase;margin-bottom:1rem;font-weight:400}
.foot-grid ul{list-style:none}
.foot-grid li{margin:.55rem 0}
.foot-grid a{font-size:.98rem;color:var(--dim);text-decoration:none}
.foot-grid a:hover{color:var(--warm)}
.colophon{
  max-width:72rem;margin:3.5rem auto 0;
  padding:1.6rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--dim);line-height:2.1;
}
.colophon .sig{color:var(--chalk)}
.brandline{
  text-align:center;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.34em;
  color:var(--dim);text-transform:uppercase;
  margin-top:3.4rem;
}
/* the outro — the drawn logotype, carrying the family gradient fade via mask */
.outro{
  width:min(92vw,68rem);aspect-ratio:1054/139;
  margin:3.5rem auto 0;transform:translateY(12%);
  user-select:none;pointer-events:none;
  background:linear-gradient(100deg,#f4f2ec 8%,#b9b6af 34%,#55534e 62%,#1a1a19 88%);
  -webkit-mask:url('/img/wordmark.svg') center/contain no-repeat;
          mask:url('/img/wordmark.svg') center/contain no-repeat;
}

/* reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* noanim shared */
.noanim *,.noanim *::before,.noanim *::after{animation:none!important;transition:none!important}
.noanim .js .reveal,.noanim .reveal{opacity:1!important;transform:none!important}

/* reduced motion shared */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .cursor{animation:none}
}