/* ── THE TWO WARM MATERIALS. Cold stone for chrome, warm parchment for words. ──
   Generated as CSS gradients + inline SVG. No raster. Hexes here are the
   parchment/gold material ramps; everything else stays on tokens. */

:root {
  --parchment:      #e7d8b2;
  --parchment-hi:   #f2e7c8;
  --parchment-dk:   #cdb98c;
  --parchment-ink:  #3a2c15;
  --parchment-dim:  #6d5a35;
}

/* seamless warm tile */
.parchment {
  position: relative;
  color: var(--parchment-ink);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,250,230,.5), transparent 60%),
    radial-gradient(140% 100% at 50% 115%, rgba(122,84,20,.28), transparent 55%),
    radial-gradient(60% 45% at 12% 88%, rgba(122,84,20,.14), transparent 70%),
    radial-gradient(55% 40% at 90% 10%, rgba(122,84,20,.12), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--parchment-hi) 0%, var(--parchment) 45%, var(--parchment-dk) 100%);
  background-size: cover, cover, cover, cover, 160px 160px, cover;
  box-shadow: inset 0 0 40px rgba(122,84,20,.18), 0 18px 40px rgba(0,0,0,.5);
  font-family: var(--body);
}
.parchment h1, .parchment h2, .parchment h3 { color: var(--parchment-ink); }
.parchment a { color: #7a4f12; text-decoration: underline; }
.parchment a:hover { color: #a06bff; }
.parchment .muted { color: var(--parchment-dim); }

/* torn-edge caps: jagged masks on solid strips of the same material */
.parchment--torn { margin: 12px 0; }
.parchment--torn::before, .parchment--torn::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='12'%3E%3Cpath d='M0 12 L6 4 L14 9 L23 2 L31 8 L42 3 L50 10 L61 4 L70 9 L79 1 L88 8 L99 3 L108 9 L118 2 L127 7 L134 4 L140 12 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 140px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='12'%3E%3Cpath d='M0 12 L6 4 L14 9 L23 2 L31 8 L42 3 L50 10 L61 4 L70 9 L79 1 L88 8 L99 3 L108 9 L118 2 L127 7 L134 4 L140 12 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 140px 12px;
}
.parchment--torn::before { top: -11px; }
.parchment--torn::after {
  bottom: -11px; transform: scaleY(-1);
  background: linear-gradient(180deg, var(--parchment-dk), var(--parchment));
}

/* ── the aged-gold filigree frame, 9-slice via border-image ── */
.filigree {
  border-style: solid;
  border-width: 22px;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe49a'/%3E%3Cstop offset='.45' stop-color='%23c99a3e'/%3E%3Cstop offset='1' stop-color='%238a651f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)'%3E%3Crect x='5' y='5' width='80' height='80' stroke-width='2.4'/%3E%3Crect x='11' y='11' width='68' height='68' stroke-width='.9'/%3E%3Ccircle cx='15' cy='15' r='4.5' stroke-width='1'/%3E%3Ccircle cx='75' cy='15' r='4.5' stroke-width='1'/%3E%3Ccircle cx='15' cy='75' r='4.5' stroke-width='1'/%3E%3Ccircle cx='75' cy='75' r='4.5' stroke-width='1'/%3E%3C/g%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M15 9.5 L20.5 15 L15 20.5 L9.5 15 Z'/%3E%3Cpath d='M75 9.5 L80.5 15 L75 20.5 L69.5 15 Z'/%3E%3Cpath d='M15 69.5 L20.5 75 L15 80.5 L9.5 75 Z'/%3E%3Cpath d='M75 69.5 L80.5 75 L75 80.5 L69.5 75 Z'/%3E%3Cpath d='M45 1.5 L49 8 L45 12.5 L41 8 Z'/%3E%3Cpath d='M45 77.5 L49 82 L45 88.5 L41 82 Z'/%3E%3Cpath d='M1.5 45 L8 41 L12.5 45 L8 49 Z'/%3E%3Cpath d='M77.5 45 L82 41 L88.5 45 L82 49 Z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-slice: 30;
  border-image-width: 22px;
  border-image-repeat: round;
}
.filigree--hairline {
  border-width: 10px;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe49a'/%3E%3Cstop offset='.5' stop-color='%23c99a3e'/%3E%3Cstop offset='1' stop-color='%238a651f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='4.5' y='4.5' width='51' height='51' fill='none' stroke='url(%23g)' stroke-width='1.1'/%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M10 6.5 L13.5 10 L10 13.5 L6.5 10 Z'/%3E%3Cpath d='M50 6.5 L53.5 10 L50 13.5 L46.5 10 Z'/%3E%3Cpath d='M10 46.5 L13.5 50 L10 53.5 L6.5 50 Z'/%3E%3Cpath d='M50 46.5 L53.5 50 L50 53.5 L46.5 50 Z'/%3E%3C/g%3E%3C/svg%3E");
  border-image-slice: 20;
  border-image-width: 10px;
  border-image-repeat: round;
}