/* ============================================================
   ORYN — The Coordination Layer for Base
   Style: research paper / magazine. Warm cream, ink black.
   ============================================================ */

:root{
  --bg:        #F5F1EA;
  --ink:       #111111;
  --muted:     #555555;
  --accent:    #EAE5DD;
  --line:      #D9D2C7;
  --paper-dark:#171513;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --max: 1140px;
  --pad: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  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.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(245,241,234,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--max); margin:0 auto;
  padding:16px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.nav__logo{
  font-family:var(--serif); font-weight:700; font-size:22px;
  letter-spacing:.04em; display:flex; align-items:center; gap:4px;
}
.nav__dot{ font-size:9px; transform:translateY(-7px); color:var(--ink); }
.nav__links{
  display:flex; gap:24px; margin-left:auto;
  font-family:var(--mono); font-size:13px; color:var(--muted);
}
.nav__links a{ position:relative; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background:var(--ink); transition:width .25s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-family:var(--mono); font-size:13px;
  border:1px solid var(--ink); padding:8px 14px; border-radius:999px;
  transition:background .2s, color .2s;
}
.nav__cta:hover{ background:var(--ink); color:var(--bg); }

/* ---------- Shared ---------- */
.band{
  max-width:var(--max); margin:0 auto;
  padding:clamp(64px,10vw,128px) var(--pad);
  border-top:1px solid var(--line);
}
.band:first-of-type{ border-top:none; }
.band--accent{ background:var(--accent); max-width:none; }
.band--accent > *{ max-width:var(--max); margin-inline:auto; }
.band--dark{
  background:var(--paper-dark); color:var(--bg); max-width:none;
}
.band--dark > *{ max-width:var(--max); margin-inline:auto; }

.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  display:inline-block; margin-bottom:24px;
}
.kicker--light{ color:#b8af9f; }

.display{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,4.6vw,52px); line-height:1.08;
  letter-spacing:-.01em; margin:0 0 8px;
}
.band__intro{ color:var(--muted); max-width:46ch; margin-top:14px; }
.band__head{ margin-bottom:48px; }

/* Reveal on scroll */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in{ opacity:1; transform:none; }

/* ---- Handwrite: draw text char by char, left → right ---- */
.handwrite .char{
  display:inline-block; white-space:pre;
  opacity:0; filter:blur(4px);
  transform:translateY(.16em) scaleX(.82);
  transform-origin:left center;
}
.handwrite.in .char{
  animation:writeIn .44s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--i) * 0.032s);
}
@keyframes writeIn{
  to{ opacity:1; filter:blur(0); transform:none; }
}

/* ---- Draw SVG ink strokes as if sketched by hand ---- */
.draw-stroke{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s ease;
}
.in .draw-stroke,
.hero__sketch.in .draw-stroke,
.prim.in .draw-stroke{ stroke-dashoffset:0; }
/* stagger strokes inside a group for a sketching cadence */
.in .draw-stroke:nth-of-type(2){ transition-delay:.18s; }
.in .draw-stroke:nth-of-type(3){ transition-delay:.36s; }
.in .draw-stroke:nth-of-type(4){ transition-delay:.54s; }
.in .draw-stroke:nth-of-type(5){ transition-delay:.72s; }

@media (prefers-reduced-motion: reduce){
  .handwrite .char{ opacity:1; clip-path:none; filter:none; transform:none; }
  .draw-stroke{ stroke-dashoffset:0; }
}

/* ---------- HERO ---------- */
.hero{
  max-width:var(--max); margin:0 auto;
  padding:clamp(70px,12vw,150px) var(--pad) clamp(50px,8vw,90px);
  text-align:center;
}
.hero__tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:30px;
}
.hero__tag .dot{
  width:7px; height:7px; border-radius:50%; background:#3a7d44;
  box-shadow:0 0 0 4px rgba(58,125,68,.15);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(58,125,68,0);} }

.hero__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(72px,17vw,190px); line-height:.9;
  letter-spacing:-.03em; margin:0;
}
.hero__sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,3vw,30px); margin:12px 0 0; color:var(--ink);
}
.hero__triplet{
  display:flex; justify-content:center; gap:clamp(14px,4vw,46px);
  flex-wrap:wrap; margin:36px 0 26px;
  font-family:var(--serif); font-size:clamp(20px,2.6vw,30px); font-weight:500;
}
.hero__triplet span{ position:relative; }
.hero__lead{
  color:var(--muted); max-width:48ch; margin:0 auto 38px;
}
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  font-family:var(--mono); font-size:14px; letter-spacing:.02em;
  padding:14px 26px; border-radius:999px; border:1px solid var(--ink);
  transition:transform .15s ease, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ background:#000; }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }

.hero__sketch{ margin-top:64px; }
.hero__sketch svg{ width:min(600px,92%); height:auto; }

/* Hand-drawn ink */
.ink-stroke{ stroke:var(--ink); stroke-width:2; fill:none; stroke-linecap:round; }
.ink-line{ stroke:var(--ink); stroke-width:1.4; fill:none; stroke-dasharray:4 5; opacity:.6; }
.sketch-label{
  font-family:var(--mono); font-size:10px; fill:var(--muted);
  text-anchor:middle; letter-spacing:.08em;
}

/* ---------- PROBLEM ---------- */
.problem{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.discon{ list-style:none; padding:0; margin:28px 0 0; }
.discon li{
  font-family:var(--serif); font-size:clamp(18px,2vw,23px);
  padding:14px 0; border-bottom:1px dashed var(--line); color:var(--ink);
}
.problem__visual{ position:relative; height:300px; }
.float-node{
  position:absolute; font-family:var(--mono); font-size:14px;
  padding:14px 20px; background:var(--bg); border:1.5px solid var(--ink);
  border-radius:14px; box-shadow:4px 4px 0 var(--ink);
}
.problem__visual .n1{ top:20px; left:10px; transform:rotate(-3deg); }
.problem__visual .n2{ top:90px; right:0; transform:rotate(2deg); }
.problem__visual .n3{ bottom:30px; left:30px; transform:rotate(-1deg); }
.float-stamp{
  position:absolute; bottom:0; right:6px;
  font-family:var(--serif); font-style:italic; font-size:20px;
  color:#b23b3b; border:2px solid #b23b3b; border-radius:8px;
  padding:4px 14px; transform:rotate(-8deg); opacity:.85;
}
.problem__dashes{ position:absolute; inset:0; width:100%; height:100%; }
.dash{ stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 6; fill:none; }

/* ---------- VISION ---------- */
.vision__lead{ max-width:18ch; }
.vision__lead em{ color:var(--muted); }
.chain{
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
  margin-top:56px; justify-content:flex-start;
}
.chain__node{
  font-family:var(--mono); font-size:15px;
  padding:14px 22px; border:1.5px solid var(--ink); border-radius:999px;
  background:var(--bg);
}
.chain__bar{ width:46px; height:2px; background:var(--ink); }
@media(max-width:640px){
  .chain{ flex-direction:column; align-items:flex-start; }
  .chain__bar{ width:2px; height:26px; margin-left:30px; }
}

/* ---------- PRIMITIVES ---------- */
.prim-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.prim{
  position:relative; padding:34px 28px 28px;
  border:1.5px solid var(--ink); border-radius:18px; background:var(--bg);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:240px;
}
.prim:hover{ transform:translateY(-4px); box-shadow:6px 8px 0 var(--ink); }
.prim__num{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:18px; }
.prim h3{ font-family:var(--serif); font-size:30px; font-weight:600; margin:6px 0 10px; }
.prim p{ color:var(--muted); margin:0; max-width:24ch; }
.prim__icon{ position:absolute; top:26px; right:24px; width:52px; height:52px; }

/* ---------- ARCHITECTURE ---------- */
.arch{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.arch__diagram{ display:flex; flex-direction:column; align-items:center; gap:30px; }
.arch__core{
  border:1.5px solid var(--bg); border-radius:18px;
  padding:24px 40px; text-align:center; min-width:240px;
  background:rgba(245,241,234,.04);
}
.arch__core-label{
  font-family:var(--serif); font-size:34px; font-weight:700;
  letter-spacing:.05em; display:block; margin-bottom:14px;
}
.arch__core ul{ list-style:none; margin:0; padding:0; }
.arch__core li{
  font-family:var(--mono); font-size:14px; padding:7px 0;
  border-top:1px dashed rgba(245,241,234,.22); color:#d8cfc0;
}
.arch__spokes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.arch__spokes span{
  font-family:var(--mono); font-size:13px; color:#b8af9f;
  border:1px solid rgba(245,241,234,.25); border-radius:999px; padding:8px 16px;
}
.arch__text{ font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); line-height:1.4; color:var(--bg); }

/* ---------- RESEARCH ---------- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.res-card{
  position:relative; padding:30px 26px; border:1.5px solid var(--ink);
  border-radius:16px; background:var(--accent);
  transition:transform .2s, box-shadow .2s; cursor:pointer;
  min-height:170px; display:flex; flex-direction:column;
}
.res-card:hover{ transform:translateY(-4px); box-shadow:6px 8px 0 var(--ink); }
.res-card__id{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.res-card h3{ font-family:var(--serif); font-size:26px; font-weight:600; margin:auto 0 0; }
.res-card__arrow{ position:absolute; top:24px; right:24px; font-size:20px; }
.res-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.res-tags span{
  font-family:var(--mono); font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
}

/* ---------- ROADMAP ---------- */
.road{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:r; }
.road__item{
  display:grid; grid-template-columns:160px 1fr; gap:30px; align-items:start;
  padding:32px 0; border-top:1px solid var(--line);
}
.road__item:last-child{ border-bottom:1px solid var(--line); }
.road__phase{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding-top:8px;
}
.road__item h3{ font-family:var(--serif); font-size:clamp(26px,3vw,38px); font-weight:600; margin:0; }
.road__item ul{ grid-column:2; margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.road__item ul li{
  font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--bg); border:1px solid var(--ink); border-radius:999px; padding:6px 14px;
}

/* ---------- MANIFESTO ---------- */
.manifesto__lines{ text-align:center; }
.manifesto__lines p{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,4.4vw,52px); line-height:1.25; margin:.2em 0; color:#d8cfc0;
}
.manifesto__lines em{ color:var(--bg); font-style:italic; }
.manifesto__close{ margin-top:.8em !important; color:var(--bg) !important; }

