/*
  components.css
  ---------------
  Reusable visual pieces: the ornate frame, the parchment panel, the
  period-style button, the ruled heading, and the divider ornament.

  All colors/spacing/etc. reference tokens from tokens.css — nothing here
  is hard-coded. No image files are used anywhere; corner and divider
  ornaments are inline SVG (markup lives in the HTML that uses these
  classes), styled here via CSS so their colors stay tokenized. Surface
  grain (metal + parchment) comes from the feTurbulence noise textures
  defined in tokens.css, applied as low-opacity overlay layers.

  2026-09 materials pass, part 2 (correction): the first pass made the
  metal heavy but left it as a bright gold surface, reading as a picture
  frame rather than cast iron/bronze. Corrected here — gold is now trim
  only (a hairline and small accent shapes), the frame/corners/button are
  built from dark, desaturated cast-metal tones, the band is narrower,
  and a small repeating tiled motif gives the band a sculpted, cast feel.
  The parchment panel is untouched in this pass — locked as approved.
*/

/* ===================================================================
   COMPONENT A — Ornate Frame
   .ornate-frame is a thin dark backing; .ornate-frame__inner IS the cast
   metal band (padding = its visible width) — dark, desaturated, with a
   hairline gold trace on its outer edge, a repeating tiled motif for a
   sculpted/cast feel, and a grain overlay. .ornate-frame__content is the
   dark sunken pocket, with its own hairline gold trace on its edge (the
   band's inner trim). Corner ornaments are one hand-authored dark-metal
   bracket with the same hairline trim, reused on all four corners via
   CSS mirroring (scaleX/scaleY) — sized and positioned to flow into the
   band rather than sit on top of it.
   =================================================================== */

.ornate-frame {
  background: var(--color-bronze-deepest);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ornate-frame__inner {
  position: relative;
  z-index: 0; /* pins a local stacking context so the overlay layers stay contained */
  border-radius: var(--radius-md);
  /* The metal band's thickness IS this padding — narrow, a sturdy border
     rather than a wide ornamental moulding. */
  padding: var(--space-3);
  background-image:
    /* repeating sculpted motif — small dark-on-dark faceted diamonds,
       barely noticeable at a glance, clearly there up close */
    var(--texture-rivet-tile),
    /* the bevel itself: light/shadow on a dark surface, never gold */
    linear-gradient(135deg,
      var(--color-metal-rise) 0%,
      var(--color-metal-dark) 45%,
      var(--color-metal-dark) 60%,
      var(--color-bronze-deepest) 100%
    );
  background-repeat: repeat, no-repeat;
  background-size: 14px 14px, 100% 100%;
  box-shadow:
    /* the hairline: gold traces the band's outer edge only, 1px */
    0 0 0 1px var(--color-gold-highlight),
    /* volume expressed in the dark register, not with gold */
    inset 1px 1px 0 var(--color-metal-rise),
    inset -1px -1px 0 var(--color-bronze-deepest),
    inset 6px 6px 10px rgba(255, 246, 220, 0.08),
    inset -6px -6px 10px rgba(0, 0, 0, 0.6);
}

.ornate-frame__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-metal-noise);
  background-size: 130px 130px;
  opacity: var(--opacity-texture-metal);
  mix-blend-mode: overlay;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

.ornate-frame__content {
  position: relative;
  z-index: var(--z-content);
  background: linear-gradient(160deg, var(--color-chrome-dark), var(--color-chrome-mid));
  border-radius: var(--radius-sm);
  /* the inner hairline: gold traces the band's inner edge too, where it
     meets the pocket, so the frame reads as proud of what it surrounds */
  box-shadow:
    0 0 0 1px var(--color-gold-highlight),
    inset 0 4px 10px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  padding: var(--space-4);
}

/* Corner ornament wrapper: sized and offset to flow into the (now much
   narrower) band rather than float above it. Same SVG artwork, mirrored
   per corner. */
.ornate-frame__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: var(--z-content);
}

.ornate-frame__corner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ornate-frame__corner--tl { top: -3px; left: -3px; }
.ornate-frame__corner--tr { top: -3px; right: -3px; transform: scaleX(-1); }
.ornate-frame__corner--bl { bottom: -3px; left: -3px; transform: scaleY(-1); }
.ornate-frame__corner--br { bottom: -3px; right: -3px; transform: scale(-1, -1); }

/* Corner ornament fill colors, tokenized. Same dark cast-metal body as
   the band, with a hairline gold stroke tracing its outer contour AND
   its inner (concave) contour — continuing both of the band's hairlines
   around the bend — plus one small accent boss, slightly more mass than
   the straight band. */
.corner-ornament .co-shadow-cast { fill: rgba(0, 0, 0, 0.5); }
.corner-ornament .co-body { fill: var(--color-metal-dark); }
.corner-ornament .co-highlight-edge { fill: var(--color-metal-rise); }
.corner-ornament .co-shadow-edge { fill: var(--color-bronze-deepest); }
.corner-ornament .co-boss-top { fill: var(--color-metal-rise); }
.corner-ornament .co-boss-bottom { fill: var(--color-bronze-deepest); }
.corner-ornament .co-boss-ring { fill: none; stroke: var(--color-gold-highlight); stroke-width: 0.6; }
.corner-ornament .co-hairline-outer { fill: none; stroke: var(--color-gold-highlight); stroke-width: 1; }
.corner-ornament .co-hairline-inner { fill: none; stroke: var(--color-gold-highlight); stroke-width: 1; }


/* ===================================================================
   COMPONENT B — Parchment Panel
   Aged, dirty paper: darker/yellower base, irregular mottling with no
   repeating pattern, edges darkened hardest at the corners, plus the
   fiber noise texture from tokens.css.
   =================================================================== */

