/* ============================================================
   ZININ — BRUTALIST BRAND BOOK · stylesheet
   Tokens: red / black / white / grey only.
   No orange. No cream. No Claude-tan.
============================================================ */
:root {
  --red:        #E10A17;
  --red-deep:   #B0040E;
  --ink:        #0A0A0A;
  --ink-2:      #1A1A1A;
  --ink-soft:   #3A3A3A;
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F2;
  --grey-90:    #1A1A1A;
  --grey-60:    #5C5C5C;
  --grey-40:    #8A8A8A;
  --grey-20:    #D6D6D4;
  --grey-10:    #ECECEA;

  --bg:         var(--paper);
  --on-bg:      var(--ink);
  --primary:    var(--red);
  --on-primary: var(--paper);
  --rule:       var(--ink);

  --font-display:   "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-body:      "Space Grotesk", system-ui, sans-serif;
  --font-mono:      "Space Mono", ui-monospace, monospace;
  --font-editorial: "Archivo", "Archivo Black", system-ui, sans-serif;

  --maxw: 1360px;
  --gutter: 36px;
  --rule-w: 2px;
}

[data-palette="inkblood"] { --bg: var(--paper); --on-bg: var(--ink); --primary: var(--red); --on-primary: var(--paper); --rule: var(--ink); }
[data-palette="alarm"]    { --bg: var(--red);   --on-bg: var(--paper); --primary: var(--ink); --on-primary: var(--paper); --rule: var(--paper); }
[data-palette="concrete"] { --bg: var(--grey-10); --on-bg: var(--ink); --primary: var(--red); --on-primary: var(--paper); --rule: var(--ink); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { border-radius: 0 !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 200ms ease, color 200ms ease;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
hr { border: 0; }
em, i { font-style: normal; font-weight: inherit; } /* brutalist rule: no italic, ever */

/* ============================================================ LAYOUT */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

.page { position: relative; padding: 110px 0 130px; border-bottom: var(--rule-w) solid var(--rule); }
.page.ink   { background: var(--ink); color: var(--paper); --rule: var(--paper); }
.page.red   { background: var(--red); color: var(--paper); --rule: var(--paper); }
.page.paper { background: var(--paper); color: var(--ink); --rule: var(--ink); }

.page-tag { position: absolute; top: 22px; left: var(--gutter); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.page-tag::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--red); margin-right: 8px; vertical-align: middle; }
.page.red .page-tag::before { background: var(--ink); }
.page-num { position: absolute; top: 22px; right: var(--gutter); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 32px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: var(--rule-w) solid currentColor;
  margin-bottom: 64px;
}
.section-head .ix { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.section-head .ix .big { display: block; font-family: var(--font-display); font-size: 64px; line-height: 0.85; color: var(--red); margin-bottom: 8px; }
.page.red .section-head .ix .big { color: var(--ink); }
.section-head h2 { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); line-height: 0.85; letter-spacing: -0.03em; margin: 0; text-transform: uppercase; }
.section-head .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; line-height: 1.55; }

.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; }
.eyebrow::before { content: "/ "; color: var(--red); }
.page.red .eyebrow::before { color: var(--ink); }

.h2 { font-family: var(--font-display); font-size: 56px; line-height: 0.88; letter-spacing: -0.025em; margin: 0 0 24px; text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: -0.01em; margin: 0 0 12px; text-transform: uppercase; }
.h4 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }

.body { font-size: 16px; line-height: 1.55; max-width: 62ch; margin: 0 0 16px; }
.body strong { font-weight: 700; }

.mono { font-family: var(--font-mono); }
.editorial { font-family: var(--font-editorial); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.dis { font-family: var(--font-display); text-transform: uppercase; }

.sticker { display: inline-block; background: var(--red); color: var(--paper); padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.sticker.tilt { transform: rotate(-2deg); }

.box { border: var(--rule-w) solid var(--rule); padding: 28px; background: var(--paper); color: var(--ink); position: relative; }
.box.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.box.red { background: var(--red); color: var(--paper); border-color: var(--red); }

.aside { border-left: 4px solid var(--red); padding: 8px 0 8px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; line-height: 1.6; }

/* ============================================================ LOGO RENDER */
.zlogo { color: currentColor; }
.zlogo .ink { fill: currentColor; }
.zlogo .acc { fill: var(--red); }

.logo-slot { display: block; line-height: 0; }
.logo-slot .v-block, .logo-slot .v-stencil, .logo-slot .v-editorial { display: none; }
[data-concept="block"]     .logo-slot .v-block     { display: block; }
[data-concept="stencil"]   .logo-slot .v-stencil   { display: block; }
[data-concept="editorial"] .logo-slot .v-editorial { display: block; }

/* On red surface, the red accent disappears → use white */
.page.red .zlogo .acc, .box.red .zlogo .acc,
.lab-cell.red .zlogo .acc, .concept-stage.red .zlogo .acc,
[data-palette="alarm"] .zlogo .acc { fill: currentColor; }