/* ============================================================
   ORDO HUMANITATIS — Shared Design System
   Extracted from legacy/single-page-prototype.html
   All pages import this file.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;900&family=IM+Fell+English:ital@0;1&family=Fira+Code:wght@300;400&family=Noto+Serif+SC:wght@300;400;600;700;900&display=swap');

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:        #c9a84c;
  --gold-bright: #f5e06a;
  --gold-dark:   #8b6914;
  --gold-deep:   #4a2e00;
  --cream:       #fffaf4;
  --btn-bg:      #fff89b;
  --red:         #8b0000;
  --red-bright:  #cc2200;
  --bg:          #000000;
  --text:        #fffaf4;
  --text-dim:    rgba(255,250,244,0.55);
  --border-gold: rgba(201,168,76,0.25);

  --f-display: 'Cinzel Decorative', serif;
  --f-heading: 'Cinzel', serif;
  --f-body:    'IM Fell English', serif;
  --f-mono:    'Fira Code', monospace;
  --f-zh:      'Noto Serif SC', serif;

  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-in-out: cubic-bezier(.76,0,.24,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  overflow-x: hidden;
  cursor: crosshair;
}
::selection { background: rgba(201,168,76,0.3); color: var(--cream); }

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */
#bg-atmosphere {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 80% 65% at 50% 15%, #4a3200 0%, #2a1c00 30%, #120a00 60%, #000 100%);
}
#bg-flare {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 35% 30% at 50% -5%, rgba(255,210,80,0.22) 0%, transparent 70%),
              radial-gradient(ellipse 60% 20% at 50% 0%, rgba(180,120,20,0.12) 0%, transparent 70%);
}
#bg-canvas {
  position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; transition: opacity 0.4s; background: transparent; mix-blend-mode: screen;
}
#page-frame { position: fixed; inset: 0; z-index: 9800; border: 4px solid rgba(120,60,10,0.5); pointer-events: none; }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading {
  position: fixed; inset: 0; background: #000; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease-out-quart), visibility 0.8s;
}
#loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loading-text { font-family: var(--f-heading); font-size: clamp(1rem, 2.5vw, 1.5rem); color: var(--gold); letter-spacing: 0.1em; }
.loading-bar-track { width: 220px; height: 1.5px; background: rgba(201,168,76,0.2); overflow: hidden; }
.loading-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); width: 0; animation: loadProgress 2.2s var(--ease-out-quart) forwards; }
@keyframes loadProgress { 0%{width:0%} 60%{width:70%} 80%{width:85%} 100%{width:100%} }
.loading-sound-hint { position: absolute; bottom: 36px; font-family: var(--f-heading); font-size: 0.68rem; letter-spacing: 0.2em; color: rgba(255,250,244,0.35); cursor: pointer; transition: color 0.3s; text-transform: uppercase; }
.loading-sound-hint:hover { color: rgba(255,250,244,0.7); }

/* ============================================================
   UI OVERLAY — TOP BAR
   ============================================================ */
#ui-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: space-between; padding: 22px 32px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.6s 0.3s, transform 0.6s 0.3s var(--ease-out-quart);
}
#ui-top.visible { opacity: 1; transform: translateY(0); }

.ui-left { display: flex; align-items: center; gap: 20px; }

.sound-control {
  display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: var(--f-heading); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; transition: color 0.3s; padding: 4px 0;
}
.sound-control:hover { color: var(--cream); }
.sound-control.active { color: var(--gold); }
.waveform-icon { width: 22px; height: 14px; }
.waveform-bar { transform-origin: bottom; }
.sound-control.active .waveform-bar:nth-child(1) { animation: wave 0.8s ease-in-out infinite; }
.sound-control.active .waveform-bar:nth-child(2) { animation: wave 0.8s ease-in-out 0.1s infinite; }
.sound-control.active .waveform-bar:nth-child(3) { animation: wave 0.8s ease-in-out 0.2s infinite; }
.sound-control.active .waveform-bar:nth-child(4) { animation: wave 0.8s ease-in-out 0.15s infinite; }
@keyframes wave { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1.2)} }

