:root{
  --bg: #0f0f10;
  --card: #131316;
  --ink: #f7f7f5;
  --muted: #c8c8c4;
  --gold: #d4af37;
  --gold-soft: #c7a54a;
  --line: #2a2a2e;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 16px;
  --maxw: 960px;
  --gap: 18px;
  --ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ff-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #faf9f7;
    --card: #ffffff;
    --ink: #0f0f10;
    --muted: #4a4a46;
    --line: #e8e6e2;
    --shadow: 0 6px 24px rgba(0,0,0,.08);
  }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(1200px 800px at 15% -10%, rgba(212,175,55,.08), transparent 40%),
              radial-gradient(900px 600px at 110% 10%, rgba(212,175,55,.06), transparent 40%), var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ff-sans);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page{
  max-width: var(--maxw);
  margin: 40px auto 80px;
  padding: 0 22px;
}

.hero{
  background: linear-gradient(180deg, rgba(212,175,55,.07), transparent 60%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 18px;
  box-shadow: var(--shadow);
}

.brand{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  align-items: center;
}

.logo-wrap{
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(212,175,55,.25), rgba(212,175,55,.12)),
              linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,0,0,.12));
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  position: relative;
}

/* ⬇️ Fill the circle, no square shadow */
.logo-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the circular frame, crop if needed */
  object-position: center;
  display: block;
  filter: none;           /* remove rectangular drop shadow */
}

.logo-wrap.logo-missing .brand-fallback{
  display: grid;
}
.brand-fallback{
  display: none;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--ff-serif);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.wordmark .title{
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.1;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.wordmark .tagline{
  margin: 6px 0 0;
  color: var(--muted);
  font-style: italic;
  font-family: var(--ff-serif);
}

.divider{
  height: 1px; margin: 18px 0 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.menu{
  margin-top: 26px;
  display: grid;
  gap: 18px;
}

.section{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.section-title{
  margin: 0 0 12px;
  font-family: var(--ff-serif);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

.items{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.item .row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
}
.name{ font-weight: 650; letter-spacing: .02em; }
.dots{
  border-bottom: 1px dotted rgba(200,200,200,.35);
  transform: translateY(-2px);
}
.price{
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.desc{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .965rem;
}

.addons{
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 8px;
  box-shadow: var(--shadow);
}
.addon-group{ margin-bottom: 14px; }
.addon-title{
  margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--ff-serif);
  color: var(--ink);
}
.addon-title .suffix{
  color: var(--muted); font-size: .95em; font-style: italic;
}

.pill-row{ margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill{
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
  color: var(--ink); font-size: .95rem;
}

.inline-list{ margin: 0; color: var(--ink); }
.inline-chip em{ color: var(--muted); font-style: normal; margin-left: 4px; }

.kv-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kv-list .row{ display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }

.footer{ margin-top: 26px; text-align: center; color: var(--muted); }
.fineprint{ margin: 14px 0 0; font-size: .9rem; }

/* Print-friendly */
@media print {
  body{ background: #fff; color: #000; }
  .hero, .section, .addons{ box-shadow: none; border-color: #000; }
  .wordmark .title{ color: #000; -webkit-text-fill-color: #000; text-shadow: none; background: none; }
  .price{ color: #000; }
  .pill{ border-color: #000; background: none; }
  .divider{ background: #000; }
}


/* Logo tuning dials */
:root{
  --logo-size: 96px;   /* circle diameter (was 84px) */
  --logo-scale: 1.8;  /* image zoom inside the circle: 1 = no zoom */
  --logo-x: 50%;       /* focal point X (0% left … 100% right) */
  --logo-y: 50%;       /* focal point Y (0% top … 100% bottom) */
}

.logo-wrap{
  width: var(--logo-size);
  height: var(--logo-size);
}

.logo-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--logo-x) var(--logo-y);
  transform: scale(var(--logo-scale));
  transform-origin: center;
}