@font-face{font-family:"Open Sans";src:url("propel-fonts/open-sans-latin.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("propel-fonts/noto-serif-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* Blueprint: Prussian blue, white line, one yellow, and a faint drafting grid. */
:root{
  font-size:16px;color-scheme:dark;
  --paper:#0f2f55;--ink:#eef4fb;--soft:#9fb6d2;--rule:#28507a;--accent:#ffd166;--line:#e4eefa;--faint:#3a6490;--grid:rgba(255,255,255,.045);
  --sans:"Open Sans",sans-serif;--serif:"Noto Serif",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;color:var(--ink);font-family:var(--serif);font-size:1.05rem;line-height:1.75}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
p{margin:0 0 1.5em}
strong{font-weight:700}
sup{font-size:.7em}
.skip{position:fixed;left:20px;top:-100px;background:#fff;color:#111;padding:12px;z-index:100}
.skip:focus{top:20px}
.footnote-ref{white-space:nowrap;padding:0 .15em;text-decoration:none;color:var(--accent)}
.footnote-ref:hover{background:#1c4474}

/* Hero */
.hero{max-width:1240px;margin:0 auto;padding:36px max(5vw,24px) 56px}
.masthead{display:flex;align-items:baseline;gap:18px;font-family:var(--sans);font-size:.85rem}
.masthead>a:first-child{font-weight:700;text-decoration:none}
.draft-tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:.1em .55em}
.masthead nav{display:flex;gap:22px;margin-left:auto}
.masthead nav a{text-decoration:none;color:var(--soft)}
.masthead nav a:hover{color:var(--accent)}
.hero-copy{padding-top:88px;max-width:720px}
.hero h1{font-size:clamp(5rem,11vw,10.5rem);font-weight:400;letter-spacing:-.06em;line-height:.95;margin:0 0 .25em -.05em}
.hero-copy p{font-size:1.3rem;line-height:1.6;max-width:36rem}
.index{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:64px;padding-top:28px;border-top:1px solid var(--rule)}
.index-item{display:block;text-decoration:none;font-family:var(--sans);font-size:.74rem;line-height:1.35;color:var(--soft)}
.index-item svg{width:100%;height:auto;display:block;margin-bottom:10px}
.index-item:hover{color:var(--accent)}

/* Essay sections */
.level2{max-width:1100px;margin:0 auto;padding:84px max(5vw,24px);display:grid;grid-template-columns:220px 1fr;gap:64px;border-top:1px solid var(--rule)}
.level2 h2{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:-.02em;line-height:1.4;margin:0}
.section-body{max-width:620px}
.science-example{margin:2.6rem 0;padding-left:22px;border-left:1px solid var(--rule)}
.science-example p{margin:0}
.example-label{display:inline-block;font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);margin-bottom:.9rem}
.section-body ul{padding-left:1.2em}
.section-body li{margin-bottom:.9rem}
.final-thought{font-size:1.8rem;line-height:1.35;margin:3rem 0 2rem -120px;max-width:760px}
.propel-contact{margin-top:2.5rem;font-family:var(--sans);font-size:.95rem}

/* The first questions: one spread per project */
#questions{display:block;max-width:1240px}
#questions h2{max-width:1100px;margin:0 auto}
#questions .section-body{max-width:none}
.spread{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding:64px 0;border-top:1px dashed var(--rule)}
.spread:first-child{border-top:0;margin-top:36px}
.spread:nth-child(even) .idea-figure{order:2}
.idea-figure{margin:0;position:sticky;top:12vh;padding-top:2.2rem}
.idea-figure svg{width:100%;height:auto;display:block}
.kicker{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.kicker-label{font-weight:400}
.kicker-lead{font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);white-space:nowrap}
.kicker-lead:hover{color:var(--accent);border-color:var(--accent)}
.spread h3{font-family:var(--serif);font-size:1.75rem;font-weight:400;line-height:1.35;letter-spacing:-.01em;margin:0 0 1.5rem}
.account p{font-size:1rem;line-height:1.7;margin:0 0 1.2rem}
.account a{text-decoration-color:var(--rule)}
.sources{font-family:var(--sans);font-size:.8rem;line-height:1.55;color:var(--soft);margin:0 0 1.4rem;padding-top:.8rem;border-top:1px solid var(--rule)}
.sources-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .4rem}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{margin:0 0 .35rem}
.sources a{color:var(--ink)}
.interview{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px dashed #7f9bbd;border-radius:4px;font-family:var(--sans);font-size:.85rem;line-height:1.55;color:var(--soft);max-width:460px}
.interview p{margin:0}
.interview strong{color:var(--ink)}
.play{width:34px;flex:none;fill:none;stroke:var(--line);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
/* A recorded interview: propel.js swaps the browser's controls for the drawn one, whose ring fills as it plays. */
.recording{border-style:solid;max-width:520px}
.interview-body{flex:1;min-width:0}
.interview-time{white-space:nowrap;font-variant-numeric:tabular-nums}
.recording audio{display:block;width:100%;margin-top:10px}
.play-toggle{flex:none;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.play-toggle:hover .play{stroke:var(--accent)}
.play-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.play .progress{stroke:var(--accent);stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--progress,0));transform:rotate(-90deg);transform-origin:20px 20px}
.play .glyph-pause,.is-playing .play .glyph-play{display:none}
.is-playing .play .glyph-pause{display:inline}
.transcript{margin-top:.7rem}
.transcript summary{cursor:pointer;color:var(--ink)}
.interview .transcript p{margin:.6rem 0 0}

/* The drawings: complete by default, drawn in on scroll when JavaScript runs.
   Each stroke starts at --t, its share of --span, set by the steps in _art.py. */
.idea{overflow:visible}
.idea .ink{fill:none;stroke:var(--line);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:url(#wobble);--span:2.6s}
.idea .thin{stroke-width:1.1}
.idea .heavy{stroke-width:4.2}
.idea .dashed{stroke-dasharray:3 4}
.idea .faint{stroke:var(--faint);stroke-width:1.4}
.idea .fill{fill:var(--line)}
.index .idea .ink{stroke-width:2.4;--span:1.2s}
.index .idea .thin{stroke-width:1.6}
/* The hidden dash ends half a shape before the start, so even small circles show no round cap before they draw. */
.js .idea .ink>*{stroke-dasharray:1 2;stroke-dashoffset:1.5;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1) calc(var(--t) * var(--span)),fill-opacity .4s ease calc(var(--t) * var(--span) + .4s)}
/* Dashed strokes cannot be hidden by their dash, so they fade in at their step. */
.js .idea .ink>.dashed{stroke-dasharray:3 4;stroke-dashoffset:0;stroke-opacity:0;transition:stroke-opacity .6s ease calc(var(--t) * var(--span))}
.js .idea .ink>.fill{fill-opacity:0}
.js .idea.is-in .ink>*{stroke-dashoffset:0}
.js .idea.is-in .ink>.fill{fill-opacity:1}
.js .idea.is-in .ink>.dashed{stroke-opacity:1}

/* Notes and footer; propel.js folds the notes into a closed details element. */
main>.footnotes,.source-notes{max-width:800px;margin:40px auto 80px;padding:0 24px;font-family:var(--sans);font-size:.92rem}
main>.footnotes{border-top:1px solid var(--rule);padding-top:24px}
.source-notes>summary{border-top:1px solid var(--rule);padding:24px 0;cursor:pointer}
.footnotes hr{display:none}
.footnotes li{margin-bottom:2rem;padding-left:.5rem;scroll-margin-top:3rem}
.footnotes p{margin-bottom:1rem}
.footnotes a{overflow-wrap:anywhere}
.page-footer{max-width:1240px;margin:0 auto;padding:32px max(5vw,24px) 60px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-family:var(--sans);font-size:.85rem}
.page-footer>span{font-weight:700}

@media(max-width:900px){
  .index{grid-template-columns:repeat(3,1fr);gap:22px 18px}
  .level2{grid-template-columns:180px 1fr;gap:40px;padding:64px max(5vw,24px)}
  .spread{gap:40px}
  .final-thought{margin-left:-60px}
}
@media(max-width:650px){
  body{font-size:1rem}
  .hero{padding-top:24px}
  .masthead{flex-wrap:wrap;gap:12px 16px}
  .masthead nav{flex-basis:100%;flex-wrap:wrap;gap:8px 16px;margin-left:0}
  .hero-copy{padding-top:48px}
  .hero h1{font-size:4.6rem}
  .hero-copy p{font-size:1.1rem}
  .index{grid-template-columns:repeat(2,1fr);margin-top:40px}
  .level2{display:block;padding:52px 24px}
  .level2 h2{font-size:1.9rem;margin-bottom:28px}
  .spread{display:block;padding:44px 0}
  .idea-figure{position:static;padding-top:0;margin-bottom:26px}
  .spread h3{font-size:1.45rem}
  .final-thought{font-size:1.5rem;margin:2rem 0}
  main>.footnotes,.source-notes{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .idea .ink>*{stroke-dashoffset:0!important;fill-opacity:1!important;stroke-opacity:1!important}
}

/* Print light: white paper, dark line, every drawing complete. */
@media print{
  :root{color-scheme:light;--paper:#fff;--ink:#111;--soft:#555;--rule:#bbb;--accent:#111;--line:#111;--faint:#bbb}
  html{scroll-behavior:auto}
  body{background:#fff;font-size:10.5pt;line-height:1.5}
  .skip,.masthead nav,.index,.interview,.page-footer{display:none!important}
  a,.footnote-ref{color:#111}
  .hero{padding:0 0 12pt}
  .hero-copy{padding-top:18pt;max-width:none}
  .hero h1{font-size:54pt}
  .hero-copy p{font-size:13pt;max-width:none}
  .level2{display:block;max-width:none;padding:18pt 0}
  .level2 h2{font-size:18pt;margin-bottom:10pt;break-after:avoid}
  .section-body{max-width:none}
  .science-example{break-inside:avoid}
  .final-thought{font-size:16pt;margin:18pt 0}
  .spread{display:block;padding:18pt 0}
  .idea-figure{position:static;width:45%;padding-top:0;margin-bottom:10pt;break-inside:avoid;break-after:avoid}
  .kicker,.spread h3{break-after:avoid}
  .spread h3{font-size:15pt}
  .idea .ink{filter:none}
  .idea .ink>*{stroke-dashoffset:0!important;fill-opacity:1!important;stroke-opacity:1!important;transition:none!important}
  main>.footnotes,.source-notes{max-width:none;margin:18pt 0;padding:0}
  .footnotes li{break-inside:avoid}
}

/* Personal proposal status, within the original Propel presentation. */
.hero-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start;padding-top:88px}
.hero-main .hero-copy{padding-top:0;max-width:none}
.draft-tag{font-size:.8rem}
.proposal-status{border-left:2px solid var(--accent);background:rgba(255,209,102,.045);padding:20px 24px;font-family:var(--sans);font-size:.875rem;line-height:1.6;margin-top:12px}
.proposal-status p{margin:0 0 1em}
.proposal-status p:first-child{color:var(--accent)}
.proposal-status p:last-child{margin-bottom:0}
@media(max-width:900px){.hero-main{grid-template-columns:1fr;gap:20px;padding-top:48px}.proposal-status{max-width:720px;margin-top:0}.hero-copy p{max-width:40rem}}
@media print{.hero-main{display:block;padding-top:0}.proposal-status{background:none;border-color:var(--rule);margin:1rem 0}}