/* ============================================================
   BRUTALS.AGENCY — MANUAL STYLES
   Editorial / brutalist-soft hybrid. Uses tokens.css.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- LAYOUT PRIMITIVES ---------- */
.wrap{ width:100%; max-width:var(--container-wide); margin:0 auto; padding: 0 var(--space-6); }
.wrap-base{ max-width: var(--container-base); }
.wrap-narrow{ max-width: var(--container-narrow); }

.rule{ border:0; border-top: var(--bw-hair) solid var(--color-ink); margin:0; }
.rule-thick{ border-top-width: var(--bw-rule); }
.rule-red{ border-top-color: var(--color-signal); }
.rule-fog{ border-top-color: var(--color-ash-200); }

/* ---------- TYPE UTILITIES ---------- */
.t-mono { font-family: var(--font-mono); }
.t-up   { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.t-up-w { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.t-tight{ letter-spacing: var(--tracking-tight); }
.t-snug { letter-spacing: var(--tracking-tightest); }

.t-label{
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.t-number{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- SECTION FRAME ---------- */
.section{
  padding: var(--space-9) 0;
  border-top: var(--bw-line) solid var(--color-ink);
  position: relative;
}
.section--invert{ background: var(--color-ink); color: var(--color-paper); }
.section--cream{ background: var(--color-cream); }
.section--red{ background: var(--color-signal); color: var(--color-paper); }

.section-head{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  margin-bottom: var(--space-8);
  align-items:end;
}
.section-num{
  font-size: var(--fs-7xl);
  line-height: .8;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tightest);
  color: var(--color-ink);
}
.section--invert .section-num{ color: var(--color-paper); }
.section-title{
  font-size: var(--fs-3xl);
  line-height: .95;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.section-kicker{
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-signal);
  margin: 0 0 var(--space-3);
}
.section-dek{
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  max-width: 60ch;
  color: var(--color-ash-600);
  margin: 0;
}
.section--invert .section-dek{ color: var(--color-ash-300); }

/* ---------- TICKER ---------- */
.ticker{
  display:flex; gap: var(--space-6);
  border-block: var(--bw-line) solid var(--color-ink);
  background: var(--color-paper);
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-3) 0;
}
.ticker__track{
  display:flex; gap: var(--space-6);
  animation: ticker 40s linear infinite;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--fs-sm);
}
.ticker__track span{ display:inline-flex; align-items:center; gap: var(--space-6); }
.ticker__track span::after{
  content:"●";
  color: var(--color-signal);
  font-size: 10px;
}
@keyframes ticker{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- COVER ---------- */
.cover{
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-7) var(--space-6) var(--space-8);
  position: relative;
  overflow: hidden;
}
.cover__top{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: var(--bw-hair) solid rgba(247,247,247,.2);
}
.cover__top > div{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.cover__top em{ color: var(--color-ash-400); font-style: normal; display:block; margin-bottom: var(--space-1); }

.cover__big{
  font-size: clamp(80px, 17vw, 280px);
  line-height: .82;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tightest);
  margin: var(--space-7) 0 var(--space-6);
}
.cover__big em{ font-style: normal; color: var(--color-signal); }
.cover__meta{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-6);
  border-top: var(--bw-hair) solid rgba(247,247,247,.2);
  padding-top: var(--space-6);
}
.cover__meta dt{ font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-ash-400); margin-bottom: 6px; }
.cover__meta dd{ margin:0; font-size: var(--fs-md); font-weight: var(--weight-medium); }

/* ---------- COLOR ---------- */
.swatch-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border: var(--bw-line) solid var(--color-ink);
}
.swatch{
  grid-column: span 4;
  aspect-ratio: 4/3;
  padding: var(--space-4);
  display:flex; flex-direction:column; justify-content:space-between;
  border-right: var(--bw-hair) solid var(--color-ink);
  border-bottom: var(--bw-hair) solid var(--color-ink);
  color: var(--color-ink);
  position:relative;
}
.swatch:nth-child(3n){ border-right: 0; }
.swatch--dark{ color: var(--color-paper); }
.swatch-name{ font-size: var(--fs-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.swatch-meta{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: var(--weight-medium); }
.swatch-meta div{ display:flex; justify-content:space-between; }
.swatch-token{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; opacity:.7; }

.ramp{
  display:grid; grid-template-columns: repeat(11,1fr); gap:0;
  border: var(--bw-line) solid var(--color-ink);
}
.ramp__cell{
  padding: var(--space-4) var(--space-3);
  height: 120px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right: var(--bw-hair) solid rgba(22,21,21,.15);
  font-size: var(--fs-3xs);
  font-family: var(--font-mono);
}
.ramp__cell:last-child{ border-right:0; }
.ramp__cell strong{ font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--fs-sm); }
.ramp__cell--dark{ color: var(--color-paper); }

/* ---------- TYPE SPECIMEN ---------- */
.specimen{
  display:grid;
  grid-template-columns: 120px 1fr 200px;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--bw-hair) solid var(--color-ash-200);
  align-items: baseline;
}
.specimen:last-child{ border-bottom: 0; }
.specimen__label{
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-semibold);
  color: var(--color-ash-500);
}
.specimen__meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ash-500);
  text-align: right;
  line-height: 1.6;
}
.specimen__sample{ overflow: hidden; }
.specimen__sample em{ font-style:normal; color: var(--color-signal); }

