/* ============================================================================
   ob.css — Obrussa Labs public site (obrussalabs.com)
   ----------------------------------------------------------------------------
   Self-contained. No framework, no CDN, no build step, no web fonts.

   The token values below are COPIED from the co-founder's brand kit at
   .share-publish/loretochi/brand/tokens.css (direction "Touch Needle", chosen
   2026-09-04). That file is a one-way copy of his work and is never edited from
   here; if it changes, re-copy the :root blocks below and nothing else.

   Fonts: the kit names Onest and DM Mono. We do NOT load them — a web font is a
   render-blocking third-party request on a page whose whole job is to load fast
   on a student's phone. The kit's own fallback stack (system-ui) is used, so a
   machine that happens to have Onest installed still gets it.

   MOBILE FIRST. Every rule here is written for a 390px-wide phone; the media
   queries only ever ADD room. Nothing is hidden below a breakpoint.
   ========================================================================== */

/* ---------- 1. tokens (copied from brand/tokens.css) --------------------- */
:root {
  color-scheme: light dark;

  --ob-bg: #E9E2CD;
  --ob-surface: #F1ECDC;
  --ob-raised: #F7F3E6;
  --ob-line: #CBC1A6;
  --ob-border: #857A64;

  --ob-ink: #26221C;
  --ob-ink-muted: #625A4B;

  --ob-gold: #765A15;
  --ob-gold-fill: #B58D28;

  --ob-good: #276848;
  --ob-warn: #964B1B;
  --ob-bad: #A0352E;

  --ob-font: "Onest", "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ob-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ob-s-1: 4px; --ob-s-2: 8px; --ob-s-3: 12px; --ob-s-4: 16px;
  --ob-s-5: 24px; --ob-s-6: 32px; --ob-s-7: 48px; --ob-s-8: 64px;

  --ob-r-control: 4px;
  --ob-r-panel: 8px;
  --ob-shadow-overlay: 0 2px 12px rgba(38, 34, 28, 0.14);

  --ob-focus: 2px solid var(--ob-gold);
  --ob-ease: cubic-bezier(0.2, 0, 0, 1);

  --ob-wrap: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ob-bg: #1B1815;
    --ob-surface: #241F1A;
    --ob-raised: #2D2721;
    --ob-line: #3D362E;
    --ob-border: #7E7363;
    --ob-ink: #ECE5D2;
    --ob-ink-muted: #A79C87;
    --ob-gold: #D6AF48;
    --ob-gold-fill: #C9A23A;
    --ob-good: #6CC49A;
    --ob-warn: #E08A5A;
    --ob-bad: #E8776E;
    --ob-shadow-overlay: 0 2px 12px rgba(0, 0, 0, 0.60);
  }
}
:root[data-theme="dark"] {
  --ob-bg: #1B1815;
  --ob-surface: #241F1A;
  --ob-raised: #2D2721;
  --ob-line: #3D362E;
  --ob-border: #7E7363;
  --ob-ink: #ECE5D2;
  --ob-ink-muted: #A79C87;
  --ob-gold: #D6AF48;
  --ob-gold-fill: #C9A23A;
  --ob-good: #6CC49A;
  --ob-warn: #E08A5A;
  --ob-bad: #E8776E;
  --ob-shadow-overlay: 0 2px 12px rgba(0, 0, 0, 0.60);
}

/* ---------- 2. base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ob-bg);
  color: var(--ob-ink);
  font-family: var(--ob-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0 0 var(--ob-s-4); font-weight: 500; text-wrap: balance; letter-spacing: -0.01em; }
h3, h4 { margin-bottom: var(--ob-s-2); }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
h3 { font-size: 1.125rem; line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.4; }

p { margin: 0 0 var(--ob-s-4); max-width: 68ch; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--ob-ink-muted);
    text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover, a:focus-visible { text-decoration-color: var(--ob-gold); text-decoration-thickness: 2px; }

:focus-visible { outline: var(--ob-focus); outline-offset: 2px; }

code, kbd, samp, .ob-num {
  font-family: var(--ob-mono); font-variant-numeric: tabular-nums; font-size: 0.9375em;
}

img, svg { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--ob-line); margin: var(--ob-s-7) 0; }

/* Skip link — first focusable thing on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ob-surface); color: var(--ob-ink);
  padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-border);
  border-radius: var(--ob-r-control); text-decoration: none;
}
.skip:focus { left: var(--ob-s-3); top: var(--ob-s-3); }

/* ---------- 3. layout ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--ob-wrap);
  margin: 0 auto;
  padding: 0 var(--ob-s-4);
}
@media (min-width: 40rem) { .wrap { padding: 0 var(--ob-s-6); } }

section { margin: var(--ob-s-8) 0; }
@media (min-width: 48rem) { section { margin: 5rem 0; } }

.muted { color: var(--ob-ink-muted); }
.small { font-size: 0.875rem; line-height: 1.5; }
.measure { max-width: 62ch; }
.lead { font-size: 1.125rem; line-height: 1.5; }
@media (min-width: 40rem) { .lead { font-size: 1.25rem; } }

.label {
  display: inline-block;
  font-size: 0.75rem; line-height: 1.33; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ob-ink-muted);
}

/* the streak — the kit's section-head device, once per section */
.streak::before {
  content: ""; display: block;
  width: 28px; height: 2px; margin-bottom: var(--ob-s-3);
  background: var(--ob-gold); border-radius: 1px 0 0 1px;
}

