/* The album: pages are stacked and turn one at a time, bottom to top. */
/* Album gutter: paper falls into shadow near the spine. */
.book::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:130px;
  z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(90,70,48,.16) 0%,
    rgba(90,70,48,.06) 34%,
    rgba(90,70,48,0) 100%);
}
/* On charcoal paper the gutter has nothing to fall into: it reads as a
   smudge rather than a fold, so there is none. */
[data-theme="dark"] .book::before{background:none}

/* The surface is a layer of its own rather than a class on .book: the album
   already uses its own ::before for the gutter, and that rule would confine
   the texture to its box. */
.surface{position:absolute;inset:0;z-index:0;pointer-events:none}

.book{
  position:relative;z-index:2;
  height:100svh;min-height:540px;
  overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Pages carry no surface of their own. The album underneath is the one sheet
   everything sits on, so turning a page never changes the background —
   only the text on it. */
.page{
  position:absolute;inset:0;
  background:none;
  display:grid;place-items:center;
  padding:clamp(56px,9vw,90px) clamp(26px,6vw,90px)
          clamp(56px,9vw,90px) clamp(96px,13vw,230px);
  /* Pages do not slide. Turning one is a change of text: the old copy
     disperses and the new copy gathers in the same place. */
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility 0s .4s;
  pointer-events:none;
}

/* Content sits in its own layer above the page box. Without an explicit
   stacking position, links inside the column have been landing under it. */
.page-inner{position:relative;z-index:4}

.page.current{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease, visibility 0s;
}
/* The page that is leaving waits while its text disperses, and only then
   fades. Cutting it sooner truncates the animation, which reads as the text
   simply vanishing. */
.page.past{
  opacity:0;visibility:hidden;
  transition:opacity .45s ease .55s, visibility 0s 1s;
}

.page-inner{width:100%;max-width:960px}

/* Cover screen. Slides up like a curtain on the first page turn. */
.hero{
  position:absolute;inset:0;z-index:20;
  display:grid;place-items:center;
  background:var(--paper);
  transition:transform 1.25s cubic-bezier(.62,0,.14,1);
  will-change:transform;
  padding:clamp(40px,8vw,80px) clamp(52px,9vw,150px);
}
.hero.up{transform:translate3d(0,-100%,0)}

.hero-inner{
  text-align:center;position:relative;z-index:3;
  width:100%;max-width:min(520px,100%);margin-inline:auto;
}

.fox{
  width:clamp(150px,44vw,300px);max-width:100%;height:auto;
  margin:0 auto 6px;display:block;
  color:var(--brand);
}

.wordmark{
  font-family:"PT Mono",monospace;
  font-size:27px;              /* upper bound; JS shrinks it to fit */
  letter-spacing:.3em;text-indent:.3em;
  color:var(--ink);margin-top:6px;
  display:block;width:100%;
  overflow:visible;
}
.wordmark > span{display:block;white-space:nowrap}
.wm-2{
  font-size:.58em;
  letter-spacing:.46em;text-indent:.46em;
  margin-top:.42em;
  opacity:.88;
}
.hero .lede{margin:22px auto 0;max-width:min(38ch,100%)}

.hero-hint{
  position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));
  display:grid;justify-items:center;gap:8px;
  color:var(--pencil);z-index:3;
}
.hero-hint svg{width:15px;height:10px;animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}



/* The mark ships with its own terracotta; on charcoal paper it needs a lift. */
[data-theme="dark"] .fox{filter:brightness(1.22) saturate(.92)}