/* ═══════════════════════════════════════════════════════════════
   re:aryan — brand.css
   The shared shell. Owns tokens, base, nav, footer, CTA language,
   markers, prose, form fields, annotation grammar, focus states,
   grain, and motion discipline. Pages add only their own chapter.
   Source of truth extracted from index.html (v3 world).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0D0F12;
  --ink:#E7E4DD;
  --muted:#858B94;
  --faint:#3A3F47;
  --amber:#D69A3C;
  --oxide:#B4553F;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --hairline:rgba(231,228,221,.055);
  --w-prose:40rem;
  --w-wide:72rem;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(214,154,60,.25)}

/* film grain — procedural, barely there */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  opacity:.028;
  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 ─────────────────────────── */
nav.site{
  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;
}
nav.site .brand{color:var(--ink);text-decoration:none;letter-spacing:.08em;font-weight:500}
nav.site .brand span{color:var(--amber)}
nav.site .links{display:flex;gap:1.75rem}
nav.site .links a{color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .25s}
nav.site .links a:hover,
nav.site .links a:focus-visible,
nav.site .links a[aria-current]{color:var(--ink)}
nav.site a:focus-visible{outline:1px solid var(--amber);outline-offset:4px}

/* ── CTA language: ivory at rest, amber as signal ── */
.cta{
  display:inline-block;color:var(--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(214,154,60,.45);
  transition:color .25s,border-color .25s;
}
.cta:hover,.cta:focus-visible{color:var(--amber);border-color:var(--amber)}
.cta.send{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}

/* ── structural markers ─────────────────── */
.marker,.ch-no{
  font-size:.625rem;letter-spacing:.3em;color:var(--muted);
  text-transform:uppercase;
}
.ch-name{
  font-family:var(--mono);font-weight:500;color:var(--ink);
  font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.14em;
  text-transform:uppercase;
}
.ch-name.lit{text-transform:none}
.mv-rule{
  display:block;width:140px;height:1px;background:var(--faint);
  transform:scaleX(0);transition:transform 1.1s ease .15s;
}
.mv-rule.on{transform:scaleX(1)}

/* ── prose (Newsreader body voice) ──────── */
.prose{max-width:var(--w-prose);margin:0 auto}
.prose p{
  font-family:var(--serif);font-weight:300;font-size:1.16rem;
  line-height:1.78;color:#B9B6AE;
}
.prose p+p{margin-top:1.5rem}
.prose .intent{color:var(--ink)}

/* margin annotation grammar (one per page, maximum) */
.m-note{
  display:flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.5625rem;letter-spacing:.18em;color:var(--muted);white-space:nowrap;
}
.m-line{display:block;height:1px;background:var(--faint)}
@media (min-width:1180px){
  .has-note{position:relative}
  .has-note .m-note{position:absolute;left:100%;top:.62em;margin-left:1.1rem}
  .m-line{width:44px}
}
@media (max-width:1179.98px){
  .has-note .m-note{margin-top:.9rem}
  .m-line{width:22px}
}

/* ── form fields ────────────────────────── */
.field{margin-bottom:1.6rem}
.field label{
  display:block;font-size:.625rem;letter-spacing:.3em;
  color:var(--muted);text-transform:uppercase;margin-bottom:.55rem;
}
.field input,.field textarea{
  width:100%;background:transparent;border:1px solid #2B303A;
  color:var(--ink);font-family:var(--mono);font-size:.8rem;line-height:1.6;
  padding:.8rem .95rem;border-radius:0;transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:8.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(214,154,60,.55)}

/* ── footer ─────────────────────────────── */
footer.site{
  position:relative;z-index:5;background:var(--bg);
  padding:6vh 1.75rem 4rem;text-align:center;
}
footer.site .footer-links{
  display:flex;gap:1.6rem;align-items:baseline;justify-content:center;
  flex-wrap:wrap;margin-bottom:2rem;
}
footer.site .footer-links a{
  color:var(--muted);text-decoration:none;font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;transition:color .25s;
  position:relative;padding-bottom:.45rem;
}
footer.site .footer-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--amber);transition:width .3s;
}
footer.site .footer-links a:hover{color:var(--ink)}
footer.site .footer-links a:hover::after{width:100%}
footer.site .sep{color:var(--faint);font-size:.6875rem}
footer.site .colophon{
  font-size:.5625rem;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;
}

/* ── shared responsive + motion discipline ─ */
@media (max-width:640px){
  nav.site{padding:1.1rem 1.1rem}
  nav.site .links{gap:.8rem}
  nav.site .links a:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .mv-rule{transition:none;transform:scaleX(1)}
}