/* ---------- 4. masthead -------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--ob-line);
  background: var(--ob-bg);
}
/* Sticky only where there is vertical room for it. On a phone the bar is two
   rows, and a sticky two-row bar eats a quarter of the screen on every scroll. */
@media (min-width: 40rem) { .masthead { position: sticky; top: 0; z-index: 20; } }

.bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ob-s-2) var(--ob-s-3);
  min-height: 56px; padding-top: var(--ob-s-2); padding-bottom: var(--ob-s-2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--ob-s-3);
  text-decoration: none; font-weight: 500; font-size: 1rem;
  padding: var(--ob-s-2) 0; margin-right: auto;
}
.brand svg { width: 26px; height: 26px; flex: none; color: var(--ob-ink); }
.brand .wordmark { white-space: nowrap; }

/* No hamburger, no JS, nothing to discover. On a phone the bar is two rows: the
   wordmark on top, the whole nav underneath it. The beta pill is therefore one
   tap from every page, which is the point.
   ⛔ Nothing is hidden below a breakpoint — the rows only rearrange. */
.nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ob-s-2) var(--ob-s-4);
}
.navlinks { display: flex; align-items: center; gap: var(--ob-s-4); }
@media (max-width: 34.99rem) {
  /* Row one is the wordmark; row two is the whole nav, left-aligned under it.
     Measured at 390px: all four controls fit on that second row. */
  .nav { flex: 1 0 100%; justify-content: flex-start; }
  .brand { margin-right: 0; }
}
.nav a { text-decoration: none; color: var(--ob-ink-muted); font-size: 0.9375rem; padding: 6px 0; }
.nav a:hover, .nav a:focus-visible { color: var(--ob-ink); text-decoration: underline; text-decoration-color: var(--ob-gold); }
.nav a[aria-current="page"] { color: var(--ob-ink); text-decoration: underline; text-decoration-color: var(--ob-gold); text-decoration-thickness: 2px; }
.nav .cta-small {
  color: var(--ob-bg); background: var(--ob-ink);
  padding: 6px 12px; border-radius: var(--ob-r-control); font-weight: 600;
}
:root[data-theme="dark"] .nav .cta-small { background: var(--ob-gold-fill); color: var(--ob-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .cta-small { background: var(--ob-gold-fill); color: var(--ob-bg); }
}
.nav .cta-small:hover { text-decoration: none; opacity: 0.88; }
/* The pill is already the loudest thing in the bar; the current-page underline
   that every other nav link gets renders as a stray gold bar across it. */
.nav .cta-small[aria-current="page"] { text-decoration: none; }

#theme {
  font: inherit; font-size: 0.875rem; cursor: pointer;
  background: transparent; color: var(--ob-ink-muted);
  border: 1px solid var(--ob-border); border-radius: var(--ob-r-control);
  min-width: 40px; min-height: 36px; padding: 0 8px;
}

/* ---------- 5. buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; text-decoration: none;
  min-height: 48px;                    /* thumb target on a phone */
  padding: 12px 22px;
  border-radius: var(--ob-r-control); border: 1px solid transparent;
  background: var(--ob-ink); color: var(--ob-bg);
  cursor: pointer;
  transition: opacity 120ms var(--ob-ease);
}
:root[data-theme="dark"] .btn { background: var(--ob-gold-fill); color: var(--ob-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: var(--ob-gold-fill); color: var(--ob-bg); }
}
.btn:hover { opacity: 0.88; }
.btn.ghost { background: transparent; color: var(--ob-ink); border-color: var(--ob-border); }
.btn.ghost:hover { background: var(--ob-raised); opacity: 1; }

.cta { display: flex; flex-direction: column; gap: var(--ob-s-3); margin: var(--ob-s-5) 0; }
.cta .btn { width: 100%; }
@media (min-width: 30rem) {
  .cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cta .btn { width: auto; }
}

/* ---------- 6. panels & grids -------------------------------------------- */
.panel {
  background: var(--ob-surface);
  border-radius: var(--ob-r-panel);
  padding: var(--ob-s-5);
}
.panel > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--ob-s-4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--ob-surface);
  border: 1px solid var(--ob-line);
  border-radius: var(--ob-r-panel);
  padding: var(--ob-s-5);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--ob-s-2); }
a.card { text-decoration: none; display: block; }
a.card:hover, a.card:focus-visible { background: var(--ob-raised); border-color: var(--ob-border); }
a.card .go { color: var(--ob-gold); font-weight: 500; }