/* ---------- GITHUB ---------- */
.repos{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:720px; }
.repo{
  font-family:var(--mono); font-size:18px;
  border:1.5px solid var(--ink); border-radius:12px; padding:22px 24px;
  display:flex; align-items:center; gap:12px; background:var(--bg);
  transition:background .2s, color .2s, transform .15s;
}
.repo__icon{ opacity:.45; }
.repo:hover{ background:var(--ink); color:var(--bg); transform:translateX(4px); }
.repos__motto{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:40px;
  font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,24px); color:var(--muted);
}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--paper-dark); color:var(--bg);
  padding:clamp(60px,9vw,110px) var(--pad);
  text-align:center;
}
.footer__brand{
  font-family:var(--serif); font-weight:700; font-size:clamp(40px,8vw,84px);
  letter-spacing:.04em; display:inline-flex; gap:6px; align-items:flex-start;
}
.footer__brand .nav__dot{ color:var(--bg); transform:translateY(6px); }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.4vw,26px); margin:10px 0 24px; color:#d8cfc0; }
.footer__url{
  font-family:var(--mono); font-size:16px; border-bottom:1px solid #b8af9f;
  padding-bottom:3px; transition:color .2s, border-color .2s;
}
.footer__url:hover{ color:#fff; border-color:#fff; }
.footer__social{ display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.social{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; color:#d8cfc0;
  border:1px solid rgba(245,241,234,.25); border-radius:999px; padding:9px 18px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.social:hover{ background:var(--bg); color:var(--paper-dark); border-color:var(--bg); transform:translateY(-2px); }
.social svg{ display:block; width:17px; height:17px; }
.footer__meta{
  display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(245,241,234,.15);
  font-family:var(--mono); font-size:12px; color:#9c9384; letter-spacing:.06em;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .nav__links{ display:none; }
  .problem{ grid-template-columns:1fr; gap:40px; }
  .prim-grid{ grid-template-columns:1fr; }
  .res-grid{ grid-template-columns:1fr; }
  .arch{ grid-template-columns:1fr; gap:40px; }
  .repos{ grid-template-columns:1fr; }
  .road__item{ grid-template-columns:1fr; gap:6px; }
  .road__item ul{ grid-column:1; }
}

/* ============================================================
   SUBPAGES (docs, manifesto, primitives, research, github)
   ============================================================ */

/* clickable cards from the home page */
.prim, .res-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.prim__more, .res-card__more{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--muted); margin-top:18px;
}
.prim:hover .prim__more, .res-card:hover .res-card__more{ color:var(--ink); }

.page{ max-width:860px; margin:0 auto; padding:0 var(--pad); }
.page--wide{ max-width:1140px; }

/* page header */
.phead{ padding:clamp(56px,9vw,110px) 0 clamp(34px,5vw,56px); border-bottom:1px solid var(--line); }
.breadcrumb{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px; display:flex; gap:8px; align-items:center;
}
.breadcrumb a:hover{ color:var(--ink); }
.phead__title{
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(40px,7vw,76px); line-height:1.02; margin:0 0 18px;
}
.phead__lead{ font-family:var(--serif); font-size:clamp(19px,2.3vw,26px); color:var(--muted); line-height:1.45; max-width:60ch; margin:0; }
.phead__meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;
}
.phead__meta span{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}

/* prose */
.prose{ padding:clamp(40px,6vw,68px) 0 clamp(56px,8vw,96px); }
.prose h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,38px);
  line-height:1.12; margin:2.2em 0 .5em; letter-spacing:-.01em;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.4vw,26px); margin:1.8em 0 .4em; }