#main-nav { display: flex; gap: 28px; align-items: center; }
#main-nav a { font-family: var(--f-heading); font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color 0.3s; }
#main-nav a:hover { color: var(--cream); }
#main-nav a.nav-cta { color: var(--gold); border: 1px solid rgba(201,168,76,0.3); padding: 4px 14px; border-radius: 9999px; }
#main-nav a.nav-cta:hover { color: var(--cream); border-color: rgba(201,168,76,0.7); }

/* Lang switcher */
.lang-switcher { display: flex; gap: 4px; align-items: center; }
.lang-btn { background: none; border: none; cursor: pointer; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(255,250,244,0.3); padding: 3px 6px; transition: color 0.3s; text-transform: uppercase; }
.lang-btn:hover { color: rgba(255,250,244,0.7); }
.lang-btn.active { color: var(--gold); border-bottom: 1px solid var(--gold-dark); }
.lang-sep { color: rgba(255,250,244,0.15); font-size: 0.5rem; font-family: var(--f-mono); }

#ui-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9500;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 22px 32px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s 0.5s, transform 0.6s 0.5s var(--ease-out-quart); pointer-events: none;
}
#ui-bottom.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#copyright { font-family: var(--f-mono); font-size: 0.6rem; color: rgba(255,250,244,0.28); letter-spacing: 0.1em; }
.social-links { display: flex; gap: 16px; align-items: center; }
.social-links a { color: rgba(255,250,244,0.35); transition: color 0.3s; display: flex; align-items: center; }
.social-links a:hover { color: var(--cream); }
.social-links svg { width: 16px; height: 16px; fill: currentColor; }

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
main { position: relative; z-index: 10; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  height: 100vh; min-height: 600px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; text-align: center; padding: 80px 20px;
}
.hero-tagline { font-family: var(--f-heading); font-size: clamp(0.7rem,1.5vw,0.95rem); letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 28px; opacity: 0; transform: translateY(-10px); animation: fadeUp 0.9s 0.4s var(--ease-out-quart) forwards; }
.title-wrapper { position: relative; margin-bottom: 18px; opacity: 0; animation: fadeUp 1.1s 0.6s var(--ease-out-quart) forwards; }
.title-shadow { position: absolute; inset: 0; font-family: var(--f-display); font-size: clamp(2rem,6.5vw,6.5rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; color: #5a3800; text-shadow: 1px 1px 0 #4a2e00, 2px 2px 0 #3d2400, 3px 3px 0 #301b00, 4px 4px 0 #261300, 5px 5px 1px #1a0d00, 6px 6px 2px rgba(0,0,0,.6), 8px 8px 4px rgba(0,0,0,.4), 12px 12px 12px rgba(0,0,0,.3); user-select: none; pointer-events: none; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.ordo-title { font-family: var(--f-display); font-size: clamp(2rem,6.5vw,6.5rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; white-space: nowrap; position: relative; z-index: 1; background: linear-gradient(90deg,#8b6914 0%,#c9a84c 15%,#f9eca0 30%,#fff 36%,#f9eca0 42%,#d4a843 58%,#8b6914 72%,#c9a84c 85%,#f5e06a 100%); background-size: 250% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 18px rgba(201,168,76,.55)) drop-shadow(0 0 50px rgba(139,105,20,.28)); animation: metalShimmer 7s ease-in-out infinite alternate; }
@keyframes metalShimmer { 0%{background-position:0% center} 100%{background-position:100% center} }
.hero-subtitle { font-family: var(--f-heading); font-size: clamp(0.55rem,1.2vw,0.8rem); letter-spacing: 0.35em; color: rgba(201,168,76,0.6); text-transform: uppercase; margin-bottom: 52px; opacity: 0; animation: fadeUp 0.9s 0.9s var(--ease-out-quart) forwards; }

.cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--btn-bg); color: #000; text-decoration: none; font-family: var(--f-heading); font-size: clamp(0.75rem,1.5vw,1rem); font-weight: 600; letter-spacing: 0.12em; padding: 14px 34px 16px; border-radius: 9999px; border: none; cursor: pointer; transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s; opacity: 0; animation: fadeUp 0.9s 1.1s var(--ease-out-quart) forwards; position: relative; overflow: hidden; }
.cta-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-100%); transition:transform .5s; }
.cta-btn:hover::before { transform:translateX(100%); }
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,248,155,.3),0 0 60px rgba(201,168,76,.2); }
.cta-diamond { font-size: 0.7em; opacity: 0.7; }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.content-section { position: relative; background: rgba(0,0,0,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border-gold); padding: 100px 0; }
.content-section:last-of-type { border-bottom: 1px solid var(--border-gold); }
.section-inner { max-width: 860px; margin: 0 auto; padding: 0 32px; }
.section-overline { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.35em; color: rgba(201,168,76,0.5); text-transform: uppercase; margin-bottom: 16px; display: block; }
.section-title { font-family: var(--f-display); font-size: clamp(1.6rem,4vw,3rem); font-weight: 700; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 48px; line-height: 1.1; }
.ornament-divider { text-align: center; color: rgba(201,168,76,0.4); letter-spacing: 0.5em; font-size: 0.9rem; margin: 40px 0; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out-quart), transform 0.8s var(--ease-out-quart); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto-body { font-family: var(--f-body); font-size: clamp(1rem,1.8vw,1.2rem); line-height: 1.85; color: rgba(255,250,244,0.88); text-align: justify; margin-bottom: 36px; }
.manifesto-body p { margin-bottom: 1.4em; }
.manifesto-body p:first-of-type::first-letter { font-family: var(--f-display); font-size: 5.5em; float: left; line-height: 0.75; margin: 4px 12px -4px 0; color: var(--gold); filter: drop-shadow(0 0 12px rgba(201,168,76,.5)); }
.pull-quote { border-left: 2px solid var(--gold-dark); padding: 20px 28px; margin: 40px 0; font-style: italic; font-size: clamp(0.95rem,1.7vw,1.15rem); color: rgba(255,250,244,0.7); line-height: 1.7; }
.pull-quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(201,168,76,0.5); text-transform: uppercase; }

