:root {
  --ink: #18342a;
  --ink-deep: #10261f;
  --cream: #f5f0e4;
  --paper: #ebe3d3;
  --copper: #ae6d39;
  --gold: #c89955;
  --sage: #7e8f67;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-shell {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  padding: 0 clamp(20px, 4.2vw, 72px);
  isolation: isolate;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  opacity: .55;
  z-index: -1;
}
.glow-one { width: 540px; height: 540px; background: #d8dfbe; top: 32%; left: -360px; }
.glow-two { width: 440px; height: 440px; background: #eed9b8; bottom: -310px; right: -110px; }

.topbar {
  max-width: 1520px;
  margin: 0 auto;
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(24, 52, 42, .16);
}

.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(24, 52, 42, .24);
  background: #211f1f;
  box-shadow: 0 8px 30px rgba(16, 38, 31, .12);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 15px; letter-spacing: .14em; }
.brand-copy small { font-size: 10px; color: rgba(24, 52, 42, .64); letter-spacing: .17em; text-transform: uppercase; }

.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(24, 52, 42, .18);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #678450;
  box-shadow: 0 0 0 5px rgba(103, 132, 80, .13);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero {
  max-width: 1520px;
  min-height: min(760px, calc(100svh - 114px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(46px, 7vw, 122px);
  padding: clamp(62px, 7vw, 104px) 0;
}

.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--copper); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { color: var(--ink); }
.eyebrow i { width: 34px; height: 1px; background: var(--gold); }

h1 {
  margin: 0;
  max-width: 760px;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(54px, 6.05vw, 98px);
  font-weight: 500;
  letter-spacing: -.052em;
  line-height: .93;
}
h1 em { color: var(--copper); font-weight: 400; }

.lead {
  max-width: 610px;
  margin: 34px 0 0;
  color: rgba(24, 52, 42, .72);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.8;
}

.launch-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 38px;
  padding-left: 20px;
  border-left: 1px solid var(--copper);
}
.launch-index { color: var(--copper); font-family: Georgia, serif; font-size: 13px; font-style: italic; }
.launch-note strong { display: block; margin-bottom: 6px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.launch-note p { margin: 0; color: rgba(24, 52, 42, .62); font-size: 13px; line-height: 1.55; }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: var(--cream); box-shadow: 0 15px 35px rgba(16, 38, 31, .14); }
.button-primary:hover { background: var(--copper); border-color: var(--copper); }
.button-primary span { font-size: 17px; font-weight: 400; }
.button-ghost:hover { background: rgba(255,255,255,.48); }

.hero-visual { min-width: 0; }
.visual-frame {
  position: relative;
  min-height: clamp(520px, 56vw, 760px);
  border-radius: 210px 210px 18px 18px;
  overflow: hidden;
  background: var(--ink-deep);
  box-shadow: 0 34px 80px rgba(16, 38, 31, .19);
}
.olive-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(.74) contrast(1.05); }
.visual-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,38,31,.1) 42%, rgba(16,38,31,.76) 100%), linear-gradient(90deg, rgba(16,38,31,.14), transparent 46%); }
.heritage-stamp {
  position: absolute;
  top: 9%;
  right: 7%;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(245, 240, 228, .7);
  border-radius: 50%;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  background: rgba(16, 38, 31, .14);
  box-shadow: inset 0 0 0 6px rgba(245,240,228,.08);
}
.heritage-stamp span { font-family: Georgia, serif; font-size: 21px; letter-spacing: .1em; }
.heritage-stamp strong { font-size: 12px; letter-spacing: .32em; margin-right: -.32em; }
.heritage-stamp small { margin-top: 5px; font-size: 7px; letter-spacing: .38em; margin-right: -.38em; opacity: .75; }

.product-card {
  position: absolute;
  left: 7%;
  bottom: 7%;
  width: min(74%, 430px);
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px;
  color: var(--cream);
  background: rgba(16, 38, 31, .84);
  border: 1px solid rgba(245, 240, 228, .22);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(16,38,31,.22);
}
.product-card img { width: 104px; height: 132px; object-fit: cover; object-position: center 32%; }
.product-card small { display: block; margin-bottom: 9px; color: #d6b27d; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.product-card strong { font-family: Georgia, serif; font-size: clamp(18px, 1.55vw, 25px); font-weight: 400; line-height: 1.25; }
.visual-caption { position: absolute; right: 5%; bottom: 5%; display: flex; flex-direction: column; gap: 3px; margin: 0; color: rgba(245,240,228,.68); font-size: 8px; letter-spacing: .12em; }

.promise {
  max-width: 1520px;
  margin: 0 auto;
  padding: 28px 0;
  border-top: 1px solid rgba(24, 52, 42, .16);
  border-bottom: 1px solid rgba(24, 52, 42, .16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.promise > p { margin: 0; color: var(--copper); font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.promise-items { display: flex; gap: clamp(25px, 6vw, 86px); }
.promise-items span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.promise-items i { margin-right: 9px; color: var(--copper); font-family: Georgia, serif; font-size: 10px; font-weight: 400; }

.footer {
  max-width: 1520px;
  margin: 0 auto;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(24,52,42,.6);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 42px); }
.footer a { border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer a:hover { color: var(--copper); border-color: var(--copper); }

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: 54px; padding-bottom: 74px; }
  .hero-copy { max-width: 780px; padding-top: 10px; }
  .hero-visual { max-width: 760px; width: 100%; margin: 0 auto; }
  .visual-frame { min-height: 680px; }
}

@media (max-width: 700px) {
  .site-shell { padding: 0 18px; }
  .topbar { height: 90px; }
  .brand-mark { width: 46px; height: 46px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 8px; }
  .topbar-status { width: 10px; height: 10px; padding: 0; border: 0; overflow: visible; color: transparent; }
  .hero { display: flex; flex-direction: column; min-height: auto; padding: 52px 0 58px; gap: 48px; }
  h1 { font-size: clamp(48px, 15vw, 70px); }
  .lead { margin-top: 26px; line-height: 1.65; }
  .actions { align-items: stretch; }
  .button { width: 100%; }
  .hero-visual { width: calc(100% + 12px); }
  .visual-frame { min-height: 555px; border-radius: 150px 150px 12px 12px; }
  .heritage-stamp { width: 96px; height: 96px; top: 8%; right: 6%; }
  .heritage-stamp span { font-size: 17px; }
  .product-card { width: 84%; left: 5%; bottom: 5%; grid-template-columns: 84px 1fr; gap: 14px; }
  .product-card img { width: 84px; height: 112px; }
  .visual-caption { display: none; }
  .promise { align-items: flex-start; flex-direction: column; padding: 26px 0; }
  .promise-items { width: 100%; flex-direction: column; gap: 16px; }
  .promise-items span { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(24,52,42,.1); padding-bottom: 13px; }
  .promise-items i { order: 2; }
  .footer { padding: 28px 0 36px; align-items: flex-start; flex-direction: column-reverse; }
  .footer nav { flex-direction: column; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}