/* ═══════════════════════════════════════════════════════════════════
   discordianpope.com — shared Curia stylesheet
   OFFICIAL THEME OF THE HOLY SEE OF DISCORD.
   Ivory letterhead, Vatican gold, cardinal crimson, inscription type.
   The more official it looks, the funnier it is. This is doctrine.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/Cinzel.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}

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

:root {
  --gold:         #c9a227;
  --gold-light:   #e3c568;
  --gold-dark:    #a07f1a;
  --crimson:      #8e1b1b;
  --crimson-deep: #5c0f0f;
  --ivory:        #f2ecdd;
  --paper:        #fffdf6;
  --ink:          #241c10;
  --ink-soft:     #6b5a3e;
  --eris-pink:    #cc00a0;  /* the network cipher, adjusted for ivory */
  --heading:      'Cinzel', 'Times New Roman', Times, serif;
  --body:         Georgia, 'Times New Roman', Times, serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background:
    repeating-linear-gradient(90deg,
      rgba(36, 28, 16, 0.016) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at top, #f7f2e6 0%, var(--ivory) 70%);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* The bar of office: Vatican gold and white, above all things */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--gold) 0 50%, #fdfaf1 50% 100%);
  border-bottom: 1px solid var(--gold-dark);
  z-index: 10;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 2rem;
  text-align: center;
}

/* ─── The instrument (official document card) ─── */
.certificate {
  background: var(--paper);
  color: var(--ink);
  max-width: 44rem;
  width: 100%;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3rem);
  position: relative;
  border: 3px double var(--gold);
  box-shadow:
    0 0 0 1px rgba(160, 127, 26, 0.35),
    0 10px 35px rgba(36, 28, 16, 0.18);
}
.certificate::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--crimson);
  opacity: 0.55;
  pointer-events: none;
}
.certificate::after {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px dotted var(--gold-dark);
  pointer-events: none;
}
.certificate--wide { max-width: 52rem; }

/* Coat of arms / emblem row at the head of a document */
.crown {
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  line-height: 1;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 3px 6px rgba(36, 28, 16, 0.25));
}
.arms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.arms .key {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  color: var(--gold-dark);
  transform: rotate(-24deg);
}
.arms .key + .key,
.arms .key.right { transform: rotate(24deg) scaleX(-1); }
.arms img {
  width: clamp(52px, 12vw, 72px);
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(36, 28, 16, 0.25));
}

.header-line {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--crimson);
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.latin-line {
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.8rem, 1.9vw, 0.92rem);
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

h1 {
  font-family: var(--heading);
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(1.7rem, 5.5vw, 2.9rem);
  line-height: 1.12;
  margin: 0.4rem 0 0.6rem;
  letter-spacing: 0.04em;
}

.flourish {
  color: var(--gold-dark);
  font-size: 1.25rem;
  margin: 0.5rem 0 1.25rem;
  letter-spacing: 0.5em;
}

.body-text {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.body-text strong { color: var(--crimson); }

.pope-quote {
  font-style: italic;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: var(--crimson-deep);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 0.8rem 0;
  margin: 1.25rem auto;
  max-width: 32rem;
}

/* Wax seal */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  outline: 1px solid rgba(160, 127, 26, 0.4);
  outline-offset: 3px;
  background: radial-gradient(circle at 35% 30%, #a82727 0%, var(--crimson) 45%, var(--crimson-deep) 100%);
  color: var(--gold-light);
  font-family: var(--heading);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  margin: 0.5rem 0.55rem 1.25rem;
  letter-spacing: 0.08em;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 2px 5px rgba(36,28,16,0.3);
}

/* ─── Buttons: restrained, curial ─── */
a.cta, button.cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: linear-gradient(180deg, #9e2222 0%, var(--crimson-deep) 100%);
  color: #f7ecd8;
  font-family: var(--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 1px solid var(--gold);
  outline: 1px solid var(--crimson-deep);
  border-radius: 2px;
  transition: filter 0.15s, transform 0.15s;
  font-size: clamp(0.85rem, 1.9vw, 0.98rem);
  cursor: pointer;
}
a.cta:hover, button.cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
a.cta:active, button.cta:active { filter: brightness(0.94); transform: translateY(1px); }

.cta-secondary {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: transparent;
  color: var(--crimson);
  font-family: var(--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid var(--crimson);
  border-radius: 2px;
  transition: background 0.15s, transform 0.15s;
  font-size: clamp(0.8rem, 1.7vw, 0.9rem);
  cursor: pointer;
}
.cta-secondary:hover { background: rgba(142, 27, 27, 0.07); transform: translateY(-1px); }
.cta-secondary:active { transform: translateY(1px); }

.cta-tertiary {
  display: inline-block;
  color: var(--crimson);
  font-style: italic;
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  margin-top: 0.6rem;
}
.cta-tertiary:hover { color: var(--gold-dark); }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem auto 1.25rem;
  max-width: 24rem;
}
@media (min-width: 520px) {
  .btn-row { flex-direction: row; max-width: 30rem; justify-content: center; }
  .btn-row > * { flex: 1; }
}

/* ─── Form pieces ─── */
.field-label {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--crimson);
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  text-align: center;
}

.name-frame {
  background: rgba(201, 162, 39, 0.05);
  border: 3px double var(--gold);
  padding: 1.2rem 1rem;
  margin: 0.4rem 0 1rem;
}

.grand-input {
  font-family: var(--body);
  font-style: italic;
  font-weight: bold;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--gold-dark);
  border-bottom: 2px solid var(--crimson);
  border-radius: 2px;
  text-align: center;
  width: 100%;
  max-width: 36rem;
  padding: 0.5rem 0.8rem;
  margin: 0 auto;
  display: block;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.grand-input:hover { border-color: var(--crimson); }
.grand-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
  border-color: var(--crimson);
}

