/* ============================================================
   ieoengine.com — /style.css
   The stylesheet /research/questions/*.html has been linking to
   since publication. It did not exist; those pages have been
   rendering on a 5-selector inline stub.

   CASCADE NOTE: on the question pages the inline <style> block is
   declared AFTER this <link>, so the stub's rules for
   body / .wrap / .site-nav / .site-nav a / h1 / a WIN.
   The values below are therefore set to MATCH the stub exactly —
   identical either way, no conflict, and correct for any future
   page that links this file without carrying the stub.

   Palette is taken from the pages themselves (navy + gold ledger),
   not invented.
   ============================================================ */

:root{
  --bg:      #0f162a;   /* page ground, from the stub          */
  --ink:     #e6e9f2;   /* body text, from the stub            */
  --gold:    #c8b48c;   /* nav gold, from the stub             */
  --gold-lt: #d9c49a;   /* link gold, from the stub            */
  --rule:    rgba(184,147,90,.25);  /* hairline, from the stub */
  --rule-hi: rgba(184,147,90,.30);  /* from .corroboration     */
  --surface: rgba(255,255,255,.03); /* from .corroboration     */
  --mut:     #97a0b8;   /* muted metadata                       */
  --measure: 760px;     /* .wrap, from the stub                */
  --radius:  10px;      /* from .corroboration                  */
}

/* ---------- base (mirrors the inline stub verbatim) ---------- */
*{box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,sans-serif;
  line-height:1.68;
  margin:0;
}

.wrap{max-width:var(--measure);margin:0 auto;padding:28px 20px 70px}

.site-nav{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--rule);
  font-size:.86rem;
}
.site-nav a{color:var(--gold);text-decoration:none}
.site-nav a:hover{color:#fff;text-decoration:underline}

h1{font-size:1.72rem;margin:26px 0 8px;line-height:1.28;color:#fff}
a{color:var(--gold-lt)}

/* ================= everything below is what was missing ================= */

/* ---------- typography ---------- */
h2{
  font-size:1.12rem;
  color:#fff;
  margin:32px 0 10px;
  padding-left:11px;
  border-left:2px solid var(--gold);
  line-height:1.4;
}
h3{font-size:.95rem;color:var(--gold);margin:24px 0 8px;
   letter-spacing:.08em;text-transform:uppercase}

p{margin:0 0 15px}
strong{color:#fff;font-weight:650}
em{color:#cfd6e6}

ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px}
li::marker{color:var(--gold)}

a:hover{text-decoration:underline}

/* ---------- .lede — the hub's opening paragraph ---------- */
.lede{
  font-size:1.06rem;
  color:#cfd6e6;
  border-left:2px solid var(--rule-hi);
  padding:2px 0 2px 15px;
  margin:0 0 30px;
}

/* ---------- .dateline — the provenance byline ---------- */
.dateline{
  font-size:.8rem;
  color:var(--mut);
  letter-spacing:.03em;
  padding-bottom:16px;
  margin-bottom:26px;
  border-bottom:1px solid var(--rule);
}

/* ---------- .answer — the direct-answer block ----------
   This is the chunk answer engines lift. It leads the page and
   should read as the answer, not as preamble.               */
.answer{
  background:var(--surface);
  border:1px solid var(--rule-hi);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  padding:18px 20px;
  margin:0 0 30px;
  font-size:1.04rem;
  color:#eef1f7;
}
.answer > :last-child{margin-bottom:0}

/* ---------- .corroboration ----------
   NOTE: this <section> already carries inline styles for its box
   (margin/padding/background/border/radius). Do not restate them —
   inline wins regardless and duplicating invites drift.
   Style only what lives inside it.                            */
.corroboration h2{
  margin-top:0;
  border-left:none;
  padding-left:0;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}
.corroboration li{font-size:.94rem;color:#cbd2e2}
.corroboration > :last-child{margin-bottom:0}

/* ---------- .src — the source / method footnote ---------- */
.src{
  margin-top:34px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:.84rem;
  color:var(--mut);
}
.src strong{color:var(--gold);font-weight:600}
.src a{color:var(--gold-lt)}
.src > :last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--rule);
  margin-top:48px;
  padding:22px 20px;
  text-align:center;
  font-size:.78rem;
  color:var(--mut);
}
footer a{color:var(--gold)}

/* ---------- defensive: elements these pages may grow into ---------- */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
th{text-align:left;padding:8px 10px;color:var(--gold);
   border-bottom:1px solid var(--rule-hi);font-weight:600}
td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}

code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-size:.88em;color:var(--gold-lt);
     background:rgba(255,255,255,.04);padding:1px 5px;border-radius:4px}
pre{background:var(--surface);border:1px solid var(--rule);
    border-radius:var(--radius);padding:14px 16px;overflow-x:auto;font-size:.85rem}
pre code{background:none;padding:0}

blockquote{margin:18px 0;padding-left:15px;
           border-left:2px solid var(--rule-hi);color:#cfd6e6}

hr{border:0;border-top:1px solid var(--rule);margin:32px 0}

/* ---------- quality floor ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

@media (max-width:600px){
  h1{font-size:1.44rem}
  .wrap{padding:22px 16px 56px}
  .answer{padding:15px 16px}
  .site-nav{gap:10px;font-size:.8rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