.parchment-panel {
  position: relative;
  z-index: 0; /* pins a local stacking context so the noise overlay stays contained */
  background-color: var(--color-parchment);
  background-image:
    /* irregular mottling — uneven light/dark patches, no pattern */
    radial-gradient(ellipse 180px 120px at 12% 20%, rgba(255, 248, 214, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 220px 160px at 78% 65%, rgba(60, 42, 18, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 160px 140px at 55% 15%, rgba(60, 42, 18, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 200px 150px at 30% 85%, rgba(255, 248, 214, 0.06) 0%, transparent 55%),
    /* dirtied edges, strongest in the corners */
    radial-gradient(circle at 0% 0%, rgba(40, 27, 12, 0.55) 0%, transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(40, 27, 12, 0.5) 0%, transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(40, 27, 12, 0.55) 0%, transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(40, 27, 12, 0.6) 0%, transparent 34%);
  border: var(--border-thin) solid var(--color-parchment-edge);
  /* uneven corner radii read as worn/handled, not machine-cut */
  border-radius: 2px 9px 5px 11px;
  box-shadow:
    inset 0 0 8px rgba(35, 24, 10, 0.5),
    inset 0 0 40px rgba(35, 24, 10, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
  color: var(--color-parchment-text);
  padding: var(--space-5);
}

.parchment-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-parchment-fiber);
  background-size: 220px 220px;
  opacity: var(--opacity-texture-parchment);
  mix-blend-mode: multiply;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

.parchment-panel h1,
.parchment-panel h2,
.parchment-panel h3,
.parchment-panel h4,
.parchment-panel h5,
.parchment-panel h6 {
  color: var(--color-parchment-text);
}

.parchment-panel p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-parchment-text);
  margin-bottom: var(--space-3);
}

.parchment-panel p:last-child {
  margin-bottom: 0;
}

.parchment-panel a {
  color: var(--color-accent-blue);
  text-decoration: underline;
}

.parchment-panel a:hover,
.parchment-panel a:focus-visible {
  color: var(--color-gold-shadow);
}


/* ===================================================================
   Period-style button — dark metal plate, hairline gold border, gold
   label. Same principle as the frame: gold is trim, not the surface.
   =================================================================== */

.btn {
  position: relative;
  z-index: 0; /* pins a local stacking context so the noise overlay stays contained */
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-gold-highlight);
  background:
    radial-gradient(ellipse at 22% 78%, rgba(0, 0, 0, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    linear-gradient(135deg,
      var(--color-metal-rise) 0%,
      var(--color-metal-dark) 40%,
      var(--color-metal-dark) 65%,
      var(--color-bronze-deepest) 100%
    );
  border: 1px solid var(--color-gold-highlight);
  /* slightly uneven corners — a worn-edge plate, not a precise rectangle */
  border-radius: 3px 5px 4px 6px;
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  text-decoration: none;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 240, 205, 0.15);
  box-shadow:
    inset 1px 1px 0 var(--color-metal-rise),
    inset -1px -1px 0 var(--color-bronze-deepest),
    inset 5px 5px 8px rgba(255, 246, 220, 0.06),
    inset -5px -5px 8px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-metal-noise);
  background-size: 90px 90px;
  opacity: var(--opacity-texture-button);
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-gold-highlight);
  /* warm it slightly and lift the highlight — do not turn it bright */
  filter: saturate(1.15);
  border-color: var(--color-gold-highlight);
  box-shadow:
    inset 1px 1px 0 var(--color-gold-highlight),
    inset -1px -1px 0 var(--color-bronze-deepest),
    inset 5px 5px 8px rgba(255, 246, 220, 0.1),
    inset -5px -5px 8px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5),
    var(--shadow-glow-gold);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
  filter: none;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -1px -1px 0 rgba(255, 246, 220, 0.08);
}


/* ===================================================================
   Ruled heading — a thin gold rule under a heading, fading at the ends
   =================================================================== */

.heading-rule {
  position: relative;
  font-family: var(--font-display);
  color: var(--color-text-on-dark);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.heading-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold) 15%,
    var(--color-gold-highlight) 50%,
    var(--color-gold) 85%,
    transparent 100%
  );
}


/* ===================================================================
   Divider ornament — horizontal rule with a centered gem
   =================================================================== */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
}

.divider__ornament {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
}

.divider__ornament svg {
  width: 100%;
  height: 100%;
  display: block;
}

.divider__ornament .div-gem-outer { fill: var(--color-gold); stroke: var(--color-gold-shadow); }
.divider__ornament .div-gem-inner { fill: var(--color-gold-highlight); }


/* ===================================================================
   Glow trim — v3 (2026-09): a plain thin line, no pattern. Three
   attempts at a repeating motif didn't read well; this is just a
   horizontal ice-blue/warm-gold/ice-blue gradient a few pixels tall,
   a near-black hairline directly above and below it (set into the
   metal), and a soft blurred copy of itself bleeding downward as a
   glow. No SVG, no shapes. Reusable: a plain full-width block, drop
   it anywhere.
   =================================================================== */

.glow-trim {
  position: relative;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-glow-blue) 0%,
    var(--color-gold-highlight) 50%,
    var(--color-glow-blue) 100%
  );
  box-shadow:
    0 -1px 0 var(--color-bronze-deepest),
    0 1px 0 var(--color-bronze-deepest);
}

.glow-trim::after {
  /* the downward bleed — a blurred copy of the same gradient, faint */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: linear-gradient(90deg,
    var(--color-glow-blue) 0%,
    var(--color-gold-highlight) 50%,
    var(--color-glow-blue) 100%
  );
  filter: blur(6px);
  opacity: 0.35; /* raise for more glow */
  mix-blend-mode: screen;
  pointer-events: none;
}