/* ============================================================================
   silence: the authored pause between the method and the night.
   The sun goes down here, just before the peak. By day the ground runs from
   the method's paper, through a low warm sun, into the sky of the dusk plate
   (the lower stops are sampled from assets/peak/peak-dusk.webp, horizon to
   zenith) and lands on #26232E, the exact colour the night's stage starts on.
   By night it runs from the night ground into that same dusk.
   One sentence, set low, on the part that is already dark.
   silence.js mirrors the stop positions (to give the rail the right ink for
   each stretch and to report what sits mid-viewport): keep both in step.
   ========================================================================== */

.silence {
  --silence-top: var(--sc-canvas);      /* the method's paper */
  --silence-dusk: #26232E;              /* top of the dusk plate, the peak's --pk-dusk */
  --sl-0: var(--silence-top);
  --sl-1: var(--silence-top);
  --sl-2: #EAE2C2;                      /* the paper warms */
  --sl-3: #DDBB8C;                      /* low sun */
  --sl-4: #BD8D6C;                      /* afterglow */
  --sl-5: #946D5D;                      /* the plate's horizon */
  --sl-6: #6B5153;                      /* the plate, a third up */
  --sl-7: #473840;                      /* the plate, higher */
  --sl-8: #332A37;
  --sl-9: var(--silence-dusk);
  color: var(--sc-ink);                 /* restate: .ch--inv redefines the token */
  min-height: 120vh;
  min-height: 120svh;
  display: grid;
  background-color: var(--silence-dusk);
  background-image:
    linear-gradient(180deg,
      var(--sl-0) 0%, var(--sl-1) 12%, var(--sl-2) 27%, var(--sl-3) 38%, var(--sl-4) 47%,
      var(--sl-5) 55%, var(--sl-6) 62%, var(--sl-7) 70%, var(--sl-8) 84%, var(--sl-9) 100%);
}
:root[data-theme="night"] .silence {
  --silence-top: var(--ground-inv);     /* the method's ground at night */
  --sl-2: #0F2329;
  --sl-3: #15232C;
  --sl-4: #1B232E;
  --sl-5: #20232F;
  --sl-6: #23232F;
  --sl-7: #25232F;
  --sl-8: #26232E;
}

/* The sunlit part, for the rail only: it spans the gradient down to its turn
   (55 %, where cream and forest ink hold the same contrast) and then gives
   that height back, so the silence starts right under it. */
.silence-sky {
  display: block;
  height: 66vh; height: 66svh;                       /* 0.55 x 120svh */
  margin: 0 0 -66vh; margin: 0 0 -66svh;
  visibility: hidden; pointer-events: none;
}

.silence__inner {
  display: grid;
  /* the sentence sits low, on the stretch that is already dusk */
  align-content: end;
  padding: 0 var(--content-r) 24svh var(--content-l);
}

.silence__say { display: grid; gap: 1.05rem; justify-items: start; }

.silence__time {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font: 500 0.78rem/1 var(--sc-font-mono);
  letter-spacing: 0.14em;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.silence__time::before {                /* a single engraved hairline, instrument mark */
  content: ""; width: 2.25rem; height: 1px;
  background: color-mix(in oklab, var(--sc-accent) 55%, transparent);
}

.silence__line {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-size: var(--t-h3);
  font-weight: 420;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--sc-ink);
  text-wrap: balance;
}
:root[data-theme="night"] .silence__line { font-weight: 400; letter-spacing: -0.006em; }
.silence__line span { display: block; }

/* The sentence arrives slower than the page's default reveal: this is the one
   place where the page is quiet on purpose. */
.silence__say.sc-in > * { transition-duration: 1100ms, 1100ms; }

@media (max-width: 700px) {
  .silence { min-height: 100svh; }
  .silence-sky { height: 55svh; margin-bottom: -55svh; }
  .silence__inner { padding-bottom: 22svh; }
}