/* It's In Writing — Brand Manual
   Layered on top of base.css (the live IIW design system).
   Adds: brand-manual sidebar nav, do/don't cards, swatch grid, type specimens,
   vocabulary columns, microcopy snippets, copy-to-clipboard chrome. */

/* ─────────────────────────────────────────────
   PAGE SHELL
   Fixed sidebar nav on desktop. Hamburger drawer on mobile.
   ───────────────────────────────────────────── */
.bm {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background: var(--cream);
}
.bm-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--cream-deep);
  border-right: 1px solid var(--border);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.bm-nav .brand-block {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.bm-nav .brand-block .mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bm-nav .brand-block .mark svg { width: 100%; height: 100%; }
.bm-nav .brand-block .label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.bm-nav .brand-block .label small {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}

.bm-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: bm;
}
.bm-nav ol li { counter-increment: bm; }
.bm-nav ol a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bm-nav ol a::before {
  content: counter(bm, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.bm-nav ol a:hover { background: var(--cream); color: var(--ink); }
.bm-nav ol a.active { background: var(--ink); color: var(--cream); }
.bm-nav ol a.active::before { color: var(--cream); opacity: 0.65; }

.bm-nav .nav-foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.bm-nav .nav-foot a { color: var(--ink-faint); border-bottom: 1px solid var(--border); }
.bm-nav .nav-foot a:hover { color: var(--accent); border-color: var(--accent); }

/* Mobile drawer */
.bm-burger {
  display: none;
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1000;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  border: none;
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.bm-burger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (max-width: 900px) {
  .bm { grid-template-columns: 1fr; }
  .bm-nav {
    position: fixed;
    inset: 0 30% 0 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--dur-med) var(--ease);
    box-shadow: var(--shadow-lifted);
  }
  .bm.open .bm-nav { transform: translateX(0); }
  .bm-burger { display: inline-flex; }
}

/* ─────────────────────────────────────────────
   MAIN CONTENT WRAPPER
   ───────────────────────────────────────────── */
.bm-main { min-width: 0; }
.bm-section {
  padding: var(--sp-10) var(--sp-8);
  border-bottom: 1px solid var(--border);
  max-width: 980px;
}
@media (max-width: 900px) {
  .bm-section { padding: var(--sp-8) var(--sp-5); }
}
.bm-section:last-child { border-bottom: 0; }

.bm-section .eyebrow { margin-bottom: var(--sp-5); }
.bm-section h2.bm-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: var(--sp-5);
  color: var(--ink);
}
.bm-section h2.bm-h em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}
.bm-section .lede { margin-bottom: var(--sp-7); max-width: 640px; }

.bm-section h3.sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: var(--sp-7) 0 var(--sp-4);
  color: var(--ink);
}
.bm-section h4.sub-sm {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--sp-6) 0 var(--sp-3);
}

.bm-section p { max-width: 640px; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.bm-hero {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-11);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(61,90,64,0.06), transparent 60%),
    var(--cream);
}
.bm-hero .display-xl em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}
.bm-hero .meta-row {
  margin-top: var(--sp-7);
  display: flex;
  gap: var(--sp-7);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.bm-hero .meta-row strong { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────
   DO / DON'T CARDS
   ───────────────────────────────────────────── */
.dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-7);
}
@media (max-width: 720px) { .dodont { grid-template-columns: 1fr; } }
.dodont .card-x {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-soft);
}
.dodont .card-x.do { border-left: 3px solid var(--accent); }
.dodont .card-x.dont { border-left: 3px solid #B85048; }
.dodont .card-x .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.dodont .card-x.dont .tag { color: #B85048; }
.dodont .card-x p {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

/* ─────────────────────────────────────────────
   PRINCIPLES LIST (numbered, large)
   ───────────────────────────────────────────── */
.principles {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  counter-reset: pr;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.principles li {
  counter-increment: pr;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--cream-shade);
}
.principles li:last-child { border-bottom: 0; }
.principles li::before {
  content: counter(pr, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.principles h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}
.principles p { color: var(--ink-dim); margin: 0; }

/* ─────────────────────────────────────────────
   VOCABULARY (3-column always/sometimes/never)
   ───────────────────────────────────────────── */
.vocab {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (max-width: 900px) { .vocab { grid-template-columns: 1fr; } }
.vocab .col {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.vocab .col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.vocab .col.always h5 { color: var(--accent); }
.vocab .col.sometimes h5 { color: #8A6A2C; }
.vocab .col.never h5 { color: #B85048; }
.vocab ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.vocab li {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.vocab li::before { content: '·'; color: var(--ink-faint); }
.vocab .col.never li { text-decoration: line-through; text-decoration-color: rgba(184,80,72,0.4); color: var(--ink-dim); }
.vocab .note {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: var(--sp-4);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   COLOUR SWATCHES
   ───────────────────────────────────────────── */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-7);
}
.sw {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--cream);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sw:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sw .chip { height: 110px; }
.sw .info { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.sw .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.sw .hex { font-size: 11px; color: var(--ink-faint); font-family: 'JetBrains Mono', ui-monospace, monospace; margin-top: 2px; letter-spacing: 0.02em; }

/* ─────────────────────────────────────────────
   TYPE SPECIMENS
   ───────────────────────────────────────────── */
.specimen {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-7);
  margin-top: var(--sp-4);
}
.specimen .name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}
.specimen .big {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.specimen.body .big {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: -0.015em;
}
.specimen .meta {
  margin-top: var(--sp-4);
  font-size: 12px;
  color: var(--ink-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
   MICROCOPY SNIPPETS
   ───────────────────────────────────────────── */
.snip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (max-width: 720px) { .snip-grid { grid-template-columns: 1fr; } }
.snip {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.snip .where {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.snip .copy {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
}
.snip .copy em {
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100;
  color: var(--accent);
}

/* ─────────────────────────────────────────────
   EMAIL PATTERN BLOCK
   ───────────────────────────────────────────── */
.pattern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (max-width: 800px) { .pattern { grid-template-columns: 1fr; } }
.pattern .rule {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
}
.pattern .rule h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 var(--sp-2);
}
.pattern .rule p { font-size: 14px; margin: 0; }

/* ─────────────────────────────────────────────
   DOWNLOADS
   ───────────────────────────────────────────── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.dl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dl:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.dl .ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cream-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dl .ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.dl .lbl { font-size: 13px; font-weight: 600; }
.dl .lbl small { display: block; font-size: 10px; color: var(--ink-faint); font-weight: 500; margin-top: 1px; letter-spacing: 0.04em; }

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.bm-foot {
  padding: var(--sp-7) var(--sp-8);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  align-items: center;
}
.bm-foot a { color: var(--ink-faint); }
.bm-foot a:hover { color: var(--accent); }

/* Toast for copy-to-clipboard */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 2000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }