@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/jost-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/jost-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/jost-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/serif-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Story layout. Everything below is scoped under .story-page (the wrapper inside the site's own <main>),
   so nothing here restyles the site's header, footer, menu, Hazel or search. Class names carry an st- prefix so the
   site's own generic names (.hero, .wrap, .lede ...) can never reach them. Progressive: no JS, or
   prefers-reduced-motion, shows every drawing finished. */
.story-page{--paper:#FBF9F4;--ink:#1B1B1B;--butter:#F5E6A3;--soft:#4a4744;--rule:rgba(27,27,27,.14);--gutter:16px;--st-top:58px;
  background:var(--paper);color:var(--ink);font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-size:clamp(18px,17.4px + .15vw,19px);line-height:1.7;letter-spacing:normal;padding-top:var(--st-top);overflow-x:clip}
@media (min-width:861px){.story-page{--st-top:91px}}
.story-page img,.story-page svg{max-width:100%}
.story-page img{height:auto;display:block}
.story-page a{color:var(--ink);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px}
.story-page a:hover{background:var(--butter)}
.story-page .st-defs{position:absolute;width:0;height:0;overflow:hidden}
.story-page p{margin:0 0 1.15em;font-size:inherit;color:inherit}
.story-page h1,.story-page h2{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0 0 .6em;color:var(--ink);max-width:none}
.story-page h1{font-size:clamp(2.55rem,1.4rem + 6.2vw,4.6rem);margin:0 0 .4em}
.story-page h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.7rem)}
.story-page h2.st-plain{font-size:1.5rem}
.story-page .st-wrap{width:min(100% - 2 * var(--gutter),62rem);margin-inline:auto}
.story-page .st-col{max-width:34rem;margin-inline:auto}

/* hero */
.story-page .st-hero{padding-block:clamp(1.8rem,5vw,3.5rem) clamp(1rem,3vw,2rem);display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.story-page .st-kicker{font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:0 0 1.1em;font-weight:500}
.story-page .st-standfirst{font-size:1.18em;line-height:1.5;color:var(--soft);margin-bottom:.8em}
.story-page .st-meta{font-family:'Jost',sans-serif;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:1.8em}
.story-page .st-meta a{color:inherit}
.story-page .st-cred{margin:-1.15rem 0 1.8rem;text-transform:none;letter-spacing:.04em;font-size:.8rem}
.story-page .st-lede{font-size:1.1em}
@media (min-width:900px){
  .story-page .st-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:3rem}
  .story-page .st-hero h1{font-size:clamp(2.55rem,1.4rem + 6.2vw,min(4.6rem,9.5vh))}
  .story-page .st-hero .st-sk{margin:.4rem 0 0;width:min(100%,36rem,calc(62vh * var(--ar)))}
}

/* sections */
.story-page .st-sec{padding-block:clamp(2rem,6vw,3.5rem)}
.story-page .st-sec .st-sk{margin-top:clamp(1.4rem,4vw,2.2rem)}
.story-page .st-pull{margin:0 0 1.2em;padding:0;border:0}
.story-page .st-pull p{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(1.45rem,1.1rem + 1.4vw,1.95rem);line-height:1.3;margin:0}
.story-page mark{background:none;color:inherit;position:relative;padding:0 .06em;z-index:0;
  background-image:linear-gradient(transparent 12%,var(--butter) 12%,var(--butter) 88%,transparent 88%);background-size:100% 100%;background-repeat:no-repeat}
.story-page .st-big{font-family:'Jost',sans-serif;font-weight:700;font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem);line-height:1.1;margin-bottom:.7em}
.story-page .st-more{margin-top:2em;font-size:.95em;color:var(--soft)}
.story-page .st-faq{margin:0}
.story-page .st-faq div{border-top:1px solid var(--rule);padding:1.1em 0 .2em}
.story-page .st-faq dt{font-family:'Jost',sans-serif;font-weight:600;font-size:1.2rem;line-height:1.3;margin-bottom:.45em}
.story-page .st-faq dd{margin:0 0 1em}
.story-page .st-src{padding-left:1.1em;margin:0 0 1.6em;font-size:.95em;line-height:1.55;list-style:disc}
.story-page .st-src li{margin-bottom:.7em}
.story-page .st-fine{font-size:.85em;color:var(--soft)}

