:root {
  --paper: #f3f0e8;
  --paper-deep: #e8e2d6;
  --ink: #172018;
  --muted: #697067;
  --forest: #1b2c23;
  --forest-soft: #2f4135;
  --sage: #a8b19c;
  --lime: #d9e6a7;
  --line: rgba(23, 32, 24, 0.14);
  --white: #fffdf8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  background: #242a25;
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(181, 194, 172, 0.14), transparent 28rem),
    linear-gradient(145deg, #1e2520, #343a34);
  color: var(--ink);
}

html.sheet-open,
body.sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #c8d98e;
  outline-offset: 3px;
}

img {
  display: block;
  width: 100%;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.app {
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.42);
}

.screen {
  display: none;
  min-height: 100vh;
  animation: screen-in 320ms ease both;
}

.screen.active {
  display: block;
}

@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-pad {
  padding-inline: 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding-top: max(10px, env(safe-area-inset-top));
}

.home-topbar {
  padding-inline: 22px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.22em;
}

.wordmark-mark {
  display: block;
  width: 18px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.wordmark-mark circle { fill: currentColor; stroke: none; }

.avatar,
.large-avatar {
  display: grid;
  place-items: center;
  border: 1px solid rgba(23, 32, 24, 0.22);
  border-radius: 50%;
  background: #e5dfd2;
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.08em;
}

.avatar {
  width: 38px;
  height: 38px;
}

.eyebrow,
.chapter {
  margin: 0;
  color: #6d746a;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.16em;
  line-height: 1.3;
}

.home-topbar + .scan-hero { margin-top: 12px; }

.scan-hero {
  position: relative;
  display: flex;
  width: calc(100% - 24px);
  min-height: 264px;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 3px;
  background: #142019;
  color: var(--white);
  text-align: left;
  box-shadow: 0 16px 38px rgba(21, 36, 27, 0.16);
}

.scan-hero-image {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: 66% 54%;
  transform: scale(1.02);
  transition: transform 700ms ease;
}

.scan-hero:hover .scan-hero-image { transform: scale(1.045); }

.scan-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,15,11,.9) 0%, rgba(8,15,11,.72) 44%, rgba(8,15,11,.08) 78%);
}

.scan-hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

.scan-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 62%;
  padding: 30px 0 28px 27px;
}

.scan-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #cad1c7;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.16em;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(217, 230, 167, 0.12);
}

.scan-copy strong {
  max-width: 210px;
  margin-top: 28px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.03;
  text-wrap: balance;
}

.scan-hero.headline-changing #scan-hero-title {
  animation: scan-headline-in 460ms ease both;
}

