/* Norrow flow: the chapter hand-off at the end of every page, the cross-page motion, and the deck of pages. */
:root{
  --flow-display:var(--display,var(--serif,Georgia,serif));
  --flow-sans:var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --flow-ink:var(--night,#0B0B0C);
  --flow-gutter:var(--gutter,clamp(1.25rem,4vw,3rem));
  --flow-ease:cubic-bezier(.76,0,.24,1);
}

/* ---------- moving between pages ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.18s}
::view-transition-new(root){animation-duration:.3s}
::view-transition-group(flow-media),::view-transition-group(flow-title){animation-duration:.8s;animation-timing-function:var(--flow-ease)}
::view-transition-old(flow-media),::view-transition-new(flow-media){width:100%;height:100%;object-fit:cover;overflow:clip}
::view-transition-group(flow-media){overflow:clip;border-radius:0}
::view-transition-image-pair(flow-title){isolation:auto}
::view-transition-old(flow-title){animation:flow-fade-out .45s var(--flow-ease) both}
::view-transition-new(flow-title){animation:flow-fade-in .55s .25s var(--flow-ease) both}
html:active-view-transition-type(flow-next)::view-transition-old(root){animation:flow-root-out .5s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(flow-next)::view-transition-new(root){animation:flow-root-in .7s .25s cubic-bezier(0,0,.2,1) both}
/* the next page has no picture at the top: the panel opens up and dissolves */
::view-transition-old(flow-media):only-child{animation:flow-media-out .7s var(--flow-ease) both}
@keyframes flow-root-out{to{opacity:0;transform:scale(.965)}}
@keyframes flow-root-in{from{opacity:0;transform:translateY(28px)}}
@keyframes flow-fade-out{to{opacity:0}}
@keyframes flow-fade-in{from{opacity:0}}
@keyframes flow-media-out{to{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- the next chapter ---------- */
.flow-next{position:relative;margin:0;padding:0;background:var(--flow-ink);color:#fff}
.flow-next__link{position:relative;display:block;min-height:min(80svh,780px);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;outline-offset:-6px}
.flow-next__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.flow-next__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.flow-next__link:hover .flow-next__media img{transform:scale(1.05)}
.flow-next__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,8,10,0) 0%,rgba(6,8,10,.12) 30%,rgba(6,8,10,.55) 62%,rgba(6,8,10,.86) 100%)}
.flow-next__copy{position:absolute;inset:auto 0 0 0;display:grid;gap:clamp(.9rem,2vw,1.4rem);padding:clamp(2rem,6vw,4.5rem) var(--flow-gutter);max-width:1360px;margin-inline:auto}
.flow-next__kick{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;font:600 .78rem/1.2 var(--flow-sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.flow-next__pill{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.flow-next__pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:flow-pulse 2s ease-in-out infinite}
.flow-next__n{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78)}
.flow-next__title{display:block;max-width:15ch;font-family:var(--flow-display);font-weight:var(--flow-weight,800);font-size:clamp(2.3rem,7vw,6rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.flow-next__go{display:inline-flex;align-items:center;gap:.6rem;font:600 1rem/1 var(--flow-sans);color:#fff}
.flow-next__go svg{width:44px;height:44px;padding:12px;border-radius:50%;background:#fff;color:#0B0B0C;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.flow-next__link:hover .flow-next__go svg,.flow-next__link:focus-visible .flow-next__go svg{transform:translateX(6px)}
.flow-next--ink .flow-next__link{background:var(--flow-ink)}
.flow-next--ink .flow-next__media{display:grid;place-items:center end;padding-right:var(--flow-gutter)}
.flow-next--ink .flow-next__big{font-family:var(--flow-display);font-weight:var(--flow-weight,800);font-size:clamp(10rem,38vw,30rem);line-height:.8;color:rgba(255,255,255,.07);letter-spacing:-.04em}
@keyframes flow-pulse{50%{opacity:.35}}
/* the panel opens as it comes up the screen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .flow-next__link{animation:flow-open linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .flow-next__media{animation:flow-settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    .flow-next__copy{animation:flow-rise linear both;animation-timeline:view();animation-range:entry 25% entry 95%}
  }
}
@keyframes flow-open{from{clip-path:inset(7% 5% 0 5% round 18px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes flow-settle{from{transform:scale(1.18)}to{transform:none}}
@keyframes flow-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (max-width:699px){.flow-next__link{min-height:72svh}.flow-next__copy{padding-bottom:5.25rem}}

/* ---------- the deck of pages ---------- */
.flow-btn{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:8990;display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem .9rem .6rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0B0B0C;color:#fff;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent}
.flow-btn__grid{display:grid;grid-template-columns:repeat(2,5px);gap:3px}
.flow-btn__grid i{width:5px;height:5px;border-radius:1px;background:currentColor}
.flow-btn__n{font-variant-numeric:tabular-nums;opacity:.6;font-weight:500}
.flow-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.flow-locked{overflow:hidden}
.flow-index{position:fixed;inset:0;z-index:9500;overflow:auto;overscroll-behavior:contain;background:rgba(10,11,12,.9);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  color:#fff;padding:0 var(--flow-gutter) 6rem;opacity:0;transition:opacity .3s ease}
.flow-index.is-open{opacity:1}
.flow-index__bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;margin-bottom:.5rem;background:linear-gradient(rgba(10,11,12,.95),rgba(10,11,12,0))}
.flow-index__bar p{margin:0;display:flex;align-items:baseline;gap:.75rem;font:700 1rem/1.2 var(--flow-sans)}
.flow-index__bar p span{font-weight:500;opacity:.55;font-size:.85rem}
.flow-index__close{min-height:44px;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:600 .9rem/1 var(--flow-sans);cursor:pointer}
.flow-index__close span{font-size:1.3rem;line-height:.6}
.flow-index__grid{list-style:none;margin:0 auto;padding:0;max-width:1360px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .9rem}
@media (min-width:760px){.flow-index__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.25rem}}
@media (min-width:1150px){.flow-index__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flow-index__grid li{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*35ms)}
.flow-index.is-open .flow-index__grid li{opacity:1;transform:none}
.flow-index__grid a{display:grid;gap:.6rem;color:#fff;text-decoration:none;border-radius:10px;outline-offset:4px}
.flow-index__pic{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#1a1c1e;border:1px solid rgba(255,255,255,.1)}
.flow-index__pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.flow-index__grid a:hover .flow-index__pic img{transform:scale(1.05)}
.flow-index__pic--ink{display:grid;place-items:end start;padding:.9rem;background:linear-gradient(135deg,#1d2024,#0d0e10)}
.flow-index__pic--ink span{font-family:var(--flow-display);font-weight:var(--flow-weight,800);font-size:clamp(2.4rem,6vw,4rem);line-height:.9;color:rgba(255,255,255,.18)}
.flow-index__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem}
.flow-index__n{font:600 .75rem/1 var(--flow-sans);opacity:.5;font-variant-numeric:tabular-nums}
.flow-index__meta b{font:700 clamp(.95rem,1.4vw,1.1rem)/1.2 var(--flow-sans)}
.flow-index__here{flex-basis:100%;font:600 .7rem/1 var(--flow-sans);letter-spacing:.1em;text-transform:uppercase;color:#9fe3b0}
.flow-index [aria-current] .flow-index__pic{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.flow-index,.flow-index__grid li{transition:none}.flow-next__pill i{animation:none}}
@media print{.flow-btn,.flow-index,.flow-next{display:none}}
.flow-next__sub{display:block;max-width:44ch;font:400 clamp(1rem,1.5vw,1.2rem)/1.5 var(--flow-sans);color:rgba(255,255,255,.78)}