/* ===== HOURMASON "Quarry" — slate ground, fired clay, patina ==========
   Register borrowed from Superhuman (dark editorial hero, light panels
   below) but the colour is our own: the ground is blue-slate rather than
   warm brown (171 degrees off), and the highlight is patina rather than
   gold (128 degrees off). Clay accent sits at hue 9, redder than either
   reference. Name logic: a mason works stone; tools go to patina. */

:root {
  --paper: #FEFDFB;  --paper-2: #F8F5F2;  --card: #F1EEE9;
  --ink: #181E25;    --ink-2: #49535F;    --ink-3: #5D6874;
  --rule: #EAE6E1;   --rule-strong: #CFC6BF;
  --accent: #AE3D29; --accent-wash: #F4DBD7;
  --on-accent-wash: #6A251B; --on-accent: #FFFFFF;

  --ground: #141B24; --ground-2: #222D3A; --ground-3: #364754;
  --on-ground: #FAF8F4; --on-ground-2: #BDC7D1;
  --patina: #51B8A0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --paper: #101519; --paper-2: #161C22; --card: #1D242C;
    --ink: #F3F1EC;   --ink-2: #AEB7C1;   --ink-3: #8C96A1;
    --rule: #242C35;  --rule-strong: #38424D;
    --accent: #E37D63; --accent-wash: #2A1713;
    --on-accent-wash: #F6C9BC; --on-accent: #101519;
    --ground: #0B0F14; --ground-2: #141B24; --ground-3: #222D3A;
  }
}

/* Slate hero with patina light raking from the upper right. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(152deg, var(--ground) 0%, var(--ground-2) 56%, var(--ground-3) 100%);
  color: var(--on-ground);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 68% at 88% 4%, rgba(81,184,160,.30) 0%, transparent 62%),
    radial-gradient(42% 56% at 12% 92%, rgba(174,61,41,.22) 0%, transparent 64%);
}
/* Dark gradients band across a wide area because there are too few
   distinct values. A faint noise layer dithers the steps away. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero h1 { color: var(--on-ground); }
.hero .lede, .hero .sub { color: var(--on-ground-2); }
.hero .btn:not(.ghost) { background: var(--patina); color: var(--ground); border-color: var(--patina); }
.hero .btn.ghost { background: transparent; color: var(--on-ground); border-color: rgba(250,248,244,.42); }
.hero a:not(.btn) { color: var(--patina); }
.hero .hero-fig figcaption { color: var(--on-ground-2); }

/* The diagram lives inside a light carousel card, not directly on
   the hero, so it keeps the page ink tokens. Do not recolour it here. */

/* Light panels below the fold. */
.rows > div, .note {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 12px; padding: 18px 20px;
}
.rows { display: grid; gap: 12px; }
.steps > li::before { color: var(--accent); }