/* ---------------------------------------------------------------------
   bytespring.com — "Illuminated Manuscript" theme
   Aged sepia parchment, built entirely from CSS gradients + inline SVG
   noise. No image assets.
--------------------------------------------------------------------- */

:root {
  --ink:        #3b2b1a;
  --ink-faint:  #6b5233;
  --seal:       #7a2020;
  --paper-1:    #ecdcb6;
  --paper-2:    #d9c092;
  --paper-3:    #c7a86e;
  --room:       #14100a;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'IM Fell English', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background-color: var(--room);
  background-image:
    radial-gradient(ellipse at center, #2a2015 0%, var(--room) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.page {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ── Parchment sheet ──────────────────────────────────────────────── */

.parchment {
  position: relative;
  width: 100%;
  max-width: 42rem;
  padding: clamp(2rem, 6vw, 4rem);

  background-color: var(--paper-2);
  background-image:
    /* grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.23  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* mottled stains */
    radial-gradient(ellipse 40% 30% at 12% 18%, rgba(122, 32, 32, 0.08), transparent 70%),
    radial-gradient(ellipse 35% 25% at 88% 82%, rgba(90, 60, 20, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(60, 40, 15, 0.18), transparent 70%),
    /* vignette toward burnt edges */
    radial-gradient(ellipse 90% 85% at 50% 50%, var(--paper-1) 0%, var(--paper-2) 60%, var(--paper-3) 100%);
  background-blend-mode: overlay, normal, normal, normal, normal;

  box-shadow:
    0 0 0 1px rgba(59, 43, 26, 0.25),
    inset 0 0 3.5rem rgba(59, 43, 26, 0.55),
    inset 0 0 0.75rem rgba(59, 43, 26, 0.4),
    0 1.5rem 3rem rgba(0, 0, 0, 0.6);

  clip-path: polygon(
    0.8% 3%, 4% 0.5%, 22% 1.6%, 46% 0.2%, 71% 1.4%, 93% 0%, 99.3% 4.5%,
    98.6% 22%, 100% 48%, 99.1% 74%, 100% 92%, 96% 99.4%,
    78% 98.2%, 55% 100%, 30% 98.6%, 8% 99.6%, 0.3% 95%,
    1.1% 70%, 0% 45%, 1.4% 20%
  );
}

/* ── Wax seal / X mark ────────────────────────────────────────────── */

.seal {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 4vw, 2.25rem);
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--seal);
  border-radius: 47% 53% 51% 49% / 53% 47% 53% 47%;
  color: var(--seal);
  font-family: 'UnifrakturMaguntia', 'IM Fell English', serif;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  opacity: 0.75;
  mix-blend-mode: multiply;
}

/* ── Masthead ─────────────────────────────────────────────────────── */

.masthead {
  text-align: center;
  margin-bottom: 1.5rem;
}

.wordmark {
  font-family: 'UnifrakturMaguntia', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  margin: 0 0 0.6rem;
  color: var(--ink);
  text-shadow: 0.02em 0.02em 0 rgba(59, 43, 26, 0.25);
}

.wordmark .dot {
  color: var(--seal);
}

.tagline {
  margin: 0;
  font-style: italic;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* ── Ornamental rule ──────────────────────────────────────────────── */

.rule {
  border: none;
  height: 1px;
  margin: 1.75rem auto;
  width: 70%;
  background: linear-gradient(
    to right,
    transparent,
    var(--ink-faint) 20%,
    var(--ink-faint) 80%,
    transparent
  );
  opacity: 0.55;
}

/* ── Body copy ────────────────────────────────────────────────────── */

.entry {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  line-height: 1.7;
}

.entry p {
  margin: 0 0 1rem;
}

.drop-cap::first-letter {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 3.2em;
  float: left;
  line-height: 0.75;
  padding: 0.05em 0.12em 0 0;
  color: var(--seal);
}

/* ── Colophon ─────────────────────────────────────────────────────── */

.colophon {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
  opacity: 0.8;
}

.colophon p {
  margin: 0;
}