/* =========================================================================
   Mockstack — light paper surface (Revision 2)

   Long-form reading is on paper, not navy. Guide articles and the legal /
   about pages load this AFTER chrome.css, which is what lets it re-point the
   legacy aliases (--paper, --ink, --coral ...) at the light palette. Because
   guides.css is written entirely against those aliases, overriding them here
   re-skins the whole article surface without touching a single rule in it.

   The gold is darkened to #B8912B: #D4AF37 on #F7F6F2 is only about 1.9:1
   and fails AA badly, which matters because on this surface the accent is
   used for prose links, not just decoration.
   ========================================================================= */

:root {
  --pa-bg:   #F7F6F2;
  --pa-band: #EFEDE7;
  --pa-ink:  #0A192F;
  --pa-body: #33475C;
  --pa-mute: #5A6779;   /* the spec value 8A94A6 was 2.83:1, under AA */
  /* Two golds, because one cannot do both jobs on paper. #B8912B is the
     designer's accent and is fine as a large display colour and as a fill
     behind white text. It measures 2.73:1 on #F7F6F2 though, so it fails AA
     for prose links; small gold text uses the darker #876B1D (4.68:1). */
  --pa-gold:    #B8912B;   /* large display accents, gold fills */
  --pa-gold-ink: #876B1D;  /* prose links and small gold text, 4.68:1 */
  --pa-gold-hi: #6E5716;
  --pa-line: rgba(10, 25, 47, 0.12);
  --pa-card: #FFFFFF;

  /* legacy aliases, re-pointed for this surface */
  --paper:      var(--pa-bg);
  --paper-2:    var(--pa-band);
  --paper-3:    #E4E1D8;
  --card:       var(--pa-card);
  --ink:        var(--pa-ink);
  --ink-2:      var(--pa-body);
  --mute:       var(--pa-mute);
  --mute-2:     #A7AFBC;
  --rule:       var(--pa-line);
  --rule-2:     rgba(10, 25, 47, 0.22);
  --coral:      var(--pa-gold-ink);
  --coral-deep: var(--pa-gold-hi);
  --coral-soft: rgba(184, 145, 43, 0.10);
  --success:    #1E7A4A;

  --shadow-card: 0 1px 0 rgba(10,25,47,.04), 0 18px 50px -24px rgba(10,25,47,.18);
  --shadow-sm:   0 1px 0 rgba(10,25,47,.04), 0 6px 20px -8px rgba(10,25,47,.10);
}

html, body { background: var(--pa-bg); color: var(--pa-body); }
::selection { background: var(--pa-gold); color: var(--pa-ink); }

/* ---- nav ---------------------------------------------------------------- */
.nav {
  background: rgba(247, 246, 242, 0.92);
  border-bottom: 1px solid var(--pa-line);
}
.nav .brand { color: var(--pa-ink); }
.nav .brand .dot { color: var(--pa-gold); }
.nav .links a { color: var(--pa-body); }
.nav .links a:hover { color: var(--pa-gold-ink); }
.nav .menu {
  background: #fff; border-color: var(--pa-line);
  box-shadow: 0 22px 50px -18px rgba(10,25,47,.25);
}
.nav .menu a { color: var(--pa-body); }
.nav .menu a:hover { background: rgba(184,145,43,.09); color: var(--pa-gold); }
.nav .menu a .n { color: var(--pa-mute); }
.nav .menu a:hover .n { color: var(--pa-gold); }
.nav .menu .menu-all { color: var(--pa-gold); border-top-color: var(--pa-line); }
.nav .cta { background: var(--pa-ink); color: var(--pa-bg); }
.nav .cta:hover { background: var(--pa-gold); color: var(--pa-ink); }
.nav-toggle { border-color: var(--pa-line); }
.nav-toggle span { background: var(--pa-ink); }
.nav.open .links { background: #fff; border-bottom-color: var(--pa-line);
  box-shadow: 0 20px 34px -20px rgba(10,25,47,.28); }
.nav.open .links > a, .nav.open .links .menu-trigger {
  color: var(--pa-ink); border-bottom-color: var(--pa-line); }

/* ---- article ------------------------------------------------------------ */
.article h1, .article h2, .article h3 { color: var(--pa-ink); }
.article h1 .accent, .article .accent { color: var(--pa-gold); }
.article p, .article li { color: var(--pa-body); }
.article a { color: var(--pa-gold-ink); }
.article a:hover { color: var(--pa-gold-hi); }
.article code {
  background: var(--pa-band); color: var(--pa-ink);
  border: 1px solid var(--pa-line);
}
.article pre { background: var(--pa-band) !important; border-color: var(--pa-line) !important; color: var(--pa-ink) !important; }
.article .lede { color: var(--pa-body); }
.article .byline, .article .meta { color: var(--pa-mute); }
.article .meta b { color: var(--pa-ink); }
.tag, .kicker { color: var(--pa-mute); }
.crumb, .crumb a { color: var(--pa-mute); }
.crumb a:hover { color: var(--pa-gold-ink); }

