:root {
  --bg: #0C0404;
  --copper: #7F4D33;
  --copper-light: #B8724F;
  --copper-hi: #D9A07A;
  --foil: linear-gradient(118deg,#B8724F 0%,#E2AB84 40%,#C07C55 65%,#EBC3A2 100%);
  --cream: #F6F1E8;
  --cream-2: rgba(246,241,232,.7);
  --ease: cubic-bezier(.2,.7,.2,1);
  --d: 360ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  color: var(--cream);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
p, h1 { margin: 0; }

.bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(12,4,4,.62) 0%, rgba(12,4,4,.35) 55%, rgba(12,4,4,.15) 100%),
    linear-gradient(to bottom, rgba(12,4,4,.75) 0%, rgba(12,4,4,0) 24%, rgba(12,4,4,0) 68%, rgba(12,4,4,.9) 100%),
    url("assets/calligraphy.jpg");
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(12,4,4,.62) 0%, rgba(12,4,4,.35) 55%, rgba(12,4,4,.15) 100%),
    linear-gradient(to bottom, rgba(12,4,4,.75) 0%, rgba(12,4,4,0) 24%, rgba(12,4,4,0) 68%, rgba(12,4,4,.9) 100%),
    image-set(url("assets/calligraphy.webp") type("image/webp"), url("assets/calligraphy.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 58% center;
  background-repeat: no-repeat;
  background-color: var(--bg);
  animation: kenburns 40s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-align: center;
  padding:
    calc(clamp(24px,5vh,56px) + env(safe-area-inset-top))
    calc(clamp(20px,5vw,64px) + env(safe-area-inset-right))
    calc(clamp(24px,5vh,56px) + env(safe-area-inset-bottom))
    calc(clamp(20px,5vw,64px) + env(safe-area-inset-left));
}

.top { display: flex; justify-content: center; }
.logo { width: clamp(140px,16vw,220px); height: auto; opacity: .95; display: block; }

.center {
  position: relative;
  isolation: isolate;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px,3.5vh,36px);
}
/* The specified photo overlays alone do not protect copper text on every
   bright stroke. A soft local scrim preserves the photo outside the content. */
.center::before {
  content: "";
  position: absolute;
  inset: -64px;
  z-index: -1;
  pointer-events: none;
  background: rgba(12,4,4,.88);
  filter: blur(40px);
}

.eyebrow {
  font-weight: 500;
  font-size: clamp(10px,1.1vw,12px);
  text-transform: uppercase;
  letter-spacing: .36em;
  margin-right: -.36em;
  color: var(--copper-hi);
}
h1 {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(38px,7vw,96px);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-right: -.18em;
  line-height: 1.04;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(12,4,4,.6);
}
.foil {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgba(12,4,4,.55));
}
.rule { width: 28px; height: 1px; background: var(--copper-light); display: block; }

.play {
  position: relative;
  width: clamp(108px,12vw,140px);
  height: clamp(108px,12vw,140px);
  min-width: 108px;
  min-height: 108px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(217,160,122,.55);
  background: rgba(12,4,4,.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 60px rgba(127,77,51,.35);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d) var(--ease), transform var(--d) var(--ease);
}
.play:hover, .play:focus-visible { background: rgba(127,77,51,.4); transform: scale(1.02); }
.play:focus { outline: none; }
.play:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 4px; }
.play:active { transform: scale(.99); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ring circle { fill: none; stroke-width: 2; }
.ring-track { stroke: rgba(217,160,122,.14); }
.ring-bar { stroke: var(--copper-hi); stroke-linecap: round; stroke-dasharray: 402.12; stroke-dashoffset: 402.12; }
.icon { fill: var(--cream); display: block; }
#icon-play { transform: translateX(6px); }
.icon[hidden] { display: none; }

.meta { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 3.6em; }
.status {
  font-size: clamp(11px,1.1vw,13px);
  text-transform: uppercase;
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--cream);
}
.timer {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
}
.retry {
  font: 500 11px "Hanken Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--cream);
  background: rgba(12,4,4,.55);
  border: 1px solid rgba(217,160,122,.55);
  border-radius: 0;
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d) var(--ease);
}
.retry:hover { background: rgba(127,77,51,.5); }
.retry:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 4px; }
.retry[hidden] { display: none; }

.bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tagline {
  font-family: "Cinzel", serif;
  font-size: clamp(12px,1.4vw,16px);
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.7;
  max-width: 40ch;
  text-wrap: pretty;
  color: var(--cream);
}
.shop {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .26em;
  margin-right: -.26em;
  color: var(--copper-hi);
  text-decoration: none;
  padding: 10px 6px;
  transition: color var(--d) var(--ease);
}
.shop:hover { color: #EBC3A2; }
.shop:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 4px; }

@media (max-height: 479px) {
  .eyebrow { display: none; }
  .center { gap: 12px; }
  .meta { gap: 4px; min-height: 0; }
  .bottom { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
  .play:hover, .play:focus-visible, .play:active { transform: none; }
  * { transition-duration: 1ms !important; }
}