@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #11100f;
  --panel: #201b1b;
  --text: #f1ede6;
  --muted: #a69e95;
  --line: #38322f;
  --lime: #c9f36a;
  --serif: Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.header {
  height: 82px; padding: 0 5vw; display: flex;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.logo { font-size: 23px; font-weight: 800; letter-spacing: -1.5px; }
.logo span { color: var(--lime); }
.logo sup { color: var(--muted); font: 9px var(--mono); }
.navlink, .eyebrow, .footer, .hero-bottom, .enter,
.nav, .meta, .back {
  font: 10px var(--mono); letter-spacing: 1px;
}
.navlink { border: 1px solid #5a514a; padding: 13px 16px; }
.navlink:hover { background: var(--lime); color: var(--bg); }
.landing {
  min-height: 100vh; overflow: hidden;
  background: radial-gradient(ellipse at 50% 43%, #30221f, #171413 45%, #11100f 78%);
}
.landing .header { border: 0; }
.hero {
  min-height: calc(100vh - 140px); position: relative;
  display: grid; place-items: center; padding: 70px 20px 100px;
}
.hero-copy { position: relative; z-index: 1; text-align: center; animation: appear 1s ease both; }
.eyebrow { color: var(--muted); }
.hero h1 {
  font-size: clamp(62px, 11vw, 145px); line-height: .88;
  letter-spacing: -.09em; margin: 25px 0; font-weight: 700;
}
h1 em, .shop-title em, .editorial h1 em {
  color: var(--lime); font-family: var(--serif); font-weight: 400;
}
.intro { color: #b8afa6; max-width: 365px; font-size: 13px; line-height: 1.9; margin: 28px auto 36px; }
.enter { display: inline-flex; align-items: center; gap: 14px; }
.enter span {
  width: 38px; height: 38px; border: 1px solid var(--lime);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--lime); font-size: 18px; transition: .25s;
}
.enter:hover span { background: var(--lime); color: var(--bg); transform: rotate(-45deg); }
.enter i { height: 1px; width: 40px; background: var(--lime); transition: .25s; }
.enter:hover i { width: 65px; }
.orbit {
  position: absolute; border: 1px solid #d5a27d15;
  border-radius: 50%; pointer-events: none;
}
.orbit-a { width: min(72vw, 750px); aspect-ratio: 1; animation: spin 65s linear infinite; }
.orbit-b { width: min(52vw, 540px); aspect-ratio: 1; border-style: dashed; animation: spin 90s linear infinite reverse; }
.hero-bottom {
  position: absolute; bottom: 24px; left: 5vw; right: 5vw;
  display: flex; justify-content: space-between; color: #766d65; font-size: 9px;
}
.footer {
  display: flex; justify-content: space-between; padding: 0 5vw 25px;
  color: #766d65; font-size: 9px;
}
.page { max-width: 1400px; margin: auto; padding: 65px 5vw 100px; }
.shop-title, .editorial h1 {
  font-size: clamp(58px, 9vw, 115px); line-height: .9;
  letter-spacing: -.08em; margin: 20px 0;
}
.shop-desc { color: var(--muted); max-width: 380px; line-height: 1.8; font-size: 13px; margin: 25px 0 50px; }
.meta { display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 18px; padding: 25px 0 90px; }
.card { min-width: 0; }
.art {
  height: clamp(240px, 32vw, 410px); display: grid; place-items: center;
  position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, var(--glow), #211b1b 68%);
}
.art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(130deg, transparent 35%, #ffffff08, transparent 65%);
}
.num { position: absolute; top: 16px; left: 16px; color: #cfc4b688; font: 9px var(--mono); }
.bottle {
  width: 100px; height: 130px; position: relative; margin-top: 25px;
  border: 1px solid #d9cbb65c; border-radius: 12px 12px 18px 18px;
  background: linear-gradient(100deg, #ffffff19, #ffffff03 35%, #00000035 80%, #ffffff0a);
  box-shadow: 0 25px 25px #0007, inset 5px 0 8px #ffffff0b;
  transition: transform .35s;
}
.card:hover .bottle { transform: translateY(-7px) rotate(-2deg); }
.bottle::before {
  content: ""; position: absolute; width: 34px; height: 23px; top: -28px; left: 32px;
  background: linear-gradient(90deg, #62574c, #d1c1a8, #65594c); border-radius: 3px;
}
.bottle::after {
  content: ""; position: absolute; width: 26px; height: 9px; top: -7px; left: 36px;
  background: #a89b87;
}
.label {
  position: absolute; top: 35px; left: 8px; right: 8px; height: 62px;
  display: grid; place-content: center; text-align: center;
  background: #171513ed; border: 1px solid #d0c2a533;
  font-size: 15px; font-weight: 800; line-height: .9; letter-spacing: -1px;
}
.label span { color: var(--lime); }
.label small { color: #aaa092; font: 5px var(--mono); letter-spacing: .5px; margin-top: 8px; }
.card-info { display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; }
.card h2 { font-size: 16px; margin: 0 0 5px; }
.card-type { color: var(--muted); font-size: 11px; }
.price { font: 12px var(--mono); white-space: nowrap; }
.tagline { font: italic 14px var(--serif); color: #aaa096; margin-top: 12px; }
.end-section { border-top: 1px solid var(--line); padding: 55px 0; }
.end-section p { font-size: clamp(34px, 6vw, 70px); line-height: 1; letter-spacing: -.06em; }
.text-link { color: var(--lime); font: 10px var(--mono); border-bottom: 1px solid #c9f36a66; padding-bottom: 8px; }
.editorial { padding-top: 95px; padding-bottom: 120px; min-height: 75vh; }
.editorial h1 { margin-bottom: 45px; }
.lede { font: clamp(22px, 3vw, 33px)/1.5 var(--serif); max-width: 750px; }
.copy { color: var(--muted); max-width: 620px; line-height: 2; font-size: 13px; }
.rule { height: 1px; background: var(--line); margin: 35px 0; }
.contact-box { border: 1px solid var(--line); padding: 25px; max-width: 520px; margin: 35px 0; }
.contact-box a { color: var(--lime); font: 24px var(--serif); }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; }
.detail-art { min-height: 560px; display: grid; place-items: center; }
.detail-art .bottle { transform: scale(1.7); }
.detail h1 { font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.07em; }
.detail h1 em { color: var(--lime); font: italic .5em var(--serif); }
.detail-price { border-block: 1px solid var(--line); padding: 20px 0; margin: 25px 0; }
.notes { display: flex; flex-wrap: wrap; gap: 8px; }
.notes span { border: 1px solid var(--line); padding: 9px 12px; font-size: 11px; }
.button { border: 1px solid var(--lime); background: var(--lime); color: var(--bg); padding: 17px 20px; font: 10px var(--mono); cursor: pointer; }
.button:hover { background: transparent; color: var(--lime); }
.back { display: inline-block; color: var(--muted); margin-bottom: 25px; }
@keyframes appear { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 800px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .art { height: clamp(220px, 47vw, 350px); }
  .detail { grid-template-columns: 1fr; gap: 30px; }
  .detail-art { min-height: 380px; }
  .detail-art .bottle { transform: scale(1.4); }
}
@media (max-width: 480px) {
  .header { height: 72px; padding: 0 20px; }
  .logo { font-size: 21px; }
  .navlink { font-size: 9px; padding: 11px; }
  .hero h1 { font-size: 62px; }
  .hero-bottom { left: 20px; right: 20px; font-size: 8px; }
  .hero-bottom span:nth-child(2) { display: none; }
  .footer { padding-inline: 20px; font-size: 8px; }
  .page { padding: 50px 20px 75px; }
  .grid { gap: 25px 10px; }
  .art { height: 220px; }
  .card h2 { font-size: 13px; }
  .card-type, .tagline, .price { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Real ODDKIN product bottle photography */
.product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.card .art {
  overflow: hidden;
}

.detail-art {
  min-height: 420px;
}

/* Real ODDKIN product bottle photography */
.product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.card .art {
  overflow: hidden;
}

.detail-art {
  min-height: 420px;
}

/* Fill shop-card previews and crop the excess image */
.card .art .product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ==========================================
   ODDKIN — DIONYSIAN LUXURY
   Obsidian / Antique Gold / Rose Gold
   ========================================== */

:root {
  --gold: #d6b36a;
  --gold-light: #f0dba5;
  --gold-dark: #8d6b37;
  --rose-gold: #bc897e;
  --obsidian: #0b0a09;
  --panel: #141210;
  --panel-light: #1c1814;
  --ivory: #e9e0d0;
  --muted: #a99d8a;
}

/* Main atmosphere */
html {
  background: var(--obsidian);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse at 50% -15%, #35251b 0%, transparent 48%),
    var(--obsidian);
  color: var(--ivory);
}

/* Typography */
h1, h2, h3, .logo, .brand, .wordmark {
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
}

h1 {
  letter-spacing: -0.035em;
}

h2 {
  letter-spacing: 0.015em;
}

p, .copy {
  color: #c5b9a7;
}

a {
  transition: color 180ms ease, border-color 180ms ease;
}

a:hover {
  color: var(--gold-light);
}

/* Header and navigation */
header, .header, nav {
  border-color: rgba(214, 179, 106, 0.2);
}

header a, nav a, .header a {
  color: var(--ivory);
}

header a:hover, nav a:hover, .header a:hover {
  color: var(--gold);
}

/* Wordmark — restrained, ceremonial, premium */
.logo, .brand, .wordmark, .site-logo {
  color: var(--gold-light);
  letter-spacing: 0.16em;
  text-shadow: 0 0 24px rgba(214, 179, 106, 0.12);
}

/* Gold details and section labels */
.eyebrow, .num, .card-type {
  color: var(--gold);
}

.eyebrow {
  letter-spacing: 0.16em;
}

/* Product cards */
.card {
  background: linear-gradient(155deg, #191612, #100e0c 75%);
  border: 1px solid rgba(214, 179, 106, 0.17);
  color: var(--ivory);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 179, 106, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.card h2 {
  color: var(--gold-light);
}

.card-type, .tagline {
  color: var(--muted);
}

.price, .detail-price strong {
  color: var(--gold-light);
}

/* Image presentation: preserve the actual bottle photos */
.card .art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(188, 137, 126, 0.15),
      rgba(214, 179, 106, 0.045) 38%,
      transparent 72%),
    #100e0c;
  border-bottom: 1px solid rgba(214, 179, 106, 0.13);
}

.card .art .product-photo {
  object-fit: cover;
  object-position: center;
}

.detail-art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(188, 137, 126, 0.14),
      transparent 68%),
    #100e0c;
  border: 1px solid rgba(214, 179, 106, 0.2);
  border-radius: 3px;
}

.detail-art .product-photo {
  object-fit: contain;
}

/* Buttons */
button, .button {
  background: linear-gradient(120deg, #d9bd7d, #b68c4c);
  border: 1px solid #e5ca8c;
  color: #17110a;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: filter 180ms ease, transform 180ms ease;
}

button:hover, .button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Back links and scent notes */
.back {
  color: var(--gold);
}

.notes span, .notes > * {
  border-color: rgba(214, 179, 106, 0.25);
}

/* Inputs, if present */
input, textarea, select {
  background: #15120f;
  border: 1px solid rgba(214, 179, 106, 0.3);
  color: var(--ivory);
}

/* Fine gold separators */
hr, .divider {
  border-color: rgba(214, 179, 106, 0.2);
}

/* Selection */
::selection {
  background: #b68c4c;
  color: #100c08;
}

/* Mobile refinement */
@media (max-width: 600px) {
  .card:hover {
    transform: none;
  }
}

/* ==========================================
   ODDKIN — DIONYSIAN LUXURY
   Obsidian / Antique Gold / Rose Gold
   ========================================== */

:root {
  --gold: #d6b36a;
  --gold-light: #f0dba5;
  --gold-dark: #8d6b37;
  --rose-gold: #bc897e;
  --obsidian: #0b0a09;
  --panel: #141210;
  --panel-light: #1c1814;
  --ivory: #e9e0d0;
  --muted: #a99d8a;
}

/* Main atmosphere */
html {
  background: var(--obsidian);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse at 50% -15%, #35251b 0%, transparent 48%),
    var(--obsidian);
  color: var(--ivory);
}

/* Typography */
h1, h2, h3, .logo, .brand, .wordmark {
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
}

h1 {
  letter-spacing: -0.035em;
}

h2 {
  letter-spacing: 0.015em;
}

p, .copy {
  color: #c5b9a7;
}

a {
  transition: color 180ms ease, border-color 180ms ease;
}

a:hover {
  color: var(--gold-light);
}

/* Header and navigation */
header, .header, nav {
  border-color: rgba(214, 179, 106, 0.2);
}

header a, nav a, .header a {
  color: var(--ivory);
}

header a:hover, nav a:hover, .header a:hover {
  color: var(--gold);
}

/* Wordmark — restrained, ceremonial, premium */
.logo, .brand, .wordmark, .site-logo {
  color: var(--gold-light);
  letter-spacing: 0.16em;
  text-shadow: 0 0 24px rgba(214, 179, 106, 0.12);
}

/* Gold details and section labels */
.eyebrow, .num, .card-type {
  color: var(--gold);
}

.eyebrow {
  letter-spacing: 0.16em;
}

/* Product cards */
.card {
  background: linear-gradient(155deg, #191612, #100e0c 75%);
  border: 1px solid rgba(214, 179, 106, 0.17);
  color: var(--ivory);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 179, 106, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.card h2 {
  color: var(--gold-light);
}

.card-type, .tagline {
  color: var(--muted);
}

.price, .detail-price strong {
  color: var(--gold-light);
}

/* Image presentation: preserve the actual bottle photos */
.card .art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(188, 137, 126, 0.15),
      rgba(214, 179, 106, 0.045) 38%,
      transparent 72%),
    #100e0c;
  border-bottom: 1px solid rgba(214, 179, 106, 0.13);
}

.card .art .product-photo {
  object-fit: cover;
  object-position: center;
}

.detail-art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(188, 137, 126, 0.14),
      transparent 68%),
    #100e0c;
  border: 1px solid rgba(214, 179, 106, 0.2);
  border-radius: 3px;
}

.detail-art .product-photo {
  object-fit: contain;
}

/* Buttons */
button, .button {
  background: linear-gradient(120deg, #d9bd7d, #b68c4c);
  border: 1px solid #e5ca8c;
  color: #17110a;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: filter 180ms ease, transform 180ms ease;
}

button:hover, .button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Back links and scent notes */
.back {
  color: var(--gold);
}

.notes span, .notes > * {
  border-color: rgba(214, 179, 106, 0.25);
}

/* Inputs, if present */
input, textarea, select {
  background: #15120f;
  border: 1px solid rgba(214, 179, 106, 0.3);
  color: var(--ivory);
}

/* Fine gold separators */
hr, .divider {
  border-color: rgba(214, 179, 106, 0.2);
}

/* Selection */
::selection {
  background: #b68c4c;
  color: #100c08;
}

/* Mobile refinement */
@media (max-width: 600px) {
  .card:hover {
    transform: none;
  }
}

/* ODDKIN LUXURY OVERRIDE — remove old green accents */
:root {
  --green: #d6b36a;
  --accent: #d6b36a;
  --lime: #d6b36a;
  --gold: #d6b36a;
  --gold-light: #f0dba5;
  --rose-gold: #bc897e;
}

/* Logo: force BOTH ODD and KIN to gold */
.logo,
.logo span,
.brand,
.brand span,
.wordmark,
.wordmark span,
.site-logo,
.site-logo span,
header .logo *,
nav .logo *,
.label,
.label span {
  color: #d6b36a !important;
}

/* Catch remaining green text and accents */
h1, h2, h3, h4,
.eyebrow,
.num,
.card-type,
.price,
.detail-price strong,
.back,
a:hover,
button:hover,
.button:hover {
  color: #d6b36a;
}

/* Replace old green borders, glows and backgrounds */
.card:hover,
.card,
.notes span,
.notes > *,
input,
textarea,
select {
  border-color: rgba(214, 179, 106, 0.4);
}

button, .button {
  background: linear-gradient(120deg, #f0dba5, #b68c4c) !important;
  color: #17110a !important;
  border-color: #d6b36a !important;
}

/* Warm gold instead of green glows */
.art {
  --glow: #bc897e;
}

/* Restore warm neutral body copy */
p, .copy, .tagline, .card-type {
  color: #c5b9a7;
}

/* ODDKIN — Ivory & Champagne Gold refinement */
:root {
  --gold: #c8a96b;
  --gold-light: #e8d7ad;
  --gold-dark: #947746;
  --rose-gold: #b88b80;
  --ivory: #f1ede5;
  --muted: #aaa49a;
}

/* Main typography: elegant warm white */
body {
  color: #f1ede5;
}

h1, h2, h3, h4,
.copy,
p {
  color: #e8e2d8;
}

/* Wordmark: gold ODD, ivory KIN */
.logo,
.brand,
.wordmark,
.site-logo,
.logo span,
.brand span,
.wordmark span,
.site-logo span,
.label,
.label span {
  color: #e8d7ad !important;
}

/* Main headings: ivory rather than solid gold */
h1, h2, h3, h4 {
  color: #f1ede5;
}

/* Reserve champagne gold for details */
.eyebrow,
.num,
.price,
.detail-price strong,
.back {
  color: #c8a96b;
}

/* Secondary copy: soft, readable neutral */
.tagline,
.card-type {
  color: #b9afa0;
}

/* Borders: fine champagne lines */
.card,
.detail-art,
.notes span,
.notes > * {
  border-color: rgba(200, 169, 107, 0.24);
}

.card:hover {
  border-color: rgba(200, 169, 107, 0.65);
}

/* Buttons: pale champagne, not saturated yellow */
button,
.button {
  background: linear-gradient(135deg, #eee2c4, #c8a96b) !important;
  color: #17120d !important;
  border-color: #d5bd88 !important;
}

button:hover,
.button:hover {
  background: linear-gradient(135deg, #f6ecd6, #ddc28a) !important;
}

/* Dark, warm product display */
.card .art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(184, 139, 128, 0.12),
      transparent 68%),
    #100e0c;
}

.detail-art {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(200, 169, 107, 0.09),
      transparent 68%),
    #100e0c;
}

/* Quiet rose-gold details */
a:hover {
  color: #d8b3a5;
}

::selection {
  background: #c8a96b;
  color: #100c08;
}

/* ODDKIN — Doric temple homepage */
.hero .orbit {
  display: none !important;
}

.hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(153, 112, 65, 0.12), transparent 55%),
    #0b0a09;
}

/* Temple silhouette */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(76vw, 680px);
  height: min(60vw, 410px);
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  opacity: 0.23;
  pointer-events: none;
  background:
    /* Pediment */
    linear-gradient(180deg, transparent 0 29%, #c8a96b 29% 30.5%, transparent 30.5%),
    /* Fluted columns */
    repeating-linear-gradient(
      90deg,
      transparent 0 5.5%,
      rgba(200, 169, 107, 0.8) 5.5% 6%,
      rgba(200, 169, 107, 0.08) 6% 8.5%,
      transparent 8.5% 12%
    );
  clip-path: polygon(
    0 30%, 50% 0, 100% 30%,
    100% 34%, 94% 34%, 94% 82%,
    100% 82%, 100% 87%, 0 87%,
    0 82%, 6% 82%, 6% 34%, 0 34%
  );
}

/* Temple roof and column capitals */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(80vw, 720px);
  height: min(60vw, 420px);
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  background:
    linear-gradient(#c8a96b, #c8a96b) 0 30% / 100% 2px no-repeat,
    linear-gradient(#c8a96b, #c8a96b) 0 35% / 100% 3px no-repeat,
    linear-gradient(#c8a96b, #c8a96b) 0 82% / 100% 3px no-repeat,
    linear-gradient(#c8a96b, #c8a96b) 0 88% / 100% 5px no-repeat;
}

/* Keep homepage copy above the architecture */
.hero-copy,
.hero-bottom {
  z-index: 2;
}

.hero-copy {
  position: relative;
}

.hero-bottom {
  position: absolute;
}

/* Elegant gold accents */
.hero h1 {
  color: #f1ede5;
  text-shadow: 0 2px 35px rgba(0, 0, 0, 0.8);
}

.hero .enter {
  border-color: rgba(200, 169, 107, 0.6);
  color: #e8d7ad;
}

@media (max-width: 600px) {
  .hero::before,
  .hero::after {
    width: 100vw;
    height: 65vw;
    opacity: 0.13;
  }
}

/* ODDKIN — engraved Dionysian night */
.hero .orbit,
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, #211713 0%, #100d0c 42%, #090807 82%);
}

.dionysian-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: .82;
  overflow: visible;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  text-shadow: 0 2px 24px #090807;
}

.hero-copy::before {
  content: "✧  ODDKIN  ✧";
  display: block;
  margin: 0 auto 1.5rem;
  color: #d7bd84;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .42em;
  text-shadow: 0 0 24px #b9945430;
}

.hero h1 {
  color: #f0e8d9;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
  text-shadow: 0 3px 35px #000;
}

.hero-copy p {
  color: #c9bda9;
}

.hero-bottom {
  z-index: 3;
  color: #c8b58f;
  border-top: 1px solid #b9945440;
  padding-top: 14px;
  letter-spacing: .16em;
}

.sun-disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: dionysian-glow 8s ease-in-out infinite;
}

.vessel {
  transform-box: fill-box;
  transform-origin: center;
}

.vessel-left {
  animation: vessel-breathe 7s ease-in-out infinite;
}

.vessel-right {
  animation: vessel-breathe 7s ease-in-out -3.5s infinite;
}

.vine-left,
.vine-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: vine-breathe 9s ease-in-out infinite;
}

.vine-right {
  animation-delay: -4.5s;
}

.gold-dust circle {
  animation: dust-rise 7s ease-in-out infinite alternate;
}

.gold-dust circle:nth-child(2n) {
  animation-delay: -3s;
}

.gold-dust circle:nth-child(3n) {
  animation-delay: -5s;
}

@keyframes dionysian-glow {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

@keyframes vessel-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes vine-breathe {
  0%, 100% { rotate: -.4deg; }
  50% { rotate: .4deg; }
}

@keyframes dust-rise {
  0% { opacity: .2; translate: 0 5px; }
  100% { opacity: .8; translate: 0 -9px; }
}

@media (max-width: 700px) {
  .dionysian-art {
    width: 145%;
    max-width: none;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    opacity: .5;
  }

  .hero-copy {
    padding: 1.5rem 1rem;
  }

  .hero-copy::before {
    font-size: .62rem;
    letter-spacing: .28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sun-disc, .vessel, .vine-left, .vine-right, .gold-dust circle {
    animation: none !important;
  }
}

/* Fix product taglines: restore normal character and word spacing */
.product-tagline,
.card .tagline,
.product-card .tagline,
.product-detail .tagline,
.product-page .tagline,
.product-copy p,
.card p {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none;
  font-kerning: normal;
  font-variant-ligatures: normal;
  text-rendering: optimizeLegibility;
}

/* Fix tagline spacing inside individual product-page headings */
.detail h1 em {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-style: italic;
}


/* ODDKIN — olfactory pyramid */
.note-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  max-width: 460px;
}
.note-tier {
  box-sizing: border-box;
  min-height: 76px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border: 1px solid rgba(201, 169, 107, 0.38);
  background: linear-gradient(120deg, rgba(201, 169, 107, 0.09), rgba(201, 169, 107, 0.025));
}
.note-top { width: 58%; }
.note-heart { width: 78%; }
.note-base { width: 100%; }
.note-label {
  color: #c8a96b;
  font: 10px var(--mono);
  letter-spacing: 0.16em;
}
.note-values {
  color: #e4dbcb;
  font: italic 15px var(--serif);
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
}
@media (max-width: 600px) {
  .note-pyramid { max-width: 100%; }
  .note-top { width: 70%; }
  .note-heart { width: 85%; }
  .note-base { width: 100%; }
}

/* ODDKIN — proper fragrance note pyramid */
.note-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  max-width: 430px;
  margin: 18px auto 28px;
}

.note-tier {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 78px;
  padding: 15px 20px;
  background: rgba(180, 148, 91, 0.055);
  border: 1px solid rgba(190, 158, 105, 0.48);
  border-bottom: 0;
  color: #e8dfce;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
}

.note-top {
  width: 36%;
  min-width: 150px;
  min-height: 82px;
}

.note-heart {
  width: 67%;
  min-width: 230px;
  min-height: 86px;
}

.note-base {
  width: 100%;
  min-height: 92px;
  border-bottom: 1px solid rgba(190, 158, 105, 0.48);
}

.note-label {
  display: block;
  margin-bottom: 8px;
  color: #b99a64;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.note-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .note-pyramid {
    max-width: 100%;
  }

  .note-top {
    width: 48%;
    min-width: 0;
  }

  .note-heart {
    width: 76%;
    min-width: 0;
  }

  .note-base {
    width: 100%;
  }

  .note-tier {
    padding: 13px 10px;
  }
}