.arcana-page {
  overflow-wrap: anywhere;
}

.arcana-page .arcana-hero {
  position: relative;
  display: grid;
  min-height: clamp(27rem, 43vw, 35rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ash-canvas);
}

.arcana-page .arcana-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 12, 16, .94) 0%, rgba(11, 12, 16, .82) 38%, rgba(11, 12, 16, .3) 72%, rgba(11, 12, 16, .44) 100%);
  content: "";
}

.arcana-page .arcana-hero__image {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.arcana-page .arcana-hero__container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  padding-block: var(--space-8);
}

.arcana-page .arcana-hero__plate {
  grid-column: 1 / span 7;
  display: flex;
  width: min(100%, 43.125rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-rune-outline);
  padding: var(--space-6);
  background: rgba(26, 22, 34, .86);
  box-shadow: inset 0 1px 0 rgba(226, 217, 243, .07);
}

.arcana-page .arcana-hero__plate .eyebrow,
.arcana-page .arcana-hero__plate h1,
.arcana-page .arcana-hero__plate p { margin: 0; }
.arcana-page .arcana-hero__plate .lead { max-width: 62ch; }
.arcana-page .arcana-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.arcana-page .arcana-hero__guide-link { font-weight: 700; }

.arcana-page .arcana-orientation { background: var(--color-ash-canvas); }
.arcana-page .arcana-orientation__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); min-width: 0; }
.arcana-page .arcana-orientation__intro { min-width: 0; max-width: 38.75rem; }
.arcana-page .arcana-orientation__intro p { max-width: 60ch; }
.arcana-page .arcana-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.arcana-page .arcana-path { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-basalt-panel); text-decoration: none; }
.arcana-page .arcana-path:hover { border-color: var(--color-spell-cyan); box-shadow: inset 0 1px 0 rgba(0, 240, 255, .18); }
.arcana-page .arcana-path__label { color: var(--color-arcane-text); font-family: var(--font-heading); font-weight: 700; }
.arcana-page .arcana-path strong { margin-top: auto; color: var(--color-spell-cyan); font-size: var(--text-small); }
.arcana-page .arcana-orientation__notice { grid-column: 1 / -1; width: min(100%, 47.5rem); min-width: 0; }

.arcana-page .arcana-catalog { background: var(--color-violet-ash); }
.arcana-page .arcana-catalog__header { width: min(100%, 43.75rem); min-width: 0; margin-bottom: var(--space-6); }
.arcana-page .arcana-catalog__header p { max-width: 66ch; }
.arcana-page .arcana-catalog__count { margin-bottom: 0; color: var(--color-spell-cyan); font-size: var(--text-small); font-weight: 700; }
.arcana-page .arcana-catalog__layout { display: grid; grid-template-columns: minmax(17.5rem, 3fr) minmax(0, 9fr); align-items: start; gap: var(--space-5); min-width: 0; }
.arcana-page .arcana-catalog__mobile-control { display: none; }
.arcana-page .arcana-filters { position: sticky; top: var(--space-5); display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.arcana-page .arcana-filters h3, .arcana-page .arcana-filters p { margin: 0; }
.arcana-page .arcana-filters__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.arcana-page .arcana-filter-group { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.arcana-page .arcana-filter-group legend { padding: 0; font-size: var(--text-small); }
.arcana-page .arcana-filter-options { display: grid; grid-template-columns: 1fr; gap: var(--space-2); min-width: 0; }
.arcana-page .arcana-filter-options label { display: flex; min-width: 0; align-items: center; gap: var(--space-2); margin: 0; border: 1px solid var(--color-rune-outline); border-radius: var(--radius-xs); padding: .55rem .65rem; color: var(--color-muted-text); font-weight: 600; }
.arcana-page .arcana-filter-options label:has(input:checked) { border-color: var(--color-ember-scarlet); background: rgba(255, 42, 75, .1); color: var(--color-arcane-text); }
.arcana-page .arcana-results-area { min-width: 0; }
.arcana-page .arcana-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.arcana-page .arcana-entry { position: relative; display: flex; min-width: 0; flex-direction: column; border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-basalt-panel); box-shadow: inset 0 1px 0 rgba(226, 217, 243, .045); overflow: hidden; }
.arcana-page .arcana-entry::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color-rune-outline); content: ""; }
.arcana-page .arcana-entry--featured { background: var(--color-basalt-raised); box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(226, 217, 243, .06); }
.arcana-page .arcana-entry--featured::before { background: var(--color-ember-scarlet); }
.arcana-page .arcana-entry > img { width: 100%; max-width: 100%; aspect-ratio: 1; object-fit: cover; }
.arcana-page .arcana-entry__body { display: flex; min-width: 0; height: 100%; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + .2rem); }
.arcana-page .arcana-entry__body > * { min-width: 0; margin: 0; }
.arcana-page .arcana-entry h3 { font-size: 1.25rem; }
.arcana-page .arcana-entry__body > a { margin-top: auto; font-size: var(--text-small); font-weight: 700; }
.arcana-page .arcana-entry__synergy { border-top: 1px solid rgba(61, 50, 72, .85); padding-top: var(--space-3); color: var(--color-muted-text); font-size: var(--text-small); }
.arcana-page .arcana-entry details { border-top: 1px solid rgba(61, 50, 72, .85); padding-top: var(--space-3); }
.arcana-page .arcana-entry summary { cursor: pointer; color: var(--color-spell-cyan); font-size: var(--text-small); font-weight: 700; }
.arcana-page .arcana-entry details p { margin-top: var(--space-3); color: var(--color-muted-text); font-size: var(--text-small); }
.arcana-page .arcana-empty { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.arcana-page .arcana-empty[hidden] { display: none; }

.arcana-page .arcana-roles { background: var(--color-ash-canvas); }
.arcana-page .arcana-roles__intro { width: min(100%, 46.25rem); min-width: 0; }
.arcana-page .arcana-roles__intro .lead { max-width: 68ch; }
.arcana-page .arcana-table-wrap { position: relative; min-width: 0; margin-top: var(--space-6); overflow-x: auto; border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-basalt-panel); }
.arcana-page .arcana-table-wrap table { min-width: 47.5rem; margin: 0; font-size: 1rem; }
.arcana-page .arcana-table-wrap th:first-child { width: 20%; }
.arcana-page .arcana-table-wrap th:nth-child(2) { width: 27%; }
.arcana-page .arcana-table-wrap th:nth-child(3) { width: 26%; }
.arcana-page .arcana-table-wrap th:nth-child(4) { width: 27%; }
.arcana-page .arcana-table-wrap__hint { display: none; }
.arcana-page .arcana-role-definitions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-6); }
.arcana-page .arcana-role-definitions > div { min-width: 0; border-top: 1px solid var(--color-rune-outline); padding-top: var(--space-4); }
.arcana-page .arcana-role-definitions h3, .arcana-page .arcana-role-definitions p { margin: 0; }
.arcana-page .arcana-role-definitions p { margin-top: var(--space-3); max-width: 42ch; color: var(--color-muted-text); }
.arcana-page .arcana-roles__notice { width: min(100%, 47.5rem); min-width: 0; margin-top: var(--space-6); }

