/* ==========================================================================
   NEO-BAROQUE — one page. Loaded on a/neo-baroque.html.

   One stage, top to foot: a deep umber-black ground and a structural gilt
   frame whose drawn scroll corners mirror four ways (strict symmetry). The
   hero opens the frame; the record (.bq-rec) continues it and closes it.
   Ornament lives ONLY at the frame. The record's claim is the one lit
   subject, in chiaroscuro on the jewel field; every section after it sits
   at a lower light level — the page ranks itself by illumination, and
   nothing ranks by scale. Every light level still clears AA.
   ========================================================================== */

@font-face {
  font-family: "BodoniX";
  src: url("fonts/bodoni-moda.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}

.bq-page {
  --bq-ground: #14100C;
  --bq-gold: #C9A24B;
  --bq-gold-lit: #EFD48A;   /* the sheen: lit, never matte */
  --bq-cream: #EFE6D2;
  --bq-jewel: #4A1F2E;      /* deep garnet, the one jewel field */
  --bq-serif: "BodoniX", "Didot", "Times New Roman", serif;
  background: var(--paper);
}
.bq-page main { background: var(--bq-ground); color: var(--bq-cream); }
.bq-wrap { padding: clamp(1.5rem, 4vw, 3.5rem) 1rem 0; }
.bq { max-width: 46rem; margin-inline: auto; font-family: var(--bq-serif); font-size: 0.97rem; line-height: 1.75; text-align: center; }

/* the structural frame: double gold border + four mirrored scroll corners */
.bq-frame {
  position: relative;
  border: 2px solid var(--bq-gold);
  outline: 1px solid var(--bq-gold);
  outline-offset: 6px;
  padding: clamp(2rem, 6vw, 3.6rem) clamp(1.2rem, 4vw, 2.6rem);
}
.bq-corner { position: absolute; width: clamp(3.5rem, 9vw, 5.5rem); fill: none; stroke: var(--bq-gold); stroke-width: 3; stroke-linecap: round; }
.bq-corner circle { fill: var(--bq-gold-lit); stroke: none; }
.bq-frame--head .bq-corner:nth-of-type(1) { top: -0.6rem; left: -0.6rem; transform: scaleY(-1); }
.bq-frame--head .bq-corner:nth-of-type(2) { top: -0.6rem; right: -0.6rem; transform: scale(-1, -1); }
.bq-frame--foot .bq-corner:nth-of-type(1) { bottom: -0.6rem; left: -0.6rem; }
.bq-frame--foot .bq-corner:nth-of-type(2) { bottom: -0.6rem; right: -0.6rem; transform: scaleX(-1); }

/* One frame: the hero's foot and the record's head are open, and the
   outline is clipped where they meet so the two read as one border. */
.bq-frame--head { border-bottom: 0; padding-bottom: 1rem; clip-path: inset(-3rem -3rem 0 -3rem); }
.bq-frame--foot { border-top: 0; padding-top: 1rem; clip-path: inset(0 -3rem -3rem -3rem); }

.bq-head { margin-block-end: 1.8rem; }
.bq-kicker { margin: 0 0 0.7rem; font-size: 0.76rem; letter-spacing: 0.26em; color: var(--bq-gold); }
.bq-h1 { margin: 0 0 0.5rem; font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.05 var(--bq-serif); letter-spacing: 0.14em; }
.bq-sub { margin: 0 auto; max-width: 46ch; color: #B9AE96; }

.bq-h2 { margin: 0 0 0.7rem; font: 700 1.15rem/1.3 var(--bq-serif); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bq-gold-lit); }
.bq-text { margin: 0 auto 0.8rem; max-width: 56ch; }
.bq-text b { color: var(--bq-cream); font-weight: 700; }
.bq-strike { text-decoration: line-through; }

/* The hero's two drawings sit below the record's lit claim in light,
   though above it on the page: illumination ranks, position does not. */
.bq-dim { margin-block-end: 2rem; color: #BDB49F; }
.bq-dim .bq-h2 { color: #B08D3E; }

/* illumination-rank demo */
.bq-rankdemo, .bq-densedemo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.2rem; margin-block-start: 0.9rem; }
.bq-rank__item, .bq-dense__item { margin: 0; }
.bq-rank__set { display: flex; gap: 0.8rem; justify-content: center; align-items: center; min-height: 6rem; border: 1px solid #3A3226; padding: 0.8rem; }
.bq-rank__p { width: 3.4rem; height: 4.2rem; background: var(--bq-jewel); border: 1px solid var(--bq-gold); }
.bq-rank__p--lit { background: radial-gradient(70% 60% at 50% 35%, rgba(239, 212, 138, 0.5), rgba(239, 212, 138, 0.06) 75%), var(--bq-jewel); }
.bq-rank__p--half { opacity: 0.55; }
.bq-rank__p--dark { opacity: 0.28; }
.bq-rank__p--big { width: 4.6rem; height: 5.4rem; opacity: 0.75; }
.bq-rank__p--mid { opacity: 0.75; }
.bq-rank__p--sm { width: 2.2rem; height: 2.8rem; opacity: 0.75; }
.bq-rankdemo figcaption, .bq-densedemo figcaption { margin-block-start: 0.5rem; font-size: 0.88rem; color: #A79D88; }
.bq-rankdemo figcaption b, .bq-densedemo figcaption b { color: var(--bq-cream); }

/* theatrical-vs-dense demo */
.bq-dense__chip { min-height: 7rem; border: 1px solid var(--bq-gold); position: relative; overflow: hidden; }
.bq-dense__chip--stage {
  background: radial-gradient(60% 55% at 50% 45%, rgba(239, 212, 138, 0.3), transparent 70%), var(--bq-ground);
  border-width: 3px;
  border-image: repeating-linear-gradient(45deg, var(--bq-gold) 0 6px, var(--bq-gold-lit) 6px 9px) 3;
}
.bq-dense__chip--stage i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 2rem; height: 2.6rem; background: var(--bq-jewel); border: 1px solid var(--bq-gold-lit); }
.bq-dense__chip--full { background: repeating-conic-gradient(var(--bq-gold) 0% 3%, var(--bq-jewel) 3% 7%, #6E5222 7% 10%); opacity: 0.85; }

/* ==========================================================================
   THE RECORD — the rest of the stage. Level 0 is the lit subject; levels
   1–3 step into shadow. Sentences stay upright, centred and at reading size.
   ========================================================================== */
.bq-page main > section.bq-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.bq-rec { padding: 0 1rem clamp(1.5rem, 4vw, 3.5rem); }
.bq-rec .bq { font-size: 1.02rem; line-height: 1.7; }
.bq-rec b { font-weight: 700; color: var(--bq-cream); }
.bq-rec a { color: var(--bq-gold-lit); text-decoration: underline; text-decoration-color: var(--bq-gold); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.bq-rec a:hover { color: var(--bq-cream); text-decoration-color: var(--bq-gold-lit); }
.bq-rec :focus-visible { outline: 2px solid var(--bq-gold-lit); outline-offset: 3px; }

.bq-r { margin: 0 auto 2.6rem; max-width: 40rem; }
.bq-r:last-child { margin-block-end: 0.6rem; }
.bq-rh { margin: 0 0 0.9rem; font: 700 1.15rem/1.3 var(--bq-serif); letter-spacing: 0.2em; text-transform: uppercase; overflow-wrap: anywhere; }
.bq-n { font-weight: 400; letter-spacing: 0.1em; }
.bq-p { display: block; margin: 0 auto 0.9rem; max-width: 58ch; }
.bq-quiet { margin: 0 auto 0.6rem; font-size: 0.9rem; font-style: italic; color: #A79D88; }

/* level 0: the lit subject — jewel field, light falling from above-centre */
.bq-r--0 {
  max-width: 38rem;
  padding: 2.2rem clamp(1rem, 4vw, 2rem) 1.6rem;
  background:
    radial-gradient(80% 70% at 50% 18%, rgba(239, 212, 138, 0.17) 0%, rgba(239, 212, 138, 0.05) 45%, transparent 72%),
    var(--bq-jewel);
  border: 1px solid var(--bq-gold);
  color: var(--bq-cream);
}
.bq-r--0 .bq-rh { color: var(--bq-gold-lit); }
.bq-pull { margin: 0 auto 0.9rem; max-width: 30ch; font: 700 clamp(1.3rem, 3vw, 1.65rem)/1.35 var(--bq-serif); color: #FFF6E0; text-wrap: balance; }
/* levels 1–3: each one step further into shadow, none below AA */
.bq-r--1 { color: #D8CFBB; }
.bq-r--1 .bq-rh { color: var(--bq-gold); }
.bq-r--2 { color: #BDB49F; }
.bq-r--2 .bq-rh { color: #B08D3E; }
.bq-r--3 { color: #A79D88; }
.bq-r--3 .bq-rh { color: #A58641; }

/* label/value pairs, stacked on the axis */
.bq-dl { margin: 1.2rem auto 0; max-width: 34rem; }
.bq-dl > div { padding: 0.55rem 0; border-top: 1px solid rgba(201, 162, 75, 0.28); }
.bq-dl > div:last-child { border-bottom: 1px solid rgba(201, 162, 75, 0.28); }
.bq-dl dt { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bq-gold); }
.bq-r--0 .bq-dl dt { color: var(--bq-gold-lit); }
.bq-dl dd { margin: 0.15rem 0 0; }

/* the diagnostic, lifted into a pool of light between gilt rules */
.bq-dx {
  margin: 1.2rem auto; max-width: 34rem; padding: 0.9rem 1rem;
  border-block: 1px solid var(--bq-gold);
  background: radial-gradient(70% 90% at 50% 50%, rgba(239, 212, 138, 0.1), transparent 75%);
  color: var(--bq-cream); font-style: italic;
}
.bq-dx--shade { border-color: #6E5222; background: none; color: #BDB49F; }

/* what carries the look */
.bq-carry { margin: 0.6rem auto 0; max-width: 34rem; }
.bq-cr { padding: 0.5rem 0 0.7rem; border-top: 1px solid rgba(201, 162, 75, 0.22); }
.bq-cr:last-child { border-bottom: 1px solid rgba(201, 162, 75, 0.22); }
.bq-cr dt a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; }
.bq-cr dt small { display: block; margin-top: -0.35rem; font-size: 0.74rem; font-style: italic; color: var(--bq-gold); }
.bq-cr--lit dt a { color: #FFF6E0; }
.bq-cr dd { margin: 0; }
.bq-cr dd p { margin: 0.2rem auto; }
.bq-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; }
.bq-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.bq-sws { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
.bq-swatch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bq-swatch i { width: 1.1rem; height: 1.1rem; border: 1px solid var(--bq-gold); }

/* rules: the supported claims stand in the light; the interpretations recede */
.bq-areas { display: grid; gap: 1.4rem; }
.bq-area h3 { margin: 0 0 0.4rem; }
.bq-lab { font: 700 0.8rem/1.3 var(--bq-serif); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bq-gold); }
.bq-area ul, .bq-nbs, .bq-use { list-style: none; margin: 0; padding: 0; }
.bq-area li { margin: 0 auto 0.7rem; max-width: 58ch; }
.bq-area li .bq-p { margin-bottom: 0.1rem; }
.bq-k { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #A58641; }
.bq-rule--lit { color: var(--bq-cream); }
.bq-rule--lit .bq-k { color: var(--bq-gold); }
.bq-rule--shade { color: #A79D88; }
.bq-ev { display: inline-block; font-size: 0.8rem; font-style: italic; color: #BDB49F; }

/* the coverage ledger */
.bq-tw { margin: 1.2rem auto 0; max-width: 34rem; overflow-x: auto; }
.bq-tw:focus-visible { outline: 2px solid var(--bq-gold-lit); }
.bq-ledger { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bq-ledger th, .bq-ledger td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(201, 162, 75, 0.22); text-align: center; vertical-align: top; }
.bq-ledger thead th { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bq-gold); font-weight: 700; border-bottom-color: var(--bq-gold); }
.bq-ledger tbody th { font-weight: 400; color: #D8CFBB; }

/* neighbours */
.bq-nbs li { margin: 0 auto 1rem; max-width: 52ch; }
.bq-nb a, .bq-nb span { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bq-nbs .bq-k { margin-top: -0.4rem; }
.bq-nbs .bq-p { margin-top: 0.2rem; }

/* exits: the gilt catches light even in the shadow */
.bq-use li { margin: 0 auto 0.8rem; }
.bq-use a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; letter-spacing: 0.08em; }
.bq-use span { display: block; }
.bq-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.6rem; margin: 1.4rem 0 0; padding-top: 0.6rem; border-top: 1px solid rgba(201, 162, 75, 0.28); }
.bq-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 480px) {
  .bq-rec .bq { font-size: 1rem; }
  .bq-rh { letter-spacing: 0.14em; }
  .bq-r--0 { padding-inline: 0.9rem; }
  /* the scroll corners sit clear of the kicker at phone width */
  .bq-frame--head { padding-top: 3.4rem; }
  .bq-ledger { font-size: 0.85rem; }
  .bq-ledger th, .bq-ledger td { padding-inline: 0.25rem; }
  .bq-ledger thead th { letter-spacing: 0.06em; font-size: 0.66rem; }
}