/* aromacoma: Gallery White.
   Layout: a white-cube gallery. Each bottle stands on the page with a museum-style label beneath it.
   Left-aligned throughout; white space does the work that color would. */
:root {
  --bg: #FBFBFB;
  --surface: #FFFFFF;
  --ink: #1C1D1F;
  --muted: #6A6D72;
  --accent: #3A3D42;
  --brand: #556C89;
  --plinth: #F0F1F2;
  --plinth-edge: #E3E4E6;
  --line: #E6E7E9;
  --error: #8A2F2F;

  --display: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* Header */
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; padding-block: 24px;
}
.wordmark { display: block; line-height: 0; }
.wordmark img { height: clamp(34px, 4vw, 44px); width: auto; }
.nav { display: flex; gap: 28px; font-size: 15px; align-items: center; }
.nav a { text-decoration: none; color: var(--muted); padding-block: 4px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.bag-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px;
  border-radius: 11px; background: var(--plinth); color: var(--ink); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }
.lede { font-size: 19px; color: var(--muted); max-width: 46ch; }
.fine { font-size: 14px; color: var(--muted); }
.error { color: var(--error); font-size: 14.5px; }

/* Buttons */
.btn {
  display: inline-block; font: 500 15px var(--body); letter-spacing: .01em; text-align: center;
  background: var(--accent); color: var(--surface); text-decoration: none;
  padding: 14px 26px; border: 1px solid var(--accent); border-radius: 0; cursor: pointer;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn:disabled { background: var(--plinth); border-color: var(--plinth-edge); color: var(--muted); cursor: not-allowed; }
.btn-wide { width: 100%; max-width: 420px; padding-block: 16px; }
.text-link { font-size: 15px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-btn { font: 400 14px var(--body); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }

/* Bottle image frame: the photo's white background blends into the page */
.plinth { display: grid; justify-items: center; }
.plinth img { width: 78%; max-width: 280px; height: auto; }

/* Wall label */
.label { display: grid; gap: 4px; }
.brand { font-size: 13.5px; color: var(--muted); letter-spacing: .02em; }
.label .meta, .meta { color: var(--muted); font-size: 15px; }
.label .price { font-size: 15.5px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sold-out { color: var(--muted); }

.work { display: grid; align-content: start; }
.work-link { display: grid; gap: 20px; text-decoration: none; }
.work-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Sections */
section { padding-block: clamp(52px, 8vw, 104px); }
main > section + section { border-top: 1px solid var(--line); }


.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 12px 24px; margin-bottom: clamp(32px, 4.5vw, 56px);
}
.section-sub { color: var(--muted); margin-top: 8px; }

.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4.5vw, 64px) clamp(20px, 3vw, 40px); }

/* Brand index */
.brand-index h2 { margin-bottom: 32px; }
.brand-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 6vw, 96px); max-width: 860px; }
.brand-cols h3 { font-size: 15px; font-family: var(--body); color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.brand-cols ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.brand-cols li { font-size: 19px; line-height: 1.7; break-inside: avoid; }
.brand-cols a { text-decoration: none; }
.brand-cols a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Sign-up */
.signup .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.signup-copy { display: grid; gap: 14px; }
.signup-copy p { color: var(--muted); max-width: 42ch; }
.form { display: grid; gap: 12px; }
.form label { font-size: 15px; }
.form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.form input[type="email"] {
  flex: 1 1 240px; min-width: 0; font: 400 17px var(--body); color: var(--ink);
  background: var(--surface); border: 1px solid #C9CBCE; border-radius: 0; padding: 13px 16px;
}
.form input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.form .status { font-size: 15px; min-height: 1.6em; }
.form .status.error { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Page heads and shop */
.page-head { display: grid; gap: 18px; padding-block: clamp(28px, 5vw, 64px) clamp(32px, 5vw, 56px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.filter {
  font: 500 14.5px var(--body); color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--line); padding: 8px 16px; border-radius: 0;
}
.filter:hover { color: var(--ink); border-color: #C9CBCE; }
.filter[aria-pressed="true"] { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.shop-grid { padding-block-start: 0; }

/* Product page */
.product { padding-block: clamp(20px, 4vw, 48px) clamp(52px, 8vw, 104px); }
.product-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.product-media .plinth img { width: 80%; max-width: 400px; }
.product-info { display: grid; gap: 12px; align-content: start; max-width: 480px; }
.product-info h1 { font-size: clamp(34px, 4.2vw, 52px); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }
.product-price { font-size: 22px; font-variant-numeric: tabular-nums; margin: 8px 0 12px; }
.product-desc { margin-top: 16px; }
.added { font-size: 15px; min-height: 1.6em; }
.pyramid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15.5px; }
.pyramid dt { color: var(--muted); }
.pyramid dd { margin: 0; }

/* Bag */
.cart-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cart-items { display: grid; gap: 0; }
.cart-line {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: start;
  padding-block: 20px; border-bottom: 1px solid var(--line);
}
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-thumb { display: block; }
.cart-name { font-size: 19px; font-weight: 500; line-height: 1.25; }
.cart-name a { text-decoration: none; }
.cart-qty { display: grid; gap: 8px; justify-items: start; }
.cart-qty select { font: 400 15px var(--body); padding: 6px 10px; border: 1px solid #C9CBCE; background: var(--surface); color: var(--ink); border-radius: 0; }
.cart-price { font-variant-numeric: tabular-nums; text-align: right; min-width: 72px; }
.cart-summary { display: grid; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--line); position: sticky; top: 24px; }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0 0 4px; font-size: 15.5px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals dd:last-of-type { font-size: 13.5px; color: var(--muted); max-width: 18ch; }
.cart-summary .btn-wide { max-width: none; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }
.paypal-slot { min-height: 48px; }
.checkout-status { font-size: 14.5px; min-height: 1.4em; }
.checkout-status.error { color: var(--error); }

/* Prose pages */
.prose { display: grid; gap: 18px; max-width: 64ch; }
.prose p, .prose li { font-size: 17.5px; }
.prose h2 { margin-top: 20px; font-size: clamp(26px, 3vw, 34px); }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: grid; gap: 28px; padding-block: 48px 56px; font-size: 14.5px; color: var(--muted); }
.footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.footer-brand { display: grid; gap: 14px; max-width: 40ch; }
.footer-brand img { height: 30px; width: auto; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 40px; align-content: start; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.disclaimer { font-size: 13px; max-width: 80ch; }
.copyright { font-size: 13px; }

/* 404 and order complete */
.empty-room { min-height: 50vh; display: grid; align-content: center; gap: 22px; padding-block: 48px; }

@media (max-width: 1000px) {
  .works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .signup .wrap, .product-grid, .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav { gap: 20px; }
  .works { gap: 32px 16px; }
  .brand-cols { grid-template-columns: minmax(0, 1fr); }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .cart-qty { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 16px; }
  .cart-price { grid-column: 3; grid-row: 1; }
}


/* Product photos and cut-outs: 2:3 images that fill the card edge to edge */
.plinth img[src^="/img/photos/"] { width: 100%; max-width: none; aspect-ratio: 2 / 3; object-fit: cover; }
.product-media .plinth img[src^="/img/photos/"], .product-media .plinth img[src^="/media/bottles/"] { width: 100%; max-width: 520px; }
.cart-thumb img[src^="/img/photos/"], .cart-thumb img[src^="/media/bottles/"] { aspect-ratio: 2 / 3; object-fit: cover; }

/* ---------- Homepage hero: breakout box ----------
   A rounded panel holds the anime loading-dock illustration, with the headline on the image.
   A tapering blue ribbon forms the curved bottom edge of the panel, and the box of bottles stands
   in front of the panel, spilling over the ribbon onto the white page. Shop now sits below on white. */
.hero { padding-block: 4px 0; }
main > .hero + section { border-top: 0; padding-top: clamp(28px, 4vw, 56px); }
.hero-stage { position: relative; }
.hero-panel {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #1A1430;
  height: clamp(440px, 52vw, 640px); border-radius: 36px 36px 0 0;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 16, 40, .7) 0%, rgba(20, 16, 40, .35) 40%, rgba(20, 16, 40, 0) 70%);
}
.hero-panel h1 {
  position: relative; top: 40%; transform: translateY(-50%);
  max-width: 14ch; padding-left: clamp(24px, 5vw, 72px); color: #fff;
  font-weight: 700; font-size: clamp(32px, 4vw, 58px); line-height: 1.03; letter-spacing: -.025em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero-ribbon { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(80px, 9vw, 130px); }
/* The box: its base sits 120px below the panel edge, so it spills onto the page */
.hero-subject {
  position: absolute; z-index: 2; right: calc(var(--gutter) + 6%); width: clamp(360px, 40vw, 580px); height: auto;
  top: calc(clamp(440px, 52vw, 640px) + 120px); transform: translateY(-100%); pointer-events: none;
}
.hero-cta { position: relative; z-index: 1; margin: 0; padding: 34px clamp(24px, 5vw, 72px) 0; min-height: 130px; }
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 34px; border-radius: 12px;
  background: var(--ink); color: #fff; border-color: var(--ink); font-size: 16px; font-weight: 600;
}
.btn-hero:hover { background: #000; border-color: #000; color: #fff; }

@media (max-width: 760px) {
  .hero-panel { height: 600px; border-radius: 26px 26px 0 0; }
  .hero-bg { object-position: 47% 50%; }
  .hero-panel::before { background: linear-gradient(180deg, rgba(20, 16, 40, .78) 0%, rgba(20, 16, 40, .35) 45%, rgba(20, 16, 40, .2) 100%); }
  .hero-panel h1 { top: auto; transform: none; padding: 30px 24px 0; max-width: 13ch; font-size: clamp(28px, 8vw, 36px); }
  .hero-subject { right: calc(var(--gutter) - 2%); width: 300px; top: calc(600px + 70px); }
  .hero-cta { padding: 84px 0 0; min-height: 0; }
  .btn-hero { width: 100%; }
}

/* Small phones: keep logo and menu on one line */
@media (max-width: 420px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 12px; padding-block: 18px; }
  .wordmark img { height: 28px; }
  .nav { gap: 14px; font-size: 14px; }
}

/* ---------- 3D bottle cards (public/bottles3d.js) ----------
   The still image is a transparent cut-out on a standard 2:3 canvas (tools/fit-cutout.mjs): every bottle is the
   same height with its base on the same line, so a row lines up, and there is no backdrop to match or clip.
   The 3D view is drawn into a canvas over it, lined up exactly, and replaces it once it is ready. */
.bottle { position: relative; width: 100%; aspect-ratio: 2 / 3; }
.plinth .bottle img, .bottle-gl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bottle-gl, .plinth .bottle img { transition: opacity .35s ease; }
.bottle-gl { pointer-events: none; opacity: 0; }
.bottle.gl-on .bottle-gl { opacity: 1; }
.bottle.gl-on img { opacity: 0; }