/* ==========================================================================
   RESEARCH ARTICLE — V2 SKIN
   The document keeps its own structure, charts and mobile treatment. This
   layer moves it into the V2 system: the warm neutral palette, the mono
   constitution (M1 11/.15/700, M2 9.5/.12/600, M3 12/.01 tabular), the two-tier
   clay, and the set-plate material (lit top edge, tight contact, soft lift).
   Loaded after the document's own styles, so it overrides by order, never by
   !important, and nothing in the article's layout is touched.
   ========================================================================== */
:root{
  /* ground + ink: cool greys warm to the V2 day palette */
  --page:#F6F7F9; --page-band:#ECEEF1; --panel:#FBFCFE; --panel-2:#F1F2F4;
  --plate-bg:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  --plate-bd:rgba(25,24,23,.11);
  --ink:#191817; --ink2:#65635F; --ink3:#7B7873; --ink4:#8D8A85;
  --border:rgba(25,24,23,.11); --border-2:rgba(25,24,23,.06); --strong:rgba(25,24,23,.16);
  --hi:rgba(255,255,255,.9);
  /* two-tier clay: brand for text and rules, display for headline cuts */
  --clay:#9C4A33; --clay-display:#B84932;
  --clay-bd:rgba(156,74,51,.34); --clay-soft:rgba(156,74,51,.07);
  --good:#4E8F6B; --success:#4E8F6B; --warn:#A87A2E;
  /* the set plate: a lit top edge, a tight contact shadow, one soft lift */
  --surf-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),
                0 8px 14px -12px rgba(25,24,23,.30);
  --g-min:rgba(25,24,23,.045); --g-maj:rgba(25,24,23,.075);
}

/* ── the sheet and its cover ─────────────────────────────────────────────── */
.sheet{background:var(--panel);border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),
             0 24px 48px -28px rgba(25,24,23,.28)}
