/* At My Age — static person × age pages (scripts/pseo.mjs). Same tokens as styles.css; no JS, no decoration.
   Mobile: one column, 20px gutter. ≥900px: 720px column centred. */
:root{
  --paper:#F6F1E7; --panel:#EEE7DC; --card-bg:#FBF8F1;
  --ink:#2F2A25; --ink-2:#5E564E; --ink-3:#857C71;
  --rule:#DCD3C3; --rule-strong:#BFB39E;
  --them:#D7263D; --you:#1F4FE0; --cta:#1F4FE0; --cta-hover:#1A43BE; --you-deep:#1941B8; --you-tint:#E4EAFF; --you-soft:#C7D2F7;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:20px; --r-pill:999px; --r-m:16px;
  --t-xs:11px; --t-sm:13px; --t-body:16px; --t-lg:19px; --t-h3:22px; --t-h2:28px; --t-h1:36px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);font-size:var(--t-body);line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100dvh}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.sc{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
p{margin:0}

/* shell */
.wrap{max-width:430px;margin:0 auto;padding:0 var(--gutter) var(--s8)}
@media (min-width:900px){.wrap{max-width:720px}}
.mast{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--ink);margin:0 calc(-1*var(--gutter));padding:calc(var(--s3) + env(safe-area-inset-top)) var(--gutter) var(--s2);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.005em;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand em{font-style:italic;font-weight:400}
.mast-link{font-size:var(--t-sm);font-weight:700;color:var(--ink-2);text-decoration:none;padding:5px 12px;border:1px solid var(--rule-strong);border-radius:var(--r-pill)}
.mast-link:hover{background:var(--you-tint);color:var(--you-deep)}
.crumb{padding:var(--s3) 0 0;font-size:var(--t-sm);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--rule-strong)}
.crumb [aria-current]{color:var(--ink)}

/* article head */
main{padding-top:var(--s5)}
.kicker{color:var(--them);margin-bottom:var(--s2)}
.kicker a{color:var(--ink-3);text-decoration:none;letter-spacing:.14em}
.kicker a:hover{text-decoration:underline}
h1{font-size:clamp(30px,8.5vw,var(--t-h1));line-height:1.12;text-wrap:balance}
.person h1{font-size:clamp(36px,10vw,48px);line-height:1}
.hook{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-h3);line-height:1.3;color:var(--ink);margin:var(--s3) 0 0;text-wrap:pretty}
.life{margin-top:var(--s3);color:var(--ink-2);font-size:var(--t-sm);font-weight:700;letter-spacing:.02em}

/* portrait (person page) */
.portrait{margin:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s2)}
.portrait img{width:min(100%,240px);aspect-ratio:4/5;object-fit:cover;object-position:top;background:var(--panel);border-radius:var(--r-m)}
.portrait figcaption{font-size:12px;line-height:1.5;color:var(--ink-3)}
.portrait a{color:var(--ink-2)}

/* events */
.events{list-style:none;margin:var(--s5) 0 0;padding:0}
.ev{padding:var(--s4) 0;border-top:1px solid var(--rule)}
.ev:first-child{border-top:1px solid var(--ink)}
.ev .when{display:block;color:var(--them);margin-bottom:var(--s1)}
.ev h3{font-size:var(--t-h3);line-height:1.25;text-wrap:pretty}
.ev p{margin-top:6px;color:var(--ink-2);font-size:15px}
.src{display:inline-block;margin-top:var(--s2);font-size:var(--t-sm);font-weight:700;color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.src:hover{color:var(--you-deep);border-color:var(--you-deep)}

/* CTA — one per page */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;margin:var(--s6) 0 0;padding:0 var(--s5);border-radius:var(--r-pill);background:var(--cta);color:#fff;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--cta) 55%,transparent)}
.cta:hover{background:var(--cta-hover)}
.cta svg{width:18px;height:18px;flex:none}
@media (min-width:900px){.cta{width:max-content;min-width:320px}}

/* earlier / later */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.prevnext a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border:1px solid var(--rule-strong);border-radius:var(--r-m);text-decoration:none;background:var(--card-bg);min-width:0}
.prevnext a:hover{background:var(--you-tint);border-color:var(--you-soft)}
.prevnext .sc{color:var(--ink-3)}
.prevnext b{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prevnext .next{text-align:right;align-items:flex-end}

/* others at N · age list · people index */
.others,.ages,.timeline,.group{margin-top:var(--s7)}
.others h2,.ages h2,.timeline h2,.group h2{color:var(--ink-3);padding-bottom:var(--s2);border-bottom:1px solid var(--ink);margin-bottom:var(--s2)}
.others ul,.agelist,.people{list-style:none;margin:0;padding:0}
.others li a,.agelist a,.people a{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.others li a:hover b,.agelist a:hover b,.people a:hover b{color:var(--you-deep)}
.others b,.people b{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);flex:none;max-width:45%}
.others span,.agelist span,.people span{color:var(--ink-2);font-size:15px;line-height:1.4;flex:1;min-width:0}
.agelist b{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);color:var(--them);flex:none;width:2.4em;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.agelist i,.people i{font-style:normal;font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none}
.agehead{margin:var(--s5) 0 0;font-size:var(--t-h2);line-height:1.1}
.agehead a{text-decoration:none;color:var(--them)}
.agehead a:hover{text-decoration:underline}
.timeline .events{margin-top:var(--s2)}
.sources{margin-top:var(--s6);color:var(--ink-3)}
.sources a{color:var(--ink-2)}

/* notices */
.notice{margin:var(--s5) 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.credit{margin:var(--s3) 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.credit a{color:var(--ink-2)}
.foot{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--rule-strong);font-size:12px;line-height:1.55;color:var(--ink-3);display:flex;flex-direction:column;gap:var(--s2)}
.legal-links{display:flex;flex-wrap:wrap;gap:var(--s4)}
.legal-links a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-strong)}