/* ============================================================================
   FoE CONTENT-PAGE CHROME — extracted for production from the WD template
   (form-of-emptiness/prototypes/page-templates/index.html, v2 2026-07-10 —
   homepage-matched geometry per Scott's correction; values commented there
   with their design-system sources). One shared file so six pages cannot
   drift. Adaptations from the template are marked [prod].
   ============================================================================ */

/* ---- fonts (same files the homepage loads) ---- */
@font-face{font-family:'PP Eiko';src:url('/homepage/assets/fonts/PPEiko-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Eiko';src:url('/homepage/assets/fonts/PPEiko-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'PP Eiko';src:url('/homepage/assets/fonts/PPEiko-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Neue Montreal Mono';src:url('/homepage/assets/fonts/PPNeueMontrealMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Neue Montreal Mono';src:url('/homepage/assets/fonts/PPNeueMontrealMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Writer';src:url('/homepage/assets/fonts/PPWriter-BookText.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Writer';src:url('/homepage/assets/fonts/PPWriter-BookItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'PP Writer';src:url('/homepage/assets/fonts/PPWriter-BlackText.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

:root{
  --void:#07060A; --void-2:#0C0A12;
  --bone:#EFE8DA; --bone-dim:#B8AE9C; --bone-faint:#6F665A; --ink:#D8D0C1;
  --gold-channel:#E8B468; --gold-structural:#9F7B3D; --gold-warm:#C98A4A;
  --font-display:'PP Eiko',Georgia,serif; --font-read:'PP Writer',Georgia,serif; --font-body:'PP Neue Montreal Mono',ui-monospace,monospace;
  --read:1160px; --pad:var(--gut); --gut:clamp(22px,6vw,80px);
  --bloom:0; /* 0..1 scroll-driven rail intensity (JS) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--font-read);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* canonical "void with breath" tonal field (design-system §4; homepage body::before) */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 4%, #241B13 0%, #1A130D 22%, #130D13 52%, #0B080D 100%);}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0.12 0 0 0 0  0 0.10 0 0 0  0 0 0.08 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

/* ============ SHARED CHROME ============ */
/* [prod 2026-07-18, Scott-caught] nav geometry = the HOMEPAGE's nav verbatim
   (index.html:96-97): column-constrained to --col/--read 1160 + centered,
   padding 84px gut 0, baseline-aligned — so the wordmark sits on the content
   column edge (x=220 @1440) and does not jump when navigating homepage ↔ pages.
   The template's full-width 28px strip was the mismatch. */
/* [prod 2026-07-18, Scott-ruled] HAMBURGER-ALWAYS: the inline link row is gone at
   every width — links live only in the burger menu ("cleaner"). Nav = wordmark +
   persistent Sunday pill + burger. Dropdown = the homepage's panel verbatim. */
.nav{display:flex;align-items:center;gap:24px;max-width:var(--read);margin:0 auto;padding:84px var(--gut) 0;position:relative;z-index:5;}
.nav .wordmark{font-family:var(--font-display);font-weight:900;font-size:clamp(41.1px,4.11vw,53.2px);letter-spacing:-.01em;word-spacing:.105em;color:var(--gold-channel);text-decoration:none;line-height:1;}
/* [2026-09-27, Scott-ruled 09-24] wordmark = TEXT again, the homepage title treatment site-wide:
   PP Eiko Black 900, --gold-channel, +21% over the 06-27 lock, word-spacing .105em. The
   forged-gold PNG is retired everywhere. */
.nav .links{display:none;}
.nav.nav-open .links{display:flex;position:absolute;top:calc(100% + 4px);right:var(--gut);flex-direction:column;gap:18px;align-items:flex-end;
  padding:18px 24px;background:rgba(12,10,18,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(232,180,104,.22);border-radius:10px;z-index:50;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.nav .links a{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:18px;color:var(--bone);text-decoration:none;white-space:nowrap;transition:color .2s cubic-bezier(.16,.84,.32,1);}
.nav .links a:hover{color:var(--gold-channel);}
.nav .links a[aria-current]{color:var(--gold-channel);}
.nav .cta-pill{margin-left:auto;font-family:var(--font-read);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--void);
  background:linear-gradient(90deg,#F14576 0%,#F48B37 55%,#F49636 100%);padding:11px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;}
.nav .signin{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:18px;color:var(--bone);text-decoration:none;}
.nav .signin:hover{color:var(--gold-channel);}
/* toggle = the homepage .navtoggle burger verbatim (F8: 44×44 target)
   [prod] + the homepage's open/close bar animation (index.html:104-107) */
.nav .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:7px 5px;background:transparent;border:0;cursor:pointer;position:relative;}
.nav .menu-btn span{display:block;height:2px;width:100%;background:var(--bone);border-radius:2px;transition:transform .3s, opacity .3s;}
/* open state = the möbius/infinity (Scott 2026-07-18) — bars fade, ∞ twists in */
.nav .menu-btn::after{content:'\221E';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-read),Georgia,serif;font-size:96px;line-height:1;color:var(--bone);
  opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s, transform .3s;pointer-events:none;}
.nav.nav-open .menu-btn span{opacity:0;transform:scale(.5);}
.nav.nav-open .menu-btn::after{opacity:1;transform:none;}
/* burger holds its 44×44 target (2026-09-28) — it was being squeezed by the wordmark, and its hidden ∞ then reached 2px past the screen edge. 561–680 stays as-is until the nav ruling. */
@media (max-width:560px),(min-width:681px){ .nav .menu-btn{flex:0 0 44px;} }
@media (max-width:400px){ .nav{gap:12px;} }
@media (max-width:680px){
  .nav{padding-top:72px;} /* homepage mobile nav drop (index.html:229) */
}
@media (max-width:680px){   /* Scott 2026-09-28 "A": pill hidden up to 680 (was 560) — wordmark + pill + burger do not fit 561–680 */
  .nav .cta-pill{display:none;}
  .nav .menu-btn{margin-left:auto;flex:0 0 44px;}
}

/* ============ LIVING SPINE (left rail) + SECTION-KEYED ACCENTS (right ticks) ============
   CT's engine — lift ratified CLEAN 2026-07-15 (inbox/2026-07-15_living-spine-lift-review-VERDICT).
   Canonical source = the homepage block; [tpl] adaptations recorded in the template. */
#rail{ position:absolute; top:0; left:max(var(--gut), calc(50vw - var(--read)/2 - 24px)); width:4px; border-radius:3px; z-index:1;
  box-shadow:0 0 calc(6px + 30px*var(--bloom)) calc(1px + 3px*var(--bloom)) rgba(200,138,74,calc(.10 + .35*var(--bloom)));
  transition:box-shadow .5s ease, opacity .4s; }
#railGlow{ position:fixed; left:max(var(--gut), calc(50vw - var(--read)/2 - 24px)); top:50%; width:160px; height:160px; transform:translate(-50%,-50%);
  z-index:1; pointer-events:none; border-radius:50%; opacity:0;
  background:radial-gradient(circle, var(--glow,#C98A4A) 0%, transparent 68%); mix-blend-mode:screen; transition:opacity .6s ease; }
.ktick{ position:absolute; width:4px; border-radius:3px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, var(--ka,#C98A4A), var(--kb,#C98A4A)); opacity:0; transform:translateY(8px);
  transition:opacity .7s ease, transform .7s ease; }
.ktick.on{ opacity:.92; transform:none; }
[data-axis].inview .eyebrow{ color:var(--axFlat,var(--bone-dim)); transition:color .6s ease; }
/* spine hidden <820 (design-system §5.6 canon) — deliberate per-surface divergence from the
   homepage (which keeps its rail at left:14px); recorded per CT's 07-15 verdict. */
@media (max-width:820px){ #rail,#railGlow,.ktick{display:none;} }

/* footer */
.foot{max-width:var(--read);margin:96px auto 0;padding:40px var(--pad) 96px;border-top:1px solid color-mix(in srgb,var(--bone-faint) 30%,transparent);
  font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--bone-dim);line-height:1.9;text-align:center;}
.foot a{color:var(--bone-dim);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--bone-faint) 50%,transparent);text-underline-offset:4px;}
.foot a:hover{color:var(--bone);}
/* tap target (2026-09-28, Scott "do both"): inline padding grows the hit area to 44px tall without moving the line; the
   negative margin cancels the horizontal padding so the footer reads exactly as before. */
.foot a{padding:12.5px 6px;margin:0 -6px;}

/* filament rule (design-system §5.6 — the only decoration; gradient gold hairline) */
.filament{height:1px;border:0;max-width:var(--read);margin:48px auto;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold-channel) 55%,transparent),transparent);}

/* ============ ARCHETYPE A — reading / passage page ============ */
.page{max-width:var(--read);margin:0 auto;padding:0 var(--pad);}
.hero{padding-top:6vh;}
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:18px;color:var(--bone-dim);margin-bottom:16px;}
/* page titles stay BONE (Scott reverted the gold experiment same-day 2026-07-18 — the gold
   3D treatment belongs to the WORDMARK, routed to CT as the title-forge owner) */
.ptitle{font-family:var(--font-display);font-weight:500;line-height:1.18;letter-spacing:-.01em;font-size:clamp(34px,4.8vw,56px);color:var(--bone);}
.standfirst{font-family:var(--font-read);font-weight:400;line-height:1.5;font-size:clamp(23px,2.9vw,31px);color:var(--bone);margin-top:16px;}

.body-copy > *+*{margin-top:1em;}
.body-copy p{font-family:var(--font-read);font-weight:400;font-size:clamp(23px,2.9vw,31px);line-height:1.5;color:var(--bone);}
.body-copy .sect{font-family:var(--font-display);font-weight:500;line-height:1.15;letter-spacing:-.015em;font-size:clamp(28px,3.6vw,42px);color:var(--bone);margin-top:11vh;padding-top:11vh;border-top:1px solid rgba(239,232,218,.05);}
.body-copy .sect + p{margin-top:26px;}
.body-copy em.gold{font-family:var(--font-display);font-style:italic;color:var(--gold-channel);}
.body-copy .write-i{font-style:italic;}
/* pull-quote (first use: Sharon Landrith on /about, Scott go 2026-10-03; WB plain build from tokens,
   WD may refine): a gold filament on the left, the quote in Eiko light italic, attribution in mono on its own line, no dash */
.body-copy .pull{margin:1.6em 0;padding:4px 0 4px 28px;border-left:1px solid color-mix(in srgb,var(--gold-channel) 55%,transparent);}
.body-copy .pull p{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(26px,3.3vw,36px);line-height:1.35;color:var(--bone);}
.body-copy .pull cite{display:block;margin-top:14px;font-family:var(--font-body);font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:16px;color:var(--bone-dim);}
.body-copy .fine, .fine{font-family:var(--font-read);font-weight:400;font-size:20px;line-height:1.72;color:var(--ink);max-width:94ch;}

/* the end-CTA block (Sunday door) */
.endcta{max-width:var(--read);margin:0 auto;padding:0 var(--pad);text-align:center;margin-top:96px;}
.endcta .line{font-family:var(--font-read);font-size:clamp(23px,2.9vw,31px);color:var(--bone);line-height:1.5;margin-bottom:32px;}
.pill{display:inline-block;font-family:var(--font-read);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:24px;color:var(--void);
  background:linear-gradient(90deg,#F14576 0%,#F48B37 55%,#F49636 100%);padding:16px 28px;border-radius:999px;text-decoration:none;}

/* tier / definitional sub-block (Teachings three-depths; Theory's Defining Patterns + Laws) */
.tiers{max-width:var(--read);margin:24px auto 0;padding:0 var(--pad);display:flex;flex-direction:column;gap:12px;}
.tier{border:1px solid color-mix(in srgb,var(--bone-faint) 30%,transparent);background:color-mix(in srgb,var(--void-2) 40%,transparent);border-radius:4px;padding:24px;}
.tier h4{font-family:var(--font-display);font-weight:500;font-size:28px;color:var(--bone);margin-bottom:10px;}
.tier p{font-family:var(--font-read);font-size:20px;line-height:1.6;color:var(--ink);}

/* [prod] video placeholder slots (Teachings "[VIDEO SLOT]" markers — no titles invented, ever):
   the tier-card container grammar (§5.2) holding a 16:9 well until the Producer's videos exist */
.vslot{border:1px solid color-mix(in srgb,var(--bone-faint) 30%,transparent);background:color-mix(in srgb,var(--void-2) 40%,transparent);border-radius:4px;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;}
.vslot span{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:14px;color:var(--bone-faint);}

/* ============ ARCHETYPE B — form page (Contact) + inline email form ============ */
.form{max-width:var(--read);margin:0 auto;padding:0 var(--pad);}
.form .field{margin-top:24px;}
.form label{display:block;font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:18px;color:var(--bone);margin-bottom:8px;}
.form input,.form textarea,.form select{width:100%;font-family:var(--font-read);font-size:22px;color:var(--bone);background:var(--void-2);
  border:1px solid color-mix(in srgb,var(--bone-faint) 25%,transparent);border-radius:4px;padding:12px 14px;}
.form textarea{min-height:140px;resize:vertical;line-height:1.6;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:color-mix(in srgb,var(--gold-channel) 60%,transparent);}
.form input::placeholder,.form textarea::placeholder{color:var(--bone-faint);}
.btn-secondary{margin-top:24px;font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:16px;
  color:var(--gold-channel);background:transparent;border:1px solid color-mix(in srgb,var(--gold-channel) 40%,transparent);border-radius:4px;padding:12px 20px;cursor:pointer;transition:.2s cubic-bezier(.16,.84,.32,1);}
.btn-secondary:hover{border-color:var(--gold-channel);color:var(--bone);}
.form .onsend{font-family:var(--font-read);font-size:17px;color:var(--bone-dim);margin-top:16px;}
/* one join form (2026-10-01, WB plain build; Web Designer refines): checkbox rows, 44px tap rows,
   reading-floor type, sentence case (not the uppercase field-label style) */
.form .check{display:flex;align-items:flex-start;gap:14px;margin:18px 0 0;min-height:44px;cursor:pointer;
  font-family:var(--font-read);font-size:20px;line-height:1.45;color:var(--bone);text-transform:none;letter-spacing:0;}
.form .check input{width:24px;height:24px;flex:none;margin:3px 0 0;padding:0;accent-color:var(--gold-channel);cursor:pointer;}
.form .check .hint{display:block;font-size:17px;color:var(--bone-dim);margin-top:2px;}
.form .reveal[hidden]{display:none;}

/* a11y: focus-visible ring (design-system §8) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:1px solid color-mix(in srgb,var(--gold-channel) 60%,transparent);outline-offset:2px;}