.arcana-page .arcana-rhythm { background: var(--color-violet-ash); }
.arcana-page .arcana-rhythm__feature { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-7); min-width: 0; }
.arcana-page .arcana-rhythm__copy { min-width: 0; max-width: 35rem; }
.arcana-page .arcana-rhythm__copy p { max-width: 56ch; }
.arcana-page .arcana-rhythm__image { width: 100%; min-width: 0; margin: 0; border: var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.arcana-page .arcana-rhythm__image img { width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: right center; }
.arcana-page .arcana-scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-7); }
.arcana-page .arcana-scenarios .card { gap: var(--space-3); }
.arcana-page .arcana-scenarios .card > * { min-width: 0; margin: 0; }
.arcana-page .arcana-scenarios .card > a { margin-top: auto; font-weight: 700; }

.arcana-page .arcana-anatomy { background: var(--color-ash-canvas); }
.arcana-page .arcana-anatomy__grid { display: grid; grid-template-columns: 7fr 5fr; align-items: start; gap: var(--space-7); min-width: 0; }
.arcana-page .arcana-anatomy__copy { min-width: 0; max-width: 42.5rem; }
.arcana-page .arcana-anatomy__copy > p { max-width: 66ch; }
.arcana-page .arcana-anatomy__list { display: grid; gap: var(--space-3); padding: 0; }
.arcana-page .arcana-anatomy__list li { position: relative; min-width: 0; padding-left: var(--space-4); }
.arcana-page .arcana-anatomy__list li::before { position: absolute; top: .65em; left: 0; width: .4rem; height: .4rem; background: var(--color-ember-scarlet); content: ""; transform: rotate(45deg); }
.arcana-page .arcana-anatomy__links { max-width: 60ch; }
.arcana-page .arcana-demo-card { justify-self: end; display: flex; width: min(100%, 26.25rem); min-width: 0; flex-direction: column; gap: var(--space-4); padding: 0; overflow: hidden; }
.arcana-page .arcana-demo-card > img { width: 100%; max-width: 100%; aspect-ratio: 1; object-fit: cover; }
.arcana-page .arcana-demo-card > div { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.arcana-page .arcana-demo-card > div > * { margin: 0; }
.arcana-page .arcana-demo-card .cluster { gap: var(--space-2); }

.arcana-page .arcana-method { background: var(--color-violet-ash); }
.arcana-page .arcana-method__intro { width: min(100%, 45rem); min-width: 0; }
.arcana-page .arcana-method__intro .lead { max-width: 64ch; }
.arcana-page .arcana-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; margin-top: var(--space-6); }
.arcana-page .arcana-steps article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); }
.arcana-page .arcana-steps article > * { margin: 0; }
.arcana-page .arcana-steps article > span { display: inline-flex; width: fit-content; min-width: 2.25rem; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--color-rune-outline); color: var(--color-muted-text); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; }
.arcana-page .arcana-steps article:first-child > span { border-color: var(--color-ember-scarlet); color: var(--color-arcane-text); }
.arcana-page .arcana-steps p { max-width: 42ch; color: var(--color-muted-text); }
.arcana-page .arcana-method__notice { width: min(100%, 47.5rem); min-width: 0; margin-top: var(--space-6); }

