/* Shared reading layer for the scene pages (what-we-do, hire, story, bounty,
   home of daedalus). The scene itself is a fixed backdrop (scene.css); this
   is the column of words that scrolls over it.

   Rules from the copy deck, held to:
     · bold only on the headline and the closing line
     · no italics, ever; no underline except on hover
     · links resolve to oxblood, on hover only — except mailto links,
       which open toward light (a door, not a citation)
     · one idea per paragraph, air between them
     · the closing line is a beat, not a footer — it gets space
   Per-page files set --scene-scrim and any bespoke placement. */

:root { --oxblood: #7A1721; }

/* Per-scene legibility scrim (scene.css reads --scene-scrim). No panel behind
   the text — the words float in the room. The scrim is centre-weighted: it
   calms the middle third where the column sits and leaves the scene's own
   detail (lanterns, the window, the door) reading at the edges. Body copy
   also carries its own shadow (below), so this stays gentle. */
body.firm-page     { --scene-scrim: radial-gradient(58% 78% at 50% 52%, rgba(5,3,10,0.60), rgba(5,3,10,0.30) 92%); }
body.hire-page     { --scene-scrim: radial-gradient(60% 72% at 50% 48%, rgba(5,3,10,0.62), rgba(5,3,10,0.30) 90%); }
body.daedalus-page { --scene-scrim: radial-gradient(46% 94% at 50% 50%, rgba(5,3,10,0.68), rgba(5,3,10,0.28) 88%); }
body.story-page    { --scene-scrim: radial-gradient(58% 80% at 50% 52%, rgba(5,3,10,0.56), rgba(5,3,10,0.28) 92%); }
body.bounty-page   { --scene-scrim: radial-gradient(62% 82% at 50% 50%, rgba(5,3,10,0.44), rgba(5,3,10,0.22) 92%); }

.page {
  position: relative;
  z-index: 2;
  color: rgba(236, 238, 243, 0.88);
  font: 400 clamp(1.02rem, 0.62rem + 0.72vw, 1.19rem)/1.72 var(--font);
  padding-bottom: 18vh;
}

/* The headline sits over the plate, high, clear of the figure. One screen of
   scene + title before the words begin. */
.page__mark {
  min-height: 94svh;
  display: flex;
  align-items: flex-start;
  padding: clamp(12vh, 16vh, 22vh) clamp(1.4rem, 6vw, 5rem) 0;
}
.page__mark h1 {
  margin: 0;
  max-width: 20ch;
  font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 3.9vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--starlight);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 22px rgba(0, 0, 0, 0.5);
}

/* The reading column — ~68 characters. No box: the copy carries its own
   shadow (a tight contact edge plus one soft pass) and floats in the room. */
.page__col {
  max-width: 35rem;
  margin: 0 auto;
  padding: 4.5rem clamp(1.4rem, 5vw, 2.75rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 12px rgba(0, 0, 0, 0.55);
}

.page__col p { margin: 0 0 1.5rem; }
.page__col p:last-child { margin-bottom: 0; }
/* a fresh beat between sections that carry no heading of their own */
.page__col section + section { margin-top: 2.7rem; }

/* Quiet section markers — tracked caps, the site's recurring voice. */
.page__col h2 {
  margin: 0 0 1.4rem;
  font: 400 0.72rem/1 var(--font);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--haze);
}

/* A named item in a list of built things: the name reads bright, the rest
   settles back. Weight never changes — this is value contrast, not bold. */
.item { margin-bottom: 1.6rem; color: rgba(236, 238, 243, 0.74); }
.item .lead { color: var(--starlight); }

/* "What we do" / "How it works" style mini-lists on the hire page. */
.spec { margin: 0 0 1.6rem; color: rgba(236, 238, 243, 0.9); }
.spec .lead { display: block; margin-bottom: 0.35rem; font-size: 0.72rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--haze); }

/* Copy deck: no underline except on hover, oxblood on hover only. A link
   reads as body text until you reach for it. */
.page a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.page a:hover,
.page a:focus-visible {
  color: var(--oxblood);
  border-bottom-color: currentColor;
  outline: none;
}

/* The closing line — bold, alone, with room to land (padding, not a fixed
   min-height, so a short page doesn't grow a slab of empty shade). */
.page__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24vh clamp(1.4rem, 6vw, 5rem);
}
.page__end p {
  margin: 0;
  max-width: 24ch;
  font-weight: 600;
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.4rem);
  line-height: 1.24;
  color: var(--starlight);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 22px rgba(0, 0, 0, 0.5);
}
/* a second closing line (hire, daedalus, bounty) — same beat, half the size */
.page__end p + p {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.35rem);
  color: var(--haze);
}
/* Bounty's closing sits on its own scrap of parchment — dark ink, like the
   copy above it. Guaranteed contrast whatever the viewport. Needs the
   .page__end-card wrapper in the markup. */
