/* ==========================================================================
   Journal — the empty state

   One screen, no scroll. The page has nothing to list yet, so the work is
   entirely in making the emptiness read as deliberate: the site's cream, type
   at the full heading scale rather than a small centred paragraph, and one
   slow drift so the screen is alive while standing still.

   Loads on top of app.css for the reset, the face and the navbar. No new type
   is introduced — the scale below is the Horizon and For Schools scale.
   ========================================================================== */

:root{
  --light:1;                        /* app.css navbar: the light treatment, as
                                       on the About page's cream */
  --pad: clamp(22px, 5.2vw, 96px);

  --cream:#fdf1e7;                  /* the site's own cream */
  --ink:#191411;
  --ink-2:rgba(25,20,17,.64);
  --ink-3:rgba(25,20,17,.42);

  /* the brand blue, taken off the middle of the home hero's ramp — deep
     enough to hold a heading on cream without going navy */
  --blue:#1d478f;
}

/* the canvas itself: the field is fixed, but on a phone the visual viewport
   can outrun it, and anything past the end would otherwise fall through to
   the site's near-black default */
html{background:var(--cream)}
.jbody{
  background:transparent;color:var(--ink);
  min-height:100svh;overflow-x:hidden;
}

/* ── The field ────────────────────────────────────────────────────────────
   A deep ramp, a warm bloom over it, and a vignette to hold the edges in.
   Every fade lands on a zero-alpha copy of its own colour: `transparent` is
   zero-alpha black in sRGB and would grey the middle of each stop.        */

.j-field{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(126% 94% at 50% 120%, rgba(247,226,205,.80) 0%, rgba(247,226,205,0) 60%),
    linear-gradient(168deg, #fdf6ef 0%, #fdf1e7 44%, #f8e9dd 100%);
}
/* the bloom is its own element so the drift can be a transform: animating a
   background-position repaints the whole layer every frame */
.j-bloom{
  position:absolute;
  left:50%;top:34%;width:min(122vw,1500px);aspect-ratio:1.32;
  translate:-50% -50%;
  background:
    radial-gradient(closest-side, rgba(111,149,226,.12) 0%, rgba(111,149,226,.05) 48%, rgba(111,149,226,0) 78%),
    radial-gradient(closest-side at 66% 62%, rgba(244,164,105,.13) 0%, rgba(244,164,105,0) 70%);
  filter:blur(10px);
  animation:jdrift 78s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes jdrift{
  from{transform:translate3d(-4.5%, -2.2%, 0) scale(1)}
  to  {transform:translate3d( 4.5%,  3.2%, 0) scale(1.09)}
}

/* ── The screen ───────────────────────────────────────────────────────────── */

.j{
  min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(96px,12vh,140px) var(--pad) clamp(48px,8vh,96px);
}
.j__in{
  display:grid;justify-items:center;text-align:center;
  width:min(680px,100%);
}

/* the one piece of colour on the page. The word is the only thing here that
   can carry the brand, so it takes the blue and everything else stays ink */
.j__h{
  margin:0;font-weight:400;
  font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1.02;letter-spacing:-.045em;
  color:var(--blue);
}
/* wide enough to hold the sentence on one line wherever it fits: balanced over
   two reads as a stanza, and this line is not one */
.j__lede{
  margin:clamp(20px,2.4vw,34px) 0 0;
  font-size:clamp(1rem,1.28vw,1.32rem);line-height:1.55;letter-spacing:-.011em;
  color:var(--ink-2);max-width:46ch;text-wrap:balance;
}
/* the one piece of structure on the page: it draws out from nothing, which is
   what separates an empty screen from an unfinished one */
.j__rule{
  display:block;height:1px;width:clamp(72px,8.5vw,116px);
  margin:clamp(30px,3.6vw,52px) 0;
  background:linear-gradient(90deg,
    rgba(29,71,143,0) 0%,
    rgba(29,71,143,.42) 50%,
    rgba(29,71,143,0) 100%);
  transform-origin:50% 50%;
}
.j__note{
  margin:0;
  font-size:clamp(.86rem,1vw,1rem);line-height:1.5;
  color:var(--ink-3);
}

/* ── Arrival ──────────────────────────────────────────────────────────────
   Pure CSS, in the order the eye should take it. Nothing here depends on a
   script, so there is no state in which the page can arrive blank.        */

.j__h,.j__lede,.j__rule,.j__note{
  opacity:0;
  animation:jup 1.05s var(--ease-out) forwards;
}
.j__h    {animation-delay:.10s}
.j__lede {animation-delay:.26s}
.j__rule {animation-delay:.44s; animation-name:jrule}
.j__note {animation-delay:.58s}

@keyframes jup{
  from{opacity:0;translate:0 14px}
  to  {opacity:1;translate:0 0}
}
@keyframes jrule{
  from{opacity:0;scale:0 1}
  to  {opacity:1;scale:1 1}
}

@media (max-width:680px){
  .j__lede{max-width:26ch}
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   The drift is the whole ambient layer, so it stops rather than speeds up.  */

@media (prefers-reduced-motion:reduce){
  .j-bloom{animation:none;transform:none}
  .j__h,.j__lede,.j__rule,.j__note{opacity:1;animation:none;translate:none;scale:none}
}