/* ══════════════════════════════════════════════════════════════════════
   REALITYOVERLAY — shared shell
   Midnight Bento design system, applied site-wide.

   Every secondary page (index, about, contact, capture, studio, privacy,
   terms) already shares this stylesheet and the same nav/footer markup, so
   the whole site re-skins from this one file with no per-page edits.

   Rules inherited from the chosen direction:
     · ONE accent. The old cards carried seven different data-accent colours;
       the user disliked the multi-colour treatment and the system allows one.
     · Two accent tones because a single one cannot clear AA at both sizes:
       #c94a19 for filled surfaces, #ff7a45 for small text on dark.
     · Generous radii, soft dark tiles, hairline borders.
     · Atmosphere is manga screentone, not glow orbs. The old .orb /
       .grid-floor decorations are neutralised below rather than deleted from
       the markup, so nothing 404s or reflows if a page still emits them.
   ══════════════════════════════════════════════════════════════════════ */

@import url('/fonts.css');

:root{
  --field:#c94a19;
  --bg:#141419;
  --card:#1e1e26;
  --line:#2c2c36;
  --ink:#ffffff;
  --ink2:#a6a6b4;      /* 7.0:1 on --card */
  --ink3:#8c8c9a;      /* 5.2:1 on --card — labels only */
  --hot:#ff7a45;       /* small text on dark — 6.6:1 */
  --r:26px;
  --r-sm:16px;
  --gap:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#141419}
body{
  margin:0;background:#141419;color:#ffffff;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Screentone wash across the top of every page — the same manga texture the
   product page uses, so the site reads as one thing. */
body::before{
  content:'';position:absolute;left:0;right:0;top:0;height:760px;z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.5px,transparent 1.6px);
  background-size:11px 11px;
  -webkit-mask-image:linear-gradient(#000,transparent);
          mask-image:linear-gradient(#000,transparent);
}
body > *{position:relative;z-index:1}

/* Old decorative layer — neutralised, not deleted from markup. */
.orb,.grid-floor{display:none !important}

/* ── nav ───────────────────────────────────────────────────────────── */
.nav{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  max-width:1340px;margin:0 auto;width:100%;padding:22px 24px;
  font:600 13px/1.3 'Inter',sans-serif;
}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font:900 18px/1 'Archivo',sans-serif;letter-spacing:.10em;margin-right:auto;
}
.brand .dot{
  width:12px;height:12px;border-radius:50%;background:var(--hot);
  flex:none;box-shadow:0 0 0 4px rgba(255,122,69,.16);
}
.nav nav{display:flex;gap:26px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink2)}
.nav a:hover{color:#fff}
.nav .brand{color:#fff}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-block;text-decoration:none;font:700 13px/1 'Inter',sans-serif;
  padding:15px 26px;border-radius:26px;border:2px solid transparent;color:#fff;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn.primary{background:var(--hot);color:#20120b;border-color:var(--hot)}
.btn.primary:hover{background:#ff9268;border-color:#ff9268;color:#20120b}
.btn.ghost{border-color:rgba(255,255,255,.42)}
.btn.ghost:hover{border-color:#fff}

/* ── hero (homepage) ───────────────────────────────────────────────── */
.hero{
  max-width:1340px;margin:0 auto;width:100%;padding:70px 24px 40px;
  position:relative;
}
.hero h1{
  font:900 clamp(42px,7.4vw,104px)/.92 'Archivo',sans-serif;
  letter-spacing:-.04em;text-transform:uppercase;margin:0 0 22px;
}
.lead{
  font:500 clamp(15px,1.5vw,17.5px)/1.62 'Inter',sans-serif;
  color:var(--ink2);margin:0 0 28px;max-width:56ch;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── card grid ─────────────────────────────────────────────────────── */
.grid{
  max-width:1340px;margin:0 auto;width:100%;padding:20px 24px 80px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--gap);
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 24px;text-decoration:none;color:#fff;position:relative;
  display:flex;flex-direction:column;min-height:210px;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:#43434f;transform:translateY(-2px)}
/* Screentone bloom in the corner — the tile equivalent of the product page. */
.card::after{
  content:'';position:absolute;right:-16px;bottom:-16px;width:170px;height:170px;
  pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,122,69,.8) 1.4px,transparent 1.5px);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%);
}
/* Cursor-tracking spotlight. script.js already sets --mx/--my (rAF-throttled);
   this is the half that consumes them. Hover-only and very low contrast — it
   should register as the surface catching light, not as an effect. */
.card::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(255,122,69,.09),transparent 62%);
}
.card:hover::before{opacity:1}
@media(hover:none){.card::before{display:none}}
.card > *{position:relative;z-index:1}
.card h2{
  font:800 22px/1.14 'Archivo',sans-serif;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 10px;
}
.card p{font:500 14px/1.62 'Inter',sans-serif;color:var(--ink2);margin:0 0 18px}
.card-tag{
  align-self:flex-start;font:700 11px/1 'Inter',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 13px;border-radius:16px;margin-bottom:16px;
  border:1.5px solid var(--line);color:var(--ink3);
}
.card-tag.live{background:var(--hot);border-color:var(--hot);color:#20120b}
.card-tag.soon{color:var(--hot);border-color:rgba(255,122,69,.42)}
.card-arrow{
  margin-top:auto;font:400 22px/1 'Inter',sans-serif;color:var(--hot);
  transition:transform .2s ease;
}
.card:hover .card-arrow{transform:translateX(5px)}

/* ── content pages (privacy, terms, about, contact, capture, studio) ─ */
.page{
  max-width:820px;margin:0 auto;width:100%;padding:56px 24px 90px;flex:1;
}
.page h1{
  font:900 clamp(32px,5vw,58px)/1.02 'Archivo',sans-serif;
  letter-spacing:-.035em;text-transform:uppercase;margin:0 0 10px;
}
.page h2{
  font:800 clamp(19px,2.2vw,25px)/1.2 'Archivo',sans-serif;
  letter-spacing:-.02em;margin:44px 0 14px;
}
.page h3{font:700 17px/1.25 'Archivo',sans-serif;margin:26px 0 10px}
.page p{font:400 15.5px/1.72 'Inter',sans-serif;color:var(--ink2);margin:0 0 16px}
.page ul,.page ol{margin:0 0 18px;padding-left:22px}
.page li{
  font:400 15px/1.68 'Inter',sans-serif;color:var(--ink2);margin-bottom:9px;
}
.page li::marker{color:var(--hot)}
.page strong{color:#fff;font-weight:600}
.page a{color:var(--hot);text-decoration:underline;text-underline-offset:3px}
.page a:hover{color:#ff9268}
.page code{
  font:500 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;color:#e6e3ee;
}
.page .meta{
  font:600 12.5px/1.4 'Inter',sans-serif;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.12em;margin:0 0 34px;
}
.page em{color:var(--ink3);font-style:italic}

/* ── footer ────────────────────────────────────────────────────────── */
footer{
  max-width:1340px;margin:0 auto;width:100%;padding:34px 24px 46px;
  border-top:1px solid var(--line);margin-top:auto;
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  font:600 13px/1.4 'Inter',sans-serif;
}
.foot-brand{font:900 16px/1 'Archivo',sans-serif;letter-spacing:.10em;margin-right:auto}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--ink2);text-decoration:none}
.foot-links a:hover{color:#fff}
.foot-meta{width:100%;color:var(--ink3);font-weight:500;font-size:12.5px;padding-top:6px}

@media(max-width:640px){
  .nav{gap:16px;padding:18px 18px}
  .nav nav{gap:18px;width:100%}
  .hero{padding:44px 18px 30px}
  .grid{padding:16px 18px 60px}
  .page{padding:40px 18px 70px}
  footer{padding:28px 18px 40px}
}

/* Visible keyboard focus. Nothing suppressed the browser default, but a default
   ring on a dark custom-styled surface is easy to miss. :focus-visible shows it
   for keyboard users only, never on a mouse click. */
:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px}

/* Skip link — first tab stop, so keyboard users aren't forced through the nav
   on every page before reaching the content. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--hot);
  color:#20120b;padding:12px 18px;border-radius:0 0 12px 0;
  font:700 13px/1 'Inter',sans-serif;text-decoration:none}
.skip:focus{left:0}