/* numbered list of steps */
ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
ol.steps > li {
  counter-increment: s; position: relative;
  padding-left: 2.5rem; margin-bottom: var(--ob-s-5);
}
ol.steps > li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ob-mono); font-size: 0.8125rem;
  color: var(--ob-gold);
  border: 1px solid var(--ob-border); border-radius: 50%;
}
ol.steps h3 { margin-bottom: var(--ob-s-1); }
ol.steps p { margin-bottom: 0; }

ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows > li {
  padding: var(--ob-s-4) 0;
  border-bottom: 1px solid var(--ob-line);
  max-width: 68ch;
}
ul.rows > li:last-child { border-bottom: 0; }

/* the honest-state box: what is and is not true today */
.state {
  border: 1px solid var(--ob-border);
  border-left: 3px solid var(--ob-gold);
  border-radius: var(--ob-r-panel);
  background: var(--ob-surface);
  padding: var(--ob-s-5);
}
.state > :last-child { margin-bottom: 0; }
.state dl { margin: 0; }
.state dt { font-weight: 600; margin-top: var(--ob-s-4); }
.state dt:first-child { margin-top: 0; }
.state dd { margin: var(--ob-s-1) 0 0; color: var(--ob-ink-muted); max-width: 62ch; }

/* ---------- 7. hero ------------------------------------------------------ */
/* ⛔ padding-block ONLY. A `padding:` shorthand here silently zeroed the
   horizontal padding `.wrap` sets, and the hero text ran to the edge of the
   screen on a phone — caught in a 390px render, 2026-09-14. */
/* Measured 2026-09-15 in a 390px frame: with 48px top padding the three lines under the
   button ended at 793px — inside an 844px phone, outside a 664px one. 32px on a phone. */
.hero { padding-top: var(--ob-s-6); padding-bottom: var(--ob-s-6); }
@media (min-width: 48rem) { .hero { padding-top: 5rem; padding-bottom: var(--ob-s-8); } }
.hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
.hero .lead { margin-top: var(--ob-s-3); margin-bottom: var(--ob-s-3); }
.gold { color: var(--ob-gold); }
/* The three true lines under the button. Compact on a phone so the whole hero is
   one viewport at 390px; a row of three at desktop width for the same reason. */
.hero .cta { margin-bottom: var(--ob-s-5); }
ul.three { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ob-s-3); }
ul.three > li { font-size: 0.9375rem; line-height: 1.45; padding-left: var(--ob-s-4);
                border-left: 2px solid var(--ob-gold); max-width: 40ch; }
@media (min-width: 46rem) { ul.three { grid-template-columns: repeat(3, 1fr); gap: var(--ob-s-5); } }

/* ---------- 8. footer ---------------------------------------------------- */
footer.site {
  border-top: 1px solid var(--ob-line);
  margin-top: var(--ob-s-8);
  padding: var(--ob-s-7) 0 var(--ob-s-8);
  font-size: 0.9375rem;
}
footer.site .cols { display: grid; gap: var(--ob-s-6); grid-template-columns: 1fr; }
@media (min-width: 46rem) { footer.site .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
footer.site h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
                 color: var(--ob-ink-muted); margin-bottom: var(--ob-s-3); }
footer.site ul { list-style: none; margin: 0; padding: 0; }
/* Footer links are still links on a phone: give them a real tap height. */
footer.site li { margin-bottom: var(--ob-s-1); }
footer.site li a { display: inline-block; padding: 6px 0; }
footer.site .fine {
  margin-top: var(--ob-s-6); padding-top: var(--ob-s-4);
  border-top: 1px solid var(--ob-line);
  display: flex; flex-wrap: wrap; gap: var(--ob-s-2) var(--ob-s-5);
  color: var(--ob-ink-muted); font-size: 0.8125rem;
}

/* ---------- 9. beta mount ------------------------------------------------ */
/* The frame the beta service drops into. Sized so the page does not jump when
   it loads, and readable on a phone. */
#ob-beta-mount {
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-r-panel);
  background: var(--ob-surface);
  min-height: 18rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#ob-beta-mount > iframe { border: 0; width: 100%; flex: 1 1 auto; min-height: 30rem; }
.mount-fallback { padding: var(--ob-s-5); }
.mount-fallback > :last-child { margin-bottom: 0; }

/* the request-access form on /beta (2026-09-21) */
.wl { max-width: 34rem; margin-top: var(--ob-s-4); }
.wl-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ob-s-3); }
.wl label { font-weight: 600; font-size: 0.95rem; }
.wl input, .wl select {
  font: inherit; color: var(--ob-ink); background: var(--ob-bg);
  border: 1px solid var(--ob-border); border-radius: var(--ob-r-control);
  min-height: 44px; padding: 8px 12px; width: 100%;
}
.wl input:focus, .wl select:focus { outline: 2px solid var(--ob-gold); outline-offset: 1px; }
.wl input:disabled, .wl select:disabled { opacity: 0.6; }
/* the honeypot: off-canvas, not display:none, so a naive bot still "sees" it */
.wl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 10. motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}