@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
/* The house rules for a project or writing page. Link this after the page's own <style> so it wins.
   The India and midterms pages are the reference; DESIGN.md ("Site standard, checked") states the rules in words,
   and tools/check_site.py checks every page against them (run it before every deploy).

   0. The site header and the fonts, the same on every page. The import above loads every weight the house styles
      use, so no title is drawn in a browser-made bold. These header rules override any page's own. */
header.site{text-align:center;padding:40px 0 0;margin:0}
header.site .name{display:block;font:500 clamp(34px,4.6vw,48px)/1 "Cormorant Garamond","EB Garamond",Garamond,"Times New Roman",serif;letter-spacing:.01em;text-decoration:none;color:var(--ink,#111);margin:0}
header.site nav{margin-top:10px;font-size:15px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
header.site nav a{color:var(--ink,#111);text-decoration:none;margin:0}
header.site nav a[aria-current]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 1. Title block, on every page: the title on the left of the 680px reading column, bold, then the date alone.
      No subtitle, no source in the date line. */
h1{font:600 clamp(32px,4.2vw,40px)/1.12 "Cormorant Garamond","EB Garamond",Garamond,serif;text-align:left;max-width:680px;margin:56px auto 0;text-wrap:balance}
.date,.dateline,.article main p.date,.article main p.dateline{text-align:left;font-size:15px;max-width:680px;margin:10px auto 28px}
/* the fox scene, when it leads the page, sits between the date and Key points (McDistance is the model);
   its caption is one centred 14px line */
.article main .foxscene{width:min(680px,100%);margin:8px auto 0}
.foxcap,.article main p.foxcap{text-align:center;font-size:14px;max-width:680px;margin:12px auto 0}

/* 2. Article body (add class="article" to <body>): everything sits in the same 680px column.
      Heading, then a short paragraph, then one visual; never two visuals in a row without text between. */
.article h2{font:500 28px/1.15 "Cormorant Garamond","EB Garamond",Garamond,serif;text-align:left;max-width:680px;margin:72px auto 12px;text-wrap:balance}
.article main p,.article .sub2,.article .lede{text-align:left;font-size:17px;line-height:1.55;max-width:680px;margin-left:auto;margin-right:auto}
.article .sub2,.article .lede{margin-top:0;margin-bottom:16px}

/* 3. Visuals keep to the text's margins: maps, charts, grids and tables are at most 680px wide and centred. */
.article figure,.article .grid,.article .cut,.article .key,.article table,.article .stage{max-width:680px;margin-left:auto;margin-right:auto}
.article .grid{margin-top:22px}
.article figure figure,.article .grid figure{max-width:none}

/* 4. Small type: captions 14 to 15px, the closing note 14px under a rule, in the same column. */
.article figcaption .nm{font:500 18px/1.15 "Cormorant Garamond",serif}
.article figcaption .fact,.article figcaption .out{font-size:14px;line-height:1.35}
.article .note{font-size:14px;max-width:680px;margin-left:auto;margin-right:auto}

/* 5. Tables: left-aligned labels, right-aligned figures in tabular numerals, a rule under the header. */
.article table th{font-weight:500;text-align:left}
.article table .r{text-align:right;font-variant-numeric:tabular-nums}

/* 6. Key points: every article opens with them, under the title block (and under the fox scene where it leads the page).
      A rule above, a small-caps label, then two to four bullets, each one finding with its number. */
.summary{max-width:680px;margin:40px auto 44px;border-top:1px solid #111;border-bottom:1px solid #e6e6e6;padding:16px 0 10px}
.summary h4{font:600 13px "EB Garamond",Garamond,serif;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.summary ul.kp{margin:0;padding-left:1.2em;display:grid;gap:8px}
.article .summary li{font-size:17px;line-height:1.5}