/* 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);
}
/* Three columns rather than a row with space between: the side zones are never the
   same width, so only equal flexible edges put the links on the real centre line. */
.top .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:12px var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Not `.mark`: the landing uses that for its highlighter, and the logo was being
   painted with a translucent red band across its lower third. */
.brand .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}
/* Named so nothing else can claim them. `.end` was already the landing's closing
   section, which carries 120px of padding — the header inherited it and grew to
   240px tall. That is the third such collision here after `.bar` and `.progress`,
   so these are spelled out rather than short. */
.top nav.nav-centre{justify-content:center}
.top nav.nav-actions{justify-content:flex-end;gap:18px}
.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)}
/* Below this the bar keeps only the brand, the page action and the burger; the
   links and the theme switch live in the drawer. `.hide-s` has to reach the theme
   button too, so it is no longer scoped to anchors. */
@media(max-width:860px){.top nav .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}

/* ── mobile drawer ─────────────────── */
.burger{
  display:none;width:38px;height:38px;flex:0 0 auto;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1.5px solid var(--ink);background:transparent;cursor:pointer;
}
.burger span{display:block;width:17px;height:1.7px;background:var(--ink)}
.burger:hover{background:var(--ink)}
.burger:hover span{background:var(--paper)}
@media(max-width:860px){.burger{display:inline-flex}}

.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);animation:scrim .18s ease-out}
@keyframes scrim{from{opacity:0}to{opacity:1}}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(320px,82vw);
  display:flex;flex-direction:column;
  background:var(--card);border-left:1.5px solid var(--ink);
  padding:14px var(--pad) calc(18px + env(safe-area-inset-bottom));
  animation:drawer .18s ease-out;
}
@keyframes drawer{from{transform:translateX(100%)}to{transform:none}}
/* The two above are flex containers, so the attribute needs saying explicitly or a
   closed drawer stays on screen — the same collision that once broke the search. */
.scrim[hidden],.drawer[hidden]{display:none}
body.menu-open{overflow:hidden}
@media(min-width:861px){.burger,.scrim,.drawer{display:none!important}}
@media(prefers-reduced-motion:reduce){.scrim,.drawer{animation:none}}

.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.drawer-head .mono{color:var(--ink-soft)}
.drawer-close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.drawer-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.drawer-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{
  padding:18px 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:1.6rem;line-height:1;
  border-bottom:1px dashed var(--rule);
}
.drawer-nav a:hover,.drawer-nav a[aria-current="page"]{color:var(--red)}

.drawer-theme{width:100%;justify-content:flex-start;gap:12px;height:auto;padding:16px 0;
  border:0;border-bottom:1px dashed var(--rule);color:var(--ink-soft)}
.drawer-theme:hover{background:transparent;color:var(--red)}
.drawer-theme svg{width:19px;height:19px}

.drawer-x{
  margin-top:auto;display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);border:1.5px solid var(--ink);padding:14px 16px;
  transition:background .18s, color .18s;
}
.drawer-x:hover{background:var(--ink);color:var(--paper)}
.drawer-x svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}