/* ============================================================
   article.css — Aesop Analytics
   Shared styles for all article and field study pages.
   Requires shared.css to be loaded first.
   ============================================================ */

/* ── Base ── */
body {
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 8% -6%, rgba(15,31,56,.05), transparent 40%),
    radial-gradient(circle at 100% 2%, rgba(193,140,93,.07), transparent 36%);
}
a { color:var(--sepia); text-decoration:underline; text-underline-offset:2px; }
.wrap { max-width:740px; margin:0 auto; padding:0 28px; }

/* ── Compact article nav ── */
nav {
  position:sticky; top:0; z-index:20;
  background:rgba(251,250,245,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in { max-width:1080px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:baseline; gap:8px; text-decoration:none; }
.brand .ae { font-family:"Abril Fatface",serif; font-size:25px; color:var(--navy); }
.brand .nm { font-family:"Abril Fatface",serif; font-size:21px; color:var(--navy); }
.brand .an { font-family:"DM Sans",sans-serif; font-weight:700; letter-spacing:.34em; font-size:11px; text-transform:uppercase; color:var(--twine); align-self:center; }
.site-links { display:flex; gap:20px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.site-links a { color:var(--slate); transition:color .18s; text-decoration:none; white-space:nowrap; }
.site-links a:hover { color:var(--navy); }
.site-links a.nav-accent { color:var(--twine); text-decoration:none; }
.site-cta { background:var(--navy); color:var(--cream)!important; padding:8px 16px; border-radius:4px; font-size:12px; font-weight:600; text-decoration:none; transition:background .2s; white-space:nowrap; }
.site-cta:hover { background:var(--navy-3); }
@media(max-width:760px){ .site-links, .site-cta { display:none; } }

/* ── Article typography ── */
article { padding:60px 0 36px; }
.kicker { font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:11.5px; color:var(--twine); margin-bottom:20px; }
h1 { font-family:"Abril Fatface",serif; font-weight:400; font-size:clamp(34px,5.8vw,60px); line-height:1.05; margin-bottom:22px; color:var(--navy); }
h1 .sub { display:block; font-size:.46em; line-height:1.3; color:var(--slate); margin-top:14px; font-family:"DM Sans",sans-serif; font-weight:300; }
.dek { font-size:20px; line-height:1.55; color:var(--slate); font-weight:300; max-width:58ch; margin-bottom:28px; }
.byline { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:12px 0; }
.byline .reg { font-weight:400; text-transform:none; letter-spacing:0; font-size:14px; }
.byline strong { color:var(--navy); }
.byline .dot { color:var(--rule); }
.body { padding-top:34px; font-size:18.5px; }
.body p { margin:0 0 22px; }
.lead:first-letter { font-family:"Abril Fatface",serif; float:left; font-size:80px; line-height:.74; padding:8px 14px 0 0; color:var(--navy); }
h2 { font-family:"Abril Fatface",serif; font-weight:400; font-size:30px; line-height:1.12; margin:54px 0 6px; color:var(--navy); }
.h2-sub { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--twine); margin-bottom:16px; display:block; }
strong { font-weight:700; color:var(--ink); }
em { font-style:italic; }

/* ── Article components ── */
.pull { font-family:"Abril Fatface",serif; font-size:26px; line-height:1.3; color:var(--navy); border-left:4px solid var(--twine); padding:4px 0 4px 24px; margin:44px 0; }
.tip { background:var(--paper-2); border-left:4px solid var(--twine); border-radius:0 5px 5px 0; padding:20px 22px; margin:32px 0; }
.tip .tlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--twine); margin-bottom:8px; }
.tip p { font-size:16px; color:var(--slate); line-height:1.55; margin:0; font-weight:400; }
.callout { background:var(--navy); color:var(--cream); border-radius:8px; padding:36px 32px; margin:44px 0; position:relative; overflow:hidden; }
.callout::after { content:"æ"; position:absolute; right:-14px; bottom:-40px; font-family:"Abril Fatface",serif; font-size:160px; color:rgba(193,140,93,.12); line-height:1; pointer-events:none; }
.callout h3 { font-family:"Abril Fatface",serif; font-weight:400; font-size:22px; color:#fff; margin-bottom:18px; position:relative; z-index:1; }
.callout ul { list-style:none; padding:0; position:relative; z-index:1; }
.callout li { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:16px; color:#D6DDE8; line-height:1.55; font-weight:300; }
.callout li:last-child { border-bottom:none; }
.callout li::before { content:"→"; color:var(--twine); font-weight:700; flex-shrink:0; }

/* ── Read-next links ── */
.read-next { margin:56px 0 0; padding:28px 0; border-top:2px solid var(--rule); }
.read-next .rn-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--twine); margin-bottom:16px; }
.rn-links { display:flex; flex-wrap:wrap; gap:12px; }
.rn-link { font-size:15px; font-weight:600; color:var(--navy); border:1px solid var(--line); border-radius:4px; padding:10px 18px; text-decoration:none; transition:border-color .18s,color .18s; }
.rn-link:hover { border-color:var(--twine); color:var(--twine); }

