/* ============ Epic Fury design system — mobile-first ============ */
@font-face { font-family: "Cinzel"; src: url("/static/fonts/cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/static/fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/static/fonts/ebgaramond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/static/fonts/ebgaramond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/static/fonts/ebgaramond-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/static/fonts/ebgaramond-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #010101;
  --gold: #C9A04C;
  --gold-bright: #E8B04F;
  --gold-top: #F8B947;
  --gold-btn: #B58233;
  --btn-text: #161002;
  --cream: #F4F5F2;
  --dim: rgba(244, 245, 242, .72);
  --hairline: rgba(201, 160, 76, .45);
  --heading: "Cinzel", "Times New Roman", serif;
  --body: "EB Garamond", Georgia, serif;
}


/* ============ The Craft: The Four Elements ============
   A route-scoped, progressive scroll procession. Every texture except the
   final approved bottle photograph is procedural CSS. */
.elements-page {
  --element-amber: #b66a24;
  --element-copper: #8e3e1e;
  --element-water: #6e99a0;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #010101;
  color: var(--cream);
}
.elements-scene {
  --section-progress: .5;
  --section-shift: 0;
  position: relative;
  isolation: isolate;
}
.element-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: paint;
  clip-path: inset(0);
  pointer-events: none;
}
.elements-opening {
  min-height: calc(100svh - clamp(88px, 22vw, 106px));
  display: grid;
  place-items: center;
  padding: clamp(72px, 18vw, 130px) clamp(20px, 6vw, 72px);
  border-bottom: 1px solid rgba(201, 160, 76, .24);
  background:
    radial-gradient(circle at 50% 58%, rgba(184, 111, 34, .12), transparent 29%),
    radial-gradient(ellipse at 50% 112%, rgba(124, 72, 27, .2), transparent 48%),
    #010101;
}
.elements-opening-copy {
  position: relative;
  z-index: 2;
  width: min(100%, 94rem);
  text-align: center;
}
.elements-opening h1 {
  margin: 0;
  color: var(--gold-bright);
  font-size: clamp(3.15rem, 10vw, 9rem);
  line-height: .92;
  letter-spacing: .055em;
  text-shadow: 0 0 24px rgba(232, 176, 79, .18), 0 8px 42px #000;
}
.elements-opening h1 span { display: block; }
.elements-opening h1 span:first-child {
  margin: 0 0 .4em;
  font-size: .43em;
  letter-spacing: .36em;
  transform: translateX(.18em);
}
.elements-opening-copy > p {
  max-width: 36ch;
  margin: 0 auto;
  font-size: clamp(1.75rem, 6vw, 2.65rem);
  line-height: 1.4;
  text-wrap: balance;
  text-shadow: 0 3px 16px #000;
}
.elements-rule {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
  align-items: center;
  gap: 18px;
  width: min(72vw, 470px);
  margin: clamp(24px, 5vw, 42px) auto;
  color: var(--gold-bright);
  font-size: .72rem;
}
.elements-rule::before, .elements-rule::after {
  content: "";
  border-top: 1px solid rgba(201, 160, 76, .78);
}
.elements-scroll-cue {
  display: block;
  width: 1px;
  height: 58px;
  margin: clamp(42px, 8vh, 78px) auto 0;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  transform-origin: top;
  animation: elements-cue 2.8s ease-in-out infinite;
  animation-play-state: paused;
}
.elements-opening.is-visible .elements-scroll-cue { animation-play-state: running; }
.opening-field { position: absolute; display: block; }
.opening-earth {
  inset: auto -8% -16% -8%;
  height: 43%;
  opacity: .64;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(201, 160, 76, .21) 0 1px, transparent 2px),
    radial-gradient(ellipse at 72% 38%, rgba(232, 176, 79, .14) 0 2px, transparent 3px),
    radial-gradient(ellipse at 48% 76%, rgba(99, 68, 33, .28), transparent 64%),
    linear-gradient(to top, #090602 28%, rgba(40, 25, 10, .3), transparent);
  background-size: 54px 39px, 78px 56px, auto, auto;
  filter: blur(.2px);
}
.opening-water {
  top: 4%;
  left: -15%;
  width: 63%;
  height: 64%;
  opacity: .22;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 62% 40%, rgba(158, 203, 204, .19), transparent 58%),
    radial-gradient(ellipse, rgba(82, 136, 145, .18), transparent 67%);
  filter: blur(1px);
  transform: rotate(-12deg);
  animation: opening-water 12s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.opening-wind {
  top: 13%;
  right: -14%;
  width: 72%;
  height: 54%;
  opacity: .23;
  background:
    radial-gradient(ellipse at 34% 42%, rgba(224, 190, 120, .2), transparent 38%),
    radial-gradient(ellipse at 72% 60%, rgba(201, 160, 76, .13), transparent 43%);
  filter: blur(14px);
  transform: skewX(-18deg);
  animation: opening-wind 13s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.opening-fire {
  right: -14%;
  bottom: -12%;
  width: 64%;
  height: 68%;
  opacity: .34;
  background: radial-gradient(ellipse at 42% 73%, rgba(224, 105, 28, .38), rgba(137, 48, 18, .16) 28%, transparent 68%);
  filter: blur(10px);
  animation: ember-breathe 5.5s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.elements-opening.is-visible :is(.opening-water, .opening-wind, .opening-fire) { animation-play-state: running; }
.opening-grain {
  position: absolute;
  bottom: 8%;
  left: var(--grain-x);
  width: 3px;
  height: 12px;
  border-radius: 80% 10% 80% 10%;
  background: var(--gold);
  opacity: .42;
  transform: rotate(var(--grain-r));
  animation: grain-rise var(--grain-speed) ease-in-out infinite;
  animation-delay: var(--grain-delay);
  animation-play-state: paused;
}
.elements-opening.is-visible .opening-grain { animation-play-state: running; }
.opening-grain-1 { --grain-x: 18%; --grain-r: 18deg; --grain-speed: 7.2s; --grain-delay: -2s; }
.opening-grain-2 { --grain-x: 29%; --grain-r: -31deg; --grain-speed: 8.4s; --grain-delay: -5s; }
.opening-grain-3 { --grain-x: 43%; --grain-r: 42deg; --grain-speed: 9.1s; --grain-delay: -1s; }
.opening-grain-4 { --grain-x: 61%; --grain-r: -16deg; --grain-speed: 7.8s; --grain-delay: -4s; }
.opening-grain-5 { --grain-x: 74%; --grain-r: 24deg; --grain-speed: 8.8s; --grain-delay: -6s; }
.opening-grain-6 { --grain-x: 86%; --grain-r: -38deg; --grain-speed: 9.4s; --grain-delay: -3s; }

.element-chapter {
  min-height: auto;
  padding: clamp(84px, 22vw, 136px) clamp(20px, 6vw, 60px);
  border-bottom: 1px solid rgba(201, 160, 76, .18);
  background: #010101;
}
.element-stage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(38px, 9vw, 72px);
  width: min(100%, 1440px);
  margin: 0 auto;
}
.element-visual {
  min-width: 0;
  min-height: clamp(240px, 67vw, 430px);
  display: grid;
  place-items: center;
}
.element-title-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  text-align: center;
}
.element-title-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(92%, 900px);
  height: clamp(120px, 24vw, 280px);
  border-radius: 50%;
  opacity: .72;
  filter: blur(26px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.element-title, .element-title-aura {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(4.3rem, 19vw, 10rem);
  line-height: .84;
  letter-spacing: .015em;
  white-space: nowrap;
}
.element-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--gold-bright);
}
.element-title-aura {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: transparent;
  opacity: .55;
  filter: blur(12px);
  pointer-events: none;
  user-select: none;
}
.element-copy {
  position: relative;
  max-width: 38ch;
  margin: 0 auto;
  padding: 28px 0 0;
  border-top: 1px solid rgba(201, 160, 76, .58);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .82), transparent 86%);
  font-size: clamp(1.75rem, 6.2vw, 2.4rem);
  line-height: 1.4;
  text-align: left;
  text-shadow: 0 3px 14px #000;
}
.element-copy p { margin: 0; }
.elements-enhanced .element-copy {
  opacity: .68;
  transform: translateY(22px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.elements-enhanced .element-chapter.is-active .element-copy { opacity: 1; transform: none; }

/* Earth: soil, limestone fractures, grain, and low amber light. */
.element-earth {
  background:
    radial-gradient(ellipse at 22% 58%, rgba(194, 105, 31, .3), transparent 45%),
    radial-gradient(ellipse at 74% 34%, rgba(227, 160, 61, .12), transparent 38%),
    linear-gradient(180deg, #010101, #100703 52%, #010101);
}
.element-earth .element-title-shell::before { background: radial-gradient(ellipse, rgba(0, 0, 0, .9) 0 34%, rgba(130, 102, 68, .46) 54%, transparent 74%); }
.element-earth .element-title {
  color: #826644;
  filter: brightness(1.25) saturate(1.12);
  -webkit-text-stroke: .55px rgba(232, 190, 125, .68);
  text-shadow: 0 3px 0 #2d2016, 0 10px 28px #000, 0 0 22px rgba(232, 176, 79, .42), 0 0 72px rgba(130, 102, 68, .82);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .element-earth .element-title {
    background: #826644;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.element-earth .element-title-aura {
  z-index: 3;
  color: transparent;
  opacity: .96;
  filter: drop-shadow(1px 1px 0 rgba(197, 169, 130, .26));
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220'%3E%3Cg fill='none' stroke='%23140904' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='8' d='M72 -8 118 42 104 83 153 126 136 228M104 83 67 118 54 160M153 126 202 96 224 57'/%3E%3Cpath stroke-width='7' d='M354 -12 329 48 364 92 337 142 371 231M364 92 417 119 439 167M337 142 292 167 279 209'/%3E%3Cpath stroke-width='9' d='M622 -8 590 49 621 86 602 130 651 176 635 230M602 130 551 154 532 201M651 176 696 149 719 108'/%3E%3Cpath stroke-width='7' d='M861 -5 835 53 868 92 842 134 884 181 874 228M868 92 919 120 940 164M842 134 801 163 787 204'/%3E%3C/g%3E%3Cg fill='none' stroke='%2362260e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M118 42 156 25 177 0M67 118 30 102 8 71M329 48 289 27 270 0M417 119 458 94 473 65M590 49 550 25 534 0M696 149 735 178 750 218M835 53 795 33 774 0M919 120 959 94 986 61'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.earth-photo {
  position: absolute;
  inset: clamp(16px, 3vw, 44px) 0;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: .7;
}
.earth-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: saturate(.76) contrast(1.1) brightness(.62);
}
.element-earth .element-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 1, 1, .72), rgba(20, 17, 11, .2) 37%, rgba(20, 17, 11, .14) 66%, rgba(1, 1, 1, .74)),
    linear-gradient(180deg, #010101 0, transparent 15%, transparent 84%, #010101 100%);
}
.earth-strata {
  position: absolute;
  z-index: 2;
  inset: 19% -10% -16%;
  opacity: .72;
  background:
    radial-gradient(ellipse at 30% 58%, rgba(209, 160, 76, .18) 0 1px, transparent 2px),
    radial-gradient(ellipse at 64% 44%, rgba(224, 190, 120, .11) 0 2px, transparent 3px),
    radial-gradient(ellipse at 48% 68%, rgba(89, 59, 28, .24), transparent 62%),
    linear-gradient(to top, #090603, rgba(35, 23, 11, .45), transparent 82%);
  background-size: 62px 47px, 83px 71px, auto, auto;
  transform: translateY(calc(var(--section-shift) * 3vh));
}
.earth-grain {
  position: absolute;
  z-index: 2;
  left: var(--earth-x);
  top: var(--earth-y);
  width: clamp(3px, .4vw, 6px);
  height: clamp(18px, 2.5vw, 34px);
  border: 1px solid rgba(232, 176, 79, .68);
  border-radius: 90% 10% 90% 10%;
  opacity: .36;
  transform: rotate(var(--earth-r));
}
.earth-grain-1 { --earth-x: 16%; --earth-y: 34%; --earth-r: 24deg; }
.earth-grain-2 { --earth-x: 38%; --earth-y: 65%; --earth-r: -42deg; }
.earth-grain-3 { --earth-x: 71%; --earth-y: 29%; --earth-r: 58deg; }
.earth-grain-4 { --earth-x: 84%; --earth-y: 71%; --earth-r: -18deg; }
.earth-dust {
  position: absolute;
  z-index: 2;
  inset: 52% 5% 0;
  opacity: .25;
  background-image: radial-gradient(circle, rgba(232, 176, 79, .7) 0 1px, transparent 1.5px);
  background-size: 43px 39px;
  mask-image: linear-gradient(to top, #000, transparent 82%);
  animation: dust-drift 12s linear infinite;
  animation-play-state: paused;
}
.element-earth.is-visible .earth-dust { animation-play-state: running; }

/* Water: two restrained sources converge beneath mineral refraction. */
.element-water {
  background:
    radial-gradient(ellipse at 72% 47%, rgba(25, 151, 178, .26), transparent 42%),
    radial-gradient(ellipse at 28% 61%, rgba(20, 86, 116, .22), transparent 38%),
    linear-gradient(180deg, #010101, #011015 50%, #010101);
}
.element-water .element-title-shell::before { background: radial-gradient(ellipse, rgba(27, 165, 191, .38), rgba(24, 89, 119, .2) 48%, transparent 72%); }
.element-water .element-title {
  color: #7ee8f1;
  text-shadow: 0 1px 0 rgba(244, 255, 255, .9), 0 11px 30px #000, 0 0 28px rgba(35, 181, 205, .5), 0 0 76px rgba(24, 114, 147, .38);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .element-water .element-title {
    background:
      radial-gradient(circle at 25% 32%, rgba(255, 255, 255, .92) 0 2%, transparent 7%),
      radial-gradient(circle at 72% 66%, rgba(78, 210, 225, .7) 0 2%, transparent 8%),
      linear-gradient(122deg, #f4c766 3%, #45d4e2 25%, #f8ffff 45%, #158aa7 64%, #e8b04f 94%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.element-water .element-title-aura { color: rgba(38, 184, 204, .7); opacity: .72; filter: blur(9px); text-shadow: 0 0 64px rgba(67, 211, 223, .5); }
.water-photo {
  position: absolute;
  inset: clamp(16px, 3vw, 44px) 0;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: .68;
}
.water-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: saturate(.88) contrast(1.12) brightness(.7);
}
.element-water .element-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 1, 1, .8), rgba(1, 12, 16, .18) 35%, rgba(1, 12, 16, .1) 68%, rgba(1, 1, 1, .7)),
    linear-gradient(180deg, #010101 0, transparent 16%, transparent 83%, #010101 100%);
}
.water-source {
  position: absolute;
  z-index: 2;
  top: 15%;
  width: 68%;
  height: 72%;
  opacity: .22;
  border-radius: 48%;
  filter: blur(2px);
}
.water-source-kentucky {
  left: -39%;
  background: radial-gradient(ellipse at 100% 52%, rgba(201, 160, 76, .2), rgba(67, 128, 142, .1) 42%, transparent 72%);
  transform: translateX(calc(var(--section-progress) * 14vw)) rotate(8deg);
}
.water-source-mineral {
  right: -39%;
  background: radial-gradient(ellipse at 0 48%, rgba(83, 188, 203, .24), rgba(42, 106, 128, .12) 44%, transparent 73%);
  transform: translateX(calc(var(--section-progress) * -14vw)) rotate(-8deg);
}
.water-caustics {
  position: absolute;
  z-index: 2;
  inset: 8% 3%;
  opacity: .18;
  background:
    radial-gradient(ellipse at 26% 38%, rgba(224, 239, 231, .16), transparent 30%),
    radial-gradient(ellipse at 72% 61%, rgba(71, 179, 195, .18), transparent 35%);
  filter: blur(12px);
  transform: rotate(-7deg) scale(1.08);
  animation: water-refraction 11s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.element-water.is-visible .water-caustics { animation-play-state: running; }
.water-drop {
  position: absolute;
  z-index: 2;
  width: clamp(9px, 1.2vw, 17px);
  aspect-ratio: .72;
  border: 1px solid rgba(187, 219, 216, .58);
  border-radius: 58% 42% 64% 36% / 68% 40% 60% 32%;
  box-shadow: inset 2px 3px 5px rgba(244, 245, 242, .22), 0 0 14px rgba(86, 145, 153, .18);
  transform: rotate(37deg);
  animation: water-drop 8s ease-in-out infinite;
  animation-play-state: paused;
}
.element-water.is-visible .water-drop { animation-play-state: running; }
.water-drop-1 { top: 29%; left: 24%; animation-delay: -2.5s; }
.water-drop-2 { right: 19%; bottom: 28%; animation-delay: -5.2s; }
.water-minerals {
  position: absolute;
  z-index: 2;
  inset: 22% 16%;
  opacity: .24;
  background-image: radial-gradient(circle, rgba(223, 211, 168, .75) 0 1px, transparent 1.5px);
  background-size: 52px 47px;
}

/* Wind: restrained currents carry fine chaff across oak-grain shadow. */
.element-wind {
  background:
    radial-gradient(ellipse at 27% 42%, rgba(219, 158, 54, .24), transparent 43%),
    radial-gradient(ellipse at 74% 61%, rgba(244, 210, 128, .1), transparent 36%),
    linear-gradient(180deg, #010101, #0b0702 50%, #010101);
}
.element-wind .element-title-shell::before { background: radial-gradient(ellipse, rgba(235, 166, 49, .38), rgba(151, 93, 26, .14) 52%, transparent 73%); }
.element-wind .element-title {
  color: #ffd067;
  text-shadow: 14px 0 25px rgba(255, 205, 102, .28), -2px 7px 28px #000, 0 0 55px rgba(223, 144, 38, .4);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .element-wind .element-title {
    background:
      radial-gradient(circle at 21% 35%, #fff0bd 0 1.2%, transparent 4%),
      radial-gradient(circle at 68% 62%, #f1bb57 0 1%, transparent 4.5%),
      linear-gradient(90deg, #9a5b1c, #ffe394 40%, #c77b27 72%, #fff0ba);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.element-wind .element-title-aura { color: rgba(244, 185, 79, .68); opacity: .64; filter: blur(9px); text-shadow: 30px 0 58px rgba(250, 195, 92, .48); }
.wind-photo {
  position: absolute;
  inset: clamp(16px, 3vw, 44px) 0;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: .72;
}
.wind-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: saturate(.72) sepia(.12) contrast(1.08) brightness(.64);
}
.element-wind .element-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 1, 1, .72), rgba(24, 17, 7, .18) 36%, rgba(24, 17, 7, .12) 67%, rgba(1, 1, 1, .74)),
    linear-gradient(180deg, #010101 0, transparent 15%, transparent 84%, #010101 100%);
}
.wind-current {
  display: none;
}
.wind-current-1 { top: 24%; transform: rotate(-5deg); }
.wind-current-2 { top: 47%; transform: rotate(7deg); animation-delay: -4s; }
.wind-current-3 { top: 68%; transform: rotate(-2deg); animation-delay: -7s; }
.wind-chaff {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: var(--chaff-y);
  width: clamp(8px, .9vw, 14px);
  height: 2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .46;
  transform: rotate(var(--chaff-r));
  animation: chaff-cross var(--chaff-speed) linear infinite;
  animation-delay: var(--chaff-delay);
  animation-play-state: paused;
}
.element-wind.is-visible .wind-chaff { animation-play-state: running; }
.wind-chaff-1 { --chaff-y: 27%; --chaff-r: 14deg; --chaff-speed: 9s; --chaff-delay: -2s; }
.wind-chaff-2 { --chaff-y: 41%; --chaff-r: -22deg; --chaff-speed: 11s; --chaff-delay: -7s; }
.wind-chaff-3 { --chaff-y: 61%; --chaff-r: 31deg; --chaff-speed: 10s; --chaff-delay: -5s; }
.wind-chaff-4 { --chaff-y: 73%; --chaff-r: -8deg; --chaff-speed: 12s; --chaff-delay: -9s; }
.wind-oak-shadow {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .2;
  background:
    radial-gradient(ellipse at 28% 48%, rgba(146, 94, 32, .28), transparent 37%),
    radial-gradient(ellipse at 76% 58%, rgba(91, 55, 24, .22), transparent 43%);
  filter: blur(16px);
  transform: translateX(calc(var(--section-shift) * 2vw));
}

/* Fire: approved full-frame barrel photography, charred oak, and controlled embers. */
.element-fire {
  background:
    radial-gradient(ellipse at 65% 60%, rgba(235, 65, 11, .3), transparent 42%),
    linear-gradient(180deg, #010101, #150301 52%, #010101);
}
.element-fire .element-title-shell::before { background: radial-gradient(ellipse, rgba(255, 70, 9, .52), rgba(186, 36, 8, .22) 48%, transparent 72%); }
.element-fire .element-title {
  color: #ff6a1c;
  filter: saturate(1.2) brightness(1.12);
  text-shadow: 0 2px 0 #2c0802, 0 0 18px rgba(255, 98, 22, .74), 0 0 58px rgba(231, 44, 9, .5), 0 10px 34px #000;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .element-fire .element-title {
    background:
      radial-gradient(circle at 24% 34%, rgba(255, 225, 126, .95) 0 1.2%, transparent 4%),
      radial-gradient(circle at 71% 62%, rgba(255, 110, 33, .86) 0 1%, transparent 4.5%),
      linear-gradient(180deg, #ffe69a 0%, #ff9d36 24%, #f14b16 55%, #8c1807 79%, #ff7626 100%);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.element-fire .element-title-aura { color: rgba(255, 72, 14, .8); opacity: .74; filter: blur(10px); text-shadow: 0 0 68px rgba(255, 68, 12, .7); }
.fire-photo {
  position: absolute;
  inset: clamp(16px, 3vw, 44px) 0;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: .78;
}
.fire-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.18) contrast(1.08) brightness(.9);
}
.element-fire .element-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 1, 1, .86), rgba(1, 1, 1, .18) 35%, rgba(1, 1, 1, .12) 66%, rgba(1, 1, 1, .8)),
    linear-gradient(180deg, #010101 0, transparent 15%, transparent 82%, #010101 100%);
}
.fire-oak {
  position: absolute;
  z-index: 2;
  inset: 5% -5%;
  opacity: .32;
  background:
    radial-gradient(ellipse at 24% 55%, rgba(77, 25, 13, .48), transparent 37%),
    radial-gradient(ellipse at 72% 43%, rgba(230, 96, 27, .15), transparent 42%);
  filter: blur(14px) contrast(1.08);
}
.fire-ember-bed {
  position: absolute;
  z-index: 2;
  inset: 38% 5% -22%;
  opacity: .5;
  background: radial-gradient(ellipse at 50% 72%, rgba(239, 102, 28, .48), rgba(148, 40, 17, .18) 32%, transparent 69%);
  filter: blur(7px);
  animation: ember-breathe 4.4s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.element-fire.is-visible .fire-ember-bed { animation-play-state: running; }
.fire-flare {
  position: absolute;
  z-index: 2;
  inset: 12% 18%;
  opacity: 0;
  background: radial-gradient(circle, rgba(248, 185, 71, .28), rgba(194, 64, 22, .12) 28%, transparent 67%);
  filter: blur(8px);
}
.element-fire.is-active .fire-flare { animation: controlled-flare 1.8s ease-out both; }
.fire-spark {
  position: absolute;
  z-index: 2;
  left: var(--spark-x);
  bottom: 13%;
  width: 2px;
  height: clamp(9px, 1.1vw, 16px);
  border-radius: 50%;
  background: #f2ad46;
  box-shadow: 0 0 8px rgba(241, 128, 42, .72);
  opacity: .56;
  animation: spark-rise var(--spark-speed) ease-out infinite;
  animation-delay: var(--spark-delay);
  animation-play-state: paused;
}
.element-fire.is-visible .fire-spark { animation-play-state: running; }
.fire-spark-1 { --spark-x: 22%; --spark-speed: 6.4s; --spark-delay: -2s; }
.fire-spark-2 { --spark-x: 44%; --spark-speed: 7.8s; --spark-delay: -5s; }
.fire-spark-3 { --spark-x: 67%; --spark-speed: 6.9s; --spark-delay: -3.5s; }
.fire-spark-4 { --spark-x: 82%; --spark-speed: 8.2s; --spark-delay: -6.2s; }
.fire-ash {
  position: absolute;
  z-index: 2;
  inset: 12%;
  opacity: .15;
  background-image: radial-gradient(circle, #d6c2a0 0 1px, transparent 1.4px);
  background-size: 58px 63px;
  animation: ash-drift 16s linear infinite;
  animation-play-state: paused;
}
.element-fire.is-visible .fire-ash { animation-play-state: running; }

/* Synthesis: all four signatures converge behind one approved bottle. */
.elements-final {
  min-height: 108svh;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(201, 160, 76, .3);
  background: #010101;
}
.elements-final > .synthesis-atmosphere { display: none; }
.elements-final-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 108svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 90px clamp(20px, 6vw, 70px) clamp(70px, 13vh, 130px);
}
.elements-bottle {
  position: absolute;
  inset: 2.5% 3% 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  opacity: .72;
  pointer-events: none;
}
.elements-bottle img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(1.08) contrast(1.04);
}
.elements-final-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 580px);
  padding: 34px clamp(18px, 5vw, 46px);
  text-align: center;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, .72) 58%, transparent 78%);
  text-shadow: 0 3px 16px #000;
}
.elements-final-copy h2 {
  margin: 0;
  font-size: clamp(2.7rem, 12vw, 6.5rem);
  color: var(--gold-bright);
  text-shadow: 0 0 34px rgba(232, 176, 79, .24), 0 8px 28px #000;
}
.elements-final-copy > p:not(.elements-cta) {
  max-width: 31ch;
  margin: 0 auto;
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  line-height: 1.4;
}
.elements-cta { margin: clamp(30px, 6vh, 54px) 0 0; }
.elements-cta .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  width: min(100%, 540px);
  font-family: var(--heading);
  max-width: 100%;
  min-height: 68px;
  font-size: clamp(1.05rem, 3.8vw, 1.3rem);
  line-height: 1.22;
  letter-spacing: clamp(.025em, .36vw, .05em);
  padding-right: clamp(14px, 4vw, 28px);
  padding-left: clamp(14px, 4vw, 28px);
  white-space: normal;
}
.elements-cta-label { min-width: 0; text-wrap: balance; }
.elements-cta-arrow { flex: none; font-size: 1.25em; line-height: 1; }
.elements-cta .btn-gold:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 5px;
}
.synthesis-earth {
  position: absolute;
  inset: auto -8% -18%;
  height: 48%;
  opacity: .55;
  background:
    radial-gradient(circle, rgba(218, 169, 82, .2) 0 1px, transparent 1.5px),
    linear-gradient(to top, #0b0703, rgba(74, 43, 16, .2), transparent);
  background-size: 56px 48px, auto;
  transform: translateY(calc(var(--section-shift) * -2vh));
}
.synthesis-water {
  position: absolute;
  inset: 12% -12% 24%;
  opacity: .17;
  background: radial-gradient(ellipse at 50% 58%, rgba(116, 175, 181, .24), transparent 66%);
  animation: water-refraction 13s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.synthesis-wind {
  position: absolute;
  inset: 18% -10%;
  opacity: .2;
  background:
    radial-gradient(ellipse at 31% 42%, rgba(225, 188, 112, .18), transparent 38%),
    radial-gradient(ellipse at 72% 58%, rgba(201, 160, 76, .12), transparent 42%);
  filter: blur(18px);
  transform: translateX(calc(var(--section-shift) * 4vw));
}
.synthesis-fire {
  position: absolute;
  inset: 27% 13% -3%;
  opacity: .42;
  background: radial-gradient(ellipse at 50% 74%, rgba(235, 103, 26, .46), rgba(165, 51, 18, .16) 31%, transparent 68%);
  filter: blur(8px);
  animation: ember-breathe 5s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.synthesis-ring {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201, 160, 76, .1), transparent 68%);
  filter: blur(16px);
  transform: translate(-50%, -50%) scale(calc(.88 + var(--section-progress) * .12));
}
.elements-final.is-visible :is(.synthesis-water, .synthesis-fire) { animation-play-state: running; }
.is-document-hidden * { animation-play-state: paused !important; }

@media (min-width: 900px) {
  .elements-opening { min-height: calc(100svh - clamp(76px, 10.7vh, 120px)); }
  .element-chapter { min-height: 115svh; padding: 0; }
  .element-stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    grid-template-areas: "visual copy";
    align-items: center;
    gap: clamp(46px, 6vw, 110px);
    padding: clamp(60px, 8vh, 100px) clamp(48px, 6vw, 110px);
  }
  .element-visual { grid-area: visual; min-height: 0; transform: translate3d(0, calc(var(--section-shift) * -2.4vh), 0); }
  .element-copy {
    grid-area: copy;
    max-width: 34ch;
    padding: 20px 0 20px clamp(28px, 3vw, 52px);
    border-top: 0;
    border-left: 1px solid rgba(201, 160, 76, .6);
    background: linear-gradient(90deg, rgba(0, 0, 0, .74), transparent 90%);
    font-size: clamp(2rem, 2.5vw, 2.5rem);
    line-height: 1.38;
    transform: translate3d(0, calc(var(--section-shift) * 1.8vh), 0);
  }
  .elements-enhanced .element-copy { transform: translate3d(0, calc(24px + var(--section-shift) * 1.8vh), 0); }
  .elements-enhanced .element-chapter.is-active .element-copy { transform: translate3d(0, calc(var(--section-shift) * 1.8vh), 0); }
  .element-title, .element-title-aura { font-size: clamp(7rem, 11.7vw, 11.75rem); }
  .element-water .element-stage, .element-fire .element-stage {
    grid-template-columns: minmax(320px, .75fr) minmax(0, 1.45fr);
    grid-template-areas: "copy visual";
  }
  .element-water .element-copy, .element-fire .element-copy {
    padding-right: clamp(28px, 3vw, 52px);
    padding-left: 0;
    border-right: 1px solid rgba(201, 160, 76, .6);
    border-left: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, .74), transparent 90%);
  }
  .elements-final-stage { align-items: center; justify-content: flex-end; padding-right: clamp(56px, 8vw, 130px); }
  .elements-bottle { inset: 2% 35% 0 3%; justify-content: center; opacity: .9; }
  .elements-bottle img { object-position: center bottom; }
  .elements-final-copy { width: min(42vw, 620px); margin-left: auto; transform: translate(clamp(-150px, -9.4vw, -88px), clamp(18px, 2.4vh, 28px)); }
  .elements-final-copy h2 { font-size: clamp(4rem, 6.4vw, 6.6rem); }
  .elements-final-copy > p:not(.elements-cta) { font-size: clamp(2rem, 2.5vw, 2.4rem); line-height: 1.38; }
}

