/* ============================================================
   STUDIO MLM — Brand System
   Severe-editorial / private-bank. Near-black + paper + steel.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  /* Ink & neutrals — clean, cool-neutral (no warm/ivory cast) */
  --ink:        #0E1116;
  --ink-2:      #161B22;
  --graphite:   #2C313A;   /* cool near-black for lede/body-2 */
  --slate:      #6A727C;   /* muted body / captions (cool grey) */
  --silver:     #9AA1AA;   /* muted on dark (cool grey) */
  --mist:       #D7DBE0;   /* hairlines on paper */
  --paper:      #F2F3F4;   /* primary background — neutral light */
  --paper-2:    #E8EAEC;
  --white:      #FFFFFF;   /* clean white for cards */

  /* Accents — one blue family. Deep navy on light, mid steel-blue on dark. */
  --steel:      #2B4660;   /* primary accent (links, eyebrows, buttons, CTAs) */
  --steel-mid:  #3C5B7C;
  --steel-2:    #5E80A8;   /* secondary accent on dark surfaces (same blue family) */
  --ice:        #E7ECF2;   /* faint cool-blue accent tint */

  /* Type — one grotesque family. 'mono' alias = labels/figures (NOT monospaced). */
  --grotesk: "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  --mono: "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;

  /* Rhythm */
  --pad: clamp(24px, 5vw, 96px);
  --maxw: 1240px;
  --hair: 1px solid var(--mist);

  /* Soft corners */
  --radius-lg: 22px;
  --radius:    16px;
  --radius-sm: 11px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  font-size:17px;
  line-height:1.6;
  letter-spacing:.005em;
}

/* ---------- Typographic primitives ---------- */
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--steel);
  font-weight:500;
}
.eyebrow.on-dark{ color:var(--steel-2); }

h1,h2,h3,h4{ font-weight:700; letter-spacing:-.02em; line-height:1.02; margin:0; }
.display{
  font-size:clamp(54px, 9vw, 132px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.92;
}
.h-xl{ font-size:clamp(38px, 5.2vw, 76px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.h-lg{ font-size:clamp(28px, 3.4vw, 46px); font-weight:700; letter-spacing:-.025em; line-height:1.04; }
.h-md{ font-size:clamp(21px, 2vw, 28px); font-weight:600; letter-spacing:-.015em; line-height:1.12; }
.lede{
  font-size:clamp(19px, 1.7vw, 24px);
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--graphite);
  font-weight:400;
}
p{ margin:0 0 1em; text-wrap:pretty; }
.muted{ color:var(--slate); }
.tnum{ font-variant-numeric:tabular-nums; }
a{ color:inherit; }

/* ---------- Layout ---------- */
.page{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,9vw,128px); border-top:var(--hair); }
.section.tight{ padding-block:clamp(48px,6vw,84px); }
.bleed{ width:100%; }
.dark{ background:var(--ink); color:var(--paper); }
.dark .lede{ color:var(--silver); }
.dark .muted{ color:var(--silver); }
.dark .hair, .dark .section{ border-color:rgba(255,255,255,.12); }

.row{ display:flex; gap:clamp(24px,4vw,72px); }
.grid{ display:grid; gap:clamp(20px,2.4vw,40px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:860px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .row{ flex-direction:column; }
}

/* Section header — numbered editorial index */
.sec-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:clamp(32px,4vw,64px); }
.sec-num{
  font-family:var(--mono); font-size:13px; color:var(--steel);
  letter-spacing:.15em; padding-top:.4em; min-width:48px;
}
.sec-title-wrap{ flex:1; }

/* Hairline divider */
.rule{ height:1px; background:var(--mist); border:0; margin:0; }
.dark .rule{ background:rgba(255,255,255,.14); }

/* Spec label rows (brandbook captions) */
.spec{ font-family:var(--mono); font-size:12px; color:var(--slate); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.spec b{ color:var(--ink); font-weight:500; }
.dark .spec b{ color:var(--paper); }

/* ---------- Monogram (shared) ---------- */
.mono-mark{ display:block; }
.mono-mark line, .mono-mark polyline, .mono-mark path{ fill:none; }

/* Swatch */
.swatch{ border:var(--hair); background:var(--white); border-radius:var(--radius); overflow:hidden; }
.swatch .chip{ aspect-ratio:16/10; }
.swatch .meta{ padding:14px 16px; border-top:var(--hair); }
.swatch .meta .name{ font-weight:600; font-size:15px; }
.swatch .meta .val{ font-family:var(--mono); font-size:12px; color:var(--slate); display:flex; justify-content:space-between; margin-top:4px; }

/* Card */
.card{ border:var(--hair); background:var(--white); padding:clamp(24px,2.4vw,36px); border-radius:var(--radius); }
.dark .card{ background:var(--ink-2); border-color:rgba(255,255,255,.12); }

/* Placeholder imagery */
.ph{
  position:relative; background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 10px, transparent 10px 20px), var(--paper);
  border:var(--hair); border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate); font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding:16px;
}
.ph.dark-ph{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), var(--ink-2);
  border-color:rgba(255,255,255,.12); color:var(--silver);
}

/* Misc */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--mist); padding:6px 12px; border-radius:100px;
}
.tick{ width:8px; height:8px; background:var(--steel); display:inline-block; }