.grafika-page { overflow: hidden; }
.grafika-hero { min-height: var(--hero-min-height); position: relative; display: flex; align-items: center; color: var(--color-aged-ivory); isolation: isolate; }
.grafika-hero__image, .grafika-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.grafika-hero__image { object-fit: cover; object-position: right center; z-index: -2; }
.grafika-hero__shade { background: linear-gradient(90deg, rgb(13 36 61 / 94%) 0%, rgb(13 36 61 / 78%) 38%, rgb(13 36 61 / 22%) 72%, rgb(13 36 61 / 10%) 100%); z-index: -1; }
.grafika-hero__container { width: min(100% - 3rem, var(--container-max)); }
.grafika-hero__panel { width: min(43%, 32.5rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7); border: var(--border-gold-strong); background: rgb(13 36 61 / 86%); box-shadow: var(--shadow-panel); }
.grafika-hero__panel > * { min-width: 0; margin: 0; }
.grafika-hero__panel h1, .grafika-hero__panel p { color: var(--color-aged-ivory); }
.grafika-hero__panel h1 { max-width: 10ch; }
.grafika-hero__panel .lead { max-width: 31rem; }
.grafika-hero__actions { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.grafika-hero__actions > * { min-width: 0; margin: 0; }
.grafika-hero__actions p { max-width: 29rem; }
.grafika-hero__actions small { color: var(--color-aged-ivory); font-size: var(--font-size-small); }
.grafika-language__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); column-gap: calc(var(--space-6) * 2); align-items: start; }
.grafika-language__copy, .grafika-language__quote { min-width: 0; }
.grafika-language__copy { grid-column: 1; max-width: 42.5rem; margin-left: calc((100% + var(--space-5)) / 10); }
.grafika-language__copy > :last-child { margin-bottom: 0; }
.grafika-language__quote { grid-column: 2; margin-top: var(--space-10); }
.grafika-language__note { margin-top: var(--space-6); }
.grafika-settlement__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.grafika-settlement__panel, .grafika-settlement__grid > * { min-width: 0; }
.grafika-numbered { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.grafika-numbered > * { min-width: 0; }
.grafika-numbered > span { color: var(--color-burgundy); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1; }
.grafika-numbered h3 { margin-bottom: var(--space-3); }
.grafika-watch { border: 1px solid var(--color-burgundy); padding: var(--space-4); background: rgb(118 45 53 / 8%); }
.grafika-watch .content-list { margin: var(--space-3) 0 0; }
.grafika-figure { min-width: 0; margin: 0; }
.grafika-figure button, .grafika-gallery__item button { display: block; width: 100%; padding: 0; border: var(--border-gold); background: var(--color-royal-blue-dark); overflow: hidden; }
.grafika-figure button:hover, .grafika-gallery__item button:hover { transform: translateY(-3px); box-shadow: var(--shadow-panel); }
.grafika-figure img, .grafika-gallery__item img { width: 100%; max-width: 100%; transition: transform var(--transition-fast); }
.grafika-figure--screen img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-royal-blue-dark); }
.grafika-figure--battle img { aspect-ratio: 16 / 9; object-fit: cover; }
.grafika-figure--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.grafika-figure figcaption { max-width: 100%; }
.grafika-map__intro { width: min(58.333%, 44rem); min-width: 0; }
.grafika-map__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.grafika-map__grid > * { min-width: 0; }
.grafika-map__scrollhint { display: none; }
.grafika-map__notes { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.grafika-map__notes > div { min-width: 0; border-left: 2px solid var(--color-antique-gold); padding-left: var(--space-4); }
.grafika-map__notes span { color: var(--color-burgundy); font-size: var(--font-size-meta); font-weight: 700; letter-spacing: .12em; }
.grafika-map__notes h3 { margin: var(--space-1) 0 var(--space-2); }
.grafika-map__notes p { margin: 0; }
.grafika-battle__copy { width: min(58.333%, 43.75rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.grafika-battle__copy > * { min-width: 0; margin: 0; }
.grafika-battle__copy .lead { color: var(--color-aged-ivory); }
.grafika-battle__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grafika-battle__points > div { min-width: 0; border-top: var(--border-gold); padding-top: var(--space-3); }
.grafika-battle__points h3 { color: var(--color-aged-ivory); margin-bottom: var(--space-2); }
.grafika-battle__points p { margin: 0; color: var(--color-aged-ivory); }
.grafika-battle__danger { border-color: var(--color-burgundy) !important; }
.grafika-figure--battle { margin-top: var(--space-6); }
.grafika-battle figcaption { color: var(--color-aged-ivory); text-align: right; }
.grafika-character__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(18.75rem, 5fr); gap: var(--space-6); align-items: start; }
.grafika-character__grid > * { min-width: 0; }
.grafika-character__copy { max-width: 43rem; }
.grafika-character__list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.grafika-character__list li { min-width: 0; border-left: 2px solid var(--color-antique-gold); padding-left: var(--space-3); }
.grafika-figure--portrait figcaption { max-width: 21rem; padding: var(--space-3); background: var(--color-stone-mist); }
.grafika-mobile__intro { width: min(66.666%, 48rem); min-width: 0; }
.grafika-mobile__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.grafika-mobile__cards > * { min-width: 0; }
.grafika-gallery__intro { width: min(58.333%, 43rem); min-width: 0; margin-inline: auto; text-align: left; }
.grafika-gallery__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.grafika-gallery__grid > * { min-width: 0; }
.grafika-gallery__item { margin: 0; }
.grafika-gallery__item--landscape { grid-column: span 7; }
.grafika-gallery__item--portrait { grid-column: span 5; }
.grafika-gallery__item:nth-child(3), .grafika-gallery__item:nth-child(4), .grafika-gallery__item:nth-child(5) { grid-column: span 4; }
.grafika-gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; }
.grafika-gallery__item--landscape img { aspect-ratio: 16 / 9; }
.grafika-gallery__item--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.grafika-gallery__note { width: min(58.333%, 43rem); min-width: 0; margin: var(--space-6) auto 0; }
.grafika-carousel-controls { display: none; }
.grafika-verdict { border-top: var(--border-gold-strong); }
.grafika-verdict__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--space-6) * 2); align-items: start; }
.grafika-verdict__grid > * { min-width: 0; }
.grafika-verdict__copy { max-width: 43rem; }
.grafika-verdict__strengths { grid-column: 2; }
.grafika-verdict__strengths .content-list { margin-bottom: 0; }
.grafika-cta { border-top: var(--border-gold); border-bottom: var(--border-gold); padding-block: var(--space-9); }
.grafika-cta__content { width: min(50%, 38.75rem); min-width: 0; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.grafika-cta__content > * { min-width: 0; margin: 0; }
.grafika-cta__content p { color: var(--color-aged-ivory); max-width: 32rem; }
.grafika-dialog[hidden] { display: none; }
.grafika-dialog { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--space-4); }
.grafika-dialog__backdrop { position: absolute; inset: 0; background: rgb(13 36 61 / 88%); }
.grafika-dialog__panel { position: relative; width: min(100%, 68rem); max-height: calc(100vh - 2rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-gold-strong); background: var(--color-parchment); overflow: auto; }
.grafika-dialog__panel img { width: 100%; max-height: 75vh; object-fit: contain; background: var(--color-royal-blue-dark); }
.grafika-dialog__panel p { margin: 0; }
.grafika-dialog__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2.75rem; min-width: 2.75rem; height: 2.75rem; border: var(--border-gold-strong); background: var(--color-royal-blue-dark); color: var(--color-aged-ivory); font-size: 1.75rem; line-height: 1; }
@media (max-width: 57.5rem) {
.grafika-hero { min-height: var(--hero-min-height); align-items: flex-start; padding-top: var(--space-8); }
.grafika-hero__panel { width: 100%; max-width: 36rem; }
.grafika-language__grid, .grafika-settlement__grid, .grafika-map__grid, .grafika-character__grid { grid-template-columns: minmax(0, 1fr); }
.grafika-language__copy { grid-column: 1; margin-left: 0; }
.grafika-language__quote { grid-column: 1; margin-top: var(--space-6); max-width: 34rem; }
.grafika-settlement__panel { order: 1; }
.grafika-settlement__grid .grafika-figure { order: 2; }
.grafika-map__intro, .grafika-battle__copy, .grafika-mobile__intro, .grafika-gallery__intro, .grafika-gallery__note { width: 100%; }
.grafika-map__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grafika-map__notes > div { min-width: 0; }
.grafika-character__grid .grafika-figure { order: -1; width: min(100%, 28rem); }
.grafika-mobile__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grafika-mobile__cards > :last-child { grid-column: span 2; }
.grafika-gallery__item--landscape, .grafika-gallery__item--portrait, .grafika-gallery__item:nth-child(3), .grafika-gallery__item:nth-child(4) { grid-column: span 6; }
.grafika-gallery__item:nth-child(5) { grid-column: span 12; }
.grafika-verdict__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.grafika-verdict__strengths { grid-column: 1; }
.grafika-cta__content { width: min(100%, 38.75rem); }
}
@media (max-width: 53.75rem) {
.grafika-verdict__copy { max-width: none; }
}
@media (max-width: 47.5rem) {
.grafika-battle__points { grid-template-columns: minmax(0, 1fr); }
.grafika-map__notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
.grafika-hero { min-height: var(--hero-min-height); padding-top: var(--space-6); align-items: flex-start; }
.grafika-hero__image { object-position: 62% center; }
.grafika-hero__shade { background: linear-gradient(180deg, rgb(13 36 61 / 96%) 0%, rgb(13 36 61 / 82%) 56%, rgb(13 36 61 / 18%) 100%); }
.grafika-hero__container { width: min(100% - 2rem, var(--container-max)); }
.grafika-hero__panel { padding: var(--space-5); background: rgb(13 36 61 / 90%); }
.grafika-hero__panel h1 { max-width: 12ch; }
.grafika-language__quote { margin-top: var(--space-5); }
.grafika-settlement__grid { gap: var(--space-5); }
.grafika-map__scrollhint { display: block; margin-bottom: var(--space-2); color: var(--color-ink-muted); font-size: var(--font-size-small); }
.grafika-mobile__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.grafika-mobile__cards > :last-child { grid-column: 1; }
.grafika-carousel-controls { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.grafika-carousel-controls > * { min-width: 0; }
.grafika-carousel-controls button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; border: var(--border-gold); background: var(--color-parchment); color: var(--color-royal-blue); font-weight: 700; }
.grafika-gallery__grid { display: flex; gap: var(--space-4); margin-inline: calc(var(--container-gutter) * -1); padding-inline: var(--container-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.grafika-gallery__item, .grafika-gallery__item--landscape, .grafika-gallery__item--portrait, .grafika-gallery__item:nth-child(3), .grafika-gallery__item:nth-child(4), .grafika-gallery__item:nth-child(5) { flex: 0 0 min(86vw, 25rem); width: min(86vw, 25rem); min-width: 0; grid-column: auto; scroll-snap-align: start; }
.grafika-gallery__item--portrait img { aspect-ratio: 3 / 4; }
.grafika-gallery__note { margin-top: var(--space-5); }
.grafika-cta { padding-block: var(--space-8); }
.grafika-cta__content .button { width: 100%; }
}