/* Threat Index */
.threat-index { margin-top: 60px; padding: 36px 40px; border: 1px solid rgba(139,0,0,0.5); background: rgba(139,0,0,0.07); text-align: center; }
.threat-overline { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.4em; color: rgba(200,80,50,0.6); text-transform: uppercase; margin-bottom: 12px; }
.threat-number { font-family: var(--f-display); font-size: clamp(4rem,10vw,7rem); color: var(--red-bright); line-height: 1; text-shadow: 0 0 40px rgba(204,34,0,.6),0 0 80px rgba(204,34,0,.2); margin-bottom: 8px; }
.threat-number::after { content:'%'; font-size:0.4em; color:rgba(204,34,0,.7); vertical-align:super; margin-left:4px; }
.threat-bar-track { width:100%; max-width:360px; height:3px; background:rgba(139,0,0,.2); margin:0 auto 16px; }
.threat-bar-fill { height:100%; background:linear-gradient(90deg,#5a0000,var(--red-bright)); width:0%; transition:width 2s var(--ease-out-quart) 0.3s; }
.threat-status { font-family: var(--f-heading); font-size: 0.75rem; letter-spacing: 0.3em; color: var(--red-bright); text-transform: uppercase; }

/* ============================================================
   PRAECEPTA
   ============================================================ */
.commandment-list { display: flex; flex-direction: column; }
.commandment { display: grid; grid-template-columns: 80px 1fr; gap: 0 24px; padding: 28px 0; border-bottom: 1px solid var(--border-gold); }
.commandment:first-child { border-top: 1px solid var(--border-gold); }
.cmd-numeral { font-family: var(--f-display); font-size: 1.4rem; color: rgba(201,168,76,.4); padding-top: 2px; line-height: 1; }
.cmd-latin { font-family: var(--f-body); font-style: italic; font-size: clamp(0.95rem,1.7vw,1.1rem); color: var(--cream); line-height: 1.6; margin-bottom: 8px; }
.cmd-sub { font-family: var(--f-mono); font-size: 0.72rem; color: rgba(255,250,244,.45); letter-spacing: 0.05em; line-height: 1.6; }
.cmd-zh-title { font-family: var(--f-zh); font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 600; color: var(--cream); margin-bottom: 10px; line-height: 1.4; }
.cmd-zh-body { font-family: var(--f-zh); font-size: clamp(0.85rem, 1.4vw, 1rem); color: rgba(255,250,244,0.72); line-height: 2; }

/* ============================================================
   HAERESES
   ============================================================ */
.heresy-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 24px; }
.heresy-card { border: 1px solid rgba(139,0,0,.35); background: rgba(80,0,0,.06); padding: 32px 28px; position: relative; overflow: hidden; transition: border-color .3s,background .3s; cursor: default; }
.heresy-card:hover { border-color: rgba(204,34,0,.6); background: rgba(80,0,0,.12); }
.heresy-card::before { content:'DAMNATA'; position:absolute; top:20px; right:-30px; background:rgba(139,0,0,.9); color:rgba(255,200,200,.9); font-family:var(--f-heading); font-size:.55rem; letter-spacing:.3em; padding:4px 40px; transform:rotate(30deg); opacity:0; transition:opacity .3s; }
.heresy-card:hover::before { opacity: 1; }
.heresy-num { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.35em; color: rgba(200,80,50,.5); text-transform: uppercase; margin-bottom: 16px; }
.heresy-title { font-family: var(--f-heading); font-size: 1rem; letter-spacing: 0.06em; color: rgba(255,180,160,.85); margin-bottom: 16px; line-height: 1.4; }
.heresy-desc { font-family: var(--f-body); font-size: 0.88rem; color: rgba(255,250,244,.55); line-height: 1.7; font-style: italic; }

/* ============================================================
   SCRIPTURAE
   ============================================================ */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1px; border: 1px solid var(--border-gold); }
