/* The Ordinary Wire — house style
   revision 41.2

   Design language: washed-out monochrome ink-sketch on paper. The only
   category signal is the accent hue (WebExploitation); everything else is
   near-black ink on warm off-white paper.

   This file carries layout and type ONLY. Every hand-drawn stroke comes from
   the drawably vendor sheet via assets/chrome.js. Do not add borders or
   box-shadows to sketch elements — draw them. */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe9db;
  --ink: #26211b;
  --ink-soft: #6e675f;
  --accent: #3a4a8f;   /* WebExploitation category accent */
  --accent-wash: #dfe4f2;
  --danger: #b3442f;
  --shadow: 3px 3px 0 rgba(38, 33, 27, 0.14);
  --drawably-stroke: var(--accent);
  --drawably-fill: var(--accent);
  --drawably-ink: var(--ink-soft);
  --drawably-paper: var(--paper);
  --drawably-width: 2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, var(--accent-wash) 0, transparent 30%),
    var(--paper);
}

.shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ── masthead ────────────────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.brand {
  margin: 0;
  font: 600 16px/1.1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.tagline {
  margin: .45rem 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* the revision badge is drawn by drawablyBadge; only spacing is ours */
.badge { align-self: flex-start; }

/* ── the story card ──────────────────────────────────────────────────────── */

/* drawablyCard prepends the pencil outline and adds position:relative.
   No border here — the sketch IS the border. */
.card {
  background: var(--paper);
  padding: 26px 28px 22px;
  box-shadow: var(--shadow);
  /* the outline sits 3px inside the box, per INSET in controls.js */
  --drawably-stroke: var(--ink-soft);
}

.stamp {
  margin: 0 0 10px;
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story h1 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.standfirst {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}

.body p {
  margin: 0 0 13px;
  line-height: 1.7;
  color: var(--ink);
}

/* the wash is a marker swipe; it must not sit on top of the words */
#hold { padding: 1px 3px; }
#hold { --drawably-ink: var(--accent-wash); }

/* the pencil rule between the story and the contact block */
.rule {
  margin: 22px 0 18px;
  min-height: 10px;
}

/* ── contact ─────────────────────────────────────────────────────────────── */

.section h2 {
  margin: 0 0 10px;
  font: 600 11px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.section p { margin: 0; line-height: 1.7; }

/* the mail address gets a hand-drawn underline, not a CSS one */
#wirelink {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--ink);
}

/* ── footer ──────────────────────────────────────────────────────────────── */

footer {
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

@media print {
  .card { box-shadow: none; }
}