.cover{background:linear-gradient(158deg,var(--clay-display) 0%,var(--clay) 62%,#8A4029 100%)}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 68% 54% at 26% 12%,rgba(255,255,255,.15),transparent 68%)}
.cover>*{position:relative;z-index:2}
.cover .ccopy .ctag,.cover .ccopy h1{color:#FFF7F4;letter-spacing:-.032em}
.cover .ccopy .ctag .c,.cover .ccopy h1 .c{color:#FFFFFF}
.cover .ccopy .cdek{color:rgba(255,247,244,.82)}
/* the drafted margin rules read on clay, not on paper */
.cover .mar .line,.cover .mar .tk,.cover .mar .mj{background:rgba(255,255,255,.34)}
.cover .mar .n{color:rgba(255,255,255,.5)}
.cover .cgrain{opacity:.25}

/* ── the mono constitution ───────────────────────────────────────────────── */
.crumb,.xtitle .xt,.blab,.bval,.ocx-name,.tk,.fh,.bm{font-family:var(--mono)}
.crumb{font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);color:var(--ink4)}
.crumb a:hover{color:var(--clay)}

/* ── exhibits take the plate material ───────────────────────────────────── */
.exhibit{background:var(--plate-bg);border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),
             0 10px 20px -14px rgba(25,24,23,.26)}
.xtitle{border-bottom-color:var(--border-2);color:var(--ink)}
.xtitle .xt{font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);text-transform:uppercase;
  color:var(--clay)}
.xcap{color:var(--ink4)}

/* ── charts keep their geometry, take the V2 palette ────────────────────── */
.bchart .bbar .tk{background:var(--page-band)}
.bchart .bbar .fl{background:linear-gradient(180deg,#C68070,var(--clay))}
.bchart .blab{color:var(--ink2)}
.bchart .bval{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── outcome cards ──────────────────────────────────────────────────────── */
.ocx-fig{border-color:var(--border-2);background:var(--plate-bg);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(25,24,23,.05),
             0 5px 10px -9px rgba(25,24,23,.26)}
.ocx-name{font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--clay)}
.ocx-desc{color:var(--ink2)}

/* ── pull quotes and the closing link ───────────────────────────────────── */
.aq{color:var(--clay);font-style:italic}
.body .seemore a{color:var(--clay)}
.body .ilink{color:var(--clay);border-bottom:1px solid var(--clay-bd)}
.body .ilink:hover{border-bottom-color:var(--clay)}

/* ── the document keeps its own type where the site system reaches it ────── */
.sheetwrap h1,.cover h1,.cover .ctag{font-size:clamp(31px,3.6vw,50px);font-weight:660;
  line-height:1.03;letter-spacing:-.032em}
/* .bfit is a solid dark button in the byline, not body prose. At (0,3,1) this
   rule outranks .byline .bfit (0,2,0) and repainted its label clay on near
   black: 2.96:1. Exclude buttons by class the way .btn already is. */
.art .body a:not(.btn):not(.bfit){color:var(--clay)}

/* focus is visible on every interactive element, at the site's ring */
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* the article is a reading surface: it sits on the day ground, whatever the
   system file's default body colour is */
body{background:var(--page);color:var(--ink)}
.top .mark,.top.on-day .mark{color:var(--ink)}
.nav,.top.on-day .nav{color:var(--ink2)}
.nav>a:hover,.nav .pdrop>a:hover{color:var(--ink)}
/* Day ground only. Unscoped, this painted the bar light the moment the page
   scrolled, including over the night cover the article opens on. The shell's
   .top.stuck already carries the night state; this only overrides the day one. */
.top.on-day.stuck{background:rgba(246,247,249,.86);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--border)}

/* the drafting grid and lamp glow belong to the production ground system; the
   V6 ground is a light pool and grain, nothing else */
.lampgrid,.lampglow{display:none!important}
/* the footer is the site footer, on night, with its own wordmark cut */
footer.foot{background:var(--night-0);border-top:1px solid rgba(255,255,255,.12)}

/* these pages have no night band under the header, so the shell script's
   day/night probe leaves the nav wordmark on its dark cut over a light bar */
.top .bk-wordmark.dark{color:var(--bk-real)}
.top .bk-wordmark.dark .bk-v,.top .bk-wordmark.dark .bk-vec-text{color:var(--bk-vec)}

/* the page ground carries no drafting grid: the V6 ground is a light pool and
   grain, and the document's own grid layers predate it */
body::before,body::after,.pagegrid,.bggrid{background-image:none!important}

/* the document's own CTA is a dark slab built for a night bar; on a light
   header it takes the site's day treatment */

/* the bar opens over night: day colours only once a day band is under it */
header.top:not(.stuck){background:transparent;border-bottom:1px solid transparent;box-shadow:none}
.top:not(.on-day) .mark,.top:not(.on-day) .bk-wordmark.dark{color:var(--bk-real-dark)}
.top:not(.on-day) .bk-wordmark.dark .bk-real-text{color:var(--bk-real-dark)}
.top:not(.on-day) .bk-wordmark.dark .bk-v,.top:not(.on-day) .bk-wordmark.dark .bk-vec-text{color:var(--bk-vec-dark)}


/* the bar is fixed on every other page; the document's own header.top rule
   outranked the shell's and left it sticky, reserving 71px of flow above the
   opening band */
header.top{position:fixed;top:0;left:0;right:0;z-index:60}

/* the article carried sixteen clay labels; its exhibit titles, outcome names
   and trust lines are structure, so they take ink and keep their weight. The
   stat numerals stay clay: a number that is the subject of its exhibit is a
   callout, which is the fifth thing clay is allowed to mark. */
.xtitle .xt,.ocx-name,.tl{color:var(--ink)}

/* The header CTA is a quiet outline button in the desktop bar. Below the
   drawer breakpoint it is the drawer's primary action and takes the shell's
   clay treatment, the same as every other page. */
@media(min-width:641px){.top:not(.on-day) .nav{color:rgba(235,233,229,.72)}
header.top:not(.on-day) .nav>a,header.top:not(.on-day) .nav .pdrop>a{color:rgba(235,233,229,.72)}
header.top:not(.on-day) .nav>a:hover{color:#F2F1ED}
.top:not(.on-day) .nav .cta{border-color:rgba(255,255,255,.18);color:#F2F1ED}

.nav .cta{border-color:var(--border);color:var(--ink)}
.nav .cta:hover{border-color:var(--clay);color:var(--clay)}
.top .nav .cta{background:transparent;border:1px solid var(--border);color:var(--ink);
  padding:8px 16px;border-radius:6px;font-weight:560;font-size:13px}
.top .nav .cta:hover{border-color:var(--clay);color:var(--clay);background:transparent}
}