.article-card { padding: 28px 24px; border-right: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold); transition: background .3s; cursor: pointer; position: relative; overflow: hidden; }
.article-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,.06) 0%,transparent 50%); opacity:0; transition:opacity .3s; }
.article-card:hover::after { opacity: 1; }
.article-card:hover { background: rgba(201,168,76,.04); }
.article-tag { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.3em; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 12px; display: inline-block; border: 1px solid rgba(139,105,20,.4); padding: 3px 8px; }
.article-title { font-family: var(--f-heading); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--cream); margin-bottom: 12px; line-height: 1.45; }
.article-excerpt { font-family: var(--f-body); font-size: 0.82rem; color: var(--text-dim); line-height: 1.65; font-style: italic; }
.article-arrow { margin-top: 16px; font-family: var(--f-mono); font-size: 0.6rem; color: rgba(201,168,76,.4); letter-spacing: 0.2em; text-transform: uppercase; transition: color .3s, letter-spacing .3s; }
.article-card:hover .article-arrow { color: var(--gold); letter-spacing: 0.35em; }

/* ============================================================
   SACRAMENTUM / OATH
   ============================================================ */
#sacramentum .oath-container { border: 1px solid var(--border-gold); padding: 52px 48px; text-align: center; position: relative; max-width: 680px; margin: 0 auto; }
#sacramentum .oath-container::before { content:'✦'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.9); padding:0 16px; color:var(--gold-dark); font-size:1.1rem; }
#sacramentum .oath-text { font-family: var(--f-body); font-style: italic; font-size: clamp(0.9rem,1.6vw,1.05rem); color: rgba(255,250,244,.78); line-height: 2; margin-bottom: 40px; }
#sacramentum .oath-text p { margin-bottom: 0.6em; }
.oath-placeholder { display:inline-block; border-bottom:1px solid rgba(201,168,76,.4); min-width:120px; color:rgba(201,168,76,.6); }
.wax-seal-btn { display:flex; flex-direction:column; align-items:center; gap:14px; background:none; border:none; cursor:pointer; margin:0 auto; transition:transform .3s var(--ease-out-quart); position:relative; }
.wax-seal-btn:hover { transform: scale(1.05); }
.seal-circle { width:90px; height:90px; background:radial-gradient(circle at 40% 35%,#cc2200,#8b0000 50%,#4a0000 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(139,0,0,.5),0 0 40px rgba(139,0,0,.2); transition:box-shadow .3s; }
.wax-seal-btn:hover .seal-circle { box-shadow:0 6px 28px rgba(204,34,0,.6),0 0 60px rgba(204,34,0,.3); }
.seal-glyph { font-family:var(--f-display); font-size:2rem; color:rgba(255,220,200,.9); text-shadow:0 1px 4px rgba(0,0,0,.5); user-select:none; }
.seal-label { font-family:var(--f-heading); font-size:.62rem; letter-spacing:.35em; color:var(--text-dim); text-transform:uppercase; }
#membership { margin-top:40px; opacity:0; transform:translateY(12px); transition:opacity .8s var(--ease-out-quart),transform .8s var(--ease-out-quart); }
#membership.revealed { opacity:1; transform:translateY(0); }
.membership-inner { border:1px solid rgba(201,168,76,.3); padding:28px 36px; display:inline-block; background:rgba(0,0,0,.4); }
.membership-rank { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.4em; color:var(--gold-dark); text-transform:uppercase; margin-bottom:10px; }
.membership-number { font-family:var(--f-display); font-size:clamp(1.2rem,3vw,1.8rem); color:var(--gold); letter-spacing:.1em; text-shadow:0 0 20px rgba(201,168,76,.4); margin-bottom:12px; }
.membership-text { font-family:var(--f-body); font-style:italic; font-size:.88rem; color:var(--text-dim); line-height:1.5; }

.confetti-particle { position:fixed; pointer-events:none; z-index:9999; font-size:.8rem; color:var(--gold); animation:confettiFall 2s ease-out forwards; user-select:none; }
@keyframes confettiFall { 0%{opacity:1;transform:translateY(0) rotate(0)} 100%{opacity:0;transform:translateY(120px) rotate(360deg)} }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:rgba(0,0,0,.95); border-top:1px solid rgba(201,168,76,.1); padding:48px 32px 60px; text-align:center; }
.disclaimer { font-family:var(--f-heading); font-size:.6rem; letter-spacing:.25em; color:rgba(255,250,244,.2); text-transform:uppercase; margin-bottom:8px; font-style:italic; }
.disclaimer-tiny { font-family:var(--f-mono); font-size:.52rem; color:rgba(255,250,244,.1); letter-spacing:.1em; line-height:1.6; }

/* ============================================================
   PAGE-SPECIFIC: Auth / Onboarding / Rites / Profile
   ============================================================ */
.page-section {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 10; padding: 120px 24px 80px;
}
.page-card {
  background: rgba(0,0,0,0.82); backdrop-filter: blur(16px);
  border: 1px solid var(--border-gold); padding: 52px 48px;
  max-width: 560px; width: 100%; text-align: center;
}
.page-overline { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.4em; color: rgba(201,168,76,0.5); text-transform: uppercase; margin-bottom: 16px; }
.page-title-sm { font-family: var(--f-display); font-size: clamp(1.4rem,3vw,2rem); color: var(--gold); margin-bottom: 12px; }
.page-desc { font-family: var(--f-body); font-style: italic; font-size: 0.95rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 36px; }

.ordo-input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.25);
  color: var(--cream); font-family: var(--f-mono); font-size: 0.88rem; letter-spacing: 0.05em;
  padding: 14px 18px; outline: none; transition: border-color 0.3s;
  margin-bottom: 16px;
}
.ordo-input:focus { border-color: rgba(201,168,76,0.6); }
.ordo-input::placeholder { color: rgba(255,250,244,0.25); }

