/* LFOwn — the shared foundation: palette, theme switching, page chrome.
   Both the landing page and the launch app link this file, so the brand lives
   in one place. Page-specific styles stay in their own document. */

:root{
  color-scheme:light;
  --red:#F01414;
  --red-deep:#B60D0D;
  --paper:#FBF9F7;
  --card:#FFFFFF;
  --bar:rgba(251,249,247,.86);
  --ink:#111010;
  --ink-soft:#4A4644;
  --rule:rgba(17,16,16,.14);
  --glow:rgba(240,20,20,.10);
  --mark:rgba(240,20,20,.28);
  --grain-blend:multiply;
  --grain-opacity:.42;
  --display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,72px);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --red:#FF2A20;
  --red-deep:#C81109;
  --paper:#0C0C0E;
  --card:#151517;
  --bar:rgba(12,12,14,.88);
  --ink:#F4F1EE;
  --ink-soft:#9B948F;
  --rule:rgba(244,241,238,.16);
  --glow:rgba(255,42,32,.14);
  --mark:rgba(255,42,32,.34);
  --grain-blend:screen;
  --grain-opacity:.09;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
body,header.top,.card,.gapwrap,.tweet-card,.banner,.theme-toggle{
  transition:background-color .32s ease,color .32s ease,border-color .32s ease;
}
@media(prefers-reduced-motion:reduce){body,header.top,.card,.gapwrap,.tweet-card,.banner,.theme-toggle{transition:none}}
a{color:inherit}
img{max-width:100%;display:block}

/* paper grain + hairline grid */
body::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:var(--grain-blend);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right,var(--rule) 1px,transparent 1px) 0 0/ clamp(60px,9vw,140px) 100%,
    radial-gradient(120% 60% at 50% -10%, var(--glow), transparent 60%);
  opacity:.55;
}

.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* ── nav ───────────────────────────── */
header.top{
  position:sticky;top:0;z-index:50;background:var(--bar);
  backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink);
}
.top .bar{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{height:30px}
.brand .fallback{font-family:"Permanent Marker",cursive;color:var(--red);font-size:26px;line-height:1;transform:skewX(-9deg);letter-spacing:.01em}
.top nav{display:flex;gap:22px;align-items:center}
.top nav a{text-decoration:none;color:var(--ink-soft);transition:color .18s}
.top nav a:hover{color:var(--red)}
.top nav a[aria-current="page"]{color:var(--ink)}
.top nav a.btn{color:#fff}
.top nav a.btn:hover{color:#fff}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:12px 20px;border:1.5px solid var(--ink);background:var(--red);color:#fff;
  box-shadow:5px 5px 0 var(--ink);transition:transform .14s ease, box-shadow .14s ease, background .2s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);background:var(--red-deep)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
@media(max-width:860px){.top nav a.hide-s{display:none}}
.theme-toggle{
  width:38px;height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
}
.theme-toggle:hover{background:var(--ink);color:var(--paper)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}