/* ============================================================
   mondays.liminalcreative.agency
   Liminal Unit 4 brand (2026-08-06), pinned from the graded film.
   Hard rules inherited from brochure/src/styles/site.css:
   · No bold. Instrument Serif has no bold weight; font-synthesis
     is off so no browser can fake one. Emphasis is size, italic, space.
   · Stone (#407575) FAILS as body text on the dark ground (3.97:1).
     Use --muted on dark, --muted-on-light on white.
   · Vermillion is the primary action and nothing else. Its label is
     Ink, not White — 6.79:1 vs 3.09:1. Not a taste call.
   The retired Blue/Violet/Amber LCA brand must never appear here.
   ============================================================ */

@font-face { font-family:'Instrument Serif'; src:url('/fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/fonts/InstrumentSerif-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/Inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --void:#000208; --deep:#000c12; --room:#00171e; --wall:#012a30;
  --stone:#407575; --light:#d0eee7; --white:#fff; --ink:#000;
  --vermillion:#ff5b2e;
  --muted:#879b99;           /* 7.09:1 on void — AAA */
  --muted-on-light:#407575;  /* 5.22:1 on white */
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(1.5rem,5vw,5rem);
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--light);
  font-family:var(--sans); font-weight:400; font-synthesis:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

/* --- Sections: one idea per screen --- */
.sect{position:relative;padding:clamp(5rem,13vh,9rem) var(--gutter)}
.sect--tight{padding-block:clamp(3.5rem,8vh,5.5rem)}
.sect__inner{max-width:72rem;margin:0 auto}
.sect__inner--narrow{max-width:46rem}
.sect--light{background:var(--white);color:var(--wall)}
.sect--light .display{color:var(--ink)}
.sect--light .lede{color:var(--wall)}
.sect--light .muted,.sect--light .label{color:var(--muted-on-light)}
.sect--light .rule{background:rgba(0,0,0,.12)}
.sect--room{background:var(--room)}

/* --- Type --- */
.display{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.75rem,6.4vw,5.75rem);line-height:1.02;
  letter-spacing:-.012em;color:var(--white);text-wrap:balance}
.display--sm{font-size:clamp(2.25rem,4.6vw,3.75rem)}
.display em{font-style:italic}         /* one italic key word per view */
.lede{margin:0;max-width:var(--measure);font-size:clamp(1.0625rem,1.55vw,1.25rem);
  line-height:1.68;color:var(--light)}
.muted{color:var(--muted)}
.label{display:block;margin:0 0 clamp(1.5rem,3vh,2.25rem);font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rule{height:1px;background:rgba(208,238,231,.14);border:0;margin:0}
.stack>*+*{margin-top:clamp(1.5rem,3.5vh,2.5rem)}

/* --- Actions --- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1.05em 1.9em;
  border:0;border-radius:0;background:var(--vermillion);color:var(--ink);
  font-family:var(--sans);font-size:.9375rem;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform 420ms var(--ease),filter 420ms var(--ease)}
.btn:hover,.btn:focus-visible{filter:brightness(1.08);transform:translateY(-2px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn-note{font-size:.875rem;color:var(--muted)}
.sect--light .btn-note{color:var(--muted-on-light)}

/* --- Grids --- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}}
@media (max-width:700px){.grid--2{grid-template-columns:1fr}}

/* --- Proof reel --- */
.reel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.reel figure{margin:0}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--deep);display:block}
.reel figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--muted)}

/* --- Steps --- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:1.5rem 0;border-top:1px solid rgba(208,238,231,.14);
  display:grid;grid-template-columns:3.5rem 1fr;gap:1.5rem;align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);
  font-size:1.5rem;color:var(--vermillion)}
.sect--light .steps li{border-top-color:rgba(0,0,0,.12)}
.steps p{margin:0}
.steps .muted{display:block;margin-top:.4rem;font-size:.9375rem}

/* --- Price --- */
.price-row{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  padding:1.6rem 0;border-top:1px solid rgba(208,238,231,.14)}
.sect--light .price-row{border-top-color:rgba(0,0,0,.12)}
.price-row__amt{font-family:var(--serif);font-size:2rem;white-space:nowrap}
@media (max-width:560px){.price-row{grid-template-columns:1fr;gap:.35rem}}

/* --- FAQ --- */
.faq details{border-top:1px solid rgba(208,238,231,.14);padding:1.25rem 0}
.sect--light .faq details{border-top-color:rgba(0,0,0,.12)}
.faq summary{cursor:pointer;font-size:1.0625rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--vermillion)}
.faq details[open] summary::after{content:'–'}
.faq p{margin:.85rem 0 0;max-width:var(--measure);color:var(--muted)}
.sect--light .faq p{color:var(--muted-on-light)}

/* --- Form --- */
.form{display:grid;gap:1rem;max-width:34rem}
.form label{display:grid;gap:.4rem;font-size:.8125rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{font-family:var(--sans);font-size:1rem;padding:.85em 1em;
  background:var(--deep);border:1px solid rgba(208,238,231,.18);color:var(--light);
  border-radius:0}
.form input:focus,.form textarea:focus{outline:2px solid var(--vermillion);outline-offset:2px}
.form textarea{min-height:6rem;resize:vertical}
.form__status{font-size:.9375rem;color:var(--muted)}
.form__status[data-state="error"]{color:var(--vermillion)}

/* --- Footer --- */
.foot{padding:3rem var(--gutter);border-top:1px solid rgba(208,238,231,.14);
  font-size:.8125rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between}
.foot a{color:var(--muted)}