/* ═══════════════════════════════════════════════════════════════
   re:aryan — paper.css
   The document class. Case studies and analyses render as ivory
   paper inside the graphite site: the brand's negative. Same
   typefaces, same grammar, inverted ground. Used by
   tao-catalog.html and faire-analysis.html.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --p-bg:#ECE8DE;
  --p-ink:#1B1E23;
  --p-body:#33373E;
  --p-muted:#565A62;
  --p-faint:#A29C90;
  --p-hair:rgba(20,22,26,.14);
  --p-amber:#A66A1E;
  --p-card:#F3F0E8;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--p-bg);
  color:var(--p-ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(166,106,30,.22)}

/* the same grain, printed instead of projected */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  opacity:.05;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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── navigation, paper variant ─────────── */
nav.paper{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 1.75rem;
  font-size:.6875rem;letter-spacing:.18em;
  background:linear-gradient(to bottom,var(--p-bg) 55%,rgba(236,232,222,0));
}
nav.paper .brand{color:var(--p-ink);text-decoration:none;letter-spacing:.08em;font-weight:500}
nav.paper .brand span{color:var(--p-amber)}
nav.paper .links{display:flex;gap:1.75rem}
nav.paper .links a{color:var(--p-muted);text-decoration:none;text-transform:uppercase;transition:color .25s}
nav.paper .links a:hover,
nav.paper .links a:focus-visible,
nav.paper .links a[aria-current]{color:var(--p-ink)}
nav.paper a:focus-visible{outline:1px solid var(--p-amber);outline-offset:4px}

/* ── document head ─────────────────────── */
.doc-head{max-width:52rem;margin:0 auto;padding:18vh 1.75rem 4vh}
.doc-head .ch-no{
  font-size:.625rem;letter-spacing:.3em;color:var(--p-muted);
  text-transform:uppercase;
}
.doc-title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.12;
  letter-spacing:-.01em;color:var(--p-ink);margin:1.3rem 0 1.4rem;
}
.doc-lede{
  font-family:var(--serif);font-weight:300;font-size:1.12rem;
  line-height:1.72;color:var(--p-body);max-width:38rem;
}
.doc-note{
  font-size:.5625rem;letter-spacing:.18em;color:var(--p-muted);
  text-transform:uppercase;margin-top:1.6rem;line-height:2;
}
.doc-links{margin-top:2rem;display:flex;gap:2.4rem;flex-wrap:wrap}

/* ── CTA, paper variant ────────────────── */
.cta-p{
  display:inline-block;color:var(--p-ink);text-decoration:none;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;padding-bottom:.38rem;
  border-bottom:1px solid rgba(166,106,30,.5);
  transition:color .25s,border-color .25s;
}
.cta-p:hover,.cta-p:focus-visible{color:var(--p-amber);border-color:var(--p-amber)}

/* ── document body defaults ────────────── */
.doc{max-width:52rem;margin:0 auto;padding:2vh 1.75rem 8vh}
.doc p{
  font-family:var(--serif);font-weight:300;font-size:1.08rem;
  line-height:1.75;color:var(--p-body);margin-bottom:1.15rem;
}
.doc h2{
  font-family:var(--mono);font-weight:500;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--p-ink);
  border-top:1px solid var(--p-hair);
  padding-top:2.6rem;margin:3.4rem 0 1.4rem;
}
.doc .mono{font-family:var(--mono);font-size:.88em}
.doc .accent{color:var(--p-amber);font-weight:400}
.doc a{color:var(--p-amber);text-decoration:none;
  border-bottom:1px solid rgba(166,106,30,.3);transition:border-color .25s}
.doc a:hover{border-bottom-color:var(--p-amber)}
.doc .stack{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  color:var(--p-muted);text-transform:uppercase;margin-top:2rem;
}
.decision{
  background:var(--p-card);border:1px solid var(--p-hair);
  border-left:2px solid var(--p-amber);
  padding:1.4rem 1.6rem;margin:1.4rem 0;
}
.decision h3{
  font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink);
  margin-bottom:.7rem;
}
.decision p{font-size:1rem;margin-bottom:.6rem}
.decision p:last-child{margin-bottom:0}
.strike{
  font-family:var(--mono);font-size:.85em;
  background:#E3DECD;padding:.08em .35em;
}

/* ── end navigation + footer ───────────── */
.doc-endnav{
  max-width:52rem;margin:0 auto;padding:6vh 1.75rem 8vh;
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
footer.paper{
  padding:5vh 1.75rem 4rem;text-align:center;
  border-top:1px solid var(--p-hair);
}
footer.paper .footer-links{
  display:flex;gap:1.6rem;align-items:baseline;justify-content:center;
  flex-wrap:wrap;margin-bottom:2rem;
}
footer.paper .footer-links a{
  color:var(--p-muted);text-decoration:none;font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;transition:color .25s;
}
footer.paper .footer-links a:hover{color:var(--p-ink)}
footer.paper .sep{color:var(--p-faint);font-size:.6875rem}
footer.paper .colophon{
  font-size:.5625rem;letter-spacing:.24em;color:var(--p-muted);
  text-transform:uppercase;
}

@media (max-width:640px){
  nav.paper{padding:1.1rem}
  nav.paper .links{gap:.8rem}
  nav.paper .links a:nth-child(3){display:none}
  .doc-head{padding-top:14vh}
}