/* ============================================================
   METZTLI — shared stylesheet
   Palette: void #0a0908, bone #e9e3d6, blood #6d1a24, ash #7a746a
   Type: "Cormorant Garamond" (serif, body/headlines), "UnifrakturCook"
         (blackletter, used once — the wordmark only)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=UnifrakturCook:wght@700&family=Jost:wght@300;400;500&display=swap');

:root{
  --void: #0a0908;
  --void-2: #131110;
  --bone: #e9e3d6;
  --bone-dim: #b8b1a2;
  --blood: #7c2431;
  --blood-dim: #4a1620;
  --ash: #7a746a;
  --hairline: rgba(233,227,214,0.14);
  --glass-bg: rgba(20,18,16,0.35);
  --glass-border: rgba(233,227,214,0.16);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

a{ color: inherit; }

.eyebrow-label, .sans{ font-family: 'Jost', sans-serif; letter-spacing: 0.02em; }

:focus-visible{ outline: 1.5px solid var(--bone); outline-offset: 3px; }

/* ---------- top nav ---------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 5vw;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  mix-blend-mode: difference;
}
.nav__mark{ color: var(--bone); font-weight: 500; }
.nav__links{ display: flex; gap: 28px; }
.nav__links a{ text-decoration: none; opacity: 0.75; transition: opacity 0.25s ease; }
.nav__links a:hover{ opacity: 1; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--void);
}
.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(35%) brightness(0.55) contrast(1.05);
  transform: scale(1.06);
}
.hero__scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.25) 35%, rgba(10,9,8,0.9) 100%);
}
.hero__content{
  position: relative;
  z-index: 2;
  padding: 0 5vw 9vh;
  max-width: 820px;
}
.hero__kicker{
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--bone-dim);
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}
.hero__title{
  font-family: 'UnifrakturCook', cursive;
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height: 0.92;
  margin: 0 0 20px;
  color: var(--bone);
  text-shadow: 0 0 60px rgba(124,36,49,0.35);
}
.hero__sub{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-style: italic;
  color: var(--bone-dim);
  max-width: 46ch;
  margin: 0;
}

/* ---------- section shell ---------- */
.section{
  padding: 14vh 5vw;
  max-width: 1180px;
  margin: 0 auto;
}
.section--tight{ padding-top: 8vh; padding-bottom: 8vh; }
.section__head{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 6vw;
  align-items: start;
}
.section__label{
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ash);
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.section__body p{ margin: 0 0 1.1em; color: var(--bone-dim); }
.section__body p:last-child{ margin-bottom: 0; }
.section__body strong{ color: var(--bone); font-weight: 600; }

/* ---------- gallery ---------- */
.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.plate{
  position: relative;
  background: var(--void-2);
  aspect-ratio: 3/4;
  overflow: hidden;
}
.plate img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) brightness(0.75);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.plate:hover img{ filter: grayscale(0%) brightness(0.95); transform: scale(1.04); }
.plate__cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 16px 16px;
  background: linear-gradient(0deg, rgba(10,9,8,0.92) 10%, rgba(10,9,8,0) 100%);
}
.plate__num{ font-family: 'Jost', sans-serif; font-size: 11px; color: var(--ash); letter-spacing: 0.08em; display: block; margin-bottom: 6px; }
.plate__title{ font-size: 1.05rem; margin: 0; color: var(--bone); }
.plate__note{ font-size: 0.9rem; font-style: italic; color: var(--bone-dim); margin: 4px 0 0; }

@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .section__head{ grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- verdict / stat strip ---------- */
.verdict{
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 8vh 5vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;
}
.verdict__item{ text-align: left; }
.verdict__figure{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--bone);
  margin: 0 0 6px;
  font-weight: 500;
}
.verdict__label{ font-family: 'Jost', sans-serif; font-size: 13px; color: var(--ash); letter-spacing: 0.04em; }
@media (max-width: 760px){ .verdict{ grid-template-columns: 1fr; gap: 6vh; } }

/* ---------- continue button — smooth, transparent, blurred glass ---------- */
.continue-wrap{
  display: flex;
  justify-content: center;
  padding: 10vh 5vw 14vh;
}
.continue-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 42px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  color: var(--bone);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.continue-btn:hover{
  background: rgba(124,36,49,0.22);
  border-color: rgba(233,227,214,0.32);
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(124,36,49,0.25);
}
.continue-btn__arrow{
  width: 18px; height: 18px;
  transition: transform 0.4s ease;
}
.continue-btn:hover .continue-btn__arrow{ transform: translateX(4px); }

/* ---------- footer ---------- */
.footer{
  padding: 5vh 5vw 6vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  color: var(--ash);
  border-top: 1px solid var(--hairline);
}

/* ============================================================
   /blr — the moon room
   ============================================================ */
.moon-room{
  min-height: 100svh;
  background: var(--void);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.moon-room__glow{
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,36,49,0.28) 0%, rgba(124,36,49,0.08) 45%, rgba(10,9,8,0) 72%);
  filter: blur(40px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.moon-room__panel{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 64px 8vw;
  border-radius: 28px;
  background: rgba(20,18,16,0.28);
  border: 1px solid rgba(233,227,214,0.12);
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  max-width: 90vw;
}
.moon-room__eyebrow{
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--ash);
  margin: 0 0 22px;
}
.type-stage{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  color: var(--bone);
  min-height: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}
.type-stage__cursor{
  display: inline-block;
  width: 2px;
  margin-left: 6px;
  background: var(--blood);
  animation: blink 0.9s step-end infinite;
  align-self: center;
  height: 0.85em;
}
@keyframes blink{ 50%{ opacity: 0; } }
.moon-room__gloss{
  margin: 26px 0 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--bone-dim);
}
.moon-room__back{
  position: absolute;
  top: 26px; left: 5vw;
  z-index: 3;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--bone-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.moon-room__back:hover{ opacity: 1; }