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

/* Design typography anchor: Space Grotesk** Grotes* wordmark */

:root {
  --candle: #C65A24;
  --brass: #A77A3A;
  --parchment: #F2E4C8;
  --tea: #1A100D;
  --cream: #FFF7D6;
  --plum: #352238;
  --sepal: #66704A;
  --sans: 'Space Grotesk', Inter, system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --seal: 'Unbounded', 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--tea); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 22% 13%, rgba(198, 90, 36, .2), transparent 31rem),
    radial-gradient(circle at 78% 76%, rgba(53, 34, 56, .76), transparent 35rem),
    linear-gradient(135deg, #1A100D 0%, #241513 45%, #352238 100%);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.parlor { position: relative; min-height: 300vh; isolation: isolate; }

.smoke-field,
.cabinet-line { position: fixed; inset: 0; pointer-events: none; z-index: -2; }

.smoke-field {
  background:
    repeating-linear-gradient(30deg, rgba(242, 228, 200, .025) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(120deg, rgba(167, 122, 58, .035) 0 1px, transparent 1px 26px);
  mix-blend-mode: screen;
  opacity: .65;
}

.cabinet-line { z-index: -1; opacity: .45; }
.line-one { background: linear-gradient(126deg, transparent 0 31%, rgba(167, 122, 58, .42) 31.1%, transparent 31.4% 100%); }
.line-two { background: linear-gradient(126deg, transparent 0 65%, rgba(198, 90, 36, .24) 65.1%, transparent 65.35% 100%); }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7vmin 5vw;
}

.folio-mark,
.scroll-cipher,
.micro {
  font-family: var(--sans);
  color: rgba(242, 228, 200, .68);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(.62rem, 1vw, .8rem);
}

.folio-mark { position: absolute; top: 4vh; left: 5vw; }
.scroll-cipher { position: absolute; bottom: 4vh; right: 5vw; color: var(--brass); }

.honeycomb-rosette {
  position: relative;
  width: min(92vw, 980px);
  height: min(82vh, 760px);
  transform: translateY(var(--drift, 0px));
  transition: transform .2s linear;
}

.hex {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  border: 0;
  background:
    linear-gradient(150deg, rgba(255, 247, 214, .1), rgba(53, 34, 56, .56)),
    radial-gradient(circle at 50% 50%, rgba(198, 90, 36, .18), transparent 62%);
  filter: drop-shadow(0 1.1rem 2rem rgba(0, 0, 0, .42));
}

.hex::before {
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: inherit;
  border: 1px solid rgba(167, 122, 58, .72);
  background:
    linear-gradient(60deg, transparent 0 46%, rgba(242, 228, 200, .12) 47%, transparent 48% 100%),
    radial-gradient(circle at 50% 16%, rgba(255, 247, 214, .16), transparent 44%);
  transition: border-color .6s ease, background .6s ease, opacity .6s ease;
}

.hex::after {
  content: "✦";
  position: absolute;
  top: 14%;
  color: var(--brass);
  opacity: .48;
  font-size: .9rem;
}

.hex-center {
  width: min(47vw, 430px);
  height: min(47vw, 430px);
  min-width: 300px;
  min-height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242, 228, 200, .2), rgba(198, 90, 36, .16) 45%, rgba(53, 34, 56, .78));
}

.hex-glass { position: relative; z-index: 2; width: 78%; }
.date-code { font-family: var(--seal); font-size: .62rem; letter-spacing: .24em; color: var(--brass); }

h1, h2, h3, p { margin: 0; }

h1 {
  margin-top: .8rem;
  font-family: var(--sans);
  font-size: clamp(2.2rem, 6vw, 4.9rem);
  letter-spacing: -.07em;
  line-height: .88;
  color: var(--cream);
  text-shadow: 0 0 28px rgba(198, 90, 36, .52);
}

.hex-center p {
  margin: .8rem auto 0;
  max-width: 18rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--parchment);
}

