/* Parkinsans (SIL Open Font License, web/fonts/OFL.txt), served from Shelf itself. */
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/static/fonts/parkinsans-latin.woff2?v=3) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/static/fonts/parkinsans-latin-ext.woff2?v=3) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Shelf. Rationale in docs/design/04-shelf.md. */
:root {
  --bg: #eef0f2;
  --surface: #ffffff;
  --ink: #16181b;
  --ink-2: #5d636b;
  --ink-3: #8a9098;
  --line: #dde0e4;
  --stage: #e3e6e9;
  --alt: #17704a;
  --alt-bg: #e2f1e8;
  --focus: #2f6fe4;
  --font: 'Parkinsans', ui-sans-serif, system-ui, sans-serif;
  --gut: 16px;
  --max: 1360px;
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --ease: cubic-bezier(.22, .9, .25, 1);
}
@media (min-width: 720px) { :root { --gut: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 99px; z-index: 50; }
.skip:focus { left: 8px; }
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 64px; }

/* ---------------------------------------------------------------- motion */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
::view-transition-group(*) { animation-duration: .52s; animation-timing-function: var(--ease); }
::view-transition-image-pair(*) { isolation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px var(--gut); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -0.045em; text-decoration: none; line-height: 1; padding-bottom: 2px; }
@media (max-width: 374px) { .brand { font-size: 22px; } }
.find { position: relative; display: flex; align-items: center; max-width: 620px; width: 100%; justify-self: center; }
.find input { width: 100%; height: 44px; border: 1.5px solid transparent; border-radius: 999px; background: var(--surface); padding: 0 18px 0 44px; font-size: 15.5px; outline: none; transition: border-color .15s, box-shadow .2s; }
.find input:focus { border-color: var(--ink); box-shadow: 0 6px 24px rgb(0 0 0 / .08); }
.find input::-webkit-search-cancel-button { display: none; }
.find__icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-2); pointer-events: none; }
[data-page=home] .top .find { visibility: hidden; }
@media (max-width: 760px) { [data-page=home] .top .find { display: none; } }
.nav { display: flex; align-items: center; gap: 6px; }
.nav > a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 12px; border-radius: 999px; }
.nav > a:hover, .nav > a[aria-current] { background: var(--surface); }
.country { display: inline-flex; gap: 2px; background: var(--surface); padding: 4px !important; }
.country span { padding: 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.country span.is-on { background: var(--ink); color: #fff; }
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; row-gap: 10px; }
  .top .find { grid-column: 1 / -1; order: 3; max-width: none; }
  .nav > a:not(.country) { padding: 8px 9px; }
}
/* The narrowest phones: four header links and the country switch in one row. */
@media (max-width: 430px) {
  .top { column-gap: 10px; }
  .nav { gap: 0; }
  .nav > a:not(.country) { padding: 8px 7px; font-size: 14.5px; }
  .country span { padding: 4px 7px; }
}

/* suggestions */
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border-radius: 22px; box-shadow: 0 18px 50px rgb(16 20 26 / .16); padding: 8px; z-index: 30; max-height: 70vh; overflow: auto; }
.suggest__group { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 10px 12px 4px; }
.suggest a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 14px; text-decoration: none; }
.suggest a[aria-selected=true], .suggest a:hover { background: var(--bg); }
.suggest__thumb { width: 44px; height: 44px; object-fit: contain; }
.suggest__thumb--photo { mix-blend-mode: multiply; }
.suggest__name { font-weight: 600; display: block; line-height: 1.2; }
.suggest__house { font-size: 13.5px; color: var(--ink-2); }
.suggest__aside { font-size: 13px; color: var(--alt); font-weight: 600; }
.suggest__all { grid-template-columns: 1fr !important; font-weight: 600; color: var(--ink-2); }

/* ---------------------------------------------------------------- shared */
.sec { margin-top: 72px; }
.sec__head { margin-bottom: 22px; max-width: 760px; }
.sec__head--row { display: flex; justify-content: space-between; align-items: baseline; max-width: none; gap: 16px; }
.sec__title { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.sec__note { color: var(--ink-2); margin: 8px 0 0; max-width: 62ch; }
.sec__more { font-weight: 600; font-size: 15px; white-space: nowrap; }
.count { display: inline-block; font-size: 15px; font-weight: 600; color: var(--ink-2); background: var(--surface); padding: 2px 10px; border-radius: 999px; vertical-align: 4px; letter-spacing: 0; }
.cite { color: var(--ink-3); font-size: 13.5px; margin: 18px 0 0; }
.empty { font-size: 18px; color: var(--ink-2); padding: 40px 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .45s var(--spring), box-shadow .2s; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / .08); }
.pill--alt { background: var(--alt-bg); color: var(--alt); }
.more { text-align: center; margin: 40px 0 0; }

