/* BUILD16-SHADOW-HUMAN-VERTICAL-001 — Rights in a Machine-Speed World.
   Additive stylesheet. Uses only the site's own theme variables. */

.rights-frame {
  border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 18px 22px; margin: 20px 0 26px;
}
.rights-frame p { margin: 0 0 8px; font-size: .98rem; }
.rights-frame p:last-child { margin-bottom: 0; }
.rights-frame .rights-frame-strong { font: 700 1.05rem/1.5 var(--serif); color: var(--ink); }

/* ---------- museum-glass transition ---------- */
.museum-glass {
  position: relative; margin: 26px 0 34px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 26px 24px;
}
.museum-glass-case {
  border: 1px solid color-mix(in srgb, var(--ink-soft) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper) 70%, var(--surface));
  padding: 18px 20px; font: 1rem/1.6 var(--serif); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 30%, transparent);
}
.museum-glass-case .museum-glass-label {
  display: block; font: 800 .68rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px;
}
.museum-glass-arrow { text-align: center; font-size: 1.4rem; color: var(--ink-soft); margin: 14px 0; }
.museum-glass-boundaries { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.museum-glass-boundaries span {
  font: 700 .78rem/1.2 var(--sans); padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.museum-glass-line { text-align: center; font: 700 1.2rem/1.5 var(--serif); color: var(--ink); margin: 0; }
.museum-glass-followup { text-align: center; color: var(--ink-soft); margin: 8px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .museum-glass-case { transition: box-shadow .3s ease; }
  .museum-glass:hover .museum-glass-case, .museum-glass:focus-within .museum-glass-case { box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 0 1px color-mix(in srgb, #fff 30%, transparent); }
}

/* ---------- amendment cards ---------- */
.amendment-grid { display: grid; gap: 18px; margin: 20px 0 34px; }
.amendment-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 20px 22px;
}
.amendment-card summary { cursor: pointer; list-style: none; }
.amendment-card summary::-webkit-details-marker { display: none; }
.amendment-card summary h3 { display: inline; font-size: 1.15rem; margin: 0; }
.amendment-card summary .amendment-ord {
  display: inline-block; font: 800 .72rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-right: 10px;
}
.amendment-card summary::after { content: "Expand ▾"; float: right; font: 700 .78rem var(--sans); color: var(--ink-soft); }
.amendment-card[open] summary::after { content: "Collapse ▴"; }

.amendment-progression { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.amendment-progression > div { border-top: 3px solid var(--line); padding-top: 8px; }
.amendment-progression h4 {
  font: 800 .68rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.amendment-progression p { margin: 0; font-size: .9rem; }
.amendment-progression .amendment-then { border-top-color: var(--historical); }
.amendment-progression .amendment-principle { border-top-color: var(--brand); }
.amendment-progression .amendment-now { border-top-color: var(--accent); }
.amendment-progression .amendment-question { border-top-color: var(--future); }
@media (max-width: 820px) { .amendment-progression { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .amendment-progression { grid-template-columns: 1fr; } }

/* the fixed, reused doctrine / civic-principle / technical-analogy disclaimer */
.amendment-disclaimer {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px;
  border: 1.5px dashed var(--ink-soft); border-radius: var(--radius-sm); font-size: .85rem; color: var(--ink-soft);
}
.amendment-disclaimer strong { color: var(--ink); }