/* WORKING NOTES
   A reading environment, deliberately different from the landing page.
   The site pairs serif headings with sans body. Here that is inverted:
   sans headings, serif body, narrow measure, one continuous sheet.
   Same two typefaces, opposite assignment. */

:root{
  --navy:#16263F;
  --deep:#0E1A2C;
  --paper:#ECEFF3;
  --sand:#F6F2EC;
  --line:#D9D1C5;
  --bronze:#A56B30;
  --bronze-lt:#C89B5C;
  --ink:#1B2433;
  --dim-ink:#55606F;
  --signal:#A32B24;
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:Spectral,Georgia,"Times New Roman",serif;
  font-size:1.32rem;
  font-size:clamp(1.32rem,.78rem + 1.25vw,1.50rem);
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bronze)}
a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---- top bar, the only navy on the page ---- */
.rail{height:5px;background:var(--bronze)}
.top{background:var(--navy);color:#EDF1F6;padding:1.15rem 0}
.top .in{max-width:54rem;margin:0 auto;padding:0 1.6rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.top a{color:#EDF1F6;text-decoration:none;font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.92rem;letter-spacing:.06em}
.top a:hover{color:var(--bronze-lt)}
.top .home{font-weight:500}

/* ---- the sheet ---- */
.sheet{max-width:54rem;margin:0 auto;padding:0 1.6rem}
.measure{max-width:62ch}

.masthead{padding:4.5rem 0 0}
.kicker{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.86rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin:0 0 1.5rem}
h1{font-family:Spectral,Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:3.1rem;font-size:clamp(2.1rem,1.1rem + 3.1vw,3.4rem);
  line-height:1.12;margin:0 0 1.8rem;max-width:20ch}
.dateline{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.95rem;
  letter-spacing:.03em;color:var(--dim-ink);margin:0}
.dateline .upd{display:block;margin-top:.45rem;color:var(--signal)}

.hr{height:1px;background:var(--line);border:0;margin:3rem 0 3.5rem}

/* ---- body ---- */
p{margin:0 0 1.75rem;max-width:62ch}
.lede{font-size:1.16em;line-height:1.7;color:var(--ink)}

h2{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-weight:600;
  font-size:1.16rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--navy);
  line-height:1.5;
  margin:5rem 0 0;          /* generous air above */
  max-width:30rem;
}
h2 + p, h2 + .pull, h2 + .ask{margin-top:1.9rem}   /* and below */
h2::after{content:"";display:block;width:3.2rem;height:3px;background:var(--bronze);margin-top:1rem}

/* ---- the two questions, the actionable core ---- */
.pull{border-left:4px solid var(--bronze);padding:.4rem 0 .4rem 1.8rem;margin:0 0 1.75rem;max-width:62ch}
.pull p{font-size:1.12em;line-height:1.62;margin:0 0 1.5rem}
.pull p:last-child{margin-bottom:0}

/* ---- the ask ---- */
.ask{background:#fff;border:1px solid var(--line);border-top:4px solid var(--bronze);
  padding:2.2rem 2.2rem 1.2rem;margin:0 0 1.75rem;max-width:62ch}
.ask p:last-child{margin-bottom:1rem}

.sign{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:1rem;letter-spacing:.04em;
  color:var(--dim-ink);margin:3.5rem 0 0}

/* ---- sources ---- */
.sources{margin-top:1.9rem;max-width:62ch}
.sources li{font-size:.92rem;line-height:1.62;color:var(--dim-ink);
  margin-bottom:1.15rem;padding-left:1.4rem;text-indent:-1.4rem;list-style:none}
.sources{padding-left:0}
.sources a{word-break:break-word}

/* ---- support line ---- */
.support{border-top:1px solid var(--line);margin-top:3.5rem;padding-top:1.6rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:1.06rem;color:var(--dim-ink);max-width:62ch}

/* ---- utility links ---- */
.tools{margin:3.5rem 0 0;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.98rem}
.tools a{margin-right:1.6rem;text-decoration:none;border-bottom:1px solid var(--bronze-lt);padding-bottom:1px}
.tools a:hover{border-bottom-color:var(--bronze)}

/* ---- index list ---- */
.intro{padding:4.5rem 0 0}
.noteslist{margin:3.5rem 0 0;padding:0;list-style:none}
.noteslist li{border-top:1px solid var(--line);padding:2.2rem 0}
.noteslist li:last-child{border-bottom:1px solid var(--line)}
.noteslist .n{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.84rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:.7rem}
.noteslist h3{font-family:Spectral,Georgia,serif;font-weight:400;font-size:1.85rem;line-height:1.22;margin:0 0 .7rem}
.noteslist h3 a{text-decoration:none;color:var(--ink)}
.noteslist h3 a:hover{color:var(--bronze)}
.noteslist .d{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.95rem;color:var(--dim-ink);margin:0}

/* ---- foot ---- */
.foot{background:var(--navy);color:#9FADBF;margin-top:6rem;padding:3rem 0}
.foot .in{max-width:54rem;margin:0 auto;padding:0 1.6rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.98rem;line-height:1.7}
.foot a{color:var(--bronze-lt)}
.foot .free{color:#D5DDE7;margin-bottom:.7rem}

.pagepad{padding-bottom:1rem}

@media(max-width:34rem){
  .top .in,.sheet,.foot .in{padding-left:1.15rem;padding-right:1.15rem}
  h2{margin-top:4rem}
  .ask{padding:1.7rem 1.4rem 1rem}
  .pull{padding-left:1.3rem}
}

/* ---- print: gives readers a clean PDF via save as PDF ---- */
@media print{
  .rail,.top,.foot,.tools{display:none}
  body{background:#fff;font-size:13pt;line-height:1.62}
  .sheet{max-width:none;padding:0}
  p,.measure,.pull,.ask,.sources,.support{max-width:none}
  h1{font-size:30pt}
  h2{font-size:12.5pt;margin-top:2.2rem;page-break-after:avoid}
  h2 + p{page-break-before:avoid}
  .ask{border:1px solid #999;background:#fff}
  .pull{border-left:3px solid #999}
  p{orphans:3;widows:3}
  a{color:#000;text-decoration:none}
  .masthead{padding-top:0}
}