:root{
  --ink:#101c2e; --body:#39424e; --muted:#6d7681; --faint:#98a0aa;
  --rule:#ded9cf; --rule-soft:#eeeae2;
  --paper:#fbfaf7; --card:#ffffff;
  --navy:#16345c; --navy-soft:#eef2f7;
  --brass:#8a6a35; --brass-soft:#f4eee1;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:768px}

/* ---- site rule / masthead ------------------------------------------- */
.topbar{border-top:3px solid var(--navy);background:var(--card);
  border-bottom:1px solid var(--rule-soft)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:56px}
.brand{font:600 13.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.topnav{font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.topnav:hover{color:var(--navy)}

.eyebrow{font:700 11px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);margin:0 0 20px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(33px,5.6vw,54px);
  line-height:1.07;letter-spacing:-.018em;color:var(--ink);margin:0 0 18px}
.standfirst{font-size:clamp(16.5px,2vw,18.5px);line-height:1.62;max-width:62ch;
  margin:0 0 26px;color:var(--body)}
.contact{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--muted)}
.contact a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact a:hover{color:var(--navy);border-color:var(--navy)}

header.masthead{padding:56px 0 44px}

/* ---- featured quote -------------------------------------------------- */
.featured{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:46px 0;margin:0 0 56px}
.featured blockquote{margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,3.3vw,31px);line-height:1.36;letter-spacing:-.008em;
  color:var(--ink);max-width:26ch}
.featured .attrib{margin:20px 0 0;font-size:14px;color:var(--muted)}
.featured .attrib strong{color:var(--ink);font-weight:600;font-style:normal}

/* ---- section heads --------------------------------------------------- */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 0 24px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.sechead h2{font:700 12px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);margin:0}
.sechead .count{font-size:13px;color:var(--muted)}

/* ---- endorser cards -------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--card);padding:28px 26px 24px;display:flex;flex-direction:column;
  text-decoration:none;transition:background .12s ease}
.card:hover,.card:focus-visible{background:#fff;outline-offset:-2px}
.card:hover .go{color:var(--brass)}
.card .who{font-family:var(--serif);font-size:21.5px;line-height:1.2;color:var(--ink);
  margin:0 0 6px;letter-spacing:-.006em}
.card .role{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.card .role .org{display:block;color:var(--ink);font-weight:600}
.card .desc{font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:600;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule-soft)}
.card .pull{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink);
  margin:0 0 14px;padding-left:15px;border-left:2px solid var(--brass-soft);flex:1 0 auto}
.card .cred{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 16px;padding-left:15px}
.mark.lead{background:var(--navy);color:#fff}
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;
  font-size:13.5px;color:var(--muted)}
.filterbar button{font:600 13px/1 var(--sans);padding:9px 14px;border:1px solid var(--rule);
  background:var(--card);color:var(--navy);border-radius:2px;cursor:pointer}
.filterbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
body.only-lead .card:not(.is-lead){display:none}
.marks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.mark{font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px;background:var(--brass-soft);color:var(--brass);border-radius:2px}
.mark.alt{background:var(--navy-soft);color:var(--navy)}
.go{font:600 13.5px/1 var(--sans);color:var(--navy);border-top:1px solid var(--rule-soft);
  padding-top:15px;margin-top:auto}
.go::after{content:" \2192"}

/* ---- letter page ----------------------------------------------------- */
.crumb{padding:26px 0 0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--navy)}
.lhead{padding:22px 0 0}
.lhead h1{font-size:clamp(29px,4.6vw,42px);margin:0 0 10px}
.lrole{font-size:16.5px;color:var(--ink);margin:0 0 10px}
.lrole .org{font-weight:600}
.lctx{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:58ch}
.secondary{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink);
  margin:0 0 18px;padding:14px 0 0 16px;border-left:2px solid var(--brass-soft);max-width:58ch}
.secondary span{display:block;font:400 12px/1.6 var(--sans);color:var(--faint);
  letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:16px 0 0;
  border-top:1px solid var(--rule-soft)}
.jump span{font:700 11px/1.9 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-right:4px}
.jump a{font-size:13.5px;text-decoration:none;padding:4px 11px;border:1px solid var(--rule);
  border-radius:2px;background:var(--card)}
.jump a:hover{border-color:var(--navy);background:var(--navy-soft)}

.letter{border-top:1px solid var(--rule);margin-top:34px;padding-top:34px;
  scroll-margin-top:16px}
.letter:first-of-type{border-top:2px solid var(--ink)}
.ltitle{font-family:var(--serif);font-size:22px;line-height:1.25;color:var(--ink);margin:0 0 5px}
.lmeta{font-size:13px;color:var(--muted);margin:0 0 24px}
.note{font-size:13.5px;line-height:1.55;color:var(--body);background:var(--navy-soft);
  border-left:3px solid var(--navy);padding:13px 16px;margin:0 0 24px;border-radius:0 2px 2px 0}

/* the document itself, shown first. On a wide screen it breaks out past the
   text column so the letter is as large as the layout allows. */
.doc{margin:0 0 10px}
@media (min-width:1000px){
  .doc{width:calc(100% + 160px);margin-left:-80px}
}
.doc figure{margin:0 0 14px}
.doc a.page{display:block;text-decoration:none;background:#fff;
  border:1px solid var(--rule);box-shadow:0 1px 2px rgba(16,28,46,.05),0 8px 22px rgba(16,28,46,.06)}