.daisy-diagram { width: min(76%, 260px); margin-top: 1rem; overflow: visible; }
.daisy-diagram path { fill: none; stroke: var(--sepal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 220; animation: drawLine 4s ease-in-out infinite alternate; }
.daisy-diagram ellipse { fill: rgba(255, 247, 214, .78); stroke: rgba(167, 122, 58, .8); stroke-width: 1; transform-origin: center; }
.daisy-diagram circle { fill: var(--parchment); stroke: var(--candle); stroke-width: 1.2; }
.pinheads circle { fill: var(--brass); }

.hex-petal {
  width: clamp(142px, 20vw, 220px);
  height: clamp(142px, 20vw, 220px);
  cursor: pointer;
  padding: 2.5rem 1.35rem;
  transition: transform .55s ease, filter .55s ease, opacity .55s ease;
}

.hex-one { left: 23%; top: 5%; }
.hex-two { left: 56%; top: 4%; }
.hex-three { left: 70%; top: 35%; }
.hex-four { left: 55%; top: 67%; }
.hex-five { left: 21%; top: 67%; }
.hex-six { left: 7%; top: 35%; }

.hex-label {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.72rem, 1.15vw, .9rem);
  transition: transform .55s ease, opacity .55s ease;
}

.reveal-copy {
  position: absolute;
  z-index: 2;
  width: 70%;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  font-style: italic;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .55s ease, transform .55s ease;
}

.latch {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 9px;
  top: 49%;
  left: calc(50% - 18px);
  background: linear-gradient(90deg, var(--brass), var(--candle));
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(198, 90, 36, .45);
  transition: transform .55s ease, opacity .55s ease;
}

.sealed { animation: chamberPulse 3.2s ease-in-out infinite; }
.hex-petal:hover, .hex-petal:focus, .hex-petal.is-open { transform: scale(1.04); filter: drop-shadow(0 1.2rem 2.8rem rgba(198, 90, 36, .22)); outline: 0; }
.hex-petal:hover::before, .hex-petal:focus::before, .hex-petal.is-open::before { border-color: var(--candle); background: radial-gradient(circle, rgba(198, 90, 36, .27), rgba(53, 34, 56, .34)); }
.hex-petal:hover .latch, .hex-petal:focus .latch, .hex-petal.is-open .latch { transform: rotate(62deg) translateX(16px); opacity: .45; }
.hex-petal:hover .hex-label, .hex-petal:focus .hex-label, .hex-petal.is-open .hex-label { opacity: .18; transform: translateY(-24px); }
.hex-petal:hover .reveal-copy, .hex-petal:focus .reveal-copy, .hex-petal.is-open .reveal-copy { opacity: 1; transform: translateY(0) scale(1); }

.drawer-scene { grid-template-columns: minmax(220px, 360px) minmax(300px, 760px); gap: 6vw; align-items: center; }
.drawer-intro { justify-self: end; max-width: 360px; }
.drawer-intro h2, .ending-scene h2 { margin: .8rem 0 1rem; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 5.8rem); line-height: .86; font-weight: 600; color: var(--parchment); }
.drawer-intro p, .ending-scene p { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.55rem); color: rgba(255, 247, 214, .76); line-height: 1.45; }

.diagonal-cluster { position: relative; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 1rem; transform: rotate(-2deg); }

.specimen-card, .final-hex {
  position: relative;
  min-height: 230px;
  padding: 1.4rem;
  background: linear-gradient(145deg, rgba(242, 228, 200, .92), rgba(255, 247, 214, .78));
  color: var(--tea);
  clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%);
  box-shadow: inset 0 0 0 1px rgba(167, 122, 58, .8), 0 1.8rem 3rem rgba(0, 0, 0, .36);
  opacity: .2;
  transform: translateY(28px) scale(.96);
  transition: opacity .8s ease, transform .8s ease;
}