.weights{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  border: var(--bw-line) solid var(--color-ink);
}
.weights > div{
  padding: var(--space-5) var(--space-4);
  border-right: var(--bw-hair) solid var(--color-ink);
}
.weights > div:last-child{ border-right:0; }
.weights__char{ font-size: 96px; line-height: 1; margin-bottom: var(--space-4); }
.weights__name{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--weight-semibold); }
.weights__num{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ash-500); }

/* ---------- SPACING ---------- */
.space-table{
  display:grid; grid-template-columns: 80px 80px 120px 1fr; gap:0;
  border: var(--bw-line) solid var(--color-ink);
}
.space-row{ display: contents; }
.space-row > *{
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--bw-hair) solid var(--color-ash-200);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  display:flex; align-items:center;
}
.space-row:last-child > *{ border-bottom: 0; }
.space-row__h{ background: var(--color-ash-025); font-weight: var(--weight-bold); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--fs-2xs); }
.space-bar{ display:block; background: var(--color-signal); height: 18px; }

/* ---------- RADIUS / SHADOW SHOW ---------- */
.shape-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-5);
}
.shape-card{
  background: var(--color-paper);
  border: var(--bw-line) solid var(--color-ink);
  aspect-ratio: 1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: var(--space-3);
}
.shape-card__sq{
  flex:1;
  background: var(--color-ink);
  margin-bottom: var(--space-3);
}
.shape-card__meta{ font-family: var(--font-mono); font-size: 11px; display:flex; justify-content:space-between; }
.shape-card__meta strong{ font-family: var(--font-sans); }

.shadow-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.shadow-card{
  background: var(--color-paper);
  border-radius: var(--radius-3);
  aspect-ratio: 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: 11px;
}
.shadow-card strong{ font-family: var(--font-sans); font-size: var(--fs-sm); display:block; margin-bottom: 4px; }