/* ── Compact article footer ── */
footer.site { background:var(--navy); color:#8A9FB8; margin-top:72px; padding:44px 0; }
footer .fin { max-width:740px; margin:0 auto; padding:0 28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
footer .fbrand { display:flex; align-items:baseline; gap:8px; }
footer .fbrand .ae { font-family:"Abril Fatface",serif; font-size:24px; color:var(--twine); }
footer .fbrand .nm { font-family:"Abril Fatface",serif; font-size:21px; color:#D6DDE8; }
footer .fbrand .an { font-family:"DM Sans",sans-serif; font-weight:700; letter-spacing:.32em; font-size:10.5px; text-transform:uppercase; color:var(--twine); align-self:center; }
footer .fmoral { font-style:italic; font-size:14px; color:#4A6070; }
footer .fback { font-size:13px; font-weight:600; color:var(--twine); text-decoration:none; }
footer .fback:hover { color:#d49a68; }

/* -- Old-style article header (header.site) -- */
header.site { border-bottom:1px solid var(--rule); background:rgba(251,250,245,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); position:sticky; top:0; z-index:10; }
.site-inner { max-width:1040px; margin:0 auto; padding:13px 28px; display:flex; align-items:center; justify-content:space-between; }
.tagline { color:var(--muted); font-style:italic; font-size:14px; }

/* -- SVG illustration containers -- */
.illus { margin:36px 0; background:#fff; border:1px solid var(--line); border-radius:6px; padding:28px 24px 18px; box-shadow:0 16px 40px -28px rgba(15,31,56,.22); }
.ititle { font-weight:700; font-size:15px; margin-bottom:3px; color:var(--ink); }
.isub   { font-size:12.5px; color:var(--muted); margin-bottom:18px; font-weight:400; }

/* -- Field study / data journalism -- */
.twocol { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.stats  { display:grid; grid-template-columns:repeat(3,1fr); margin:38px 0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.stat   { padding:22px 20px; background:#fff; }
.n      { font-family:"Abril Fatface",serif; font-size:38px; color:var(--twine); line-height:1; }
.l      { font-size:13px; color:var(--muted); margin-top:11px; line-height:1.36; font-weight:400; }
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; margin-bottom:6px; font-weight:400; color:var(--slate); }
.swatch { width:13px; height:13px; border-radius:2px; display:inline-block; }
.sources { margin:54px 0 0; border-top:2px solid var(--navy); padding-top:22px; }
.big    { font-family:"Abril Fatface",serif; font-size:60px; line-height:1; color:var(--twine); }
.cap    { font-size:16px; line-height:1.5; margin-top:12px; color:#B8BDCA; }
.method { margin:44px 0; background:var(--navy); border-radius:8px; overflow:hidden; }