/* Magic Camelot studio homepage. Design-system tokens (tokens.css) and bundled fonts; effects in studio.js. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night-900); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--gold-400); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--gold-200); }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold-400); color: var(--night-900); padding: 8px 14px; font-family: var(--font-ui); font-weight: 700; }
.skip:focus { top: 12px; color: var(--night-900); }
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.center { text-align: center; }

/* Type */
.eyebrow { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); margin: 0 0 12px; }
.display { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
h2.display { font-size: clamp(30px, 4.6vw, var(--fs-display-l)); }
h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); letter-spacing: .03em; color: var(--text-strong); line-height: var(--lh-heading); margin: 0 0 6px; }
.lede { font-size: var(--fs-body-l); color: var(--text-muted); max-width: 64ch; margin: 16px 0 0; text-wrap: pretty; }
.center .lede { margin-left: auto; margin-right: auto; }
.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 0; width: min(320px, 70%); }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-600)); }
.divider::after { transform: scaleX(-1); }
.divider i { width: 9px; height: 9px; background: var(--gold-300); transform: rotate(45deg); box-shadow: var(--glow-gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-h-m); padding: 0 22px; border: 2px solid var(--gold-400); background: transparent; color: var(--gold-400); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn:hover { background: var(--accent-soft); color: var(--gold-200); box-shadow: var(--glow-gold); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 19px; height: 19px; }
.btn-solid { background: var(--gold-400); color: var(--night-900); border-color: transparent; }
.btn-solid:hover { background: var(--gold-300); color: var(--night-900); box-shadow: var(--glow-gold-strong); }
.btn-l { height: var(--control-h-l); padding: 0 30px; font-size: 19px; }
.btn-quiet { border-color: transparent; color: var(--text-body); font-family: var(--font-ui); font-weight: 500; font-size: 17px; }
.btn-quiet:hover { background: none; box-shadow: none; color: var(--gold-200); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; }
.site-header.solid, .no-js .site-header { background: rgba(4,11,18,.8); backdrop-filter: var(--blur-overlay); -webkit-backdrop-filter: var(--blur-overlay); border-bottom-color: var(--border-faint); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--text-strong); font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .02em; }
.brand:hover { color: var(--gold-200); }
.brand img { height: 42px; width: auto; filter: var(--glow-logo); }
.site-nav { display: flex; gap: 28px; font-family: var(--font-ui); font-size: 16px; }
.site-nav a, .lang { color: var(--text-muted); }
.site-nav a:hover, .lang:hover { color: var(--gold-200); }
.lang { font-family: var(--font-ui); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.lang .icon { width: 17px; height: 17px; }

/* Hero with the magic mist shader */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--gradient-night); padding: 110px 0 90px; isolation: isolate; }
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-fx.on { opacity: 1; }
.hero-castle { position: absolute; left: 0; bottom: 0; height: min(100%, 1100px); width: auto; max-width: none; z-index: -1; opacity: .95; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 95%); mask-image: linear-gradient(90deg, #000 45%, transparent 95%); }
.hero-castle.right { left: auto; right: 0; transform: scaleX(-1); opacity: .55; height: min(80%, 880px); }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30%; background: var(--gradient-protect-bottom); pointer-events: none; z-index: -1; }
/* When the 3D castle is live it replaces the mist and the painted silhouettes; a soft vignette keeps the text readable. */
.hero.castle-live .hero-fx, .hero.castle-live .hero-castle { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero.castle-live::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(4,11,18,.62), rgba(4,11,18,.18) 75%, rgba(4,11,18,.05)); }
.castle-hint { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; font-family: var(--font-ui); font-size: 15px; color: var(--parchment-300); }
.castle-hint[hidden] { display: none; }
.castle-hint .icon { width: 16px; height: 16px; color: var(--gold-400); }
.castle-enter[hidden] { display: none; }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-crest { width: 150px; height: auto; margin-bottom: 26px; filter: drop-shadow(0 0 28px rgba(232,200,103,.45)); animation: crest 6s ease-in-out infinite; }
@keyframes crest { 0%, 100% { filter: drop-shadow(0 0 22px rgba(232,200,103,.35)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 40px rgba(232,200,103,.6)); transform: translateY(-6px); } }
.hero h1 { font-size: clamp(44px, 9vw, 104px); text-shadow: 0 0 40px rgba(212,175,55,.25); }
.hero h1 small { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 10px; text-shadow: none; }
.hero-tagline { font-family: var(--font-heading); font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); color: var(--gold-200); letter-spacing: .05em; margin: 16px 0 0; }
.hero .lede { max-width: 62ch; color: var(--parchment-200); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 36px; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; color: var(--gold-400); padding: 8px; animation: bob 2.4s ease-in-out infinite; }
.scroll-hint .icon { width: 28px; height: 28px; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }

/* Sections */
.section { position: relative; padding: 120px 0; }
.section.alt { background: linear-gradient(180deg, var(--night-950), var(--night-900)); border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); }
.section-head { margin-bottom: 56px; }

.card { position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-1); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card:hover { border-color: var(--gold-400); box-shadow: var(--shadow-2), var(--glow-gold); }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value { padding: 26px 24px 28px; }
.value > .icon { width: 30px; height: 30px; color: var(--gold-300); margin-bottom: 16px; filter: drop-shadow(0 0 10px rgba(212,175,55,.35)); }
.value h3 { font-size: 19px; }
.value p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.55; }

/* Project cards */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.project { display: flex; flex-direction: column; overflow: hidden; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); will-change: transform; }
.project.tilting { transition: transform .08s linear, border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.project .media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night-950); border-bottom: 1px solid var(--border-subtle); }
.project .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.project:hover .media img:not(.door-crest) { transform: scale(1.045); }
.project .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,17,27,.55)); pointer-events: none; }
.project .card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 28px; }
.project h3 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .02em; margin: 2px 0 4px; }
.project .tagline { margin: 0 0 14px; font-family: var(--font-heading); font-size: 16px; color: var(--gold-200); letter-spacing: .03em; }
.project .desc { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.project .links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.project .soon { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 15px; color: var(--text-faint); }
.project .soon .icon { width: 17px; height: 17px; color: var(--arcane-400); }
.glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(245,227,164,.16), transparent 45%); mix-blend-mode: screen; }
.project.tilting .glare { opacity: 1; }

.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status-marble, .status-companion, .status-bomb, .status-runen, .status-maze { color: var(--emerald-400); }
.status-marble i, .status-companion i, .status-bomb i, .status-runen i, .status-maze i { animation: pulse 2s ease-in-out infinite; }
.status-tesla { color: var(--arcane-400); }
.status-next { color: var(--text-faint); }
@keyframes pulse { 50% { opacity: .35; } }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; }
.chips li { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--accent-soft); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--gold-200); white-space: nowrap; }

