:root{
  --bg:#030305;
  --ink:#08070a;
  --red:#b80f16;
  --red2:#ee2318;
  --gold:#d6a65a;
  --gold2:#ffe0a0;
  --bone:#f6ead7;
  --muted:rgba(246,234,215,.66);
  --line:rgba(255,236,202,.16);
}

*{box-sizing:border-box}

html,body{
  min-height:100%;
  margin:0;
}

body{
  background:var(--bg);
  color:var(--bone);
  overflow:hidden;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.site{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(222,34,24,.11), transparent 24%),
    radial-gradient(circle at 50% 112%, rgba(215,166,90,.12), transparent 32%),
    linear-gradient(180deg,#020203 0%,#060508 42%,#020203 100%);
}

.atmosphere{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.72;
}

.ambient{
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  filter:blur(54px);
  opacity:.55;
  will-change:transform,opacity;
}

.ambient-a{
  z-index:1;
  width:58vw;
  height:58vw;
  left:50%;
  top:56%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(177,13,20,.34),rgba(177,13,20,.08) 42%,transparent 68%);
  animation:breatheA 11s ease-in-out infinite;
}

.ambient-b{
  z-index:2;
  width:46vw;
  height:26vw;
  left:50%;
  bottom:-8vw;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,193,94,.18),rgba(238,35,24,.08) 42%,transparent 72%);
  animation:breatheB 9s ease-in-out infinite;
}

.ambient-c{
  z-index:1;
  width:36vw;
  height:36vw;
  right:-11vw;
  top:-12vw;
  background:radial-gradient(circle,rgba(255,224,160,.08),transparent 68%);
  animation:breatheC 14s ease-in-out infinite;
}

.grain{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  opacity:.105;
  background-image:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.58) 0 1px,transparent 1px),
    radial-gradient(circle at 70% 80%,rgba(255,255,255,.36) 0 1px,transparent 1px),
    radial-gradient(circle at 40% 40%,rgba(255,255,255,.28) 0 1px,transparent 1px);
  background-size:110px 110px,150px 150px,90px 90px;
  mix-blend-mode:soft-light;
}

.vignette{
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 0 36%,rgba(0,0,0,.32) 65%,rgba(0,0,0,.86) 100%),
    linear-gradient(180deg,rgba(0,0,0,.74),transparent 25%,transparent 68%,rgba(0,0,0,.72));
}

.entry{
  position:relative;
  z-index:30;
  width:min(920px,calc(100vw - 34px));
  display:grid;
  justify-items:center;
  text-align:center;
  padding:48px 24px;
  opacity:0;
  transform:translateY(14px) scale(.985);
  animation:arrive 1.65s cubic-bezier(.16,1,.3,1) .15s forwards;
}

.crest{
  position:relative;
  width:92px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  opacity:.92;
}

.crest:before,
.crest:after,
.crest span:before,
.crest span:after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,225,160,.32);
  transform:rotate(45deg);
  box-shadow:
    0 0 32px rgba(190,20,18,.28),
    inset 0 0 28px rgba(255,210,138,.055);
}

.crest:after{
  inset:16px;
  border-color:rgba(255,225,160,.2);
  transform:rotate(45deg);
}

.crest span{
  position:absolute;
  inset:26px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,224,157,.28),rgba(189,20,18,.12) 48%,transparent 72%);
  box-shadow:0 0 32px rgba(227,35,24,.26);
}

.crest span:before{
  inset:-24px;
  border-radius:50%;
  transform:none;
  border-color:rgba(255,255,255,.08);
}

.crest span:after{
  inset:-6px;
  border-radius:50%;
  transform:none;
  border-color:rgba(255,222,154,.18);
}

.eyebrow{
  margin:0 0 14px;
  color:rgba(255,226,178,.62);
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:700;
}

h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  letter-spacing:-.072em;
  line-height:.82;
  color:var(--bone);
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 0 44px rgba(218,34,24,.28),
    0 28px 90px rgba(0,0,0,.9);
}

