/* SIX DEEP · the house style for every page past the front door
   (Thom, 2026-10-26: "finish these out so it is uniform"). The homepage's
   language, carried through: a course at golden hour behind the top of the
   page, the masthead's display scale, glass over the course, and the
   Founding card in green metal where Founding is the subject. The nine
   tokens only, at an alpha where light is needed. Spacing on
   4 8 12 16 24 32 48 64. Each page names its own still:
   <div class="pg-band" style="--bg: url(...); --bg-tall: url(...)">. */

/* The shared measures. Some pages were written before these were named;
   the values are the homepage's own, so nothing here re-colours a page. */
:root {
  --gold-deep: #8a7235;
  --muted-on-card: rgba(240, 234, 216, 0.66);
  --soft: rgba(240, 234, 216, 0.82);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --f-display: 'Oswald', sans-serif;
  --f-num: 'Archivo Black', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── The course behind the top of the page ── */
.pg-band { position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: var(--band-h, clamp(520px, 74vh, 760px)); pointer-events: none; overflow: hidden;
  background: var(--green-deep) var(--bg) var(--pos, 50% 62%) / cover no-repeat; }
.pg-band::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(5, 10, 6, 0.9) 0%, rgba(5, 10, 6, 0.62) 42%, rgba(5, 10, 6, 0.22) 78%, rgba(5, 10, 6, 0.32) 100%),
  linear-gradient(180deg, rgba(5, 10, 6, 0.55) 0%, rgba(5, 10, 6, 0) 22%, rgba(5, 10, 6, 0) 52%, var(--green-deep) 100%); }
.pg-band--center::after { background:
  linear-gradient(180deg, rgba(5, 10, 6, 0.72) 0%, rgba(5, 10, 6, 0.6) 40%, var(--green-deep) 100%); }
@media (max-width: 699px) {
  .pg-band { background-image: var(--bg-tall, var(--bg)); background-position: 50% 50%; height: var(--band-h-sm, clamp(480px, 82vh, 640px)); }
  .pg-band::after { background: linear-gradient(180deg, rgba(5, 10, 6, 0.6) 0%, rgba(5, 10, 6, 0.55) 40%, rgba(5, 10, 6, 0.86) 75%, var(--green-deep) 100%); }
}
.pg-over { position: relative; z-index: 1; }

/* The masthead's display scale for every page title. */
.pg-title { font: 500 clamp(48px, 7.6vw, 104px)/0.94 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
.pg-title .gold { color: var(--gold); }
.pg-eyebrow { font: 400 12px/1.4 var(--f-mono); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); }
.pg-rule { display: block; width: 48px; height: 1px; background: var(--gold); opacity: 0.7; }
.pg-lede { color: var(--cream); }

/* Glass over the course: the homepage's readout, as a panel. */
.pg-glass { background: rgba(5, 10, 6, 0.58) !important; border: 1px solid rgba(240, 234, 216, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(240, 234, 216, 0.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pg-glass { background: var(--card) !important; } }

/* The Founding card, set beside a page's title. */
.pg-card { position: relative; width: clamp(300px, 30vw, 440px); justify-self: end; display: grid; }
.pg-card .gc-tag { order: 2; }
@media (max-width: 959px) { .pg-card { justify-self: start; width: min(100%, 380px); } }

/* Founding in glass wherever the plans are laid out. */
.plan--founding.pg-found { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(240, 234, 216, 0.08), rgba(201, 168, 76, 0.06)), var(--green);
  border-color: rgba(201, 168, 76, 0.55); box-shadow: inset 0 1px 0 rgba(240, 234, 216, 0.18); }
.plan--founding.pg-found::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(232, 201, 106, 0) 35%, rgba(232, 201, 106, 0.08) 50%, rgba(232, 201, 106, 0) 62%); }
.plan--founding.pg-found > * { position: relative; z-index: 1; }

/* The closing band: the course again, under a deeper veil. */
.pg-final { position: relative; overflow: hidden; isolation: isolate; }
.pg-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--green-deep) var(--bg, url(/assets/home/course-still.webp)) 70% 60% / cover no-repeat; opacity: 0.6; }
.pg-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 10, 6, 0.95), rgba(5, 10, 6, 0.55)); }

/* A page whose title sits in its own section carries the course inside it. */
.pg-hero { position: relative; isolation: isolate; padding: var(--s8) 0; border-bottom: 1px solid var(--hairline); }
.pg-hero .pg-band--fill { z-index: -1; height: auto; bottom: 0; }
@media (min-width: 960px) {
  .pg-hero { padding: var(--s8) 0; min-height: min(72vh, 720px); display: grid; align-items: center; }
  .pg-hero .hero__grid { align-items: center; }
}
.pg-hero .hero__copy { gap: var(--s4); }

/* Apply: the file, in glass over the course, with the card it leads to. */
.pg-apply__eyebrow { margin-bottom: var(--s3); }
.pg-apply__title { font-size: clamp(44px, 6.4vw, 88px); margin-bottom: var(--s6); }
.pg-apply { display: grid; gap: var(--s6); align-items: center; margin-bottom: var(--s7); }
.pg-apply .file { margin-bottom: 0; }
@media (min-width: 960px) { .pg-apply { grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 400px); gap: var(--s7); } }
@media (max-width: 959px) { .pg-apply__card { display: none; } }

/* Plans on a phone: each card is as long as what it holds. */
@media (max-width: 899px) { .plans > .plan { align-self: start; } }

/* Titles in a page's own column take the scale the column can hold. */
.pg-title--page { font-size: clamp(48px, 7vw, 96px); margin: var(--s3) 0 var(--s5); }
.pg-title--narrow { font-size: clamp(44px, 9vw, 68px); margin: var(--s3) 0 var(--s4); }
@media (max-width: 599px) { .pg-title--page { font-size: 38px; } }

/* The Clubhouse contents: four rooms, one row; two by two on a phone. */
.toc { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.toc a { background: rgba(5, 10, 6, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }