/* ============================================================
   ROOT · the day page
   everythingjesussaid.com/40/{n}

   One miracle, and quiet all around it.

   The saying is buried. Light rises as the reader scrolls, or
   opens from under the thumb when they press and hold the dark
   ground. Then the light holds. Then a silence is offered and
   not imposed: no clock, no countdown, no bell. Only an empty
   room the length of the screen, which the reader may cross in
   one second or in ten minutes. The page does not know which,
   and does not want to.

   Then the question, which is never answered.
   Then the page ends. There is no next.

   THE FLOOR: with no JavaScript, on a modest phone, on a metered
   link, or with Reduce Motion switched on, this page arrives
   ALREADY LIT and completely readable. Every rule below that
   buries anything is gated behind html.day, a class that only a
   working script can set. Nothing here can fail closed.
   ============================================================ */

/* ---------- the register ---------- */

.day-page main {
  padding: 0 0 40px;
}

/* the quiet marker. It names the day and nothing more. No
   progress, no remaining, no count. A door number, not a score. */
.day-mark {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  text-align: center;
  display: block;
  padding: 64px 28px 0;
}

/* ---------- 1. THE GROUND ---------- */

.ground {
  position: relative;
  padding: 0 0 96px;
}
.ground-sticky {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
}
.ground .wrap { position: relative; z-index: 1; width: 100%; }

/* With the engine running, the ground becomes a scroll stage: the
   reader travels through it and the light rises as they go. With no
   engine it is simply a section, already lit, and short. */
html.day .ground { height: 178vh; }
html.day .ground-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* The soil itself. A fixed wash that darkens the whole field and
   thins as the light rises, so the page feels dug rather than
   faded. Decorative only. */
.ground-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 52%, rgba(58,41,16,0.34), transparent 64%),
    linear-gradient(to bottom, rgba(15,12,7,0), rgba(15,12,7,0.5));
  opacity: calc(1 - var(--lit, 1) * 0.8);
}

.buried-field {
  position: relative;
  text-align: center;
  padding: 26px 0;
}

/* THE WORDS. Real text. Selectable, copyable, quotable, read out
   loud by a screen reader whether the light ever rises or not.
   His words are never an image. */
.saying {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 5.4vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: var(--gold-pale);
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}

.saying-ref {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.62;
  margin-top: 34px;
}

/* the hint is spoken only by the engine, and only to a hand that
   can act on it. With no engine there is nothing to press, so
   there is nothing to say. */
.buried-hint {
  display: none;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  margin-bottom: 40px;
  transition: opacity 1.4s ease 0.9s;
}

/* ---------- the engine, from here down ---------- */
/* html.day is set by day.js. No script, no burial. */

html.day .ground { --lit: 0; }
html.day .buried-hint { display: block; }
html.day.day-live .buried-hint { opacity: 0.42; }
html.day .buried-field {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  /* control, not selectable prose: suppress the Android long-press
     Copy / Select All menu so a hold unearths instead of selecting. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Buried, not deleted. The lettering stays faintly in the soil,
   so that bringing light to it is an invitation a person can see
   the sense of. The gradient is clipped to the letters and its
   radius is the lamp. */
html.day .saying {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(
    circle var(--lamp-r, 0px) at var(--bx, 50%) var(--by, 50%),
    var(--gold-pale) 0%,
    var(--gold-light) 32%,
    rgba(150,120,64,0.50) 66%,
    rgba(112,90,50,0.34) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html.day .saying-ref { opacity: 0.12; transition: opacity 0.7s ease; }
html.day .buried-field.lit .saying-ref { opacity: 0.42; }

/* the ground gives under the thumb: light opens from the hand */
.buried-glow {
  position: absolute;
  inset: -40px -20px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle calc(30px + var(--dig, 0) * 190px) at var(--rx, 50%) var(--ry, 50%),
    rgba(194,151,58,0.22),
    rgba(194,151,58,0.07) 54%,
    transparent 78%);
  transition: opacity 0.5s ease;
}
html.day .buried-field.digging .buried-glow { opacity: 1; }
html.day .buried-hint,
html.day .saying,
html.day .saying-ref { position: relative; z-index: 1; }

/* the dig ring is drawn at the thumb, never at the centre */
.buried-dig {
  position: absolute;
  left: 0; top: 0;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) rotate(-90deg);
  transition: opacity 0.32s ease;
}
html.day .buried-field.digging .buried-dig { opacity: 0.9; }
.buried-dig circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: calc(151 - 151 * var(--dig, 0));
}

/* it rises, and it stays up. Nothing takes it back down. */
html.day .buried-field.unearthed .saying {
  background: none;
  color: var(--gold-pale);
  -webkit-text-fill-color: var(--gold-pale);
  animation: day-rise 2s cubic-bezier(0.16, 0.8, 0.2, 1) both;
}
html.day .buried-field.unearthed .saying-ref { opacity: 0.62; transition: opacity 1.4s ease 0.8s; }
html.day .buried-field.unearthed .buried-hint { opacity: 0; transition: opacity 0.9s ease; }
@keyframes day-rise {
  0%   { transform: translateY(26px); filter: drop-shadow(0 0 34px rgba(194,151,58,0.5)); }
  100% { transform: none; filter: drop-shadow(0 0 12px rgba(194,151,58,0.18)); }
}