@media (prefers-reduced-motion: reduce) {
  .elements-page .element-chapter,
  .elements-page .elements-opening,
  .elements-page .elements-final { min-height: auto; }
  .elements-page .element-chapter { padding: clamp(72px, 10vw, 120px) clamp(20px, 6vw, 80px); }
  .elements-page .element-stage { position: relative; top: auto; min-height: auto; }
  .elements-page .elements-final-stage { min-height: min(860px, 100svh); }
  .elements-page.elements-enhanced .element-copy { opacity: 1; transform: none; }
  .elements-page :is(.opening-water, .opening-wind, .opening-fire, .opening-grain, .elements-scroll-cue, .earth-dust, .water-caustics, .water-drop, .wind-current, .wind-chaff, .fire-ember-bed, .fire-flare, .fire-spark, .fire-ash, .synthesis-water, .synthesis-fire) {
    animation: none !important;
  }
  .elements-page :is(.element-visual, .element-copy, .earth-strata, .water-source, .wind-oak-shadow, .synthesis-earth, .synthesis-wind, .synthesis-ring) { transform: none !important; }
}

@keyframes elements-cue {
  0%, 100% { opacity: .24; transform: scaleY(.55); }
  50% { opacity: .9; transform: scaleY(1); }
}
@keyframes opening-water {
  from { transform: rotate(-12deg) translate3d(-2%, -1%, 0); }
  to { transform: rotate(-8deg) translate3d(5%, 3%, 0); }
}
@keyframes opening-wind {
  from { transform: skewX(-18deg) translateX(-3%); }
  to { transform: skewX(-13deg) translateX(5%); }
}
@keyframes grain-rise {
  0%, 100% { opacity: 0; transform: translate3d(0, 24px, 0) rotate(var(--grain-r)); }
  28%, 72% { opacity: .45; }
  100% { transform: translate3d(18px, -48vh, 0) rotate(calc(var(--grain-r) + 110deg)); }
}
@keyframes dust-drift {
  from { transform: translate3d(0, 3%, 0); }
  to { transform: translate3d(3%, -8%, 0); }
}
@keyframes water-refraction {
  from { transform: rotate(-7deg) scale(1.04) translate3d(-2%, 0, 0); }
  to { transform: rotate(-3deg) scale(1.12) translate3d(3%, 2%, 0); }
}
@keyframes water-drop {
  0%, 100% { opacity: 0; transform: translate3d(-12px, 8px, 0) rotate(37deg); }
  28%, 68% { opacity: .62; }
  78% { transform: translate3d(34px, -20px, 0) rotate(48deg); }
}
@keyframes wind-current {
  from { opacity: .12; translate: -3% 0; }
  to { opacity: .5; translate: 4% -5%; }
}
@keyframes chaff-cross {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) rotate(var(--chaff-r)); }
  16%, 78% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(116vw, -40px, 0) rotate(calc(var(--chaff-r) + 220deg)); }
}
@keyframes ember-breathe {
  from { opacity: .28; transform: scale(.96); }
  to { opacity: .58; transform: scale(1.04); }
}
@keyframes controlled-flare {
  0% { opacity: 0; transform: scale(.72); }
  32% { opacity: .62; }
  100% { opacity: .08; transform: scale(1.12); }
}
@keyframes spark-rise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) rotate(8deg); }
  24%, 62% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(32px, -48vh, 0) rotate(180deg); }
}
@keyframes ash-drift {
  from { transform: translate3d(0, -2%, 0); }
  to { transform: translate3d(-4%, 7%, 0); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--body); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-bright); text-decoration: none; }
a:visited { color: var(--gold-bright); }
a:hover, a:focus-visible { color: var(--gold-top); }
.site-nav a:visited { color: var(--cream); }
.foot-links a:visited, .foot-social a:visited { color: var(--gold); }
.decline:visited { color: var(--dim); }
.btn-gold:visited { color: var(--btn-text); }
.btn-outline:visited { color: var(--gold-bright); }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; color: var(--gold-bright); letter-spacing: .06em; line-height: 1.15; margin: 0 0 .5em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--gold); color: var(--btn-text); padding: 8px 12px; z-index: 99; }

/* Gold viewport frame */
/* NOTE: no overflow:hidden here — it would break position:sticky on .hero-media */
.frame { min-height: 100vh; margin: 10px; border: none; border-radius: 16px; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% 0%, #0a0803 0%, var(--bg) 55%); }
@media (min-width: 768px) { .frame { margin: 14px; } }
/* Desktop pages share one full-width stage so brand, photography, and copy
   retain the same anchors from route to route. */
@media (min-width: 1100px) { .frame { width: 100%; max-width: none; margin: 0; border-radius: 0; } }

/* Header */
.site-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-text .tm { font-size: .42em; vertical-align: super; margin-left: 2px; color: var(--gold); }
.brand-text { font-family: var(--heading); font-weight: 700; font-size: 1.45rem; color: var(--gold-bright); letter-spacing: .08em; display: inline-flex; flex-direction: row; align-items: flex-start; line-height: 1.15; }
.brand-text small { font-family: var(--heading); font-weight: 400; font-size: .45rem; letter-spacing: .24em; color: var(--gold); }
@media (min-width: 480px) { .brand-text small { font-size: .52rem; letter-spacing: .3em; } }
@media (max-width: 1099px) {
  .site-header { min-height: clamp(88px, 22vw, 106px); justify-content: flex-end; padding: 10px clamp(12px, 4vw, 20px); }
  .brand { position: absolute; left: clamp(12px, 4vw, 20px); max-width: calc(100% - 112px); gap: clamp(8px, 2.6vw, 14px); transform: none; }
  .brand img { flex: none; width: clamp(58px, 16vw, 74px); height: clamp(58px, 16vw, 74px); max-width: none; mix-blend-mode: screen; }
  .brand-text { flex: none; flex-wrap: nowrap; font-size: clamp(1.45rem, 6vw, 2.05rem); letter-spacing: .045em; line-height: 1; white-space: nowrap; }
  .brand-text .tm { flex: none; font-size: .32em; margin-left: 2px; }
}
.nav-toggle { position: relative; z-index: 71; background: none; border: 1px solid var(--hairline); border-radius: 6px; color: var(--gold-bright); font-family: var(--heading); letter-spacing: .18em; padding: 8px 14px; cursor: pointer; }
.site-nav { display: none; }
.site-nav.open { display: flex; position: fixed; inset: 0; z-index: 70; background: rgba(1,1,1,.97); flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 26px; font-size: 1.15rem; overflow-y: auto; padding: 24px; }
.site-nav a, .site-nav summary { font-family: var(--body); font-weight: 600; letter-spacing: .09em; color: var(--cream); cursor: pointer; font-variant-numeric: lining-nums; }
.site-nav a:hover { color: var(--gold-top); }
.site-nav[data-active="home"] a[data-nav="home"],
.site-nav[data-active="purpose"] a[data-nav="purpose"],
.site-nav[data-active="craft"] a[data-nav="craft"],
.site-nav[data-active="release"] a[data-nav="release"],
.site-nav[data-active="gallery"] a[data-nav="gallery"],
.site-nav[data-active="acquire"] a[data-nav="acquire"],
.site-nav[data-active="circle"] a[data-nav="circle"],
.site-nav[data-active="more"] summary[data-nav="more"] {
  color: var(--gold-bright); border-bottom: 1px solid var(--gold); padding-bottom: 4px;
}
.more { position: relative; }
.more summary { list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ▾"; color: var(--gold); }
.more ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.pill { border: 1px solid var(--gold); border-radius: 999px; padding: 8px 18px; color: var(--gold-bright) !important; }
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-header { flex: none; display: grid; grid-template-columns: 30% 70%; align-items: center; gap: 0; height: clamp(76px, 10.7vh, 120px); padding: 0; border-bottom: 1px solid rgba(201, 160, 76, .58); }
  .brand { position: absolute; left: 23%; width: max-content; gap: clamp(11px, 1vw, 16px); transform: translateX(-50%); }
  .brand img { width: min(6.85vw, 9.6vh); height: min(6.85vw, 9.6vh); min-width: 66px; min-height: 66px; mix-blend-mode: screen; transform: translateY(-4px); }
  .brand-text { font-size: 3vw; letter-spacing: .035em; white-space: nowrap; }
  .brand-text .tm { font-size: .28em; margin-left: 3px; }
  .site-nav { grid-column: 2; display: flex; position: static; width: 100%; background: none; flex-direction: row; align-items: center; justify-content: center; gap: clamp(12px, 1.05vw, 20px); padding: 0 3.45vw; font-size: clamp(11px, .92vw, 16px); }
  .site-nav a, .site-nav summary, .site-nav .pill { white-space: nowrap; }
  .brand-text small { white-space: nowrap; }
  .site-nav a, .site-nav summary, .site-nav .pill { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-weight: 500; letter-spacing: .025em; }
  .site-nav .pill { padding: 0; border: 0; border-radius: 0; color: var(--cream) !important; }
  .more ul { position: absolute; top: 130%; right: 0; background: #050505; border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 18px; min-width: 190px; text-align: left; z-index: 40; }
}

/* Footer */
.site-footer { position: relative; margin-top: auto; border-top: none; padding: 16px 16px 18px; text-align: center; font-size: .78rem; letter-spacing: .16em; font-family: var(--heading); color: var(--dim); }
/* Enlarged footer (~2.6x) on desktop */
@media (min-width: 1100px) { .site-footer { font-size: 1.2rem; padding: 50px 20px 54px; border-top: 2px solid var(--gold); } }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; margin: 0 0 10px; }
.foot-links > * { padding: 0 18px; }
.foot-links > * + * { border-left: 1px solid var(--hairline); }
.foot-links span { color: var(--gold); }
.foot-links a { color: var(--gold); }
.foot-social { display: flex; justify-content: center; gap: 18px; margin: 0 0 8px; }
.foot-social a { color: var(--gold); }
.foot-note { margin: 0; color: var(--dim); }
.footer-admin-login { position: absolute; left: 10px; bottom: 5px; padding: 3px 5px; border: 1px solid rgba(201, 160, 76, .32); color: rgba(232, 226, 214, .52); font-family: "Inter", "Segoe UI", Arial, sans-serif; font-size: .5rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.footer-admin-login:visited { color: rgba(232, 226, 214, .52); }
.footer-admin-login:hover, .footer-admin-login:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ============ Shared background-photo layout ============
   Page photography is decorative scenery beneath the content layer. The
   complete source always remains visible; do not replace contain with cover. */
.split { position: relative; isolation: isolate; display: block; min-height: 100%; }
.hero-col { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-media { position: sticky; top: 0; display: block; width: 100%; height: 100vh; object-fit: contain; object-position: center top; }
.content-col { position: relative; z-index: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
main { display: block; }
@media (max-width: 1099px) {
  /* Non-home bottle photography fits inside the viewport space remaining
     below the mobile header. The matching sticky top keeps its bottom edge on
     the lower frame gutter until the split ends and releases it before the
     closing tagline/footer. */
  body:not(.fit-viewport) .hero-media { top: calc(clamp(88px, 22vw, 106px) + 10px); height: calc(100vh - clamp(88px, 22vw, 106px) - 20px); }
  /* Mobile reading veil: photography remains visible as the background while
     a translucent, shadowed black layer separates it from page copy. */
  main.has-hero .content-col { isolation: isolate; }
  main.has-hero .content-col::before {
    content: "";
    position: absolute;
    inset: clamp(10px, 3vw, 18px);
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .56), rgba(0, 0, 0, .68));
    box-shadow: 0 0 30px 22px rgba(0, 0, 0, .62), inset 0 0 70px rgba(0, 0, 0, .2);
    pointer-events: none;
  }
  main.has-hero .content-col :is(h1, h2, h3, p, dt, dd, label, figcaption) { text-shadow: 0 2px 8px rgba(0, 0, 0, .96), 0 0 2px #000; }
  main.has-hero .content-col :is(.btn-gold, .btn-outline, input, select, textarea) { text-shadow: none; }
  .coda::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; background: rgba(0, 0, 0, .54); box-shadow: inset 0 0 54px rgba(0, 0, 0, .38); pointer-events: none; }
  .coda > :not(.kenburns) { z-index: 2; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  body:not(.fit-viewport) .hero-media { top: calc(clamp(88px, 22vw, 106px) + 14px); height: calc(100vh - clamp(88px, 22vw, 106px) - 28px); }
}
@media (min-width: 1100px) {
  .split { width: 100%; max-width: none; margin: 0; padding: 0; }
  .hero-media { width: 46%; height: 100vh; border-radius: 0; object-position: center top; }
  /* Desktop bottle photography uses the visible area below the fixed-height
     header. Its matching sticky top keeps the photo bottom on the viewport
     edge until the split boundary releases it. The homepage is excluded and
     retains its approved composition. */
  body:not(.fit-viewport) .hero-media { top: clamp(76px, 10.7vh, 120px); height: calc(100vh - clamp(76px, 10.7vh, 120px)); }
  .content-col { width: 54%; margin-left: 46%; }
}

/* Shared page scaffolding */
.page { padding: 44px 22px 56px; width: 100%; max-width: 720px; margin: 0 auto; text-align: center; }
@media (min-width: 1100px) { .page { padding: 56px 40px; } }
.page-wide { max-width: 860px; }
.page-title { font-size: clamp(2.3rem, 8.2vw, 3.9rem); overflow-wrap: break-word; color: var(--gold-bright); text-shadow: 0 0 26px rgba(201, 160, 76, .18); margin-bottom: .25em; }
@media (min-width: 1100px) { .page-title { font-size: clamp(2.6rem, 3.6vw, 4rem); } }
.title-giant { font-size: clamp(2.5rem, 9.5vw, 4.4rem); line-height: 1.1; }
@media (min-width: 1100px) { .title-giant { font-size: clamp(3rem, 4.6vw, 5.2rem); } }
.kicker { font-family: var(--heading); font-size: .8rem; letter-spacing: .3em; color: var(--gold); }
.lede { font-size: 1.45rem; color: var(--cream); line-height: 1.45; }
.star-divider { display: flex; align-items: center; gap: 16px; justify-content: center; color: var(--gold-top); margin: 14px auto 24px; max-width: 460px; font-size: 1.05rem; }
.star-divider::before, .star-divider::after { content: ""; flex: 1; border-top: 2px solid var(--gold); }
.gold-rule { width: 74px; border: 0; border-top: 2px solid var(--gold); margin: 20px auto; }
.btn-gold { display: inline-block; font-family: var(--body); font-weight: 700; letter-spacing: .12em; color: #1A1206; background: linear-gradient(180deg, #C68F3B 0%, #C18834 55%, #AE7A2B 100%); border: 1px solid rgba(230, 190, 110, .45); border-radius: 10px; padding: 16px 34px; font-size: 1.05rem; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 225, 160, .5), 0 0 22px rgba(201, 160, 76, .2); }
.btn-gold:visited { color: #1A1206; }
.btn-gold:hover, .btn-gold:focus-visible { filter: brightness(1.08); color: var(--btn-text); }
.btn-wide { padding: 18px 54px; font-size: 1.1rem; }
.btn-outline { display: inline-block; font-family: var(--heading); letter-spacing: .14em; color: var(--gold-bright); background: none; border: 1px solid var(--gold); border-radius: 8px; padding: 14px 28px; cursor: pointer; }
.cta-row { margin-top: 34px; }
.gold-panel { border: 1px solid rgba(201, 160, 76, .75); border-radius: 24px; padding: 30px 22px; margin: 26px 0; }
@media (min-width: 1100px) { .gold-panel { padding: 44px 48px; } }
.story-panel p { margin: .7em 0; }
.panel-rule { border-top: 1px solid var(--hairline); margin: 28px 0; }
.err { color: #E8886A; font-size: .95rem; margin: 6px 0 0; }
.small { font-size: .85rem; color: var(--dim); }

/* Desktop reading scale for every route except the completed home layout.
   Main copy never depends on the smaller navigation/footer type scale. */
@media (min-width: 1100px) {
  body:not(.fit-viewport) main { font-size: clamp(1.5rem, 1.5vw, 1.75rem); line-height: 1.65; }
  body:not(.fit-viewport) .page { max-width: 820px; }
  body:not(.fit-viewport) .page-wide { max-width: 960px; }
  body:not(.fit-viewport) .page-title { font-size: clamp(3.35rem, 4.15vw, 5rem); line-height: 1.08; letter-spacing: .045em; }
  body:not(.fit-viewport) .lede { font-size: clamp(2rem, 2.15vw, 2.4rem); line-height: 1.4; }
  body:not(.fit-viewport) .kicker { font-size: .9em; line-height: 1.5; }
  body:not(.fit-viewport) .small { font-size: .88em; line-height: 1.55; }
  body:not(.fit-viewport) .icon-col h3,
  body:not(.fit-viewport) .icon-row h2,
  body:not(.fit-viewport) .icon-row h3 { font-size: 1em; line-height: 1.35; }
  body:not(.fit-viewport) .icon-col p,
  body:not(.fit-viewport) .icon-row p { font-size: 1em; line-height: 1.6; }
  body:not(.fit-viewport) .pill-banner { font-size: .95em; line-height: 1.55; }
  body:not(.fit-viewport) .banner-box p { font-size: .9em; line-height: 1.65; }
  body:not(.fit-viewport) .banner-lead { font-size: 1.08em; }
  body:not(.fit-viewport) .stat h3,
  body:not(.fit-viewport) .record dt { font-size: .82em; line-height: 1.45; }
  body:not(.fit-viewport) .stat-fig { font-size: 1.05em; }
  body:not(.fit-viewport) .gallery-grid figcaption { font-size: .85em; line-height: 1.45; }
  body:not(.fit-viewport) .tagline-bar { font-size: .9em; line-height: 1.8; }
  body:not(.fit-viewport) .pro-line { font-size: clamp(2rem, 2.2vw, 2.6rem); line-height: 1.45; }
  body:not(.fit-viewport) .craft-sub { font-size: clamp(1.7rem, 1.8vw, 2rem); line-height: 1.45; }
  body:not(.fit-viewport) .act-lede { font-size: clamp(2rem, 2.5vw, 2.8rem); line-height: 1.3; }
  body:not(.fit-viewport) .coda-line { font-size: clamp(2rem, 2.25vw, 2.6rem); line-height: 1.45; }
  body:not(.fit-viewport) .verify-line { font-size: 1.25em; line-height: 1.5; }
  body:not(.fit-viewport) :is(.circle-form label, .verify label) { font-size: .82em; line-height: 1.45; }
  body:not(.fit-viewport) :is(.circle-form input:not([type="checkbox"]), .verify select, .verify input[type="text"], .verify input:not([type])) { font-size: 1em; }
  body:not(.fit-viewport) :is(.btn-gold, .btn-outline) { font-size: 1em; line-height: 1.3; }
}

/* Circled gold line-icons */
.ring { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border: 1px solid var(--gold); border-radius: 50%; flex: none; color: var(--gold-bright); }
.ring svg { display: block; }
.ring-text { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }

/* Icon columns (purpose / acquire panels) */
.icon-cols { display: grid; grid-template-columns: 1fr; gap: 30px 18px; text-align: center; }
@media (min-width: 560px) { .icon-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .icon-cols { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .icon-cols .icon-col + .icon-col { border-left: 1px solid var(--hairline); } }
.icon-col { padding: 0 14px; }
.icon-col .ring { margin: 0 auto 16px; }
.icon-col h3 { font-size: .88rem; letter-spacing: .16em; margin: 0 0 8px; }
.icon-col p { margin: 0; font-size: 1rem; color: var(--cream); line-height: 1.5; }
.icon-col .big-fig { font-size: 2.1rem; margin: 2px 0 8px; }
.icon-col .kicker { font-size: .72rem; margin: 0 0 8px; }

/* Icon rows (philosophy-style features) */
.icon-rows { max-width: 560px; margin: 26px auto 0; text-align: left; }
.icon-row { display: flex; align-items: center; gap: 24px; padding: 24px 0; }
.icon-row + .icon-row { border-top: 1px solid var(--hairline); }
.icon-row h2, .icon-row h3 { font-size: 1.15rem; letter-spacing: .16em; margin: 0 0 4px; }
.icon-row p { margin: 0; color: var(--cream); }

/* Tagline bar (full-width, above footer) */
.tagline-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 22px 20px; border-top: 1px solid var(--hairline); font-family: var(--heading); font-size: .74rem; letter-spacing: .18em; color: var(--gold-bright); text-align: center; line-height: 2; }
@media (min-width: 768px) { .tagline-bar { font-size: .82rem; letter-spacing: .22em; } }
.tagline-bar::before, .tagline-bar::after { content: ""; flex: 1; max-width: 130px; border-top: 1px solid var(--hairline); }
.tag-star { color: var(--gold-top); letter-spacing: 0; }
.tag-sep { color: var(--gold); padding: 0 8px; }

/* Banner box (flag + creed, craft coda / bourbon mockup) */
.banner-box { display: flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid rgba(201, 160, 76, .75); border-radius: 14px; padding: 20px 26px; margin: 34px 0 26px; text-align: left; }
.banner-box .ring { border-color: transparent; width: 48px; height: 48px; }
.banner-box p { margin: 0; font-family: var(--heading); letter-spacing: .12em; font-size: .82rem; color: var(--cream); line-height: 1.9; }
.banner-lead { color: var(--gold-bright); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; }

/* Reveal animation primitive (used site-wide; The Craft extends it) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease-out, transform .8s ease-out; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Verify page */
.verify { width: 100%; min-width: 0; padding: 6vh 22px 56px; max-width: 520px; margin: 0 auto; text-align: center; }
.verify-crest { margin: 0 auto 18px; }
.verify-line { font-size: 1.2rem; font-style: italic; }
.verify form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.verify .check { display: flex; flex-direction: row; gap: 10px; align-items: center; font-size: 1.05rem; }
.verify-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.verify label { display: flex; flex-direction: column; gap: 6px; font-family: var(--heading); font-size: .75rem; letter-spacing: .2em; color: var(--gold); }
.verify select, .verify input[type="text"], .verify input:not([type]) { background: #0a0a08; border: 1px solid var(--hairline); border-radius: 8px; color: var(--cream); padding: 12px; font-family: var(--body); font-size: 1rem; }
.verify .gold-panel { margin: 22px 0; padding: 26px 24px; }
.verify form { margin-top: 0; }
.circle .gold-panel { text-align: left; padding: 30px 26px; }
@media (min-width: 1100px) { .circle .gold-panel { padding: 38px 44px; } }
.decline { color: var(--dim); text-decoration: underline; }

/* Cookie banner */
#cookie-note { position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 60; background: #0a0a08; border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: .92rem; }
#cookie-note[hidden] { display: none; }
#cookie-note p { margin: 0; }
@media (min-width: 768px) { #cookie-note { left: auto; max-width: 480px; } }

/* Delayed newsletter invitation */
.newsletter-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(16px, 4vw, 42px); background: rgba(0, 0, 0, .8); backdrop-filter: blur(5px); }
.newsletter-modal[hidden] { display: none; }
body.newsletter-open { overflow: hidden; }
.newsletter-card { position: relative; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid rgba(232, 176, 79, .78); border-radius: 22px; padding: clamp(34px, 6vw, 58px); background: linear-gradient(145deg, rgba(10, 8, 3, .97), rgba(0, 0, 0, .96)); box-shadow: 0 22px 80px rgba(0, 0, 0, .9), 0 0 34px rgba(201, 160, 76, .18); text-align: center; }
.newsletter-card h2 { max-width: 12ch; margin: 0 auto .35em; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12; }
.newsletter-card .kicker { margin: 0 32px 16px; }
.newsletter-close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(0, 0, 0, .45); color: var(--gold-bright); font-size: 1.85rem; line-height: 1; cursor: pointer; }
.newsletter-close:hover, .newsletter-close:focus-visible { border-color: var(--gold-bright); color: var(--cream); }
.newsletter-copy { max-width: 38ch; margin: 0 auto 24px; font-size: 1.25rem; line-height: 1.5; }
.newsletter-form { text-align: left; }
.newsletter-form > label { display: block; margin-bottom: 8px; font-family: var(--heading); color: var(--gold); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.newsletter-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.newsletter-fields input { min-width: 0; border: 1px solid var(--hairline); border-radius: 9px; padding: 14px 16px; background: #080806; color: var(--cream); font: 1.1rem var(--body); }
.newsletter-fields input:focus { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.newsletter-fields .btn-gold { padding: 14px 22px; }
.newsletter-status { min-height: 1.6em; margin: 10px 0 0; color: var(--gold-bright); font-weight: 600; text-align: center; }
.newsletter-status.is-error { color: #E8886A; }
.newsletter-privacy { margin: 16px auto 0; max-width: 48ch; color: var(--dim); font-size: .82rem; line-height: 1.5; }
@media (max-width: 560px) {
  .newsletter-card { padding: 42px 22px 30px; }
  .newsletter-card h2 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .newsletter-fields { grid-template-columns: 1fr; }
  .newsletter-fields .btn-gold { width: 100%; }
}

/* 404 */
.notfound { padding-top: 12vh; padding-bottom: 12vh; text-align: center; }

/* ---- Home ---- */
.home-word .lede { margin: .4em auto; max-width: 26ch; }
.home-word > p:not(.lede):not(.cta-row) { max-width: 44ch; margin-left: auto; margin-right: auto; }
.principles { padding-top: 0; }
.principles .kicker { font-size: .85rem; }

/* ---- Release / Acquire figures ---- */
.big-fig { font-family: var(--heading); font-weight: 700; font-size: clamp(1.9rem, 6.5vw, 2.7rem); color: var(--cream); margin: 4px 0 14px; letter-spacing: .04em; }
.big-date { font-family: var(--heading); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--cream); margin: 4px 0 12px; }
.release-duo { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin: 8px 0 4px; }
@media (min-width: 900px) { .release-duo { grid-template-columns: 6fr 5fr; gap: 40px; } }
.release-card { margin: 0 auto; max-width: 440px; width: 100%; padding: 34px 24px; }
.release-card .big-fig { margin-bottom: 20px; font-size: clamp(1.9rem, 5.4vw, 2.4rem); }
@media (min-width: 1100px) { .release-card .big-fig, .release-card .big-date { white-space: nowrap; } }
.kicker-rule { display: flex; align-items: center; justify-content: center; gap: 12px; }
.kicker-rule::before, .kicker-rule::after { content: ""; width: 34px; border-top: 1px solid var(--hairline); }
.release-feats { margin: 0; max-width: none; }
.release-feats .icon-row { padding: 18px 0; }
.pill-banner { display: inline-block; border: 1px solid rgba(201, 160, 76, .7); border-radius: 999px; padding: 14px 30px; margin: 26px auto 8px; font-size: 1.05rem; color: var(--cream); }

/* ---- Acquire ---- */
.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: 1rem; padding: 14px 26px; width: 100%; max-width: 640px; }
@media (min-width: 768px) { .btn-cta { font-size: 1.12rem; } }
.cta-cart { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #221803; flex: none; }
.age-note { display: inline-flex; align-items: center; gap: 9px; font-family: var(--heading); letter-spacing: .2em; font-size: .8rem; color: var(--cream); }
.lock-inline { flex: none; }

/* ---- Stat strip (craft Act I / bourbon mockup) ---- */
.stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 10px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 30px 0; margin: 34px 0; text-align: center; }
@media (min-width: 900px) { .stat-strip { grid-template-columns: repeat(5, 1fr); } .stat + .stat { border-left: 1px solid var(--hairline); } }
.stat { padding: 0 10px; }
.stat .ring { width: 54px; height: 54px; margin: 0 auto 14px; }
.stat h3 { font-size: .78rem; letter-spacing: .18em; margin: 0 0 6px; color: var(--gold-bright); }
.stat-fig { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--cream); margin: 0 0 6px; }
.stat .small { margin: 0; line-height: 1.5; }

/* ---- Proof / Authenticity / Legal ---- */
.proof-fig { font-family: var(--heading); font-weight: 700; font-size: clamp(6rem, 30vw, 11rem); line-height: 1; color: var(--gold-bright); margin: 10px 0; text-shadow: 0 0 60px rgba(201, 160, 76, .3); }
.record { display: grid; grid-template-columns: 1fr; gap: 4px; text-align: left; }
.record dt { font-family: var(--heading); font-size: .78rem; letter-spacing: .2em; color: var(--gold); align-self: center; }
.record dd { margin: 0 0 16px; }
.record dd:last-child { margin-bottom: 0; }
@media (min-width: 560px) {
  .record { grid-template-columns: auto 1fr; gap: 10px 22px; }
  .record dd { margin: 0; }
}
.page-icon { display: flex; justify-content: center; margin: 0 0 20px; }
.legal { text-align: left; }
.legal h3 { margin-top: 1.6em; }
.legal .page-title, .legal .star-divider { text-align: center; }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
.gallery-grid figure { isolation: isolate; display: grid; margin: 0; }
.gallery-grid img, .gallery-grid figcaption { grid-area: 1 / 1; }
.gallery-grid img { z-index: 0; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--hairline); object-fit: contain; }
.gallery-grid figcaption { z-index: 1; align-self: end; font-family: var(--heading); font-size: .7rem; letter-spacing: .2em; color: var(--cream); padding: 18px; text-align: left; text-shadow: 0 2px 8px #000, 0 0 3px #000; }

/* ---- The Craft ---- */
.prologue { min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: 24px; }
.pro-line { width: 100%; min-width: 0; max-width: 100%; font-size: clamp(1.3rem, 4.5vw, 2rem); font-style: italic; color: var(--cream); margin: 0; }
.prologue.play .pro-line, .prologue.play .pro-cue { opacity: 0; animation: pro-rise 1.1s ease-out forwards; }
.prologue.static .pro-line, .prologue.static .pro-cue { opacity: 1; }
@keyframes pro-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pro-cue { color: var(--gold); font-size: 1.4rem; }
.prologue.play .pro-cue { animation: pro-rise 1.1s ease-out forwards, cue-pulse 2.4s ease-in-out 3s infinite; }
@keyframes cue-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.craft-title { text-align: center; padding: 20px 22px 10px; }
.craft-sub { font-style: italic; font-size: 1.25rem; color: var(--dim); }
.craft-body { position: relative; max-width: 640px; margin: 0 auto; padding: 10px 26px 70px; }
.thread { position: absolute; top: 0; bottom: 0; left: 4px; width: 24px; height: 100%; }
@media (min-width: 1360px) { .thread { left: -18px; } }
.act { position: relative; padding: 13vh 0; text-align: left; }
.act-numeral { position: absolute; top: 8vh; right: -6px; font-family: var(--heading); font-weight: 700; font-size: clamp(7rem, 24vw, 12rem); line-height: 1; color: rgba(201, 160, 76, .12); pointer-events: none; user-select: none; }
.act-head { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }
.act-head .ring { width: 58px; height: 58px; }
.act-head .kicker { margin: 0 0 6px; }
.act-lede { font-size: clamp(1.6rem, 5.5vw, 2.3rem); color: var(--gold-bright); font-family: var(--heading); margin: 0; }
.act p { position: relative; z-index: 1; }
.count { font-family: var(--heading); color: var(--gold-bright); font-weight: 700; }
.coda { position: relative; isolation: isolate; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-top: 6vh; }
.kenburns { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: visible; border: 0; border-radius: 0; margin: 0; }
.kenburns img { width: 100%; height: 100%; object-fit: contain; animation: none; }
.coda > :not(.kenburns) { position: relative; z-index: 1; }
.coda-line { font-family: var(--heading); font-size: clamp(1.3rem, 5vw, 1.9rem); color: var(--cream); letter-spacing: .06em; }
.coda-foot { position: relative; z-index: 1; }
.coda-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .prologue.play .pro-line, .prologue.play .pro-cue { opacity: 1; animation: none; }
  .kenburns img { animation: none; }
}

/* ---- Founder's Circle ---- */
.circle-form { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.circle-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--heading); font-size: .75rem; letter-spacing: .2em; color: var(--gold); }
.circle-form input:not([type="checkbox"]) { background: #0a0a08; border: 1px solid var(--hairline); border-radius: 8px; color: var(--cream); padding: 13px; font-family: var(--body); font-size: 1rem; }
.circle-form .check { flex-direction: row; align-items: center; gap: 10px; font-family: var(--body); font-size: 1rem; letter-spacing: 0; color: var(--cream); }
.hp { position: absolute; left: -9999px; }

/* ---- Trio grid (admin stats) ---- */
.trio { display: grid; gap: 26px; grid-template-columns: 1fr; margin: 26px 0; }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.trio h2, .trio h3 { font-size: 1rem; letter-spacing: .22em; }
.trio p { margin: 0; color: var(--dim); }

/* ---- Admin ---- */
.admin table { width: 100%; border-collapse: collapse; margin: 10px 0 26px; }
.admin td { border-bottom: 1px solid var(--hairline); padding: 6px 8px; font-size: .95rem; }
.admin form { margin: 6px; }

/* ============ Private enterprise admin console ============ */
.admin-shell {
  --admin-bg: #080b10;
  --admin-sidebar: #0b0f15;
  --admin-surface: #10151d;
  --admin-surface-2: #151b24;
  --admin-border: #252e3a;
  --admin-border-gold: rgba(201, 160, 76, .35);
  --admin-text: #f3f1eb;
  --admin-muted: #94a0ae;
  --admin-faint: #647080;
  --admin-gold: #d0a653;
  --admin-gold-bright: #efc56e;
  --admin-green: #53c893;
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.admin-shell *, .admin-shell *::before, .admin-shell *::after { box-sizing: border-box; }
.admin-shell button, .admin-shell input, .admin-shell select { font: inherit; }
.admin-shell a { color: inherit; }
.admin-shell .skip { z-index: 100; }
.admin-root { min-height: 100vh; }
.admin-console { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; background: var(--admin-bg); }
.admin-sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  border-right: 1px solid var(--admin-border); background: var(--admin-sidebar); padding: 24px 18px 18px;
}
.admin-brand { display: flex; align-items: center; gap: 13px; padding: 2px 7px 20px; text-decoration: none; border-bottom: 1px solid var(--admin-border); }
.admin-brand img { width: 48px; height: 48px; object-fit: contain; }
.admin-brand span, .admin-login-brand span { display: grid; gap: 1px; }
.admin-brand strong, .admin-login-brand strong { color: var(--admin-gold-bright); font-family: var(--heading); font-size: 1.08rem; letter-spacing: .08em; white-space: nowrap; }
.admin-brand small, .admin-login-brand small { color: var(--admin-muted); font-size: .61rem; font-weight: 600; letter-spacing: .18em; }
.admin-environment { display: flex; align-items: center; gap: 8px; margin: 18px 7px 13px; color: var(--admin-muted); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.admin-environment span, .admin-statusline i { width: 7px; height: 7px; border-radius: 50%; background: var(--admin-green); box-shadow: 0 0 0 4px rgba(83, 200, 147, .1); }
.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav-label { margin: 21px 12px 7px; color: var(--admin-faint); font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.admin-nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: #b4bec9; font-size: .83rem; font-weight: 500; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.admin-nav a span { width: 19px; color: #6f7b89; font-size: 1.05rem; text-align: center; }
.admin-nav a:hover, .admin-nav a:focus-visible { color: var(--admin-text); border-color: var(--admin-border); background: var(--admin-surface); }
.admin-nav a.is-active { color: var(--admin-gold-bright); border-color: var(--admin-border-gold); background: linear-gradient(90deg, rgba(201, 160, 76, .14), rgba(201, 160, 76, .03)); }
.admin-nav a.is-active span { color: var(--admin-gold); }
.admin-user-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 9px; margin-top: auto; padding: 13px 9px 0; border-top: 1px solid var(--admin-border); }
.admin-user-card > span:nth-child(2) { display: grid; min-width: 0; }
.admin-user-card strong { overflow: hidden; color: var(--admin-text); font-size: .78rem; text-overflow: ellipsis; }
.admin-user-card small { color: var(--admin-faint); font-size: .67rem; }
.admin-avatar { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 1px solid var(--admin-border-gold); border-radius: 50%; background: #19170f; color: var(--admin-gold-bright); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.admin-user-card form { margin: 0; }
.admin-user-card button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--admin-muted); cursor: pointer; }
.admin-user-card button:hover, .admin-user-card button:focus-visible { background: var(--admin-surface-2); color: var(--admin-gold-bright); }
.admin-workspace { min-width: 0; padding: 0 clamp(22px, 3.1vw, 54px) 34px; outline: none; }
.admin-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 37px 0 27px; border-bottom: 1px solid var(--admin-border); }
.admin-eyebrow, .admin-section-number, .admin-panel-kicker { margin: 0 0 7px; color: var(--admin-gold); font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.admin-topbar h1 { margin: 0; color: var(--admin-text); font-family: var(--heading); font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: .02em; line-height: 1.12; }
.admin-topbar > div > p:last-child { margin: 8px 0 0; color: var(--admin-muted); font-size: .86rem; }
.admin-range { min-width: 244px; margin: 0; }
.admin-range label, .admin-export-form label, .admin-login-card label { display: block; margin: 0 0 7px; color: var(--admin-muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.admin-range > div { display: grid; grid-template-columns: 1fr auto; }
.admin-range select, .admin-range button, .admin-export-form select { height: 41px; border: 1px solid var(--admin-border); background: var(--admin-surface); color: var(--admin-text); }
.admin-range select { min-width: 158px; padding: 0 34px 0 12px; border-radius: 6px 0 0 6px; }
.admin-range button { padding: 0 15px; border-left: 0; border-radius: 0 6px 6px 0; color: var(--admin-gold-bright); cursor: pointer; }
.admin-range button:hover, .admin-range button:focus-visible { background: var(--admin-surface-2); }
.admin-statusline { display: flex; align-items: center; gap: 18px; min-height: 44px; border-bottom: 1px solid var(--admin-border); color: var(--admin-faint); font-size: .7rem; }
.admin-statusline span { display: flex; align-items: center; gap: 8px; }
.admin-statusline span:not(:last-child)::after { content: ""; width: 1px; height: 12px; margin-left: 10px; background: var(--admin-border); }
.admin-statusline span:last-child { margin-left: auto; }
.admin-section { padding: 42px 0 10px; scroll-margin-top: 10px; }
.admin-section + .admin-section { margin-top: 20px; border-top: 1px solid var(--admin-border); }
.admin-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.admin-section-head h2 { margin: 0; color: var(--admin-text); font-family: var(--heading); font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 400; letter-spacing: .02em; }
.admin-section-head > p { max-width: 510px; margin: 0; color: var(--admin-muted); font-size: .78rem; text-align: right; }
.admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.admin-metric { min-width: 0; padding: 18px; border: 1px solid var(--admin-border); border-radius: 8px; background: linear-gradient(145deg, var(--admin-surface), #0c1118); }
.admin-metric > p { margin: 0; color: var(--admin-muted); font-size: .72rem; font-weight: 600; }
.admin-metric > strong { display: block; margin: 8px 0 3px; overflow: hidden; color: var(--admin-text); font-family: var(--heading); font-size: clamp(1.55rem, 2.6vw, 2.25rem); font-weight: 400; line-height: 1; text-overflow: ellipsis; }
.admin-metric > small { display: block; min-height: 32px; color: var(--admin-faint); font-size: .66rem; }
.metric-trend { display: inline-block; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--admin-border); color: var(--admin-muted); font-size: .64rem; width: 100%; }
.metric-trend.up { color: var(--admin-green); }
.metric-trend.down { color: #df7d76; }
.admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 12px; margin-top: 12px; }
.admin-panel, .admin-table-card, .admin-export-form, .admin-export-notes, .admin-danger { border: 1px solid var(--admin-border); border-radius: 8px; background: var(--admin-surface); }
.admin-panel { min-width: 0; padding: 20px; }
.admin-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--admin-border); }
.admin-panel h3, .admin-export-notes h3, .admin-danger h3, .admin-security-card h3 { margin: 0; color: var(--admin-text); font-size: .93rem; font-weight: 600; }
.admin-panel header > span, .admin-panel header > a { color: var(--admin-faint); font-size: .66rem; text-decoration: none; }
.admin-chart { display: grid; grid-template-columns: repeat(12, minmax(18px, 1fr)); align-items: end; gap: clamp(5px, 1vw, 12px); height: 218px; padding-top: 25px; }
.admin-chart-column { display: grid; grid-template-rows: 16px 140px 26px; align-items: end; height: 100%; min-width: 0; text-align: center; }
.admin-chart-column > i { display: block; align-self: end; width: 70%; min-width: 5px; max-width: 24px; margin: 0 auto; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--admin-gold-bright), #88692f); box-shadow: 0 0 18px rgba(201, 160, 76, .09); }
.admin-chart-count { color: var(--admin-muted); font-size: .62rem; }
.admin-chart-column small { overflow: hidden; padding-top: 6px; color: var(--admin-faint); font-size: .57rem; text-overflow: clip; }
.admin-chart-column i.h-10 { height: 10%; } .admin-chart-column i.h-20 { height: 20%; } .admin-chart-column i.h-30 { height: 30%; } .admin-chart-column i.h-40 { height: 40%; } .admin-chart-column i.h-50 { height: 50%; } .admin-chart-column i.h-60 { height: 60%; } .admin-chart-column i.h-70 { height: 70%; } .admin-chart-column i.h-80 { height: 80%; } .admin-chart-column i.h-90 { height: 90%; } .admin-chart-column i.h-100 { height: 100%; }
.admin-ranking { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.admin-ranking li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 41px; border-bottom: 1px solid rgba(37, 46, 58, .72); }
.admin-ranking li:last-child { border-bottom: 0; }
.admin-ranking li > span { display: grid; min-width: 0; }
.admin-ranking strong { overflow: hidden; color: #d9dde2; font-size: .72rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.admin-ranking small { color: var(--admin-faint); font-size: .62rem; }
.admin-ranking em { color: var(--admin-gold-bright); font-size: .71rem; font-style: normal; font-variant-numeric: tabular-nums; }
.admin-ranking i { height: 2px; margin-top: 6px; overflow: hidden; border-radius: 1px; background: #222b36; }
.admin-ranking b { display: block; height: 100%; background: var(--admin-gold); }
.admin-ranking b.w-0 { width: 0; } .admin-ranking b.w-10 { width: 10%; } .admin-ranking b.w-20 { width: 20%; } .admin-ranking b.w-30 { width: 30%; } .admin-ranking b.w-40 { width: 40%; } .admin-ranking b.w-50 { width: 50%; } .admin-ranking b.w-60 { width: 60%; } .admin-ranking b.w-70 { width: 70%; } .admin-ranking b.w-80 { width: 80%; } .admin-ranking b.w-90 { width: 90%; } .admin-ranking b.w-100 { width: 100%; }
.admin-empty { margin: 28px 0; color: var(--admin-faint); font-size: .78rem; }
.admin-table-card { overflow: hidden; }
.admin-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 64px; padding: 13px 17px; border-bottom: 1px solid var(--admin-border); }
.admin-table-toolbar > div { display: grid; }
.admin-table-toolbar strong { font-size: .82rem; }
.admin-table-toolbar span { color: var(--admin-faint); font-size: .64rem; }
.admin-small-button { padding: 7px 11px; border: 1px solid var(--admin-border-gold); border-radius: 5px; color: var(--admin-gold-bright); font-size: .65rem; text-decoration: none; }
.admin-small-button:hover, .admin-small-button:focus-visible { background: rgba(201, 160, 76, .1); }
.admin-table-scroll { max-width: 100%; overflow-x: auto; }
.admin-table-card table { width: 100%; min-width: 1050px; border-collapse: collapse; font-size: .68rem; }
.admin-table-card caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.admin-table-card th { padding: 10px 13px; border-bottom: 1px solid var(--admin-border); background: #0d1218; color: var(--admin-faint); font-size: .61rem; font-weight: 700; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table-card td { max-width: 230px; padding: 12px 13px; border-bottom: 1px solid rgba(37, 46, 58, .65); color: #c9d0d8; vertical-align: top; }
.admin-table-card tbody tr:hover { background: rgba(255, 255, 255, .015); }
.admin-table-card td strong, .admin-table-card td small { display: block; overflow: hidden; text-overflow: ellipsis; }
.admin-table-card td strong { color: var(--admin-text); font-weight: 500; white-space: nowrap; }
.admin-table-card td small { max-width: 240px; margin-top: 3px; color: var(--admin-faint); font-size: .61rem; white-space: nowrap; }
.visitor-id { color: var(--admin-gold-bright) !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.admin-badge { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--admin-border); border-radius: 999px; color: var(--admin-muted); font-size: .57rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.admin-badge.success { border-color: rgba(83, 200, 147, .35); background: rgba(83, 200, 147, .08); color: var(--admin-green); }
.admin-empty-cell { padding: 35px !important; color: var(--admin-faint) !important; text-align: center; }
.admin-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-two-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.admin-export-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 12px; }
.admin-export-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; padding: 24px; }
.admin-export-form select { width: 100%; padding: 0 12px; border-radius: 6px; }
.admin-export-summary { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 15px; border: 1px solid var(--admin-border); border-radius: 6px; background: #0c1117; }
.admin-export-summary span, .admin-export-summary small { color: var(--admin-faint); font-size: .66rem; }
.admin-export-summary strong { color: var(--admin-gold-bright); font-size: .75rem; }
.admin-export-summary small { grid-column: 1 / -1; }
.admin-export-form > button, .admin-login-card form > button { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 17px; border: 1px solid #d3aa59; border-radius: 6px; background: linear-gradient(135deg, #d1a752, #a77e32); color: #12100a; font-size: .74rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.admin-export-form > button:hover, .admin-export-form > button:focus-visible, .admin-login-card form > button:hover, .admin-login-card form > button:focus-visible { filter: brightness(1.12); }
.admin-export-notes { padding: 24px; }
.admin-export-notes ul { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.admin-export-notes li { display: grid; padding: 9px 0; border-bottom: 1px solid var(--admin-border); }
.admin-export-notes li:last-child { border-bottom: 0; }
.admin-export-notes strong { color: var(--admin-gold-bright); font-size: .7rem; }
.admin-export-notes span { color: var(--admin-muted); font-size: .64rem; }
.admin-security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-security-card { display: grid; grid-template-columns: 37px 1fr; gap: 13px; }
.admin-security-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--admin-border-gold); border-radius: 50%; color: var(--admin-gold-bright); }
.admin-security-card p:last-child { margin: 8px 0 0; color: var(--admin-muted); font-size: .68rem; }
.admin-security-card p strong { color: var(--admin-text); }
.admin-danger { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 12px; padding: 22px; border-color: rgba(186, 74, 68, .35); background: linear-gradient(100deg, rgba(91, 31, 29, .15), var(--admin-surface)); }
.admin-danger > div > p:last-child { margin: 6px 0 0; color: var(--admin-muted); font-size: .68rem; }
.admin-danger-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.admin-danger-actions form { margin: 0; }
.admin-danger-actions button { min-height: 34px; padding: 0 11px; border: 1px solid rgba(205, 103, 96, .45); border-radius: 5px; background: transparent; color: #e49791; font-size: .63rem; cursor: pointer; }
.admin-danger-actions button:hover, .admin-danger-actions button:focus-visible { background: rgba(205, 103, 96, .11); color: #ffc1bc; }
.admin-console-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--admin-border); color: var(--admin-faint); font-size: .61rem; }

/* Dedicated admin login */
.admin-login-page { display: flex; flex-direction: column; width: min(1180px, calc(100% - 52px)); min-height: 100vh; margin: 0 auto; }
.admin-login-brand { display: flex; align-items: center; gap: 16px; height: 118px; border-bottom: 1px solid var(--admin-border); }
.admin-login-brand img { width: 58px; height: 58px; object-fit: contain; }
.admin-login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, 440px); align-items: center; gap: clamp(50px, 10vw, 150px); flex: 1; padding: 55px 0; }
.admin-login-intro h1 { margin: 12px 0 23px; color: var(--admin-text); font-family: var(--heading); font-size: clamp(2.5rem, 5.2vw, 4.8rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.admin-login-intro > p:not(.admin-eyebrow) { max-width: 600px; margin: 0; color: var(--admin-muted); font-size: 1rem; line-height: 1.7; }
.admin-login-intro ul { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; color: #c6cdd5; font-size: .75rem; list-style: none; }
.admin-login-intro li { display: flex; align-items: center; gap: 11px; }
.admin-login-intro li span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--admin-border-gold); border-radius: 50%; color: var(--admin-gold-bright); font-size: .61rem; }
.admin-login-card { overflow: hidden; border: 1px solid var(--admin-border); border-top-color: var(--admin-border-gold); border-radius: 10px; background: linear-gradient(145deg, #131922, #0e131a); box-shadow: 0 28px 70px rgba(0, 0, 0, .35); }
.admin-login-card > header { padding: 29px 30px 21px; border-bottom: 1px solid var(--admin-border); }
.admin-login-card h2 { margin: 0; color: var(--admin-text); font-family: var(--heading); font-size: 1.3rem; font-weight: 400; }
.admin-login-card header > p:last-child { margin: 8px 0 0; color: var(--admin-muted); font-size: .7rem; }
.admin-login-error { display: flex; gap: 9px; margin: 18px 30px -5px; padding: 10px; border: 1px solid rgba(205, 103, 96, .4); border-radius: 5px; background: rgba(205, 103, 96, .08); color: #efaaa5; font-size: .69rem; }
.admin-login-error span { font-weight: 800; }
.admin-login-card form { display: grid; margin: 0; padding: 25px 30px 29px; }
.admin-login-input { display: grid; grid-template-columns: 37px 1fr; align-items: center; height: 45px; margin-bottom: 18px; border: 1px solid var(--admin-border); border-radius: 6px; background: #0b1016; }
.admin-login-input:focus-within { border-color: var(--admin-gold); box-shadow: 0 0 0 3px rgba(201, 160, 76, .1); }
.admin-login-input span { color: var(--admin-faint); text-align: center; }
.admin-login-input input { width: 100%; height: 100%; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: var(--admin-text); font-size: .8rem; }
.admin-login-card form > button { margin-top: 5px; }
.admin-login-card > footer { display: flex; align-items: center; gap: 12px; padding: 15px 30px; border-top: 1px solid var(--admin-border); background: rgba(0, 0, 0, .12); color: var(--admin-gold); }
.admin-login-card > footer p { display: grid; margin: 0; }
.admin-login-card > footer strong { color: #c4cbd3; font-size: .66rem; }
.admin-login-card > footer small { color: var(--admin-faint); font-size: .59rem; }
.admin-login-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 25px; border-top: 1px solid var(--admin-border); color: var(--admin-faint); font-size: .61rem; text-transform: uppercase; }
.admin-shell :focus-visible { outline: 2px solid var(--admin-gold-bright); outline-offset: 2px; }

@media (max-width: 1180px) {
  .admin-console { grid-template-columns: 220px minmax(0, 1fr); }
  .admin-sidebar { padding-inline: 12px; }
  .admin-metrics { grid-template-columns: repeat(3, 1fr); }
  .admin-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-security-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .admin-console { display: block; }
  .admin-sidebar { position: relative; z-index: 2; width: 100%; height: auto; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--admin-border); }
  .admin-brand { padding: 0 0 11px; }
  .admin-brand img { width: 38px; height: 38px; }
  .admin-environment, .admin-nav-label { display: none; }
  .admin-nav { flex-direction: row; margin: 9px -4px -1px; padding: 0 4px 4px; overflow-x: auto; }
  .admin-nav a { flex: 0 0 auto; min-height: 35px; padding: 6px 9px; font-size: .68rem; }
  .admin-nav a span { width: auto; }
  .admin-user-card { position: absolute; top: 15px; right: 16px; width: auto; margin: 0; padding: 0; border: 0; }
  .admin-user-card > span:nth-child(2) { display: none; }
  .admin-workspace { padding-inline: 18px; }
  .admin-topbar { align-items: flex-start; padding-top: 26px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-overview-grid, .admin-export-layout { grid-template-columns: 1fr; }
  .admin-login-page { width: min(680px, calc(100% - 36px)); }
  .admin-login-grid { grid-template-columns: 1fr; gap: 38px; padding: 38px 0; }
  .admin-login-intro h1 { font-size: clamp(2.2rem, 9vw, 4rem); }
}
@media (max-width: 560px) {
  .admin-workspace { padding-inline: 13px; }
  .admin-topbar, .admin-section-head, .admin-danger { align-items: stretch; flex-direction: column; }
  .admin-topbar { gap: 20px; }
  .admin-range { width: 100%; min-width: 0; }
  .admin-statusline { flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; }
  .admin-statusline span:last-child { width: 100%; margin: 0; }
  .admin-statusline span::after { display: none; }
  .admin-section { padding-top: 32px; }
  .admin-section-head { gap: 9px; }
  .admin-section-head > p { text-align: left; }
  .admin-metrics, .admin-report-grid, .admin-security-grid { grid-template-columns: 1fr; }
  .admin-metric > small { min-height: 0; }
  .admin-chart { gap: 4px; height: 185px; }
  .admin-chart-column { grid-template-rows: 16px 112px 25px; }
  .admin-chart-column small { font-size: .48rem; transform: rotate(-40deg); transform-origin: top center; white-space: nowrap; }
  .admin-export-form { grid-template-columns: 1fr; padding: 18px; }
  .admin-export-summary, .admin-export-form > button { grid-column: auto; }
  .admin-danger-actions { justify-content: flex-start; }
  .admin-console-footer, .admin-login-footer { flex-direction: column; gap: 5px; }
  .admin-login-page { width: min(100% - 26px, 480px); }
  .admin-login-brand { height: 86px; }
  .admin-login-brand img { width: 48px; height: 48px; }
  .admin-login-grid { padding-top: 30px; }
  .admin-login-intro > p:not(.admin-eyebrow) { font-size: .87rem; }
  .admin-login-intro ul { margin-top: 24px; }
  .admin-login-card > header, .admin-login-card form { padding-inline: 20px; }
  .admin-login-card > footer { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-shell * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---- Shared reference chrome + single-viewport home ----
   At full desktop width every route inherits the approved homepage brand,
   navigation, and footer geometry. The remaining fit-viewport rules still
   belong only to the homepage hero. Dimensions use both vw and vh so the
   home composition scales as one unit on shorter 16:9/16:10 screens. */
@media (min-width: 1180px) {
  body {
    --home-right-pad: min(5vw, 6.25vh);
    --home-cta-width: min(37.8vw, 47.3vh);
    --home-main-height: calc(100vh - clamp(76px, 10.7vh, 120px) - clamp(46px, 6.3vh, 71px));
    --home-image-width: min(46vw, calc(var(--home-main-height) * .66558));
    --home-stage-shift-x: calc(2vw + ((var(--home-image-width) + var(--home-right-pad) - var(--home-cta-width)) / 4));
    --home-title-line-width: calc(min(5.45vw, 6.82vh) * 8.108);
    --home-copy-center: calc(var(--home-stage-shift-x) + 73vw - (var(--home-right-pad) / 2));
    --home-title-left: calc(var(--home-copy-center) - (var(--home-title-line-width) / 2));
    --home-nav-natural-width: calc((clamp(11px, .92vw, 16px) * 43.45) + (clamp(12px, 1.05vw, 20px) * 6));
    --home-nav-home-left: calc(65vw - (var(--home-nav-natural-width) / 2));
  }
  body.fit-viewport {
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    padding: 0;
  }
  body.fit-viewport .frame { width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; border-radius: 0; background: var(--bg); }
  body.fit-viewport main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .brand { left: calc(23% + var(--home-stage-shift-x)); }
  /* Match the homepage bottle axis on every other desktop route without
     inheriting the homepage's approved zoom or changing the source crop. */
  body:not(.fit-viewport) .hero-media { transform: translateX(calc(var(--home-stage-shift-x) + 5%)); }
  /* Purpose-only expansion: approach the bottle/stone on the left and the
     site edge on the right so its long copy wraps into fewer lines. */
  body:not(.fit-viewport) .purpose-page { max-width: none; padding-right: clamp(16px, 1.25vw, 24px); padding-bottom: clamp(10px, .9vw, 14px); padding-left: clamp(4px, .45vw, 8px); }
  body:not(.fit-viewport) .purpose-cta { margin-bottom: 0; }
  /* Purpose-only vertical placement. The negative split margin removes the
     same inch from document flow, carrying the tagline and footer upward with
     the translated content instead of leaving an empty scroll region. */
  main.purpose-main .hero-media { transform: translate(calc(var(--home-stage-shift-x) + 5%), -.5in); }
  main.purpose-main .content-col { transform: translateY(-1in); }
  main.purpose-main .split { margin-bottom: -1in; }
  main.purpose-main { position: relative; isolation: isolate; }
  main.purpose-main .hero-col, main.purpose-main .hero-media { z-index: 0; }
  main.purpose-main .content-col, main.purpose-main .tagline-bar { position: relative; z-index: 2; }
  main.purpose-main + .site-footer { position: relative; z-index: 2; background: var(--bg); }
  .purpose-header { z-index: 3; background: var(--bg); }

  /* Founder's Release-only horizontal placement: move the complete bottle
     three percent left and bring the complete reading column 1.5in toward it. */
  main.release-main .hero-media { transform: translateX(calc(var(--home-stage-shift-x) + 3.5%)); }
  main.release-main .content-col { transform: translateX(-1.5in); }

  /* Acquire-only desktop placement: shift the complete, contained bottle by
     the requested physical offsets while aligning the whole reading group's
     gold panel with the fixed HOME navigation anchor. */
  main.acquire-main { position: relative; isolation: isolate; }
  main.acquire-main .hero-col, main.acquire-main .hero-media { z-index: 0; }
  main.acquire-main .hero-media { transform: translate(calc(var(--home-stage-shift-x) + 5% - .5in), 1in); }
  main.acquire-main .content-col { position: relative; z-index: 2; transform: translateX(-7.2vw); }

  /* Craft-only desktop composition: retain the shared homepage bottle axis,
     lower this shorter source to the homepage cap line, and enlarge/expand
     the complete reading experience for low-vision legibility. */
  main.craft-main { position: relative; isolation: isolate; }
  main.craft-main .hero-col, main.craft-main .hero-media { z-index: 0; }
  main.craft-main .hero-media { transform: translate(calc(var(--home-stage-shift-x) + 5% - 1in), .5in); }
  main.craft-main .content-col { z-index: 2; width: calc(54% + 1in); margin-left: calc(46% - 1in); font-size: clamp(2rem, 2.25vw, 2.5rem); line-height: 1.55; }
  main.craft-main .tagline-bar { position: relative; z-index: 2; font-size: clamp(1.5rem, 1.6vw, 1.8rem); line-height: 1.55; }
  main.craft-main + .site-footer { position: relative; z-index: 2; background: var(--bg); }
  main.craft-main .prologue { transform: translateX(-.5in); padding-right: clamp(16px, 1.25vw, 24px); padding-left: clamp(16px, 1.25vw, 24px); }
  main.craft-main .pro-line { font-size: clamp(2.75rem, 3.35vw, 3.6rem); line-height: 1.3; }
  main.craft-main .craft-title { padding-right: clamp(16px, 1.25vw, 24px); padding-left: clamp(60px, 5vw, 1in); }
  main.craft-main .craft-title .page-title { font-size: clamp(4.5rem, 5.3vw, 6rem); line-height: 1.08; }
  main.craft-main .craft-sub { font-size: clamp(2.5rem, 2.8vw, 3.2rem); line-height: 1.3; }
  main.craft-main .craft-body { width: 100%; max-width: none; padding-right: clamp(16px, 1.25vw, 24px); padding-left: clamp(60px, 5vw, 1in); }
  main.craft-main .act-lede { font-size: clamp(3rem, 3.2vw, 4rem); line-height: 1.25; }
  main.craft-main .act .kicker { font-size: clamp(1.4rem, 1.5vw, 1.75rem); line-height: 1.4; }
  main.craft-main .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main.craft-main .stat + .stat { border-left: 0; }
  main.craft-main .stat:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hairline); }
  main.craft-main .stat h3 { font-size: .85em; line-height: 1.35; }
  main.craft-main .stat-fig { font-size: 1em; line-height: 1.35; }
  main.craft-main .stat .small { font-size: .75em; line-height: 1.45; }
  main.craft-main .coda { justify-content: flex-start; padding-top: clamp(18px, 2.2vh, 26px); }
  main.craft-main .coda .kenburns { transform: translateY(-.5in); }
  main.craft-main .coda-line { top: -1.5in; font-size: clamp(2.75rem, 3vw, 3.5rem); line-height: 1.35; margin: 0; text-shadow: 0 2px 10px #000, 0 0 22px #000; }
  main.craft-main .coda-foot { width: 100%; margin-top: auto; padding-bottom: clamp(20px, 2.4vh, 28px); }
  main.craft-main .coda-foot .banner-box { position: relative; width: 90%; margin: 0 auto; justify-content: center; text-align: center; background: rgba(0, 0, 0, .7); box-shadow: 0 0 28px rgba(0, 0, 0, .75); }
  main.craft-main .coda-foot .banner-box .ring { position: absolute; left: clamp(8px, 1vw, 14px); }
  main.craft-main .coda-foot .banner-box p { width: 100%; font-size: .85em; line-height: 1.5; }
  main.craft-main .coda-foot .coda-links { flex-direction: column; align-items: center; margin-top: 16px; }
  main.craft-main .coda-foot .coda-links .btn-outline { background: rgba(0, 0, 0, .62); box-shadow: 0 0 22px rgba(0, 0, 0, .78); }

  .site-nav[data-active="home"] a[data-nav="home"],
  .site-nav[data-active="purpose"] a[data-nav="purpose"],
  .site-nav[data-active="craft"] a[data-nav="craft"],
  .site-nav[data-active="release"] a[data-nav="release"],
  .site-nav[data-active="gallery"] a[data-nav="gallery"],
  .site-nav[data-active="acquire"] a[data-nav="acquire"],
  .site-nav[data-active="circle"] a[data-nav="circle"],
  .site-nav[data-active="more"] summary[data-nav="more"] { border-bottom-width: 2px; padding-bottom: min(.55vw, .7vh); }

  /* The complete portrait is a background layer. Contain preserves every
     source pixel; bottom alignment keeps the stone on the footer rule. */
  body.fit-viewport .split { position: relative; display: block; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; transform: translateX(var(--home-stage-shift-x)); }
  body.fit-viewport .hero-col { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; overflow: visible; }
  body.fit-viewport .hero-media { position: absolute; inset: 0 auto 0 0; width: 46%; height: 100%; max-width: none; border-radius: 0; object-fit: contain; object-position: center bottom; transform: translate(5%, 3%) scale(1.1265625); }
  body.fit-viewport .content-col { width: 54%; height: 100%; min-width: 0; min-height: 0; margin-left: 46%; overflow: visible; justify-content: center; padding: 0 var(--home-right-pad) min(1.15vw, 1.44vh) 0; }
  body.fit-viewport .page { max-width: none; padding: min(2.2vw, 2.75vh) min(1.4vw, 1.75vh); }
  /* Homepage-only copy guide: keep the shared navigation fixed and move the
     complete headline/copy/CTA unit until its first T begins beneath HOME. */
  body.fit-viewport .home-word { width: 100%; margin: 0; transform: translateX(calc(var(--home-nav-home-left) - var(--home-title-left))); }

  /* Reference typography and vertical rhythm. Every key value is bounded by
     the shorter viewport axis, preserving the complete composition at 16:9. */
  body.fit-viewport .title-giant { margin: 0; font-size: min(5.45vw, 6.82vh); line-height: 1.08; letter-spacing: .018em; white-space: nowrap; }
  body.fit-viewport .star-divider { max-width: min(26vw, 32.5vh); margin: min(1.3vw, 1.62vh) auto min(1.65vw, 2.06vh); gap: min(1.15vw, 1.44vh); font-size: min(1.35vw, 1.69vh); }
  body.fit-viewport .star-divider::before, body.fit-viewport .star-divider::after { border-top-width: 1px; }
  body.fit-viewport .home-word .lede { max-width: 24ch; margin: 0 auto; font-size: min(2.48vw, 3.1vh); line-height: 1.23; }
  body.fit-viewport .gold-rule { width: min(3.45vw, 4.32vh); margin: min(1.02vw, 1.28vh) auto; border-top-width: 1px; }
  body.fit-viewport .home-word > p:not(.lede):not(.cta-row) { max-width: 40ch; margin: min(1.45vw, 1.82vh) auto 0; font-size: min(1.82vw, 2.28vh); line-height: 1.36; }
  body.fit-viewport .cta-row { margin: min(2.55vw, 3.2vh) 0 0; }
  body.fit-viewport .btn-gold { display: inline-flex; align-items: center; justify-content: center; width: var(--home-cta-width); min-height: min(6.42vw, 8.02vh); padding: min(1.4vw, 1.75vh) min(3.9vw, 4.88vh); border-radius: 9px; font-family: var(--heading); font-size: min(2.03vw, 2.54vh); line-height: 1.1; letter-spacing: .035em; white-space: nowrap; }

  /* Homepage reference footer shared by every desktop route: a 6.3%-high
     band with one centered legal row. */
  .site-footer { flex: none; display: flex; justify-content: center; align-items: center; height: clamp(46px, 6.3vh, 71px); padding: 0 clamp(28px, 4vw, 60px); border-top: 1px solid rgba(201, 160, 76, .58); }
  .foot-links { margin: 0; font-family: "Inter", "Segoe UI", Arial, sans-serif; font-weight: 400; font-size: 1vw; letter-spacing: .08em; }
  .foot-links > * { padding: 0 4.4vw; }
  .foot-label { display: inline-block; transform: scale(.84); transform-origin: center; }
  .foot-social, .foot-note { display: none; }
  .footer-admin-login { left: clamp(12px, 1.4vw, 22px); bottom: 7px; font-size: clamp(.48rem, .46vw, .58rem); }
}

/* ============ Admin refinement: quiet command center (2026) ============
   Warm graphite, truthful state, larger operational type, quieter surfaces,
   and responsive records. Scoped to the private shell only. */
.admin-shell {
  --admin-bg: #090b0a;
  --admin-sidebar: #0b0d0c;
  --admin-surface: #121412;
  --admin-surface-2: #171a17;
  --admin-border: #292d28;
  --admin-border-gold: rgba(213, 173, 88, .34);
  --admin-text: #f3f1e9;
  --admin-muted: #b0afa7;
  --admin-faint: #8c918b;
  --admin-gold: #d5ad58;
  --admin-gold-bright: #f0cb79;
  --admin-green: #70c99b;
  background: radial-gradient(circle at 42% -20%, rgba(213, 173, 88, .055), transparent 36rem), var(--admin-bg);
  font-size: 16px;
}
.admin-console { grid-template-columns: 242px minmax(0, 1fr); }
.admin-sidebar { border-color: #20241f; background: rgba(11, 13, 12, .985); padding: 22px 15px 17px; }
.admin-brand { gap: 12px; padding: 1px 7px 19px; }
.admin-brand strong, .admin-login-brand strong { font-size: 1.08rem; }
.admin-brand small, .admin-login-brand small { font-size: .7rem; }
.admin-environment { margin: 17px 9px 12px; font-size: .72rem; }
.admin-environment span { background: var(--admin-gold); box-shadow: 0 0 0 4px rgba(213, 173, 88, .09); }
.admin-nav { gap: 2px; }
.admin-nav-label { margin: 20px 11px 7px; font-size: .7rem; }
.admin-nav a { position: relative; gap: 11px; min-height: 43px; padding: 8px 11px; border: 0; border-radius: 7px; color: var(--admin-muted); font-size: .82rem; }
.admin-nav a::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 2px; border-radius: 2px; background: transparent; }
.admin-nav a svg, .admin-user-card button svg, .admin-export-form button svg, .admin-security-icon svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.admin-nav a:hover, .admin-nav a:focus-visible { border: 0; background: rgba(255, 255, 255, .025); color: var(--admin-text); }
.admin-nav a.is-active { border: 0; background: linear-gradient(90deg, rgba(213, 173, 88, .11), transparent 88%); color: var(--admin-gold-bright); }
.admin-nav a.is-active::before { background: var(--admin-gold); }
.admin-user-card { grid-template-columns: 38px minmax(0, 1fr) 40px; padding: 14px 7px 0; }
.admin-avatar { width: 38px; height: 38px; font-size: .76rem; }
.admin-user-card strong { font-size: .79rem; }
.admin-user-card small { font-size: .7rem; }
.admin-user-card button { width: 40px; height: 40px; }
.admin-workspace { width: 100%; max-width: 1540px; margin: 0 auto; padding: 0 clamp(24px, 3.2vw, 52px) 38px; }
.admin-topbar { padding: 36px 0 26px; }
.admin-eyebrow, .admin-section-number, .admin-panel-kicker { font-size: .72rem; }
.admin-topbar > div > p:last-child { font-size: .84rem; }
.admin-range { min-width: 258px; }
.admin-range label, .admin-export-form label, .admin-login-card label { font-size: .72rem; }
.admin-range select, .admin-range button, .admin-export-form select { height: 44px; font-size: .82rem; }
.admin-statusline { min-height: 48px; color: var(--admin-faint); font-size: .72rem; }
.admin-statusline i { background: var(--admin-gold); box-shadow: 0 0 0 4px rgba(213, 173, 88, .08); }
.admin-system-status.warning { color: #efb19c; }
.admin-system-status.warning i { background: #dc8067; box-shadow: 0 0 0 4px rgba(220, 128, 103, .1); }
.admin-section { padding-top: 48px; scroll-margin-top: 24px; }
.admin-section + .admin-section { margin-top: 28px; border-color: #20241f; }
.admin-section-head { margin-bottom: 25px; }
.admin-section-head h2 { font-size: clamp(1.55rem, 2.15vw, 2rem); }
.admin-section-head > p { color: var(--admin-muted); font-size: .79rem; }
.admin-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; }
.admin-metric { min-height: 172px; padding: 20px; border-color: var(--admin-border); border-radius: 11px; background: linear-gradient(145deg, rgba(21, 24, 21, .98), rgba(15, 17, 15, .98)); box-shadow: inset 0 1px rgba(255, 255, 255, .018); }
.admin-metric.primary { grid-column: span 2; }
.admin-metric.supporting { grid-column: span 3; min-height: 150px; }
.admin-metric > p { font-size: .78rem; }
.admin-metric > strong { margin-top: 12px; font-family: "Inter", Arial, sans-serif; font-size: clamp(1.9rem, 3vw, 2.45rem); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.admin-metric > small { min-height: 36px; color: var(--admin-faint); font-size: .72rem; }
.metric-trend { font-size: .7rem; }
.metric-trend.up { color: var(--admin-muted); }
.metric-trend.down { color: #e6a19b; }
.admin-overview-grid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr); gap: 13px; margin-top: 13px; }
.admin-panel, .admin-table-card, .admin-export-form, .admin-export-notes, .admin-danger { border-color: var(--admin-border); border-radius: 11px; background: var(--admin-surface); box-shadow: inset 0 1px rgba(255, 255, 255, .015); }
.admin-panel { padding: 22px; }
.admin-panel h3, .admin-export-notes h3, .admin-danger h3, .admin-security-card h3 { font-size: .98rem; }
.admin-panel header > span, .admin-panel header > a { font-size: .7rem; }
.admin-chart { grid-template-columns: repeat(7, minmax(26px, 1fr)); height: 236px; padding-top: 28px; background: repeating-linear-gradient(to top, transparent 0, transparent 46px, rgba(140, 145, 139, .08) 47px, transparent 48px); }
.admin-chart-column { grid-template-rows: 18px 154px 30px; }
.admin-chart-column > i { width: 54%; max-width: 30px; background: linear-gradient(180deg, var(--admin-gold-bright), #8c6b31); }
.admin-chart-count { font-size: .7rem; }
.admin-chart-column small { padding-top: 8px; color: var(--admin-faint); font-size: .68rem; }
.admin-ranking strong { font-size: .76rem; }
.admin-ranking small, .admin-ranking em { font-size: .7rem; }
.admin-ranking li { min-height: 45px; }
.admin-empty { color: var(--admin-muted); font-size: .8rem; }
.admin-small-button { min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px; font-size: .72rem; }
.admin-table-toolbar { min-height: 70px; padding: 14px 18px; }
.admin-table-toolbar strong { font-size: .86rem; }
.admin-table-toolbar span { font-size: .72rem; }
.admin-table-filters { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(145px, .65fr) minmax(160px, .75fr) auto auto; align-items: end; gap: 10px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--admin-border); background: rgba(0, 0, 0, .08); }
.admin-table-filters label { display: grid; gap: 6px; color: var(--admin-faint); font-size: .7rem; font-weight: 600; }
.admin-table-filters input, .admin-table-filters select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--admin-border); border-radius: 7px; background: #0d100e; color: var(--admin-text); font-size: .78rem; }
.admin-table-filters button, .admin-table-filters > a { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 14px; border: 1px solid var(--admin-border-gold); border-radius: 7px; background: transparent; color: var(--admin-gold-bright); font-size: .74rem; text-decoration: none; cursor: pointer; }
.admin-table-filters button { background: rgba(213, 173, 88, .11); }
.admin-table-scroll { position: relative; outline: none; }
.admin-table-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--admin-gold-bright); }
.admin-table-card table { font-size: .76rem; }
.admin-table-card th { padding: 12px 14px; font-size: .68rem; }
.admin-table-card td { padding: 14px; font-size: .75rem; }
.admin-table-card td small { font-size: .69rem; }
.admin-badge { min-height: 25px; padding: 3px 8px; font-size: .66rem; }
.admin-mobile-records { display: none; }
.admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 58px; padding: 10px 18px; border-top: 1px solid var(--admin-border); color: var(--admin-faint); font-size: .73rem; }
.admin-pagination > span:first-child { margin-right: auto; }
.admin-pagination a, .admin-pagination span.disabled { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--admin-border); border-radius: 6px; text-decoration: none; }
.admin-pagination a { color: var(--admin-gold-bright); }
.admin-pagination span.disabled { border-style: dashed; color: var(--admin-faint); opacity: 1; }
.admin-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; padding: 7px; border: 1px solid var(--admin-border); border-radius: 11px; background: var(--admin-surface); box-shadow: inset 0 1px rgba(255, 255, 255, .015); }
.admin-report-grid .admin-panel { min-height: 250px; border: 0; border-right: 1px solid var(--admin-border); border-bottom: 1px solid var(--admin-border); border-radius: 0; background: transparent; box-shadow: none; }
.admin-report-grid .admin-panel:nth-child(4n) { border-right: 0; }
.admin-report-grid .admin-panel:nth-last-child(-n+4) { border-bottom: 0; }
.admin-export-form { gap: 19px; padding: 26px; }
.admin-export-form > button, .admin-login-card form > button { min-height: 48px; font-size: .8rem; }
.admin-export-form > button svg { width: 18px; height: 18px; }
.admin-export-notes { padding: 26px; }
.admin-export-notes strong { font-size: .74rem; }
.admin-export-notes span { font-size: .7rem; }
.admin-security-card p:last-child { font-size: .74rem; }
.admin-security-icon { width: 42px; height: 42px; }
.admin-security-icon svg { width: 19px; height: 19px; }
.admin-danger { align-items: flex-start; padding: 24px; }
.admin-danger > div > p:last-child { font-size: .74rem; }
.admin-danger-actions { width: min(520px, 52%); display: grid; gap: 8px; }
.admin-danger-actions details { overflow: hidden; border: 1px solid rgba(205, 103, 96, .34); border-radius: 8px; background: rgba(70, 24, 20, .08); }
.admin-danger-actions summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; color: #e7a49e; font-size: .74rem; cursor: pointer; list-style-position: inside; }
.admin-danger-actions summary span { color: var(--admin-faint); font-size: .68rem; }
.admin-danger-actions details[open] summary { border-bottom: 1px solid rgba(205, 103, 96, .25); background: rgba(205, 103, 96, .05); }
.admin-danger-actions form { display: grid; gap: 10px; margin: 0; padding: 13px; }
.admin-danger-actions label { display: grid; gap: 6px; color: var(--admin-muted); font-size: .7rem; }
.admin-danger-actions input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid rgba(205, 103, 96, .35); border-radius: 6px; background: #0d100e; color: var(--admin-text); font-size: .78rem; text-transform: uppercase; }
.admin-danger-actions button { min-height: 42px; font-size: .7rem; }
.admin-console-footer { font-size: .68rem; }
.admin-login-intro > p:not(.admin-eyebrow) { max-width: 560px; color: var(--admin-muted); }
.admin-login-intro ul { display: none; }
.admin-login-card header > p:last-child { font-size: .76rem; }
.admin-login-input { height: 48px; }
.admin-login-input input { font-size: .86rem; }
.admin-login-card > footer strong { font-size: .72rem; }
.admin-login-card > footer small, .admin-login-footer { font-size: .68rem; }
.admin-shell :focus-visible { outline: 2px solid var(--admin-gold-bright); outline-offset: 3px; }
.admin-login-input input:focus-visible { outline: 0; }

@media (max-width: 1260px) {
  .admin-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-report-grid .admin-panel:nth-child(4n) { border-right: 1px solid var(--admin-border); }
  .admin-report-grid .admin-panel:nth-child(2n) { border-right: 0; }
  .admin-report-grid .admin-panel:nth-last-child(-n+4) { border-bottom: 1px solid var(--admin-border); }
  .admin-report-grid .admin-panel:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1180px) {
  .admin-console { grid-template-columns: 220px minmax(0, 1fr); }
  .admin-metrics { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 820px) {
  .admin-console { display: block; }
  .admin-sidebar { position: sticky; top: 0; z-index: 30; width: 100%; height: auto; padding: 10px 16px 8px; border-right: 0; border-bottom: 1px solid var(--admin-border); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
  .admin-brand { padding: 0 0 8px; }
  .admin-brand img { width: 36px; height: 36px; }
  .admin-brand strong { font-size: .86rem; }
  .admin-brand small { font-size: .6rem; }
  .admin-environment, .admin-nav-label { display: none; }
  .admin-nav { position: relative; flex-direction: row; margin: 7px -4px 0; padding: 0 4px 2px; overflow-x: auto; scrollbar-width: thin; }
  .admin-nav::after { content: ""; position: sticky; right: -4px; flex: 0 0 20px; align-self: stretch; background: linear-gradient(90deg, transparent, var(--admin-sidebar)); pointer-events: none; }
  .admin-nav a { flex: 0 0 auto; min-height: 40px; padding: 7px 10px; font-size: .76rem; }
  .admin-nav a::before { top: auto; right: 9px; bottom: 0; left: 9px; width: auto; height: 2px; }
  .admin-user-card { top: 10px; right: 12px; grid-template-columns: 36px 40px; }
  .admin-user-card > span:nth-child(2) { display: none; }
  .admin-avatar { width: 36px; height: 36px; }
  .admin-workspace { padding-inline: 18px; }
  .admin-section { scroll-margin-top: 105px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metric.primary, .admin-metric.supporting { grid-column: auto; }
  .admin-metric { min-height: 160px; }
  .admin-metric:last-child { grid-column: 1 / -1; }
  .admin-overview-grid, .admin-export-layout { grid-template-columns: 1fr; }
  .admin-table-filters { grid-template-columns: 1fr 1fr; }
  .admin-table-filters label:first-of-type { grid-column: 1 / -1; }
  .admin-danger { flex-direction: column; }
  .admin-danger-actions { width: 100%; }
}
@media (max-width: 620px) {
  .admin-workspace { padding-inline: 13px; }
  .admin-topbar { padding-top: 24px; }
  .admin-statusline { font-size: .68rem; }
  .admin-section { padding-top: 36px; scroll-margin-top: 103px; }
  .admin-section-head h2 { font-size: 1.5rem; }
  .admin-section-head > p { font-size: .76rem; }
  .admin-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .admin-metric { min-height: 145px; padding: 16px; }
  .admin-metric > strong { font-size: 1.75rem; }
  .admin-metric > small { min-height: 31px; }
  .admin-chart { grid-template-columns: repeat(7, minmax(18px, 1fr)); gap: 4px; height: 205px; }
  .admin-chart-column { grid-template-rows: 17px 124px 30px; }
  .admin-chart-column small { font-size: .6rem; transform: none; white-space: normal; }
  .admin-table-filters { grid-template-columns: 1fr; padding: 14px; }
  .admin-table-filters label:first-of-type { grid-column: auto; }
  .admin-table-scroll { display: none; }
  .admin-mobile-records { display: grid; gap: 10px; padding: 13px; }
  .admin-mobile-records article { padding: 14px; border: 1px solid var(--admin-border); border-radius: 9px; background: rgba(0, 0, 0, .1); }
  .admin-mobile-records article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .admin-mobile-records article > header > strong { min-width: 0; overflow-wrap: anywhere; font-size: .82rem; }
  .admin-mobile-records dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
  .admin-mobile-records dl div { min-width: 0; }
  .admin-mobile-records dt { color: var(--admin-faint); font-size: .66rem; font-weight: 600; text-transform: uppercase; }
  .admin-mobile-records dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--admin-text); font-size: .74rem; }
  .admin-pagination { padding-inline: 13px; }
  .admin-report-grid { grid-template-columns: 1fr; padding: 5px; }
  .admin-report-grid .admin-panel, .admin-report-grid .admin-panel:nth-child(2n), .admin-report-grid .admin-panel:nth-child(4n), .admin-report-grid .admin-panel:nth-last-child(-n+4) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--admin-border); }
  .admin-report-grid .admin-panel:last-child { border-bottom: 0; }
  .admin-login-grid { padding-top: 20px; }
  .admin-login-card { order: -1; }
  .admin-login-intro { display: none; }
  .admin-login-page { min-height: 100svh; }
}