/* ============================================================
   theme-2 — "editorial"
   High-end exhibition-catalogue print: warm paper, muted ink,
   hairline rules, disciplined measure, page-number folios.
   Scope: chrome only. Diagrams, bands, glyphs untouched.
   ============================================================ */

body[data-theme="editorial"] {
  --ed-paper: #f6f3ec;
  --ed-ink: #3a3330;
  --ed-ink-soft: #5a524d;
  --ed-hair: rgba(58, 51, 48, 0.22);
  background: var(--ed-paper);
  counter-reset: ed-page;
}

/* ---------- page ground: warm paper, faint grain ---------- */

body[data-theme="editorial"] .card {
  background: var(--ed-paper);
  counter-increment: ed-page;
}

/* paper ground — except the screens whose full-bleed brand color
   carries a light title glyph (c02 cover, c03, c05, c14, c24):
   leave those intact. Grain is baked into the ground itself so it
   always sits UNDER content — nothing overlays diagrams. */
body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) {
  background-color: var(--ed-paper);
  background-image:
    radial-gradient(rgba(58, 51, 48, 0.028) 1px, transparent 1.4px),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
}

/* structured outer margin: thin frame set in from the trim */
body[data-theme="editorial"] .card.on .card-inner {
  box-shadow: inset 0 0 0 1px rgba(58, 51, 48, 0.07);
}

/* ---------- folio: page-number accent, bottom-right ---------- */

body[data-theme="editorial"] .card::after {
  content: counter(ed-page, decimal-leading-zero) " — Música do Círculo";
  position: absolute;
  right: clamp(18px, 2.4vw, 42px);
  bottom: clamp(14px, 2.6vh, 30px);
  z-index: 3;
  pointer-events: none;
  font-family: "EB Garamond", serif;
  font-variant-numeric: oldstyle-nums;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-ink);
  opacity: 0.5;
}

/* folio inverts to paper on the full-bleed color screens */
body[data-theme="editorial"] .card:has(.c02)::after,
body[data-theme="editorial"] .card:has(.c05)::after,
body[data-theme="editorial"] .card:has(.c14)::after,
body[data-theme="editorial"] .card:has(.c24)::after {
  color: #f6f3ec;
  opacity: 0.65;
}

/* ---------- hairline rule under the band area ---------- */

body[data-theme="editorial"] .card-inner [class$="-band"] {
  position: relative;
}
body[data-theme="editorial"] .card-inner [class$="-band"]::after {
  content: "";
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: -1.6cqh;
  height: 1px;
  background: var(--ed-hair);
  pointer-events: none;
}

/* ---------- body typography: catalogue rhythm ---------- */

body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) {
  color: var(--ed-ink);
}

body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) p,
body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) li {
  font-family: "EB Garamond", serif;
  color: var(--ed-ink);
  line-height: 1.68;
  letter-spacing: 0.004em;
  max-width: 52ch;
}

body[data-theme="editorial"] .card-inner li {
  max-width: none;
}

body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) p b,
body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) p strong {
  font-weight: 600;
  color: #2c2523;
}

/* restrained initial accent on the lead paragraph of each screen */
body[data-theme="editorial"] .card-inner:not(.c02):not(.c03):not(.c05):not(.c14):not(.c24) p:first-of-type::first-letter {
  font-size: 1.6em;
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #2c2523;
}

/* headings quiet, hierarchy by weight not color */
body[data-theme="editorial"] .card-inner h1,
body[data-theme="editorial"] .card-inner h2,
body[data-theme="editorial"] .card-inner h3 {
  color: var(--ed-ink);
  letter-spacing: 0.02em;
}

/* ---------- outline: squared-off typographic capsule ---------- */

body[data-theme="editorial"] #outline {
  border-radius: 0;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid var(--ed-hair);
  box-shadow: 0 14px 34px -18px rgba(58, 51, 48, 0.35);
  font-family: "EB Garamond", serif;
  font-size: 0.8rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.2rem;
}

/* the wheel clips entries at the capsule edges; veil them into the
   paper instead of cutting glyphs mid-line */
body[data-theme="editorial"] #outline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(250, 248, 242, 0.95), rgba(250, 248, 242, 0) 1rem),
    linear-gradient(0deg, rgba(250, 248, 242, 0.95), rgba(250, 248, 242, 0) 1rem);
}

body[data-theme="editorial"] #outline .sec {
  font-family: "EB Garamond", serif;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  opacity: 0.55;
  color: var(--ed-ink);
}

body[data-theme="editorial"] #outline a {
  color: var(--ed-ink);
  opacity: 0.45;
  padding-left: 1em;
}
body[data-theme="editorial"] #outline a:hover { opacity: 0.9; }
body[data-theme="editorial"] #outline a.here {
  opacity: 1;
  font-weight: 600;
  font-style: italic;
}

/* ---------- mute button ---------- */

/* small squared paper chip so the control stays legible over the
   full-bleed color screens; same surface language as the capsule */
body[data-theme="editorial"] #mute, body[data-theme="editorial"] #vmute {
  color: var(--ed-ink);
  opacity: 0.6;
  border-radius: 0;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid var(--ed-hair);
  box-shadow: 0 14px 34px -18px rgba(58, 51, 48, 0.35);
}
body[data-theme="editorial"] #mute:hover, body[data-theme="editorial"] #vmute:hover { opacity: 1; }

/* ---------- transitions: quiet page turn ---------- */

body[data-theme="editorial"] .card {
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
body[data-theme="editorial"] .card.on {
  transition: opacity 0.6s ease;
}