/* ======================================================================
   TY Graphics LLC - Interior Page Styles (proof pages, hub)
   Thomas D. Young - Copyright (c) 2026 TY Graphics LLC
   Date: July 6, 2026  10:44:00 EDT (24-hour)  Epoch: 1783349040
   Purpose: Shared dark-locked styles for interior pages. Navigation
   is supplied by the <ty-nav> web component. No light-mode CSS.
   ====================================================================== */

:root {
  --stage:      #23282a;
  --stage-deep: #16191b;
  --ink:        #f2efe8;
  --ink-dim:    #c8c4ba;
  --gold:       #b8923e;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* Self-hosted fonts (shipped in /fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  background: var(--stage-deep);
  color: var(--ink);
  font-family: var(--font-body);
}

main {
  padding: 8rem 8vw 4rem;
  max-width: 72rem;
  margin: 0 auto;
}

.page-eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  margin-bottom: 1.4rem;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.2;
  max-width: 44rem;
}

.page-body {
  margin-top: 1.4rem;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  max-width: 40rem;
}

/* Mount point for the interactive proof mechanism (from the
   staging tests). The staging markup/script drops inside. */
.proof-stage {
  margin-top: 3rem;
  min-height: 46vh;
  border: 1px solid rgba(242, 239, 232, 0.1);
  background: var(--stage);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}