.cywilizacje-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cywilizacje-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.045;
  background-image: linear-gradient(90deg, transparent 49%, var(--color-gold) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, var(--color-gold) 50%, transparent 51%);
  background-size: 44px 44px;
  content: "";
  pointer-events: none;
}

.cywilizacje-page section[id] { scroll-margin-top: var(--space-8); }

.cyw-hero {
  padding: clamp(3rem, 7vw, 6rem) 0 var(--space-8);
  background: var(--color-primary-deep);
  color: var(--color-surface);
}

.cyw-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}

.cyw-hero__copy,
.cyw-hero__media,
.cyw-profile__content,
.cyw-profile__media { min-width: 0; width: 100%; }

.cyw-hero__copy { max-width: 43.25rem; }
.cyw-hero h1 { color: var(--color-surface); font-size: var(--text-hero); line-height: var(--leading-tight); }
.cyw-hero .lead { max-width: 42rem; color: var(--color-surface); }
.cyw-hero .eyebrow { color: #ead9af; }
.cyw-hero__actions { margin-bottom: var(--space-5); }

.cyw-caution {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  width: min(100%, 18.75rem);
  padding: var(--space-4);
  border: var(--border-gold);
  border-radius: var(--radius-card);
  background: rgba(255, 253, 247, 0.08);
}

.cyw-caution__icon { color: #ead9af; font-size: 2rem; line-height: 1; }
.cyw-caution__body { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.cyw-caution__body p { margin: 0; color: var(--color-surface); font-size: var(--text-sm); line-height: 1.5; }
.cyw-caution__body .eyebrow { margin: 0; }

.cyw-hero__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 132, 50, 0.8);
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 5;
}

.cyw-hero__media img,
.cyw-profile__media img { width: 100%; height: 100%; object-fit: cover; }
.cyw-hero__media img { object-position: 68% 50%; }

.cyw-index__heading,
.cyw-profile__grid { display: grid; min-width: 0; }

.cyw-index__heading {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.cyw-index__heading > * { min-width: 0; }
.cyw-index__heading > div { max-width: 45rem; }
.cyw-index__marker { align-self: end; margin: 0; color: var(--color-gold); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-align: right; text-transform: uppercase; }

.cyw-anchor-nav {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cyw-anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.cyw-anchor-nav a span { color: var(--color-gold); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.cyw-anchor-nav a:hover,
.cyw-anchor-nav a:focus-visible { border-color: var(--color-gold); text-decoration: underline; text-underline-offset: 0.18em; }

.cyw-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cyw-legend__item { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-inline-start: 3px solid var(--color-gold); background: var(--color-surface); }
.cyw-legend__item strong { color: var(--color-primary); }
.cyw-legend__item span { color: var(--color-text-muted); font-size: var(--text-sm); }
.cyw-legend__item--terracotta { border-color: var(--color-terracotta); }
.cyw-legend__item--jade { border-color: var(--color-jade); }
.cyw-legend__item--blue { border-color: var(--color-primary); }
.cyw-index__note { max-width: 45rem; margin-bottom: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.cyw-reading { background: rgba(239, 229, 209, 0.48); }
.cyw-reading__intro,
.cyw-steps__intro,
.cyw-related__intro { max-width: 40.625rem; }
.cyw-reading__grid,
.cyw-open-index__grid,
.cyw-related__grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cyw-reading__grid > *,
.cyw-open-index__grid > *,
.cyw-related__grid > * { min-width: 0; }
.cyw-principle { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); }
.cyw-principle > * { margin: 0; }
.cyw-principle h3 { color: var(--color-primary); }
.cyw-principle--mechanics { border-top: 3px solid var(--color-primary); }
.cyw-principle--practice { border-top: 3px solid var(--color-jade); }
.cyw-principle--history { border-top: 3px solid var(--color-gold); }
.cyw-principle--mechanics p:last-child { border-inline-start: 3px solid var(--color-terracotta); padding-inline-start: var(--space-3); }

.cyw-profile__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--space-6), 6vw, var(--space-9)); align-items: start; }
.cyw-profile--china .cyw-profile__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cyw-profile__media { margin: 0; overflow: hidden; border: var(--border-gold); border-radius: var(--radius-card); aspect-ratio: 4 / 5; }
.cyw-profile--rome .cyw-profile__media img { object-position: 52% 50%; }
.cyw-profile--china .cyw-profile__media img { object-position: 45% 50%; }
.cyw-profile__content { max-width: 44.375rem; }
.cyw-profile--rome .cyw-profile__media { position: sticky; top: var(--space-6); }
.cyw-profile__lead { max-width: 44.375rem; }
.cyw-dropcap { float: left; margin: 0.03em 0.1em 0 0; color: var(--color-gold); font-family: var(--font-heading); font-size: 4.2em; font-weight: 700; line-height: 0.75; }
.cyw-profile__detail { max-width: 32.5rem; margin-top: var(--space-6); }
.cyw-profile__detail ul { margin-bottom: 0; }
.cyw-text-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--space-2); font-weight: 700; }
.cyw-mini-notes { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.cyw-mini-notes span { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-jade); color: var(--color-text-muted); font-size: var(--text-sm); }
.cyw-reflection { display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, 20.625rem); margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); }
.cyw-reflection > * { margin: 0; }
.cyw-reflection--rome { border-inline-start: 4px solid var(--color-terracotta); }
.cyw-reflection--china { border: 1px solid var(--color-jade); }

