:root {
  color-scheme: light;
  --paper: #e8e1c9;
  --teal: #5a8f8e;
  --aqua: #7fb3b3;
  --indigo: #2a3d6b;
  --soot: #1e1e1e;
  --cedar: #8a5a3a;
  --dust: #cbb99a;
  --stamp: #b24638;
  --deep-teal: #284d4c;
  --bg: var(--paper);
  --panel: #f3eddb;
  --line: #b3a88d;
  --text: var(--soot);
  --muted: #585041;
  --lime: var(--deep-teal);
  --accent: var(--teal);
  --display: 'Yeseva One', Georgia, serif;
  --body: 'PT Sans', system-ui, sans-serif;
}

body { background: #dcd2b7; font: 15px/1.4 var(--body); }
.app { border-color: var(--line); border-radius: 0; }
header { height: 82px; border-bottom: 1px solid var(--teal); }
main { padding-top: 24px; }
.brand { gap: 11px; color: var(--soot); font-size: 20px; letter-spacing: .11em; }
.brand small { font: 700 10px/1.1 var(--body); letter-spacing: .17em; }
.brand-symbol { display: none; }
.avatar { border: 1px solid var(--teal); background: transparent; color: var(--deep-teal); }

.hero, .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 5vw, 44px);
  border: 1px solid var(--teal);
  border-radius: 5px;
  background: var(--deep-teal);
  color: var(--paper);
}
.hero { min-height: 250px; }
.hero::after, .about-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 66px;
  opacity: .55;
  background: url('seigaiha.svg') repeat-x left bottom / 72px 54px;
  pointer-events: none;
}
.hero-art { display: none; }
.hero h1, .about-hero h1, .page-heading, .empty h2, .dialog-body h2, .section-title h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: normal;
}
.hero h1, .about-hero h1 { color: inherit; font-size: clamp(26px, 5.4vw, 49px); line-height: 1.12; }
.hero p, .about-hero p { color: var(--paper); font-size: 15px; line-height: 1.45; }
.hero .eyebrow, .about-hero .eyebrow, .hero-tag { color: var(--paper); }
.hero-tag { margin-bottom: 24px; }
.hero-tag::before { background: var(--aqua); }
.eyebrow { color: var(--deep-teal); }
.section-title { padding-bottom: 9px; border-bottom: 1px solid var(--teal); }
.section-title span, .sort-row, .sort-row select, .lead, .notice { font-size: 13px; }

.search, .categories button, .secondary, .field input, .field select, .field textarea, .promo input {
  border-color: var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}
.search input { font-size: 16px; }
.search input::placeholder { color: var(--muted); }
.categories button { font-size: 13px; }
.categories button.active, .weights button.active, .primary, .bottom button.active {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
  color: var(--paper);
}
.product, .cart-item, .panel, dialog { border: 1px solid var(--line); border-radius: 5px; }
.product:hover { border-color: var(--deep-teal); }
.product h3 { font-size: 15px; }
.product-info small, .product-info p { font-size: 12px; }
.art { background: #c5d3c3; border-bottom: 1px solid var(--line); }
.art.coffee, .art.soba { background: var(--dust); }
.art.matcha { background: #d5d6b9; }
.art.cocoa { background: #d8bdab; }
.art.accessory { background: #c4cad5; }
.art::before { border-color: #284d4c20; }
.art svg { filter: drop-shadow(0 7px 7px #1e1e1e32); }
.product-label { color: var(--soot); font-size: 10px; }
.add { background: var(--deep-teal); border-color: var(--deep-teal); border-radius: 4px; color: var(--paper); width: 38px; height: 38px; }
.primary { border-radius: 4px; font-size: 15px; }
.bottom { border-color: var(--line); background: var(--panel); border-radius: 6px; box-shadow: 0 5px 22px #1e1e1e26; }
.bottom button { color: var(--deep-teal); border-radius: 3px; font-size: 12px; }
.bottom i { background: var(--stamp); color: #fff7e9; }
.cart-art { border-radius: 4px; }
.field, .summary-row, .consent, .dialog-body p, .brew { color: var(--muted); }
.field input, .field select, .field textarea, .promo input { font-size: 16px; }
.dialog-close { background: var(--panel); border-color: var(--line); width: 36px; height: 36px; }
.quantity, .weights button { border-radius: 4px; }
.toast { background: var(--deep-teal); color: var(--paper); border-radius: 4px; }
.brand-footer, .error { color: var(--stamp); }
.about-hero { padding-bottom: 72px; }

.brand-tickets {
  display: grid;
  gap: 12px;
  width: min(100%, 530px);
  margin: 28px auto;
}
.brand-tickets > h2 {
  margin: 0 0 4px;
  font: 400 clamp(22px, 5vw, 29px)/1.2 var(--display);
}
.brand-ticket {
  --ticket-cut: 11px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(38px, 13vw, 82px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(9px, 3vw, 22px);
  min-height: 130px;
  padding: 16px clamp(14px, 4vw, 25px);
  background: var(--deep-teal);
  color: var(--deep-teal);
  clip-path: polygon(var(--ticket-cut) 0, calc(100% - var(--ticket-cut)) 0, 100% var(--ticket-cut), 100% calc(100% - var(--ticket-cut)), calc(100% - var(--ticket-cut)) 100%, var(--ticket-cut) 100%, 0 calc(100% - var(--ticket-cut)), 0 var(--ticket-cut));
}
.brand-ticket::before, .brand-ticket::after {
  position: absolute;
  z-index: -1;
  content: '';
  clip-path: inherit;
}
.brand-ticket::before { inset: 2px; background: var(--dust); }
.brand-ticket::after { inset: 6px; background: var(--paper); }
.brand-ticket-dark { color: var(--paper); background: var(--teal); }
.brand-ticket-dark::before { background: var(--paper); }
.brand-ticket-dark::after { background: var(--deep-teal); }
.ticket-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.ticket-art svg { width: 60%; height: 60%; }
.ticket-copy h3, .ticket-copy p { margin: 0; }
.ticket-copy h3 { font-size: clamp(18px, 5vw, 30px); line-height: 1.2; }
.ticket-copy p { margin-top: 3px; font-size: 14px; }
.ticket-value {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.ticket-stamp {
  padding: 5px 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.15;
  writing-mode: vertical-rl;
}

@media (max-width: 650px) {
  header { height: 67px; }
  .brand { font-size: 17px; }
  .hero { min-height: 226px; }
  .hero p, .about-hero p { font-size: 14px; }
  .hero::after, .about-hero::after { height: 45px; }
  .product h3 { font-size: 14px; }
  .product-info small, .product-info p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .product, .toast { transition: none; }
  .product:hover { transform: none; }
}