/* Proof of Progress, renovate (front page = idea 4 "a front page that mixes worlds").
   Self-hosted roman-only fonts (OFL). No italics anywhere: every element is forced upright and
   the browser is told never to fake a slant. */
@font-face{font-family:News;src:url(fonts/newsreader.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:Glyph;src:url(fonts/faculty-glyphic.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Fig;src:url(fonts/figtree.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box;font-style:normal!important;font-synthesis:none}
html,body{margin:0;-webkit-text-size-adjust:100%;background:#f2ece0;color:#1d1914}
body{font-family:Fig,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #b3401f;outline-offset:3px;border-radius:2px}
.wrap{max-width:720px;margin:0 auto}
header.top{padding:calc(env(safe-area-inset-top) + 18px) 0 8px}
header.top .wrap{padding:0 16px}
.brand{font:600 11px/1 Fig,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.tagl{font:400 40px/1.02 Glyph,serif;margin:10px 0 14px;letter-spacing:-.01em}
.tagl b{font-weight:400;color:#b3401f}
.sub .tagl{font-size:30px;margin:8px 0 10px}
nav.worlds{display:flex;gap:18px;overflow-x:auto;padding:4px 16px 14px;scrollbar-width:none;border-bottom:1px solid #1d191422;position:sticky;top:0;background:#f2ece0;z-index:3;-webkit-overflow-scrolling:touch}
nav.worlds::-webkit-scrollbar{display:none}
nav.worlds a{font:500 15px/1 News,serif;white-space:nowrap;padding-top:10px;opacity:.86}
nav.worlds a[aria-current=page]{opacity:1;box-shadow:inset 0 -2px #b3401f;padding-bottom:6px}
main{padding:6px 12px 40px}
.pagehead{font:400 34px/1.05 Glyph,serif;margin:22px 4px 0;letter-spacing:-.01em}
.row{margin:22px 0}
.pull{font:400 34px/1.04 Glyph,serif;margin:0 4px 10px;letter-spacing:-.01em;text-wrap:balance}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
a.fig{display:block;-webkit-tap-highlight-color:transparent}
figure{margin:0}
figure img{width:100%;height:auto;display:block;background:#e6dece}
a.fig:active img{opacity:.92}
figcaption{padding:8px 2px 0}
.lab{font:600 9.5px/1.25 Fig,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.ti{font:500 17px/1.2 News,serif;margin-top:3px;text-wrap:pretty}
.full .ti{font-size:22px}
.pair .ti{font-size:15.5px}
.words{margin:34px 4px 0;border-top:1px solid #1d191422;padding-top:18px}
.wh{font:400 26px/1.1 Glyph,serif;margin:0 0 6px;letter-spacing:-.01em}
.words ul{list-style:none;margin:0;padding:0}
.words li a{display:block;padding:12px 0;border-bottom:1px solid #1d191414}
.words .lab{display:block;margin-bottom:3px}
.wt{font:500 17px/1.25 News,serif}
footer.foot{padding:26px 16px calc(env(safe-area-inset-bottom) + 34px);border-top:1px solid #1d191422;font:400 13px/1.5 Fig,sans-serif;color:#1d1914b0;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
footer.foot nav{display:flex;gap:16px}
footer.foot a{border-bottom:1px solid #1d191433}
/* story page */
.story{padding:6px 12px 30px}
.story figure{margin-top:14px}
.story .meta{font:600 10px/1.3 Fig,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin:18px 4px 0}
.story h1{font:400 36px/1.05 Glyph,serif;margin:10px 4px 12px;letter-spacing:-.01em;text-wrap:balance}
.story .body{font:400 19px/1.5 News,serif;margin:0 4px 16px;max-width:36em}
.story .src{font:500 14px/1.45 Fig,sans-serif;margin:0 4px 6px}
.story .src a{border-bottom:1px solid #b3401f;color:#8f3318}
.story .credit{font:400 12.5px/1.4 Fig,sans-serif;opacity:.6;margin:0 4px 18px}
.acts{display:flex;gap:10px;margin:8px 4px 6px}
.acts button{flex:1;font:600 14px/1 Fig,sans-serif;padding:13px 10px;border-radius:999px;border:1px solid #1d191455;background:transparent;color:#1d1914;cursor:pointer}
.acts button:active{background:#1d19140d}
.more{margin-top:28px;border-top:1px solid #1d191422;padding-top:14px}
.more .wh{margin-left:4px}
@media (min-width:720px){
  header.top{padding-top:36px}
  .tagl{font-size:64px}
  .sub .tagl{font-size:40px}
  nav.worlds{padding-left:16px}
  .pull{font-size:46px}
  .pair{gap:16px}
  .full .ti{font-size:26px}
  .pair .ti{font-size:18px}
  .story h1{font-size:52px}
  .pagehead{font-size:48px}
}