/* Per-world accents */
.accent-neon:hover { border-color: #d65bd1; box-shadow: var(--shadow-2), 0 0 26px rgba(214,91,209,.35), 0 0 60px rgba(64,220,230,.12); }
.accent-maze:hover { border-color: #46e6f0; box-shadow: var(--shadow-2), 0 0 26px rgba(70,230,240,.35), 0 0 60px rgba(214,91,209,.14); }
.accent-rune:hover { border-color: #7fc8ff; box-shadow: var(--shadow-2), 0 0 28px rgba(127,200,255,.35); }
.accent-ember:hover { border-color: #ff7a3a; box-shadow: var(--shadow-2), 0 0 28px rgba(255,90,40,.35); }
/* An odd last card (the next world) runs across the full width, picture on the left. */
@media (min-width: 761px) {
  .projects .project:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .projects .project:last-child:nth-child(odd) .media { flex: 0 0 42%; aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--border-subtle); }
}
.accent-arc:hover { border-color: var(--arcane-400); box-shadow: var(--shadow-2), 0 0 28px rgba(127,179,217,.4); }
.accent-arc .media img { filter: saturate(1.05) brightness(calc(.95 + var(--flash, 0) * .14)); transition: transform 1.2s var(--ease-out), filter .12s linear; }
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* The sealed door of the next world */
.media.door { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, #0a2738 0%, #061a27 45%, #040b12 100%); }
.door .rune { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(212,175,55,.28);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(212,175,55,.35) 25%, transparent 30% 60%, rgba(127,179,217,.3) 66%, transparent 72%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%);
  animation: spin 18s linear infinite; }
.door .rune.r2 { width: 44%; animation-duration: 11s; animation-direction: reverse; border-style: dashed; }
.project .media.door .door-crest { position: relative; width: 22%; height: auto; object-fit: contain; opacity: .55; filter: grayscale(.6) drop-shadow(0 0 18px rgba(232,200,103,.35)); transition: opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.project:hover .media.door .door-crest { opacity: .95; filter: grayscale(0) drop-shadow(0 0 30px rgba(232,200,103,.6)); }
.project:hover .door .rune { animation-duration: 6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Demoscene sine scroller */
.scene { position: relative; padding: 64px 0 56px; background: var(--night-950); border-bottom: 1px solid var(--border-faint); overflow: hidden; }
.scene .eyebrow { margin-bottom: 18px; }
.scroller { width: 100%; height: 150px; }
.scroller-fallback { margin: 0; padding: 0 var(--gutter); text-align: center; font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; color: var(--gold-300); }
.js .scroller-fallback { display: none; }
.scroller-play { margin: 18px 0 0; text-align: center; }
.scroller-play[hidden] { display: none; }
.no-js .scroller { display: none; }

.contact-action { margin: 34px 0 0; }
.contact-action .btn { font-family: var(--font-ui); font-weight: 700; letter-spacing: .01em; text-transform: none; }

.site-footer { border-top: 1px solid var(--border-subtle); background: var(--night-950); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 32px; padding-bottom: 32px; font-family: var(--font-ui); font-size: 14px; color: var(--text-faint); }
.site-footer .who { display: flex; align-items: center; gap: 12px; }
.site-footer .who img { height: 40px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a { color: var(--text-muted); }
.site-footer nav a:hover { color: var(--gold-200); }
.scene-line { width: 100%; margin: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--parchment-500); }

/* Reveal on scroll (only when scripts run) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .project.reveal.in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.values .reveal:nth-child(2), .projects .reveal:nth-child(2) { transition-delay: 90ms; }
.values .reveal:nth-child(3), .projects .reveal:nth-child(3) { transition-delay: 180ms; }
.values .reveal:nth-child(4), .projects .reveal:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .hero-inner > * { animation: rise var(--dur-slow) var(--ease-out) both; }
  .hero-inner > :nth-child(2) { animation-delay: 80ms; } .hero-inner > :nth-child(3) { animation-delay: 160ms; }
  .hero-inner > :nth-child(4) { animation-delay: 240ms; } .hero-inner > :nth-child(5) { animation-delay: 320ms; }
  .hero-inner > :nth-child(6) { animation-delay: 400ms; }
  .hero-inner > .hero-crest { animation: rise var(--dur-slow) var(--ease-out) both, crest 6s ease-in-out 1s infinite; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* Motion follows the system setting unless the visitor switches the magic on or off with the wand. */
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-on) { scroll-behavior: auto; }
  html:not(.fx-on) *, html:not(.fx-on) *::before, html:not(.fx-on) *::after { animation: none !important; transition: none !important; }
  html:not(.fx-on).js .reveal { opacity: 1; transform: none; }
}
html.fx-off { scroll-behavior: auto; }
html.fx-off *, html.fx-off *::before, html.fx-off *::after { animation: none !important; transition: none !important; }
html.fx-off.js .reveal { opacity: 1; transform: none; }
.fx-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-faint); background: transparent; color: var(--text-faint); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fx-toggle[hidden] { display: none; }
.fx-toggle .icon { width: 18px; height: 18px; }
.fx-toggle:hover { color: var(--gold-200); border-color: var(--gold-400); }
.fx-toggle[aria-pressed="true"] { color: var(--gold-300); border-color: var(--border-subtle); box-shadow: var(--glow-gold); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1020px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 96px 0; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .site-nav { display: none; }
  .site-header .wrap { height: 60px; }
  .brand { font-size: 18px; }
  .brand img { height: 34px; }
  .lang span { display: none; }
  .hero { padding: 90px 0 80px; }
  .hero-crest { width: 110px; }
  .hero h1 small { letter-spacing: .16em; font-size: 13px; }
  .hero-castle.right { display: none; }
  .hero-actions .btn { width: 100%; }
  .projects, .values { grid-template-columns: 1fr; }
  .project .card-body { padding: 18px 18px 22px; }
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 36px; }
  .scroller { height: 110px; }
  .contact-action .btn { width: 100%; font-size: 17px; }
}

/* ---------- Press page (/presse/, /en/press/) ---------- */
.press .site-header { position: sticky; }
.press-hero { padding: calc(var(--header-h) + 72px) 0 72px; }
.press-hero h1 { font-size: clamp(36px, 6vw, var(--fs-display-xl)); }
.press-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.press-contact { margin: 16px 0 0; color: var(--text-muted); }
.press-contact a { color: var(--gold-300); }
.press .section { padding: 80px 0; }
.press h2.display { font-size: clamp(26px, 3.6vw, var(--fs-h1)); margin-bottom: 14px; }
.press .muted { color: var(--text-muted); margin: 0 0 20px; max-width: 64ch; }
.press-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.press-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border-faint); }
.press-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-faint); }
.press-facts dt { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); padding-top: 3px; }
.press-facts dd { margin: 0; color: var(--text-body); }
.about-texts { display: grid; gap: 14px; }
.about-text { padding: 18px 20px 20px; }
.about-text:hover { border-color: var(--border-subtle); box-shadow: var(--shadow-1); }
.at-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.at-head h3 { margin: 0; font-size: var(--fs-h4); }
.at-head .btn { height: 36px; padding: 0 12px; font-size: 15px; }
.about-text p { margin: 10px 0 0; color: var(--text-body); }
.press-worlds { display: grid; gap: 28px; margin-top: 28px; }
.press-world { padding: 28px; display: grid; gap: 16px; }
.press-world:hover { border-color: var(--border-subtle); box-shadow: var(--shadow-1); }
.press-world > p { margin: 0; color: var(--text-body); max-width: 72ch; }
.pw-head .eyebrow { margin-bottom: 6px; }
.pw-head h3 { font-size: clamp(24px, 3vw, var(--fs-h2)); }
.pw-tag { margin: 0; color: var(--gold-200); font-family: var(--font-heading); }
.press-clip { margin: 0; }
.press-clip video { display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; background: var(--night-950); border: 1px solid var(--border-subtle); }
.press-clip figcaption { margin-top: 8px; }
.press-clip a, .pw-links a { text-decoration: none; }
.press-clip a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-300); }
.press-clip a .icon { width: 17px; height: 17px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shot { display: block; border: 1px solid var(--border-faint); background: var(--night-950); transition: border-color var(--dur-fast) var(--ease-out); }
.shot:hover { border-color: var(--gold-400); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pw-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.logo-item { display: grid; gap: 10px; padding: 16px; justify-items: center; text-align: center; color: var(--text-muted); font-size: 14px; text-decoration: none; }
.logo-item img { height: 110px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 860px) {
  .press-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .press-world { padding: 20px; }
  .press-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