@keyframes scan-headline-in {
  from { opacity: .28; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.scan-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 34px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.8;
}

.wine-discovery { padding-top: 30px; }
.wine-discovery-heading h2 { margin: 8px 0 8px; font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.035em; line-height: 1.06; }
.wine-discovery-heading > p:last-child { max-width: 340px; margin: 0; color: #697067; font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.wine-search-form { display: grid; min-height: 62px; grid-template-columns: 21px minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin-top: 20px; padding: 0 9px 0 17px; border: 1px solid rgba(23,32,24,.17); border-radius: 15px; background: #e9e5dc; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.wine-search-form:focus-within { border-color: rgba(23,32,24,.48); background: #eeebe3; box-shadow: 0 10px 26px rgba(23,32,24,.08); }
.wine-search-form > svg { width: 19px; fill: none; stroke: #6d756c; stroke-linecap: round; stroke-width: 1.5; }
.wine-search-form input { z-index: 1; min-width: 0; padding: 18px 0; grid-column: 2; grid-row: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--serif); font-size: 16px; }
.wine-search-form input::placeholder { color: #7e847c; opacity: 1; }
.wine-search-form button { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border-radius: 50%; background: var(--forest); color: white; font-size: 17px; }
.wine-search-placeholder { min-width: 0; overflow: hidden; grid-column: 2; grid-row: 1; color: #7e847c; font-family: var(--serif); font-size: 16px; pointer-events: none; white-space: nowrap; transition: opacity 140ms ease; }
.wine-search-placeholder > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wine-search-form:focus-within .wine-search-placeholder,
.wine-search-form.has-value .wine-search-placeholder { opacity: 0; }
.wine-search-examples-row { display: grid; margin-top: 10px; padding-right: 9px; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.wine-search-examples { display: flex; min-width: 0; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.wine-search-examples::-webkit-scrollbar { display: none; }
.wine-search-examples button { padding: 7px 10px; border: 1px solid rgba(23,32,24,.15); border-radius: 99px; background: transparent; color: #60685f; font-size: 8px; letter-spacing: .03em; }
#refresh-wine-search-examples { width: 26px; height: 26px; justify-self: center; }
#refresh-wine-search-examples svg { width: 14px; height: 14px; }
.wine-search-examples.is-changing button { animation: discovery-prompt-in 420ms ease both; }
.wine-search-examples.is-changing button { pointer-events: none; }
.wine-search-examples.is-changing button:nth-child(2) { animation-delay: 55ms; }
.wine-search-examples.is-changing button:nth-child(3) { animation-delay: 110ms; }
@keyframes discovery-prompt-in { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.bottle {
  position: absolute;
  right: 26px;
  bottom: -32px;
  width: 112px;
  height: 292px;
  filter: drop-shadow(-20px 18px 20px rgba(0,0,0,.28));
  transition: transform 400ms ease;
}

.scan-hero:hover .bottle {
  transform: rotate(1.5deg) translateY(-5px);
}

.bottle-neck {
  position: absolute;
  top: 0;
  left: 37px;
  width: 39px;
  height: 75px;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(90deg, #18291f, #405346 46%, #122018);
}

.bottle-neck::before {
  position: absolute;
  top: -4px;
  left: -2px;
  width: 43px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, #222a22, #4b5145 50%, #1c241d);
  content: "";
}

.bottle-body {
  position: absolute;
  top: 59px;
  width: 112px;
  height: 235px;
  border-radius: 40px 40px 17px 17px / 36px 36px 9px 9px;
  background: linear-gradient(90deg, #101c15, #34483a 26%, #4c6251 43%, #25392c 62%, #0e1812 95%);
  box-shadow: inset 10px 0 10px rgba(255,255,255,.03), inset -8px 0 14px rgba(0,0,0,.28);
}

.bottle-label {
  position: absolute;
  top: 66px;
  left: 12px;
  display: flex;
  width: 88px;
  height: 101px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(72, 62, 43, .45);
  background: #eee7d5;
  color: #253125;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  text-align: center;
  transform: rotate(-1deg);
}

.bottle-label span {
  margin: 7px 0 6px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .05em;
  line-height: .82;
}

.bottle-label small { font-size: 5.5px; font-weight: 750; letter-spacing: .13em; }

.scan-corner {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  opacity: .7;
  border-color: #dfe7d3;
}

.corner-one { top: 15px; left: 15px; border-top: 1px solid; border-left: 1px solid; }
.corner-two { top: 15px; right: 15px; border-top: 1px solid; border-right: 1px solid; }
.corner-three { bottom: 15px; left: 15px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-four { right: 15px; bottom: 15px; border-right: 1px solid; border-bottom: 1px solid; }

.content-block {
  padding-top: 45px;
}

.latest-stories-section { overflow: hidden; }
.home-section-heading {
  margin: 0;
  color: #6d746a;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-section-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.home-section-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}
.latest-stories-rail {
  display: flex;
  width: calc(100% + 22px);
  margin-right: -22px;
  padding-right: 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  gap: 12px;
}
.latest-stories-rail::-webkit-scrollbar { display: none; }
.latest-story-item {
  flex: 0 0 calc(100% - 32px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-heading h2:not(.home-section-heading),
.cellar-glance h2:not(.home-section-heading) {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.025em;
}

.text-button {
  padding: 6px 0;
  background: transparent;
  color: #5f675d;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.latest-card {
  position: relative;
  width: 100%;
  height: 306px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  appearance: none;
  background: transparent;
  color: white;
  text-align: left;
}

.latest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.latest-card:hover img { transform: scale(1.025); }

.latest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12,20,15,.04) 20%, rgba(10,18,13,.78) 100%);
}

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px;
  color: white;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .13em;
}

.light-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(19,30,23,.38);
  backdrop-filter: blur(8px);
}

.light-pill svg {
  width: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.latest-copy {
  position: absolute;
  right: 20px;
  bottom: 21px;
  left: 20px;
  display: flex;
  padding-right: 54px;
  flex-direction: column;
  align-items: flex-start;
}

.latest-copy .vintage {
  margin-bottom: 6px;
  color: #dce1d9;
  font-size: 9px;
  letter-spacing: .16em;
}

.latest-copy strong {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}

.latest-copy .latest-estate {
  margin-top: 8px;
  color: #f1f2ed;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: -.015em;
  line-height: 1.08;
}

.latest-copy .latest-context {
  margin-top: 5px;
  color: #d1d8d0;
  font-size: 10px;
  line-height: 1.2;
}

.round-arrow {
  position: absolute;
  right: 19px;
  bottom: 21px;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  font-size: 15px;
}

.cellar-glance {
  padding-top: 48px;
  padding-bottom: 120px;
}

.compact-heading { margin-bottom: 20px; }
.cellar-glance .wine-map-heading { margin: 48px 0 20px; }

.map-preview {
  position: relative;
  width: 100%;
  height: 164px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(23,32,24,.14);
  border-radius: 14px;
  background: #cbd9d3;
  color: var(--ink);
  cursor: pointer;
  isolation: isolate;
}

.map-preview:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.map-preview::after { position: absolute; z-index: 400; right: 0; bottom: 0; left: 0; height: 68px; background: linear-gradient(to bottom, transparent, rgba(244,241,232,.95)); content: ""; pointer-events: none; }
.home-wine-map { position: absolute; inset: 0; width: 100%; height: 100%; background: #cbd9d3; font-family: var(--sans); }
.home-wine-map .maplibregl-canvas { filter: saturate(.72) sepia(.05) brightness(1.03) contrast(.9); }
.home-wine-map .leaflet-control-attribution { z-index: 430; padding: 2px 5px; background: rgba(246,243,235,.82); color: #7c837c; font-size: 5px; line-height: 1.25; }
.home-wine-map .leaflet-control-attribution a { color: #59675d; }
.home-wine-map .leaflet-tooltip.home-map-label { margin-top: -2px; padding: 3px 5px; border: 0; border-radius: 3px; background: rgba(25,43,33,.88); color: white; box-shadow: 0 2px 7px rgba(20,32,25,.18); font-size: 6px; font-weight: 750; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.home-wine-map .leaflet-tooltip.home-map-label::before { display: none; }
.map-preview-caption { position: absolute; z-index: 440; bottom: 14px; left: 14px; pointer-events: none; }
.map-preview-caption span { color: #5f685f; font-family: var(--serif); font-size: 11px; }
.map-preview-arrow { position: absolute; z-index: 440; right: 12px; bottom: 11px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(24,39,30,.32); border-radius: 50%; background: rgba(248,246,239,.82); font-size: 11px; pointer-events: none; }

.collection-heading { margin: 0 0 10px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-row button {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.stats-row button:first-child { padding-left: 12px; }
.stats-row button:last-child { border-right: 0; }
.stats-row button:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.stats-row strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.stats-row span { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.stats-row i { position: absolute; top: 20px; right: 11px; color: #80877f; font-size: 8px; font-style: normal; }
.collection-stats-row {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.collection-stats-row button {
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.collection-stats-row button[data-empty="false"] {
  display: grid;
  min-height: 68px;
  padding: 12px 0 11px;
  border-top: 1px solid var(--line);
  grid-template-columns: 39px minmax(0, 1fr) 13px;
  align-items: center;
}
.collection-stats-row button[data-empty="false"] strong { position: static; grid-column: 1; align-self: center; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; }
.collection-stats-row button[data-empty="false"] span { grid-column: 2; margin: 0; color: var(--ink); font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: -.015em; line-height: 1.08; text-transform: none; }
.collection-stats-row button[data-empty="false"] i { position: static; display: block; grid-column: 3; align-self: center; color: #737b73; font-size: 9px; font-style: normal; }
.collection-discover-heading { padding-top: 23px; border-top: 1px solid var(--line); grid-column: 1 / -1; }
.collection-discover-heading .eyebrow { margin: 0 0 4px; color: #5e685f; }
.collection-stats-row button[data-empty="true"] {
  display: grid;
  min-height: 39px;
  padding: 9px 0 8px;
  border: 0;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr auto;
  align-items: center;
}
.collection-stats-row button[data-empty="true"] i { display: none; }
.collection-stats-row button[data-empty="true"] strong { position: static; grid-column: 2; color: #7b837b; font-family: var(--serif); font-size: 16px; font-weight: 400; line-height: 1; }
.collection-stats-row button[data-empty="true"] span { grid-row: 1; grid-column: 1; margin: 0; color: #5e675f; font-family: var(--sans); font-size: 8px; font-weight: 720; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }

.bottom-nav {
  position: fixed;
  z-index: 20;
  right: max(calc((100vw - 430px) / 2), 0px);
  bottom: 0;
  left: max(calc((100vw - 430px) / 2), 0px);
  display: grid;
  width: min(100%, 430px);
  min-height: 68px;
  margin: 0 auto;
  padding: 2px 34px max(6px, env(safe-area-inset-bottom));
  grid-template-columns: 1fr 66px 1fr;
  align-items: center;
  border-top: 1px solid rgba(23,32,24,.075);
  background: rgba(246,243,235,.95);
  box-shadow: 0 -8px 24px rgba(28,37,31,.035);
  backdrop-filter: blur(20px);
}

.nav-item {
  display: flex;
  width: 100%;
  height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: #858a82;
  font-size: 10px;
  font-weight: 580;
  line-height: 1;
}

.nav-item.active { color: var(--ink); }
.nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.nav-item:first-child svg path:first-child { fill: transparent; }

.nav-scan {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  place-items: center;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--forest);
  color: white;
  box-shadow: 0 5px 14px rgba(20,35,26,.18), 0 0 0 1px rgba(23,32,24,.035);
}

.nav-scan svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }

/* Story */
.story-screen,
.history-screen {
  position: relative;
  z-index: 1;
  background: var(--paper);
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
}

.story-screen.screen-back-dragging,
.story-screen.screen-back-settling,
.history-screen.screen-back-dragging,
.history-screen.screen-back-settling {
  z-index: 65;
  animation: none;
  box-shadow: 0 0 42px rgba(14, 22, 17, .24);
  backface-visibility: hidden;
  will-change: transform;
}

.story-screen.screen-back-dragging,
.history-screen.screen-back-dragging {
  transition: none;
  user-select: none;
}

.story-screen.screen-back-settling,
.history-screen.screen-back-settling {
  transition: transform 220ms cubic-bezier(.2, .78, .28, 1), box-shadow 220ms ease;
}

.story-scroll-back {
  position: fixed;
  z-index: 70;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  left: max(16px, calc(50% - 199px));
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(24,39,30,.92);
  box-shadow: 0 8px 24px rgba(19,28,22,.2);
  color: white;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(12px);
}

.story-scroll-back svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.story-scroll-back.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.story-hero {
  position: relative;
  height: min(630px, 70vh);
  min-height: 540px;
  overflow: hidden;
  background: #233329;
  color: white;
}

.story-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.08) saturate(1.04) contrast(.98);
}

.story-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,14,10,.15), rgba(11,20,14,.025) 35%, rgba(10,17,12,.86));
}

.floating-topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, calc(env(safe-area-inset-top) + 8px)) 18px 0;
}

.floating-actions { display: flex; gap: 9px; }

.glass-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(16, 25, 19, .26);
  color: white;
  backdrop-filter: blur(10px);
}

.glass-button svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.favorite-button.saved { border-color: rgba(238,242,211,.75); background: rgba(238,242,211,.2); }
.favorite-button.saved svg { fill: #eef2d3; }
.favorite-button:disabled { opacity: .58; }

.story-title {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 37px;
  left: 22px;
}

.story-title .verified-pill { margin-bottom: 24px; background: rgba(16,29,20,.34); backdrop-filter: blur(8px); }
.story-title > p { margin: 0 0 9px; color: #d7ddd4; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.story-title h1 { max-width: 370px; margin: 0; overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(35px, 9.2vw, 42px); font-weight: 400; letter-spacing: -.044em; line-height: 1; text-wrap: balance; }
.story-estate { display: block; max-width: 360px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: #f0f2ed; font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.018em; line-height: 1.08; text-align: left; text-wrap: balance; }
.story-estate[hidden] { display: none; }
.story-estate:focus-visible { outline: 2px solid #e6efbd; outline-offset: 4px; }
.story-context-tags { display: flex; max-width: 360px; margin-top: 16px; flex-wrap: wrap; gap: 7px; }
.story-context-tags button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; background: rgba(14,25,18,.28); color: #e5e9e2; font-size: 8px; font-weight: 650; letter-spacing: .04em; backdrop-filter: blur(8px); }
.story-context-tags button:focus-visible { outline: 2px solid #e6efbd; outline-offset: 2px; }

.story-content { overflow: hidden; }

.story-lede { padding-top: 36px; }

.story-deck {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -.026em;
  line-height: 1.28;
}

.provenance-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.source-ring {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 14px;
}

.provenance-note div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.provenance-note strong { font-size: 10px; }
.provenance-note small { color: var(--muted); font-size: 9px; }
.provenance-note button { padding: 8px 0; background: transparent; color: var(--ink); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }

.story-mode-panel { padding-top: 22px; }
.story-mode-switch { display: grid; padding: 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 99px; background: #deddd4; }
.story-mode-switch button { display: flex; min-width: 0; min-height: 44px; padding: 8px 7px; align-items: center; justify-content: center; border-radius: 99px; background: transparent; color: #6d736b; }
.story-mode-switch strong { font-size: 13px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.story-mode-switch button.active { background: var(--forest); color: white; box-shadow: 0 5px 16px rgba(22,34,26,.18); }

.table-brief {
  margin: 22px 12px 0;
  padding: 34px 28px 40px;
  border-radius: 3px;
  background: #e4e8cf;
  color: #344037;
}

.brief-essence p { margin: 0; font-family: var(--serif); font-size: 23px; letter-spacing: -.024em; line-height: 1.28; text-wrap: pretty; }

.brief-block { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(23,32,24,.15); }
.brief-service-block { margin-top: 0; padding-top: 0; border-top: 0; }
.brief-profile,
.brief-service { margin: 0; }
.brief-profile > div,
.brief-service > div { display: grid; padding: 11px 0; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid rgba(23,32,24,.12); align-items: baseline; }
.brief-service > div:last-child { border-bottom: 0; }
.brief-profile dt,
.brief-service dt { color: #687062; font-size: 8px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; }
.brief-profile dd,
.brief-service dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-family: var(--serif); font-size: 16px; letter-spacing: -.014em; line-height: 1.3; }
.brief-distinction p { margin: 0; font-family: var(--serif); font-size: 16px; letter-spacing: -.012em; line-height: 1.48; text-wrap: pretty; }
.brief-service dd { font-size: 17px; }

.sommelier-invite-wrap {
  padding-top: 28px;
  padding-bottom: 30px;
  background: var(--forest);
  color: white;
}
.sommelier-invite-wrap > .chapter { color: #aeb7aa; font-size: 8px; }
.ask-suggestion-row { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 9px; }
.inline-suggestion-row { margin-top: 15px; }
.inline-ask-suggestions { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inline-ask-suggestions button { min-height: 44px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: transparent; color: #d7ded7; font-size: 11px; line-height: 1.25; text-wrap: balance; }
.inline-ask-suggestions button:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.07); }
.prompt-refresh { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(23,32,24,.2); border-radius: 50%; background: transparent; color: var(--ink); transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.prompt-refresh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.prompt-refresh.dark { width: 38px; height: 38px; border-color: rgba(255,255,255,.28); color: #dfe4dd; }
.prompt-refresh:hover { transform: rotate(20deg); }
.prompt-refresh.light:hover { border-color: var(--forest); background: rgba(23,32,24,.06); }
.prompt-refresh.dark:hover { border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.08); }
.inline-ask-form { display: flex; min-height: 54px; margin-top: 14px; align-items: center; padding: 5px 5px 5px 17px; border: 1px solid rgba(255,255,255,.36); border-radius: 99px; background: rgba(255,255,255,.06); }
.inline-ask-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: white; font-size: 16px; }
.inline-ask-form input::placeholder { color: #aeb6ae; }
.inline-ask-form button { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e1ebae; color: #18231b; font-size: 16px; transition: transform 180ms ease; }
.inline-ask-form button:hover { transform: translateX(2px); }
.inline-ask-trust { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: #9fa89e; font-size: 8px; font-weight: 500; letter-spacing: .03em; }
.inline-ask-trust > span { width: 5px; height: 5px; border-radius: 50%; background: #d7e6a0; }
.inline-ask-trust b { color: inherit; font-weight: 700; }

.sommelier-sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 430px);
  max-height: min(88dvh, 780px);
  margin: 0 auto;
  padding: 10px 22px max(26px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--forest);
  color: white;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.sommelier-sheet[open] { animation: sheet-up 280ms ease both; }
.sommelier-sheet::backdrop { background: rgba(8,13,9,.7); backdrop-filter: blur(4px); }
.sommelier-sheet header { display: flex; align-items: flex-start; justify-content: space-between; }
.sommelier-sheet header .eyebrow { color: #aeb7aa; }
.sommelier-sheet header h2 { margin: 5px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.sommelier-sheet header button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: white; font-family: var(--serif); font-size: 22px; }
.sommelier-sheet .sheet-handle { background: rgba(255,255,255,.28); }
.dialog-suggestion-row { margin: 22px 0 14px; }
.ask-suggestions { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; }
.ask-suggestions button { min-height: 44px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.27); border-radius: 99px; background: transparent; color: #e1e5df; font-size: 11px; line-height: 1.25; text-align: left; text-wrap: balance; }
.ask-wine-form { display: flex; min-height: 54px; align-items: center; padding: 5px 5px 5px 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; background: rgba(255,255,255,.06); }
.ask-wine-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: white; font-size: 16px; }
.ask-wine-form input::placeholder { color: #aeb6ae; }
.ask-wine-form button { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e1ebae; color: #18231b; font-size: 16px; }
.ask-wine-form button:disabled { opacity: .45; }
.ask-trust { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #9fa89e; font-size: 8px; letter-spacing: .04em; }
.ask-trust-dot { width: 5px; height: 5px; border-radius: 50%; background: #d7e6a0; }
.ask-thread { display: flex; margin: 8px 0 20px; flex-direction: column; gap: 13px; }
.ask-message { max-width: 94%; padding: 13px 14px; border-radius: 12px 12px 12px 2px; background: rgba(255,255,255,.09); }
.ask-message.user { align-self: flex-end; border-radius: 12px 12px 2px 12px; background: #dfe8ad; color: #1a251d; }
.ask-message > span { display: block; margin-bottom: 6px; color: #aeb8ae; font-size: 6px; font-weight: 780; letter-spacing: .15em; }
.ask-message.user > span { color: #59634e; }
.ask-message p { margin: 0; color: inherit; font-family: var(--serif); font-size: 14px; line-height: 1.48; }
.ask-answer-sources { display: flex; margin-top: 11px; flex-wrap: wrap; gap: 6px; }
.ask-answer-sources button { padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: transparent; color: #c4ccc3; font-size: 6px; }
.ask-message.loading { display: flex; width: 75px; align-items: center; gap: 4px; }
.ask-message.loading > span { width: 100%; margin-bottom: 3px; }
.ask-message.loading i { width: 5px; height: 5px; border-radius: 50%; background: #dce6b0; animation: ask-pulse 1s ease infinite; }
.ask-message.loading i:nth-of-type(2) { animation-delay: .15s; }
.ask-message.loading i:nth-of-type(3) { animation-delay: .3s; }
@keyframes ask-pulse { 0%,70%,100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }

.story-section {
  position: relative;
  padding-top: 54px;
  padding-bottom: 54px;
}

.story-section::before {
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  background: var(--line);
  content: "";
}

#table-brief[hidden] + .story-section[data-story-section="wine"] {
  padding-top: 40px;
}

#table-brief[hidden] + .story-section[data-story-section="wine"]::before {
  display: none;
}

.table-brief + .story-section::before { display: none; }
.story-section[data-story-section="wine"] { --chapter-accent: #667069; --chapter-tint: #e2e5e1; }
.story-section[data-story-section="wine"][data-wine-tone="red"] { --chapter-accent: #8b4f48; --chapter-tint: #eadbd6; }
.story-section[data-story-section="wine"][data-wine-tone="white"] { --chapter-accent: #96772e; --chapter-tint: #eee6c1; }
.story-section[data-story-section="wine"][data-wine-tone="rose"] { --chapter-accent: #a56170; --chapter-tint: #f0dce1; }
.story-section[data-story-section="terroir"] { --chapter-accent: #66775d; --chapter-tint: #dfe4d9; }
.story-section[data-story-section="people"] { --chapter-accent: #8b6d49; --chapter-tint: #e7dfd2; }
.story-section[data-story-section="pairing"] { --chapter-accent: #506e61; --chapter-tint: #dbe5df; }

/* Direct chapter transitions use one even, compact pause on both sides of the
   divider. Removing the preceding element's default margin prevents the upper
   half from looking larger than the lower one. */
.story-section:has(+ .story-section) { padding-bottom: 42px; }
.story-section:has(+ .story-section) > :last-child { margin-bottom: 0; }
.story-section + .story-section { padding-top: 42px; }

.story-chapter-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 21px;
}

.chapter-mark {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--chapter-tint);
  color: var(--chapter-accent);
}

.chapter-mark svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.story-chapter-head .chapter { color: var(--chapter-accent); }

.story-section h2,
.people-card h2,
.source-preview h2,
.price-card h2 {
  margin: 14px 0 26px;
  font-family: var(--serif);
  font-size: 39px;
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .98;
}

.story-section > p:not(.chapter),
.people-card > p:not(.chapter),
.source-preview > p,
.price-card p {
  color: #4f574e;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  white-space: pre-line;
}

.story-section sup {
  display: inline-flex;
  min-width: 15px;
  height: 15px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: 2px;
  border: 1px solid #8c9289;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 7px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: super;
}

.story-section blockquote {
  position: relative;
  max-width: 350px;
  margin: 30px auto 0;
  padding: 12px 10px 6px;
  color: #233027;
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

.story-section:has(blockquote) { padding-bottom: 50px; }

.story-section blockquote::before {
  display: inline;
  color: #8c9487;
  content: "“\202F";
  font-family: var(--serif);
  font-size: 35px;
  font-style: normal;
  line-height: 0;
  vertical-align: -.06em;
}

.story-section blockquote::after {
  color: #a0a69b;
  content: "\202F”";
  font-family: var(--serif);
  font-size: 35px;
  font-style: normal;
  line-height: 0;
  vertical-align: -.06em;
}

/* When no supporting vineyard image is available, join the two chapters with
   one deliberate pause instead of retaining the spacing on both sides of the
   hidden image card. */
.story-section:has(+ .full-image-card[hidden]) {
  padding-bottom: 54px;
}

.full-image-card[hidden] + .story-section {
  padding-top: 54px;
}

.story-section:has(blockquote):has(+ .full-image-card[hidden]) { padding-bottom: 50px; }

.full-image-card {
  position: relative;
  height: 555px;
  margin: 0 12px;
  overflow: hidden;
}

.full-image-card img { width: 100%; height: 100%; object-fit: cover; }
.full-image-card::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,20,15,.7), transparent 45%); content: ""; }

.image-caption {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  color: white;
}

.image-caption span { font-size: 8px; font-weight: 750; letter-spacing: .17em; }
.image-caption strong { margin-top: 5px; font-family: var(--serif); font-size: 23px; font-weight: 400; }

.terroir-grid {
  display: block;
  margin: 30px 0 38px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vintage-note {
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.vintage-note .vintage-kicker { margin: 0; color: var(--chapter-accent); font-family: var(--sans); font-size: 8px; font-weight: 760; letter-spacing: .16em; line-height: 1.2; }
.vintage-note #story-vintage-copy {
  margin: 9px 0 0;
  color: #4f574e;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
}

.story-origin-card {
  position: relative;
  height: 246px;
  margin-top: 38px;
  overflow: hidden;
  border: 1px solid rgba(40, 54, 43, .14);
  border-radius: 4px;
  background: #cbd6ce;
  box-shadow: 0 14px 32px rgba(25, 38, 29, .12);
  cursor: pointer;
  isolation: isolate;
}
.story-origin-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.story-origin-map { position: absolute; inset: 0; z-index: 1; background: #cbd6ce; pointer-events: none; }
.story-origin-map .maplibregl-canvas { filter: saturate(.64) sepia(.07) brightness(.91) contrast(.94); }
.story-origin-map.map-labels-visible .origin-map-marker span { opacity: 1; transform: translateY(0); }
.story-origin-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(to top, rgba(15,29,20,.88), rgba(15,29,20,.08) 70%); pointer-events: none; }
.story-origin-copy { position: absolute; z-index: 3; right: 72px; bottom: 22px; left: 20px; color: white; pointer-events: none; }
.story-origin-copy p { margin: 0 0 7px; color: #dfe5dc; font-size: 7px; font-weight: 760; letter-spacing: .16em; line-height: 1.2; }
.story-origin-copy h3 { margin: 0; font-family: var(--serif); font-size: 31px; font-weight: 400; letter-spacing: -.04em; line-height: 1; text-wrap: balance; }
.story-origin-copy span { display: block; margin-top: 8px; color: #d5ddd5; font-size: 9px; line-height: 1.3; }
.story-origin-arrow { position: absolute; z-index: 3; right: 18px; bottom: 19px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.64); border-radius: 50%; color: white; font-size: 18px; pointer-events: none; }
.story-origin-credit { position: absolute; z-index: 4; top: 7px; right: 8px; padding: 3px 5px; border-radius: 2px; background: rgba(246,243,235,.76); color: #69736b; font-size: 5px; line-height: 1.2; }
.story-origin-credit a { color: #526057; text-decoration: none; }

.terroir-grid > div,
.serve-row div {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 22px 0;
  grid-template-columns: minmax(116px, .7fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 8px;
}
.terroir-grid > div + div,
.serve-row div + div { border-top: 1px solid var(--line); }
.terroir-grid span,
.serve-row span { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: 4px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.terroir-grid strong,
.serve-row strong { grid-column: 2; grid-row: 1; overflow-wrap: normal; word-break: normal; hyphens: none; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.2; text-wrap: pretty; }
.terroir-grid small,
.serve-row small { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 9px; line-height: 1.4; }

.people-card {
  margin: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink);
}

.people-card h2,
.people-card > p:not(.chapter) { position: relative; z-index: 1; }

.serve-row {
  display: block;
  margin: 34px 0 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.serve-row div::before { content: none; }

@media (max-width: 419px) {
  .terroir-grid > div,
  .serve-row div { padding-block: 18px; grid-template-columns: minmax(104px, .78fr) minmax(0, 1.42fr); column-gap: 18px; row-gap: 7px; }
  .serve-row { margin-block: 30px; }
}

.food-match {
  display: grid;
  width: 100%;
  margin: 38px 0 0;
  padding: 24px 0 20px 18px;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: inset 3px 0 0 var(--chapter-accent);
  color: var(--ink);
  text-align: left;
  transition: background 180ms ease, padding-left 180ms ease;
}

.food-match > span { color: var(--chapter-accent); font-size: 8px; font-weight: 760; letter-spacing: .16em; }
.food-match > strong { margin-top: 10px; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.food-match > p { margin: 8px 0 0; color: #71786f; font-size: 10px; line-height: 1.45; }
.food-match:hover { padding-left: 22px; background: rgba(80,110,97,.045); }
.food-match:active { background: rgba(80,110,97,.08); }
.food-match .food-match-action { display: flex; margin-top: 18px; padding-right: 4px; align-items: center; justify-content: space-between; color: var(--chapter-accent); }
.food-match-action b { font-size: 8px; font-weight: 780; letter-spacing: .14em; }
.food-match-action i { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(80,110,97,.42); border-radius: 50%; font-size: 13px; font-style: normal; transition: transform 180ms ease; }
.food-match:hover .food-match-action i { transform: translateX(2px); }

.price-card {
  margin: 0;
  padding-top: 24px;
  padding-bottom: 23px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #efeee5;
}

.market-card-head,
.market-price-row,
.market-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.market-card-head .chapter { margin: 0; color: #5e675c; font-size: 8px; letter-spacing: .16em; }
.market-card-foot > span {
  color: #777e75;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.price-card .market-price-row { margin-top: 12px; align-items: flex-end; }
.price-card .market-price-row h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.025em;
  line-height: 1.08;
  white-space: nowrap;
}

.market-buy-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(33,46,35,.15); }
.market-buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.market-buy-head[hidden] { display: none; }
.market-buy-head strong { font-family: var(--serif); font-size: 15px; font-weight: 400; }
.market-buy-head span { color: #777e75; font-size: 7px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }
.market-retail-links { margin-top: 5px; }
.market-retail-link {
  display: grid;
  min-height: 45px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(33,46,35,.15);
  color: var(--ink);
  text-decoration: none;
}
.market-retail-link > span { min-width: 0; }
.market-retail-link strong { display: block; overflow: hidden; font-size: 10px; font-weight: 690; text-overflow: ellipsis; white-space: nowrap; }
.market-retail-link small { display: block; margin-top: 3px; color: #7b8179; font-size: 7px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.market-retail-link.is-selection { align-items: flex-start; padding: 10px 0; }
.market-retail-link.is-selection strong { font-family: var(--serif); font-size: 14px; font-weight: 400; line-height: 1.14; overflow: visible; text-overflow: clip; white-space: normal; }
.market-retail-link.is-selection small { max-width: 48ch; font-size: 8px; font-weight: 560; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.market-retail-link b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(33,46,35,.14); border-radius: 50%; background: #dfe4c3; font-size: 10px; font-weight: 500; transition: transform 160ms ease, background 160ms ease; }
.market-retail-link:hover b { background: #d6dfae; transform: translate(1px,-1px); }
.market-retail-link.is-affiliate { background: rgba(219, 228, 183, .32); }
.market-retail-link.is-affiliate > span { padding-left: 9px; }
.market-more-offers { border-bottom: 1px solid rgba(33,46,35,.15); }
.market-more-offers summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  color: #606960;
  cursor: pointer;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .08em;
  list-style: none;
  text-transform: uppercase;
}
.market-more-offers summary::-webkit-details-marker { display: none; }
.market-more-offers summary b { font-size: 15px; font-weight: 400; transition: transform 160ms ease; }
.market-more-open { display: none; }
.market-more-offers[open] .market-more-closed { display: none; }
.market-more-offers[open] .market-more-open { display: inline; }
.market-more-offers[open] summary b { transform: rotate(180deg); }
.market-more-list .market-retail-link:last-child { border-bottom: 0; }

.price-card .market-card-foot { margin-top: 14px; padding-top: 0; border: 0; }
.market-card-foot > span { font-size: 7px; }
.price-card[data-market-mode="guide"] .market-card-head .chapter,
.price-card[data-market-mode="alternatives"] .market-card-head .chapter {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-transform: none;
}
.price-card[data-market-mode="guide"] .market-buy-block,
.price-card[data-market-mode="alternatives"] .market-buy-block { margin-top: 20px; padding-top: 0; }
.price-card[data-market-mode="guide"] .market-retail-links,
.price-card[data-market-mode="alternatives"] .market-retail-links { margin-top: 0; }
.price-card .market-affiliate-disclosure {
  margin: 12px 0 0;
  color: #727970;
  font-family: var(--sans);
  font-size: 8px;
  line-height: 1.45;
}

.story-memory { padding-top: 34px; padding-bottom: 12px; }
.story-memory-card { padding: 25px 23px 22px; background: #e4e8d3; }
.story-memory-card .chapter { margin: 0 0 14px; color: #6e7969; }
.story-memory-card h2 { max-width: 290px; margin: 0; font-family: var(--serif); font-size: clamp(28px, 7.5vw, 36px); font-weight: 400; letter-spacing: -.025em; line-height: 1.04; }
.story-memory-empty { max-width: 270px; margin: 15px 0 0; color: #667064; font-size: 11px; line-height: 1.55; }
.story-memory-saved { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(39,54,42,.18); }
.story-memory-meta { margin: 0 0 10px; color: #6b756a; font-size: 8px; font-weight: 740; letter-spacing: .11em; text-transform: uppercase; }
.story-memory-note { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.45; white-space: pre-wrap; }
.story-memory-photos { display: grid; margin: 0 0 15px; grid-auto-columns: minmax(112px, 42%); grid-auto-flow: column; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.story-memory-photos::-webkit-scrollbar { display: none; }
.story-memory-photos img { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; object-fit: cover; }
.story-memory-open { display: flex; width: 100%; min-height: 48px; margin-top: 21px; align-items: center; justify-content: space-between; padding: 0; border-top: 1px solid rgba(39,54,42,.18); background: transparent; color: var(--ink); font-size: 10px; font-weight: 730; }
.story-memory-open b { font-size: 16px; font-weight: 400; }

.story-utility { padding-top: 20px; padding-bottom: 32px; }
.source-preview .provenance-note,
.story-feedback {
  display: grid;
  min-height: 78px;
  padding: 14px 0;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.source-preview .provenance-note { margin-top: 0; }
.source-preview .source-ring,
.feedback-ring {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 450;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
}
.feedback-ring svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.source-preview .provenance-note strong,
.feedback-copy strong { font-size: 10px; font-weight: 690; line-height: 1.25; }
.source-preview .provenance-note small,
.feedback-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.source-preview .provenance-note button,
.feedback-actions button,
.feedback-reasons button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #b8bbb1;
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  text-decoration: none;
}
.source-preview .provenance-note button:hover,
.feedback-actions button:hover,
.feedback-reasons button:hover { border-color: var(--forest); background: var(--forest); color: white; }
.primary-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 19px;
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
}

.dark-button { background: var(--forest); color: white; }

.story-footer {
  display: flex;
  min-height: 245px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #101a14;
  color: white;
}

.light-mark { width: 26px; height: 30px; color: #d9dfd5; }
.story-footer strong { margin-top: 18px; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.story-footer small { margin-top: 27px; color: #889188; font-size: 8px; letter-spacing: .17em; }

/* History */
.history-screen { padding-bottom: 110px; }
.history-screen .topbar { display: grid; min-height: 128px; padding-bottom: 18px; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 5px; }
.history-screen .topbar > div { min-width: 0; }
.history-screen .history-back { width: 48px; height: 48px; margin-left: -5px; justify-self: start; }
.history-screen .history-back svg { width: 23px; }
.history-screen .avatar { align-self: center; justify-self: end; }
.history-screen h1 { margin: 0; font-family: var(--serif); font-size: 42px; font-weight: 400; letter-spacing: -.04em; line-height: 1; }

.search-wrap { position: relative; }
.search-wrap svg { position: absolute; top: 50%; left: 38px; width: 18px; fill: none; stroke: #788077; stroke-linecap: round; stroke-width: 1.5; transform: translateY(-50%); }
.search-wrap input { width: 100%; height: 49px; padding: 0 18px 0 44px; border: 1px solid var(--line); border-radius: 2px; outline: 0; background: rgba(255,255,255,.34); color: var(--ink); font-size: 12px; }
.search-wrap input::placeholder { color: #8b9089; }

.filter-row { display: flex; gap: 7px; padding-top: 15px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: #687067; font-size: 9px; }
.filter-chip.active { border-color: var(--forest); background: var(--forest); color: white; }

.history-context-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; }
.history-context-filter[hidden] { display: none; }
.history-context-filter span { color: #596259; font-family: var(--serif); font-size: 13px; line-height: 1.35; }
.history-context-filter button { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #667066; font-size: 16px; }

.history-summary { display: flex; align-items: center; justify-content: space-between; padding-top: 33px; padding-bottom: 11px; color: #737a71; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.history-summary strong { color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 400; }
.history-summary button { padding: 6px 0; background: transparent; color: #737a71; font-size: 9px; text-transform: uppercase; }

.history-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 154px;
  padding: 19px 0;
  grid-template-columns: 104px minmax(0, 1fr) 27px;
  gap: 17px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.history-card:last-child { border-bottom: 1px solid var(--line); }
.history-card[hidden] { display: none; }

.history-thumb {
  position: relative;
  display: block;
  width: 104px;
  height: 122px;
  overflow: hidden;
  border-radius: 10px;
  background: #223128;
  box-shadow: 0 9px 24px rgba(27,39,30,.12);
}

.history-thumb::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,11,.58), rgba(8,15,11,.02) 66%); content: ""; }
.history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-thumb .history-vintage { position: absolute; z-index: 1; bottom: 10px; left: 11px; color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.history-favorite-mark {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(18,31,22,.48);
  color: #f4f0cf;
  font-size: 12px;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(7px);
}
.history-card.is-favorite .history-favorite-mark { opacity: 1; transform: scale(1); }

.history-info { display: flex; flex-direction: column; }
.history-info small { margin-bottom: 10px; color: #7a8279; font-size: 7px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; }
.history-info strong { overflow-wrap: anywhere; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: -.025em; line-height: 1.12; }
.history-info .history-estate { margin-top: 7px; color: #303a32; font-family: var(--serif); font-size: 13px; letter-spacing: -.01em; line-height: 1.15; }
.history-info .history-context { margin-top: 4px; color: #6d746c; font-size: 9px; line-height: 1.35; }
.history-arrow { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #9da29b; border-radius: 50%; font-size: 10px; }

.empty-state { padding-top: 34px; text-align: center; }
.empty-state > span { font-family: var(--serif); font-size: 40px; }
.empty-state h2 { margin: 15px 0 4px; font-family: var(--serif); font-weight: 400; }
.empty-state p { max-width: 285px; margin-right: auto; margin-left: auto; color: var(--muted); font-size: 12px; line-height: 1.5; }
.empty-state-actions { display: grid; max-width: 310px; margin: 24px auto 0; gap: 8px; }
.empty-state-actions button { min-height: 48px; padding: 0 16px; border: 1px solid var(--forest); border-radius: 2px; background: transparent; color: var(--forest); font-size: 11px; font-weight: 680; }
.empty-state-actions .dark-button { background: var(--forest); color: white; }
.empty-discovery-form { display: grid; max-width: 340px; margin: 26px auto 0; gap: 9px; text-align: left; }
.empty-discovery-form > label { color: #596259; font-family: var(--serif); font-size: 16px; line-height: 1.3; text-align: center; text-wrap: balance; }
.empty-discovery-form > div { display: grid; min-height: 54px; margin-top: 4px; padding: 5px 5px 5px 15px; grid-template-columns: minmax(0,1fr) 43px; align-items: center; border: 1px solid rgba(23,32,24,.28); border-radius: 99px; background: rgba(255,255,255,.38); }
.empty-discovery-form input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--serif); font-size: 16px; }
.empty-discovery-form > div > button { display: grid; width: 43px; height: 43px; padding: 0; place-items: center; border-radius: 50%; background: var(--forest); color: white; font-size: 16px; }
.empty-discovery-cancel { justify-self: center; padding: 8px 12px; background: transparent; color: #747b73; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }

/* Personal wine map */
.map-screen { min-height: 100vh; padding-bottom: 62px; background: var(--paper); }
.map-screen.screen-back-dragging,
.map-screen.screen-back-settling { z-index: 65; animation: none; box-shadow: 0 0 42px rgba(14,22,17,.24); backface-visibility: hidden; will-change: transform; }
.map-screen.screen-back-dragging { transition: none; user-select: none; }
.map-screen.screen-back-settling { transition: transform 220ms cubic-bezier(.2,.78,.28,1), box-shadow 220ms ease; }
.map-topbar { min-height: 78px; }
.map-wordmark { font-size: 8px; font-weight: 760; letter-spacing: .17em; }
.map-intro { padding-top: 26px; padding-bottom: 28px; }
.map-intro h1 { margin: 12px 0 15px; font-family: var(--serif); font-size: 43px; font-weight: 400; letter-spacing: -.048em; line-height: .98; }
.map-intro > p:last-child { max-width: 340px; margin: 0; color: #626a61; font-family: var(--serif); font-size: 15px; line-height: 1.48; }
.map-stat-strip { display: grid; margin-bottom: 24px; grid-template-columns: repeat(3, 1fr); }
.map-stat-strip button,
.map-story-total { position: relative; display: flex; min-height: 58px; padding-left: 14px; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.map-story-total { padding-left: 0; border-left: 0; }
.map-stat-strip button.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--forest); content: ""; }
.map-stat-strip button:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.map-stat-strip strong,
.map-story-total strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.map-stat-strip span,
.map-story-total span { margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; }
.wine-map-canvas { position: relative; z-index: 1; height: 405px; overflow: hidden; background: #d9ddd5; isolation: isolate; }
.wine-map-canvas::after { position: absolute; z-index: 450; right: 0; bottom: 0; left: 0; height: 108px; background: linear-gradient(to bottom, rgba(243,240,232,0), rgba(243,240,232,.2) 52%, rgba(243,240,232,.78)); content: ""; pointer-events: none; }
.wine-map { width: 100%; height: 100%; background: #d9ddd5; font-family: var(--sans); }
.wine-map .maplibregl-canvas { filter: saturate(.7) sepia(.08) brightness(.98) contrast(.94); }
.wine-map .leaflet-control-zoom { margin-top: 14px; margin-right: 14px; overflow: hidden; border: 0; border-radius: 99px; box-shadow: 0 5px 18px rgba(24,35,28,.22); }
.wine-map .leaflet-control-zoom a { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-bottom: 1px solid rgba(23,32,24,.1); background: rgba(248,246,238,.94); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1; }
.wine-map .leaflet-control-zoom a:last-child { border-bottom: 0; }
.wine-map .leaflet-bottom { bottom: 73px; }
.wine-map .leaflet-control-attribution { max-width: 250px; padding: 4px 7px; border-radius: 7px 0 0; background: rgba(247,244,236,.88); color: #667067; font-size: 6px; line-height: 1.3; }
.wine-map .leaflet-control-attribution a { color: #425247; }
.origin-map-marker-shell { border: 0; background: transparent; }
.origin-map-marker { display: flex; width: 86px; flex-direction: column; align-items: center; color: var(--ink); transform-origin: center 12px; }
.origin-map-marker i { display: block; width: 14px; height: 14px; border: 3px solid #f2f0e8; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 3px rgba(26,43,34,.22), 0 4px 10px rgba(20,32,25,.3); transition: transform .2s ease, background .2s ease; }
.origin-map-marker span { max-width: 84px; margin-top: 5px; padding: 4px 6px; overflow: hidden; border-radius: 3px; background: rgba(247,245,237,.92); box-shadow: 0 2px 8px rgba(20,32,25,.16); font-size: 7px; font-weight: 760; letter-spacing: .07em; opacity: 0; text-overflow: ellipsis; text-transform: uppercase; transform: translateY(-2px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }
.map-labels-visible .origin-map-marker span,
.origin-map-marker-shell.active .origin-map-marker span { opacity: 1; transform: translateY(0); }
.origin-map-marker-shell.active { z-index: 1000 !important; }
.origin-map-marker-shell.active .origin-map-marker i { background: #c9dc82; transform: scale(1.3); box-shadow: 0 0 0 5px rgba(57,78,62,.24), 0 5px 12px rgba(20,32,25,.32); }
.origin-map-marker-shell.active .origin-map-marker span { background: var(--forest); color: white; }
.map-gesture-hint { position: absolute; z-index: 520; bottom: 76px; left: 50%; display: flex; min-height: 29px; align-items: center; gap: 7px; padding: 0 11px; border-radius: 99px; background: rgba(24,39,30,.86); color: white; box-shadow: 0 5px 14px rgba(21,33,26,.2); font-size: 7px; font-weight: 650; letter-spacing: .04em; pointer-events: none; transform: translateX(-50%); transition: opacity .2s ease, transform .2s ease; }
.map-gesture-hint span { font-size: 12px; }
.map-gesture-hint.hidden { opacity: 0; transform: translate(-50%, 5px); }
.map-place-card { position: relative; z-index: 3; height: 238px; margin: -72px 18px 0; overflow: hidden; border: 6px solid var(--paper); border-radius: 25px; background: #203128; color: white; box-shadow: 0 20px 44px rgba(20,31,24,.25); }
.map-place-card img { width: 100%; height: 100%; object-fit: cover; }
.map-place-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,22,16,.9), rgba(12,22,16,.08) 72%); }
.map-place-copy { position: absolute; right: 22px; bottom: 21px; left: 22px; }
.map-place-copy p { margin: 0 0 5px; color: #dce1d8; font-size: 7px; font-weight: 720; letter-spacing: .15em; }
.map-place-copy h2 { margin: 0; font-family: var(--serif); font-size: 37px; font-weight: 400; letter-spacing: -.045em; }
.map-place-copy span { display: block; margin-top: 6px; color: #d1d7cf; font-size: 8px; }
.map-stories { padding-top: 38px; }
.map-story-list { border-top: 1px solid var(--line); }
.map-story-row { display: grid; width: 100%; min-height: 80px; padding: 13px 0; grid-template-columns: minmax(68px, auto) minmax(0, 1fr) 28px; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.map-story-kind { display: grid; min-width: 64px; max-width: 88px; min-height: 36px; padding: 8px 10px; place-items: center; border-radius: 99px; background: #e1e4d0; font-size: 7px; font-weight: 760; letter-spacing: .08em; line-height: 1.15; text-align: center; text-transform: uppercase; }
.map-story-row div { display: flex; min-width: 0; flex-direction: column; }
.map-story-row strong { overflow-wrap: anywhere; font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.16; }
.map-story-row small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.map-story-row b { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #9da29b; border-radius: 50%; font-size: 9px; font-weight: 400; }

/* Settings */
.settings-screen { padding-bottom: max(50px, env(safe-area-inset-bottom)); }
.settings-topbar { min-height: 84px; }
.settings-topbar h1 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.plain-back { display: grid; width: 38px; height: 38px; place-items: center; background: transparent; color: var(--ink); }
.plain-back svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.topbar-spacer { width: 38px; }

.profile-card { display: flex; align-items: center; gap: 14px; padding-top: 13px; padding-bottom: 28px; }
.large-avatar { width: 58px; height: 58px; font-size: 14px; }
.profile-card div:last-child { display: flex; flex-direction: column; }
.profile-card strong { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.profile-card span { margin-top: 4px; color: var(--muted); font-size: 10px; }

.settings-group { padding-top: 27px; padding-bottom: 31px; border-top: 1px solid var(--line); }
.settings-mode-list { display: grid; gap: 7px; margin-top: 18px; }
.settings-mode-list button { display: flex; width: 100%; min-height: 60px; align-items: center; justify-content: space-between; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.24); color: var(--ink); text-align: left; }
.settings-mode-list button > span { display: flex; flex-direction: column; }
.settings-mode-list strong { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.settings-mode-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.settings-mode-list i { color: #727a70; font-size: 8px; font-style: normal; }
.settings-mode-list button.active { border-color: var(--forest); background: var(--forest); color: white; }
.settings-mode-list button.active small,
.settings-mode-list button.active i { color: #c9d0c8; }

.settings-trust-note { display: flex; align-items: center; gap: 12px; }
.verified-seal { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--forest); color: white; }
.settings-trust-note div { display: flex; flex: 1; flex-direction: column; }
.settings-trust-note strong { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.settings-trust-note small { max-width: 240px; margin-top: 3px; color: #697064; font-size: 9px; line-height: 1.4; }

.settings-links button { display: flex; width: 100%; min-height: 57px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.settings-links button:last-child { border-bottom: 1px solid var(--line); }
.settings-links button > span { font-family: var(--serif); font-size: 15px; }
.settings-links button > strong,
.settings-links button > strong span { color: #6e756d; font-family: var(--sans); font-size: 10px; font-weight: 540; letter-spacing: .01em; }
.settings-links .danger-setting > span { color: #853f37; }
.settings-footnote { margin-top: 25px; color: #8c918a; font-size: 8px; text-align: center; }
.ai-status-note { margin: 13px 0 0; color: #6e756d; font-size: 9px; line-height: 1.55; }
.beta-usage { padding-top: 27px; }
.beta-usage > div { display: grid; margin-top: 24px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.beta-usage span { display: flex; min-height: 73px; padding-inline: 12px; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.beta-usage span:first-child { border-left: 0; }
.beta-usage strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.beta-usage small { margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

/* Private beta administration */
.admin-screen { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.admin-topbar > span { font-size: 9px; font-weight: 720; letter-spacing: .16em; text-transform: uppercase; }
.admin-refresh { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; }
.admin-intro { padding-top: 19px; padding-bottom: 29px; }
.admin-intro h1 { max-width: 330px; margin: 12px 0 11px; font-family: var(--serif); font-size: clamp(38px, 11vw, 50px); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.admin-intro > p:last-child { max-width: 325px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.42; }
.admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-summary div { display: flex; min-height: 86px; padding: 16px 10px; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.admin-summary div:first-child { border-left: 0; padding-left: 0; }
.admin-summary strong { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1; }
.admin-summary span { margin-top: 7px; color: #6e756d; font-size: 7.5px; font-weight: 700; letter-spacing: .09em; line-height: 1.25; text-transform: uppercase; }
.admin-tabs { display: grid; padding-top: 25px; grid-template-columns: repeat(3, 1fr); }
.admin-tabs button { min-height: 43px; border-bottom: 1px solid var(--line); background: transparent; color: #777e76; font-size: 10px; font-weight: 650; }
.admin-tabs button.active { border-bottom: 2px solid var(--forest); color: var(--ink); }
.admin-status { padding-top: 22px; color: var(--muted); font-family: var(--serif); font-size: 14px; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 27px 0 12px; }
.admin-section-heading p { margin: 0; }
.admin-section-heading span { color: #7b817a; font-size: 8px; letter-spacing: .08em; }
.admin-library-note { margin: 0 0 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.admin-account-list,
.admin-library-list { border-top: 1px solid var(--line); }
.admin-account-row { padding: 19px 0 17px; border-bottom: 1px solid var(--line); }
.admin-account-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.admin-account-head > div { min-width: 0; }
.admin-account-head strong { display: block; overflow: hidden; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.admin-account-head small { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.admin-language-pill { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: 99px; color: #687068; font-size: 7px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.admin-account-metrics { display: grid; margin-top: 15px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-account-metrics span { display: flex; flex-direction: column; }
.admin-account-metrics strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.admin-account-metrics small { margin-top: 3px; color: #747b74; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.admin-account-foot { display: flex; margin: 15px 0 0; justify-content: space-between; gap: 10px; color: #858a84; font-size: 7.5px; }
.admin-library-row { display: grid; padding: 16px 0; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--line); }
.admin-library-thumb { width: 62px; height: 77px; border-radius: 8px; background: var(--paper-deep); object-fit: cover; }
.admin-library-copy { min-width: 0; }
.admin-library-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #727972; font-size: 7px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.admin-library-copy h2 { margin: 7px 0 3px; font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: -.015em; line-height: 1.08; }
.admin-library-context { display: block; overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.admin-library-excerpt { display: -webkit-box; margin: 9px 0 0; overflow: hidden; color: #606860; font-family: var(--serif); font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.admin-library-meta { display: flex; margin-top: 10px; flex-wrap: wrap; gap: 5px 9px; color: #858a84; font-size: 7.5px; }
.admin-empty { padding: 28px 0; color: var(--muted); font-family: var(--serif); font-size: 15px; }
.admin-empty.compact { padding: 16px 0; font-size: 13px; }
.admin-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.admin-insight-grid article { display: flex; min-height: 112px; padding: 17px 13px 15px 0; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-insight-grid article:nth-child(even) { padding-right: 0; padding-left: 15px; border-right: 0; }
.admin-insight-grid article > span { color: #747b74; font-size: 7.5px; font-weight: 720; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.admin-insight-grid article > strong { margin-top: auto; font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.admin-insight-grid article > small { min-height: 10px; margin-top: 7px; color: #858b84; font-size: 7.5px; line-height: 1.3; }
.admin-section-heading.admin-subheading { padding-top: 35px; }
.admin-feature-list { border-top: 1px solid var(--line); }
.admin-feature-row { display: grid; min-height: 46px; align-items: center; grid-template-columns: minmax(0, 1fr) 35px 72px; border-bottom: 1px solid var(--line); }
.admin-feature-row > span { font-family: var(--serif); font-size: 14px; }
.admin-feature-row > strong { font-family: var(--serif); font-size: 18px; font-weight: 400; text-align: right; }
.admin-feature-row > small { color: #7d837d; font-size: 7.5px; text-align: right; }
.admin-quality-note { margin: 0 0 13px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.admin-isolation-card { display: flex; padding: 17px; align-items: flex-start; gap: 13px; border: 1px solid #b9c69b; background: #e7ecd5; }
.admin-isolation-card > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 50%; background: var(--forest); color: white; font-size: 11px; }
.admin-isolation-card strong { display: block; font-family: var(--serif); font-size: 15px; font-weight: 400; }
.admin-isolation-card p { margin: 5px 0 0; color: #5f685d; font-size: 8.5px; line-height: 1.5; }
.admin-isolation-card.attention { border-color: #c9a88f; background: #eee1d7; }
.admin-isolation-card.attention > span { background: #965b42; }
.admin-failure-list { border-top: 1px solid var(--line); }
.admin-failure-row { display: flex; min-height: 55px; padding: 11px 0; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.admin-failure-row span { min-width: 0; }
.admin-failure-row strong { display: block; overflow: hidden; font-family: var(--serif); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.admin-failure-row small { display: block; margin-top: 4px; color: #8a6c60; font-size: 7px; letter-spacing: .06em; }
.admin-failure-row time { flex: 0 0 auto; color: #818781; font-size: 7.5px; }

/* Scanner */
.scanner {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 50%;
  display: none;
  width: min(100%, 430px);
  background: #0a0d0b;
  color: white;
  transform: translateX(-50%);
}

.scanner.open { display: block; animation: scanner-in 330ms ease both; }
@keyframes scanner-in { from { opacity: 0; transform: translate(-50%, 15px); } to { opacity: 1; transform: translate(-50%, 0); } }

.camera-feed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 49% 48%, rgba(107,124,108,.33), transparent 34%),
    linear-gradient(125deg, #1b211d, #384038 50%, #111613);
}

.camera-feed > video,
.camera-feed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-feed > video { opacity: 0; filter: brightness(.78) saturate(.86); transition: opacity 260ms ease; }
.camera-feed.camera-live > video { opacity: 1; }
.camera-feed > img { z-index: 1; filter: brightness(.72); }

.camera-grain { position: absolute; z-index: 1; inset: 0; opacity: .4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); pointer-events: none; transition: opacity 260ms ease; }
.camera-feed.camera-live .camera-grain { opacity: .14; }

.scanner-topbar { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: max(24px, calc(env(safe-area-inset-top) + 10px)) 20px 0; }
.scanner-topbar button { min-width: 54px; padding: 10px 0; background: transparent; color: white; font-size: 11px; }
.scanner-topbar > span { color: #d8ddd8; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.scanner-topbar .flash-button { display: grid; width: 42px; height: 42px; min-width: 42px; padding: 0; place-items: center; border-radius: 50%; transition: background 180ms ease, color 180ms ease, opacity 180ms ease; }
.scanner-topbar .flash-button.active { background: rgba(217,230,167,.18); color: #e5efb8; }
.scanner-topbar .flash-button:disabled { opacity: .38; }
.flash-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.scan-guide { position: absolute; z-index: 2; top: 14%; right: 8%; bottom: 25%; left: 8%; overflow: hidden; }
.guide-corner { position: absolute; width: 40px; height: 40px; border-color: rgba(255,255,255,.72); }
.gc-1 { top: 0; left: 0; border-top: 1.5px solid; border-left: 1.5px solid; }
.gc-2 { top: 0; right: 0; border-top: 1.5px solid; border-right: 1.5px solid; }
.gc-3 { bottom: 0; left: 0; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.gc-4 { right: 0; bottom: 0; border-right: 1.5px solid; border-bottom: 1.5px solid; }

.scan-sweep { position: absolute; top: 8%; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(222,232,198,.2) 8%, rgba(238,245,218,.78) 50%, rgba(222,232,198,.2) 92%, transparent); box-shadow: 0 0 18px 4px rgba(220,233,191,.12); animation: scan-sweep 3.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes scan-sweep { 0%,12% { opacity: .32; transform: translateY(0); } 88%,100% { opacity: .76; transform: translateY(47vh); } }
.scanner-instruction { position: absolute; z-index: 2; right: 20px; bottom: 139px; left: 20px; display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 8px rgba(0,0,0,.72); }
.scanner-instruction strong { font-size: 12px; }
.scanner-instruction span { margin-top: 5px; color: #d4d9d4; font-size: 9px; }
.scanner-actions { position: absolute; z-index: 3; right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); left: 22px; display: flex; min-height: 80px; align-items: center; justify-content: space-between; }
.photo-library { display: flex; width: 62px; height: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.52); border-radius: 13px; background: rgba(13,20,16,.32); color: white; backdrop-filter: blur(8px); }
.photo-library svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.photo-library span { font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shutter { position: absolute; top: 50%; left: 50%; display: grid; width: 72px; height: 72px; padding: 0; place-items: center; border: 2px solid white; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); }
.shutter span { width: 58px; height: 58px; border-radius: 50%; background: white; transition: transform 120ms ease; }
.shutter:active span { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  .scan-sweep { top: 54%; animation: none; opacity: .48; }
}

.scan-progress { position: absolute; z-index: 4; inset: 0; display: flex; padding: 48px 28px; flex-direction: column; align-items: center; justify-content: center; background: #121a15; }
.waiting-status { display: flex; width: 100%; flex-direction: column; align-items: center; text-align: center; }
.waiting-status-dark { color: white; }
.origin-loader { position: relative; width: 67px; height: 67px; margin-bottom: 34px; border: 1px solid #5a665d; border-radius: 50%; animation: breathe 2.2s ease-in-out infinite; }
.origin-loader::before,.origin-loader::after { position: absolute; top: 50%; left: 50%; border: 1px solid #aab5aa; border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.origin-loader::before { width: 43px; height: 43px; }
.origin-loader::after { width: 8px; height: 8px; border: 0; background: #d9e6a7; }
@keyframes breathe { 0%,100% { opacity: .62; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.scan-progress .eyebrow { color: #89938b; }
.scan-progress h2 { display: grid; width: calc(100% - 48px); min-height: 60px; max-width: 330px; margin: 14px auto 35px; place-items: center; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.18; text-align: center; text-wrap: balance; }
.progress-track { width: 200px; height: 1px; background: #39423c; }
.progress-track i { display: block; width: 0; height: 100%; background: #d9e6a7; transition: width 900ms ease; }
.waiting-card { width: 100%; max-width: 330px; margin: 0 0 38px; padding: 0; border: 0; color: var(--ink); text-align: center; }
.waiting-card-text { margin: 0; font-family: var(--serif); font-size: clamp(23px, 7vw, 31px); letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.waiting-card-meta { display: block; margin-top: 17px; color: #7a8279; font-family: var(--sans); font-size: 8px; font-weight: 720; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.waiting-card-dark { color: #f3f1e9; }
.waiting-card-dark .waiting-card-meta { color: #a7b0a7; }
.waiting-card.is-changing { animation: waiting-card-in 520ms ease both; }
@keyframes waiting-card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.scan-progress.has-quote .origin-loader { width: 38px; height: 38px; margin-bottom: 14px; }
.scan-progress.has-quote .origin-loader::before { width: 24px; height: 24px; }
.scan-progress.has-quote .origin-loader::after { width: 6px; height: 6px; }
.scan-progress.has-quote h2 { min-height: 32px; margin: 8px auto 18px; font-family: var(--sans); font-size: 12px; color: #c4ccc3; }
.scan-progress.has-quote { justify-content: center; }
.scan-progress.has-quote .waiting-card { display: flex; min-height: 260px; margin: 0 0 28px; flex-direction: column; justify-content: center; }
.scan-progress.has-quote .eyebrow { display: none; }

.scan-result { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; max-height: 88%; padding: 10px 24px max(27px, env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 18px 18px 0 0; background: var(--paper); color: var(--ink); animation: result-up 380ms ease both; }
@keyframes result-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.result-handle { width: 34px; height: 4px; margin: 0 auto 20px; border-radius: 99px; background: #c6c6c0; }
.result-status { display: flex; align-items: center; gap: 8px; color: #66705f; font-size: 9.5px; font-weight: 750; letter-spacing: .11em; line-height: 1.35; text-wrap: balance; }
.result-status span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: #dbe4b9; font-size: 10px; }
.result-wine { display: flex; gap: 16px; align-items: center; padding: 22px 0 25px; }
.mini-label { position: relative; display: block; width: 84px; height: 112px; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: #1b2a21; box-shadow: 0 8px 20px rgba(23,32,24,.13); }
.mini-label::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,11,.5), transparent 62%); content: ""; }
.mini-label img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 53%; }
.mini-label small { position: absolute; z-index: 1; bottom: 9px; left: 10px; color: white; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.result-wine div { min-width: 0; }
.result-wine p { margin: 0 0 7px; color: #737a71; font-size: 9px; font-weight: 750; letter-spacing: .12em; line-height: 1.3; }
.result-wine h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.03; text-wrap: balance; }
.result-wine div span { display: block; margin-top: 8px; color: #717970; font-size: 11px; line-height: 1.35; }
.scan-result .primary-button { min-height: 60px; padding-inline: 20px; background: var(--forest); color: white; font-size: 14px; }
.scan-result .primary-button:disabled { cursor: wait; opacity: .55; }
.scan-error { margin: -4px 0 18px; padding: 12px 13px; border-left: 2px solid #9d533e; background: #eee1d7; color: #763c2e; font-size: 10px; line-height: 1.5; }
.scan-error.is-retry { border-color: #87936f; background: #e8eadc; color: #4f5b47; }
.scan-result:has(.scan-error:not([hidden])) {
  top: 50%;
  right: 20px;
  bottom: auto;
  left: 20px;
  max-height: calc(100% - 48px);
  border-radius: 16px;
  animation: none;
  transform: translateY(-50%);
}
.identity-warning { margin: -7px 0 18px; padding: 14px 15px; border-left: 2px solid #af8735; background: #eee8d4; color: #6f5828; font-size: 11px; line-height: 1.55; }
.identity-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: -4px 0 17px; }
.identity-tools button { min-height: 48px; padding: 9px 8px; border: 1px solid #c5c7bf; background: transparent; color: #596158; font-size: 10.5px; line-height: 1.3; text-wrap: balance; }
.identity-tools button span { margin-right: 4px; font-size: 11px; }
.identity-form { margin: -8px -2px 18px; padding: 17px; background: #e5e5d7; }
.identity-form-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; }
.identity-form-heading h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.identity-form-heading > button { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #d3d2c6; color: var(--ink); font-family: var(--serif); font-size: 19px; }
.identity-form > label,.identity-form-row label { display: flex; flex: 1; flex-direction: column; gap: 5px; margin-bottom: 11px; color: #70766e; font-size: 7px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.identity-form input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid #c7c6b9; border-radius: 0; outline: 0; background: #f5f2e9; color: var(--ink); font-family: var(--serif); font-size: 16px; text-transform: none; }
.identity-form input:focus { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.identity-form-row { display: flex; gap: 9px; }
.identity-form .primary-button { margin-top: 4px; }
.secondary-button { width: 100%; padding: 19px 0 4px; background: transparent; color: #747a73; font-size: 11.5px; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }

.inference-label { display: inline; margin-left: 4px; color: #7c827a; font-family: var(--sans); font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Sources sheet */
.search-sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 430px);
  max-height: min(88dvh, 780px);
  margin: 0 auto;
  padding: 10px 22px max(26px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--paper);
  color: var(--ink);
}

.search-sheet[open] { animation: sheet-up 280ms ease both; }
.search-sheet::backdrop { background: rgba(8,13,9,.7); backdrop-filter: blur(4px); }
.search-sheet header { display: flex; align-items: flex-start; justify-content: space-between; }
.search-sheet header h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.05; }
.search-sheet.has-waiting-quote header h2 { font-size: 20px; letter-spacing: -.02em; }
.search-sheet.has-waiting-quote { height: min(74dvh, 620px); min-height: min(550px, 74dvh); overflow: hidden; box-sizing: border-box; }
.search-sheet.has-waiting-quote header { min-height: 38px; justify-content: flex-end; }
.search-sheet header button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border-radius: 50%; background: #e1ddd4; color: var(--ink); font-family: var(--serif); font-size: 22px; }
.wine-search-working { display: flex; min-height: 290px; padding-top: 18px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.search-orbit { position: relative; width: 62px; height: 62px; margin-bottom: 25px; border: 1px solid #8f998f; border-radius: 50%; animation: breathe 2.2s ease-in-out infinite; }
.search-orbit::before { position: absolute; inset: 10px; border: 1px solid #bcc4b8; border-radius: 50%; content: ""; }
.search-orbit i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); transform: translate(-50%,-50%); }
.wine-search-working strong { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.wine-search-working p { max-width: 270px; margin: 8px 0 0; color: #747b72; font-size: 10px; line-height: 1.5; }
.wine-search-working.has-quote { height: calc(100% - 42px); min-height: 0; padding: 0 0 44px; display: grid; grid-template-rows: minmax(220px, 1fr) auto; row-gap: 20px; }
.wine-search-working.has-quote .waiting-card { display: flex; min-height: 220px; margin: 0; flex-direction: column; justify-content: center; }
.wine-search-working .waiting-card-text { max-width: 320px; margin: 0 auto; color: var(--ink); font-family: var(--serif); font-size: clamp(23px, 7vw, 29px); letter-spacing: -.025em; line-height: 1.13; text-wrap: balance; }
.wine-search-working .waiting-card-meta { margin-top: 16px; font-size: 8px; }
.waiting-card:not([data-kind="quote"]) .waiting-card-meta { order: -1; margin: 0 0 18px; text-transform: none; }
.waiting-card:not([data-kind="quote"]) .waiting-card-text { font-size: clamp(24px, 6.7vw, 29px); line-height: 1.14; }
.wine-search-working.has-quote .search-orbit { width: 46px; height: 46px; margin-bottom: 14px; }
.wine-search-working.has-quote .search-orbit::before { inset: 8px; }
.wine-search-working.has-quote .search-orbit i { width: 8px; height: 8px; }
.wine-search-working.has-quote .waiting-status > strong { max-width: 300px; font-family: var(--sans); font-size: 12.5px; font-weight: 680; line-height: 1.35; text-wrap: balance; }
.wine-search-working.has-quote .waiting-status > p { display: none; }
.search-progress-track { display: none; margin-top: 16px; }
.wine-search-working.has-quote .search-progress-track { display: block; width: min(230px, 78%); height: 2px; margin-top: 18px; background: #aeb5ac; }
.search-sheet.has-resolution {
  position: fixed;
  height: min(74dvh, 620px);
  min-height: min(550px, 74dvh);
  overflow: hidden;
  box-sizing: border-box;
}
.search-sheet.has-resolution header { position: absolute; z-index: 3; top: 19px; right: 22px; }
.search-sheet.has-resolution .wine-search-resolution {
  display: flex;
  height: calc(100% - 30px);
  padding: 32px 6px 2px;
  box-sizing: border-box;
  flex-direction: column;
}
.wine-search-resolution { padding: 14px 0 2px; }
.search-type { display: inline-flex; align-self: flex-start; padding: 6px 9px; border-radius: 99px; background: #dfe4ce; color: #4e594c; font-size: 7px; font-weight: 760; letter-spacing: .15em; }
.wine-search-resolution h3 { margin: 20px 0 8px; font-family: var(--serif); font-size: 37px; font-weight: 400; letter-spacing: -.035em; line-height: 1.03; text-wrap: balance; }
.wine-search-resolution > p { margin: 0; }
#wine-search-result-subtitle { color: #737a72; font-size: 9px; font-weight: 720; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.search-interpretation { max-width: 34ch; margin-top: 31px !important; color: #4f584f; font-family: var(--serif); font-size: 16px; line-height: 1.55; }
.search-warning,.search-error { margin: 16px 0 0; padding: 12px 13px; border-left: 2px solid #9d6b35; background: #eee5d4; color: #6e5636; font-size: 10px; line-height: 1.45; }
.search-error { border-color: #9d533e; background: #eee1d7; color: #763c2e; }
.search-error.is-retry { border-color: #87936f; background: #e8eadc; color: #4f5b47; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 9px 7px; margin-top: 30px; }
.search-suggestions::before { width: 100%; margin-bottom: 2px; color: #717970; content: attr(data-label); font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.search-suggestions button { min-height: 36px; padding: 9px 12px; border: 1px solid rgba(23,32,24,.18); border-radius: 99px; background: transparent; color: var(--ink); font-size: 9.5px; }
.wine-search-resolution .primary-button { min-height: 62px; margin-top: auto; }

.access-gate {
  width: min(calc(100% - 32px), 390px);
  padding: 34px 28px 28px;
  border: 0;
  border-radius: 24px;
  background: #f3f0e8;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 30px 80px rgba(5, 10, 7, .42);
}
.access-gate::backdrop { background: rgba(8,13,9,.78); backdrop-filter: blur(7px); }
.access-mark { display: block; width: 42px; height: 49px; margin: 0 auto 22px; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.access-mark circle { fill: var(--ink); stroke: none; }
.access-gate h2 { margin: 7px 0 8px; font-family: var(--serif); font-size: 37px; font-weight: 400; }
.access-gate > p:not(.eyebrow) { margin: 0 auto 23px; max-width: 280px; color: #697168; font-size: 12px; line-height: 1.55; }
.access-gate form { display: grid; gap: 12px; text-align: left; }
.access-gate label span { display: block; margin: 0 0 6px; color: #6c736a; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.access-gate input { width: 100%; padding: 14px; border: 1px solid #c8c7bd; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.account-language-choice { display: grid; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
.account-language-choice legend { margin-bottom: 6px; color: #6c736a; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.account-language-choice label { position: relative; }
.account-language-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-language-choice label span { display: grid; min-height: 46px; margin: 0; place-items: center; border: 1px solid #c8c7bd; border-radius: 12px; background: rgba(255,255,255,.55); color: var(--ink); font-size: 11px; letter-spacing: .04em; text-transform: none; }
.account-language-choice input:checked + span { border-color: var(--forest); background: var(--forest); color: #fff; }
.account-consent { display: grid; gap: 9px; margin: 4px 0 3px; }
.account-consent label { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }
.access-gate .account-consent label input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  align-self: start;
  border-radius: 5px;
  box-sizing: border-box;
  accent-color: var(--forest);
  -webkit-appearance: checkbox;
  appearance: auto;
}
.account-consent label span { min-width: 0; margin: 0; padding-top: 1px; color: #697168; font-size: 9.5px; font-weight: 500; letter-spacing: 0; line-height: 1.5; overflow-wrap: anywhere; text-transform: none; }
.account-consent > button,
.access-privacy-link { justify-self: start; padding: 0; background: transparent; color: #4c5d51; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.access-gate .primary-button { margin-top: 0; }
.account-text-button { justify-self: center; padding: 4px 2px; background: transparent; color: #4c5d51; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.access-gate > small { display: block; margin-top: 18px; color: #81867f; font-size: 9px; }
.access-gate .access-privacy-link { margin: 9px auto 0; }
.access-error { margin: -2px 0 0; color: #8d342e; font-size: 11px; line-height: 1.4; }
.access-error.success { color: #4c654f; }
.account-tabs { display: grid; margin: 0 0 15px; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #c8c7bd; }
.account-tabs button { padding: 10px 5px; border-bottom: 2px solid transparent; background: transparent; color: #777d75; font-size: 10px; font-weight: 700; }
.account-tabs button.active { border-bottom-color: var(--forest); color: var(--ink); }

.language-sheet { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: min(100%, 430px); max-height: min(88dvh, 760px); margin: 0 auto; padding: 18px 24px max(26px, env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); }
.language-sheet[open] { animation: sheet-up 280ms ease both; }
.language-close { position: absolute; top: 20px; right: 20px; display: grid; width: 42px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.52); color: var(--ink); font-size: 25px; font-weight: 300; line-height: 1; }
.language-sheet[data-required="true"] .language-close { display: none; }
.language-sheet::backdrop { background: rgba(8,13,9,.66); backdrop-filter: blur(7px); }
.language-sheet h2 { margin: 8px 0 10px; font-family: var(--serif); font-size: clamp(30px, 8vw, 42px); font-weight: 400; line-height: 1.02; }
.language-sheet > p:not(.eyebrow) { margin: 0 0 22px; color: #697168; line-height: 1.5; }
.language-options { display: grid; gap: 10px; }
.language-options button { display: grid; min-height: 82px; padding: 15px; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.38); color: var(--ink); text-align: left; }
.language-options button > span { display: grid; grid-row: 1 / 3; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--mist); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.language-options button strong { align-self: end; font-size: 15px; }
.language-options button small { align-self: start; color: #737a72; font-size: 10px; line-height: 1.4; }
.language-options button.active { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.language-sheet > small { display: block; margin-top: 16px; color: #858b83; font-size: 9px; line-height: 1.45; }

.info-sheet { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: min(100%, 430px); max-height: min(90dvh, 800px); margin: 0 auto; padding: 18px 24px max(26px, env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); }
.info-sheet[open] { animation: sheet-up 280ms ease both; }
.info-sheet::backdrop { background: rgba(8,13,9,.68); backdrop-filter: blur(5px); }
.info-close { position: absolute; top: 20px; right: 20px; display: grid; width: 42px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.52); color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 300; line-height: 1; }
.info-sheet > .eyebrow { margin-top: 14px; }
.info-sheet h2 { max-width: calc(100% - 52px); margin: 8px 0 10px; font-family: var(--serif); font-size: clamp(30px, 8vw, 42px); font-weight: 400; line-height: 1.02; }
.info-sheet .info-lead { margin: 0 0 22px; color: #697168; font-size: 12px; line-height: 1.55; }
.info-sheet section { padding: 16px 0; border-top: 1px solid var(--line); }
.info-sheet section h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.info-sheet section p,
.info-contact { margin: 0; color: #5f685f; font-size: 10px; line-height: 1.58; }
.info-contact { padding: 16px 0; border-top: 1px solid var(--line); }
.info-sheet > .primary-button { margin-top: 4px; }
.delete-account-sheet form { display: grid; gap: 12px; padding-top: 4px; }
.delete-account-sheet form label span { display: block; margin-bottom: 6px; color: #6c736a; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.delete-account-sheet form input { width: 100%; padding: 14px; border: 1px solid #c8c7bd; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.danger-button { min-height: 52px; padding: 13px 16px; border-radius: 14px; background: #823f37; color: #fff; font-size: 11px; font-weight: 720; }
.delete-account-sheet .secondary-button { margin: 0; }
.delete-account-error { margin: 0; color: #8d342e; font-size: 10px; line-height: 1.45; }

.memory-sheet form { display: grid; gap: 17px; padding-top: 2px; }
.memory-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.memory-sheet form label { display: block; min-width: 0; }
.memory-sheet .memory-field-label { display: block; margin-bottom: 7px; color: #6c736a; font-size: 8px; font-weight: 730; letter-spacing: .13em; text-transform: uppercase; }
.memory-input-shell { display: block; width: 100%; min-width: 0; height: 48px; overflow: hidden; border: 1px solid #c8c7bd; border-radius: 12px; background: rgba(255,255,255,.76); }
.memory-sheet input,
.memory-sheet textarea { width: 100%; border: 1px solid #c8c7bd; border-radius: 12px; background: rgba(255,255,255,.76); color: var(--ink); font-size: 16px; }
.memory-sheet input { display: block; min-width: 0; max-width: 100%; min-height: 48px; padding: 0 12px; }
.memory-input-shell input { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.memory-sheet textarea { min-height: 132px; padding: 13px 14px; resize: vertical; font-family: var(--serif); line-height: 1.45; }
.memory-photo-field { min-width: 0; }
.memory-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.memory-photo-grid:empty { display: none; }
.memory-photo-grid figure { position: relative; margin: 0; }
.memory-photo-grid img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.memory-photo-grid button { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(17,35,27,.78); color: white; font-size: 19px; line-height: 1; }
.memory-add-photos { display: flex; min-height: 44px; margin-top: 9px; align-items: center; gap: 7px; border: 1px solid #c8c7bd; border-radius: 12px; background: rgba(255,255,255,.5); color: var(--ink); font-size: 10px; font-weight: 700; }
.memory-add-photos span { font-size: 17px; font-weight: 400; }
.memory-sheet input::placeholder,
.memory-sheet textarea::placeholder { color: #999d94; opacity: 1; }
.memory-sheet .primary-button { background: var(--forest); color: white; }
.memory-delete { min-height: 38px; margin-top: -5px; background: transparent; color: #7b4d47; font-size: 9px; text-decoration: underline; text-underline-offset: 4px; }
.memory-delete.confirming { color: #8b3028; font-weight: 730; }
.memory-form-error { margin: -5px 0 0; color: #8d342e; font-size: 10px; line-height: 1.45; }

.story-feedback { border-bottom: 1px solid var(--line); }
.feedback-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.feedback-actions, .feedback-reasons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.feedback-reasons, .feedback-thanks { grid-column: 2 / -1; }
.feedback-thanks { margin: 0; color: #657065; font-size: 10px; line-height: 1.45; }
.sources-sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 430px);
  max-height: min(84dvh, 760px);
  margin: 0 auto;
  padding: 10px 22px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--paper);
  color: var(--ink);
}

.language-sheet,
.info-sheet,
.search-sheet,
.sources-sheet,
.recipe-sheet,
.sommelier-sheet {
  inset: auto 0 0;
  width: min(calc(100% - 32px), 430px);
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  scroll-padding-block: 20px 28px;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.language-sheet.sheet-keyboard-open,
.info-sheet.sheet-keyboard-open,
.search-sheet.sheet-keyboard-open,
.sources-sheet.sheet-keyboard-open,
.recipe-sheet.sheet-keyboard-open,
.sommelier-sheet.sheet-keyboard-open {
  bottom: var(--sheet-keyboard-offset, 0px);
  max-height: max(260px, calc(var(--sheet-viewport-height, 100dvh) - 10px));
}

.recipe-sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 430px);
  max-height: min(92dvh, 820px);
  margin: 0 auto;
  padding: 10px 24px max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--paper);
  color: var(--ink);
}

.recipe-sheet[open] { animation: sheet-up 280ms ease both; }
.recipe-sheet::backdrop { background: rgba(8,13,9,.7); backdrop-filter: blur(4px); }
.recipe-sheet header { display: flex; align-items: flex-start; justify-content: space-between; }
.recipe-sheet header h2 { max-width: 300px; margin: 5px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.035em; line-height: 1.02; }
.recipe-sheet header button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; place-items: center; border-radius: 50%; background: #e1ddd4; color: var(--ink); font-family: var(--serif); font-size: 22px; }
.recipe-loading { display: flex; min-height: 330px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.recipe-orbit { position: relative; width: 62px; height: 62px; margin-bottom: 24px; border: 1px solid #849087; border-radius: 50%; animation: breathe 2.2s ease-in-out infinite; }
.recipe-orbit::before { position: absolute; inset: 10px; border: 1px solid #bdc6b9; border-radius: 50%; content: ""; }
.recipe-orbit i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); transform: translate(-50%,-50%); }
.recipe-loading strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.recipe-loading p { max-width: 260px; margin: 8px 0 0; color: #747b72; font-size: 10px; line-height: 1.5; }
.recipe-content { padding-top: 23px; }
.recipe-intro { margin: 0 0 24px; color: #4f594f; font-family: var(--serif); font-size: 15px; line-height: 1.48; }
.recipe-meta { display: grid; margin-bottom: 34px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recipe-meta div { display: flex; min-width: 0; padding: 17px 10px 16px; flex-direction: column; }
.recipe-meta div:first-child { padding-left: 0; }
.recipe-meta div + div { border-left: 1px solid var(--line); }
.recipe-meta span { color: #737b72; font-size: 7px; font-weight: 770; letter-spacing: .15em; }
.recipe-meta strong { margin-top: 8px; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.recipe-block { padding: 0 0 33px; }
.recipe-block + .recipe-block { padding-top: 31px; border-top: 1px solid var(--line); }
.recipe-ingredients,.recipe-steps,.recipe-notes ul { margin: 18px 0 0; padding: 0; list-style: none; }
.recipe-ingredients li { display: grid; padding: 11px 0; grid-template-columns: 86px 1fr; gap: 12px; border-bottom: 1px solid rgba(23,32,24,.09); color: #414a42; font-family: var(--serif); font-size: 14px; line-height: 1.35; }
.recipe-ingredients li span { color: #788077; font-family: var(--sans); font-size: 9px; line-height: 1.55; }
.recipe-steps { counter-reset: recipe-step; }
.recipe-steps li { position: relative; min-height: 38px; padding: 0 0 19px 40px; color: #414a42; font-family: var(--serif); font-size: 14px; line-height: 1.52; counter-increment: recipe-step; }
.recipe-steps li::before { position: absolute; top: -2px; left: 0; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #9aa297; border-radius: 50%; color: #586459; content: counter(recipe-step); font-family: var(--sans); font-size: 8px; }
.recipe-notes { margin-bottom: 31px; padding: 20px; background: #e4e7d5; }
.recipe-notes li { position: relative; padding-left: 13px; color: #596258; font-size: 10px; line-height: 1.55; }
.recipe-notes li + li { margin-top: 8px; }
.recipe-notes li::before { position: absolute; top: .6em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #77856f; content: ""; }
.recipe-fine-print { padding-top: 19px; border-top: 1px solid var(--line); }
.recipe-fine-print p { margin: 0 0 8px; color: #6d756c; font-size: 9px; line-height: 1.45; }
.recipe-fine-print small { display: block; margin-top: 17px; color: #7b8179; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.recipe-error { min-height: 270px; padding: 70px 12px 20px; text-align: center; }
.recipe-error strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.recipe-error p { margin: 9px auto 20px; max-width: 270px; color: #767d75; font-size: 10px; line-height: 1.5; }
.recipe-error button { min-height: 39px; padding: 0 18px; border: 1px solid #8f988d; border-radius: 99px; background: transparent; color: var(--ink); font-size: 9px; font-weight: 730; }

.sources-sheet[open] { animation: sheet-up 280ms ease both; }
.sources-sheet::backdrop { background: rgba(8,13,9,.58); backdrop-filter: blur(3px); }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { position: sticky; z-index: 4; top: -10px; width: 100%; height: 48px; margin: -10px auto -18px; border-radius: 18px 18px 0 0; background: transparent; cursor: grab; touch-action: none; }
.sheet-handle::after { display: block; width: 42px; height: 4px; margin: 10px auto 0; border-radius: 99px; background: #c5c6c0; content: ""; }
.sommelier-sheet .sheet-handle { background: transparent; }
.sommelier-sheet .sheet-handle::after { background: rgba(255,255,255,.28); }
dialog.sheet-dragging { animation: none !important; transition: none !important; backface-visibility: hidden; user-select: none; will-change: transform; }
dialog.sheet-dragging .sheet-handle { cursor: grabbing; }
dialog.sheet-settling { animation: none !important; transition: transform 240ms cubic-bezier(.22,.78,.24,1); backface-visibility: hidden; will-change: transform; }
.sources-sheet header { display: flex; align-items: flex-start; justify-content: space-between; }
.sources-sheet h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.sources-sheet header button { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #e1ddd4; color: var(--ink); font-family: var(--serif); font-size: 22px; }

#close-wine-search,
#close-sources,
#close-recipe,
#close-sommelier {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  padding: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  line-height: 1;
}
.source-intro { margin: 20px 0 28px; color: #667066; font-family: var(--serif); font-size: 14px; line-height: 1.5; }
.source-list { margin: 0; padding: 0; list-style: none; }
.source-list li { border-bottom: 1px solid var(--line); }
.source-list a { display: flex; min-height: 88px; align-items: flex-start; gap: 14px; padding: 14px 0; color: inherit; text-decoration: none; }
.source-list a > span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; margin-top: 2px; place-items: center; border: 1px solid #8c928a; border-radius: 50%; font-family: var(--serif); font-size: 12px; }
.source-list a div { display: flex; flex: 1; flex-direction: column; }
.source-list a strong { font-family: var(--serif); font-size: 15px; font-weight: 400; line-height: 1.25; }
.source-list a small { margin-top: 5px; color: #798077; font-size: 8px; line-height: 1.45; }
.source-list a b { margin-top: 6px; font-size: 11px; font-weight: 400; }
.source-method { margin-top: 28px; padding: 18px; background: #e4e5d1; }
.source-method strong { font-family: var(--serif); font-size: 15px; font-weight: 400; }
.source-method p { margin: 7px 0 0; color: #636b60; font-size: 9px; line-height: 1.55; }

.language-sheet::backdrop,
.info-sheet::backdrop,
.search-sheet::backdrop,
.sources-sheet::backdrop,
.recipe-sheet::backdrop,
.sommelier-sheet::backdrop {
  background: rgba(8, 13, 9, .3);
  backdrop-filter: blur(9px) saturate(.8);
  -webkit-backdrop-filter: blur(9px) saturate(.8);
}

.toast {
  position: fixed;
  z-index: 200;
  bottom: 92px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 44px);
  padding: 11px 15px;
  border-radius: 99px;
  background: #152119;
  color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.scanner-open .toast { top: max(78px, calc(env(safe-area-inset-top) + 64px)); bottom: auto; }

[hidden] { display: none !important; }

@media (min-width: 520px) {
  .app-shell { padding: 28px 0; }
  .app { min-height: calc(100vh - 56px); border-radius: 22px; }
  .screen { min-height: calc(100vh - 56px); }
  .bottom-nav { bottom: 28px; border-radius: 0 0 22px 22px; }
  .scanner { top: 28px; bottom: 28px; border-radius: 22px; overflow: hidden; }
  .sources-sheet,.recipe-sheet,.sommelier-sheet { bottom: 28px; border-radius: 18px; }
  .search-sheet { bottom: 0; border-radius: 18px 18px 0 0; }
  .story-scroll-back { top: 44px; }
}

@media (max-height: 720px) {
  .scan-guide { top: 14%; bottom: 26%; }
  .scanner-instruction { bottom: 124px; }
}

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