.verdict { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.verdict--direct_clone { background: var(--ink); color: #fff; }
.verdict--close_dupe { background: var(--alt-bg); color: var(--alt); }
.verdict--inspired_by { box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); }
.verdict--similar_scent { background: var(--bg); color: var(--ink-2); }

/* ---------------------------------------------------------------- the card */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 192px), 1fr)); gap: 34px 18px; }
[data-density="3"] .grid { --card-min: 290px; }
[data-density="5"] .grid { --card-min: 165px; }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } [data-density="5"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-density="3"] .grid { grid-template-columns: 1fr; } }
.card { --tint: var(--stage); }
.card[style*="--tone"] { --tint: oklch(from var(--tone) 0.935 calc(c * 0.42) h); }
.card__link { display: block; text-decoration: none; }
.card__stage { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--tint); overflow: hidden; transition: background-color .3s; }
.card__stage::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .16), transparent); transition: transform .5s var(--spring), opacity .3s; }
.card:has(.bottle--photo) .card__stage { background: #fff; }
.card:has(.bottle--photo) .card__stage::after { display: none; }
.bottle { position: absolute; z-index: 1; inset: 13% 14% 11%; display: block; width: 72%; height: 76%; object-fit: contain; object-position: center bottom; transition: transform .6s var(--spring); }
.bottle--photo { inset: 8%; width: 84%; height: 84%; object-position: center; border-radius: 8px; }
.bottle--none { inset: 22% 34% 14%; border-radius: 14px; background: rgb(0 0 0 / .05); }
.card__link:hover .bottle, .card__link:focus-visible .bottle { transform: translateY(-7px) scale(1.035); }
.card__link:hover .card__stage::after { transform: scaleX(.86); opacity: .7; }
.card__text { display: grid; gap: 1px; padding: 12px 4px 0; }
.card__house { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.card__name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.card__notes { font-size: 14px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.card__buy { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; }
.card__price { font-size: 17px; font-weight: 700; }
.card__size, .card__none { font-size: 14px; color: var(--ink-2); }
.card__alts { font-size: 13.5px; font-weight: 600; color: var(--alt); margin-top: 3px; }

/* rails: a row you swipe */
.rail { list-style: none; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 236px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rail > li { scroll-snap-align: start; }
.rail--tight { grid-auto-columns: minmax(170px, 196px); }
.alt__why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 4px 0; }
.alt__save { font-size: 13px; font-weight: 600; color: var(--alt); }
.alt__by { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }

/* ---------------------------------------------------------------- fragrance page */
.pdp__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 8px; }
@media (min-width: 960px) { .pdp__hero { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); gap: 56px; align-items: stretch; } }
.pdp__stage { --tint: var(--stage); --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; position: relative; aspect-ratio: 1 / 1.05; max-height: min(78vh, 780px); width: 100%; border-radius: 32px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 46%, rgb(255 255 255 / .55), transparent 70%), var(--tint); display: grid; place-items: center; }
.pdp__stage[style*="--tone"] { --tint: oklch(from var(--tone) 0.9 calc(c * 0.5) h); }
.pdp__stage:has(.pdp__bottle--photo) { background: #fff; }
/* Beside the details, the stage is as tall as they are (and no shorter than its own
   proportions), so no empty space shows under it. */
@media (min-width: 960px) { .pdp__stage { max-height: none; } }
/* The product keeps the stage's proportions, centred however tall the stage grows. */
.pdp__object { position: absolute; z-index: 2; inset: 0 20%; margin: auto 0; aspect-ratio: 0.714; max-height: 80%; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
.pdp__object::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -2.5%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .2), transparent); transform: translateX(calc(var(--px) * -10px)); z-index: -1; }
.pdp__stage:has(.pdp__bottle--photo) .pdp__object::after { display: none; }
/* A shop photo's white background blends into the white stage, so the notes around it show. */
.pdp__object:has(.pdp__bottle--photo) { mix-blend-mode: multiply; }
.pdp__bottle { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.pdp__floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float { position: absolute; width: 21%; height: auto; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .12)); animation: float-in .9s var(--ease) both, drift 7s ease-in-out infinite alternate; }
.float--0 { top: 8%; left: 6%; --k: 22px; animation-delay: .25s, 1.2s; }
.float--1 { top: 36%; right: 4%; width: 19%; --k: 30px; animation-delay: .38s, 1.6s; }
.float--2 { bottom: 7%; left: 12%; width: 17%; --k: 16px; animation-delay: .5s, 2s; }
.float { translate: calc(var(--px) * var(--k)) calc(var(--py) * var(--k)); transition: translate .6s var(--ease); }
@keyframes float-in { from { opacity: 0; transform: translateY(18px) scale(.86); } }
@keyframes drift { to { transform: translateY(-6px) rotate(1.5deg); } }