.page--bounty .page__end { padding-block: 20vh; }
.page--bounty .page__end-card {
  max-width: 33rem;
  padding: 3rem clamp(2rem, 5vw, 3.4rem);
  border-radius: 3px;
  transform: rotate(-1.1deg);
  position: relative;
  isolation: isolate;
}
.page--bounty .page__end p { color: #241a12; text-shadow: none; }
.page--bounty .page__end p:first-child {
  font-size: clamp(1.35rem, 0.9rem + 1.7vw, 1.95rem);
  line-height: 1.28;
}
.page--bounty .page__end p + p { color: rgba(36,26,18,0.72); }
.page--bounty .page__contact a { color: rgba(36, 26, 18, 0.66); }

/* The way to actually reach us — a quiet line under the closing beat.
   Placeholder address until the domain + mail are bought. */
.page__contact {
  margin: 3.2rem 0 0;
  font-size: clamp(1rem, 0.86rem + 0.6vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--haze);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
}
.page__contact a { color: var(--haze); }
/* mailto links open toward light on hover — full starlight + the underline,
   never oxblood. Reaching for contact should read as a door, not a citation. */
.page a[href^="mailto:"]:hover,
.page a[href^="mailto:"]:focus-visible {
  color: var(--starlight);
  border-bottom-color: currentColor;
}

/* Scroll reveal — each block eases up as it enters. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- THE BOUNTY BOARD: dark ink on the parchment ------------------------ */
/* The one warm pale surface on the site. The column becomes the parchment
   rather than sitting in shade on it. */
.page--bounty .page__col {
  max-width: 33rem;
  color: #241a12;
  text-shadow: none;
  padding: 4rem clamp(1.6rem, 5vw, 3rem);
  border-radius: 2px;
  margin-block: 2rem;
  position: relative;
  isolation: isolate;
}

/* Ages the parchment. ::before carries the paper plus discolouration — two
   soft fractal-noise stain clouds (no-repeat, oversized, so there is no tile)
   and an uneven, off-centre edge darkening. ::after is a fine grain tile,
   multiplied in, for the dirty tooth. Every feTurbulence gets an explicit
   userSpaceOnUse region so stitchTiles lines up and the tile shows no seam.
   Both sit behind the copy, inside the isolate context. No torn silhouette. */
.page--bounty .page__col::before,
.page--bounty .page__col::after,
.page--bounty .page__end-card::before,
.page--bounty .page__end-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.page--bounty .page__col::before,
.page--bounty .page__end-card::before { z-index: -2; }
.page--bounty .page__col::after,
.page--bounty .page__end-card::after { z-index: -1; }
.page--bounty .page__col::before,
.page--bounty .page__end-card::before {
  background:
    /* stain cloud A — broad, upper area */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='a' x='0' y='0' width='500' height='500' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.15 0 0 0 0 0.07 0.85 0 0 0 -0.34'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23a)'/%3E%3C/svg%3E"),
    /* stain cloud B — finer, lower-right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='b' x='0' y='0' width='500' height='500' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.13 0 0 0 0 0.06 0.8 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23b)'/%3E%3C/svg%3E"),
    /* foxing — asymmetric, the way a pinned sheet actually goes: heavy along
       the bottom and one top corner, barely anything on the others */
    radial-gradient(75% 55% at 88% 104%, rgba(72, 43, 19, 0.5), transparent 70%),
    radial-gradient(60% 50% at 8% 100%, rgba(88, 55, 26, 0.34), transparent 72%),
    radial-gradient(48% 44% at 4% 3%, rgba(94, 60, 28, 0.32), transparent 74%),
    radial-gradient(34% 60% at 101% 62%, rgba(78, 48, 22, 0.26), transparent 80%),
    /* uneven edge dirt — an offset ellipse, not a centred vignette ring */
    radial-gradient(125% 115% at 44% 58%, transparent 44%, rgba(58, 36, 16, 0.34) 82%, rgba(30, 18, 8, 0.56) 100%),
    linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
    /* the paper itself — aged a shade warmer and darker than fresh cream */
    radial-gradient(120% 90% at 50% 0%, #e8dcbf, #dbc8a3 60%, #c9b287 100%);
  background-repeat: no-repeat;
  background-size: 165% 150%, 150% 140%, auto, auto, auto, auto, auto, auto, auto;
  background-position: 22% 8%, 82% 88%, center, center, center, center, center, center, center;
  filter: drop-shadow(0 24px 55px rgba(0, 0, 0, 0.5));
}
.page--bounty .page__col::after,
.page--bounty .page__end-card::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='260' height='260' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.75'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: multiply;
  opacity: 0.28;
}
.page--bounty .page__col h2 { color: #6c4a22; }
.page--bounty .item { color: rgba(36, 26, 18, 0.7); }
.page--bounty .item .lead { color: #241a12; }
.page--bounty .spec { color: #2b2013; }
.page--bounty .spec .lead { color: #6c4a22; }
.page--bounty .page a { border-bottom-color: rgba(36, 26, 18, 0.32); }
.page--bounty .page a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
/* on the parchment, "toward light" is toward the darkest ink — same gesture,
   inverted ground. */
.page--bounty .page a[href^="mailto:"]:hover,
.page--bounty .page a[href^="mailto:"]:focus-visible {
  color: #0d0906; border-bottom-color: currentColor;
}