/* ------------------------------------------------------------------
   Physical Observability — The World, Understood.
   Night for the story. Daylight for the manifesto.
------------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --night: #06080d;
  --night-2: #0c1420;
  --starlight: #eef1f8;
  --ember: #ffb877;
  --paper: #f3eee4;
  --paper-2: #e9e2d4;
  --ink: #1b1915;
  --ink-soft: #5d574c;
  --rule: rgba(27, 25, 21, 0.16);
  --accent: #b4532a;

  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@view-transition {
  navigation: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

::selection {
  background: var(--ember);
  color: var(--night);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip:focus {
  left: 0;
}

/* ---------- shared chrome ---------- */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem clamp(1.1rem, 4vw, 2.75rem);
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}
.bar a {
  pointer-events: auto;
  text-decoration: none;
  padding: 0.5rem 0;
  opacity: 0.72;
  transition: opacity 0.25s ease;
}
.bar a:hover,
.bar a:focus-visible {
  opacity: 1;
}
.bar .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.bar .mark svg {
  width: 1.5em;
  height: 1.5em;
  flex: none;
}
.bar nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
}
.bar a[aria-current="page"] {
  opacity: 1;
  box-shadow: 0 1px 0 currentColor;
}

.progress {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: currentColor;
  opacity: 0.55;
  pointer-events: none;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* ==================================================================
   THE STORY — a film that reads itself
================================================================== */

.story {
  background: var(--night);
  color: var(--starlight);
  transition: color 0.7s ease;
  overflow-x: hidden;
}
.story.is-day {
  color: var(--ink);
}
.film,
.film .story {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.sky,
.sky > * {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sky {
  z-index: 0;
  pointer-events: none;
}
.sky .night {
  background:
    radial-gradient(120% 80% at 68% 22%, #101b2c 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.sky .dawn {
  opacity: var(--dawn, 0);
  background:
    radial-gradient(130% 62% at 50% 112%, rgba(255, 176, 104, 0.62) 0%, rgba(214, 104, 84, 0.3) 38%, rgba(120, 70, 110, 0.12) 62%, transparent 80%),
    linear-gradient(180deg, transparent 30%, rgba(60, 54, 92, 0.3) 100%);
}
.sky .day {
  opacity: var(--day, 0);
  background:
    radial-gradient(120% 70% at 50% 110%, #fbf3e2 0%, transparent 70%),
    var(--paper);
}
.sky .grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  position: relative;
  z-index: 1;
}
.film .stage {
  position: fixed;
  inset: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* a shot: one thought and the lines that belong to it */

.shot {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(0.55rem, 3.2vh, 2.2rem);
  min-height: 78vh;
  padding: 5.5rem clamp(1.25rem, 6vw, 5rem) 6.5rem;
  text-align: center;
}
.shot:first-child,
.shot.end {
  min-height: 100vh;
  min-height: 100svh;
}
.film .shot {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-block: 4.25rem 4.9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s ease, transform 0.9s ease, filter 0.75s ease, visibility 0s 0.8s;
}
.film .shot.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
.film .shot.on.out {
  opacity: 0;
  transform: translateY(-1.2vh);
  filter: blur(5px);
  transition: opacity 0.75s ease, transform 0.9s ease, filter 0.75s ease;
}

.l {
  margin: 0;
  text-wrap: balance;
}
/* Legibility comes from one soft pool of night (or paper) behind the words,
   painted once, rather than a blurred shadow on every letter. */
.film .shot::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  z-index: -1;
  background: radial-gradient(closest-side, var(--halo, rgba(6, 8, 13, 0.62)) 0%, var(--halo-2, rgba(6, 8, 13, 0.4)) 55%, transparent 100%);
  pointer-events: none;
}
.story.is-day .shot::before {
  --halo: rgba(243, 238, 228, 0.7);
  --halo-2: rgba(243, 238, 228, 0.45);
}

/* the voice: strong statements, and the thoughts that lead to or from them */

.lead,
.solo {
  font: 400 min(clamp(2.15rem, 1.15rem + 4vw, 5rem), 9.2vh) / 1.04 var(--display);
  letter-spacing: -0.006em;
  max-width: 15.5em;
}
.solo {
  font-size: min(clamp(2.7rem, 1.2rem + 6.4vw, 7.4rem), 13.5vh);
  line-height: 0.98;
  max-width: 11em;
}
.solo em,
.lead em {
  font-style: italic;
}
.sub {
  max-width: 30em;
  font: 400 min(clamp(1.16rem, 0.98rem + 0.95vw, 1.85rem), 5vh) / 1.36 var(--text);
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.sub.it {
  font-style: italic;
}

.items {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: clamp(0.2rem, 1vh, 0.8rem);
}
.item {
  font: italic 400 min(clamp(1.45rem, 1rem + 1.75vw, 2.6rem), 5.6vh) / 1.12 var(--display);
  padding: 0.42em 1.1em;
  max-width: 20em;
}
.items.stack .item + .item {
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.items.row {
  grid-auto-flow: column;
  align-items: start;
}
.items.row .item {
  padding: 0.3em 1.1em;
  max-width: 11em;
}
.items.row .item + .item {
  border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}
.items.pair .item {
  font-style: normal;
  font-size: min(clamp(2.15rem, 1.15rem + 4vw, 5rem), 9.2vh);
  line-height: 1.04;
  padding: 0.08em 0;
}
.items.pair .item:nth-child(2) {
  font-style: italic;
}
.items.duo {
  gap: clamp(1.2rem, 4vh, 2.6rem);
}
.items.duo .item {
  font-style: normal;
  font-size: min(clamp(1.7rem, 1.05rem + 2.7vw, 3.5rem), 7.4vh);
  line-height: 1.08;
  padding: 0;
  max-width: 17em;
}

@media (max-width: 62rem) {
  .items.row {
    grid-auto-flow: row;
  }
  .items.row .item {
    padding: 0.42em 1.1em;
    max-width: 20em;
  }
  .items.row .item + .item {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
  .items.row.four {
    grid-template-columns: 1fr 1fr;
  }
  .items.row.four .item {
    padding-inline: 0.45em;
  }
  .items.row.four .item:nth-child(2) {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
  .items.row.four .item:nth-child(4) {
    border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
}

/* short screens: a phone on its side */
@media (max-height: 520px) {
  .film .shot {
    padding-block: 3.4rem 3.9rem;
  }
  .item,
  .items.row .item {
    padding-block: 0.22em;
  }
  .items {
    margin-top: 0;
  }
  .deck {
    gap: 0.3rem;
    padding-bottom: 0.6rem;
  }
  .bar {
    padding-block: 0.7rem;
  }
  .film .shot {
    gap: 0.3rem;
  }
  .lead,
  .items.pair .item {
    font-size: 8.2vh;
  }
  .sub {
    font-size: 4.5vh;
    line-height: 1.25;
  }
  .item {
    font-size: 5vh;
  }
  .items.row .item,
  .item {
    padding-block: 0.12em;
  }
}

/* the narrowest phones */
@media (max-width: 22.5rem) {
  .lead,
  .items.pair .item {
    font-size: 1.9rem;
  }
  .sub {
    font-size: 1.04rem;
    line-height: 1.3;
  }
  .item {
    font-size: 1.28rem;
    padding-block: 0.32em;
  }
  .film .shot {
    padding-block: 4rem 4.6rem;
    gap: 0.6rem;
  }
}

/* how lines are spoken */

.film .l {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(7px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease;
}
.film .l.in {
  opacity: 1;
  transform: none;
  filter: none;
}
.film .item {
  transform: translateY(0.25em) scale(0.985);
}
.film .l.words {
  opacity: 1;
  transform: none;
  filter: none;
}
.w {
  display: inline-block;
}
.film .w {
  opacity: 0;
  transform: translateY(0.38em);
  filter: blur(8px);
  transition: opacity 0.75s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.75s ease;
}
.film .l.in .w {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(var(--i) * 85ms);
}

/* blur is the costliest part of a reveal; phones and tablets get the same motion without it */
@media (max-width: 64rem), (pointer: coarse) {
  .film .l,
  .film .w,
  .film .shot.on.out {
    filter: none;
  }
}

/* title */

.title {
  font: 400 min(clamp(2.5rem, 9.2vw, 8.25rem), 21vh) / 0.98 var(--display);
  letter-spacing: 0.035em;
  max-width: none;
}
.title .w {
  display: block;
}
.title .w + .w {
  font-style: italic;
  letter-spacing: 0.02em;
}
.film .title.in .w {
  transition-duration: 1.6s, 1.9s, 1.6s;
  transition-delay: calc(var(--i) * 800ms);
}

/* end card */

.shot.end {
  gap: 1.4rem;
}
.name {
  font: 500 clamp(0.8rem, 0.6rem + 0.9vw, 1.05rem) / 1.2 var(--mono);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
}
.name strong {
  font-weight: 500;
}
.tag {
  font: italic 400 min(clamp(2.6rem, 8vw, 6.5rem), 17vh) / 1 var(--display);
  text-wrap: balance;
}
.cta {
  margin-top: min(2.2rem, 4vh);
}
.cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 1.15rem 1.9rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease, letter-spacing 0.5s ease;
}
.cta a strong {
  font-weight: 500;
}
.cta a:hover,
.cta a:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  letter-spacing: 0.24em;
}
.story:not(.is-day) .cta a:hover,
.story:not(.is-day) .cta a:focus-visible {
  background: var(--starlight);
  border-color: var(--starlight);
  color: var(--night);
}

/* the page that isn't there */
.lost .shot {
  min-height: 100vh;
  min-height: 100svh;
}
.lost h1 {
  margin: 0 0 1rem;
}
.lost .cta {
  margin: 0;
}

/* the deck: play, step, and where you are in the reel */

.deck {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  gap: 0.9rem;
  padding: 0 clamp(1.1rem, 4vw, 2.75rem) 1.15rem;
}
.deck[hidden] {
  display: none;
}
.deck .keys {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.deck .keys button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.deck .keys button:hover,
.deck .keys button:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.deck .keys svg {
  width: 1.05rem;
  height: 1.05rem;
}
.deck .play .i-play,
.deck .play .i-replay,
.deck.paused .play .i-pause,
.deck.ended .play .i-pause {
  display: none;
}
.deck.paused .play .i-play,
.deck.ended .play .i-replay {
  display: block;
}
.deck.paused .play {
  opacity: 1;
}
.segs {
  display: flex;
  gap: 4px;
}
.segs button {
  flex: 1 1 0;
  min-width: 3px;
  height: 14px;
  padding: 6px 0;
  border: 0;
  background: none;
  background-clip: content-box;
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  color: inherit;
  cursor: pointer;
}
.segs i {
  display: block;
  height: 100%;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ==================================================================
   THE MANIFESTO
================================================================== */

.manifesto {
  background: var(--paper);
  color: var(--ink);
}
.manifesto::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .38  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.manifesto .bar {
  color: var(--ink);
}
.manifesto .bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.5rem 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--paper) 45%, rgba(243, 238, 228, 0));
}
.manifesto .progress {
  color: var(--accent);
  opacity: 1;
}
.manifesto main {
  position: relative;
  z-index: 1;
}

.m-head {
  min-height: 80vh;
  min-height: 80svh;
  display: grid;
  align-content: end;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 8rem var(--gutter) clamp(3rem, 8vh, 5rem);
  position: relative;
  overflow: hidden;
}
.manifesto {
  --gutter: clamp(1.25rem, 6vw, 5rem);
}
.m-head canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 96%);
}
.m-head h1 {
  position: relative;
  margin: 0;
  font: 400 clamp(3.4rem, 20vw, 15rem) / 0.86 var(--display);
  letter-spacing: -0.012em;
  margin-left: -0.04em;
}
.m-head h1 span {
  display: block;
}
.m-head h1 span + span {
  font-style: italic;
}
.m-head .sub {
  position: relative;
  margin: 0;
  max-width: 27em;
  font: italic 400 clamp(1.2rem, 0.95rem + 1vw, 1.7rem) / 1.35 var(--text);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* A chapter is one solid block: its title on the left, holding still,
   and one column of prose on the right. Nothing else. */

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vh, 3rem);
  margin: 0 var(--gutter);
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(4rem, 11vh, 7.5rem);
  border-top: 1px solid var(--ink);
  scroll-margin-top: 4.5rem;
}

.c-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.num {
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--accent);
}
.c-mark .glyph {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
}
.glyph .hot {
  fill: var(--accent);
  stroke: none;
}
.c-head h2 {
  margin: 0;
  font: 400 clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem) / 0.98 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.c-body {
  max-width: 35rem;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  line-height: 1.62;
}
.c-body p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
}
.c-body p:last-child {
  margin-bottom: 0;
}
.c-body strong {
  font-weight: 620;
}
/* the one other voice: a line the author set in bold */
.c-body .statement {
  margin: 1.6em 0 1.5em;
  font: 400 clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem) / 1.08 var(--display);
  letter-spacing: -0.006em;
  text-wrap: balance;
}
.c-body .statement strong {
  font-weight: 400;
}

/* contents, beside the opening */
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li + li {
  border-top: 1px solid var(--rule);
}
.toc a {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  padding: 0.7rem 0 0.62rem;
  text-decoration: none;
  font: 400 clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem) / 1.12 var(--display);
  transition: color 0.25s ease;
}
.toc a:hover,
.toc a:focus-visible {
  color: var(--accent);
}

