:root { color-scheme: dark; background: #080a0c; }
@font-face {
  font-family: "Temprals Cinzel";
  src: url("/steam/media/fonts/Cinzel.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  max-width: 1168px;
  margin: auto;
  padding: 0 24px 64px;
}
.brand { --logo-size: min(78vw, 48svh, 480px); position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px 0; }
.play-link {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: env(safe-area-inset-right, 0px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #b49a6870;
  border-radius: 4px;
  background: #b49a680c;
  color: #decaa0;
  font: 400 12px/1.5 "Temprals Cinzel", Georgia, serif;
  letter-spacing: .06em;
  text-decoration: none;
}
.play-link:hover, .play-link:focus-visible {
  border-color: #decaa0;
  background: #b49a6824;
  color: #fff4d8;
}
p {
  margin: 0;
  color: #c9b99a;
  font: 12px Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: .25em;
}
.brand canvas {
  display: block;
  width: var(--logo-size);
  max-width: 100%;
  height: auto;
}
.brand-title {
  margin: calc(-.14 * var(--logo-size) - 8px) 0 0;
  padding-left: .20em;
  font: 400 clamp(27px, 4.3vw, 46px)/1.35 "Temprals Cinzel", Georgia, serif;
  letter-spacing: .20em;
  color: transparent;
  background: linear-gradient(105deg, #92754b 0%, #decaa0 34%, #fff4d8 44%, #b49a68 54%, #e0cda9 75%, #92754b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 10px #c6a46e30);
  opacity: 0;
  transition: opacity 650ms ease-out;
}
.brand-subtitle { font: 400 clamp(11px, 1.5vw, 16px)/1.6 "Temprals Cinzel", Georgia, serif; letter-spacing: .20em; padding-left: .20em; opacity: 0; transition: opacity 650ms 150ms ease-out; }
.brand-episode { margin-top: 12px; color: #c9b99a; font: 400 clamp(8px, .8vw, 9px)/1.7 "Temprals Cinzel", Georgia, serif; letter-spacing: .14em; opacity: 0; transition: opacity 450ms ease-out, text-shadow 450ms ease-out; }
.brand-date { margin-top: 24px; opacity: 0; transition: opacity 650ms ease-out; }
.brand.struck .brand-title, .brand.struck .brand-subtitle, .brand.settled .brand-date { opacity: 1; }
.brand.settled .brand-episode { opacity: .32; }
@media (hover: hover) {
  .brand.settled .brand-episode:hover { opacity: .78; text-shadow: 0 0 8px #dfc28b88, 0 0 18px #dfc28b33; }
}
.carnet-link { margin: 56px 0 0; text-align: center; font: italic 16px/1.55 Georgia, serif; }
.carnet-link a { color: #c9b99a; text-underline-offset: 4px; }
.language { display: block; margin-top: 28px; text-align: right; color: #c9b99a; font: 12px Georgia, serif; padding: 14px 8px; text-underline-offset: 4px; }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
figure { margin: 0; min-width: 0; }
.featured { grid-column: 1 / -1; }
.gallery img, .gallery video { display: block; width: 100%; height: auto; border-radius: 6px; background: #0d1014; }
.gallery video { aspect-ratio: 16 / 9; object-fit: contain; }
figcaption { margin-top: 14px; color: #c9b99a; font: italic 16px/1.55 Georgia, serif; text-align: center; }
a:focus-visible, video:focus-visible { outline: 2px solid #c9b99a; outline-offset: 4px; }
@media (max-width: 640px) {
  main { padding: 0 12px 36px; }
  .gallery { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-title, .brand-subtitle, .brand-episode, .brand-date { transition: none; }
}