.pdp__info { padding-top: 6px; }
/* The heading holds the house and the name, each set as its own line. */
.pdp__title { margin: 0; font: inherit; }
.pdp__house { font-size: 17px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.pdp__house:hover { color: var(--ink); text-decoration: underline; }
.pdp__name { display: block; font-size: clamp(42px, 5.4vw, 68px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; margin: 6px 0 14px; }
.pdp__facts { color: var(--ink-2); margin: 0 0 6px; }
.pdp__summary { font-size: 19px; line-height: 1.45; margin: 0 0 16px; max-width: 34ch; }
.pdp__of { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.pdp__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
/* A page's key facts in sentences, under its heading. */
.factline { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 62ch; margin: 0 0 18px; text-wrap: pretty; }
.pagehead .factline { margin: 14px 0 0; }

.buy { background: var(--surface); border-radius: 26px; padding: 20px; margin-top: 18px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.size { display: grid; gap: 1px; text-align: left; min-width: 76px; padding: 9px 12px 10px; border-radius: 16px; border: 0; background: var(--bg); cursor: pointer; transition: background-color .2s, color .2s, transform .45s var(--spring); }
.size:hover { transform: translateY(-2px); }
.size[aria-checked=true] { background: var(--ink); color: #fff; }
.size__ml { font-weight: 600; font-size: 15px; }
.size__price { font-size: 13.5px; opacity: .75; }
.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.buy__amount { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.buy__per { color: var(--ink-2); font-size: 15px; }
.buy__where { margin: 8px 0 16px; color: var(--ink-2); font-size: 15px; }
.buy__go { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; transition: transform .45s var(--spring), box-shadow .25s; }
.buy__go:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(0 0 0 / .18); }
.buy__empty { margin: 0; color: var(--ink-2); }
/* The commission note beside every Buy button and price list (components.mjs disclosure). */
.disclose { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.disclose a { color: var(--ink); font-weight: 600; }
.buy__disclose { margin-top: 10px; }
.prices__disclose { margin-top: 8px; }
.buy__opt.is-in { animation: opt-in .35s var(--ease); }
@keyframes opt-in { from { opacity: .3; transform: translateY(6px); } }

.notes__tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 860px) { .notes__tiers { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; } }
.tier__name { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; }
.tier__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.note { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 12px; border-radius: 20px; background: var(--surface); text-decoration: none; text-align: center; transition: transform .45s var(--spring); }
.note:hover { transform: translateY(-3px); }
.note__img { width: 64px; height: 64px; object-fit: contain; }
.note__img--none { display: block; border-radius: 50%; background: var(--bg); width: 40px; height: 40px; margin: 12px; }
.note__name { font-size: 14px; font-weight: 500; line-height: 1.25; }

.quotes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.quote { background: var(--surface); border-radius: 20px; padding: 16px 18px; }
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.quote__by { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.quote--against { box-shadow: inset 4px 0 0 #c4462f; }

/* All prices: one table, sizes as row groups, columns aligned across them. */
.ptable { width: 100%; max-width: 880px; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: 22px; padding: 6px 18px 12px; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { text-align: left; font-weight: 400; vertical-align: middle; }
.ptable__size th { padding: 18px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.ptable tbody:first-of-type .ptable__size th { padding-top: 12px; }
.ptable__size span { margin-left: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.ptable__row > * { padding: 11px 0; border-top: 1px solid var(--bg); }
.ptable__shop { font-weight: 500 !important; padding-right: 16px !important; }
.ptable__shop span { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ptable__price { text-align: right !important; font-weight: 700 !important; white-space: nowrap; }
.ptable__approx { font-weight: 400; color: var(--ink-2); }
.ptable__charged { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.ptable__low { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--alt-bg); color: var(--alt); font-size: 12px; font-weight: 600; vertical-align: 2px; }
.ptable__per { text-align: right !important; padding-left: 20px !important; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ptable__buy { width: 1%; padding-left: 20px !important; text-align: right !important; }
.ptable__go { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--bg); text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color .2s; }
.ptable__go:hover { background: var(--ink); color: #fff; }
@media (max-width: 560px) {
  /* Each offer becomes two lines: the shop over its price, Buy beside both. */
  .ptable, .ptable tbody, .ptable__size, .ptable__size th { display: block; }
  .ptable { padding: 4px 16px 10px; }
  .ptable__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop buy" "price buy"; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--bg); }
  .ptable__row > * { padding: 0 !important; border-top: 0; }
  .ptable__shop { grid-area: shop; }
  .ptable__price { grid-area: price; text-align: left !important; margin-top: 4px; white-space: normal; }
  .ptable__per { display: none; }
  .ptable__buy { grid-area: buy; align-self: center; width: auto; }
}

.buybar { position: fixed; z-index: 25; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgb(0 0 0 / .16); transform: translateY(140%); transition: transform .5s var(--spring); }
.buybar.is-on { transform: none; }
.buybar__text { font-size: 14.5px; line-height: 1.25; min-width: 0; }
.buybar__text strong { font-size: 17px; }
.buybar__go { flex: none; height: 46px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
@media (min-width: 960px) { .buybar { display: none; } }

/* ---------------------------------------------------------------- home */
.home__top { padding: 56px 0 8px; display: grid; justify-items: center; text-align: center; }
.home__title { font-size: clamp(36px, 6vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 0 0 26px; }
.find--big { max-width: 720px; }
.find--big input { height: 64px; font-size: 18px; padding-left: 54px; box-shadow: 0 10px 40px rgb(16 20 26 / .08); }
.find--big .find__icon { left: 22px; width: 20px; height: 20px; }
.home__sub { color: var(--ink-2); margin: 18px 0 0; max-width: 56ch; }
.notewall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.notewall a { display: grid; justify-items: center; padding: 14px 10px 14px; border-radius: 24px; background: var(--surface); text-decoration: none; transition: transform .5s var(--spring), box-shadow .25s; }
.notewall a:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 30px rgb(0 0 0 / .07); }
.notewall img { width: 84px; height: 84px; object-fit: contain; margin-bottom: 6px; }
.notewall span { font-weight: 600; font-size: 15px; }
.notewall .notewall__n { font-weight: 400; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) {
  .grid--home { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 10px; scrollbar-width: none; }
  .grid--home > li { scroll-snap-align: start; }
  .notewall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .notewall a { padding: 10px 4px; border-radius: 18px; }
  .notewall img { width: 52px; height: 52px; }
  .notewall span { font-size: 13px; text-align: center; line-height: 1.2; }
  .notewall .notewall__n { display: none; }
  .home__top { padding-top: 28px; }
  .sec { margin-top: 52px; }
}

/* ---------------------------------------------------------------- search */
.results__head { padding: 36px 0 22px; }
.results__title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin: 0; }
.results__read { color: var(--ink-2); margin: 8px 0 0; }
.results__sub { margin: 56px 0 22px; }
.best { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .best { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: stretch; } }
.best__main { --tint: var(--stage); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 22px; border-radius: 30px; background: var(--tint); text-decoration: none; min-height: 340px; }
.best__main[style*="--tone"] { --tint: oklch(from var(--tone) 0.91 calc(c * 0.48) h); }
.best__main:has(.best__bottle--photo) { background: #fff; }
.best__stage { display: grid; place-items: center; height: 100%; max-height: 380px; }
.best__bottle { max-height: min(320px, 100%); max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s var(--spring); }
.best__main:hover .best__bottle { transform: translateY(-6px) rotate(-1.5deg); }
.best__text { display: grid; gap: 2px; }
.best__house { color: var(--ink-2); font-weight: 500; }
.best__name { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin-bottom: 8px; }
.best__notes { color: var(--ink-2); margin-bottom: 14px; }
.best__price strong { font-size: 22px; }
.best__alts { min-width: 0; }
.best__altshead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.best__altshead h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.best__altshead a { font-weight: 600; font-size: 15px; }
.househit { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; padding: 18px 22px; border-radius: 22px; background: var(--surface); text-decoration: none; }
.househit__name { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.househit__n { color: var(--ink-2); }
@media (max-width: 560px) { .best__main { grid-template-columns: 1fr; min-height: 0; } .best__stage { height: 250px; } .best__bottle { max-height: 250px; } }

/* ---------------------------------------------------------------- browse */
.browse__head { padding: 32px 0 26px; }
.browse__title { font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin: 0 0 20px; }
.browse__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; }
.seg a { padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s; }
.seg a[aria-current] { background: var(--ink); color: #fff; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); background: var(--surface); border-radius: 999px; padding: 0 6px 0 16px; height: 44px; }
.sort select { border: 0; background: transparent; font-weight: 600; color: var(--ink); height: 40px; padding: 0 8px; border-radius: 999px; cursor: pointer; }
.density { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; margin-left: auto; }
.density button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--ink-3); }
.density button[aria-pressed=true] { background: var(--bg); color: var(--ink); }
.density svg { width: 16px; height: 16px; fill: currentColor; }
.browse__count { color: var(--ink-2); margin: 0 0 18px; }
.browse__count strong { color: var(--ink); }
@media (max-width: 760px) {
  .density { margin-left: 0; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- page heads, houses, compare, evidence */
.pagehead { padding: 40px 0 8px; }
.pagehead__title { font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; margin: 0 0 10px; max-width: 20ch; }
.pagehead__sub { color: var(--ink-2); font-size: 17px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pagehead--note { display: flex; align-items: center; gap: 22px; }
.pagehead__img { width: 120px; height: 120px; object-fit: contain; background: var(--surface); border-radius: 30px; padding: 10px; }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.az a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; font-size: 14px; }
.az__letter { font-size: 24px; font-weight: 700; margin: 34px 0 12px; }
.houses { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 24px; }
.houses li { break-inside: avoid; }
.houses a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; text-decoration: none; }
.houses a:hover { text-decoration: underline; }
.houses span { color: var(--ink-3); font-size: 14px; }

/* Compare: fragrances as columns, what to compare as rows; the row labels stay put while
   the columns scroll on narrow screens. */
.cmphead { display: grid; gap: 14px; }
.cmpadd { display: flex; gap: 10px; max-width: 560px; }
.cmpadd__input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
.cmpadd__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmpsug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmpsug__label { font-size: 14px; color: var(--ink-2); margin-right: 2px; }
.cmpsug__item { --tint: var(--surface); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--surface); text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color .2s; }
.cmpsug__item:hover { background: var(--ink); color: #fff; }
.cmpsug__item:hover .cmpsug__house { color: rgb(255 255 255 / .7); }
.cmpsug__bottle { width: 32px; height: 32px; object-fit: contain; }
.cmpsug__house { font-weight: 400; color: var(--ink-2); }
.cmpempty { color: var(--ink-2); }
.cmp { overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.cmp__table { border-collapse: separate; border-spacing: 0; min-width: calc(132px + var(--n) * 180px); width: 100%; max-width: calc(160px + var(--n) * 300px); font-variant-numeric: tabular-nums; table-layout: fixed; }
.cmp__corner { width: 132px; }
.cmp__table th, .cmp__table td { text-align: left; vertical-align: top; padding: 12px 14px; }
.cmp__table tbody th { width: 132px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.cmp__table tbody tr > * { border-top: 1px solid var(--surface); }
.cmp__table tbody th[scope="row"], .cmp__corner { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.cmp__head { vertical-align: bottom; padding-bottom: 16px !important; }
.cmp__stage { --tint: var(--stage); position: relative; display: block; aspect-ratio: 1; max-width: 200px; border-radius: 20px; background: var(--tint); margin-bottom: 12px; }
.cmp__stage[style*="--tone"] { --tint: oklch(from var(--tone) 0.93 calc(c * 0.42) h); }
.cmp__bottle { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.cmp__house { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.cmp__name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-decoration: none; }
.cmp__remove { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.cmp__price { font-weight: 700; }
.cmp__muted { color: var(--ink-2); font-size: 14px; }
.cmp__ppm.is-best { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--alt-bg); color: var(--alt); font-weight: 600; }
.cmp__section th { padding-top: 26px !important; font-size: 18px; font-weight: 700; color: var(--ink) !important; letter-spacing: -0.01em; }
.cmp__key { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.cmp__accord td { vertical-align: middle; }
.cmp__bar { display: block; height: 10px; border-radius: 999px; background: color-mix(in oklch, var(--accord) 18%, var(--surface)); overflow: hidden; }
.cmp__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accord); }
.cmp__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp__notes li { padding: 4px 10px; border-radius: 999px; background: var(--surface); font-size: 13.5px; }
.cmp__notes li.is-shared { background: var(--alt-bg); color: var(--alt); font-weight: 600; }
.cmp__buyrow td { padding-top: 18px !important; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 32px; }
.stats div { background: var(--surface); border-radius: 18px; padding: 14px 16px; }
.stats dt { font-size: 13.5px; color: var(--ink-2); }
.stats dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.evidence .sec__title { margin: 40px 0 0; }

/* ---------------------------------------------------------------- prose (how it works) */
.prose { max-width: 760px; padding-top: 40px; }
.prose .lede { font-size: 20px; line-height: 1.5; }
.prose h2 { font-size: 26px; letter-spacing: -0.03em; margin: 48px 0 12px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.6; }
.prose .formula { background: var(--surface); border-radius: 16px; padding: 14px 18px; overflow-x: auto; }
.prose dl.tiers dt { margin-top: 16px; }
.prose dl.tiers dd { margin: 6px 0 0; color: var(--ink-2); }
.legal__updated { color: var(--ink-3); font-size: 14px; margin: 0; }
.method__table { background: var(--surface); border-radius: 18px; padding: 14px 18px; }
.method__table summary { cursor: pointer; font-weight: 600; }
.method__table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.method__table td, .method__table th { text-align: left; padding: 6px 8px 6px 0; border-top: 1px solid var(--bg); vertical-align: top; }

/* ---------------------------------------------------------------- footer */
.foot { max-width: var(--max); margin: 56px auto 0; padding: 28px var(--gut) 96px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: baseline; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot__fine { font-size: 13px; margin: 0; }
.foot__end { display: grid; gap: 8px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.foot__legal a { color: var(--ink-2); text-decoration: none; }
.foot__legal a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------- browse filters */
.browse__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1000px) { .browse__body { grid-template-columns: 290px minmax(0, 1fr); } }
.browse__tools .browse__count { margin: 0 6px 0 0; }
.filters__form { display: grid; gap: 6px; }
.filters__head { display: flex; align-items: baseline; gap: 12px; padding: 2px 4px 6px; }
.filters__head h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0; flex: 1; }
.filters__clear { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.filters__close { display: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--surface); cursor: pointer; }
.filters__close svg { width: 18px; height: 18px; }
.fset { border: 0; margin: 0; padding: 14px; background: var(--surface); border-radius: 20px; }
.fset legend { float: left; width: 100%; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.fset > :not(legend) { clear: both; }
.fsearch { width: 100%; height: 38px; border: 0; border-radius: 999px; background: var(--bg); padding: 0 14px; font-size: 14.5px; margin-bottom: 10px; outline: none; }
.fsearch:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.ntiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ntile { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 14px; cursor: pointer; text-align: center; transition: background-color .2s, transform .4s var(--spring); }
.ntile:hover { background: var(--bg); transform: translateY(-2px); }
.ntile input { position: absolute; opacity: 0; pointer-events: none; }
.ntile__img { width: 48px; height: 48px; display: grid; place-items: center; }
.ntile__img img { width: 48px; height: 48px; object-fit: contain; }
.ntile__name { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.ntile__n { font-size: 11.5px; color: var(--ink-3); }
.ntile:has(input:checked) { background: var(--ink); color: #fff; }
.ntile:has(input:checked) .ntile__n { color: rgb(255 255 255 / .7); }
.ntile:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 1px; }
.ntile[hidden] { display: none; }
.more-notes { margin-top: 8px; }
.more-notes summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 6px 4px; list-style: none; }
.more-notes summary::-webkit-details-marker { display: none; }
.more-notes[open] summary { margin-bottom: 6px; }
.hlist { display: grid; gap: 2px; }
.hopt, .opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; font-size: 14.5px; }
.hopt:hover, .opt:hover { background: var(--bg); }
.hopt input, .opt input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.hopt span:first-of-type { flex: 1; }
.hopt__n { color: var(--ink-3); font-size: 13px; }
.opts { display: grid; gap: 2px; }
.opt--check { font-weight: 600; }
.filters__foot { position: sticky; bottom: 0; padding: 10px 0 2px; background: linear-gradient(transparent, var(--bg) 30%); }
.filters__apply { width: 100%; height: 50px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; }
.active { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.active__chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; }
.active__chip svg { width: 12px; height: 12px; opacity: .8; }
.filters__open { display: none; }
@media (min-width: 1000px) {
  .filters { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
  .js .filters__foot { display: none; }
}
@media (max-width: 999px) {
  .filters__open { display: inline-flex; }
  .filters__close { display: grid; place-items: center; }
  .filters { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; padding: 16px var(--gut) 0; transform: translateY(102%); transition: transform .45s var(--ease); visibility: hidden; }
  .filters.is-open { transform: none; visibility: visible; }
  .ntiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:has(.filters.is-open) { overflow: hidden; }
}

/* ---------------------------------------------------------------- house hero */
.hhero { --tint: var(--stage); position: relative; margin-top: 8px; border-radius: 32px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgb(255 255 255 / .45), transparent 70%), var(--tint); padding: 34px 24px 30px; display: grid; justify-items: center; text-align: center; }
.hhero[style*="--tone"] { --tint: oklch(from var(--tone) 0.88 calc(c * 0.6) h); }
.hhero__shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(190px, 26vw, 320px); width: 100%; max-width: 980px; padding-bottom: 14px; }
.hhero__shelf::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 14px; border-radius: 4px; background: linear-gradient(rgb(255 255 255 / .55), rgb(255 255 255 / .2)); box-shadow: 0 10px 24px rgb(0 0 0 / .08); }
.hhero__item { position: relative; display: block; height: calc(100% - var(--depth) * 9%); flex: 0 1 15%; margin: 0 -1%; z-index: calc(10 - var(--depth)); animation: shelf-in .8s var(--ease) both; animation-delay: calc(var(--depth) * 90ms + 80ms); }
.hhero__bottle { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .14)); transition: transform .55s var(--spring); }
.hhero__item:hover .hhero__bottle { transform: translateY(-8px); }
@keyframes shelf-in { from { opacity: 0; transform: translateY(26px); } }
.hhero__text { margin-top: 22px; }
.hhero__name { font-size: clamp(44px, 7.5vw, 104px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; margin: 0; }
.hhero__facts { margin: 12px 0 0; font-size: 17px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.hhero__sig { margin: 4px 0 0; font-size: 17px; }
@media (max-width: 640px) { .hhero { padding: 22px 12px 22px; border-radius: 26px; } .hhero__item { flex-basis: 19%; } .hhero__item[style*="--depth:3"] { display: none; } }

/* ---------------------------------------------------------------- alternatives page */
.pagehead--alts { display: grid; gap: 6px; }
.altshead { --tint: var(--stage); display: inline-flex; align-items: center; gap: 14px; justify-self: start; padding: 10px 18px 10px 10px; border-radius: 22px; background: var(--tint); text-decoration: none; margin-bottom: 14px; }
.altshead[style*="--tone"] { --tint: oklch(from var(--tone) 0.92 calc(c * 0.45) h); }
.altshead__stage { position: relative; flex: none; width: 64px; height: 64px; }
.altshead__bottle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.altshead__text { display: grid; line-height: 1.25; }
.altshead__house { font-size: 13px; color: var(--ink-2); }
.altshead__name { font-weight: 700; }
.altshead__price { font-size: 14px; color: var(--ink-2); }
.altgroup { margin-top: 44px; max-width: 980px; }
.altgroup__title { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.altgroup__title .count { margin-left: 6px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.altlist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; max-width: 980px; }
.altrow { --tint: var(--stage); display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px; border-radius: 26px; background: var(--surface); }
.altrow[style*="--tone"] { --tint: oklch(from var(--tone) 0.935 calc(c * 0.42) h); }
.altrow__stage { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; background: var(--tint); }
.altrow:has(.altrow__bottle--photo) .altrow__stage { background: #fff; }
.altrow__bottle { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform .55s var(--spring); }
.altrow__stage:hover .altrow__bottle { transform: translateY(-5px); }
.altrow__house { margin: 0; font-size: 14px; color: var(--ink-2); }
.altrow__name { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.025em; line-height: 1.1; }
.altrow__name a { text-decoration: none; }
.altrow__why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; color: var(--ink-2); }
.altrow__buy { display: grid; justify-items: end; gap: 6px; text-align: right; }
.altrow__price { margin: 0; font-size: 22px; font-weight: 700; }
.altrow__none { margin: 0; font-size: 15px; color: var(--ink-2); }
.altrow__price span { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.altrow__save { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--alt); }
@media (max-width: 700px) {
  .altrow { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
  .altrow__buy { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .altrow__name { font-size: 20px; }
}
.more-quotes { margin-top: 14px; max-width: 760px; }
.more-quotes summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 8px 2px; }

/* The tile after the first alternatives: the next few bottles standing on a shelf,
   leading to the full list. */
.alt-more { scroll-snap-align: start; }
.alt-more__link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.alt-more__stack { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4%; aspect-ratio: 4 / 5; padding: 0 9% 30%; border-radius: 22px; background: var(--stage); overflow: hidden; }
.alt-more__stack::after { content: ''; position: absolute; left: 7%; right: 7%; bottom: calc(30% - 3px); height: 3px; border-radius: 3px; background: rgb(0 0 0 / .1); }
.alt-more__bottle { flex: 1 1 0; min-width: 0; height: 46%; object-fit: contain; object-position: bottom; transition: transform .5s var(--spring); }
.alt-more__link:hover .alt-more__bottle { transform: translateY(-4%); }
.alt-more__link:hover .alt-more__bottle:nth-child(2) { transition-delay: .04s; }
.alt-more__link:hover .alt-more__bottle:nth-child(3) { transition-delay: .08s; }
.alt-more__text { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; font-size: 15px; color: var(--ink-2); }
.alt-more__text strong { font-size: 17px; color: var(--ink); }
.alt-more__link:hover .alt-more__text { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .alt-more__bottle { transition: none; } }

/* Accords: each named in words, its bar as long as its strength. */
/* Strongest first, down the first column and then the second. */
.accords__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px 40px; max-width: 880px; }
@media (min-width: 720px) { .accords__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; } }
.accord { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; }
.accord__name { font-weight: 600; font-size: 15px; }
.accord__bar { height: 12px; border-radius: 999px; background: color-mix(in oklch, var(--accord) 18%, var(--surface)); overflow: hidden; }
.accord__bar span { display: block; height: 100%; width: var(--strength); border-radius: inherit; background: var(--accord); transform-origin: left; animation: accord-grow .9s var(--spring) both; }
.accord:nth-child(2) .accord__bar span { animation-delay: .04s; } .accord:nth-child(3) .accord__bar span { animation-delay: .08s; }
.accord:nth-child(4) .accord__bar span { animation-delay: .12s; } .accord:nth-child(n+5) .accord__bar span { animation-delay: .16s; }
@keyframes accord-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .accord__bar span { animation: none; } }
@supports (animation-timeline: view()) {
  .accord__bar span { animation-timeline: view(); animation-range: entry 10% cover 35%; animation-delay: 0s !important; }
}
.cmpsug__bottle--none { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--stage); }
@media (max-width: 560px) {
  /* Two fragrances fit side by side on a phone; more scroll. */
  .cmp__table { min-width: calc(72px + var(--n) * 136px); }
  .cmp__table th, .cmp__table td { padding: 10px 6px; }
  .cmp__table tbody th { width: 72px; font-size: 12.5px; }
  .cmp__corner { width: 72px; }
  .cmp__stage { max-width: 128px; border-radius: 16px; }
  .cmp__name { font-size: 15px; }
  .cmp__section th { font-size: 16px; }
  .cmp__notes li { font-size: 12.5px; padding: 3px 8px; }
}

/* Build by notes: the pyramid narrows toward the top, as a perfumer draws it. */
.build { display: grid; gap: 22px; }
.pyr { display: grid; justify-items: center; gap: 8px; }
.pyr__band { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 22px; background: var(--surface); outline: 2px solid transparent; transition: outline-color .2s, background-color .2s; }
.pyr__band--top { width: min(100%, 58%); }
.pyr__band--heart { width: min(100%, 78%); }
.pyr__band--base, .pyr__band--any { width: 100%; }
.pyr--any { margin-top: 6px; }
.pyr__band--any { background: transparent; border: 1.5px dashed var(--line); }
.pyr__band.is-active { outline-color: var(--ink); }
.pyr__label { flex: none; width: 88px; font-weight: 700; text-decoration: none; }
.pyr__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pyr__chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.pyr__chip span { opacity: .7; }
.pyr__chip:hover span { opacity: 1; }
.pyr__hint { color: var(--ink-2); font-size: 14px; align-self: center; }
.palette { display: grid; gap: 12px; }
.palette__find { display: flex; gap: 10px; max-width: 560px; }
.palette__notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
a.ntile { color: inherit; text-decoration: none; }
.ntile.is-on { background: var(--ink); color: #fff; }
.ntile.is-on .ntile__n { color: rgb(255 255 255 / .7); }
.build__match { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.build__match.is-all { background: var(--alt-bg); color: var(--alt); }
.build__empty { color: var(--ink-2); max-width: 60ch; }
@media (max-width: 560px) {
  .pyr__band--top { width: 76%; }
  .pyr__band--heart { width: 88%; }
  .pyr__label { width: 64px; font-size: 14px; }
}
.fset__link { display: inline-block; margin: 8px 0 2px; font-size: 13.5px; font-weight: 600; }

/* The admin's flag on a bottle image (web/app.js), shown only to a signed-in admin. */
.flag { position: absolute; z-index: 4; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07); color: var(--ink-2); opacity: .75; cursor: pointer; transition: opacity .15s, background-color .15s, box-shadow .15s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.flag svg { width: 14px; height: 14px; }
.flag:hover, .flag:focus-visible, .flag[aria-expanded="true"] { opacity: 1; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), 0 3px 10px rgb(0 0 0 / .1); }
.flag.is-queued { opacity: 1; background: var(--ink); color: #fff; }
.flag.is-queued svg path { fill: currentColor; }
.flagform { position: absolute; z-index: 40; display: grid; grid-template-columns: 1fr auto; gap: 6px; width: min(320px, calc(100vw - 16px)); padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: 0 14px 40px rgb(16 20 26 / .18); }
.flagform input { min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; }
.flagform input:focus { border-color: var(--ink); }
.flagform button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.flagform button:disabled { opacity: .5; cursor: default; }
.flagform__msg { grid-column: 1 / -1; margin: 0 4px; font-size: 13px; color: var(--ink-2); }
.flagform__msg:empty { display: none; }

/* A pair's evidence, drawn (server/views/pair-charts.mjs). */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; margin-bottom: 18px; }
.pc-voices, .pc-time, .pc-web { margin: 0; padding: 20px 22px; border-radius: 20px; background: var(--surface); }
.pc-voices__head { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.4; }
.pc-voices__head strong { color: var(--ink); font-size: 17px; }
.pc-bar { display: flex; gap: 3px; height: 18px; border-radius: 999px; overflow: hidden; }
.pc-bar__seg, .pc-dot { background: var(--stage); }
.pc-bar__seg--identical, .pc-dot--identical { background: #0f5a3a; }
.pc-bar__seg--close, .pc-dot--close { background: var(--alt); }
.pc-bar__seg--similar, .pc-dot--similar { background: #8cc7a6; }
.pc-bar__seg--against, .pc-dot--against { background: #c2513f; }
.pc-key { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pc-key li { display: flex; align-items: center; gap: 8px; }
.pc-key b { margin-left: auto; font-variant-numeric: tabular-nums; }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pc-time__svg { width: 100%; height: auto; display: block; overflow: visible; }
.pc-t__up { fill: var(--alt); }
.pc-t__down { fill: #c2513f; }
.pc-t__axis { stroke: var(--line); stroke-width: 1; }
.pc-t__n { font-size: 12px; fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.pc-t__y { font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.pc-note { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; max-width: 72ch; }
.pc-web__wrap { overflow-x: auto; }
.pc-web__svg { width: 100%; min-width: 560px; max-width: 900px; height: auto; display: block; margin: 0 auto; }
.pc-w__ring { fill: none; stroke: var(--line); stroke-dasharray: 2 4; }
.pc-w__edge { stroke: var(--alt); opacity: .35; }
.pc-w__edge--1 { stroke: #5aa57e; }
.pc-w__edge--2 { stroke: #9aa3ab; }
.pc-w__edge.is-this { opacity: 1; }
.pc-w__leader { stroke: var(--line); stroke-width: 1; }
.pc-w__node circle { fill: var(--surface); stroke: var(--alt); stroke-width: 2; transition: r .3s var(--ease); }
.pc-w__node text { font-size: 12.5px; fill: var(--ink-2); }
.pc-w__node:hover text, .pc-w__node:focus-visible text { fill: var(--ink); text-decoration: underline; }
.pc-w__node:focus-visible circle { stroke: var(--focus); stroke-width: 3; }
.pc-w__node.is-this circle { fill: var(--alt); }
.pc-w__node.is-this text { fill: var(--ink); font-weight: 700; font-size: 13.5px; }
.pc-w__hub { fill: var(--ink); }
.pc-w__hubtext { fill: #fff; font-size: 12px; font-weight: 600; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: 1fr; } }
.buy__amazon { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.buy__amazon a { color: var(--ink); font-weight: 600; }