.cyw-open-index { background: rgba(255, 253, 247, 0.55); }
.cyw-open-index__intro { max-width: 43.75rem; }
.cyw-open-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.cyw-open-card > * { margin: 0; }
.cyw-open-card--med { border-inline-start: 4px solid var(--color-terracotta); }
.cyw-open-card--kingdoms { border-inline-start: 4px solid var(--color-primary); }
.cyw-open-card--landscape { border-inline-start: 4px solid var(--color-gold); }

.cyw-steps__grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cyw-steps__grid > * { min-width: 0; }
.cyw-step { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.cyw-step > * { margin: 0; }
.cyw-step__number { color: var(--color-gold); font-family: var(--font-heading); font-size: 3rem; font-weight: 700; line-height: 0.9; }
.cyw-step--two .cyw-step__number { color: var(--color-terracotta); }
.cyw-step--three .cyw-step__number { color: var(--color-primary); }
.cyw-step--four .cyw-step__number { color: var(--color-jade); }
.cyw-step__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: auto; }
.cyw-step__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }

.cyw-related__grid { align-items: stretch; }
.cyw-related-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.cyw-related-card > * { margin: 0; }
.cyw-related-card .cyw-text-link { margin-top: auto; }
.cyw-related-card--battles { border-top: 3px solid var(--color-terracotta); }
.cyw-related-card--map { border-top: 3px solid var(--color-jade); }
.cyw-related-card--about { border-top: 3px solid var(--color-primary); }

.cyw-policy { background: rgba(239, 229, 209, 0.7); }
.cyw-policy__statement { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(var(--space-5), 5vw, var(--space-8)); border-inline-start: 4px solid var(--color-gold); background: var(--color-primary-deep); }
.cyw-policy__statement > * { margin: 0; }
.cyw-policy__statement h2 { color: var(--color-surface); }
.cyw-policy__statement .eyebrow { color: #ead9af; }
.cyw-policy__statement blockquote { max-width: 42.5rem; padding: 0; border: 0; background: transparent; color: var(--color-surface); font-size: clamp(1.35rem, 2.3vw, 1.7rem); }
.cyw-policy__grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.cyw-policy__grid > * { min-width: 0; }
.cyw-policy-card { display: flex; flex-direction: column; gap: var(--space-3); }
.cyw-policy-card > * { margin: 0; }
.cyw-policy-card .cyw-text-link { margin-top: auto; }
.cyw-policy-card--limits { border-top: 3px solid var(--color-terracotta); }

.cyw-closing__panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 51.5rem); margin-inline: auto; padding: clamp(var(--space-5), 5vw, var(--space-8)); border: var(--border-gold); border-radius: var(--radius-card); background: var(--color-surface); text-align: center; }
.cyw-closing__panel > * { margin: 0; }
.cyw-closing__panel p { max-width: 37.5rem; }

@media (max-width: 67.49rem) {
  .cyw-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 63.74rem) {
  .cyw-hero__inner,
  .cyw-profile__grid,
  .cyw-profile--china .cyw-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .cyw-hero__copy { max-width: none; }
  .cyw-hero__media { max-width: 100%; aspect-ratio: 16 / 10; }
  .cyw-profile__media { order: -1; max-width: 100%; aspect-ratio: 16 / 11; }
  .cyw-profile--rome .cyw-profile__media { position: static; }
  .cyw-profile__content { max-width: none; }
}

@media (max-width: 61.24rem) {
  .cyw-reading__grid,
  .cyw-open-index__grid,
  .cyw-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyw-reading__grid > :last-child,
  .cyw-open-index__grid > :last-child,
  .cyw-related__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 47.49rem) {
  .cyw-hero { padding-top: var(--space-7); }
  .cyw-hero h1 { font-size: clamp(3.25rem, 14vw, 3.75rem); }
  .cyw-caution { width: 100%; }
  .cyw-index__heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cyw-index__marker { display: none; }
  .cyw-anchor-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
  .cyw-anchor-nav a { flex: 0 0 auto; }
  .cyw-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyw-profile__content h2 { font-size: clamp(2.25rem, 10vw, 2.875rem); }
  .cyw-profile__detail { max-width: none; }
  .cyw-reflection { width: 100%; }
  .cyw-reading__grid,
  .cyw-open-index__grid,
  .cyw-related__grid,
  .cyw-steps__grid,
  .cyw-policy__grid { grid-template-columns: minmax(0, 1fr); }
  .cyw-reading__grid > :last-child,
  .cyw-open-index__grid > :last-child,
  .cyw-related__grid > :last-child { grid-column: auto; }
  .cyw-policy__statement { padding: var(--space-5); }
}

@media (max-width: 22.49rem) {
  .cyw-legend { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 24.37rem) {
  .cyw-hero__actions .button,
  .cyw-closing__panel .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cywilizacje-page::before { background-image: none; }
}