
:root{
  --black:#000; --gold:#c9a45c; --rule:#6b5631; --bone:#efe6d2; --well:#1a0f08; --mute:#8f7a52;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#000; } }
:root[data-theme="dark"]{ --black:#000; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--black); color:var(--bone);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif; font-size:22px; line-height:1.6; overflow-x:hidden; }
a{ color:var(--gold); } a:hover{ color:var(--bone); }
img{ max-width:100%; }
.caps{ font-family:Cinzel, Georgia, serif; letter-spacing:.16em; }
header{ position:sticky; top:0; z-index:5; background:var(--black); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px;
  padding:28px clamp(20px,5vw,72px); border-bottom:1px solid var(--rule); }
.mark{ position:relative; background:none; border:0; padding:0; cursor:pointer; width:60px; height:60px; }
.mark img{ width:100%; height:100%; display:block; }
body.on-home .mark{ visibility:hidden; }
nav{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 36px; }
nav .item{ font-family:Cinzel, Georgia, serif; font-size:18px; letter-spacing:.16em; color:var(--bone);
  background:none; border:0; border-bottom:1px solid transparent; padding:10px 0; cursor:pointer; }
nav .item:hover{ color:var(--gold); }
nav .item[aria-current="page"]{ color:var(--gold); border-bottom-color:var(--gold); }
#mix{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; background:none; color:var(--gold); border:1px solid var(--gold); font-family:Cinzel, Georgia, serif; font-size:16px; letter-spacing:.14em; cursor:pointer; }
#mix:hover{ background:var(--gold); color:var(--black); }
#mix svg{ width:12px; height:14px; }
#call{ width:40px; height:44px; display:grid; place-items:center; color:var(--gold); opacity:0; transition:opacity 1.2s ease; }
#call svg{ width:16px; height:28px; }
button:focus-visible, a:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.wrap{ max-width:1320px; margin:0 auto; padding:clamp(48px,7vw,100px) clamp(20px,5vw,72px); }
section + section, footer{ border-top:1px solid var(--rule); }
h1,h2{ font-family:Cinzel, Georgia, serif; font-weight:400; color:var(--gold); margin:0; }
h2{ font-size:48px; letter-spacing:.08em; }
p{ margin:0; max-width:540px; }
.hero{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:56px; align-items:center;
  padding-top:clamp(96px,11vw,170px); }
.medal{ position:relative; width:100%; max-width:580px; aspect-ratio:1/1; justify-self:center; transform-style:preserve-3d; will-change:transform; }
.medal img{ width:100%; height:100%; display:block; }
.sheen{ position:absolute; inset:-12%; pointer-events:none; mix-blend-mode:screen; }
#gate{ background:linear-gradient(100deg, var(--bone) 42%, #fff3cf 50%, var(--bone) 58%); background-size:300% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 9s ease-in-out infinite, throb 7s ease-in-out infinite; }
@keyframes throb{ 0%,60%,100%{ filter:drop-shadow(0 0 0 rgba(232,190,110,0)); } 72%{ filter:drop-shadow(0 0 var(--glow,9px) rgba(232,190,110,.85)); } 84%{ filter:drop-shadow(0 0 2px rgba(232,190,110,.2)); } }
@keyframes shimmer{ 0%,80%{ background-position:100% 0; } 95%,100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){ #gate{ animation:none; } }
.hero .text{ display:flex; flex-direction:column; gap:28px; }
.hero h1{ font-size:clamp(64px,8vw,124px); line-height:.95; letter-spacing:.06em; }
.tag{ font-family:Cinzel, Georgia, serif; font-size:20px; letter-spacing:.3em; color:var(--gold); }
.lede{ font-size:30px; line-height:1.35; max-width:520px; }
.btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.btn{ display:inline-flex; align-items:center; gap:14px; min-height:56px; padding:0 30px; text-decoration:none;
  font-family:Cinzel, Georgia, serif; font-size:17px; letter-spacing:.16em; border:1px solid var(--gold); }
.btn.solid{ background:var(--gold); color:var(--black); } .btn.solid:hover{ background:var(--bone); border-color:var(--bone); color:var(--black); }
.btn svg{ width:14px; height:24px; }
.two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px; }
.col{ display:flex; flex-direction:column; gap:20px; }
.links{ display:flex; flex-wrap:wrap; gap:12px 28px; font-family:Cinzel, Georgia, serif; font-size:18px; letter-spacing:.12em; }
.links a{ padding:10px 0; }
.dates{ border-top:1px solid var(--rule); }
.dates div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:20px 0; border-bottom:1px solid var(--rule); }
.dates span:first-child{ color:var(--gold); }
.head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:40px; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; }
.tile{ display:flex; flex-direction:column; gap:14px; }
.ph{ aspect-ratio:4/3; background:var(--well); display:grid; place-items:center; color:var(--mute); padding:20px; text-align:center; }
footer .wrap{ padding-bottom:140px; align-items:end; }
:root{ --beat:.625s; }
body.playing .medal img, body.playing .mark img{ animation:beat var(--beat) ease-out infinite; }
@keyframes beat{ 0%{ filter:brightness(1.18) drop-shadow(0 0 10px rgba(232,190,110,.35)); } 35%,100%{ filter:brightness(1) drop-shadow(0 0 0 rgba(232,190,110,0)); } }
@media (prefers-reduced-motion: reduce){ body.playing .medal img, body.playing .mark img{ animation:none; } }
#filmLoop{ position:relative; cursor:ew-resize; overflow:hidden; }
.playhead{ position:absolute; top:0; bottom:0; width:1px; background:var(--gold); left:0; opacity:0; transition:opacity .4s; }
#filmLoop:hover .playhead{ opacity:.8; }
.timeline{ display:flex; gap:28px; overflow-x:auto; cursor:grab; padding:8px 0 24px; margin-top:40px; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; user-select:none; }
.timeline.dragging{ cursor:grabbing; }
.yr{ flex:0 0 min(80vw,320px); border-top:1px solid var(--gold); padding-top:20px; }
.yr h3{ font-family:Cinzel, Georgia, serif; font-weight:400; font-size:48px; color:var(--gold); margin:0 0 12px; letter-spacing:.06em; }
.yr p{ margin:0 0 8px; }
.page h2{ font-size:34px; margin:56px 0 18px; }
.page p{ margin-bottom:18px; max-width:640px; }
.page h1{ font-size:clamp(48px,6vw,80px); letter-spacing:.1em; margin-bottom:28px; }
#player{ position:fixed; right:28px; bottom:calc(28px + env(safe-area-inset-bottom,0px)); width:64px; height:64px; border-radius:50%;
  background:var(--black); border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; cursor:pointer; padding:0; }
#player svg{ width:20px; height:34px; }
@media (prefers-reduced-motion: reduce){ #call{ transition:none; } }
[hidden]{ display:none !important; }

#mcbar{ position:sticky; top:var(--hh,116px); z-index:4; background:var(--black); border-bottom:1px solid var(--rule); }
#mcbar iframe{ display:block; width:100%; height:60px; border:0; }
.list{ border-top:1px solid var(--rule); margin-top:24px; max-width:760px; }
.list a, .list div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:18px 0; border-bottom:1px solid var(--rule); text-decoration:none; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:20px; margin-top:32px; }
.fadeout{ transition:opacity 1.4s ease; opacity:0 !important; }

#rift{ position:fixed; inset:0; width:100%; height:100%; border:0; z-index:60; background:#000; opacity:0; transition:opacity .7s ease; }
#rift.open{ opacity:1; }
#tear{ position:fixed; inset:0; z-index:59; pointer-events:none; }
#tear span{ position:absolute; left:0; right:0; background:rgba(201,164,92,.18); mix-blend-mode:screen; animation:tear .25s steps(2) infinite; }
@keyframes tear{ 0%{ transform:translateX(-6%); } 50%{ transform:translateX(5%); background:rgba(180,83,42,.25); } 100%{ transform:translateX(-2%); } }
body.breaking header, body.breaking main{ animation:breakdown 1.1s steps(9) forwards; }
@keyframes breakdown{
  0%{ transform:none; filter:none; clip-path:inset(0 0 0 0); }
  20%{ transform:translate(-8px,2px) skewX(-2deg); filter:hue-rotate(20deg) contrast(1.4); clip-path:inset(12% 0 30% 0); }
  40%{ transform:translate(10px,-3px); filter:saturate(2) contrast(1.8); clip-path:inset(40% 0 8% 0); }
  60%{ transform:translate(-14px,0) skewX(3deg); filter:invert(.15) contrast(2); clip-path:inset(5% 0 55% 0); }
  80%{ transform:translate(6px,4px); filter:brightness(1.6) contrast(2.4); clip-path:inset(30% 0 30% 0); opacity:.6; }
  100%{ transform:translate(0,0); filter:brightness(0); clip-path:inset(50% 0 50% 0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ body.breaking header, body.breaking main{ animation:none; } #tear{ display:none; } }
