/* Stakes marketing site: the shell shared by the quiet pages (membership, thanks, privacy).
   base.css is linked first and owns the type, tokens, chamfer, buttons, frame, nav and footer;
   this sheet adds only what a page without a hero needs: the nav that is solid from the first
   frame, the page's own backdrop and head, and the crest the offers and the receipt wear.
   A page's own parts go in its own sheet (membership.css, thanks.css, privacy.css).

   The look law: docs/website/site-look.md. No rounded or oval shape, no numbering. */

body.page { min-height:100vh; display:flex; flex-direction:column; }

/* ========== NAV ==========
   The landing's bar is clear over its hero and turns solid once scrolled. These pages have no
   hero, so the markup carries `scrolled` from the start (the opaque bar base.css already
   defines) and nothing here has to restate it. The page the visitor is on is marked. */
.nav-links a[aria-current="page"] { color:var(--gold-hi); }
.nav-links a[aria-current="page"]::after { transform:scaleX(1); }

/* ========== PAGE ========== */
.pg { position:relative; flex:1; isolation:isolate; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(30px,5vw,68px)) var(--gutter) clamp(56px,7vw,100px); }
/* The backdrop is a battlefield from the game, held dim behind the head and faded into the ink
   so it never competes with the text laid on the page below it. */
.pg-bg { position:absolute; inset:0 0 auto; height:min(760px,100%); z-index:-2; pointer-events:none; }
.pg-bg img { width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.62); }
.pg-bg::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,7,10,.72) 0%, rgba(6,7,10,.5) 28%, rgba(6,7,10,.86) 74%, var(--ink) 100%); }

.pg-head { text-align:center; max-width:900px; margin:0 auto clamp(26px,3.6vw,48px); }
.pg-head h1 {
  font:800 clamp(2.5rem,6.4vw,4.9rem)/.98 var(--display); letter-spacing:.04em; text-transform:uppercase;
  margin-top:14px; text-wrap:balance;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 12px 30px rgba(0,0,0,.7));
}
.pg-head p { color:var(--faded); font-size:clamp(1rem,1.2vw,1.12rem); margin:10px auto 0; max-width:52ch; text-wrap:pretty; }

/* ========== CREST ==========
   A diamond seal with the three Books standing in it as bars in their hues. The Books a panel
   holds are lit; the rest are dimmed, and the word "Books held" under it always says which. */
.crest { position:relative; width:74px; height:74px; display:grid; place-items:center; margin-bottom:18px; }
.crest::before { content:''; position:absolute; inset:10px; transform:rotate(45deg); background:linear-gradient(135deg,#3a2a12,#0d0a06); border:1px solid var(--gold); box-shadow:0 0 0 4px #0b0d12, 0 0 0 5px var(--gold-dim); }
.crest .books { position:relative; display:flex; gap:3px; align-items:flex-end; }
.crest .books i { width:7px; height:22px; background:var(--hue); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.crest .books i:nth-child(2) { height:26px; }
.crest .books .off { opacity:.25; }
.crest .brand-mark { position:relative; height:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); }

@media (max-width:560px) {
  .pg { padding-top:calc(var(--nav-h) + 26px); }
}