/* ---------- COMPONENTS ---------- */
.comp{
  background: var(--color-paper);
  border: var(--bw-line) solid var(--color-ink);
  padding: var(--space-6);
  display:flex; flex-direction:column; gap: var(--space-5);
}
.comp__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom: var(--space-3);
  border-bottom: var(--bw-hair) solid var(--color-ash-200);
}
.comp__head h3{ margin:0; font-size: var(--fs-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.comp__head span{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ash-500); }
.comp__row{ display:flex; flex-wrap: wrap; gap: var(--space-3); align-items:center; }

/* Button system */
.btn{
  display:inline-flex; align-items:center; gap: var(--space-2);
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  border: var(--bw-line) solid var(--color-ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  text-transform: uppercase;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-brutal); }
.btn--primary{ background: var(--color-signal); color: var(--color-paper); border-color: var(--color-signal); }
.btn--primary:hover{ box-shadow: var(--shadow-brutal); }
.btn--ink{ background: var(--color-ink); color: var(--color-paper); }
.btn--ghost{ background: transparent; color: var(--color-ink); }
.btn--paper{ background: var(--color-paper); color: var(--color-ink); }
.btn--sm{ padding: 8px 14px; font-size: var(--fs-2xs); }
.btn--lg{ padding: 18px 32px; font-size: var(--fs-md); }
.btn--icon{ width:48px; padding:0; justify-content:center; }

/* Input */
.input{
  display:flex; flex-direction:column; gap: 6px;
}
.input label{ font-size: var(--fs-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.input input, .input select, .input textarea{
  font-family: inherit; font-size: var(--fs-base);
  padding: 14px 16px;
  border-radius: var(--radius-2);
  border: var(--bw-line) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.input input:focus, .input select:focus, .input textarea:focus{ box-shadow: 0 0 0 4px var(--color-signal-100); border-color: var(--color-signal); }

/* Tag / Badge */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: var(--bw-hair) solid var(--color-ink);
  background: var(--color-paper);
  font-size: var(--fs-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
}
.tag--filled{ background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.tag--signal{ background: var(--color-signal); color: var(--color-paper); border-color: var(--color-signal); }
.tag--ghost{ border-color: var(--color-ash-300); color: var(--color-ash-600); }
.tag--dot::before{ content:""; width:8px; height:8px; border-radius:50%; background: currentColor; }

/* Card */
.card{
  background: var(--color-paper);
  border: var(--bw-line) solid var(--color-ink);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  display:flex; flex-direction:column; gap: var(--space-3);
}
.card--brutal{ box-shadow: var(--shadow-brutal); }
.card--invert{ background: var(--color-ink); color: var(--color-paper); }

/* ---------- LOGO LOCKUPS ---------- */
.logo-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
}
.logo-cell{
  border: var(--bw-line) solid var(--color-ink);
  padding: var(--space-7);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16/10;
  position: relative;
}
.logo-cell--ink{ background: var(--color-ink); }
.logo-cell--cream{ background: var(--color-cream); }
.logo-cell--signal{ background: var(--color-signal); }
.logo-cell svg, .logo-cell img{ max-width: 50%; max-height: 70%; }
.logo-cell__tag{
  position:absolute; top: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-ash-500);
}
.logo-cell--ink .logo-cell__tag,
.logo-cell--signal .logo-cell__tag{ color: rgba(247,247,247,.6); }

/* Clearspace */
.clearspace{
  background: var(--color-cream);
  border: var(--bw-line) solid var(--color-ink);
  padding: var(--space-8);
  position:relative;
  aspect-ratio: 16/9;
  display:flex; align-items:center; justify-content:center;
}
.clearspace__inner{
  position:relative;
  width: 280px;
  outline: 2px dashed var(--color-signal);
  outline-offset: 56px;
}
.clearspace__inner::before, .clearspace__inner::after{
  content:""; position:absolute;
  background: var(--color-signal);
}
.clearspace__inner::before{ top: -56px; left: -56px; width: 56px; height: 56px; }
.clearspace__inner::after{ bottom: -56px; right: -56px; width: 56px; height: 56px; }
.clearspace__label{
  position:absolute; bottom: var(--space-4); right: var(--space-4);
  font-family: var(--font-mono); font-size: 11px;
}

/* Don't list */
.dont-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.dont{
  border: var(--bw-line) solid var(--color-ink);
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.dont::after{
  content:""; position:absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent calc(50% - 1.5px), var(--color-signal) calc(50% - 1.5px), var(--color-signal) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.dont svg, .dont img{ max-width: 60%; max-height: 60%; position:relative; z-index:1; }
.dont__label{
  position:absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  font-size: var(--fs-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  background: var(--color-ink); color: var(--color-paper);
  padding: 8px 10px;
}

/* ---------- ICONS ---------- */
.icon-grid{
  display:grid; grid-template-columns: repeat(8, 1fr); gap: 0;
  border: var(--bw-line) solid var(--color-ink);
}
.icon-cell{
  aspect-ratio: 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right: var(--bw-hair) solid var(--color-ash-200);
  border-bottom: var(--bw-hair) solid var(--color-ash-200);
  padding: var(--space-3);
  gap: var(--space-2);
}
.icon-cell svg{ width: 32px; height: 32px; stroke: var(--color-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-cell span{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ash-500); }

/* ---------- APPLICATIONS ---------- */
.app-grid{
  display:grid; gap: var(--space-7);
}
.app-frame{
  position: relative;
  border: var(--bw-line) solid var(--color-ink);
  background: var(--color-paper);
  overflow: hidden;
}
.app-frame__tab{
  position:absolute; top:0; left:0;
  background: var(--color-ink); color: var(--color-paper);
  padding: 6px 14px;
  font-size: var(--fs-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  z-index: 5;
}

/* Website hero mock */
.web-hero{
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-6) var(--space-7) var(--space-8);
  position:relative;
}
.web-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: var(--space-5);
  border-bottom: var(--bw-hair) solid var(--color-ink);
}
.web-nav__brand{ display:flex; align-items:center; gap: var(--space-3); font-weight: var(--weight-bold); font-size: var(--fs-md); letter-spacing: var(--tracking-tight); }
.web-nav__brand img{ width: 36px; height: 36px; }
.web-nav__links{ display:flex; gap: var(--space-5); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.web-nav__cta{ display:flex; gap: var(--space-2); }

.web-hero__h{
  font-size: clamp(56px, 9vw, 180px);
  line-height: .85;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tightest);
  margin: var(--space-8) 0 var(--space-5);
}
.web-hero__h em{ font-style: normal; color: var(--color-signal); }
.web-hero__h s{ text-decoration: line-through; text-decoration-thickness: 6px; color: var(--color-ash-300); }
.web-hero__row{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--bw-hair) solid var(--color-ink);
}
.web-hero__row p{ font-size: var(--fs-base); margin:0; max-width: 36ch; }
.web-hero__cta{ display:flex; gap: var(--space-3); align-items:center; }

/* Invoice */
.invoice{
  background: var(--color-cream);
  padding: var(--space-8) var(--space-8) var(--space-7);
  color: var(--color-ink);
  display:flex; flex-direction:column; gap: var(--space-6);
  aspect-ratio: 8.5/11;
  max-width: 720px;
  margin: 0 auto;
}
.invoice__head{ display:flex; justify-content:space-between; align-items:flex-start; }
.invoice__brand img{ width:64px; height: 64px; }
.invoice__title{
  font-size: var(--fs-4xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tightest); line-height: .9;
  margin: 0;
}
.invoice__no{ text-align:right; font-family: var(--font-mono); font-size: var(--fs-xs); }
.invoice__no strong{ font-family: var(--font-sans); display:block; font-size: var(--fs-md); margin-top: 4px; }
.invoice__meta{
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-block: var(--bw-line) solid var(--color-ink);
}
.invoice__meta dt{ font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-ash-600); margin-bottom: 4px; }
.invoice__meta dd{ margin:0; font-size: var(--fs-sm); font-weight: var(--weight-semibold); }
.invoice__table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.invoice__table th{ text-align:left; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); padding: 0 0 var(--space-2); border-bottom: var(--bw-hair) solid var(--color-ink); font-weight: var(--weight-semibold); }
.invoice__table th:last-child, .invoice__table td:last-child{ text-align: right; }
.invoice__table td{ padding: var(--space-3) 0; border-bottom: var(--bw-hair) solid var(--color-ash-300); font-feature-settings: "tnum" 1; }
.invoice__total{ display:flex; justify-content:flex-end; align-items: baseline; gap: var(--space-5); padding-top: var(--space-3); }
.invoice__total b{ font-size: var(--fs-3xl); letter-spacing: var(--tracking-tight); }
.invoice__foot{ margin-top:auto; display:flex; justify-content:space-between; padding-top: var(--space-5); border-top: var(--bw-line) solid var(--color-ink); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: var(--weight-semibold); }

/* Email */
.email{
  display:grid; grid-template-columns: 1fr 2fr; gap:0;
  background: var(--color-paper);
  border: var(--bw-line) solid var(--color-ink);
}
.email__sidebar{ background: var(--color-ash-025); border-right: var(--bw-hair) solid var(--color-ink); padding: var(--space-5); }
.email__msg{ padding: var(--space-6); }
.email__sub{ font-size: var(--fs-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); line-height: 1; }
.email__from{ display:flex; align-items:center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--bw-hair) solid var(--color-ash-200); margin-bottom: var(--space-4); }
.email__avatar{ width: 44px; height: 44px; border-radius: var(--radius-4); background: var(--color-signal); display:flex; align-items:center; justify-content:center; color: var(--color-paper); font-weight: var(--weight-bold); }

/* Business card */
.bcard-pair{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.bcard{
  aspect-ratio: 1.75/1;
  border-radius: var(--radius-3);
  padding: var(--space-5);
  display:flex; flex-direction:column; justify-content:space-between;
  position: relative;
  box-shadow: var(--shadow-pop);
}
.bcard--front{ background: var(--color-ink); color: var(--color-paper); }
.bcard--back{ background: var(--color-signal); color: var(--color-paper); }
.bcard__brand{ font-weight: var(--weight-bold); font-size: var(--fs-lg); letter-spacing: var(--tracking-tightest); display:flex; align-items:center; gap: var(--space-2);}
.bcard__brand img{ width: 28px; height: 28px; }
.bcard__name{ font-weight: var(--weight-bold); font-size: var(--fs-lg); margin: 0; }
.bcard__role{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); opacity: .7; margin-top: 4px; }
.bcard__meta{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: var(--weight-medium); display:grid; gap: 2px; }
.bcard__mono{ font-size: clamp(60px, 12vw, 140px); line-height: .8; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tightest); margin: auto 0; }

/* Social */
.social-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.social{
  aspect-ratio: 1;
  padding: var(--space-5);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.social--ink{ background: var(--color-ink); color: var(--color-paper); }
.social--paper{ background: var(--color-paper); color: var(--color-ink); border: var(--bw-line) solid var(--color-ink); }
.social--signal{ background: var(--color-signal); color: var(--color-paper); }
.social__brand{ display:flex; align-items:center; gap: var(--space-2); font-weight: var(--weight-bold); }
.social__brand img{ width: 24px; height: 24px; }
.social__h{ font-size: clamp(28px, 4vw, 52px); line-height: .9; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tightest); margin:0; }
.social__h em{ font-style: normal; color: var(--color-signal); }
.social--signal .social__h em{ color: var(--color-ink); }
.social__foot{ font-size: var(--fs-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); display:flex; justify-content:space-between; align-items: end; }

/* Letterhead */
.letterhead{
  background: var(--color-paper);
  padding: var(--space-8);
  aspect-ratio: 8.5/11;
  max-width: 640px;
  margin: 0 auto;
  display:flex; flex-direction:column;
  position: relative;
}
.letterhead__head{ display:flex; justify-content:space-between; padding-bottom: var(--space-6); border-bottom: var(--bw-rule) solid var(--color-ink); }
.letterhead__h{ font-size: var(--fs-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tightest); line-height:1; margin: 0; }
.letterhead__h span{ color: var(--color-signal); }
.letterhead__body{ padding: var(--space-6) 0; font-size: var(--fs-sm); line-height: var(--lh-loose); flex: 1; }
.letterhead__body p{ margin: 0 0 var(--space-3); }
.letterhead__foot{ padding-top: var(--space-5); border-top: var(--bw-hair) solid var(--color-ink); font-family: var(--font-mono); font-size: 11px; display:flex; justify-content:space-between; }

/* Sticker / signage  */
.sticker-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); align-items:center; }
.sticker{
  aspect-ratio: 1;
  border-radius: var(--radius-4);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  padding: var(--space-5);
  text-align:center;
  box-shadow: var(--shadow-card);
}
.sticker--ink{ background: var(--color-ink); color: var(--color-paper); }
.sticker--signal{ background: var(--color-signal); color: var(--color-paper); }
.sticker--paper{ background: var(--color-paper); color: var(--color-ink); border: var(--bw-rule) solid var(--color-ink); }
.sticker__txt{ font-weight: var(--weight-bold); font-size: var(--fs-2xl); letter-spacing: var(--tracking-tightest); line-height:.9; }