.prose p{ font-size:18px; line-height:1.7; color:#2c2926; margin:0 0 1.1em; }
.prose strong{ font-weight:600; color:var(--ink); }
.prose a.inline{ border-bottom:1px solid var(--muted); }
.prose a.inline:hover{ border-color:var(--ink); }
.prose ul, .prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.prose li{ font-size:18px; line-height:1.65; color:#2c2926; margin:.4em 0; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.4em; }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--muted); }
.lede{ font-family:var(--serif); font-size:clamp(20px,2.4vw,27px) !important; line-height:1.5 !important; color:var(--ink) !important; }

/* callout / note box */
.note{
  border:1.5px solid var(--ink); border-radius:16px; padding:24px 26px; margin:1.8em 0;
  background:var(--accent); box-shadow:5px 6px 0 var(--ink);
}
.note__k{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.note p:last-child{ margin-bottom:0; }

/* code-ish block */
.codeblock{
  font-family:var(--mono); font-size:14px; line-height:1.7;
  background:var(--paper-dark); color:#e9e2d4; border-radius:14px;
  padding:22px 24px; margin:1.6em 0; overflow-x:auto; white-space:pre;
}
.codeblock .c{ color:#9c9384; }
.codeblock .k{ color:#9ec7a4; }

/* spec / key-value table */
.spec{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:16px; }
.spec th, .spec td{ text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; white-space:nowrap; width:200px; }
.spec td{ font-size:17px; line-height:1.55; }

/* feature grid inside pages */
.fgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:1.8em 0; }
.fgrid .f{ border:1.5px solid var(--ink); border-radius:14px; padding:24px; }
.fgrid .f h4{ font-family:var(--serif); font-size:21px; font-weight:600; margin:0 0 8px; }
.fgrid .f p{ font-size:16px; margin:0; color:var(--muted); }
.fgrid .f .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }

/* numbered steps */
.steps{ counter-reset:s; list-style:none; padding:0; margin:1.6em 0; }
.steps li{ position:relative; padding:0 0 1.6em 56px; }
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:-2px; width:38px; height:38px;
  display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%;
  font-family:var(--mono); font-size:15px;
}
.steps li:not(:last-child)::after{
  content:""; position:absolute; left:18px; top:38px; bottom:6px; width:1.5px; background:var(--line);
}
.steps h4{ font-family:var(--serif); font-size:20px; margin:6px 0 6px; }
.steps p{ margin:0; color:var(--muted); font-size:16px; }

/* related / next links */
.related{ border-top:1px solid var(--line); padding:clamp(40px,6vw,64px) 0; }
.related h2{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rcard{
  border:1.5px solid var(--ink); border-radius:14px; padding:22px;
  transition:transform .15s, box-shadow .2s; display:block;
}
.rcard:hover{ transform:translateY(-3px); box-shadow:5px 6px 0 var(--ink); }
.rcard .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.rcard h3{ font-family:var(--serif); font-size:22px; font-weight:600; margin:6px 0 4px; }
.rcard p{ font-size:14px; color:var(--muted); margin:0; }

@media(max-width:860px){
  .fgrid{ grid-template-columns:1fr; }
  .related__grid{ grid-template-columns:1fr; }
  .spec th{ width:auto; display:block; padding-bottom:2px; }
  .spec td{ display:block; padding-top:2px; padding-bottom:16px; }
  .spec tr{ display:block; border-bottom:1px solid var(--line); }
  .spec th, .spec td{ border:none; }
}