/* Lythous — version three
   Palette still sampled from the room. Three voices: Newsreader for display,
   Public Sans for reading, DM Mono for every label. Sections are chapters
   rather than stripes. The ambient is a sunrise, not a searchlight. */

:root{
  /* ground */
  --paper:#FBF9F5;
  --paper-2:#F3EFE6;
  --sage-pale:#E7EBE0;
  --forest:#26302A;
  --night:#171009;

  /* ink */
  --ink:#2A2116;
  --ink-2:#544736;
  --ink-3:#87796A;
  --rule:#E3DBCC;

  /* accent */
  --sage:#5F6D55;
  --ochre:#BE7328;
  --ochre-2:#F7EADA;

  /* type */
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* three sizes below the lede, and nothing else */
  --t-label:11px;
  --t-small:14px;
  --t-body:17px;

  --pad:clamp(20px,5vw,72px);
  --r:2px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* anchors must clear the sticky header */
[id]{scroll-margin-top:92px}

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------------------------------------------------------- type scale */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(50px,8.4vw,112px);line-height:.9;letter-spacing:-.045em}
h2{font-size:clamp(34px,5vw,68px);line-height:.96;letter-spacing:-.038em;max-width:15ch}
h3{font-size:clamp(21px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
p{margin:0 0 1.05em;max-width:62ch}
a{color:inherit}
strong{font-weight:600}

.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);display:block;margin:0 0 20px}
.lede{font-size:clamp(19px,2.05vw,23px);line-height:1.42;color:var(--ink-2);max-width:52ch}
.small{font-size:var(--t-small);color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------------------------------------------------------- chapters */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(72px,10vw,138px);position:relative}
.ch-paper{background:transparent}
.ch-warm{background:var(--paper-2)}
.ch-sage{background:var(--sage-pale)}
.ch-forest{background:var(--forest);color:#E7EBE0}
.ch-forest h2,.ch-forest h3{color:#F2F5EE}
.ch-forest p{color:#BDC7B7}
.ch-forest .label{color:#9FB294}
.ch-night{background:var(--night);color:#EFE7DB}
.ch-night h2,.ch-night h3{color:#FBF7F0}
.ch-night p{color:#D2C7B7}
.ch-night .label{color:#CFA267}

/* ---------------------------------------------------------- ambient */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
body.lit-bg main,body.lit-bg .site-head,body.lit-bg .site-foot,
body.lit-bg .announce{position:relative;z-index:3}
body.lit-bg section.ch-paper{background:transparent}
body.lit-bg section.ch-warm{background:rgba(243,239,230,.62)}
body.lit-bg section.ch-sage{background:rgba(231,235,224,.72)}
body.lit-bg section.ch-forest{background:rgba(38,48,42,.93)}
body.lit-bg section.ch-night{background:rgba(23,16,9,.90)}

/* ---------------------------------------------------------- header */
.announce{background:var(--night);color:#D9CFC0;font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:9px 16px}
.announce a{color:#EBDFCB}

.site-head{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease}
.site-head.stuck{background:rgba(251,249,245,.92);
  backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:var(--rule)}
.head-in{display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  padding-block:15px;max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{height:30px;width:auto}
.brand b{font-family:var(--display);font-size:20px;font-weight:600;
  display:block;letter-spacing:-.02em;line-height:1}
.brand i{font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-top:3px}
.site-nav{display:none;gap:26px;font-size:14.5px;flex:1}
.site-nav a{text-decoration:none;color:var(--ink-2);position:relative;padding-block:5px}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ochre);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.16,.8,.24,1)}
.site-nav a:hover::after{transform:scaleX(1)}
@media(min-width:1040px){.site-nav{display:flex}}
.head-cta{display:flex;gap:8px;margin-left:auto;align-items:center}

/* mobile menu: the page had no navigation at all below 1040px */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1.5px solid var(--rule);border-radius:var(--r);
  background:transparent;cursor:pointer;padding:0}
.menu-btn span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:var(--ink)}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
@media(min-width:1040px){.menu-btn{display:none}}
.mobile-nav{display:none;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.mobile-nav.open{display:block}
@media(min-width:1040px){.mobile-nav{display:none!important}}
.mobile-nav a{display:block;padding:15px var(--pad);text-decoration:none;
  border-bottom:1px solid var(--rule);color:var(--ink-2)}
.mobile-nav a:last-child{border-bottom:none}

/* ---------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  padding:12px 20px;border-radius:100px;text-decoration:none;white-space:nowrap;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--ochre);border-color:var(--ochre);color:#fff}
.btn-help{border-color:var(--ochre);color:#8E5219;background:var(--ochre-2)}
.btn-help:hover{background:var(--ochre);border-color:var(--ochre);color:#fff}
.btn-lg{font-size:16px;padding:16px 30px}
.ch-forest .btn,.ch-night .btn{border-color:rgba(255,255,255,.45);color:#F2F5EE}
.ch-forest .btn:hover,.ch-night .btn:hover{background:#F2F5EE;color:var(--night)}
@media(max-width:680px){.head-cta .long{display:none}.brand i{display:none}}

/* ---------------------------------------------------------- hero */
.hero{position:relative;min-height:94svh;display:flex;align-items:center;
  overflow:hidden;background:var(--night)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:114%;object-fit:cover;filter:saturate(.86)}
/* horizontal, so the room stays visible instead of being buried */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(23,16,9,.90) 0%,rgba(23,16,9,.62) 42%,
             rgba(23,16,9,.20) 72%,rgba(23,16,9,.06) 100%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto;
  padding-inline:var(--pad)}
.hero h1{color:#FEFCF8;max-width:14ch}
.hero .lede{color:#E6DACA;margin-top:24px;max-width:46ch}
.hero .label{color:#D9A967}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.hero-cta .btn{border-color:rgba(255,255,255,.5);color:#FEFCF8}
.hero-cta .btn:hover{background:#FEFCF8;color:var(--night)}
.hero-cta .btn-solid{background:#FEFCF8;color:var(--night);border-color:#FEFCF8}
.hero-cta .btn-solid:hover{background:var(--ochre);border-color:var(--ochre);color:#fff}
.hero-cta .btn-help{background:var(--ochre);border-color:var(--ochre);color:#fff}

/* the vertical index down the left edge */
.hero-index{position:absolute;left:calc(var(--pad) - 4px);top:50%;z-index:3;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.22em;
  color:rgba(233,222,205,.6);text-transform:uppercase}
@media(max-width:900px){.hero-index{display:none}}

/* ---------------------------------------------------------- ticker */
.ticker{background:var(--ochre);color:#241703;overflow:hidden;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;padding:13px 0;position:relative;z-index:3}
.ticker div{display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:slide 38s linear infinite}
.ticker span{padding-inline:22px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker div{animation:none}
  .ticker{text-align:center}
  .ticker div{width:100%;justify-content:center}}

/* ---------------------------------------------------------- reveals */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.22,.7,.3,1),transform .45s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.22,.7,.3,1),transform .45s cubic-bezier(.22,.7,.3,1)}
.stagger.in>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.stagger>*{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------- layout */
.two{display:grid;gap:clamp(28px,4.5vw,72px);align-items:start}
@media(min-width:920px){.two{grid-template-columns:1fr 1fr}
  .two.lean{grid-template-columns:.8fr 1.2fr}}
.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:660px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(255,255,255,.8);border:1px solid var(--rule);border-radius:var(--r);
  padding:28px 24px 24px;text-decoration:none;display:block;position:relative;
  overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.16,.8,.24,1),box-shadow .4s ease,border-color .35s}
a.card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(42,33,22,.11);
  border-color:#CBBCA6}
.card h3{margin-bottom:9px}
.card .q{font-family:var(--display);font-style:italic;font-size:17.5px;
  color:var(--ink-2);margin:0}
.card .go{display:block;margin-top:16px;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}

/* ---------------------------------------------------------- figures */
figure{margin:0}
figcaption{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.05em;
  color:var(--ink-3);margin-top:12px;max-width:42ch;line-height:1.5}
.shot-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:780px){
  .shot-grid{grid-template-columns:1.3fr 1fr;align-items:start}
  .shot-grid figure:nth-child(2){margin-top:76px}}
.mask{position:relative;overflow:hidden;border-radius:var(--r)}
/* The image is wiped in from the top and settles out of a slight overscale, so
   it arrives rather than fades. clip-path does the wipe instead of a coloured
   panel sliding away, because .mask sits on four different chapter grounds and
   a panel would have to match each one. */
.mask img{display:block;width:100%;height:auto;filter:saturate(.8);
  clip-path:inset(0 0 100% 0);transform:scale(1.07);
  transition:clip-path 1.05s cubic-bezier(.66,0,.2,1),
             transform 1.4s cubic-bezier(.18,.75,.25,1)}
.mask.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .mask img{clip-path:none;transform:none;transition:none}}

.note{border:1px solid var(--rule);background:rgba(231,235,224,.7);
  border-radius:var(--r);padding:22px 24px;max-width:60ch}
.note p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- diagram */
.diagram-labels{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:10px;max-width:100%}
.diagram-labels span{font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.diagram-labels span:last-child{color:var(--sage)}

/* ---------------------------------------------- steps: all seven visible */
.steps{display:grid;gap:0;margin-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.step{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  opacity:.42;transition:opacity .45s ease}
.step.on{opacity:1}
@media(min-width:760px){.step{grid-template-columns:46px 210px 1fr;gap:26px;align-items:baseline}}
.step-n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;
  color:var(--ochre);padding-top:6px}
.step h3{font-size:20px}
.step p{margin:0;font-size:15.5px}
.step-stage{position:sticky;top:104px;align-self:start}
.step-art{position:relative;aspect-ratio:4/5;max-height:56svh}
.step-art .art{position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:#E8D3B0;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .5s ease}
.step-art .art.on{opacity:.9}
.step-art .art .hero-figure{stroke:#CFA267}
.step-art .art .dim{opacity:.5}
.step-art .art .dash{stroke-dasharray:6 8;opacity:.6}
.step-art .art path,.step-art .art circle{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.32,.72,.28,1)}
.step-art .art.on path,.step-art .art.on circle{stroke-dashoffset:0}
.step-art .art .dash{stroke-dashoffset:0!important}
@media(max-width:999px){.step-stage{display:none}.step{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .step{opacity:1}
  .step-art .art path,.step-art .art circle{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}

/* ---------------------------------------------------------- people */
/* the network, on the dark chapter: circles read as people, squares read as
   records, and these are the eleven names the whole referral promise rests on */
.people{display:grid;gap:34px 26px;grid-template-columns:repeat(2,1fr);margin-top:46px}
@media(min-width:620px){.people{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.people{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1140px){.people{grid-template-columns:repeat(6,1fr)}}
.person img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:999px;filter:grayscale(1) contrast(1.05) brightness(.95);
  transition:filter .55s ease,transform .5s cubic-bezier(.16,.8,.24,1)}
.person:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:translateY(-5px)}
@media (hover:none){.person img{filter:grayscale(0)}}
.person b{display:block;font-size:14px;font-weight:600;margin-top:16px;line-height:1.3}
.person i{font-style:normal;display:block;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.07em;margin-top:5px;line-height:1.4;color:var(--ink-3)}
/* on the night chapter the labels need lifting off the ground */
.ch-night .person b{color:#F6F1E8}
.ch-night .person i{color:#A2937F}
@media (prefers-reduced-motion:reduce){.person img{transition:none}.person:hover img{transform:none}}

/* ---------------------------------------------------------- audience */
.aud-grid{display:grid;gap:22px;grid-template-columns:1fr;margin-top:42px}
@media(min-width:840px){.aud-grid{grid-template-columns:repeat(3,1fr)}}
.aud-card .mask{aspect-ratio:4/3}
.aud-card .mask img{height:100%;object-fit:cover}
.aud-card h3{margin:18px 0 7px}
.aud-card p{font-size:15.5px;margin:0}

/* ---------------------------------------------------------- help */
.help-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:700px){.help-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.help-grid{grid-template-columns:repeat(4,1fr)}}
.help-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:22px;text-decoration:none;display:block;
  transition:transform .35s cubic-bezier(.16,.8,.24,1),border-color .3s}
a.help-card:hover{transform:translateY(-3px);border-color:var(--ochre)}
.help-card .mono{margin-bottom:9px;color:var(--sage)}
.help-card b{display:block;font-family:var(--display);font-size:23px;
  font-weight:500;letter-spacing:-.02em;line-height:1.15}
.help-card span{display:block;margin-top:7px;font-size:14px;color:var(--ink-3)}
.help-steps{display:grid;gap:10px;margin-top:30px;padding:0;list-style:none;max-width:56ch}
.help-steps li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:15.5px}
.help-steps i{font-style:normal;font-family:var(--mono);font-size:var(--t-label);
  color:var(--ochre);padding-top:3px}

/* ---------------------------------------------------------- closing */
.closer{background:var(--sage-pale);text-align:center}
.closer h2{max-width:18ch;margin:0 auto;font-size:clamp(38px,6vw,88px)}
.closer .lede{margin:22px auto 0}
.closer .btn{margin-top:30px}

/* ---------------------------------------------------------- footer */
.site-foot{background:var(--night);color:#AFA292;padding-block:clamp(52px,7vw,88px);
  font-size:var(--t-small)}
.site-foot a{color:#E2D8C8;text-decoration:none;border-bottom:1px solid transparent}
.site-foot a:hover{border-bottom-color:var(--ochre)}
.foot-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:840px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.foot-grid h4{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.15em;
  text-transform:uppercase;color:#7E7060;margin:0 0 14px;font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-bar{border-top:1px solid #322517;margin-top:44px;padding-top:22px;display:flex;
  flex-wrap:wrap;gap:12px 26px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#7E7060}
.crisis{background:#241A0F;border:1px solid #3C2E1E;border-radius:var(--r);
  padding:17px 19px;color:#E2D8C8;font-size:14px}
.crisis b{color:#F6F1E8;display:block;margin-bottom:5px}

/* ---------------------------------------------------------- misc */
.flag{background:var(--sage);color:#fff;text-align:center;font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;position:relative;z-index:80}
.flag a{color:#fff}
:focus-visible{outline:2.5px solid var(--ochre);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;padding:10px 14px;
  border:2px solid var(--ink)}
.ico{width:26px;height:26px;display:block;margin:0 0 16px;fill:none;
  stroke:var(--sage);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s ease}
a.card:hover .ico{stroke:var(--ochre)}