/* Stijn AI - dark editorial.
   Near-black ground, a serif display face, wide whitespace, one restrained
   warm accent. Borders are hairlines; nothing glows. */

:root {
  --bg:        #0b0b0d;
  --bg-2:      #101013;
  --card-bg:   #101013;
  --foot-bg:   #08080a;
  --band-bg:   #0e0e11;
  --th-bg:     #0e0e11;
  --code-bg:   #08080a;
  --input-bg:  #08080a;
  --row-hover: #16161a;
  --side-on-bg:#16161a;
  --badge-bg:  #16161a;

  --text:    #eceae6;
  --text-2:  #a6a29b;
  --text-3:  #6f6b65;
  --heading: #f6f4f1;
  --code-text: #c9c5bd;

  --line:   #1e1e22;
  --line-2: #2b2b31;

  --accent:       #c9a227;
  --accent-hover: #ddb63a;
  --accent-line:  #3d3218;
  --accent-bg:    #16130a;
  --on-accent:    #0b0b0d;

  --link:       #e0c665;
  --link-hover: #f0dc92;

  --ok: #6fbf8b;        --ok-line: #1e3a2a;     --ok-bg: #0d1712;
  --warn: #d8a657;      --warn-line: #3d3018;   --warn-bg: #17130b;
  --danger: #d97070;    --danger-line: #3e2323; --danger-bg: #170f0f;

  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --body-size: 16px;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-leading: 1.14;
  --h1-max: 4.1rem;
  --h2-max: 2.5rem;
  --lede-size: 1.09rem;
  --hero-lede: 1.24rem;
  --hero-h1-width: 15ch;

  --brand-weight: 500;
  --brand-size: 1.14rem;
  --brand-tracking: -0.01em;
  --brand-transform: none;
  --brand-mark: 26px;
  --nav-weight: 400;

  --wrap: 1140px;
  --gap: 22px;
  --section-y: 96px;
  --hero-y: 120px;
  --card-pad: 26px;
  --head-h: 74px;
  --head-bg: rgba(11, 11, 13, .88);
  --head-border: 1px solid #1e1e22;

  --r: 3px;
  --r-sm: 3px;
  --card-border: 1px solid #1e1e22;
  --card-shadow: none;
  --card-shadow-hover: none;
  --featured-shadow: none;

  --btn-bg: transparent;
  --btn-hover-bg: #16161a;
  --btn-hover-border: #3f3f47;
  --btn-pad: 11px 22px;
  --btn-pad-lg: 15px 32px;
  --btn-tracking: 0;
  --btn-transform: none;
}

/* Editorial flourishes that only this brand gets. */
h1 em, h2 em { font-style: italic; color: var(--accent); }

.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(201, 162, 39, .09), transparent 70%),
    radial-gradient(40% 40% at 12% 82%, rgba(201, 162, 39, .05), transparent 70%);
  pointer-events: none;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }

.eyebrow::before { content: "\2014\00a0\00a0"; opacity: .6; }

.card { transition: border-color .2s; }
.price-card.featured::before { letter-spacing: .1em; }

/* A hairline rule under section headings, the way a print piece would set it */
section > .wrap > .eyebrow + h2 { padding-bottom: .4em; border-bottom: 1px solid var(--line); }