/* MLH Client Portal — critical.css
 * ABOVE-THE-FOLD CRITICAL CSS (created 2026-05-10, WS-PERF flicker fix)
 *
 * Purpose:
 *   These rules render the hero (.lp-cover + the four lp-cover-bot stat
 *   cells) before any other linked stylesheet finishes loading. Inline
 *   this entire file inside the <style> block in the document <head>
 *   (or load it via a single <link rel="stylesheet">), then keep the
 *   rest of the design system in tokens/base/ledger/nav-strong/footer.
 *
 *   Without this file, the hero text relies on tokens.css (custom props)
 *   + base.css (reset + typography) + the inline <style> block. The
 *   tokens import is what causes color/typography flash if the network
 *   is slow — colors fall back to UA defaults, then jump to dark-on-dark
 *   parchment when tokens.css arrives.
 *
 *   Anything below the fold (ledger rows, slider, testimonial copy,
 *   featured projects) stays in the late-loading stylesheets — that's
 *   fine, those sections are scrolled into view long after first paint.
 *
 * Source rules: copied verbatim from the inline <style> block in
 * /public/index.html — do NOT diverge. If you change one, change both.
 */

/* ===== Tokens that the above-the-fold layout reads ===== */
:root {
  /* Surfaces */
  --paper: #FAF8F4;
  --paper-warm: #F5F2EC;
  --ink: #1A1A1A;
  --ink-deep: #0E0E0E;
  --dark: #2C2C2C;
  --subtle: #666;
  --light: #999;
  --white: #FFFFFF;
  --navy: #14181C;

  /* Accents */
  --accent: #B8860B;
  --gold: #D4AF37;

  /* Hairlines */
  --rule: rgba(26, 26, 26, 0.14);
  --rule-strong: rgba(26, 26, 26, 0.28);

  /* Typography */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Layout rhythm */
  --outer: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(48px, 6vw, 96px);
}

/* ===== Reset (minimal — only what the cover relies on) ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.005em; color: var(--ink); }

/* ===== Reveal animation primitives (must paint before motion.js runs) ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms cubic-bezier(.2,.6,.2,1),transform 700ms cubic-bezier(.2,.6,.2,1)}
[data-reveal].is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ===== Hero (lp-cover) — above-the-fold ===== */
.lp-cover{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:1.6rem var(--outer) 2.4rem;background:#0E0E0E;color:var(--paper);overflow:hidden;isolation:isolate}
.lp-bg{position:absolute;inset:0;background-size:cover;background-position:center 48%;opacity:.88;filter:grayscale(.03) brightness(.7) contrast(1.08);z-index:-2}
.lp-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,14,.94) 0%,rgba(14,14,14,.72) 38%,rgba(14,14,14,.18) 70%,rgba(14,14,14,.22) 100%),linear-gradient(180deg,rgba(14,14,14,.32) 0%,rgba(14,14,14,.40) 45%,rgba(14,14,14,.92) 100%);z-index:-1}
.lp-cover::after{content:"";position:absolute;left:var(--outer);right:var(--outer);bottom:7.2rem;height:1px;background:rgba(250,248,244,.22);z-index:0}
.lp-cover-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:clamp(1rem,2vw,2rem);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,248,244,.68)}
.lp-cover-row .lp-brand{justify-self:start;display:grid;gap:.75rem}
.lp-cover-row .lp-mark{justify-self:start;color:var(--paper);display:flex;align-items:center;text-decoration:none}
.lp-cover-row .lp-mark img{width:150px;height:auto;display:block;border-radius:0!important;object-fit:contain!important;box-shadow:none!important;mix-blend-mode:screen;opacity:.82}
.lp-cover-row .lp-meta{justify-self:end;text-align:right}
.lp-cover-row .lp-cta{justify-self:end;color:var(--paper);border-bottom:1px solid var(--gold);padding:0 0 2px;transition:color 200ms ease,border-color 200ms ease}
.lp-cover-row .lp-cta:hover,.lp-nav-links a:hover{color:var(--gold);text-decoration:none}
.lp-nav-links{display:flex;justify-content:flex-end;gap:clamp(.9rem,1.6vw,1.8rem);align-items:center}
.lp-nav-links a{color:rgba(250,248,244,.76);text-decoration:none;transition:color 200ms ease}
.lp-cover-mid{align-self:end;padding:0 0 4.8rem;max-width:min(54rem,65vw)}
.lp-cover-eyebrow{font-family:var(--font-mono);font-size:11px;line-height:1.7;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.lp-cover-eyebrow span{display:block}
.lp-cover-h1{font-family:var(--font-display);font-weight:400;font-size:clamp(56px,12vw,210px);line-height:.88;letter-spacing:-.012em;color:var(--paper);margin:0}
.lp-cover-h1 em{font-style:italic;color:var(--gold);font-weight:400}
.lp-cover-sub{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(20px,2vw,30px);line-height:1.4;color:rgba(250,248,244,.86);margin:1.6rem 0 0;max-width:34ch}
.lp-cover-bot{align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,244,.66)}
.lp-cover-bot .lp-scroll{color:rgba(250,248,244,.7)}
.lp-cover-bot b{display:block;margin-bottom:.35rem;color:var(--paper);font-family:var(--font-display);font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:0;text-transform:none;font-weight:400}

/* QA-pass overrides that match the inline block (kept consistent) */
.lp-cover-h1 { font-size: clamp(58px, 9.8vw, 132px) !important; line-height: 0.93 !important; letter-spacing: -0.01em !important; }
.lp-cover-mid { max-width: min(54rem, 65vw) !important; }

/* ===== Mobile cover overrides — also above the fold on phones ===== */
@media (max-width: 900px){
  .lp-cover-row{grid-template-columns:1fr auto}
  .lp-cover-row .lp-meta,.lp-nav-links{display:none}
  .lp-cover-mid{padding:0 0 2rem}
}
@media (max-width: 560px){
  .lp-cover{min-height:100svh;padding:1.15rem var(--outer) 1.7rem}
  .lp-cover-row{font-size:9.5px;letter-spacing:.18em;gap:.75rem}
  .lp-cover-row .lp-mark img{width:104px}
  .lp-cover-h1{font-size:clamp(50px,16vw,76px);line-height:.9}
  .lp-cover-sub{font-size:clamp(18px,5.4vw,22px)}
  .lp-cover-bot{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;font-size:9.5px;letter-spacing:.16em}
}
@media (max-width: 380px){
  .lp-cover-h1{font-size:clamp(46px,15vw,68px)}
}