.ordo-btn {
  width: 100%; background: var(--btn-bg); color: #000; border: none; cursor: pointer;
  font-family: var(--f-heading); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 9999px; transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.ordo-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-100%); transition:transform .5s; }
.ordo-btn:hover::before { transform:translateX(100%); }
.ordo-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,248,155,.3); }
.ordo-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.ordo-btn-ghost {
  background: none; border: 1px solid var(--border-gold); color: var(--text-dim);
  font-family: var(--f-heading); font-size: 0.72rem; letter-spacing: 0.15em; cursor: pointer;
  padding: 10px 24px; border-radius: 9999px; transition: border-color 0.3s, color 0.3s;
  text-transform: uppercase;
}
.ordo-btn-ghost:hover { border-color: rgba(201,168,76,0.6); color: var(--cream); }

.status-msg { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.05em; margin-top: 16px; min-height: 1.2em; }
.status-msg.ok  { color: rgba(130,200,130,0.8); }
.status-msg.err { color: rgba(200,100,100,0.8); }

/* Progress steps */
.rite-steps { display: flex; gap: 0; margin-bottom: 48px; }
.rite-step { flex: 1; text-align: center; position: relative; }
.rite-step::after { content:''; position:absolute; top:16px; left:50%; width:100%; height:1px; background:var(--border-gold); z-index:0; }
.rite-step:last-child::after { display: none; }
.step-dot { width:32px; height:32px; border-radius:50%; border:1px solid var(--border-gold); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-family:var(--f-mono); font-size:0.65rem; color:var(--text-dim); position:relative; z-index:1; background:var(--bg); transition:all 0.4s; }
.rite-step.done .step-dot  { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.1); }
.rite-step.active .step-dot { border-color:var(--gold); color:var(--bg); background:var(--gold); }
.step-label { font-family:var(--f-mono); font-size:0.55rem; letter-spacing:0.15em; color:var(--text-dim); text-transform:uppercase; }
.rite-step.done .step-label, .rite-step.active .step-label { color:var(--gold); }

