/* The 404 leaf: one sheet of 宣纸 on the plate ground, with the deckle.
   The ground, the laid lines and the dark tokens come from .plate-page in
   plate.css; the sheet is the homepage's own construction (.unroll-paper in
   styles.css: rice fill, the two --deckle-* tiles as edge masks, the grain
   field over it) folded onto one box. */

.lost-shell {
  width: var(--qb-content-width);
  max-width: 54rem;
  margin-inline: auto;
  padding-block: var(--qb-chrome-clear-block) clamp(64px, 9vw, 112px);
}

.lost-leaf {
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 72px) clamp(40px, 6vw, 64px);
}

/* the sheet: rice fill, ragged on both sides. Three non-overlapping mask
   layers exactly as the scroll paints them, so the deckle amplitude follows
   --sheet-fade and the page-gutter override at 780px with it. */
.lost-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(var(--rice), var(--rice-o));
  -webkit-mask-image: var(--deckle-left), var(--deckle-right), linear-gradient(#000, #000);
  -webkit-mask-size: var(--sheet-fade) 1024px, var(--sheet-fade) 1024px, calc(100% - var(--sheet-fade) * 2) 100%;
  -webkit-mask-position: left top, right top, center top;
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
  mask-image: var(--deckle-left), var(--deckle-right), linear-gradient(#000, #000);
  mask-size: var(--sheet-fade) 1024px, var(--sheet-fade) 1024px, calc(100% - var(--sheet-fade) * 2) 100%;
  mask-position: left top, right top, center top;
  mask-repeat: repeat-y, repeat-y, no-repeat;
}

/* the grain, feathered at the sides so it never draws an edge of its own */
.lost-leaf::after {
  content: "";
  position: absolute;
  inset: 0 var(--space-3);
  z-index: -1;
  pointer-events: none;
  opacity: var(--rice-fiber);
  background-image: var(--grain-layers);
  background-size: var(--grain-sizes);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

/* the shadow rides a rect inset by the deckle depth, so it lifts the sheet
   off the wall without ever showing past the ragged edge */
.lost-shadow {
  position: absolute;
  inset: 0 var(--sheet-fade);
  z-index: -2;
  pointer-events: none;
  box-shadow: var(--sheet-shadow);
}

.lost-kicker {
  margin: 0 0 var(--space-4);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: lowercase;
}

.lost-leaf h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 630;
  font-stretch: 92%;
  line-height: .98;
  letter-spacing: -.045em;
}

.lost-lede {
  max-width: 36rem;
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

/* the way back rides in the lede's own colour; cinnabar on hover and focus,
   the only red allowed at reading size. */
.lost-way { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lost-way:hover, .lost-way:focus-visible { color: var(--cinnabar-deep); }

/* the night sheet: the same inversion the scroll makes in 科技, a dark
   clearing that light type keeps its contrast on. plate.css swaps the ink
   and paper tokens for this scheme but not --rice, and a cream sheet under
   pale ink would be unreadable. */
@media (prefers-color-scheme: dark) {
  .lost-page {
    --rice: 12, 17, 12;
    --rice-o: .94;
    --rice-fiber: .26;
    --sheet-shadow: 0 14px 30px -12px rgba(0, 0, 0, .75), 0 2px 6px -2px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 760px) {
  .lost-leaf h1 { max-width: 10ch; }
}