/*
 * The marketing tools' chrome — one stylesheet for /marketing and the brand
 * generators, so the tools look like one set rather than pages that happen to
 * share a colour.
 *
 * Lifted verbatim out of brand/posts.html; a second copy of this is how the tools
 * start drifting apart visually. `brand/print.html` still carries its own copy
 * plus a print stylesheet — folding it onto this is a ~60-line deletion, left for
 * its own change rather than bundled with a functional rework of that file.
 */
:root {
  --ink: #fff; --ink-dim: rgba(255,255,255,.62); --ink-faint: rgba(255,255,255,.38);
  --ground: #000; --raise: #0a0a0a; --line: rgba(255,255,255,.16); --signal: #FF6600;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.65; }
.tape { height: 6px; background: repeating-linear-gradient(45deg, var(--signal) 0 14px, var(--ground) 14px 28px); }
.sheet { max-width: 1100px; margin: 0 auto; padding: 0 clamp(18px,4vw,44px) 80px; }
header { padding: clamp(38px,6vw,66px) 0 clamp(20px,3vw,32px); }
.kicker { font-size: 11px; letter-spacing: .22em; color: var(--signal); text-transform: uppercase; }
h1 { font-size: clamp(32px,6vw,54px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 16px 0 18px; }
.lede { max-width: 66ch; color: var(--ink-dim); line-height: 1.8; margin: 0; }
a { color: var(--signal); }
section { border-top: 1px solid var(--line); padding: clamp(26px,4vw,42px) 0; }
h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 6px; }
h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin: 28px 0 12px; }
.sub { color: var(--ink-faint); font-size: 12px; margin: 0 0 22px; max-width: 72ch; line-height: 1.75; }
.controls { border: 1px solid var(--line); background: var(--raise); padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.field input { font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--ground);
  border: 1px solid var(--line); padding: 9px 11px; width: 230px; }
.field input:focus { outline: none; border-color: var(--signal); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-dim); background: var(--ground);
  border: 1px solid var(--line); padding: 8px 13px; cursor: pointer; letter-spacing: .06em; }
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip[aria-pressed="true"] { color: var(--signal); border-color: var(--signal); }
.chip:disabled { opacity: .3; cursor: not-allowed; }
.btn { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  background: var(--signal); color: #000; border: 2px solid var(--signal); padding: 12px 20px; }
.btn:hover { background: transparent; color: var(--signal); }
.btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: var(--ink-faint); border-color: var(--line); }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { border: 1px solid var(--line); background: var(--raise); display: flex; flex-direction: column; }
.card:hover { border-color: var(--signal); }
.shot { padding: 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: center; }
.shot canvas { max-width: 100%; height: auto; display: block; max-height: 420px; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding: 16px; border-bottom: 1px solid var(--line); scroll-snap-type: x mandatory; }
.slide { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.slide canvas { display: block; width: 150px; height: auto; border: 1px solid var(--line); }
.slide .n { font-size: 9px; letter-spacing: .12em; color: var(--ink-faint); }
.slide button { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  background: transparent; color: var(--ink-faint); border: 1px solid var(--line); padding: 4px 7px; width: 100%; }
.slide button:hover { color: var(--signal); border-color: var(--signal); }
.card.wide { grid-column: 1 / -1; }
.meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.name { font-size: 10px; font-weight: 700; color: var(--ink-faint); word-break: break-all; }
.cap { font-size: 11px; color: var(--ink-dim); line-height: 1.6; white-space: pre-wrap;
  max-height: 8.5em; overflow: auto; border-left: 2px solid var(--line); padding-left: 9px; }
.row { display: flex; gap: 7px; }
.dl { flex: 1; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  background: transparent; color: var(--ink-faint); border: 1px solid var(--line); padding: 7px 8px; }
.dl:hover { color: var(--signal); border-color: var(--signal); }
.warn { font-size: 11px; color: var(--signal); line-height: 1.6; margin: 14px 0 0; }
.warn:empty { display: none; }
.note { border: 1px solid var(--line); border-left: 3px solid var(--signal); padding: 14px 16px; font-size: 12px; color: var(--ink-dim); line-height: 1.75; margin: 22px 0 0; }
.note strong { color: var(--ink); }
code { color: var(--ink); background: rgba(255,255,255,.06); padding: 1px 5px; }
.bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 22px 0 0; }
footer { border-top: 1px solid var(--line); padding: 24px 0 0; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* --- the tools index ---------------------------------------------------- */
.tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0 0; }
.tool { border: 1px solid var(--line); background: var(--raise); padding: 20px; text-decoration: none; display: block; }
.tool:hover { border-color: var(--signal); }
.tool b { display: block; font-size: 15px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.tool span { display: block; font-size: 12px; color: var(--ink-dim); line-height: 1.7; }
.tool i { display: block; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }