@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('../fonts/cormorant.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root { --base: #0a0908; --bone: #e9e2d0; --gilt: #c9a227; --wedge: #d6402c; --ui: 'Inter', -apple-system, sans-serif; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--base); }
body { background: var(--base); color: var(--bone); font-family: var(--ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gilt); color: var(--base); }

.preloader { position: fixed; inset: 0; z-index: 100; background: var(--base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .8s, visibility .8s; }
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__frame { width: 120px; height: 150px; border: 3px solid var(--gilt); animation: gilt 1.6s ease-in-out infinite; }
@keyframes gilt { 50% { box-shadow: 0 0 34px rgba(201,162,39,.45); } }
.preloader__title { letter-spacing: .5em; font-size: 13px; color: var(--gilt); }

.grain { position: fixed; inset: -100%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: space-between; padding: 20px 32px; font-size: 11px; letter-spacing: .35em; mix-blend-mode: difference; }
.masthead__era { color: var(--gilt); }

.atrium__hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.atrium__h1 { font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: .12em; line-height: 1.02; }
.atrium__tag { margin-top: 18px; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt); }
.atrium__hint { margin-top: 8vh; font-size: 11px; letter-spacing: .4em; opacity: .5; text-transform: uppercase; }

.wings { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; padding: 8vh 6vw 12vh; }
.portal { position: relative; width: min(380px, 86vw); text-align: center; text-decoration: none; color: var(--bone); display: block; transition: transform .4s; }
a.portal:hover { transform: translateY(-8px); }
.portal__arch { display: block; position: absolute; inset: 0 0 auto 0; height: 460px; border: 2px solid var(--gilt); border-radius: 190px 190px 0 0; pointer-events: none; }
.portal__arch--broken { border-color: var(--wedge); border-radius: 0; clip-path: polygon(0 100%, 0 30%, 18% 12%, 40% 22%, 55% 0, 78% 16%, 100% 8%, 100% 100%); }
.portal__arch--dark { border-color: rgba(233,226,208,.18); }
.portal__poster { width: 100%; height: 460px; object-fit: cover; border-radius: 188px 188px 0 0; filter: saturate(.9) brightness(.85); transition: filter .4s; }
.portal--broken .portal__poster { border-radius: 0; clip-path: polygon(0 100%, 0 30%, 18% 12%, 40% 22%, 55% 0, 78% 16%, 100% 8%, 100% 100%); }
a.portal:hover .portal__poster { filter: saturate(1.1) brightness(1); }
.portal--closed { opacity: .45; }
.portal--closed .portal__arch--dark { position: relative; height: 460px; display: block; background: rgba(233,226,208,.03); }
.portal__chapter { display: block; margin-top: 22px; font-size: 11px; letter-spacing: .45em; color: var(--gilt); }
.portal--broken .portal__chapter { color: var(--wedge); }
.portal__title { font-family: 'Cormorant', serif; font-size: 30px; letter-spacing: .14em; margin-top: 8px; }
.portal__line { margin-top: 10px; font-size: 13.5px; line-height: 1.6; opacity: .8; }
.portal__progress { margin-top: 10px; font-size: 11px; letter-spacing: .2em; color: var(--gilt); min-height: 14px; }
.portal__cta { display: inline-block; margin-top: 16px; padding: 11px 34px; border: 1px solid var(--gilt); font-size: 11px; letter-spacing: .3em; }
.portal--broken .portal__cta { border-color: var(--wedge); }

.colophon { text-align: center; padding: 0 24px 60px; font-size: 11px; letter-spacing: .1em; color: rgba(233,226,208,.32); line-height: 1.8; }

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .preloader__frame { animation: none; } }