/* ==========================================================================
   LCS — base.css
   Reset, type, layout primitives, motion primitives.
   Logical properties only. `margin-left` is a lint error.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  font:var(--w-thin) var(--fs-body)/1.68 var(--sans);
  background:var(--ink);
  color:var(--on-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;font-weight:var(--w-thin);line-height:1.03}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
figure{margin:0}

:focus-visible{outline:2px solid var(--accent,var(--brand));outline-offset:3px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Section padding is deliberately uneven. Even spacing reads mechanical. */
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:var(--sec-y-t)}
.sec--tall{padding-block:var(--sec-y-l)}

/* the container break — at least one per page */
.bleed{margin-inline:calc(50% - 50vw);width:100vw}

/* 12-col grid. Asymmetry is the default: 7/5 and 8/4, never 6/6. */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.split--r{grid-template-columns:5fr 7fr}
.split--84{grid-template-columns:8fr 4fr}

/* prose lives in columns 1–7, never centred, never full width */
.col-7{grid-column:1 / span 7}
.col-8{grid-column:1 / span 8}
.col-9{grid-column:1 / span 9}
.col-5{grid-column:1 / span 5}
.col-r5{grid-column:8 / span 5}

/* ── TYPE ROLES ────────────────────────────────────────────────────────── */

.display{font-size:var(--fs-display);letter-spacing:var(--tr-display);
  font-weight:var(--w-thin);line-height:1.0;text-wrap:balance;max-width:16ch}
.h2{font-size:var(--fs-h2);letter-spacing:var(--tr-h2);
  font-weight:var(--w-thin);line-height:1.06;text-wrap:balance;max-width:20ch}
.h3{font-size:var(--fs-h3);letter-spacing:var(--tr-h3);font-weight:var(--w-reg);line-height:1.3}

.lede{font-size:var(--fs-lede);font-weight:var(--w-thin);line-height:1.6;
  color:var(--fg-mid);max-width:54ch;text-wrap:pretty}
.prose{max-width:66ch;color:var(--fg-mid);text-wrap:pretty}
.prose b,.prose strong{color:var(--fg);font-weight:var(--w-med)}

.eyebrow{font:var(--w-med) var(--fs-eyebrow)/1 var(--mono);
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";inline-size:20px;block-size:1px;background:var(--accent)}

/* caption — describes, never repeats. no full stop. */
.cap{font-size:13.5px;color:var(--fg-low);line-height:1.5;max-width:52ch}

/* serif is permitted twice per page: the stat and the pull quote. */
.stat{font:var(--w-reg) var(--fs-stat)/.88 var(--serif);
  letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Motion primitives and RTL live in tokens.css so the homepage can link
   that file alone. Do not duplicate them here. */

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */

@media(max-width:1024px){
  .split,.split--r,.split--84{grid-template-columns:8fr 4fr}
}
@media(max-width:768px){
  .split,.split--r,.split--84{grid-template-columns:1fr}
  .col-7,.col-8,.col-9,.col-5,.col-r5{grid-column:1 / -1}
}