/* ==========================================================================
   Daniel Silva · writing
   ========================================================================== */

/* Fonts: self-hosted, SIL Open Font License (see the OFL files next to them) */
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}


/* Colors and theme ------------------------------------------------------- */

:root {
  --paper: #faf6ef;
  --paper-raised: #f3ece1;
  --ink: #221c18;
  --ink-soft: #685e55;
  --rule: #e3d9ca;
  --accent: #a6462a;
  --sun: #f4a261;
  --sun-opacity: 0.5;
  --selection: rgba(166, 70, 42, 0.18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16120f;
    --paper-raised: #1f1915;
    --ink: #ece4d8;
    --ink-soft: #a5998c;
    --rule: #332b25;
    --accent: #ea8a5c;
    --sun: #c2582a;
    --sun-opacity: 0.32;
    --selection: rgba(234, 138, 92, 0.25);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #16120f;
  --paper-raised: #1f1915;
  --ink: #ece4d8;
  --ink-soft: #a5998c;
  --rule: #332b25;
  --accent: #ea8a5c;
  --sun: #c2582a;
  --sun-opacity: 0.32;
  --selection: rgba(234, 138, 92, 0.25);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Base ------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* No grey flash when a link or button is tapped on a phone (see "Hover and tap" below). */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--selection);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.icon--flip {
  transform: scaleX(-1);
}

/* Page frame and the sun glow behind it ---------------------------------- */

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* hides the glow's overflow without making the page scrollable sideways */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

main {
  flex: 1 0 auto;
}

.sun {
  position: absolute;
  z-index: -1;
  top: -16rem;
  right: -15rem;
  width: clamp(36rem, 90vw, 60rem);
  height: clamp(36rem, 90vw, 60rem);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sun), transparent);
  opacity: var(--sun-opacity);
  pointer-events: none;
}

.page--piece .sun {
  top: -24rem;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: clamp(34rem, 95vw, 54rem);
  height: clamp(34rem, 95vw, 54rem);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  padding-top: max(1.25rem, env(safe-area-inset-top));
}

/* The sunrise mark beside the site's name, with the author's name below it on the home pages. */
.wordmark {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.2s;
}

.wordmark-mark {
  width: 1.45rem;
  height: auto;
  color: var(--accent);
}

/* Hangs just below the name without making the header taller, so the header stays
   exactly where it is when the name fades away on the reading pages. */