/* Merit / profile */
.merit-bar-track { width:100%; height:4px; background:rgba(201,168,76,0.12); border-radius:2px; overflow:hidden; margin:8px 0 4px; }
.merit-bar-fill  { height:100%; background:linear-gradient(90deg,var(--gold-dark),var(--gold-bright)); border-radius:2px; transition:width 1s var(--ease-out-quart); }
.rank-badge { display:inline-block; font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(201,168,76,0.35); padding:3px 12px; border-radius:2px; background:rgba(201,168,76,0.06); }

/* ============================================================
   HOMEPAGE — Canon grid & misc
   ============================================================ */
.canon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.canon-card { display: block; border: 1px solid var(--border-gold); padding: 32px 28px; text-decoration: none; transition: border-color .3s, background .3s; }
.canon-card:hover { border-color: var(--gold); background: rgba(201,168,76,0.05); }
.canon-card--heresy { border-color: rgba(139,0,0,.35); }
.canon-card--heresy:hover { border-color: rgba(204,34,0,.6); background: rgba(80,0,0,.1); }
.canon-card-num { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.4em; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 14px; }
.canon-card-title { font-family: var(--f-display); font-size: 1.1rem; color: var(--gold); margin-bottom: 12px; letter-spacing: 0.04em; }
.canon-card-desc { font-family: var(--f-body); font-size: 0.88rem; color: var(--text-dim); line-height: 1.7; }
.read-more-link { font-family: var(--f-heading); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold); text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--gold-dark); padding-bottom: 2px; transition: color .3s; }
.read-more-link:hover { color: var(--cream); }
.nav-cta { color: var(--gold) !important; border: 1px solid rgba(201,168,76,0.4); padding: 4px 14px !important; border-radius: 9999px; transition: border-color .3s, color .3s !important; }
.nav-cta:hover { color: var(--cream) !important; border-color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:640px){
  #ui-top,#ui-bottom { padding:16px 20px; }
  #main-nav { display:none; }
  .section-inner { padding:0 20px; }
  #hero { padding:80px 16px 100px; }
  .ordo-title,.title-shadow { font-size:clamp(1.5rem,11vw,4rem); white-space:normal; text-align:center; }
  .commandment { grid-template-columns:56px 1fr; }
  #sacramentum .oath-container { padding:36px 24px; }
  .heresy-grid { grid-template-columns:1fr; }
  .page-card { padding:36px 24px; }
}