/* ---------- 2. THE INSTRUCTION ---------- */
/* The same two sentences for forty days. An unchanging container
   is the whole method. It does not get more interesting on day
   thirty-six, and it is not supposed to. */

.instruction {
  text-align: center;
  padding: 0 28px;
  max-width: 34rem;
  margin: 0 auto;
}
.instruction p {
  font-size: 1.02rem;
  line-height: 2.1;
  color: var(--sand);
  margin: 0;
}
.instruction .aloud { color: var(--parchment); }

/* ---------- 3. THE SILENCE ---------- */
/* Not a timer. Not a countdown. Not a bell. A countdown is a slot
   machine; a silence is a room. So the room is literal: an empty
   stretch of dark page that the reader crosses at their own pace.
   Nothing measures them and nothing is recorded. It is the only
   honest way to offer a silence to a stranger. */

.silence {
  height: 62vh;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.silence .stars {
  font-size: 0.72rem;
  letter-spacing: 1.5em;
  text-indent: 1.5em;
  color: var(--gold);
  opacity: 0.16;
}

/* ---------- 4. THE QUESTION ---------- */
/* It is never answered. There is nothing under it. */

.question {
  text-align: center;
  padding: 0 28px 0;
  max-width: 30rem;
  margin: 0 auto;
}
.question p {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.12rem, 3.6vw, 1.42rem);
  line-height: 1.7;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}

/* Day 40 alone carries closing words instead of a question, and
   they are still his and Nardus's own from the last email. */
.closing {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 28px;
}
.closing p { font-size: 1rem; line-height: 2; color: var(--sand); margin: 0 0 26px; }
.closing p:last-child { color: var(--gold-pale); font-family: 'Cinzel', serif; text-align: center; margin-top: 44px; }

/* ---------- 5. CARRY IT ---------- */
/* The share card. The only growth mechanism in ROOT, and it
   carries his saying, not the brand. */

.carry {
  margin: 128px auto 0;
  padding: 0 28px;
  max-width: 34rem;
  text-align: center;
}
.carry-btn {
  display: inline-block;
  background: none;
  border: 1px solid rgba(194,151,58,0.36);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 15px 30px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.carry-btn:hover { border-color: rgba(194,151,58,0.7); color: var(--gold-pale); }
.carry-note {
  font-size: 0.8rem;
  color: var(--clay-lit, #8a6a3c);
  margin-top: 18px;
  line-height: 1.8;
}
.carry-status { font-size: 0.8rem; color: var(--sand); margin-top: 14px; min-height: 1.4em; }
/* The button only exists where a script can draw the card. It is
   gated on day-js, NOT on day: a reader with Reduce Motion switched
   on has asked for stillness, not for less of his words. */
.carry { display: none; }
html.day-js .carry { display: block; }

.card-preview {
  display: none;
  margin: 30px auto 0;
  max-width: 340px;
}
.card-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(194,151,58,0.25);
}
.card-preview.shown { display: block; }

/* ---------- 6. THE FIRE EXIT ---------- */
/* Barely noticed until it is the only thing in the room. */

.exit {
  margin: 96px auto 0;
  padding: 0 28px;
  max-width: 34rem;
  text-align: center;
}
.exit p { font-size: 0.86rem; color: var(--clay-lit, #8a6a3c); line-height: 1.9; margin: 0; }

/* ---------- 6. THE NOTE ----------
   Fact tier only. It exists because ROOT's whole claim is that his
   words were buried, and a project making that claim cannot itself
   be quiet about a rendering it chose or a text that is disputed.
   Collapsed by default, so the page stays silent for a reader who
   came only for the saying. The summary line carries the fact; the
   body carries the detail. Never commentary. Never preaching. Never
   an argument for ROOT. Nine days carry one. The other thirty-one
   carry none, because they need none.
   Native <details>. No script. If everything else fails, this still
   opens. -->  */
.note {
  margin: 76px auto 0;
  padding: 0 28px;
  max-width: 34rem;
  text-align: center;
}
.note summary {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--clay-lit, #8a6a3c);
  line-height: 1.9;
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(106, 78, 44, 0.38);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::marker { content: ""; }
.note summary:hover,
.note[open] summary { color: var(--sand); border-bottom-color: rgba(184, 148, 106, 0.5); }
.note summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.note p {
  font-size: 0.84rem;
  color: var(--sand);
  line-height: 1.95;
  margin: 20px 0 0;
  text-align: left;
}

/* ---------- what is not here ---------- */
/* There is no next button. There is no previous button. There is
   no day counter, no progress bar, no streak, no badge, and no
   nudge at the bottom of this page. Forty days works because it
   takes forty days. Do not add a door here. */

@media (prefers-reduced-motion: reduce) {
  .day-page *, .day-page *::before, .day-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 900px) {
  .ground { min-height: 84vh; }
  .saying { max-width: 22ch; }
  .silence { height: 70vh; }
}