/* Tables get a banded header rather than a rule, which reads better on paper. */
.size-table { background: #fff; border: 1px solid var(--pa-line); }
.size-table .head { background: var(--pa-band); border-bottom: 1px solid var(--pa-line); }
.size-table .head h3 { color: var(--pa-ink); }
.size-table th {
  background: var(--pa-band); color: var(--pa-ink);
  border-bottom: 1px solid var(--pa-line);
}
.size-table td { color: var(--pa-body); border-bottom: 1px solid var(--pa-line); }
.size-table td.dim, .size-table td b { color: var(--pa-ink); }
.size-table .badge { background: var(--pa-gold); color: var(--pa-ink); }
.size-table .badge.optional { background: var(--pa-band); color: var(--pa-body); }
.size-table .verified { color: var(--pa-mute); border-top: 1px solid var(--pa-line); }

.callout {
  background: #fff; border: 1px solid var(--pa-line);
  border-left: 3px solid var(--pa-gold);
}
.callout p { color: var(--pa-body); }
.callout .ico { background: var(--pa-gold); color: var(--pa-ink); }

/* The one dark element on the page: the mid-article CTA. */
.mid-cta { background: var(--pa-ink); border: 0; }
.mid-cta h3 { color: #fff; }
.mid-cta h3 .accent { color: #D4AF37; }
.mid-cta p { color: rgba(255,255,255,.7); }
.mid-cta a { background: #D4AF37; color: var(--pa-ink); border-radius: var(--radius-btn); }
.mid-cta a:hover { background: #E8C766; color: var(--pa-ink); }

/* ---- related cards ------------------------------------------------------ */
.related { border-top: 1px solid var(--pa-line); }
.related h2 { color: var(--pa-ink); }
.related-card { background: #fff; border: 1px solid var(--pa-line); }
.related-card:hover { border-color: var(--pa-gold); }
.related-card .num { color: var(--pa-mute); }
.related-card.tool .num { color: var(--pa-gold-ink); }
.related-card h4 { color: var(--pa-ink); }
.related-card p { color: var(--pa-body); }

/* ---- in-article ad ------------------------------------------------------ */
.article .ad-slot {
  margin: 34px 0; padding: 0;
  border: 1px dashed var(--pa-line); border-radius: var(--radius-card);
  min-height: 90px; display: grid; place-items: center;
}
.article .ad-slot ins { display: block; width: 100%; min-height: 90px; }

/* ---- footer ------------------------------------------------------------- */
.foot {
  background: var(--pa-band);
  border-top: 1px solid var(--pa-line);
}
.foot .brand { color: var(--pa-ink); }
.foot .brand .dot { color: var(--pa-gold); }
.foot .foot-links a { color: var(--pa-body); }
.foot .foot-links a:hover { color: var(--pa-gold-ink); }
.foot .foot-copy { color: var(--pa-mute); }

/* ---- guides index -------------------------------------------------------- */
.paper-head { background: var(--pa-bg); border-bottom: 1px solid var(--pa-line); }
.paper-head .tindex-head-inner { padding: 52px 36px 32px; }
.paper-head .eyebrow.dim { color: var(--pa-mute); }
.paper-head h1 { color: var(--pa-ink); }
.paper-head p { color: var(--pa-body); max-width: 560px; }
.gindex { background: var(--pa-bg); }
.gindex-inner { max-width: var(--wrap); margin: 0 auto; padding: 30px 36px 60px; }
.ghead { display: flex; align-items: baseline; gap: 14px; padding: 30px 0 8px; }
.ghead h2 { margin: 0; font: 800 22px var(--display); letter-spacing: -0.03em; color: var(--pa-ink); }
.ghub { font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--pa-gold-ink); }
.gcount { margin-left: auto; font: 500 11px var(--mono); color: var(--pa-mute); }
.grows { display: flex; flex-direction: column; }
.grow {
  display: grid; grid-template-columns: 96px 1.1fr 1.5fr 20px;
  gap: 16px; align-items: baseline;
  padding: 13px 12px; border-top: 1px solid var(--pa-line); border-radius: var(--radius-btn);
}
.grow:hover { background: rgba(184,145,43,.07); }
.grow .gtag { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--pa-mute); }
.grow .gname { font: 700 15px var(--body); letter-spacing: -0.015em; color: var(--pa-ink); }
.grow .gdesc { font: 400 13px var(--body); color: var(--pa-body); }
.grow .garr { color: var(--pa-gold-ink); font: 400 15px var(--mono); }
@media (max-width: 900px) {
  .paper-head .tindex-head-inner { padding: 38px 22px 24px; }
  .gindex-inner { padding: 22px 22px 44px; }
  .grow { grid-template-columns: 1fr auto; gap: 5px 12px; }
  .grow .gtag { grid-column: 1 / -1; }
  .grow .gdesc { grid-column: 1 / -1; }
}