:root {
  --char: #0e0d0c;
  --char-2: #17140f;
  --ember: #c9702a;
  --ember-bright: #e2913f;
  --smoke: #79746a;
  --ash: #d8d2c4;
  --paper: #f2ede1;
  --peat: #2a2318;
  --line: rgba(216, 210, 196, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--char);
  color: var(--ash);
  font-family: 'Archivo', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% -10%, rgba(201,112,42,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 110% 20%, rgba(80,60,30,0.25), transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(40,30,15,0.4), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.wrap { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 32px; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--line);
}

.logo {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ash);
}
.logo .drop-dot { color: var(--ember-bright); font-style: italic; font-weight: 500; }

nav { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke); }
nav button { background: none; border: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; transition: color 0.25s; }
nav button:hover { color: var(--ember-bright); }
nav button.active { color: var(--ash); }

.hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-bright);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--ember-bright); }

.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: var(--paper);
}

.hero p {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--smoke);
}

.releases { padding: 56px 0 100px; }
.releases-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.releases-head h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; color: var(--paper); }
.releases-head span { font-size: 13px; color: var(--smoke); }

.list { display: flex; flex-direction: column; }

.item {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  gap: 28px;
  align-items: center;
  padding: 26px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s;
  position: relative;
}
.item:hover { background: rgba(201,112,42,0.05); }
.item:hover .glow { opacity: 1; }

.glow {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ember-bright), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.bottle {
  width: 84px; height: 84px; border-radius: 6px;
  background: linear-gradient(145deg, var(--peat), var(--char-2));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 12px;
  color: var(--ember-bright); text-align: center; flex-shrink: 0; padding: 6px;
}

.info .region { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-bright); margin-bottom: 6px; }
.info h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 21px; color: var(--paper); margin-bottom: 6px; }
.info h3 a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--ember-bright), var(--ember-bright)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 0.25s, color 0.25s; }
.info h3 a:hover { color: var(--ember-bright); background-size: 100% 1px; }
.info .notes { font-size: 13px; color: var(--smoke); margin-bottom: 6px; max-width: 60ch; }
.info .meta { font-size: 13px; color: var(--smoke); display: flex; gap: 14px; flex-wrap: wrap; }
.info .meta span::after { content: '·'; margin-left: 14px; color: var(--line); }
.info .meta span:last-child::after { content: ''; }
.info a.source { color: var(--ember-bright); font-size: 12px; text-decoration: none; }

.status { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; white-space: nowrap; font-weight: 600; }
.status.available { background: rgba(201,112,42,0.16); color: var(--ember-bright); border: 1px solid rgba(201,112,42,0.4); }
.status.coming_soon { background: transparent; color: var(--smoke); border: 1px solid var(--line); }
.status.sold_out { background: transparent; color: #6b5f57; border: 1px solid var(--line); text-decoration: line-through; }

.price { font-family: 'Fraunces', serif; font-size: 24px; color: var(--paper); text-align: right; min-width: 90px; }

.archive-panel { padding: 20px 0 60px; display: none; }
.archive-panel.open { display: block; }
.archive-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background 0.25s;
}
.archive-item:hover { background: rgba(201,112,42,0.05); }
.archive-item .w { font-family: 'Fraunces', serif; font-size: 18px; color: var(--paper); }
.archive-item .s { font-size: 13px; color: var(--smoke); margin-top: 4px; max-width: 60ch; }
.archive-item .c { font-size: 12px; color: var(--ember-bright); white-space: nowrap; margin-left: 20px; }

.empty { padding: 60px 20px; text-align: center; color: var(--smoke); }

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 60px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--smoke); letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .item { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; }
  .price { text-align: left; grid-column: 2; }
  .status { grid-column: 2; width: fit-content; }
}