:root {
  color-scheme: dark;
  --night: #090a09;
  --night-soft: #11120f;
  --ivory: #eee9df;
  --muted: #a8a59b;
  --gold: #cbbb88;
  --gold-soft: rgba(203, 187, 136, .42);
  --rule: rgba(239, 235, 225, .17);
}
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(225, 213, 176, .045), transparent 42rem),
    radial-gradient(ellipse at 50% 42%, rgba(95, 94, 78, .075), transparent 56rem),
    var(--night);
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.17'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: 20; transform: translateY(-150%); padding: 10px 14px; color: var(--night); background: var(--ivory); }
.skip-link:focus { transform: translateY(0); }
.masthead { display: flex; flex-direction: column; align-items: center; padding: clamp(38px, 6vw, 72px) 24px 0; }
.brand-mark { width: clamp(210px, 28vw, 330px); height: auto; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(580px, 84vw); color: var(--gold); }
.ornament > span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.ornament > span:last-child { transform: rotate(180deg); }
.ornament svg { flex: 0 0 74px; width: 74px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; }
.ornament--brand { margin-top: clamp(24px, 3vw, 34px); }
.hero { width: min(100% - 48px, 1120px); margin: 0 auto; padding: clamp(34px, 4.4vw, 56px) 0 0; text-align: center; }
h1, h2 { font-family: "EB Garamond", Georgia, serif; font-weight: 400; }
.hero h1 { max-width: 1000px; margin: 0 auto; font-size: clamp(46px, 6.6vw, 82px); line-height: .98; letter-spacing: -.028em; }
.hero-copy { max-width: 765px; margin: 24px auto 0; color: #c7c3b9; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.58; }
.hero-copy p { margin: 0; }
.hero-copy p + p { margin-top: 8px; }
.hero-media { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: clamp(34px, 5vw, 58px) auto 0; overflow: hidden; isolation: isolate; background: #151511; border: 1px solid rgba(204, 191, 150, .22); }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #11120f; }
.video-fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; background: linear-gradient(180deg, rgba(7,8,7,.06), rgba(7,8,7,.5)); pointer-events: none; transition: opacity .7s ease; }
.hero-media.is-playing .video-fallback { opacity: 0; }
.fallback-mark { display: grid; place-items: center; width: 60px; aspect-ratio: 1; border: 1px solid var(--gold-soft); color: var(--gold); font: 34px/1 "EB Garamond", Georgia, serif; transform: rotate(45deg); }
.fallback-mark::first-letter { transform: rotate(-45deg); }
.fallback-label { color: rgba(241, 236, 221, .85); font-size: 10px; letter-spacing: .2em; }
.hero-caption { position: absolute; right: 18px; bottom: 14px; left: 18px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; color: rgba(239, 235, 225, .78); font-size: 12px; letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.75); pointer-events: none; }
.spotlights { width: min(100% - 64px, 1180px); margin: 0 auto; padding-top: clamp(48px, 6vw, 76px); }
.spotlight { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); grid-template-areas: "media copy"; align-items: center; gap: clamp(38px, 6.4vw, 88px); padding: 18px 0; }
.spotlight--reverse { grid-template-areas: "copy media"; }
.spotlight-media { grid-area: media; position: relative; overflow: hidden; aspect-ratio: 1.72 / 1; background: var(--night-soft); border: 1px solid rgba(203, 187, 136, .24); }
.spotlight-media.spotlight-media--screenshot { aspect-ratio: 16 / 9; }
.spotlight-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(239,235,225,.035); pointer-events: none; }
.spotlight-media img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-media figcaption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 34px 16px 12px; color: rgba(243,239,229,.86); background: linear-gradient(transparent, rgba(8,9,8,.76)); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.spotlight-media figcaption span:last-child { text-align: right; color: rgba(226,220,202,.76); letter-spacing: .08em; }
.spotlight-copy { grid-area: copy; max-width: 490px; }
.eyebrow { margin: 0 0 16px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .22em; line-height: 1.3; text-transform: uppercase; }
.eyebrow span { margin-right: 9px; color: rgba(237,232,220,.55); }
.spotlight-copy h2 { margin: 0 0 21px; font-size: clamp(39px, 4vw, 54px); line-height: .98; letter-spacing: -.018em; }
.spotlight-copy p:not(.eyebrow) { margin: 0 0 15px; color: #bab7ad; font-size: 17px; line-height: 1.64; }
.spotlight-copy strong { color: var(--gold); font-weight: 500; white-space: nowrap; }
.spotlight-copy .freedom-line { margin-top: 24px !important; color: var(--ivory) !important; font: 500 25px/1.15 "EB Garamond", Georgia, serif !important; }
.ornament--section { width: min(380px, 76vw); margin: clamp(46px, 7vw, 84px) auto; opacity: .83; }
.ornament--hero { width: min(380px, 76vw); margin: 0 auto clamp(40px, 5vw, 60px); opacity: .83; }
.spotlight-media--world img { filter: brightness(.76) saturate(.74); }
.spotlight-media--screenshot img { object-fit: cover; }
.world-caption { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; color: #f0eadb; text-align: center; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.world-caption > span:nth-child(2) { font: 500 clamp(27px, 3vw, 39px)/.98 "EB Garamond", Georgia, serif; letter-spacing: .07em; }
.world-caption em { color: var(--gold); font-style: normal; }
.world-caption__rule { width: 62px; height: 1px; background: var(--gold); opacity: .8; }
.spotlight-media--world figcaption { z-index: 2; }
.steam { position: relative; padding: clamp(66px, 9vw, 106px) 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.steam .eyebrow { margin-bottom: 14px; }
.steam h2 { margin: 0; font-size: clamp(46px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; }
.steam-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 14px; }
.steam-title .steam-brandmark { display: block; width: clamp(112px, 14vw, 150px); height: auto; object-fit: contain; }
.steam-title .steam-year { color: var(--gold); }
.steam > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 16px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; width: min(100% - 64px, 1030px); margin: 0 auto; padding: clamp(55px, 8vw, 88px) 0; }
.contact .eyebrow { margin-bottom: 9px; }
.contact h2 { margin: 0; font-size: clamp(42px, 5vw, 56px); line-height: 1; }
.contact-details p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.email-link { display: inline-block; padding: 6px 0; color: var(--ivory); font-size: clamp(19px, 2.3vw, 24px); text-decoration-color: var(--gold-soft); text-underline-offset: 5px; overflow-wrap: anywhere; }
.email-link:hover, .email-link:focus-visible { color: var(--gold); }
.email-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
.footer { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; width: min(100% - 64px, 1180px); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid rgba(236,232,222,.1); color: #89877f; font-size: 12px; letter-spacing: .04em; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.footer-emblem { display: block; width: auto; height: 36px; object-fit: contain; }
.footer-note { max-width: 110ch; margin: 0; color: #77756e; font-size: 10px; line-height: 1.45; letter-spacing: 0; }
@media (max-width: 900px) {
  .spotlights { width: min(100% - 52px, 720px); }
  .spotlight, .spotlight--reverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "copy"; gap: 27px; padding: 0; }
  .spotlight-media { aspect-ratio: 1.68 / 1; }
  .spotlight-copy { max-width: 660px; }
  .spotlight-copy h2 { max-width: 590px; }
  .ornament--section { margin: 58px auto; }
  .essentials-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .masthead { padding: 34px 18px 0; }
  .brand-mark { width: min(222px, 62vw); }
  .ornament { gap: 8px; width: min(340px, 84vw); }
  .ornament svg { flex-basis: 64px; width: 64px; }
  .ornament--brand { margin-top: 23px; }
  .hero { width: calc(100% - 36px); padding-top: 32px; }
  .hero h1 { font-size: clamp(43px, 10.7vw, 57px); line-height: .98; }
  .desktop-break { display: none; }
  .hero-copy { max-width: 430px; margin-top: 19px; font-size: 16px; line-height: 1.55; }
  .hero-copy p + p { margin-top: 9px; }
  .hero-media { width: calc(100% + 12px); margin-top: 27px; margin-left: -6px; aspect-ratio: 4 / 3; }
  .hero-video { object-fit: cover; }
  .hero-caption { right: 11px; bottom: 10px; left: 11px; font-size: 10px; }
  .fallback-mark { width: 46px; font-size: 28px; }
  .fallback-label { font-size: 9px; letter-spacing: .14em; }
  .spotlights { width: calc(100% - 36px); padding-top: 52px; }
  .spotlight-media { aspect-ratio: 4 / 3; }
  .spotlight-media figcaption { padding: 30px 11px 10px; font-size: 9px; letter-spacing: .11em; }
  .spotlight-copy h2 { margin-bottom: 15px; font-size: clamp(38px, 10vw, 48px); }
  .spotlight-copy p:not(.eyebrow) { margin-bottom: 12px; font-size: 16px; line-height: 1.58; }
  .spotlight-copy .freedom-line { font-size: 23px !important; }
  .eyebrow { margin-bottom: 12px; }
  .ornament--section { width: min(300px, 76vw); margin: 45px auto; }
  .ornament--hero { width: min(300px, 76vw); margin-bottom: 38px; }
  .steam { padding: 61px 19px; }
  .steam h2 { font-size: clamp(43px, 11vw, 58px); }
  .steam-title { column-gap: 8px; row-gap: 2px; }
  .steam-title .steam-brandmark { width: clamp(88px, 25vw, 112px); }
  .steam > p:last-child { max-width: 28ch; margin: 14px auto 0; font-size: 15px; }
  .contact { grid-template-columns: 1fr; gap: 17px; width: calc(100% - 40px); padding: 52px 0; }
  .contact h2 { font-size: 44px; }
  .contact-details p { max-width: 30ch; font-size: 15px; }
  .email-link { font-size: 20px; }
  .footer { width: calc(100% - 40px); font-size: 11px; grid-template-columns: 1fr; }
  .footer-note { font-size: 9px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 41px; }
  .hero-copy { font-size: 15px; }
  .footer { flex-direction: column; gap: 5px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .masthead { padding-top: 20px; }
  .brand-mark { width: 155px; }
  .ornament--brand { margin-top: 12px; }
  .hero { padding-top: 20px; }
  .hero-media { width: min(78%, 900px); aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}