h1 span{
  display:block;
}

h1 span:first-child{
  font-size:clamp(5.5rem,16vw,14rem);
}

h1 span:last-child{
  margin-top:.05em;
  font-size:clamp(4.2rem,12vw,10.6rem);
}

.line{
  margin:clamp(22px,3vw,34px) 0 clamp(30px,4vw,48px);
  font-family:Georgia,"Times New Roman",serif;
  color:rgba(246,234,215,.82);
  font-size:clamp(1.28rem,2.6vw,2.25rem);
  letter-spacing:.02em;
}

.enter{
  position:relative;
  display:inline-grid;
  place-items:center;
  min-width:min(342px,82vw);
  min-height:66px;
  padding:0 38px;
  border-radius:999px;
  border:1px solid rgba(255,224,160,.38);
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.025)),
    linear-gradient(90deg,#7e0d12,#c21518 45%,#ee3a1d);
  color:#fff5e4;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:900;
  font-size:.92rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 18px 60px rgba(0,0,0,.74),
    0 0 62px rgba(205,24,20,.34);
  overflow:hidden;
  transform:translateY(0);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    filter .24s ease;
}

.enter:before{
  content:"";
  position:absolute;
  inset:-70% -28%;
  background:linear-gradient(90deg,transparent,rgba(255,248,220,.45),transparent);
  transform:translateX(-125%) rotate(17deg);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}

.enter:hover,
.enter:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,229,178,.74);
  filter:saturate(1.08) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 24px 72px rgba(0,0,0,.78),
    0 0 86px rgba(238,35,24,.48);
}

.enter:hover:before,
.enter:focus-visible:before{
  transform:translateX(125%) rotate(17deg);
}

.enter:focus-visible{
  outline:3px solid rgba(255,224,160,.76);
  outline-offset:6px;
}

.version{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:31;
  color:rgba(255,255,255,.18);
  font-size:.66rem;
  letter-spacing:.1em;
  pointer-events:none;
}

.noscript{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  text-align:center;
  background:#030305;
  color:#f6ead7;
  padding:32px;
}

.noscript h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.6rem,12vw,9rem);
  margin:0;
}

.noscript a{
  display:inline-grid;
  place-items:center;
  min-height:58px;
  margin-top:24px;
  padding:0 30px;
  border-radius:999px;
  background:#b80f16;
  color:white;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.14em;
  text-decoration:none;
}

@keyframes arrive{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes breatheA{
  0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.42}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:.62}
}

@keyframes breatheB{
  0%,100%{transform:translateX(-50%) scaleX(.95);opacity:.36}
  50%{transform:translateX(-50%) scaleX(1.08);opacity:.58}
}

@keyframes breatheC{
  0%,100%{transform:translate(0,0) scale(.96);opacity:.25}
  50%{transform:translate(-2vw,2vw) scale(1.08);opacity:.4}
}

@media (max-width:720px){
  .site{
    min-height:100svh;
  }

  .entry{
    padding:34px 16px;
  }

  .crest{
    width:74px;
    margin-bottom:22px;
  }

  .eyebrow{
    font-size:.68rem;
    letter-spacing:.24em;
  }

  h1 span:first-child{
    font-size:clamp(4.4rem,22vw,7.2rem);
  }

  h1 span:last-child{
    font-size:clamp(3.35rem,17vw,5.7rem);
  }

  .line{
    margin-top:20px;
    font-size:1.2rem;
  }

  .enter{
    min-height:60px;
    min-width:min(305px,84vw);
    font-size:.8rem;
    letter-spacing:.16em;
  }
}

@media (prefers-reduced-motion:reduce){
  .entry,
  .ambient,
  .enter,
  .enter:before{
    animation:none!important;
    transition:none!important;
  }

  .entry{
    opacity:1;
    transform:none;
  }

  .atmosphere{
    display:none;
  }
}