/* =================================================================
   The 39 Steps — design system
   One source of truth. See styleguide.html for a live reference.
   ================================================================= */
:root{
  /* palette */
  --paper:#faf8f1; --paper-2:#efe9dd;
  --ink:#1b1916; --ink-soft:#4a4339; --ink-faint:#928a79;
  --accent:#7a2520; --rule:#ddd4c2;
  /* type families */
  --display:'Jost', sans-serif;
  --body:'Newsreader', Georgia, serif;
  /* type scale (fixed steps; display headings are fluid, set on h1/.article-title) */
  --t-micro:11px; --t-label:13px; --t-small:16px; --t-body:20px; --t-lead:25px;
  /* spacing rhythm */
  --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:40px; --space-xl:64px;
  /* layout */
  --maxw:700px; --measure:68ch;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-weight:400; font-size:var(--t-body); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* --- inline text --- */
p{margin:0 0 var(--space-md); max-width:var(--measure);}
a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(122,37,32,.35); text-underline-offset:3px;}
a:hover{text-decoration-color:var(--accent);}
strong{font-weight:500;}
em{font-style:italic;}

/* --- lead / intro line (the single oversized opener; on the cover it is the subtitle) --- */
.lead{font-family:var(--body); font-weight:400; font-size:var(--t-lead); line-height:1.4; color:var(--ink); max-width:34ch; margin:0 0 var(--space-md);}

/* --- headings --- */
h1{font-family:var(--display); font-weight:300; font-size:clamp(50px,12vw,88px); line-height:.95; letter-spacing:-0.01em; margin:.25em 0 .35em;}
h1 .the{display:block; font-size:.3em; letter-spacing:.24em; text-transform:uppercase; font-weight:400; color:var(--ink-soft); margin-bottom:.5em;}
.article-title{font-family:var(--display); font-weight:400; font-size:clamp(30px,6vw,42px); line-height:1.04; letter-spacing:-0.005em; margin:.4em 0 .35em;}
.subhead{font-family:var(--display); font-weight:500; font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:0 0 var(--space-sm);}

/* --- small uppercase labels --- */
.kicker{font-family:var(--display); font-weight:400; font-size:var(--t-label); letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint);}
.label{font-family:var(--display); font-weight:500; font-size:var(--t-label); letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-md); display:flex; align-items:baseline; gap:.8em;}

/* --- lists --- */
ul, ol{margin:0 0 var(--space-md); padding:0; list-style:none; max-width:var(--measure);}
ul li, ol li{position:relative; margin-bottom:var(--space-xs); line-height:1.5;}
ul li{padding-left:1.3em;}
ul li::before{content:"\2022"; position:absolute; left:.2em; color:var(--ink-faint);}
ol{counter-reset:li;}
ol li{counter-increment:li; padding-left:2.2em;}
ol li::before{content:counter(li,decimal-leading-zero); position:absolute; left:0; top:.1em; font-family:var(--display); font-weight:300; font-size:.78em; color:var(--accent); letter-spacing:.04em;}

/* --- blockquote --- */
blockquote{margin:0 0 var(--space-md); padding:2px 0 2px 22px; border-left:2px solid var(--accent); color:var(--ink-soft); max-width:var(--measure);}

/* --- table --- */
table{width:100%; border-collapse:collapse; margin:0 0 var(--space-md); font-size:var(--t-small);}
th, td{text-align:left; padding:10px 16px 10px 0; vertical-align:top;}
thead th{font-family:var(--display); font-weight:500; font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--ink); padding-bottom:8px;}
tbody td{border-bottom:1px solid var(--rule);}
tbody tr:last-child td{border-bottom:none;}
th.num, td.num{text-align:right; padding-right:0; font-family:var(--display); font-variant-numeric:tabular-nums;}

/* --- footnotes --- */
sup.fnref{font-family:var(--display); font-size:.62em; line-height:0; font-weight:400;}
sup.fnref a{text-decoration:none;}
.notes{margin-top:var(--space-xl);}
.notes .label{margin-bottom:var(--space-sm);}
.notes ol{list-style:none; counter-reset:n; max-width:var(--measure);}
.notes li{counter-increment:n; position:relative; padding:0 0 14px 34px; margin-bottom:6px; font-size:var(--t-small); line-height:1.5; color:var(--ink-soft); border-radius:2px; transition:background .4s ease;}
.notes li::before{content:counter(n); position:absolute; left:0; top:1px; font-family:var(--display); font-size:var(--t-label); color:var(--accent);}
.notes li:target{background:rgba(122,37,32,.07);}
.fn-back{margin-left:.4em; text-decoration:none; font-size:15px;}

/* --- sections --- */
.wrap section + section{margin-top:var(--space-xl);}

/* --- staircase divider --- */
.stairs{display:block; width:100px; height:auto; margin:var(--space-lg) auto;}
.stairs path{fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter;}

/* --- cross-page link --- */
.crosslink{display:inline-block; margin-top:var(--space-lg); font-family:var(--display); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px;}
.crosslink:hover{border-bottom-color:var(--accent);}

/* --- sign-off (close of the journal essay) --- */
.signoff{font-family:var(--display); font-weight:300; font-size:22px; color:var(--accent); margin:var(--space-lg) 0 0;}

/* --- cover --- */
header.cover{padding:8vh 0 4vh; text-align:center;}
header.cover .lead{margin-left:auto; margin-right:auto; color:var(--ink-soft); font-weight:300; max-width:30ch;}

/* --- figures (the approximate numbers) --- */
.figures{display:flex; flex-wrap:wrap; justify-content:center; gap:18px 44px; margin:var(--space-lg) 0 12px;}
.fig{text-align:center;}
.fig .n{font-family:var(--display); font-weight:400; font-size:clamp(28px,7vw,36px); line-height:1; color:var(--ink); display:block;}
.fig .u{font-family:var(--display); font-weight:400; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:.55em;}
.figures-note{text-align:center; font-size:var(--t-small); font-style:italic; color:var(--ink-faint); margin:2px 0 0;}

/* --- map block --- */
.map{border:1px solid var(--rule); background:var(--paper-2); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; margin:var(--space-md) 0 0;}
.map .ph{font-family:var(--display); font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); max-width:34ch; line-height:1.7;}

/* --- journal article --- */
.hero-img{width:100%; max-height:62vh; object-fit:cover; display:block;}
.hero-ph{width:100%; aspect-ratio:16/7; background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--rule);}
article{padding-top:48px;}
.masthead{margin-bottom:var(--space-lg);}
.account .greeting::first-letter{font-family:var(--display); font-weight:300; float:left; font-size:3em; line-height:.78; padding:.05em .12em 0 0; color:var(--accent);}
figure{margin:var(--space-lg) 0;}
figure img{width:100%; display:block;}
.figure-ph{width:100%; aspect-ratio:3/2; background:var(--paper-2); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);}
figure.tall .figure-ph{aspect-ratio:4/5;}
figcaption{font-size:var(--t-small); font-style:italic; color:var(--ink-faint); margin-top:.6em;}
hr.break{border:none; border-top:1px solid var(--rule); width:64px; margin:var(--space-lg) auto;}

/* --- footer --- */
footer{margin-top:9vh; border-top:1px solid var(--rule); padding:42px 0 14vh; text-align:center;}
footer .mark{font-family:var(--display); font-weight:300; font-size:44px; color:var(--accent); line-height:1;}
footer .colophon{font-size:var(--t-small); font-style:italic; color:var(--ink-faint); margin-top:16px; line-height:1.7;}
footer .colophon a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule);}

@media (max-width:520px){ body{font-size:18px;} .figures{gap:14px 30px;} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }