/* =====================================================================
   A Splash of Lucidity — site styles
   A page bisected by a chasm: monochrome left, color right.
   ===================================================================== */

/* Metric-matched fallbacks. Measured against the real webfonts, so the
   text the browser paints before Fraunces/Newsreader arrive occupies the
   same space — the swap no longer resizes or reflows the page.
   size-adjust = webfont width / fallback width; the ascent and descent
   overrides are the webfont's own metrics divided by that same ratio. */
/* Fraunces is a variable font, so each weight and style needs its own
   ratio — one size-adjust for the whole family would over-correct. */
@font-face {
  font-family: "Fraunces Fallback";
  font-style: normal;
  font-weight: 300 390;
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 84.19%;
  ascent-override: 116.16%;
  descent-override: 30.29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces Fallback";
  font-style: normal;
  font-weight: 391 700;
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 87.65%;
  ascent-override: 111.58%;
  descent-override: 29.09%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic"), local("Liberation Serif Italic");
  size-adjust: 83.16%;
  ascent-override: 117.61%;
  descent-override: 30.66%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  font-style: normal;
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 102.40%;
  ascent-override: 71.78%;
  descent-override: 25.88%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic"), local("Liberation Serif Italic");
  size-adjust: 93.95%;
  ascent-override: 78.23%;
  descent-override: 28.21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Mono Fallback";
  /* local() matches PostScript/full names, not family names */
  src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVuSansMono");
  size-adjust: 99.66%;
  ascent-override: 102.35%;
  descent-override: 30.10%;
  line-gap-override: 0%;
}

:root {
  --bone: #f5f2ea;
  --bone-deep: #ece8dd;
  --ink: #142838;                /* blue-black: reads near-black on the gray half */
  --ink-soft: #1e4763;           /* body copy — deep ocean ink */
  --graphite: #35678c;           /* labels and secondary text — mid ocean */
  --gray-stroke: #585d63;        /* a true gray, for the grasshopper's gray-side fallback */
  --hairline: rgba(23, 25, 28, 0.14);

  --ocean: #2f6489;
  --ocean-deep: #1a3e57;
  --ocean-light: #5fa6cb;
  --ink-ocean: #1f4663;          /* dark blue-ink: grays on the left, blue on the right */
  --amber: #c89b5f;

  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-mono: "JetBrains Mono", "Mono Fallback", Menlo, monospace;

  --nav-h: 4rem;
  --crack-w: 110px;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 252, 0.6), transparent 60%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(95, 166, 203, 0.35); }

a { color: var(--ocean); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -3rem; left: 1rem;
  z-index: 100;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- the chasm ---------- */

.chasm {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* left half: the monochrome world */
.chasm-gray {
  position: absolute;
  inset: 0 50% 0 0;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  background: rgba(126, 128, 130, 0.04);
}

/* fallback when backdrop-filter is unsupported: a gray film so the split still reads */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  .chasm-gray { background: rgba(122, 124, 124, 0.16); }
}

/* right half: the mirror of the left. Where the left drains colour with
   grayscale(1), this actively pushes it — whatever scrolls behind gets
   more saturated — over a warm + blue wash. */
.chasm-wash {
  position: absolute;
  inset: 0 0 0 50%;
  -webkit-backdrop-filter: saturate(2.1) contrast(1.04);
  backdrop-filter: saturate(2.1) contrast(1.04);
  background:
    linear-gradient(112deg,
      rgba(95, 166, 203, 0.26),
      rgba(200, 155, 95, 0.20) 42%,
      rgba(47, 100, 137, 0.24) 100%);
}

/* light leaking from the fissure */
.chasm-leak {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 150px;
  transform: translateX(-50%);
  background:
    radial-gradient(38% 26% at 50% 18%, rgba(95, 166, 203, 0.20), transparent 70%),
    radial-gradient(34% 30% at 50% 58%, rgba(95, 166, 203, 0.15), transparent 70%),
    radial-gradient(40% 24% at 50% 88%, rgba(95, 166, 203, 0.18), transparent 70%),
    linear-gradient(to right, transparent, rgba(95, 166, 203, 0.10) 50%, transparent);
}

/* the crack itself */
.chasm-crack {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--crack-w);
  height: 100%;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 3px rgba(95, 166, 203, 0.30))
    drop-shadow(0 0 12px rgba(95, 166, 203, 0.18));
}

/* The seam runs straight through body text, so it stays faint and
   see-through — readers found the darker line hard to read across.
   The glow carries the "lit fissure" idea; the ink just gives it an edge. */
.crack-glow-wide { stroke: var(--ocean-light); stroke-width: 6;   opacity: 0.14; fill: none; }
.crack-glow-mid  { stroke: var(--ocean-light); stroke-width: 3;   opacity: 0.26; fill: none; }
.crack-ink       { stroke: #0d1216;            stroke-width: 1;   opacity: 0.30; fill: none; }

/* ---------- nav ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 242, 234, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  height: var(--nav-h);
}

.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-links a:hover { color: var(--ocean); border-bottom-color: var(--ocean-light); }

/* ---------- sections (shared) ---------- */

main { position: relative; }

section { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

h1, h2 { font-family: var(--font-display); font-weight: 400; margin: 0; }

.sec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.9rem;
}

.centered-h { text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-style: italic; color: var(--ink-ocean); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(5rem, 14vw, 11rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.split-left  { justify-self: end;   text-align: right; max-width: 30rem; }
.split-right { justify-self: start; text-align: left;  max-width: 30rem; }

/* ---------- hero ---------- */

/* the cover is the hero image: the whole opening composition is sized to
   sit within one screen, so the book is never cut off by the fold */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100svh - var(--nav-h));
  min-height: 33rem;              /* floor for very short windows */
  /* tight vertical rhythm here buys height for the cover, which is
     what the column gives its leftover space to */
  padding: clamp(0.75rem, 1.6vh, 1.15rem) 1.5rem clamp(1rem, 2vh, 1.4rem);
  text-align: center;
}

.title-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-top: 1.7rem;          /* headroom for the grasshopper's arc */
}

.title {
  font-size: clamp(2.5rem, 6.6vw, 5rem);
  font-weight: 380;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink-ocean);
  text-wrap: balance;
}

.subtitle {
  margin: clamp(0.8rem, 1.8vh, 1.25rem) auto 0;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.5vw, 0.8rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--graphite);
}

.sub-dot { margin: 0 0.1em 0 -0.14em; color: var(--ocean); }

/* min-height:0 lets the cover shrink inside the flex column on short
   screens instead of pushing the buttons off-screen */
.hero-cover {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: clamp(1rem, 2.4vh, 1.75rem) auto 0;
}

/* the cover takes whatever height the column leaves it, so the whole
   book is always visible above the fold */
.hero-cover img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: min(86vw, 470px);
  border: 1px solid rgba(23, 25, 28, 0.16);
  box-shadow:
    0 1px 2px rgba(23, 25, 28, 0.12),
    0 22px 55px -14px rgba(23, 25, 28, 0.38);
}

.cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 7vw, 5.5rem);   /* the crack passes between the two buttons */
  margin-top: clamp(1.1rem, 2.6vh, 1.85rem);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-solid {
  background: var(--ocean-deep);
  color: var(--bone);
  border: 1px solid var(--ocean-deep);
}
.btn-solid:hover {
  background: var(--ocean);
  border-color: var(--ocean);
  box-shadow: 0 6px 22px -8px rgba(47, 100, 137, 0.6);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(23, 25, 28, 0.4);
}
.btn-ghost:hover { color: var(--ocean); border-color: var(--ocean); }

/* ---------- availability ---------- */

.availability { padding: 6.5rem 0; }

.availability h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-style: italic; color: var(--ink-ocean); }

.availability p { color: var(--ink-soft); margin: 1rem 0 0; }

.quiet-contact { font-size: 1.02rem; }

.inline-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ocean);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 100, 137, 0.4);
  padding-bottom: 0.15rem;
}
.inline-link:hover { color: var(--ocean-deep); border-bottom-color: var(--ocean-deep); }

/* ---------- enter the dream ---------- */

.dream { padding: 6.5rem 0 8.5rem; }

.dream-open { align-items: center; }

.inscription-art {
  justify-self: end;
  margin: 0;
  width: clamp(200px, 26vw, 300px);
}

.inscription-art img {
  width: 100%;
  border: 1px solid rgba(23, 25, 28, 0.16);
  box-shadow: 0 14px 38px -14px rgba(23, 25, 28, 0.4);
}

.inscription-text {
  justify-self: start;
  max-width: 34rem;
}

.inscription-line {
  max-width: 32ch;
  margin: 0;
}

.inscription-line p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  line-height: 1.45;
  color: var(--ocean);
  text-shadow: 0 0 22px rgba(95, 166, 203, 0.35);
  text-wrap: balance;
}

/* ---- the passage, set as a composition across the whole page ----
   Each line is a block offset by its own --x from the left edge of the
   centred container. The container and the chasm are both centred, so
   --x below 50% puts a line in the monochrome half and above 50% puts
   it in the colour half. */

.poem {
  max-width: 72rem;
  margin: clamp(4rem, 8vh, 6rem) auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.poem p { margin: 0; }

.pline {
  --xx: calc(var(--x, 0%) * var(--x-scale, 1));
  display: block;
  width: fit-content;
  max-width: calc(100% - var(--xx));
  margin-left: var(--xx);
}

.xl {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--ocean);
  text-shadow: 0 0 22px rgba(95, 166, 203, 0.3);
}

.lg {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  line-height: 1.42;
  color: var(--ocean-deep);
}

.md {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

.sm {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  line-height: 1.95;
  color: var(--graphite);
}

/* sub-degree tilts, so the block reads hand-set rather than typed */
.tA { transform: rotate(-0.7deg); transform-origin: left center; }
.tB { transform: rotate(0.55deg); transform-origin: left center; }
.tC { transform: rotate(-0.4deg); transform-origin: left center; }

.gap-s { margin-top: 0.8rem; }
.gap-m { margin-top: 1.9rem; }

/* a hairline that trails off — a breath between movements */
.breath {
  display: block;
  width: 8.5rem;
  height: 1px;
  margin: 2.4rem 0 2.4rem calc(var(--x, 0%) * var(--x-scale, 1));
  background: linear-gradient(to right, rgba(47, 100, 137, 0.55), transparent);
}

/* narrower windows: pull the choreography in so long lines still fit */
@media (max-width: 1180px) {
  .poem { --x-scale: 0.6; }
}

/* ---------- reader notes ---------- */

.notes {
  position: relative;
  padding: 5.5rem 0 7rem;
}

/* the color half of this section runs deeper than the page-wide wash,
   so the split reads hardest here */
.notes::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 30% 45%, rgba(95, 166, 203, 0.22), transparent 72%),
    linear-gradient(120deg,
      rgba(47, 100, 137, 0.16),
      rgba(200, 155, 95, 0.16) 55%,
      rgba(95, 166, 203, 0.13));
  /* fade the top and bottom so it reads as a field of color, not a box */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.notes > h2,
.notes-grid { position: relative; z-index: 1; }

/* each note is centred on the page, so the chasm runs through the middle
   of every line: the words left of the seam are grayscaled by the overlay,
   the words right of it keep their blue */
.notes-grid {
  max-width: 48rem;
  margin: 3.5rem auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.note {
  margin: 0 auto;
  text-align: center;
}

.note + .note { margin-top: clamp(3.5rem, 7vh, 5.5rem); }

.note-left  { max-width: 42rem; }
.note-right { max-width: 34rem; }

.note blockquote { margin: 0; }

.note blockquote p {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.1rem, 1.55vw, 1.22rem);
  line-height: 1.75;
  color: var(--ocean);
  text-wrap: pretty;
}

.note figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}

.note figcaption cite { font-style: normal; color: var(--ocean-deep); }

/* scattered letters catch the light — on the colour half they read as
   flecks of blue and amber, on the monochrome half they just go gray */
.lit-a { color: var(--ocean-light); }
.lit-b { color: var(--amber); }
.lit-c { color: var(--ocean); font-style: normal; }

/* ---------- excerpt ---------- */

/* ---------- updates ---------- */

.updates {
  padding: 6rem 1.5rem 8rem;
  text-align: center;
}

.updates-copy {
  max-width: 44ch;
  margin: 1.4rem auto 2.4rem;
  color: var(--ink-soft);
}

.signup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  max-width: 30rem;
  margin: 0 auto;
}

.signup input {
  flex: 1 1 14rem;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 252, 0.7);
  border: 1px solid rgba(23, 25, 28, 0.35);
  border-radius: 2px;
}

.signup input::placeholder { color: var(--graphite); opacity: 1; }

/* honeypot: off-screen for everyone, including screen readers (the field
   is aria-hidden), so only bots that parse the HTML will fill it */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup input:focus-visible { outline-offset: 1px; }

.form-note {
  min-height: 1.5rem;
  margin: 1.1rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ocean);
}

/* a letter that has come loose and is falling off the page. z-index sits
   under the chasm (40) so the overlay still grays it on the left half,
   and under the sticky header (30) so it passes behind the nav. */
.falling-letter {
  position: fixed;
  z-index: 25;
  margin: 0;
  padding: 0;
  white-space: pre;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- mail-link fallback toast ---------- */

.mail-toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  z-index: 80;
  max-width: calc(100vw - 2.5rem);
  margin: 0;
  padding: 0.85rem 1.3rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 10px 30px -10px rgba(23, 25, 28, 0.5);
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

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

/* ---------- footer ---------- */

.site-foot {
  padding: 4.5rem 1.5rem 5.5rem;
  text-align: center;
  border-top: 1px solid var(--hairline);
}

.foot-contact {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.foot-links { margin: 1.4rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; }
.foot-links a { color: var(--ocean); text-decoration: none; border-bottom: 1px solid rgba(47, 100, 137, 0.35); padding-bottom: 0.12rem; }
.foot-links a:hover { color: var(--ocean-deep); }
.foot-dot { margin: 0 0.8rem; color: var(--graphite); }

.foot-fine {
  margin: 2.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ---------- misbehaving letters ---------- */

/* letters wrap only between words, never inside them */
.word {
  display: inline-block;
  white-space: nowrap;
}

.ltr {
  display: inline-block;
  will-change: transform;
}

.mb-drift { animation: mbDrift 1.9s cubic-bezier(0.34, 0.05, 0.4, 1); }
@keyframes mbDrift {
  0%   { transform: none; }
  38%  { transform: translateY(-0.17em) rotate(-3.5deg); }
  72%  { transform: translateY(0.025em) rotate(0.6deg); }
  100% { transform: none; }
}

.mb-fall { animation: mbFall 2s cubic-bezier(0.4, 0.05, 0.35, 1); }
@keyframes mbFall {
  0%   { transform: none; }
  28%  { transform: translateY(0.21em) rotate(3deg); }
  55%  { transform: translateY(0.21em) rotate(2.4deg); }
  86%  { transform: translateY(-0.03em) rotate(-0.4deg); }
  100% { transform: none; }
}

.mb-waver { animation: mbWaver 1.7s ease-in-out; }
@keyframes mbWaver {
  0%   { transform: none; }
  22%  { transform: skewX(9deg); }
  46%  { transform: skewX(-7deg); }
  68%  { transform: skewX(4deg); }
  86%  { transform: skewX(-2deg); }
  100% { transform: none; }
}

.mb-ghost { animation: mbGhost 2.1s ease-in-out; }
@keyframes mbGhost {
  0%   { text-shadow: none; }
  30%  { text-shadow: -0.07em 0 0 rgba(95, 166, 203, 0.75), 0.07em 0 0 rgba(200, 155, 95, 0.55); opacity: 0.88; }
  62%  { text-shadow: -0.035em 0 0 rgba(95, 166, 203, 0.45), 0.035em 0 0 rgba(200, 155, 95, 0.3); opacity: 1; }
  100% { text-shadow: none; }
}

.mb-blue { animation: mbBlue 2.2s ease-in-out; }
@keyframes mbBlue {
  0%   { color: inherit; }
  35%  { color: var(--ocean-light); text-shadow: 0 0 14px rgba(95, 166, 203, 0.6); }
  100% { color: inherit; text-shadow: none; }
}

/* the phrase "language misbehaves" — permanently, faintly restless */
.restless .ltr {
  animation: restless 6.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes restless {
  0%, 100% { transform: none; color: inherit; }
  28%      { transform: translateY(-0.05em) rotate(0.9deg); }
  52%      { transform: translateY(0.03em) rotate(-0.7deg); color: var(--ocean); }
  78%      { transform: translateY(-0.02em); }
}

/* ---------- the grasshopper ---------- */

.hopper {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(24px, 3.4vw, 34px);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  overflow: visible;
}

.hopper.is-ready { opacity: 1; }

.h-ink  { stroke: #23272b; }
.h-blue { stroke: var(--ocean); }
.h-eye  { fill: var(--ocean); stroke: none; }

/* explicit gray when perched on the monochrome side
   (the backdrop filter handles supporting browsers; this covers the rest) */
.hopper.on-gray .h-blue { stroke: var(--gray-stroke); }
.hopper.on-gray .h-eye  { fill: var(--gray-stroke); }

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .note-left, .note-right { max-width: 100%; }
}

@media (max-width: 760px) {
  :root { --crack-w: 54px; }

  .chasm-leak { width: 84px; }
  /* narrow screens: every line of text crosses the seam, so keep it
     lighter still */
  .chasm-crack {
    filter:
      drop-shadow(0 0 2px rgba(95, 166, 203, 0.26))
      drop-shadow(0 0 8px rgba(95, 166, 203, 0.15));
  }
  .crack-glow-wide { stroke-width: 4.5; }
  .crack-glow-mid  { stroke-width: 2.2; }
  .crack-ink       { stroke-width: 0.9; opacity: 0.26; }

  .brand { display: none; }
  .site-nav { justify-content: center; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: 0.62rem; letter-spacing: 0.16em; }

  .split { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .split-left, .split-right { justify-self: center; text-align: center; }

  .inscription-art { justify-self: center; width: clamp(190px, 56vw, 250px); }
  .inscription-text { justify-self: center; text-align: center; }
  .inscription-line { max-width: 24ch; margin-inline: auto; }

  /* stacked: drop the choreography, the crack is too narrow to cross */
  .pline, .breath { margin-left: 0; max-width: 100%; }
  .pline { width: auto; }
  .tA, .tB, .tC { transform: none; }
  .breath { margin-block: 1.9rem; }

  /* max-width only — max-height stays 100% so the cover still
     shrinks to fit the column instead of overflowing it */
  .hero-cover img { max-width: 74vw; }

  .hero { min-height: 36rem; }
  .title-wrap { padding-top: 1.6rem; }

  .cta-row { gap: 0.9rem; }
}

/* ---------- reduced motion ---------- */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .restless .ltr, .ltr { animation: none !important; }
  .hopper { transition: none; }
}