/* six numerals, always in reach */
.strip {
  position: fixed;
  z-index: 21;
  left: 50%;
  top: 0.72rem;
  transform: translateX(-50%);
  display: flex;
  padding: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(243, 238, 228, 0.96);
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.strip.show {
  opacity: 1;
  pointer-events: auto;
}
.strip a {
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.strip a:hover,
.strip a:focus-visible {
  color: var(--ink);
}
.strip a.on {
  background: var(--ink);
  color: var(--paper);
}

.sign {
  margin: 0 var(--gutter);
  padding: clamp(4rem, 12vh, 7rem) 0 clamp(5rem, 14vh, 8rem);
  border-top: 1px solid var(--ink);
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sign p {
  margin: 0;
}
.sign .back {
  margin-top: 2.5rem;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.sign .back:hover,
.sign .back:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

@media (min-width: 60rem) {
  .chapter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
  .c-head {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-width: 26rem;
  }
  .c-body {
    padding-top: 0.35rem;
  }
}

@media (max-width: 46rem) {
  .strip {
    top: auto;
    bottom: 0.9rem;
  }
}

@media (max-width: 34rem) {
  .bar .mark span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .bar .mark svg {
    width: 1.9em;
    height: 1.9em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .bar,
  .progress,
  .sky,
  .strip,
  .deck,
  .m-head canvas {
    display: none !important;
  }
  .story,
  .manifesto {
    background: #fff;
    color: #000;
  }
  .l,
  .w,
  .none {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .shot,
  .m-head {
    min-height: 0 !important;
    padding-block: 1rem;
  }
}