/* sketches: ink on a transparent ground, so the butter marker sits under the line work */
.story-page .st-sk{position:relative;margin:0 auto;width:min(100%,36rem,calc(66vh * var(--ar)))}
.story-page .st-sk img{position:relative;z-index:1;width:100%}
.story-page .st-mk{position:absolute;z-index:0;overflow:visible;pointer-events:none}
.story-page .st-mk path{fill:none;stroke:var(--butter);stroke-width:15;stroke-linejoin:round;stroke-linecap:round;vector-effect:none}
.story-page .st-cover{display:none;position:absolute;inset:-2%;width:104%;height:104%;z-index:2;pointer-events:none;overflow:hidden}
.story-page .st-cover path{fill:none;stroke:var(--paper);stroke-width:13.5;stroke-linejoin:round;stroke-linecap:round}

/* word pop and squiggle */
.story-page .st-key{position:relative;display:inline-block;z-index:0}
.story-page .st-key::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.3em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q3 -1 6 5 T12 5 T18 5 T24 5' fill='none' stroke='%23F5E6A3' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center/1em 100%;
  z-index:-1}
.story-page .st-pop .st-w{display:inline-block}

/* the margin clock: wide desktop only, never in the header */
.story-page .st-clock{display:none;flex-direction:column;align-items:center;font-family:'Jost',sans-serif;color:var(--ink)}
.story-page .st-clock svg{display:block}
.story-page .st-clock .face{fill:#fff;stroke:var(--ink);stroke-width:3}
.story-page .st-clock .ticks line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.story-page .st-clock .hh line,.story-page .st-clock .mh line{stroke:var(--ink);stroke-linecap:round}
.story-page .st-clock .hh line{stroke-width:5}.story-page .st-clock .mh line{stroke-width:3.5}
.story-page .st-clock .sw line{stroke:#d4b43c;stroke-width:1.6;stroke-linecap:round}
.story-page .st-clock .sw{transform-origin:50px 50px}
.story-page .st-clock .pin{fill:var(--ink)}
.story-page .st-clock-t{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.35rem;color:var(--soft);white-space:nowrap}
@media (min-width:1240px){
  .story-page .st-clock{display:flex;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;width:76px}
  .story-page .st-clock svg{width:68px;height:68px}
}

/* motion (only when JS is on and the reader has not asked for less) */
@media (prefers-reduced-motion:no-preference){
  .st-js .story-page .st-cover{display:block}
  .st-js .story-page .st-cover path{stroke-dasharray:1 1.02;stroke-dashoffset:0}
  .st-js .story-page .st-sk.in .st-cover path{stroke-dashoffset:1.02;transition:stroke-dashoffset 1.9s cubic-bezier(.45,.05,.4,1)}
  .st-js .story-page .st-mk path{stroke-dasharray:1 1.02;stroke-dashoffset:1.02}
  .st-js .story-page .st-sk.in .st-mk path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease-out 1.3s}
  .st-js .story-page .st-sk.in.boil img{filter:url(#st-boil)}
  .st-js .story-page .st-pop .st-w{opacity:0;transform:translateY(.45em) rotate(-2.5deg);transition:opacity .35s ease-out,transform .5s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i) * 75ms)}
  .st-js .story-page .st-pop.in .st-w{opacity:1;transform:none}
  .st-js .story-page .st-pop .st-key::after{clip-path:inset(0 100% 0 0)}
  .st-js .story-page .st-pop.in .st-key::after{clip-path:inset(0 0 0 0);transition:clip-path .8s ease-out;transition-delay:calc(var(--n,6) * 75ms + 150ms)}
  .story-page .st-clock .sw{animation:st-sweep 14s linear infinite}
  @keyframes st-sweep{to{transform:rotate(360deg)}}
}