/* Necromancer — shared styles */
:root{
  --bg: #050505;
  --band: #100e0b;
  --line: #2b251d;
  --bone: #e7dcc3;
  --bone-dim: #a99f8a;
  --bone-faint: #6f6757;
  --rust: #b25a3b;
  --rust-bright: #cc6f4c;
  --gold: #c9a24e;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1120px;
}

*{ box-sizing: border-box; }
html{ -webkit-font-smoothing: antialiased; scroll-padding-top: 24px; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.wrap{ width: min(var(--wrap), 100% - 12vw); margin-inline: auto; }
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- header ---------- */
.site-header{
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 28px; flex-wrap: wrap; padding: 18px 0;
}
.brand{
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: 0.14em; text-decoration: none; color: var(--bone);
  display: inline-flex; align-items: center; gap: 10px;
}
.brand svg{ width: 12px; height: 18px; fill: var(--gold); }
.site-nav{ display: flex; align-items: center; gap: 6px 24px; flex-wrap: wrap; font-size: 0.95rem; }
.site-nav a{ text-decoration: none; color: var(--bone-dim); padding: 4px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover{ color: var(--bone); }
.site-nav a[aria-current="page"]{ color: var(--bone); border-bottom-color: var(--rust); }
.site-nav .nav-phone{ color: var(--gold); }

/* ---------- type ---------- */
h1, h2, h3{ font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; color: var(--bone); }
h1{ font-size: clamp(2.6rem, 6.5vw, 4.4rem); letter-spacing: 0.005em; }
h2{ font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3{ font-size: 1.45rem; letter-spacing: 0.01em; }
.lede{ font-size: 1.15rem; color: var(--bone-dim); max-width: 46ch; margin: 18px 0 0; }
p{ max-width: 64ch; }

/* ---------- buttons ---------- */
.btn{
  display: inline-block; font: 600 1rem/1 var(--body); text-decoration: none;
  background: var(--rust-bright); color: var(--bg); border: 0; border-radius: 3px;
  padding: 16px 24px; cursor: pointer;
}
.btn:hover{ background: #d98060; }
.btn[disabled]{ opacity: 0.6; cursor: progress; }
.text-link{ color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--rust); padding-bottom: 1px; }
.text-link:hover{ color: var(--rust-bright); }

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--line); margin-top: 96px; }
.site-footer .wrap{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px;
  padding: 32px 0 40px; font-size: 0.92rem; color: var(--bone-dim);
}
.footer-contact{ display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-contact a{ text-decoration: none; color: var(--bone); }
.footer-contact a:hover{ color: var(--rust-bright); }
.footer-legal{ color: var(--bone-faint); }

/* ---------- bolt divider (from the original page) ---------- */
.divider{ display: flex; align-items: center; gap: 10px; margin: 30px auto 26px; max-width: 220px; }
.divider span{ flex: 1; height: 1px; background: var(--line); }
.divider svg{ width: 14px; height: 20px; flex-shrink: 0; fill: var(--gold); }

/* =========================================================
   HOME
   ========================================================= */
.home-main{
  min-height: calc(100svh - 160px);
  display: flex; align-items: center; justify-content: center;
  padding: 7vh 6vw 4vh; text-align: center;
}
.home-inner{ max-width: 480px; width: 100%; }
.logo-wrap{ display: flex; justify-content: center; margin-bottom: 8px; }
.logo-wrap img{
  width: min(280px, 62vw);
  opacity: 0; transform: scale(0.96);
  animation: power-on 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes power-on{ to{ opacity: 1; transform: scale(1); } }
.body-copy{ font-size: 1rem; line-height: 1.7; color: var(--bone-dim); margin: 0 auto; max-width: 40ch; }
.status{ font-size: 0.92rem; color: var(--bone-dim); margin: 22px 0 0; }
.status .dot{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rust-bright); margin-right: 9px; position: relative; top: -1px;
  box-shadow: 0 0 8px 1px rgba(204,111,76,0.55);
}
.home-cta{ margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.home-about{ font-size: 0.95rem; color: var(--bone-dim); margin: 34px auto 0; max-width: 42ch; font-style: italic; }
.contact{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.contact a{
  color: var(--bone); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.contact a:hover{ color: var(--rust-bright); border-bottom-color: var(--rust); }

/* =========================================================
   VENDING MACHINE ILLUSTRATION
   Proportions measured from the Wittern 3578G front photo.
   All internal sizing uses cqw so it scales as one object.
   ========================================================= */
.machine{
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 2248 / 5069;
  margin-inline: auto;
}
.m-cabinet{
  position: absolute; inset: 0 0 6% 0;
  background:
    radial-gradient(120% 60% at 30% 10%, #2a2a2a 0%, #1b1b1b 55%, #151515 100%);
  border-radius: 0.8cqw;
  box-shadow: inset 0 0 0 0.5cqw #262626, 0 3cqw 8cqw rgba(0,0,0,0.6);
}
.m-base{
  position: absolute; left: 1%; right: 1%; bottom: 0; height: 6.2%;
  background: #111;
  border-radius: 0 0 0.6cqw 0.6cqw;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw;
  padding: 0 8%;
}
.m-base span{ display: block; height: 1.3cqw; background: #262626; border-radius: 0.4cqw; }
.m-sign, .m-display{
  position: absolute; left: 7.65%; width: 57.3%;
  border-radius: 4cqw; overflow: hidden;
}
.m-sign{ top: 3.4%; height: 26.65%; background: #2f2f2f; box-shadow: 0 0 6cqw rgba(201,162,78,0.08); }
.m-sign img{ width: 100%; height: 100%; object-fit: cover; }
.m-display{
  top: 35.5%; height: 26.85%;
  background: linear-gradient(180deg, #eef1f1 0%, #dfe4e5 100%);
  display: grid; grid-template-rows: minmax(0, 44fr) minmax(0, 11fr) minmax(0, 45fr);
}
.m-row{
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: end; padding: 1.2cqw 1.5cqw 1cqw; gap: 0.6cqw; min-height: 0;
}
.m-shelf{
  background: #141414;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr;
  color: #f2f2f2; font: 700 2.3cqw/1 var(--body); text-align: center; align-items: center;
}
.m-slot{
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  height: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center;
  border-radius: 1cqw; position: relative;
}
button.m-slot{ cursor: pointer; }
button.m-slot:hover .m-can, button.m-slot:hover img{ transform: translateY(-0.8cqw); }
button.m-slot[aria-pressed="true"]{ box-shadow: inset 0 0 0 0.7cqw var(--gold); }
button.m-slot:focus-visible{ outline: 0.8cqw solid var(--gold); outline-offset: -0.8cqw; }
.m-slot img{
  height: 86%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  transition: transform 0.15s ease;
}
.m-can{
  width: 66%; height: 72%;
  border-radius: 1.2cqw 1.2cqw 1cqw 1cqw;
  background: linear-gradient(90deg, #2b2620 0%, #4a4135 45%, #2b2620 100%);
  box-shadow: inset 0 1.4cqw 0 #8d857a, inset 0 -1cqw 0 #6d665c;
  display: flex; align-items: center; justify-content: center;
  color: var(--bone); font: 600 3cqw/1 var(--display);
  transition: transform 0.15s ease;
}
.m-panel{
  position: absolute; left: 71.26%; width: 19.62%; top: 25.5%; height: 37.3%;
  background: linear-gradient(180deg, #ecebe7, #d6d4ce);
  border-radius: 3cqw;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 4cqw; gap: 3.5cqw;
}
.m-readout{
  width: 72%; background: #050505; border-radius: 0.6cqw;
  color: var(--gold); text-align: center; padding: 1.4cqw 0;
  font: 600 3.6cqw/1 var(--display); letter-spacing: 0.04em; white-space: nowrap;
}
.m-keypad{
  width: 64%; background: #1a1a1a; border-radius: 0.6cqw; padding: 1.6cqw;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw;
}
.m-keypad span{ aspect-ratio: 1; border-radius: 50%; background: #3a3a3a; box-shadow: inset 0 -0.4cqw 0 #111; }
.m-bill{ width: 56%; height: 8%; background: #1a1a1a; border-radius: 0.6cqw; box-shadow: inset 0 -2.4cqw 0 #070707; }
.m-coin{ width: 56%; display: flex; justify-content: space-between; align-items: center; }
.m-coin .slot{ width: 62%; aspect-ratio: 1; background: #141414; border-radius: 0.6cqw; }
.m-coin .return{ width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--rust-bright); box-shadow: 0 0 0 0.6cqw #222; }
.m-lock{
  position: absolute; left: 92.5%; width: 3.8%; top: 45.6%; height: 4.6%;
  background: #0d0d0d; border-radius: 0.5cqw; box-shadow: inset 0 0 0 0.4cqw #2a2a2a;
}
.m-bin{
  position: absolute; left: 20.5%; width: 43.9%; top: 70%; height: 11%;
  border-radius: 6cqw; background: #050505;
  box-shadow: 0 0 0 2.6cqw #393939, inset 0 3cqw 4cqw #000;
}
.m-coinreturn{
  position: absolute; left: 72.5%; width: 6.5%; top: 75.3%; height: 2.4%;
  background: #0a0a0a; box-shadow: 0 0 0 0.5cqw #333;
}

/* =========================================================
   HOST A MACHINE
   ========================================================= */
/* printed-paper grain over the whole page, echoing the sticker-style logo */
.grain::before{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
.wordmark{
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.02;
}
.section{ padding: 104px 0 0; }

/* hero */
.host-hero .wrap{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
  padding-top: 56px;
}
.host-hero h1{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.host-hero .lede{ font-size: 1.12rem; max-width: 44ch; }
.hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.hero-actions .phone{ color: var(--bone-dim); text-decoration: none; }
.hero-actions .phone:hover{ color: var(--bone); }

.hero-machine{ position: relative; width: min(340px, 100%); margin-inline: auto; padding: 28px 0 10px; }
.hero-machine::before{
  content: ""; position: absolute; inset: 8% -18% 12%; z-index: -1;
  background: radial-gradient(closest-side, rgba(201,162,78,0.16), rgba(201,162,78,0) 100%);
}
.hero-machine .bolt{ position: absolute; width: 34px; height: 48px; fill: var(--gold); opacity: 0; animation: zap 0.5s ease-out forwards; }
.hero-machine .bolt.b1{ left: -15%; top: 8%;  transform: rotate(-35deg); animation-delay: 0.5s; }
.hero-machine .bolt.b2{ left: -20%; top: 30%; transform: rotate(-80deg) scale(0.8); animation-delay: 0.62s; }
.hero-machine .bolt.b3{ left: -14%; top: 52%; transform: rotate(-115deg) scale(0.9); animation-delay: 0.74s; }
.hero-machine .bolt.b4{ right: -15%; top: 6%;  transform: rotate(35deg); animation-delay: 0.56s; }
.hero-machine .bolt.b5{ right: -21%; top: 28%; transform: rotate(80deg) scale(0.8); animation-delay: 0.68s; }
.hero-machine .bolt.b6{ right: -14%; top: 50%; transform: rotate(115deg) scale(0.9); animation-delay: 0.8s; }
@keyframes zap{ 0%{ opacity: 0; } 40%{ opacity: 1; } 60%{ opacity: 0.35; } 100%{ opacity: 0.9; } }

/* what you get: a ruled 2x2 list, not cards */
.offer{ display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; align-items: start; }
.offer-list{ display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.offer-list > div{ padding: 22px 28px 24px 0; border-top: 1px solid var(--line); }
.offer-list > div:nth-child(even){ padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
.offer-list dt{ font: 600 1.35rem/1.15 var(--display); color: var(--bone); display: flex; gap: 10px; align-items: baseline; }
.offer-list dt svg{ width: 10px; height: 15px; fill: var(--gold); flex-shrink: 0; }
.offer-list dd{ margin: 8px 0 0; color: var(--bone-dim); }

/* what's inside band */
.band{ background: var(--band); border-block: 1px solid var(--line); }
.inside .wrap{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; padding: 64px 0; }
.inside p{ color: var(--bone-dim); margin: 14px 0 18px; }
.can-strip{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; container-type: inline-size; }
.can-strip .m-slot{ aspect-ratio: 1 / 2; }
.can-strip .m-can{ width: 100%; height: 100%; font-size: 2.2cqw; border-radius: 0.8cqw; }
.can-strip .m-slot{ align-items: flex-end; }
.can-strip img{ width: auto; max-width: 100%; object-fit: contain; }

/* where + how */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split p{ color: var(--bone-dim); margin: 16px 0 0; }
.steps{ list-style: none; padding: 0; margin: 18px 0 0; counter-reset: step; }
.steps li{ counter-increment: step; display: grid; grid-template-columns: 40px 1fr; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--bone-dim); }
.steps li:first-child{ border-top: 1px solid var(--line); }
.steps li::before{ content: counter(step); font: 600 1.5rem/1.1 var(--display); color: var(--gold); }

/* founder note: a bone-colored card, like a sticker on the machine */
.note{
  max-width: 640px; margin: 0 auto; position: relative;
  background: var(--bone); color: #1b1712; border-radius: 6px;
  padding: 40px 44px 34px; transform: rotate(-1.2deg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.note::after{
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(27,23,18,0.25); border-radius: 3px; pointer-events: none;
}
.note blockquote{ margin: 0; }
.note p{ margin: 0 0 14px; max-width: none; font-size: 1.05rem; line-height: 1.65; }
.note .sig{ font: 600 1.35rem/1 var(--display); color: var(--rust); margin: 22px 0 0; }
.note .sig span{ display: block; font: 400 0.85rem/1.4 var(--body); color: #5b5246; margin-top: 6px; }
.note .note-bolt{ position: absolute; right: 28px; top: -22px; width: 30px; height: 44px; fill: var(--gold); transform: rotate(18deg); }

/* ---------- request form ---------- */
.request .wrap{ display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 48px; }
.request-intro p{ color: var(--bone-dim); }
.request-intro a{ color: var(--bone); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 0.9rem; color: var(--bone-dim); }
.field .opt{ color: var(--bone-faint); }
.field input, .field select, .field textarea{
  font: 400 1rem/1.4 var(--body); color: var(--bone);
  background: #0d0c0a; border: 1px solid #3a3227; border-radius: 3px; padding: 12px 14px;
  width: 100%;
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); outline: none; }
.field input:user-invalid, .field select:user-invalid{ border-color: var(--rust-bright); }
.trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot{ grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.privacy{ font-size: 0.85rem; color: var(--bone-faint); margin: 0; }
.form-status{ margin: 0; min-height: 1.6em; }
.form-status.error{ color: var(--rust-bright); }
.form-done{ border-left: 2px solid var(--gold); padding: 8px 0 8px 22px; }
.form-done h3{ margin-bottom: 8px; }
.form-done p{ color: var(--bone-dim); margin: 0; }

/* =========================================================
   OUR DRINKS
   ========================================================= */
.drinks-layout .wrap{
  display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; padding-top: 64px;
}
.drinks-machine{ position: sticky; top: 24px; }
.drinks-machine .hint{ font-size: 0.85rem; color: var(--bone-faint); text-align: center; margin: 14px auto 0; }
.drinks-head p{ color: var(--bone-dim); }
.drink-group{ margin-top: 44px; }
.drink-group h2{ font-size: 1.6rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.drink-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; margin-top: 22px; }
.drink{ scroll-margin-top: 24px; border-radius: 4px; transition: box-shadow 0.2s ease; padding: 0 0 6px; }
.drink.is-active{ box-shadow: 0 0 0 2px var(--gold); }
.drink-photo{
  aspect-ratio: 4 / 5; background: #0e0d0b; border: 1px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.drink-photo img{ width: 100%; height: 100%; object-fit: contain; padding: 9% 12%; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)); }
.drink-photo.placeholder{ color: var(--bone-faint); font: 500 1.1rem/1.2 var(--display); text-align: center; padding: 16px; }
.drink-sel{ font-size: 0.8rem; color: var(--gold); margin: 14px 0 0; }
.drink h3{ margin-top: 4px; font-size: 1.35rem; }
.drink .origin{ font-size: 0.88rem; color: var(--bone-dim); margin: 4px 0 0; }
.drink .desc{ font-size: 0.95rem; color: var(--bone-dim); margin: 8px 0 0; }
.drink-link{ display: inline-block; margin-top: 10px; font-size: 0.88rem; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--rust); }
.drink-link::after{ content: " ↗"; color: var(--gold); }
.drink-link:hover{ color: var(--rust-bright); }
.drinks-note{ margin-top: 40px; color: var(--bone-faint); font-size: 0.9rem; }
.drinks-cta{ margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.drinks-cta p{ color: var(--bone-dim); margin: 10px 0 20px; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .host-hero .wrap{ grid-template-columns: 1fr; padding-top: 36px; }
  .hero-machine{ width: min(230px, 62vw); }
  .offer, .inside .wrap, .split, .request .wrap{ grid-template-columns: 1fr; gap: 28px; }
  .drinks-layout .wrap{ grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .drinks-machine{ position: static; max-width: 250px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px){
  .section{ padding-top: 72px; }
  .offer-list{ grid-template-columns: 1fr; }
  .offer-list > div, .offer-list > div:nth-child(even){ padding: 18px 0 20px; border-left: 0; }
  .note{ padding: 32px 26px 28px; transform: rotate(-0.8deg); }
  .form-grid{ grid-template-columns: 1fr; }
  .can-strip{ grid-template-columns: repeat(5, 1fr); }
  .drink-grid{ grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .drink h3{ font-size: 1.15rem; }
  .can-strip .m-can{ font-size: 4cqw; }
  .contact{ flex-direction: column; gap: 12px; }
  .site-nav{ gap: 6px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .logo-wrap img{ animation: none; opacity: 1; transform: none; }
  .hero-machine .bolt{ animation: none; opacity: 0.9; }
  *{ transition: none !important; }
  html{ scroll-behavior: auto; }
}