/* judge.bar - Victorian Legal Codex */

:root {
  --deep-ground: #1a1017;
  --warm-ground: #231a1e;
  --aged-cream: #f0e6d3;
  --accent-gold: #a89274;
  --judicial-burgundy: #6b2737;
  --highlight-cream: #e8d5b8;
  --shadow-umber: #130c0f;
  --muted-rose: #8c5a5a;
  --panel-dark: #2a1f23;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--deep-ground);
  color: var(--aged-cream);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* === CODEX PAGE GRID === */
.codex-page {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 8px 2fr;
  min-height: 100vh;
  padding: clamp(24px, 4vw, 64px);
  position: relative;
  clip-path: inset(8% 4% 8% 4% round 2px);
  transition: clip-path 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.codex-page.codex-visible {
  clip-path: inset(0% 0% 0% 0%);
}

/* === MARGIN COLUMN === */
.margin-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0.5rem;
}

.margin-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 1rem;
}

.vertical-rule {
  flex: 1;
  width: 1px;
  background: var(--judicial-burgundy);
  position: relative;
}

.vertical-rule::before,
.vertical-rule::after {
  content: '';
  position: absolute;
  left: -2px;
  width: 5px;
  height: 1px;
  background: var(--accent-gold);
  opacity: 0.4;
}

.vertical-rule::before { top: 0; }
.vertical-rule::after { bottom: 0; }

.fleuron {
  opacity: 0.7;
}

/* === GUTTER === */
.gutter-col {
  background: linear-gradient(to bottom, transparent, var(--judicial-burgundy) 10%, var(--judicial-burgundy) 90%, transparent);
  width: 1px;
  margin: 0 auto;
}

/* === CONTENT COLUMN === */
.content-col {
  padding: clamp(1rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === FRONTISPIECE === */
.frontispiece {
  background: linear-gradient(145deg, var(--deep-ground) 0%, var(--panel-dark) 50%, var(--deep-ground) 100%);
  align-items: center;
}

.frontispiece-content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.scales-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 400px;
  opacity: 0.03;
  pointer-events: none;
}

.ornamental-rule-top,
.ornamental-rule-middle,
.ornamental-rule-bottom {
  display: flex;
  justify-content: center;
  opacity: 0.8;
}

.frontispiece-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 8vw, 96px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aged-cream);
  line-height: 1.1;
}

.frontispiece-maxim {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 4vw, 48px);
  color: var(--deep-ground);
  letter-spacing: 0.04em;
  transition: text-shadow 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.frontispiece-translation {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: clamp(10px, 1.5vw, 14px);
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  text-transform: uppercase;
  opacity: 0.7;
}

/* === BLIND EMBOSS EFFECT === */
.blind-emboss {
  color: var(--deep-ground);
  text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  transition: text-shadow 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.folio-warm .blind-emboss,
.colophon .blind-emboss {
  color: var(--warm-ground);
}

.blind-emboss.emboss-active {
  text-shadow:
    1px 1px 0px var(--panel-dark),
    -1px -1px 0px var(--shadow-umber);
}

.colophon .blind-emboss.emboss-active {
  text-shadow:
    1px 1px 0px #2e2228,
    -1px -1px 0px var(--shadow-umber);
}

/* === FOLIO SECTIONS === */
.folio-dark {
  background-color: var(--deep-ground);
}

.folio-warm {
  background-color: var(--warm-ground);
}

.section-label {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
  display: block;
}

.folio-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--highlight-cream);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.ruled-divider {
  margin-bottom: 2rem;
  width: 100%;
}

.ruled-divider svg {
  display: block;
  width: 100%;
}

.folio-body {
  max-width: 65ch;
}

.folio-body p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-bottom: 0;
}

.folio-body p.indent {
  text-indent: 2em;
}

.folio-body p + p {
  margin-top: 0.25em;
}

.folio-body em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--highlight-cream);
}

/* === MARGINALIA === */
.marginalia-items {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 2rem 0.5rem;
  height: 100%;
  justify-content: center;
}

.marginalia-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
  text-align: center;
}

.marginalia-item.marginalia-visible {
  opacity: 1;
  transform: translateY(0);
}

.marginalia-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--accent-gold);
}

.marginalia-cite {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-rose);
  margin-top: 0.25rem;
}

.marginalia-label {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.fleuron-inline,
.scales-margin {
  display: block;
  margin: 0 auto 0.5rem;
  opacity: 0.7;
}

/* === COLOPHON === */
.colophon {
  background: linear-gradient(145deg, var(--warm-ground) 0%, var(--deep-ground) 50%, var(--warm-ground) 100%);
}

.colophon-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.colophon-ornaments-top,
.colophon-ornaments-bottom {
  opacity: 0.8;
}

.scales-colophon {
  width: clamp(100px, 20vw, 180px);
  margin: 1rem auto;
}

.scales-svg {
  width: 100%;
  height: auto;
}

.scales-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scales-animate .scales-path {
  stroke-dashoffset: 0;
}

.colophon-maxim {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 4vw, 40px);
  color: var(--warm-ground);
  letter-spacing: 0.04em;
}

.colophon-subtitle {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: clamp(10px, 1.5vw, 14px);
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  text-transform: uppercase;
  opacity: 0.7;
}

.colophon-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 6vw, 72px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-ground);
  line-height: 1.1;
}

.colophon-footer {
  margin-top: 1rem;
}

.colophon-label {
  font-family: 'Spectral SC', Georgia, serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted-rose);
  text-transform: uppercase;
}

.colophon-final-ornament {
  margin-top: 1rem;
  opacity: 0.5;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .codex-page {
    grid-template-columns: 1fr;
    padding: clamp(16px, 3vw, 32px);
  }

  .margin-col {
    display: none;
  }

  .gutter-col {
    display: none;
  }

  .folio-body {
    max-width: 100%;
  }

  .frontispiece-title {
    letter-spacing: 0.06em;
  }

  .folio-heading {
    letter-spacing: 0.04em;
  }

  .marginalia-items {
    display: none;
  }
}