/* ============================================================
   BYSO — Monolith design system
   Shared base + reusable patterns. Loaded by every page.
   Page-specific CSS stays inline in each page's <style> block
   and cascades OVER this file.
   See CLAUDE.md before changing anything here.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:#0C0C0B; --white:#FFFFFF; --yellow:#FFD400; --gray:#8A877E;
  --line:#E5E2DA; --dark:#0A0A09; --max:1160px;
}

/* ---------- RESET & BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:'Archivo',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Inter Tight',sans-serif;letter-spacing:-.04em}
/* Section headline default. .hero h1 and .closing h2 override with bigger clamps.
   text-wrap:balance for the same reason as .closing h2: these are short sentences
   that set on one or two lines on desktop and gain a line on a phone, where the
   34px floor meets a ~334px content box. Left alone the break lands wherever the
   measure runs out and strands a last word ("part.") on its own line. Balance is
   ignored where unsupported, which just restores the previous wrap. */
h2{font-weight:800;line-height:1;font-size:clamp(34px,5.4vw,64px);margin-bottom:48px;text-wrap:balance}

.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sec-label{color:var(--gray);margin-bottom:28px;display:block}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--ink)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo i{font-style:normal;display:inline-block;width:.42em;height:.42em;background:var(--yellow);margin-left:2px}
.nav-links{display:flex;gap:26px;align-items:center}
/* :not(.nav-cta) is load-bearing. A bare `.nav-links a` is 0-1-1 and silently
   outranks every 0-1-0 rule on .nav-cta below it — which is why the CTA spent
   its whole life rendering at 14px/500 while .nav-cta declared 12px/400. Scope
   the plain links and the CTA controls itself. */
.nav-links a:not(.nav-cta){color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.nav-links a:not(.nav-cta):hover{text-decoration:underline;text-underline-offset:4px}
.nav-links a.active{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--yellow)}

/* ---------- NAV CTA ----------
   Size is 14px/500 — the size it has always rendered at, now declared instead
   of inherited by accident. 14px of vertical padding takes the box to a
   measured 44.0px, the tap target floor, which matters because below 680px
   this button is the only thing in the nav. (The arithmetic says 45; the line
   box of 14px/1 JetBrains Mono resolves to 13, so measure, don't add up.)
   The right padding subtracts the trailing letter-space
   (.06em lands after the final K too), so the label is optically centred and
   not just mathematically.

   The yellow is DRAWN left to right, not switched on — the same gesture .rule
   makes. It's a background-size transition rather than a pseudo-element, so
   the bare text node in the markup needs no wrapper on any of the five pages.
   The prefers-reduced-motion block near the end of this file kills the
   transition, which lands it back on the old instant fill. */
.nav-cta{color:var(--ink);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);padding:14px calc(16px - .06em) 14px 16px;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left center;background-size:0 100%;transition:background-size .26s cubic-bezier(.2,.75,.25,1)}
.nav-cta:hover{background-size:100% 100%}
.nav-cta:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* Filled state for the CTA when you are already on talk.html */
.nav-cta.current{background-size:100% 100%}
@media(max-width:680px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- THE SIGNATURE RULE ----------
   2px black rule with a 180px yellow segment at its left end.
   <div class="rule"><i></i></div> — do not invent alternatives. */
.rule{position:relative;height:2px;background:var(--ink)}
.rule i{position:absolute;left:0;top:0;height:100%;width:180px;background:var(--yellow)}

/* ---------- M1 HERO ----------
   Every page opens with: h1 → rule → mono stat line.
   Pages override only .hero padding when they need a tighter/taller open. */
.hero{padding:88px 0 72px}
.hero h1{font-weight:800;line-height:.98;font-size:clamp(46px,8.6vw,110px);margin:0}
.hero .rule{margin:40px 0 20px}
.hero .line{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#555}
.hero .line b{color:var(--ink)}
.hero .line a{color:var(--ink);text-decoration:none}
.hero .line a:hover b{background:var(--yellow)}
@media(max-width:640px){.hero{padding:56px 0 48px}.hero .line{flex-direction:column;gap:12px}}

/* ---------- CLIENT LOGO GRID ----------
   "Commissioned by" (index) / "Trusted by" (marketing).
   Mono label on its own line, then a hairline grid of real marks.

   Every logo is forced to --ink by filter, so the row can never introduce a
   colour outside the palette no matter what the client's brand guide says.
   Drop in a full-colour SVG and it comes out Monolith black — that is the
   point, do not remove the filter to "show the real brand colours."

   auto-fit means the grid takes any number of logos with no CSS change:
   5 marks sit in 5 columns, 12 wrap to 6 + 6. Adding a client is one <a>. */
.clients{border-bottom:1px solid var(--ink)}
.clients .label{display:block;color:var(--gray);padding:22px 0 20px}

.clients .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--line);
  overflow:hidden           /* clips the first column's divider — see .cell */
}
/* Each cell draws its OWN top and left hairline 1px outside itself. The first
   column's left line lands at x:-1 and the grid clips it, so no outer vertical
   rule appears and no :nth-child column maths is needed — which is what lets
   the grid stay auto-fit and take any number of logos.
   Do not go back to `gap:1px` + a --line background on the grid: when the last
   row is short, that background shows through the empty tracks as a beige slab. */
