/* ---------- Fonts ---------- */
@font-face { font-family:"Noto Serif"; src:url("/assets/fonts/noto-serif/noto-serif-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Noto Serif"; src:url("/assets/fonts/noto-serif/noto-serif-latin-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Noto Sans"; src:url("/assets/fonts/noto-sans/noto-sans-latin-400-900.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; }

/* ---------- Tokens (light) ---------- */
:root {
  --paper:#fbeee6;
  --ink:#0c1222;
  --cover:#fffaf6;
  --rule:rgba(12,18,34,0.16);
  --rule-14:rgba(12,18,34,0.14);
  --rule-10:rgba(12,18,34,0.1);
  --tint:rgba(12,18,34,0.02);
  --body:#2b3345;
  --body-mute:#4b5262;
  --mono:#6b5248;
  --muted:#786a61;
  --brick:#bf4329;
  --coral:#e55e42;
  --coral-bright:#ff7a5d;
  --measured:#1f8a5b;
  --coral-tint:rgba(255,122,93,0.09);
  /* contained dark value slab (inverts on dark pages) */
  --slab-bg:#0c1222;
  --slab-ink:#f4ece7;
  --slab-body:rgba(244,236,231,0.82);
  --slab-accent:#ff9e86;
  --grain-opacity:0.14;
  /* cross-page extras (Wave 2 hoist) */
  --edge:rgba(12,18,34,0.3);
  --prose:#1c2436;
  /* slab decorations: cream-in-light / ink-in-dark to match --slab-body; corrects a Wave 2 hoist inversion. --slab-mute/rule/note/edge alphas canonicalised - FLAGGED FOR IRIS */
  --slab-edge:rgba(244,236,231,0.4);
  --slab-note:rgba(244,236,231,0.72);
  --slab-faint:rgba(244,236,231,0.6);
  --slab-mute:rgba(244,236,231,0.7);
  --slab-rule:rgba(244,236,231,0.22);
  --slab-shadow:0 20px 48px rgba(12,18,34,0.14);
  --slab-track:rgba(12,18,34,0.14);
  /* --slab-strike canonicalised to 0.55; visibility-review was 0.5 - FLAGGED FOR IRIS */
  --slab-strike:rgba(244,236,231,0.55);
  /* ---- cross-page extras (Wave 1 hoist) ---- */
  --letter-ink:#1c2436;
  --rule-28:rgba(12,18,34,0.28);
  --grain-blend:multiply;
  --rule-dash:rgba(12,18,34,0.28);
  --slab-body-mute:rgba(244,236,231,0.7);
  --accent-on-ink:#ff7a5d;
  --slab-plus:#ff7a5d;
  --card-shadow:0 20px 48px rgba(12,18,34,0.14);
}
/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0c1222;
    --ink:#fbeee6;
    --cover:#1c2740;
    --rule:rgba(251,238,230,0.16);
    --rule-14:rgba(251,238,230,0.14);
    --rule-10:rgba(251,238,230,0.1);
    --tint:rgba(251,238,230,0.04);
    --body:rgba(251,238,230,0.82);
    --body-mute:rgba(251,238,230,0.7);
    --mono:#b3a49b;
    --muted:#857a73;
    --brick:#ff7a5d;
    --measured:#3fbf88;
    --coral-tint:rgba(255,122,93,0.16);
    /* dark slab on a light page becomes a cream panel on a dark page */
    --slab-bg:#fbeee6;
    --slab-ink:#0c1222;
    --slab-body:rgba(12,18,34,0.82);
    --slab-accent:#bf4329;
    --grain-opacity:0.07;
    /* cross-page extras (Wave 2 hoist) */
    --edge:rgba(251,238,230,0.3);
    --prose:rgba(251,238,230,0.88);
    /* slab decorations: cream-in-light / ink-in-dark to match --slab-body; corrects a Wave 2 hoist inversion. --slab-mute/rule/note/edge alphas canonicalised - FLAGGED FOR IRIS */
    --slab-edge:rgba(12,18,34,0.52);
    --slab-note:rgba(12,18,34,0.72);
    --slab-faint:rgba(12,18,34,0.6);
    --slab-mute:rgba(12,18,34,0.7);
    --slab-rule:rgba(12,18,34,0.22);
    --slab-shadow:0 20px 48px rgba(0,0,0,0.45);
    --slab-track:rgba(251,238,230,0.18);
    /* --slab-strike canonicalised to 0.55; visibility-review was 0.5 - FLAGGED FOR IRIS */
    --slab-strike:rgba(12,18,34,0.55);
    /* ---- cross-page extras (Wave 1 hoist) ---- */
    --letter-ink:rgba(251,238,230,0.88);
    --rule-28:rgba(251,238,230,0.28);
    --grain-blend:screen;
    --rule-dash:rgba(251,238,230,0.28);
    --slab-body-mute:rgba(12,18,34,0.7);
    --accent-on-ink:#bf4329;
    --slab-plus:#bf4329;
    --card-shadow:0 20px 48px rgba(0,0,0,0.45);
  }
}

/* ---------- Base ---------- */
/* html itself is not hoisted: the six insights pages set scroll-behavior:smooth on it,
   the other four in-scope pages do not, and that is a real value difference (see build report) */
* { box-sizing:border-box; }
body { margin:0; font-family:"Noto Sans",system-ui,sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

.artx-skip { position:absolute; left:0.75rem; top:-3rem; z-index:300; background:var(--ink); color:var(--paper); padding:0.6rem 1rem; font-family:ui-monospace,monospace; font-size:0.8rem; text-decoration:none; transition:top 0.15s ease; }
.artx-skip:focus { top:0.75rem; }

.artx-grain { position:fixed; inset:0; z-index:150; pointer-events:none; opacity:var(--grain-opacity); background-image:url("/assets/paper-grain.png"); background-repeat:repeat; background-size:128px 128px; mix-blend-mode:multiply; }
@media (prefers-color-scheme: dark) { .artx-grain { mix-blend-mode:screen; } }

/* ---------- Masthead ---------- */
.artx-masthead { border-bottom:3px double var(--ink); padding-top:1.4rem; }
.artx-mast-top { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; }
.artx-mast-side { flex:1; font-family:ui-monospace,monospace; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--mono); line-height:1.5; }
a.artx-mast-side { text-decoration:none; }
a.artx-mast-side:hover { color:var(--coral); }
.artx-mast-side--right { text-align:right; }
.artx-mast-book { text-decoration:none; color:var(--brick); }
.artx-mast-book:hover { color:var(--coral); }
.artx-mast-brand { flex:0 0 auto; text-align:center; text-decoration:none; }
.artx-mast-brand img { height:30px; width:auto; display:block; margin:0 auto 0.4rem; }
.artx-mast-tagline { font-family:ui-monospace,monospace; font-size:0.62rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:0.9rem; }
.artx-diamond { color:var(--coral); }

/* ---------- Footer ---------- */
.artx-foot { padding:2.6rem 0 1.6rem; }
.artx-foot-top { display:grid; grid-template-columns:1.6fr 1fr; gap:2.4rem; padding-bottom:2rem; border-bottom:1px solid var(--rule); }
.artx-foot-top img { height:26px; width:auto; margin-bottom:1rem; }
.artx-foot-blurb { font-size:0.95rem; color:var(--body-mute); margin:0 0 0.8rem; max-width:38ch; }
.artx-foot-cta { font-family:ui-monospace,monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brick); margin:0; }
.artx-foot-nav { display:grid; gap:0.6rem; align-content:start; }
.artx-foot-nav h2 { font-family:ui-monospace,monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--mono); margin:0 0 0.3rem; font-weight:700; }
.artx-foot-nav a { text-decoration:none; font-size:0.9rem; color:var(--body); }
.artx-foot-nav a:hover { color:var(--coral); }
.artx-foot-nav span { font-size:0.9rem; color:var(--mono); }
.artx-foot-bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-top:1.4rem; font-family:ui-monospace,monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--mono); }
.artx-foot-legal { display:flex; flex-wrap:wrap; gap:1.2rem; }
.artx-foot-legal a { text-decoration:none; color:var(--ink); }
.artx-foot-legal a:hover { color:var(--coral); }
.artx-foot-quote { font-family:"Noto Serif",Georgia,serif; font-style:italic; text-transform:none; letter-spacing:0; font-size:0.92rem; color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .artx-foot-top { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .artx-mast-top { justify-content:center; }
  .artx-mast-top > .artx-mast-side { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .artx-skip { transition:none; }
}