/* ---------- TOKEN TABLE ---------- */
.token-table{ width:100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-xs); }
.token-table th, .token-table td{
  padding: 10px 14px;
  border-bottom: var(--bw-hair) solid var(--color-ash-200);
  text-align: left;
  vertical-align: middle;
}
.token-table th{ font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--fs-2xs); background: var(--color-ash-025); }
.token-swatch{ width: 24px; height: 24px; border: var(--bw-hair) solid var(--color-ink); display:inline-block; vertical-align: middle; margin-right: 8px; }

/* ---------- FOOTER ---------- */
.foot{
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.foot__big{
  font-size: clamp(80px, 18vw, 280px);
  line-height: .8;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tightest);
  margin: 0 0 var(--space-6);
}
.foot__big em{ font-style: normal; color: var(--color-signal); }
.foot__meta{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-top: var(--space-5); border-top: var(--bw-hair) solid rgba(247,247,247,.2); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.foot__meta strong{ display:block; color: var(--color-ash-400); margin-bottom: 4px; font-weight: var(--weight-medium); }

/* ---------- TOC ---------- */
.toc{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--bw-line) solid var(--color-ink); }
.toc a{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: var(--space-4) var(--space-5);
  border-right: var(--bw-hair) solid var(--color-ink);
  border-bottom: var(--bw-hair) solid var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-md);
  transition: background var(--dur-fast);
}
.toc a:hover{ background: var(--color-signal); color: var(--color-paper); }
.toc a span{ font-family: var(--font-mono); font-size: 11px; opacity: .6; font-weight: var(--weight-regular); letter-spacing: 0;}
.toc a:nth-child(3n){ border-right: 0; }

/* ---------- MISC ---------- */
.callout{
  display:grid; grid-template-columns: 24px 1fr; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-signal-050);
  border-left: var(--bw-rule) solid var(--color-signal);
  font-size: var(--fs-sm);
}
.callout strong{ display:block; text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--fs-2xs); color: var(--color-signal-700); margin-bottom: 4px; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.kicker-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: var(--space-4);
}
.kicker-row h3{
  margin:0; font-size: var(--fs-lg); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.kicker-row span{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ash-500); }