select.grand-select {
  font-family: var(--body);
  font-weight: bold;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--gold-dark);
  border-bottom: 2px solid var(--crimson);
  border-radius: 2px;
  text-align: center;
  padding: 0.5rem 0.8rem;
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}
select.grand-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
  border-color: var(--crimson);
}

.status-line {
  color: var(--crimson);
  font-size: 0.85rem;
  font-style: italic;
  min-height: 1.2em;
  margin-top: 0.5rem;
}

/* ─── Proclamation output (decrees etc.) ─── */
.proclamation {
  background: #fff;
  border: 1px solid var(--gold-dark);
  border-left: 4px solid var(--crimson);
  padding: 1.2rem 1.3rem;
  margin: 1rem auto;
  max-width: 36rem;
  text-align: left;
  font-size: clamp(0.98rem, 2.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink);
}
.proclamation .whereas { display: block; margin-bottom: 0.55rem; }
.proclamation .therefore {
  display: block;
  margin-top: 0.8rem;
  font-weight: bold;
  color: var(--crimson);
}

/* ─── Share block ─── */
.share-block {
  margin-top: 1.1rem;
  padding: 1rem 1rem 1.1rem;
  background: rgba(201, 162, 39, 0.06);
  border: 3px double var(--gold);
  text-align: center;
}
.share-block .share-label {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--crimson);
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.share-row {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0.35rem auto 0.5rem;
}
.share-row input[type=text] {
  flex: 1;
  min-width: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--gold-dark);
  border-radius: 2px;
  padding: 0.45rem 0.6rem;
}
.share-row input[type=text]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
  border-color: var(--crimson);
}
.copy-btn {
  flex: none;
  background: transparent;
  color: var(--crimson);
  border: 1px solid var(--crimson);
  border-radius: 2px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.copy-btn:hover { background: rgba(142, 27, 27, 0.08); }
.share-note {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* ─── Fine print & footer ─── */
.fine-print {
  margin-top: 1.5rem;
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(36, 28, 16, 0.55);
  line-height: 1.45;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

footer {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-align: center;
}
footer .gold { color: var(--gold-dark); font-weight: bold; }
footer a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
footer a:hover { color: var(--crimson); }

/* ─── Network strip ─── */
.network-strip {
  margin: 0 auto 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.9;
  max-width: 38rem;
}
.network-strip .label {
  color: var(--gold-dark);
  font-family: var(--heading);
  font-weight: 700;
  margin-right: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.network-strip a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.network-strip a:hover { color: var(--crimson); border-bottom-style: solid; }
.network-strip .current {
  color: var(--eris-pink);
  font-weight: bold;
  text-decoration: none;
  border-bottom: none;
}
.network-strip .sep { margin: 0 0.4em; opacity: 0.45; }

/* ─── Curia navigation (tool ↔ tool ↔ handbook) ─── */
.curia-nav {
  margin: 0 auto 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
  line-height: 2;
  max-width: 44rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid rgba(160, 127, 26, 0.45);
  border-bottom: 1px solid rgba(160, 127, 26, 0.45);
}
.curia-nav .label {
  color: var(--crimson);
  font-family: var(--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-right: 0.5em;
}
.curia-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  margin: 0 0.15em;
  transition: color 0.2s;
}
.curia-nav a:hover { color: var(--crimson); border-bottom-style: solid; }
.curia-nav .here {
  color: var(--crimson);
  font-weight: bold;
  border-bottom: none;
  margin: 0 0.15em;
}
.curia-nav .sep { margin: 0 0.35em; opacity: 0.45; }

/* ─── Handbook prose (long-form reading inside the document) ─── */
.handbook-prose { text-align: left; }
.handbook-prose section { margin: 2rem 0; }
.handbook-prose h2 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: var(--crimson-deep);
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.3rem;
  margin-bottom: 0.8rem;
}
.handbook-prose h3 {
  font-family: var(--heading);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--crimson);
  letter-spacing: 0.04em;
  margin: 1.1rem 0 0.4rem;
}
.handbook-prose p, .handbook-prose li {
  font-size: clamp(0.98rem, 2.2vw, 1.08rem);
  line-height: 1.68;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.handbook-prose ul, .handbook-prose ol { padding-left: 1.4rem; margin-bottom: 0.8rem; }
.handbook-prose li { margin-bottom: 0.45rem; }
.handbook-prose a {
  color: var(--crimson);
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-dark);
}
.handbook-prose a:hover { color: var(--gold-dark); border-bottom-style: solid; }
.handbook-prose strong { color: var(--crimson-deep); }
.handbook-prose blockquote {
  font-style: italic;
  color: var(--crimson-deep);
  border-left: 3px solid var(--gold);
  padding: 0.3rem 0 0.3rem 1rem;
  margin: 0.9rem 0;
}
.handbook-prose dl dt {
  font-weight: bold;
  color: var(--crimson);
  margin-top: 0.8rem;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
}
.handbook-prose dl dd {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(160, 127, 26, 0.4);
  font-size: clamp(0.95rem, 2.1vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.handbook-prose .toc {
  background: rgba(201, 162, 39, 0.06);
  border: 3px double var(--gold);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.handbook-prose .toc ol { margin: 0.3rem 0 0.2rem 1.2rem; }
.handbook-prose .toc li { margin-bottom: 0.25rem; }