.clients .cell{
  box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line);
  display:flex;align-items:center;justify-content:center;
  min-height:112px;padding:20px 22px;
  text-decoration:none
}
/* --h is the optical height for this mark, set per cell. Wordmarks read
   correct around 30px; round or stacked lockups need 48-56px to match. */
.clients .cell img{
  max-width:100%;max-height:var(--h,30px);width:auto;height:auto;
  filter:brightness(0);opacity:.82;
  transition:opacity .2s ease
}
.clients a.cell:hover img{opacity:1}
/* Fallback wordmark — shown by js/logo-fallback.js when a file is missing,
   so a bad filename degrades to type instead of a broken-image icon. */
.clients .cell .name{
  display:none;
  font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.015em;
  font-size:clamp(15px,1.8vw,19px);color:#3a3833;text-align:center;line-height:1.2
}
.clients .cell.nofile img{display:none}
.clients .cell.nofile .name{display:block}

@media(max-width:640px){
  .clients .grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .clients .cell{min-height:88px;padding:16px}
}

/* ---------- LEDGER ----------
   Proof rows: description left, tabular mono number right.
   The highlighted row (class "hi") is always the scarcity/slots row. */
.lrow{display:grid;grid-template-columns:1fr auto;gap:20px;padding:18px 0;border-top:1px solid var(--ink);align-items:baseline}
.lrow:last-of-type{border-bottom:1px solid var(--ink)}
.lrow span{font-size:15px;color:#444}
.lrow span i{font-style:normal;color:var(--gray)}
.lrow b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(17px,2.2vw,22px);font-variant-numeric:tabular-nums}
.lrow.hi b{background:var(--yellow);padding:2px 10px}

/* ---------- THREE-STEP PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.step{padding:32px 32px 44px 0;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step:not(:first-child){padding-left:32px}
.step .mono{color:var(--gray);display:block;margin-bottom:18px}
.step h3{font-weight:700;letter-spacing:-.02em;font-size:22px;margin-bottom:12px}
.step p{font-size:15px;color:#555}
@media(max-width:780px){.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--line);padding-left:0}.step:last-child{border-bottom:none}}

/* ---------- SCARCITY SLOTS ---------- */
.slots{display:flex;align-items:center;gap:14px}
.slots .mono{color:#555}
.slot-dots{display:flex;gap:6px}
.dot{width:11px;height:11px;border:1.5px solid var(--ink)}
.dot.filled{background:var(--ink)}
.dot.open{background:var(--yellow)}

/* ---------- CTAs ---------- */
.big-cta{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.01em;font-size:17px;padding:16px 32px;transition:background .15s,color .15s}
.big-cta:hover{background:var(--yellow);color:var(--ink)}
.big-cta:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Mono text link with a yellow underline (see-all work, read-all-reviews) */
.mono-link{display:inline-block;color:var(--ink);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--yellow);padding-bottom:4px}
.mono-link:hover{background:var(--yellow)}

/* ---------- CLOSING CTA BLOCK ---------- */
.closing{padding:112px 0 120px}
/* text-wrap:balance because every closing headline is one short sentence that
   sets on a single line on desktop and breaks on a phone — without it the break
   lands wherever the measure runs out and strands a final word ("matters.",
   "next.") alone on line two at 42px. Balance splits them evenly instead.
   Ignored by browsers that don't support it, which just restores the old
   behaviour; nothing depends on it. */
.closing h2{font-weight:800;line-height:.98;font-size:clamp(42px,7.6vw,96px);max-width:15ch;margin-bottom:0;text-wrap:balance}
.closing .rule{margin:44px 0 24px}
.closing .bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
@media(max-width:640px){.closing{padding:72px 0 80px}}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--ink);padding:28px 0 44px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.foot .mono{color:#555}
.foot-links{display:flex;gap:22px}
.foot-links a{color:var(--ink);text-decoration:none;font-size:14px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- SCROLL REVEAL ----------
   Add .rv to anything that should fade up. js/reveal.js adds .in. */
.rv{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}