.specimen-card.is-open, .final-hex.is-open { opacity: 1; transform: translateY(0) scale(1); }
.specimen-card:nth-child(2) { margin-top: 4.6rem; }
.specimen-card:nth-child(3) { margin-top: 9.2rem; }
.specimen-card.wide { grid-column: 1 / 4; width: 68%; justify-self: center; min-height: 180px; }
.seal { font-family: var(--seal); color: var(--candle); font-size: .78rem; letter-spacing: .14em; }
.specimen-card h3 { margin: .7rem 0 .65rem; color: var(--plum); text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; }
.specimen-card p { font-family: var(--serif); font-size: 1.28rem; line-height: 1.28; color: rgba(26, 16, 13, .82); }

.petal-counter { display: flex; gap: .25rem; margin: .7rem 0; justify-content: center; }
.petal-counter span { display: block; width: 16px; height: 42px; border-radius: 70% 10% 70% 10%; background: var(--cream); border: 1px solid var(--brass); transform: rotate(var(--r, 0deg)); }
.petal-counter span:nth-child(1) { --r: -38deg; }.petal-counter span:nth-child(2) { --r: -24deg; }.petal-counter span:nth-child(3) { --r: -10deg; }.petal-counter span:nth-child(4) { --r: 5deg; }.petal-counter span:nth-child(5) { --r: 18deg; }.petal-counter span:nth-child(6) { --r: 31deg; }.petal-counter span:nth-child(7) { --r: 44deg; }

.flip-stamp { margin: .8rem auto; width: 150px; border: 2px solid var(--candle); color: var(--candle); text-align: center; padding: .45rem; transform-style: preserve-3d; transition: transform .8s ease; }
.specimen-card.is-open .flip-stamp { transform: rotateX(360deg); }
.flip-stamp span { display: block; font-size: .65rem; letter-spacing: .24em; }.flip-stamp strong { font-family: var(--seal); font-size: 1.25rem; }
.label-slip { border-top: 1px solid var(--brass); padding-top: .8rem; }

.ending-scene { min-height: 105vh; }
.final-hex { width: min(86vw, 720px); min-height: 560px; display: grid; place-items: center; text-align: center; padding: 5rem 4rem; background: radial-gradient(circle at 50% 28%, rgba(255, 247, 214, .95), rgba(242, 228, 200, .76) 47%, rgba(167, 122, 58, .36)); }
.final-hex .micro { color: var(--candle); }
.keyhole { width: 30px; height: 60px; background: var(--plum); clip-path: polygon(50% 0, 78% 21%, 65% 43%, 82% 100%, 18% 100%, 35% 43%, 22% 21%); box-shadow: 0 0 24px rgba(53, 34, 56, .5); }
.omen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.3rem; }
.omen-row span { border: 1px solid rgba(53, 34, 56, .35); padding: .42rem .62rem; color: var(--plum); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

@keyframes chamberPulse { 0%, 100% { filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(198,90,36,0)); } 50% { filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(198,90,36,.35)); } }
@keyframes drawLine { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .scene { padding: 6rem 1rem; }
  .honeycomb-rosette { height: 920px; width: min(96vw, 520px); }
  .hex-center { width: 310px; height: 310px; min-width: 0; min-height: 0; }
  .hex-one { left: 4%; top: 0; }.hex-two { left: 48%; top: 4%; }.hex-three { left: 54%; top: 28%; }.hex-four { left: 45%; top: 70%; }.hex-five { left: 3%; top: 72%; }.hex-six { left: 0; top: 27%; }
  .drawer-scene { grid-template-columns: 1fr; }
  .drawer-intro { justify-self: start; }
  .diagonal-cluster { grid-template-columns: 1fr; transform: none; }
  .specimen-card:nth-child(n) { margin-top: 0; }
  .specimen-card.wide { grid-column: auto; width: 100%; }
  .final-hex { padding: 3rem 2rem; min-height: 480px; }
}