.wordmark-author {
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 0;
  grid-column: 2;
  white-space: nowrap;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ES | EN switch, shown when the page exists in the other language. */
.lang-switch {
  display: flex;
  padding: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.lang-option {
  display: grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.05rem;
  padding: 0 0.5rem 0 calc(0.5rem + 0.14em);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.lang-option[aria-current] {
  background: var(--ink);
  color: var(--paper);
}

/* Small phones: tighten the header so the name and buttons keep their margins. */
@media (max-width: 22.5rem) {
  .site-header {
    gap: 0.5rem;
  }

  .wordmark {
    column-gap: 0.45rem;
    font-size: 1.15rem;
  }

  .wordmark-mark {
    width: 1.25rem;
  }

  .header-actions {
    gap: 0.4rem;
  }
}

/* Small labels and buttons ----------------------------------------------- */

.eyebrow,
.award,
.section-label {
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

.award {
  text-wrap: balance;
}

.award .icon {
  margin-right: 0.5em;
  vertical-align: -0.15em;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.6em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.button .icon {
  transition: transform 0.2s;
}

.button--quiet {
  border-color: var(--rule);
  background: transparent;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}

/* Home: featured piece ---------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 6rem);
  min-height: calc(100svh - 6rem);
  padding: 2rem var(--gutter) 5rem;
}

/* Same width as the header, so the title lines up with the name above it. */
.hero-inner {
  width: 100%;
  max-width: calc(72rem - 2 * var(--gutter));
  margin: 0 auto;
}

.hero-title {
  max-width: 6.5em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.2rem + 9vw, 8rem);
  overflow-wrap: break-word;
  font-weight: 340;
  line-height: 0.94; /* same as .piece-title, so the title lines up as it glides between them */
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero-teaser {
  max-width: 24em;
  margin: 1.75rem 0 2.5rem;
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.hero-time {
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-translation {
  margin: 1.75rem 0 0;
}

.hero-translation .text-link {
  color: var(--accent);
  font-weight: 600;
}

/* Link to the piece in the other language, under the title. */
.piece-translation {
  margin: 1.6rem 0 0;
}

.piece-translation a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.15em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

/* Home: list of other pieces (shows once there is more than one) -------- */

.archive {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
}

.section-label {
  margin-bottom: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.piece-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.piece-card {
  display: grid;
  gap: 0.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.piece-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  transition: color 0.2s;
}

.piece-card-teaser {
  color: var(--ink-soft);
  font-style: italic;
}

.piece-card-meta {
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Piece ------------------------------------------------------------------- */

.piece {
  padding: 0 var(--gutter);
}

.piece-header {
  max-width: 46rem;
  margin: 0 auto;
  padding-top: clamp(2.5rem, 8vw, 5rem);
  text-align: center;
}

.piece-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.6rem + 6.5vw, 6rem);
  font-weight: 340;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.piece-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.7em;
  margin: 1.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* On phones, reading time and copyright go on separate lines instead of wrapping mid-way. */
@media (max-width: 30rem) {
  .piece-meta {
    flex-direction: column;
    gap: 0.3em;
  }

  .piece-meta > [aria-hidden] {
    display: none;
  }
}

/* Side lines line up with the horizon drawn in the sunrise mark. */
.divider {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 2.75rem auto 3rem;
  color: var(--accent);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-bottom: 3px;
  background: var(--rule);
}

.end-mark {
  display: flex;
  justify-content: center;
  margin: 3.5rem auto;
  color: var(--accent);
}

/* The text itself: book-style paragraphs with first-line indents. */
.prose {
  max-width: 32em;
  margin: 0 auto;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  line-height: 1.75;
  text-wrap: pretty;
  hanging-punctuation: first;
}

.prose p {
  margin: 0;
}

.prose p + p {
  text-indent: 1.5em;
}

.prose > p:first-child::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

.prose hr {
  margin: 2.2em 0;
  border: 0;
  color: var(--accent);
  text-align: center;
}

.prose hr::before {
  content: "* * *";
  letter-spacing: 0.6em;
}

.prose hr + p,
.prose h2 + p {
  text-indent: 0;
}

.prose h2 {
  margin: 2.5em 0 1em;
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 400;
  text-align: center;
}

.prose blockquote {
  margin: 1.5em 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--rule);
  font-style: italic;
}

/* Copyright notice and the links after the piece */
.copyright {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.6rem clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: 1.25rem;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}

.copyright-title {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.copyright p {
  margin: 0 0 0.75rem;
}

.copyright p:last-child {
  margin-bottom: 0;
}

.piece-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 36rem;
  margin: 2rem auto 0;
  padding-bottom: 4.5rem;
}

/* Reading progress bar along the top edge */
.progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Copy protection: no selecting, long-press menu or dragging of the text. */
[data-protected] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 404 --------------------------------------------------------------------- */

.not-found {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(4rem, 15vh, 8rem) var(--gutter);
}

.not-found-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 4.5rem);
  font-weight: 340;
  line-height: 1;
  letter-spacing: -0.02em;
}

.not-found p:not(.eyebrow) {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.not-found .not-found-other {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}

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

.site-footer {
  padding: 2rem var(--gutter);
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
}

.site-footer p {
  max-width: 34rem;
  margin: 0 auto 0.35rem;
}

.site-footer-copyright {
  color: var(--ink);
  font-weight: 500;
}

/* Toast message (e.g. "Link copied") ------------------------------------- */

.toast {
  position: fixed;
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
  left: 50%;
  z-index: 60;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Hover and tap ------------------------------------------------------------- */
/* Hover colours only on devices with a mouse or trackpad, so they don't stay stuck after a
   tap on a phone. A tap gets a brief, soft dim instead. */

@media (hover: hover) {
  .wordmark:hover,
  a.lang-option:hover,
  .text-link:hover,
  .piece-card:hover .piece-card-title {
    color: var(--accent);
  }

  .theme-toggle:hover {
    border-color: var(--ink-soft);
  }

  .button:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--paper);
  }

  .button:hover .icon {
    transform: translateX(3px);
  }

  .button--quiet:hover,
  .piece-translation a:hover {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent);
  }
}

.wordmark:active,
.theme-toggle:active,
a.lang-option:active,
.button:active,
.text-link:active,
.piece-translation a:active,
.piece-card:active {
  opacity: 0.7;
}

/* Gentle entrance --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > *,
  .piece-header > * {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .hero-inner > :nth-child(2),
  .piece-header > :nth-child(2) {
    animation-delay: 0.1s;
  }

  .hero-inner > :nth-child(3),
  .piece-header > :nth-child(3) {
    animation-delay: 0.2s;
  }

  .hero-inner > :nth-child(4),
  .piece-header > :nth-child(4) {
    animation-delay: 0.3s;
  }

  .hero-inner > :nth-child(5),
  .piece-header > :nth-child(5) {
    animation-delay: 0.4s;
  }

  .sun {
    animation: dawn 2.4s ease-out backwards;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
  }
}

@keyframes dawn {
  from {
    opacity: 0;
    transform: translateY(4rem) scale(0.9);
  }
}

/* The entrance plays when someone first opens the site. Moving between its pages, the new
   page simply fades in (see "Quiet page changes"). */
.is-arriving .hero-inner > *,
.is-arriving .piece-header > *,
.is-arriving .sun {
  animation: none;
}

/* Quiet ending ------------------------------------------------------------ */
/* As the reader reaches the end of a piece, the sun in the end mark sinks slowly below its
   horizon and is gone, leaving only the line. site.js adds .is-sunset once the mark is well
   into view, once per visit. The sun is drawn in its own frame that ends at the horizon, so it
   disappears behind the line (see _includes/horizon.html). With "reduce motion" on, it fades
   away where it is instead. */

.end-mark .horizon-sun {
  transition: transform 2.8s cubic-bezier(0.45, 0, 0.55, 1) 0.4s, opacity 2.8s ease 0.4s;
}

.end-mark.is-sunset .horizon-sun {
  transform: translateY(11.5px);
}

@media (prefers-reduced-motion: reduce) {
  .end-mark.is-sunset .horizon-sun {
    opacity: 0;
    transform: none;
  }
}

/* Quiet page changes ------------------------------------------------------- */
/* Pages, and the light/dark switch, fade softly into each other as one whole image.
   The header is identical on every page, so it holds still and only what differs
   fades: the author's name leaving on the reading pages and returning on the home
   pages, or the ES | EN marker changing language. Nothing is animated on its own,
   which keeps the fade the same in Safari and Chrome, and with "reduce motion"
   turned on (a dissolve has no movement). Other browsers simply change pages. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

/* The moment between two pages shows the paper, never a blank screen. */
::view-transition {
  background-color: var(--paper);
}

/* Moving between pages ----------------------------------------------------- */
/* What stays the same holds still, and what changes never overlaps:
   - From a home page to a piece, and back: the old page fades away while the title and the
     glow behind it stay where they were, then both glide into their new places (the title
     word by word, shrinking or growing), and as they settle the rest of the page appears.
   - Switching language: the header, title and glow hold still; the old text fades away, and
     only then does the new text appear.
   It's done with ordinary animations (early.js), so it looks the same in Safari, Chrome and
   other browsers. */

.title-word {
  display: inline-block;
}

/* The typeface reshapes its letters slightly at each size. Both big titles share one letter
   shape per screen size, so the title stays the very same drawing while it glides between
   them; phones keep the shape they had, larger screens one between the two sizes. */
.hero-title,
.piece-title {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 112;
}

@media (max-width: 47.99rem) {
  .hero-title,
  .piece-title {
    font-variation-settings: "opsz" 50;
  }
}

.is-holding::view-transition-old(root),
.is-holding::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* A new page still waiting for its fonts keeps the previous one on screen: the fade holds
   still until early.js removes .is-waiting, a second at most. */
.is-waiting::view-transition-group(root),
.is-waiting::view-transition-image-pair(root),
.is-waiting::view-transition-old(root),
.is-waiting::view-transition-new(root) {
  animation-play-state: paused;
}

/* Until the title and the glow are placed where they were on the previous page, neither shows.
   The glow then travels with the title instead of fading. */
.is-placing :is(.title-word, .sun) {
  visibility: hidden;
}

/* Held back at once, then faded in (the fade only applies to the reveal): everything that
   changes from one page to the next. The author's name is the same on both home pages, so it
   stays when switching language; a title stays unless the other version's title differs. */
.is-holding:not(.is-revealing) :is(.hero-inner > :not(.hero-title), .archive,
  .piece-header > :not(.piece-title), .piece-header ~ *, .not-found, .site-footer),
.is-holding:not(.is-switching):not(.is-revealing) .wordmark-author,
.is-new-title:not(.is-revealing) :is(.hero-title, .piece-title) {
  opacity: 0;
}

.is-revealing :is(.hero-inner > *, .archive, .piece-header > *, .piece-header ~ *, .not-found,
  .site-footer, .wordmark-author) {
  transition: opacity 0.45s ease;
}

/* Browsers without page fades: pages of the site fade in instead of appearing abruptly. */
.is-fading-in .page {
  animation: page-in 0.35s ease both;
}

@keyframes page-in {
  from {
    opacity: 0;
  }
}

/* Printing is turned off for the writing: only a notice is printed. ------ */

.print-notice {
  display: none;
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .sun,
  .site-header,
  .site-footer,
  .progress,
  .toast,
  .divider,
  .end-mark,
  .piece-nav,
  [data-protected] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .print-notice {
    display: block;
    max-width: 34rem;
    margin: 2rem auto;
    font-size: 1.1rem;
    text-align: center;
  }
}