.doc a.page:hover{border-color:var(--navy)}
.doc img{display:block;width:100%}
.doc figcaption{font-size:12.5px;color:var(--faint);margin-top:9px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.doc figcaption a{color:var(--navy);text-decoration:none;font-weight:600}
.doc figcaption .tapview{color:var(--navy);font-weight:600}
.doc figcaption a:hover{text-decoration:underline}

/* signature lift-out */
.sigblock{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  padding:20px 0 16px;margin:22px 0 0;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sigblock img{max-height:88px;width:auto;mix-blend-mode:multiply}
.sigblock .cap{font:700 10.5px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass)}
.sigblock .cap em{display:block;font:400 13px/1.5 var(--sans);letter-spacing:0;
  text-transform:none;color:var(--muted);font-style:normal;margin-top:3px}

/* transcript */
.transcript{margin-top:30px}
.transcript > h3{font:700 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
.transcript p{font-family:var(--serif);font-size:17px;line-height:1.75;color:var(--ink);
  margin:0 0 19px;max-width:68ch}
.transcript p.sig{margin-bottom:1px;color:var(--body);font-size:16px}
.transcript p.pre{font-size:15px;font-style:italic;color:var(--muted);
  border-left:2px solid var(--rule);padding-left:15px}

/* full-screen document viewer */
.lb{position:fixed;inset:0;z-index:9999;display:none;background:#0d1420;
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lb[open],.lb.on{display:block}
.lb-inner{min-height:100%;display:block;padding:52px 0 40px}
.lb img{display:block;background:#fff;margin:0 auto 18px;
  width:max(100%,860px);max-width:none;height:auto}
.lb-bar{position:fixed;top:0;left:0;right:0;height:52px;z-index:2;
  background:rgba(13,20,32,.96);display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 14px}
.lb-bar .who{color:#e8ecf2;font:600 13px/1.3 var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-x{flex:none;background:#fff;color:var(--ink);border:0;border-radius:3px;
  font:600 13px/1 var(--sans);padding:11px 15px;cursor:pointer}
.lb-x:hover{background:var(--brass-soft)}
body.lb-lock{overflow:hidden}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.btn.quiet{border-color:var(--rule);color:var(--muted);font-weight:600}
.btn.quiet:hover{border-color:var(--navy);color:var(--navy);background:var(--card)}
.viewhint{font-size:12.5px;color:var(--faint);margin:10px 0 0}
.btn{display:inline-block;font:600 14px/1 var(--sans);text-decoration:none;
  padding:13px 20px;border-radius:2px;border:1px solid var(--navy);color:var(--navy);
  background:var(--card)}
.btn:hover{background:var(--navy-soft)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.solid:hover{background:var(--navy);border-color:var(--navy)}

.pager{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:52px;padding-top:24px;font-size:14px}
.pager a{text-decoration:none;font-weight:600}
.pager .lbl{display:block;font:700 10.5px/1.8 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);font-weight:700}

footer{margin-top:56px;border-top:1px solid var(--rule);background:var(--card)}
footer .wrap{padding-top:34px;padding-bottom:52px;font-size:13.5px;color:var(--muted)}
footer p{margin:0 0 10px;max-width:70ch;line-height:1.6}
footer a{color:var(--muted)}
footer .fbrand{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;display:inline-block;margin-bottom:14px}

/* ---- home page ------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:20px}
.tile{background:var(--card);padding:30px 28px;text-decoration:none;display:block}
.tile h3{font-family:var(--serif);font-size:21px;color:var(--ink);margin:0 0 8px;font-weight:400}
.tile p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.tile .go{border:0;padding:0;margin:0}
.tile.soon{opacity:.62}
.tile.soon .go{color:var(--faint)}
.tile.soon .go::after{content:""}

@media (max-width:640px){
  /* Get the document itself above the fold on a phone. */
  .crumb{padding-top:16px;font-size:12.5px}
  .lhead{padding-top:12px}
  .lhead h1{margin-bottom:6px}
  .lrole{font-size:15.5px;margin-bottom:6px}
  .lctx{font-size:14px;margin-bottom:14px}
  .letter{margin-top:20px;padding-top:20px}
  .lmeta{margin-bottom:16px}
  .ltitle{font-size:20px}
  .brand{font-size:11.5px;letter-spacing:.11em}
  .topnav{font-size:12.5px}
  header.masthead{padding:36px 0 30px}
  .featured{padding:32px 0;margin-bottom:40px}
  .grid{grid-template-columns:1fr}
  .card{padding:24px 22px 20px}
  .transcript p{font-size:16.5px;line-height:1.72}
  .sigblock{gap:14px}
  .sigblock img{max-height:64px}
  .btn{flex:1 1 100%;text-align:center}
}

@media print{
  .topbar,.jump,.pager,.actions,.crumb,footer,.doc figcaption,.lb,.viewhint{display:none!important}
  body{background:#fff;font-size:11pt}
  .doc a.page{box-shadow:none;border:0}
  .letter{page-break-before:always;border:0}
  .letter:first-of-type{page-break-before:avoid}
  a{color:#000;text-decoration:none}
}