.arcana-page .arcana-related { background: var(--color-ash-canvas); }
.arcana-page .arcana-related__intro { width: min(100%, 45rem); min-width: 0; }
.arcana-page .arcana-related__intro p { max-width: 62ch; }
.arcana-page .arcana-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-6); }
.arcana-page .arcana-related-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); text-decoration: none; }
.arcana-page .arcana-related-card:hover { border-color: var(--color-spell-cyan); box-shadow: inset 0 1px 0 rgba(0, 240, 255, .18); }
.arcana-page .arcana-related-card > * { min-width: 0; margin: 0; }
.arcana-page .arcana-related-card > span { color: var(--color-relic-gold); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.arcana-page .arcana-related-card p { max-width: 42ch; color: var(--color-muted-text); }
.arcana-page .arcana-related-card strong { margin-top: auto; color: var(--color-spell-cyan); font-size: var(--text-small); }
.arcana-page .arcana-related-card i { font-style: normal; }

.arcana-page .arcana-closing { background: var(--color-violet-ash); }
.arcana-page .arcana-closing__block { display: flex; width: min(100%, 42.5rem); min-width: 0; flex-direction: column; gap: var(--space-4); margin-inline: auto; border-top: 1px solid var(--color-rune-outline); padding-top: var(--space-6); }
.arcana-page .arcana-closing__block > * { margin: 0; }
.arcana-page .arcana-closing__block p { max-width: 58ch; }
.arcana-page .arcana-closing__block .button { width: fit-content; min-width: 13.75rem; }
.arcana-page .arcana-closing__fineprint { border-top: 1px solid var(--color-rune-outline); padding-top: var(--space-4); color: var(--color-muted-text); font-size: var(--text-small); }

@media (max-width: 65.625rem) {
  .arcana-page .arcana-catalog__layout { grid-template-columns: minmax(17.5rem, 4fr) minmax(0, 8fr); }
  .arcana-page .arcana-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcana-page .arcana-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  .arcana-page .arcana-orientation__grid,
  .arcana-page .arcana-rhythm__feature,
  .arcana-page .arcana-anatomy__grid { grid-template-columns: 1fr; }
  .arcana-page .arcana-paths { grid-column: 1 / -1; }
  .arcana-page .arcana-rhythm__feature { gap: var(--space-5); }
  .arcana-page .arcana-rhythm__copy { max-width: 35rem; }
  .arcana-page .arcana-anatomy__grid { gap: var(--space-5); }
  .arcana-page .arcana-demo-card { justify-self: start; width: min(100%, 30rem); }
}

@media (max-width: 56.25rem) {
  .arcana-page .arcana-hero { min-height: 25rem; }
  .arcana-page .arcana-hero__container { display: flex; align-items: end; }
  .arcana-page .arcana-hero__plate { width: min(100%, 43.125rem); }
  .arcana-page .arcana-catalog__mobile-control { display: block; margin-bottom: var(--space-4); }
  .arcana-page .arcana-catalog__layout { grid-template-columns: 1fr; }
  .arcana-page .arcana-filters { position: static; display: none; width: 100%; }
  .arcana-page .arcana-filters.is-open { display: flex; }
  .arcana-page .arcana-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 53.75rem) {
  .arcana-page .arcana-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcana-page .arcana-related-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 51.25rem) {
  .arcana-page .arcana-table-wrap { padding-top: 2rem; }
  .arcana-page .arcana-table-wrap__hint { position: absolute; top: var(--space-2); left: var(--space-3); display: block; color: var(--color-muted-text); font-size: var(--text-small); }
  .arcana-page .arcana-role-definitions { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 38.75rem) {
  .arcana-page .arcana-hero { min-height: 18rem; }
  .arcana-page .arcana-hero__container { padding-block: var(--space-5); }
  .arcana-page .arcana-hero__plate { padding: var(--space-4); }
  .arcana-page .arcana-hero__actions { align-items: stretch; flex-direction: column; }
  .arcana-page .arcana-hero__actions .button { width: 100%; }
  .arcana-page .arcana-paths,
  .arcana-page .arcana-grid,
  .arcana-page .arcana-scenarios,
  .arcana-page .arcana-steps,
  .arcana-page .arcana-related__grid { grid-template-columns: 1fr; }
  .arcana-page .arcana-related-card:last-child { grid-column: auto; }
  .arcana-page .arcana-scenarios { margin-top: var(--space-5); }
  .arcana-page .arcana-steps article { padding: var(--space-4); }
  .arcana-page .arcana-demo-card { width: 100%; }
  .arcana-page .arcana-closing__block .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .arcana-page .arcana-hero__image { transform: none; }
}