.o-grze-page { overflow: hidden; }
.o-grze-page .section { position: relative; }
.o-grze-hero { padding: clamp(4rem, 8vw, 7.5rem) 0; background: linear-gradient(128deg, var(--color-sky-100), var(--color-pearl-100) 49%, #e9ddf7); }
.o-grze-hero__grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; min-width: 0; }
.o-grze-hero__content { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-right: -3rem; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.o-grze-hero__content h1, .o-grze-hero__content p { margin: 0; }
.o-grze-hero__content .lead { max-width: 33rem; }
.o-grze-hero__actions, .o-grze-final__actions, .o-grze-observatory__actions { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.o-grze-hero__actions > *, .o-grze-final__actions > *, .o-grze-observatory__actions > * { min-width: 0; flex: 0 1 auto; }
.o-grze-hero__pillars { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.o-grze-pillar { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); border: 1px solid rgba(221,243,255,.26); border-radius: var(--radius-md); background: rgba(255,253,248,.09); padding: var(--space-3); font-size: var(--text-xs); line-height: 1.45; }
.o-grze-pillar strong { color: #fff; font-size: .78rem; }
.o-grze-pillar__icon { color: var(--color-gold-500); font-size: 1.3rem; line-height: 1; }
.o-grze-hero__scene { min-width: 0; height: min(48vw, 41rem); overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.o-grze-hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.o-grze-map { background: var(--color-pearl-050); }
.o-grze-map__intro, .o-grze-community__intro, .o-grze-paths__intro, .o-grze-audience__intro { max-width: 40.625rem; }
.o-grze-map__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.o-grze-mechanic { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-pearl-100); padding: var(--space-5); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-glass); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.o-grze-mechanic:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.o-grze-mechanic h3, .o-grze-mechanic p { margin: 0; }
.o-grze-mechanic__number, .o-grze-path > span, .o-grze-audience__grid > article > span { color: var(--color-gold-500); font-weight: 700; letter-spacing: .12em; }
.o-grze-mechanic--one, .o-grze-mechanic--two { grid-column: span 3; }
.o-grze-mechanic--three { grid-column: span 6; }
.o-grze-mechanic--four { grid-column: span 7; }
.o-grze-mechanic--five { grid-column: span 5; }
.o-grze-inline-links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.o-grze-inline-links > * { min-width: 0; }
.o-grze-text-link { margin-top: auto; color: var(--color-amethyst-700); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-gold-500); text-underline-offset: .2em; }
.o-grze-collection { background: var(--color-sky-100); }
.o-grze-collection__grid, .o-grze-city__grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.o-grze-collection__content, .o-grze-city__content { min-width: 0; }
.o-grze-collection__content > .lead { max-width: 37.5rem; }
.o-grze-timeline { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.o-grze-timeline__item { display: grid; min-width: 0; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-4); border-left: 1px solid var(--color-gold-500); padding-left: var(--space-4); }
.o-grze-timeline__item > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-amethyst-700); color: #fff; font-size: var(--text-xs); font-weight: 700; }
.o-grze-timeline__item > div { min-width: 0; max-width: 32.5rem; }
.o-grze-callout { border-radius: var(--radius-md); background: rgba(255,253,248,.75); padding: var(--space-3); color: var(--color-amethyst-700); font-weight: 700; }
.o-grze-collection__media, .o-grze-city__media { min-width: 0; margin: 0; }
.o-grze-collection__media { max-width: 27.5rem; justify-self: end; }
.o-grze-collection__media img, .o-grze-city__media img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); object-fit: cover; }
.o-grze-city { background: var(--color-pearl-050); }
.o-grze-city__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.o-grze-city__content > .lead { max-width: 38.75rem; }
.o-grze-city__module { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
.o-grze-city__module h3, .o-grze-city__module p, .o-grze-city__module blockquote, .o-grze-city__module ul { margin: 0; }
.o-grze-city__module blockquote { max-width: 27rem; }
.o-grze-city__module ul { display: flex; flex-direction: column; gap: var(--space-2); }
.o-grze-city__media { align-self: stretch; }
.o-grze-city__media img { width: 100%; height: 100%; min-height: 36rem; object-fit: cover; }
.o-grze-observatory { background: linear-gradient(135deg, var(--color-amethyst-900), var(--color-amethyst-700)); }
.o-grze-observatory__intro { max-width: 40.625rem; }
.o-grze-observatory .eyebrow { color: var(--color-gold-500); }
.o-grze-observatory__cards { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.o-grze-observatory__card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid rgba(221,243,255,.2); border-radius: var(--radius-lg); background: rgba(255,253,248,.08); padding: var(--space-6); }
.o-grze-observatory__card > span { color: var(--color-gold-500); font-size: 2rem; }
.o-grze-observatory__card h3, .o-grze-observatory__card p { margin: 0; }
.o-grze-observatory__summary { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: min(100%, 48.75rem); margin: var(--space-6) auto 0; border: 1px solid rgba(201,148,50,.48); border-radius: var(--radius-lg); background: rgba(255,253,248,.1); padding: var(--space-6); }
.o-grze-observatory__summary h3, .o-grze-observatory__summary p { margin: 0; }
.o-grze-community { background: var(--color-sky-100); }
.o-grze-community__grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.o-grze-community__grid article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-pearl-050); padding: var(--space-5); }
.o-grze-community__grid h3, .o-grze-community__grid p { margin: 0; }
.o-grze-community__rule { margin-top: auto !important; color: var(--color-emerald-900); font-weight: 700; }
.o-grze-paths__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.o-grze-path { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-pearl-100); padding: var(--space-5); color: var(--color-text); text-decoration: none; }
.o-grze-path h3, .o-grze-path p { margin: 0; }
.o-grze-path > strong { margin-top: auto; color: var(--color-amethyst-700); }
.o-grze-path:nth-child(1), .o-grze-path:nth-child(2), .o-grze-path:nth-child(3) { grid-column: span 4; }
.o-grze-path--strategy { grid-column: span 12; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.o-grze-path--strategy > div { min-width: 0; }
.o-grze-path__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.o-grze-path__links a { min-width: 0; font-weight: 700; }
.o-grze-audience { background: var(--color-pearl-100); }
.o-grze-audience__grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.o-grze-audience__grid article { min-width: 0; border-top: 2px solid var(--color-gold-500); padding-top: var(--space-4); }
.o-grze-editorial-rule { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); width: min(100%, 47.5rem); margin: var(--space-7) auto 0; border-left: 3px solid var(--color-gold-500); background: var(--color-pearl-050); padding: var(--space-5); }
.o-grze-editorial-rule p { margin: 0; }
.o-grze-transparency { background: var(--color-pearl-050); }
.o-grze-transparency__container { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); width: min(100% - (var(--container-padding) * 2), 51.25rem); margin-inline: auto; }
.o-grze-transparency__container > .eyebrow, .o-grze-transparency__container > h2 { margin-bottom: 0; }
.o-grze-transparency__panel, .o-grze-transparency__note { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-radius: var(--radius-lg); padding: var(--space-6); }
.o-grze-transparency__panel h3, .o-grze-transparency__panel p, .o-grze-transparency__note h3, .o-grze-transparency__note p { margin: 0; }
.o-grze-transparency__panel--light { border: 1px solid var(--color-border); background: var(--color-sky-100); }
.o-grze-transparency__panel--dark { background: var(--color-amethyst-900); color: var(--color-pearl-050); }
.o-grze-transparency__panel--dark h3, .o-grze-transparency__panel--dark .eyebrow { color: #fff; }
.o-grze-transparency__panel--dark .eyebrow { color: var(--color-gold-500); }
.o-grze-transparency__note { width: min(100%, 43.75rem); border-left: 3px solid var(--color-gold-500); padding-left: var(--space-5); }
.o-grze-final { padding-bottom: var(--space-9); }
.o-grze-final__panel { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 62.5rem); margin-inline: auto; border: 1px solid rgba(201,148,50,.5); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-amethyst-700), #315f8c); padding: var(--space-8); color: #fff; text-align: center; box-shadow: var(--shadow-card); }
.o-grze-final__panel h2, .o-grze-final__panel p { margin: 0; }
.o-grze-final__panel h2 { color: #fff; }
.o-grze-final__panel p { max-width: 36.25rem; }
.o-grze-final__actions { justify-content: center; }
.o-grze-page a:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 3px; }
@media (max-width: 61.24rem) { .o-grze-hero__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } .o-grze-hero__content { margin-right: -1.5rem; } .o-grze-hero__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-grze-pillar:first-child { grid-column: span 2; } .o-grze-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-grze-mechanic--one, .o-grze-mechanic--two, .o-grze-mechanic--four, .o-grze-mechanic--five { grid-column: span 1; } .o-grze-mechanic--three { grid-column: span 2; } }
@media (max-width: 59.99rem) { .o-grze-city__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .o-grze-city__media { grid-row: 1; } .o-grze-city__media img { min-height: auto; aspect-ratio: 16 / 9; } }
@media (max-width: 56.24rem) { .o-grze-collection__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .o-grze-collection__media { grid-row: 1; width: 100%; max-width: none; justify-self: stretch; } .o-grze-collection__media img { aspect-ratio: 16 / 9; object-fit: cover; } }
@media (max-width: 54.99rem) { .o-grze-community__grid, .o-grze-audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .o-grze-community__grid article:last-child, .o-grze-audience__grid article:first-child { grid-column: span 2; } }
@media (max-width: 51.24rem) { .o-grze-observatory__cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.49rem) { .o-grze-hero { padding: var(--space-7) 0; } .o-grze-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .o-grze-hero__content { margin-right: 0; padding: var(--space-5); } .o-grze-hero__content h1 { font-size: clamp(2.625rem, 12vw, 3.5rem); } .o-grze-hero__actions { flex-direction: column; } .o-grze-hero__actions > * { width: 100%; } .o-grze-hero__pillars { grid-template-columns: minmax(0, 1fr); } .o-grze-pillar:first-child { grid-column: span 1; } .o-grze-hero__scene { height: 16.25rem; } .o-grze-map__grid, .o-grze-community__grid, .o-grze-audience__grid { grid-template-columns: minmax(0, 1fr); } .o-grze-mechanic--one, .o-grze-mechanic--two, .o-grze-mechanic--three, .o-grze-mechanic--four, .o-grze-mechanic--five, .o-grze-community__grid article:last-child, .o-grze-audience__grid article:first-child { grid-column: span 1; } .o-grze-paths__grid { grid-template-columns: minmax(0, 1fr); } .o-grze-path:nth-child(1), .o-grze-path:nth-child(2), .o-grze-path:nth-child(3), .o-grze-path--strategy { grid-column: span 1; } .o-grze-path--strategy { display: flex; } .o-grze-path__links { flex-direction: column; width: 100%; } .o-grze-path__links a { min-height: 2.75rem; display: flex; align-items: center; } .o-grze-observatory__card, .o-grze-observatory__summary, .o-grze-transparency__panel { padding: var(--space-5); } .o-grze-observatory__actions, .o-grze-final__actions { flex-direction: column; } .o-grze-observatory__actions > *, .o-grze-final__actions > * { width: 100%; } .o-grze-final__panel { padding: var(--space-6) var(--space-5); } }
@media (prefers-reduced-motion: no-preference) { .o-grze-hero__scene img { animation: o-grze-drift 16s ease-in-out infinite alternate; } }
@keyframes o-grze-drift { from { transform: scale(1); } to { transform: scale(1.035); } }