/* Berry — berryreader.com. Two tones, like the app: Paper's page and ink. */

/* Literata as small Latin web builds (Google Fonts, same OFL license, both
   axes kept), preloaded by the pages. "block" keeps text invisible for the
   moment it takes to arrive instead of flashing a fallback face first. */
@font-face {
  font-family: "Literata";
  src: url("fonts/Literata-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/Literata-Italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: block;
}

/* The other reading faces, as small Latin web builds of the same families
   (from Google Fonts, under the same OFL licenses), so a pick swaps at once.
   The page starts fetching them as the typeface section comes near. */
@font-face { font-family: "Berry Source Serif"; src: url("fonts/SourceSerif4-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Berry Merriweather"; src: url("fonts/Merriweather-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Berry Noto Sans"; src: url("fonts/NotoSans-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Berry Atkinson"; src: url("fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* The site sits on Paper's brighter page; the phones use the app's own tones. */
  --site: #D3D8D1;
  --site-deep: #C9CEC7;
  --ink: #2F322F;
  --quiet: #6E726D;
  --hair: rgba(47, 50, 47, 0.14);
  --serif: "Literata", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--site);
  color: var(--ink);
  font: 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* Light through a window, falling across the page. */
.light {
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    -24deg,
    rgba(240, 243, 238, 0) 0 70px,
    rgba(240, 243, 238, 0.55) 70px 120px,
    rgba(240, 243, 238, 0) 120px 190px
  );
  filter: blur(26px);
  opacity: 0.75;
  mask-image: radial-gradient(ellipse 70% 60% at 78% 18%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 78% 18%, #000 0%, transparent 75%);
  animation: drift 90s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-60px, 30px, 0); } }

/* The app's grain, over everything. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .light { animation: none; }
  .intro .shade { transition: none; }
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 16px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.mark .berry { width: 22px; height: 24px; }
/* Up 1px so the word sits optically centered on the berry. */
.mark .word { position: relative; top: -1px; }
/* Over a dark section the mark takes that section's ink. */
.nav.on-dark .mark { color: #B8AFAB; }

/* On narrow screens, once the hero is behind you, a frosted bar runs the full
   width behind the mark and the button, and the button's own pill steps
   back. The page shows through, softened, as it scrolls under. */
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-16px - env(safe-area-inset-top));
  /* The same 16 points below the nav as above it, so the mark and the
     button sit centered in the bar. */
  bottom: -16px;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  background: rgba(211, 216, 209, 0.72);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nav.on-dark::before { background: rgba(42, 39, 37, 0.72); border-bottom-color: rgba(184, 175, 171, 0.16); }
@media (max-width: 900px) {
  .nav.past-hero::before { opacity: 1; }
  /* Only the button on phones: no pill around it, bar or no bar, so the
     mark and the button hold the same place either way. */
  .nav .pill { padding: 0; background-color: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav::before { transition: none; }
}
.pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(211, 216, 209, 0.72);
  border: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  font-size: 14px;
}
.pill a {
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 9px;
  color: var(--quiet);
}
.pill a:hover { color: var(--ink); }
.pill a.cta {
  background: var(--ink);
  color: var(--site);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 9px 14px;
  /* A little more room between the last link and the button. */
  margin-left: 6px;
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-variation-settings: "opsz" 72;
}
h1 { font-size: clamp(44px, 7.4vw, 92px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; font-weight: 400; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--quiet); max-width: 30em; margin: 20px 0 0; }

/* ---------- Layout ---------- */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(80px, 12vw, 160px) 0; }

.hero {
  min-height: min(100svh, 940px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 60px;
}
.hero .copy { padding-bottom: 40px; }
/* Apple's badge in Berry's ink and page tones, with its clear space (a quarter of its height). */
.store { display: flex; align-items: center; gap: 18px; margin-top: 36px; }
.store a { display: block; padding: 0; }
.store img { display: block; height: 54px; width: auto; }
.note { font-size: 14px; color: var(--quiet); }

.stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split.flip .copy { order: 2; }
.hero > *, .split > * { min-width: 0; }

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}
.points h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.points p { margin: 0; font-size: 15px; color: var(--quiet); }
.points .g { color: var(--ink); margin-bottom: 14px; }

/* ---------- Phones ---------- */

.phone {
  --k: 0.78;
  width: calc(402px * var(--k) + 2 * 11px);
  height: calc(874px * var(--k) + 2 * 11px);
  padding: 11px;
  border-radius: calc(62px * var(--k) + 11px);
  --frame: #1D1F1D;
  background: var(--frame);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -30px rgba(30, 34, 30, 0.45),
    0 18px 30px -18px rgba(30, 34, 30, 0.35);
  flex: none;
}
.phone .viewport {
  width: calc(402px * var(--k));
  height: calc(874px * var(--k));
  border-radius: calc(62px * var(--k));
  overflow: hidden;
  position: relative;
}
/* The Dynamic Island, at its size on a 402-point-wide iPhone. */
.phone .viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(11px * var(--k));
  left: 50%;
  width: calc(126px * var(--k));
  height: calc(37px * var(--k));
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--frame);
}
.screen {
  --page: #C9CEC7;
  --fg: #2F322F;
  width: 402px;
  height: 874px;
  /* Zoom rather than a scale transform: layout snaps every block to whole
     pixels, so neighboring blocks meet without a hairline between them. */
  zoom: var(--k);
  background: var(--page);
  color: var(--fg);
  font: 17px/22px var(--sans);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.screen.dusk { --page: #646464; --fg: #E6E6E6; }
.screen.ink { --page: #2A2725; --fg: #B8AFAB; }
.screen {
  --tile: color-mix(in srgb, var(--fg) 10%, var(--page));
  --tile2: color-mix(in srgb, var(--fg) 17%, var(--page));
  --deep: color-mix(in srgb, var(--fg) 22%, var(--page));
  --second: color-mix(in srgb, var(--fg) 55%, var(--page));
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 -0.12'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.screen.ink::after, .screen.dusk::after { mix-blend-mode: screen; opacity: 0.18; }

.bar-top {
  /* Berry hides the status bar; the header sits where it does in the app:
     a 44-point row under the clock's band, then 12 points to the strips. */
  height: 44px;
  margin: 89px 0 12px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bar-top .clock { color: var(--second); }
.bar-top .icons { display: flex; gap: 24px; }
.bar-top .icons .g { width: 18px; }

/* Word tiles edge to edge, each its own gray (set inline, as the app does);
   the chosen one solid ink. The second strip overlaps the first by a point
   so scaling never opens a seam between them. */
.tabs { display: flex; height: 52px; position: relative; }
.tabs + .tabs { margin-top: -1px; height: 53px; }
.tabs span { display: flex; align-items: center; padding: 0 16px; white-space: nowrap; flex: none; }
.tabs span:first-child { padding-left: 24px; }
.tabs span.on { background: var(--fg); color: var(--page); }

/* A row: kind, title, and author on the page, then a block at the right edge
   with how far through it is. */
.rows .row {
  display: flex;
  min-height: 84px;
}
.rows .row .what {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--deep);
}
.rows .row .g { flex: none; }
.rows .row .what div { min-width: 0; }
.rows .row b, .rows .row i {
  display: block;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rows .row b { margin-bottom: 2px; }
.rows .row i { color: var(--second); }
.rows .row .done {
  flex: none;
  width: 84px;
  display: grid;
  place-items: center;
  /* The kinds strip's next step after Documents, as in the app (LibraryView.statusTone). */
  background: color-mix(in srgb, var(--fg) 5%, var(--page));
  border-bottom: 1px solid var(--page);
  font-variant-numeric: tabular-nums;
}

.page {
  padding: 0 24px;
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 27px;
  font-variation-settings: "opsz" 12;
}
.page .head { padding-top: 121px; line-height: 32px; }
.page .text {
  margin-top: 49px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.page .text p { margin: 0; text-indent: 1.3em; }
.page .text p:first-child { text-indent: 0; }
.page .pct {
  position: absolute;
  left: 0; right: 0; bottom: 30px;
  text-align: center;
  font: 15px var(--sans);
  color: var(--second);
}

.time .rowt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  background: var(--tile);
  border-bottom: 1px solid var(--page);
}
.time .rowt em { font-style: normal; color: var(--second); margin-left: 8px; }
.time .rowt.on { background: var(--fg); color: var(--page); }
.time .rowt.on em { color: color-mix(in srgb, var(--page) 45%, var(--fg)); }
.time .gap { height: 52px; }

/* ---------- Display section ---------- */

.modes {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 80px);
}
.modes figure { margin: 0; text-align: center; }
.modes figcaption { margin-top: 18px; font-size: 14px; color: var(--quiet); }
.modes .phone { --k: 0.62; }

.meters {
  max-width: 820px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
}
.meter .label { font-size: 14px; color: var(--quiet); margin-bottom: 8px; display: flex; justify-content: space-between; }
/* As in the app: a 1-point line of page between blocks. */
.meter .blocks { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; height: 46px; background: var(--site-deep); }
.meter .blocks > span { background: color-mix(in srgb, var(--ink) 10%, var(--site-deep)); }
.meter .blocks > span.lit { background: var(--ink); }
.meter .blocks > span.plate { background: var(--ink); color: var(--site-deep); display: grid; place-items: center; }

/* ---------- Page length ---------- */

.lenpage {
  position: absolute;
  left: 24px;
  right: 24px;
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 27px;
  font-variation-settings: "opsz" 12;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* The page goes on past the last line, so that line is justified too. */
.lenpage p { margin: 0; text-align-last: justify; }
.lengths {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
  margin-top: clamp(48px, 6vw, 80px);
}
.lengths figure { margin: 0; text-align: center; }
.lengths figcaption { margin-top: 18px; font-size: 14px; color: var(--quiet); }
.lengths .phone { --k: 0.56; }
/* Who wrote the pages above, like the passage's credit in the type section. */
.credit { margin: 40px 0 0; text-align: center; font-size: 14px; color: var(--quiet); }

/* ---------- Typefaces ---------- */

/* Berry's font rows: the chosen face lit in ink, the rest on tiles, with the
   page showing through as the line between them. Each name is a mask of the
   name set in its own face, tinted by the row. */
.faces {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 1px;
  background: var(--site-deep);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(30, 34, 30, 0.45);
}
.faces button {
  all: unset;
  box-sizing: border-box;
  height: 52px;
  cursor: pointer;
  background: color-mix(in srgb, var(--ink) 10%, var(--site-deep));
  --tint: var(--ink);
}
.faces button:hover { background: color-mix(in srgb, var(--ink) 16%, var(--site-deep)); }
.faces button[aria-pressed="true"] { background: var(--ink); --tint: var(--site-deep); cursor: default; }
.faces button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.faces button[aria-pressed="true"]:focus-visible { outline-color: var(--site-deep); }
.faces button span {
  display: block;
  height: 100%;
  background: var(--tint);
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask: var(--name) left center / auto 100% no-repeat;
  mask: var(--name) left center / auto 100% no-repeat;
}
.sample {
  font-family: var(--serif);
  font-size: clamp(19px, 1.75vw, 24px);
  line-height: 1.5;
  font-weight: 350;
  letter-spacing: -0.01em;
  margin: 28px 0 0;
  max-width: 22em;
  text-wrap: pretty;
}
/* Room for four lines in any face, so nothing shifts when the face changes. */
.sample .words { display: block; min-height: calc(4 * 1.5em); font-family: var(--face, var(--serif)); }
#type.loading .words { opacity: 0.45; }
.sample cite { display: block; margin-top: 14px; font: 14px var(--sans); color: var(--quiet); font-style: normal; }

/* ---------- Night ---------- */

.night {
  --site: #2A2725;
  --ink: #B8AFAB;
  --quiet: #8A827E;
  --hair: rgba(184, 175, 171, 0.16);
  background: #2A2725;
  color: #B8AFAB;
  border-radius: var(--radius);
  margin: 0 var(--gutter);
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.night::before {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  right: -25vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(200, 160, 120, 0.12), transparent 60%);
  pointer-events: none;
}

/* ---------- Plain ---------- */

.plain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
.plain div { background: color-mix(in srgb, var(--ink) 7%, var(--site)); padding: 28px 24px 30px; }
.plain h4 { margin: 18px 0 6px; font-size: 16px; font-weight: 600; }
.plain p { margin: 0; color: var(--quiet); font-size: 15px; }

.formats {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.formats span {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--quiet);
}

/* ---------- FAQ ---------- */

.faq { max-width: 860px; }
.faq h2 { margin-bottom: 40px; }
.faq details { border-top: 1px solid var(--hair); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.015em;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .g { flex: none; margin-top: 6px; }
.faq details[open] summary .g { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--quiet); max-width: 40em; }

/* ---------- Footer ---------- */

footer { padding: 80px 0 48px; }
footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
/* The sign-off at the footer's own size, in ink above the quieter line. */
footer .big { font-size: 14px; line-height: 1.5; }
footer p { margin: 8px 0 0; color: var(--quiet); font-size: 14px; }
footer p a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
footer p a:hover { color: var(--ink); }
footer nav { display: flex; gap: 20px; font-size: 14px; color: var(--quiet); }
footer nav a { text-decoration: none; }

/* ---------- Pixel glyphs ---------- */

.g { display: inline-block; vertical-align: middle; line-height: 0; }
.g svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; fill: currentColor; }

/* ---------- Small screens ---------- */

/* Line breaks only for phones. */
br.narrow { display: none; }

@media (max-width: 900px) {
  /* Every headline and the line under it centered on narrow screens. */
  main h2, main .lede { text-align: center; }
  /* The library's three points inset like the tiles' text further down. */
  .points > div { padding: 0 24px; }
  main .lede { margin-left: auto; margin-right: auto; }
  .store { justify-content: center; }
  br.wide { display: none; }
  .hero, .split { grid-template-columns: 1fr; }
  .split.flip .copy { order: 0; }
  .hero { padding-top: 40px; min-height: 0; }
  .points { grid-template-columns: 1fr; }
  .plain { grid-template-columns: 1fr 1fr; }
  .meters { grid-template-columns: 1fr; }
  /* Rows of phones become carousels of full-size phones: swipe sideways,
     each snaps to the middle, the neighbors peek in at the edges. */
  .modes, .lengths {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Room below for the phones' shadows, which the scroller would clip. */
    padding: 8px calc(50% - (402px * 0.78 + 22px) / 2) 56px;
    margin-bottom: -40px;
  }
  .modes::-webkit-scrollbar, .lengths::-webkit-scrollbar { display: none; }
  .modes figure, .lengths figure { scroll-snap-align: center; flex: none; }
  .modes .phone, .lengths .phone { --k: 0.78; }
  .pill a:not(.cta) { display: none; }
  .pill a.cta { margin-left: 0; }
}
@media (max-width: 520px) {
  .modes, .lengths { padding: 8px calc(50% - (402px * 0.7 + 22px) / 2) 56px; }
  .modes .phone, .lengths .phone { --k: 0.7; }
  br.narrow { display: inline; }
  .plain { grid-template-columns: 1fr; }
  .phone { --k: 0.7; }
}

/* ---------- Leaves in the window ---------- */

/* Sunlight through a window, with branches moving outside it. The canvas
   draws only the shadow, small; the blur and the multiply do the rest. */
.intro {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  /* Sideways only: the shade runs on below the section and fades out. */
  overflow-x: clip;
}
.intro .shade {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: calc(106% + 50vh);
  filter: blur(14px);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  pointer-events: none;
}
.intro.seen .shade { opacity: 1; }
.intro h1 {
  position: relative;
  text-align: center;
  max-width: 15em;
  font-size: clamp(36px, 5.2vw, 72px);
  text-wrap: balance;
}
.intro h1 em { font-style: italic; }