/* =========================================================================
   DEIVIA — Dei Via  ·  Site Theme & Design Tokens
   "The way to God."
   -------------------------------------------------------------------------
   A single source of truth for color, type, spacing, and core components.
   Link this file on every page:  <link rel="stylesheet" href="/css/deivia-theme.css">
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                        */
/* ----------------------------------------------------------------------- */
:root {
  /* --- Core palette --- */
  --burgundy-deep:  #5B0F1A;   /* primary brand / deep oxblood            */
  --burgundy:       #7A1F24;   /* secondary red / hover                   */
  --gold:           #C79A2E;   /* accent / illumination / rules           */
  --gold-soft:      #D9B45A;   /* lighter gold for hover/glow             */
  --parchment:      #F5E9D1;   /* primary page background                  */
  --parchment-warm: #E3D2BB;   /* panels / cards / second surface          */
  --ink:            #2B1B14;   /* near-black text / footer bg              */
  --ink-soft:       #4A382E;   /* secondary text                          */

  /* --- Functional aliases --- */
  --bg:             var(--parchment);
  --surface:        var(--parchment-warm);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --brand:          var(--burgundy-deep);
  --accent:         var(--gold);
  --rule:           rgba(199,154,46,0.45);   /* hairline gold              */

  /* --- Typography --- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;          /* Roman caps  */
  --font-body:    "Cormorant Garamond", "Garamond", Georgia, serif; /* body / lede */
  --font-ui:      "EB Garamond", Georgia, serif;                   /* small UI    */

  /* Fluid type scale (clamps keep it mobile-friendly with no media queries) */
  --t-hero:   clamp(2.75rem, 9vw, 6.5rem);
  --t-h1:     clamp(2rem, 6vw, 3.5rem);
  --t-h2:     clamp(1.5rem, 4vw, 2.25rem);
  --t-h3:     clamp(1.2rem, 3vw, 1.5rem);
  --t-lede:   clamp(1.15rem, 2.4vw, 1.5rem);
  --t-body:   clamp(1.05rem, 1.6vw, 1.2rem);
  --t-small:  0.8rem;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-12: 5rem;

  /* --- Other --- */
  --maxw: 1100px;
  --radius: 3px;                /* keep corners crisp / restrained          */
  --shadow: 0 10px 40px rgba(43,27,20,0.18);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------------- */
/* 2. BASE                                                                 */
/* ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  /* Parchment grain: subtle layered radial wash — pure CSS, no images */
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(199,154,46,0.06), transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(91,15,26,0.05), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25), transparent 70%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------------- */
/* 3. TYPOGRAPHY                                                           */
/* ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--brand);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--sp-4); }

a { color: var(--burgundy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold); }

/* Wordmark — the lockup used in headers & hero */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
  line-height: 1;
}

/* Latin tag line "DEI VIA" with flanking flourishes */
.dei-via {
  font-family: var(--font-display);
  letter-spacing: 0.42em;
  font-size: 0.7em;
  color: var(--gold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  white-space: nowrap;
}
.dei-via::before,
.dei-via::after {
  content: "";
  width: 2.2em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Italic devotional line */
.devotional {
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--ink-soft);
}

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----------------------------------------------------------------------- */
/* 4. LAYOUT HELPERS                                                       */
/* ----------------------------------------------------------------------- */
.container { width: min(var(--maxw), 92vw); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }

/* Gold hairline divider with centered cross flourish */
.rule-cross {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--gold); margin: var(--sp-6) auto; width: min(440px, 80%);
}
.rule-cross::before,
.rule-cross::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.rule-cross span { font-size: 1.1rem; opacity: 0.9; }

/* ----------------------------------------------------------------------- */
/* 5. COMPONENTS                                                           */
/* ----------------------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85em 2em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-primary {
  background: var(--brand);
  color: var(--parchment);
  border: 1px solid var(--gold);
}
.btn-primary:hover {
  background: var(--burgundy);
  color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(199,154,46,0.18);
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Card — for resource categories / panels */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  position: relative;
}
/* Corner illumination tick (top-left) */
.card::before {
  content: "";
  position: absolute; top: 8px; left: 8px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  opacity: 0.6;
}

/* Resource tiles — section landings & tool lists (generalized tool-card) */
.tile-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4); margin-top: var(--sp-6);
}
.tile {
  display: block; text-decoration: none; position: relative;
  background: rgba(91,15,26,0.06);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  min-width: 240px; max-width: 320px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tile:hover {
  background: rgba(91,15,26,0.11);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
}
.tile-label {
  font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem;
}
.tile-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.06em; color: var(--brand); margin: 0 0 0.4rem;
}
.tile-desc {
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-soft);
  line-height: 1.55; margin: 0;
}

/* Swatch (used in the design system page) */
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.swatch .chip { height: 88px; }
.swatch .meta { padding: var(--sp-2) var(--sp-3); background: var(--surface); font-family: var(--font-ui); font-size: var(--t-small); }
.swatch .meta b { display: block; font-family: var(--font-display); letter-spacing: 0.08em; color: var(--brand); }

/* ----------------------------------------------------------------------- */
/* 6. ACCESSIBILITY                                                        */
/* ----------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------------- */
/* 7. SITE CHROME — frame, masthead, nav, footer  (used by header/footer)  */
/* ----------------------------------------------------------------------- */

/* Ornamental fixed border frame (shared site-wide) */
.frame { position: fixed; inset: 14px; border: 1px solid var(--rule); pointer-events: none; z-index: 1; }
.frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(199,154,46,0.22); }
.corner { position: fixed; width: 30px; height: 30px; z-index: 2; color: var(--gold); opacity: 0.85; }
.corner.tl { top: 14px; left: 14px; border-top: 2px solid; border-left: 2px solid; }
.corner.tr { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; }
.corner.bl { bottom: 14px; left: 14px; border-bottom: 2px solid; border-left: 2px solid; }
.corner.br { bottom: 14px; right: 14px; border-bottom: 2px solid; border-right: 2px solid; }

/* Masthead */
.site-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  width: min(var(--maxw), 92vw); margin-inline: auto;
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.site-brand { display: inline-flex; align-items: center; gap: 0.7em; }
.site-brand img { width: 38px; height: 38px; display: block; }
.site-wordmark {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.18em; font-size: 1.05rem; color: var(--brand);
  transition: color .2s var(--ease);
}
.site-brand:hover .site-wordmark { color: var(--burgundy); }

.site-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 1.1em;
  font-family: var(--font-ui); font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--gold); }
.site-nav a.is-current { color: var(--brand); border-bottom: 1px solid var(--gold); }
.site-nav .soon {
  color: var(--ink-soft); opacity: 0.42; font-style: italic;
  letter-spacing: 0.14em; cursor: default;
}

/* Page body region */
main.container { position: relative; z-index: 3; flex: 1; padding: var(--sp-8) 0 var(--sp-12); }

/* Footer */
.site-foot {
  position: relative; z-index: 3; text-align: center;
  width: min(var(--maxw), 92vw); margin-inline: auto;
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 0.8rem;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.site-foot .latin { font-style: italic; color: var(--burgundy); }

@media (max-width: 560px) {
  .frame { inset: 8px; }
  .corner.tl, .corner.tr { top: 8px; }
  .corner.bl, .corner.br { bottom: 8px; }
  .corner.tl, .corner.bl { left: 8px; }
  .corner.tr, .corner.br { right: 8px; }
  .site-head { justify-content: center; text-align: center; }
}