/* Shared by every direction: the site's own fonts, a reset, the wordmark and R as masks. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/dm-sans.woff2") format("woff2"); }

:root {
  --ink: #23221e;
  --paper: #fbfaf5;
  --butter: #f8d998;
  --gold: #e2c880;
  --stone: #ebe3d9;
  --cream: #f8e8c9;
  --muted: #6b675f;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; overflow-x: hidden; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
em { font-style: italic; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.i { flex: none; }

/* Wordmark and R, recolourable */
.wm, .ri { display: block; background: currentColor; }
.wm { aspect-ratio: 924 / 226; -webkit-mask: url("../img/revae-wordmark.svg") center / contain no-repeat; mask: url("../img/revae-wordmark.svg") center / contain no-repeat; }
.ri { aspect-ratio: 662 / 978; -webkit-mask: url("../img/revae-icon.svg") center / contain no-repeat; mask: url("../img/revae-icon.svg") center / contain no-repeat; }

.pk { width: 100%; height: 100%; }
.cover { width: 100%; height: 100%; object-fit: cover; }
/* Brand packshots, cut out of their white ground (see README) */
.ph { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; } }

/* ===================================================================================================================
   Revae shop, hero A built out. 01 Quiet: Byredo's bones, Aesop's warmth. Tokens above; everything below is the shop.
   =================================================================================================================== */
:root { --ground: #fbfaf5; --tile: #f1ece3; --line: rgba(35,34,30,.14); --hd: 72px; --pad: 32px; }
body { background: var(--ground); }
html.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 12px; }
.lnk { font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .2s; }
.lnk:hover { opacity: .6; }
.crumb { font-size: 13px; color: var(--muted); }
.crumb a:hover { color: var(--ink); }

/* Buttons: one filled button per view, everything else outline or underline */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; padding-inline: 24px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 500; transition: opacity .2s; }
.btn:hover { opacity: .86; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-o { height: 52px; padding-inline: 24px; border: 1px solid var(--ink); font-size: 14px; transition: background .2s, color .2s; }
.btn-o:hover { background: var(--ink); color: var(--paper); }

/* Header: two words either side, nothing else */
.hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hd); padding-inline: var(--pad); border-bottom: 1px solid var(--line); background: var(--ground); position: sticky; top: 0; z-index: 20; transition: background .3s, border-color .3s; }
.hd--over { position: fixed; inset: 0 0 auto; border-color: transparent; background: transparent; }
/* Over the hero: fully clear at the top; the glass builds with the scroll (--g, 0 to 1, set by script) and is
   complete by the time the headline reaches the header */
.hd--over { --g: 0; background: rgba(251,250,245,calc(.56 * var(--g))); border-color: rgba(255,255,255,calc(.55 * var(--g)));
  -webkit-backdrop-filter: blur(calc(24px * var(--g))) saturate(calc(1 + .4 * var(--g))); backdrop-filter: blur(calc(24px * var(--g))) saturate(calc(1 + .4 * var(--g))); }
.hd--over.is-solid { background: var(--ground); border-color: var(--line); }
.hd-l, .hd-r { display: flex; align-items: center; gap: 28px; }
.hd-r { justify-content: flex-end; }
.hd-b, .hd-bag, .hd-t { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.hd-b:hover, .hd-bag:hover, .hd-t:hover { opacity: .6; }
.hd-bag .i, .hd-dot { display: none; }
.hd-logo .wm { width: 112px; }

/* Home hero: the honey clip, poster headline, the glass "New in" bar over its foot */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; max-height: 1400px; overflow: hidden; background: var(--stone); }
.hero > video { position: absolute; inset: 0; object-position: 50% 50%; }
/* iOS shows its own play button when autoplay is blocked (Low Power Mode): hide it, the poster frame stands in */
.hero > video { pointer-events: none; }
.hero-still { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.hero.is-playing .hero-still { opacity: 0; }
.hero > video::-webkit-media-controls, .hero > video::-webkit-media-controls-panel,
.hero > video::-webkit-media-controls-start-playback-button, .hero > video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
.hero-copy { position: absolute; left: var(--pad); bottom: 152px; display: grid; gap: 20px; max-width: 760px; }
.hero-copy h1 { font-family: var(--serif); font-size: 124px; font-weight: 500; line-height: .9; letter-spacing: -.025em; }
.hero-copy p { max-width: 44ch; font-size: 17px; line-height: 1.5; }
.shelf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; padding: 20px var(--pad); color: var(--ink); background: rgba(251,250,245,.56); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid rgba(255,255,255,.55); }
.shelf h2 { white-space: nowrap; font-family: var(--serif); font-size: 32px; font-weight: 500; letter-spacing: -.01em; }
.shelf ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.shelf li + li { border-left: 1px solid rgba(35,34,30,.12); }
.shelf li a { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 14px; padding-inline: 20px; }
.shelf-t { position: relative; display: block; height: 84px; }
.shelf-t > .pk, .shelf-t > .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.shelf-t .pk ellipse { display: none; }
.shelf-t > * { transition: transform .4s var(--ease); }
.shelf li a:hover .shelf-t > * { transform: translateY(-3px); }
.shelf-x { display: grid; font-size: 13px; line-height: 1.4; }
.shelf-x span { opacity: .66; }
.shelf-x b { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shelf-x { min-width: 0; }
.shelf-a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }

/* Sections */
.sec { padding-block: 88px 40px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-inline: var(--pad); margin-bottom: 28px; }
.sec-h h2, .az h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.015em; }

/* Grid: tight, edge to edge */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-inline: 6px; }
.card { position: relative; }
.tile { position: relative; display: block; isolation: isolate; aspect-ratio: 4 / 5; padding: 12% 16%; background: var(--tile); overflow: hidden; }
.tile .pk { transition: transform .5s var(--ease); }
.card:hover .tile .pk { transform: scale(1.04); }
.card.is-out .tile .pk { opacity: .45; }
.chip { position: absolute; left: 12px; top: 12px; padding: 3px 9px; background: var(--paper); font-size: 12px; line-height: 1.5; }
.qa { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(35,34,30,.12); transition: background .2s, color .2s; }
.qa:hover { background: var(--ink); color: var(--paper); }
.cap { display: grid; gap: 1px; padding: 12px 10px 36px; }
.cap-b, .cap-s { font-size: 13px; color: var(--muted); }
.cap-b a:hover { color: var(--ink); }
.cap-n { font-size: 15px; font-weight: 500; }
.cap-n a:hover { opacity: .6; }
.cap-p { font-size: 14px; }
.cap-p span { margin-left: 6px; color: var(--muted); }
.cap-l { color: var(--ink); }

/* Category tiles */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 48px 6px 0; }
.cat { display: grid; }
.cat-img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--stone); }
.cat-img img { transition: transform .8s var(--ease); }
.cat:hover .cat-img img { transform: scale(1.03); }
.cat-n { padding: 12px 10px 0; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.cat-k { padding: 0 10px; font-size: 13px; color: var(--muted); }

/* Statement */
.say { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; padding: 136px var(--pad) 120px; }
.say h2 { max-width: 17ch; font-family: var(--serif); font-size: 68px; font-weight: 500; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.say-p { font-size: 17px; max-width: 40ch; }
.steps { margin-block: 36px 28px; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.steps h3 { font-size: 14px; font-weight: 500; }
.steps p { color: var(--muted); }

/* Brands A to Z */
.az { padding-bottom: 104px; }
.az-l { display: flex; flex-wrap: wrap; gap: 4px 0; padding-inline: var(--pad); justify-content: space-between; font-family: var(--serif); font-size: 36px; line-height: 1.2; }
.az-l a, .az-l span { display: block; min-width: 1.1em; text-align: center; transition: opacity .2s; }
.az-l span { opacity: .22; }
.az-l a:hover { opacity: .55; }

/* For brands band */
.fb { position: relative; height: 520px; margin-inline: 6px; overflow: hidden; background: var(--stone); }
.fb img { position: absolute; inset: 0; }
.fb-t { position: absolute; left: 0; bottom: 0; display: grid; gap: 14px; justify-items: start; width: 480px; padding: 32px; background: var(--paper); }
.fb-t h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.015em; }
.fb-t p { color: var(--muted); }

/* Footer */
.ft { display: grid; grid-template-columns: 5fr 7fr; gap: 56px 64px; margin-top: 104px; padding: 72px var(--pad) 28px; border-top: 1px solid var(--line); }
.ft-wm { width: min(100%, 440px); }
.nl { margin-top: 56px; max-width: 440px; }
.nl label { display: block; font-size: 14px; margin-bottom: 10px; }
.nl-f { display: flex; border-bottom: 1px solid var(--ink); }
.nl-f input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; outline: 0; font-size: 15px; }
.nl-f button { padding-inline: 8px; }
.nl-ok { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ft-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft-b h4 { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 14px; }
.ft-b li + li { margin-top: 8px; }
.ft-b a:hover { opacity: .6; }
.ft-c { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* Listing: title half, picture half, then a sticky filter bar */
.top { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.top-t { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--pad); }
.top-t .crumb { position: absolute; top: 24px; }
.top h1, .bt h1, .pt h1 { font-family: var(--serif); font-size: 84px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.top h1 sup { font-family: var(--sans); font-size: 15px; font-weight: 400; vertical-align: top; position: relative; top: 14px; letter-spacing: 0; }
.top-p { margin-top: 16px; max-width: 48ch; font-size: 15px; color: var(--muted); }
.top-i { position: relative; overflow: hidden; background: var(--stone); }
.top-i img { position: absolute; inset: 0; }
.bar { position: sticky; top: var(--hd); z-index: 10; display: flex; align-items: center; gap: 20px; padding: 0 var(--pad); height: 56px; background: var(--ground); border-bottom: 1px solid transparent; }
.bar-b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.bar-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; }
.bar-chips { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.bar-chips button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px 8px; border: 1px solid var(--line); border-radius: 15px; font-size: 13px; white-space: nowrap; }
.bar-chips button:hover { border-color: var(--ink); }
.bar-c { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.story { position: relative; grid-column: span 2; overflow: hidden; background: var(--stone); }
.story img { position: absolute; inset: 0; }
.story-t { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.story-t > span:first-child { max-width: 9ch; font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: .98; letter-spacing: -.015em; }
.grid .story { height: calc(100% - 102px); }
.more { display: grid; justify-items: center; padding: 40px var(--pad) 0; color: var(--muted); font-size: 13px; }
.empty { padding: 80px var(--pad); text-align: center; color: var(--muted); }
.empty .lnk { margin-left: 8px; color: var(--ink); }

/* Brand page header */
.bt { display: grid; gap: 20px; padding: 56px var(--pad) 48px; }
.bt h1 { font-size: 112px; }
.bt-m { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; max-width: 1000px; }
.bt-m > p { max-width: 44ch; font-size: 17px; }
.bt-m dl { display: flex; gap: 40px; font-size: 13px; }
.bt-m dt { color: var(--muted); }

/* Search page */
.st { padding: 56px var(--pad) 32px; }
.st-f { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); }
.st-f input { flex: 1; min-width: 0; height: 88px; border: 0; background: none; outline: 0; font-family: var(--serif); font-size: 56px; font-weight: 500; letter-spacing: -.015em; }
.st-p { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 21px; }
.is-search .more { display: none; }

/* Product: picture across the screen, details on a floating card */
.stage { position: relative; display: grid; min-height: 800px; background: var(--tile); }
.stage-crumb { position: absolute; left: var(--pad); top: 24px; z-index: 1; }
.stage-img { position: absolute; inset: 64px 42% 64px 6%; isolation: isolate; }
.stage-img { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.stage-img::-webkit-scrollbar { display: none; }
.stage-img:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.stage-v { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.product.is-out .stage-v .pk { opacity: .5; }
.stage-n { position: absolute; left: var(--pad); bottom: 24px; display: flex; align-items: center; gap: 2px; }
.stage-a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); transition: opacity .2s var(--ease); }
.stage-a:first-child { margin-right: 8px; }
.stage-a:last-child { margin-left: 8px; }
.stage-a:disabled { opacity: .4; cursor: default; }
.stage-d { position: relative; width: 20px; height: 36px; }
.stage-d::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); opacity: .22; transition: opacity .2s var(--ease); }
.stage-d[aria-current="true"]::after { opacity: 1; }
.buy { position: relative; justify-self: end; align-self: center; width: 440px; margin: 64px 104px 64px 0; padding: 32px; background: var(--paper); }
.buy-b { font-size: 13px; color: var(--muted); }
.buy-b a { border-bottom: 1px solid var(--line); }
.buy h1 { margin-top: 6px; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.02; letter-spacing: -.015em; }
.buy-p { margin-top: 12px; font-size: 16px; }
.buy-p span { margin-left: 8px; font-size: 14px; color: var(--muted); }
.why { margin-block: 24px 20px; border-top: 1px solid var(--line); }
.why div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--line); font-size: 13px; }
.why dt { color: var(--muted); }
.why dd { display: flex; justify-content: space-between; gap: 12px; }
.why-q { color: var(--muted); border-bottom: 1px solid var(--line); }
.why-q:hover { color: var(--ink); }
.buy-s { margin-bottom: 12px; font-size: 13px; }
.buy-n { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.nt-h { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.nt-f { display: grid; gap: 8px; }
.nt-f input, .fm input, .fm textarea { width: 100%; height: 48px; padding-inline: 14px; border: 1px solid var(--line); background: var(--ground); outline: 0; font-size: 15px; }
.nt-f input:focus, .fm input:focus, .fm textarea:focus { border-color: var(--ink); }
.nt-ok, .fm-ok { margin-top: 10px; font-size: 13px; }

.info { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 72px var(--pad) 0; }
.info-l h2 { max-width: 20ch; font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.info-l p { margin-top: 16px; max-width: 40ch; color: var(--muted); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; font-size: 15px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .i { transition: transform .3s var(--ease); }
.acc details[open] summary .i { transform: rotate(180deg); }
.acc details p { padding-bottom: 20px; max-width: 56ch; color: var(--muted); }
.acc details p .lnk { margin-left: 6px; color: var(--ink); font-size: 13px; }
.stick { display: none; }

/* Drawers (menu left; bag and filters right) and the search sheet: native dialogs */
dialog { padding: 0; border: 0; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(35,34,30,.32); }
.dr { position: fixed; top: 0; bottom: 0; width: min(440px, 100vw); height: 100dvh; margin: 0; display: none; flex-direction: column; background: var(--ground); }
.dr[open] { display: flex; animation: dr-in .45s var(--ease); }
.dr--l { left: 0; right: auto; --from: -100%; }
.dr--r { left: auto; right: 0; --from: 100%; }
@keyframes dr-in { from { transform: translateX(var(--from)); } }
dialog[open]::backdrop { animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.dr-h { display: flex; align-items: center; justify-content: space-between; height: var(--hd); padding-inline: 24px; border-bottom: 1px solid var(--line); flex: none; }
.dr-wm { width: 96px; }
.dr-t { font-size: 15px; font-weight: 500; }
.dr-t span { margin-left: 4px; color: var(--muted); font-weight: 400; }
.dr-x { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; }
.dr-x:hover { opacity: .6; }
.dr-b { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.dr-f { flex: none; padding: 20px 24px 24px; border-top: 1px solid var(--line); }

/* Menu: groups closed by default, every destination kept */
.mn-top { display: block; padding-block: 18px; font-family: var(--serif); font-size: 30px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mg { border-bottom: 1px solid var(--line); }
.mg summary { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; cursor: pointer; list-style: none; }
.mg summary::-webkit-details-marker { display: none; }
.mg summary .i { transition: transform .3s var(--ease); }
.mg[open] summary .i { transform: rotate(180deg); }
.mg ul { padding-bottom: 16px; }
.mg li a { display: block; padding-block: 6px; font-size: 15px; }
.mg li a:hover, .mn-top:hover { opacity: .6; }
.mn-f { display: flex; gap: 28px; font-size: 14px; }
.mn-f a { display: inline-flex; align-items: center; gap: 8px; }

/* Bag */
.bl { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.bl-t { height: 110px; padding: 8px; background: var(--tile); }
.bl-x { display: grid; align-content: start; gap: 1px; font-size: 13px; }
.bl-b, .bl-s { color: var(--muted); }
.bl-n { font-size: 15px; font-weight: 500; }
.bl-q { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.qty { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line); }
.qty button { width: 32px; height: 100%; font-size: 16px; }
.qty button:disabled { opacity: .3; cursor: default; }
.qty span { min-width: 22px; text-align: center; }
.bl-r { color: var(--muted); border-bottom: 1px solid var(--line); font-size: 13px; }
.bl-p { font-size: 14px; }
.bg-e { display: grid; justify-items: start; gap: 14px; padding-block: 32px; }
.bg-e p { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.bg-sub { display: flex; justify-content: space-between; font-size: 16px; }
.bg-sub b { font-weight: 500; }
.bg-n { margin-block: 4px 16px; font-size: 13px; color: var(--muted); }
.bg-v { display: table; margin: 14px auto 0; }

/* Filters */
.fx { margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); }
/* The legend floats so it sits in the flow like a heading, right above its options */
.fx legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
.fx legend + * { clear: both; }
.ck, .rd { display: flex; align-items: center; gap: 12px; padding-block: 7px; font-size: 15px; cursor: pointer; }
.ck input, .rd input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.ck-n { margin-left: auto; font-size: 13px; color: var(--muted); }
.fl-f { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

/* Search sheet */
.sr-d { position: fixed; inset: 0 0 auto; width: 100%; margin: 0; background: var(--ground); display: none; }
.sr-d[open] { display: block; animation: sr-in .4s var(--ease); }
@keyframes sr-in { from { transform: translateY(-24px); opacity: 0; } }
.sr-f { display: flex; align-items: center; gap: 16px; height: 96px; padding-inline: var(--pad); border-bottom: 1px solid var(--line); }
.sr-f input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font-family: var(--serif); font-size: 40px; font-weight: 500; letter-spacing: -.01em; }
.sr-f input::-webkit-search-cancel-button { display: none; }
.sr-b { max-height: calc(100dvh - 96px); overflow-y: auto; padding: 32px var(--pad) 40px; }
.sr-idle { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 48px; }
.sr-idle h2 { margin-bottom: 12px; font-size: 13px; font-weight: 400; color: var(--muted); }
.sr-idle li a { display: inline-block; padding-block: 5px; font-size: 15px; }
.sr-idle li a:hover { opacity: .6; }
.sr-bs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.sr-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; }
.sr-r a { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 14px; }
.sr-t { height: 88px; padding: 6px; background: var(--tile); }
.sr-x { display: grid; font-size: 13px; color: var(--muted); }
.sr-x b { font-size: 15px; font-weight: 500; color: var(--ink); }
.sr-all { display: inline-block; margin-top: 28px; }
.sr-0 { color: var(--muted); }

/* Editorial pages: how it works, grading, for brands, help, account, bag */
.pt { position: relative; display: grid; gap: 16px; padding: 88px var(--pad) 56px; }
.pt .crumb { position: absolute; left: var(--pad); top: 24px; }
.pt .top-p { font-size: 17px; margin-top: 0; }
.ed-i { height: 560px; margin-inline: 6px; overflow: hidden; background: var(--stone); }
.ed-s { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 72px var(--pad) 0; }
.ed-s > h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.015em; max-width: 12ch; }
.ed-p { max-width: 52ch; margin-bottom: 20px; font-size: 16px; }
.rows { border-top: 1px solid var(--line); }
.rows div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.rows dt { font-weight: 500; }
.rows dt a { border-bottom: 1px solid var(--line); }
.rows dd { color: var(--muted); }
.steps--big { margin: 0; }
.steps--big li { grid-template-columns: 56px 180px 1fr; }
.steps-n { font-size: 13px; color: var(--muted); }
.fm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; }
.fm label > span, .fm-c legend { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.fm textarea { height: auto; padding-block: 12px; resize: vertical; }
.fm-c { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.fm-c legend { padding: 0; }
.fm-w, .fm .btn, .fm-ok { grid-column: 1 / -1; }
.fm .btn { width: auto; justify-self: start; padding-inline: 40px; }
.acct .fm { grid-template-columns: 1fr; max-width: 420px; }
.bp { display: grid; grid-template-columns: 1fr 380px; gap: 64px; padding: 0 var(--pad); align-items: start; }
.bp-l { border-top: 1px solid var(--line); }
.bp-s { position: sticky; top: calc(var(--hd) + 24px); padding: 24px; background: var(--tile); }

/* Brands A to Z page */
.az-n { position: sticky; top: var(--hd); z-index: 5; padding-block: 12px; background: var(--ground); border-bottom: 1px solid var(--line); }
.azg { padding: 0 var(--pad); }
.azg-r { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding-block: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hd) + 80px); }
.azg-r h2 { font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: .9; }
.azg-r li a { display: flex; justify-content: space-between; padding-block: 10px; font-size: 20px; border-bottom: 1px solid var(--line); }
.azg-r li:last-child a { border: 0; }
.azg-r li a:hover { opacity: .6; }
.azg-n { font-size: 13px; color: var(--muted); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; padding: 12px 20px; background: var(--ink); color: var(--paper); font-size: 14px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Phones ---------- */
/* The rail swipes below 1360px, where four columns would squeeze names under two lines */
@media (max-width: 1360px) {
  .shelf { grid-template-columns: auto 1fr; gap: 24px; padding-right: 0; }
  .shelf-a { display: none; }
  .shelf ul { grid-template-columns: repeat(4, 260px); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 1100px) {
  .buy { margin-right: var(--pad); width: 400px; }
  .stage-img { right: 46%; }
  .cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  :root { --hd: 60px; --pad: 16px; }
  .hd-l, .hd-r { gap: 14px; }
  .hd-b span, .hd-t, .hd-bag > span { display: none; }
  .hd-bag { position: relative; }
  .hd-bag .i { display: block; }
  .has-bag .hd-dot { display: grid; place-items: center; position: absolute; right: -7px; top: -5px; min-width: 16px; height: 16px; padding-inline: 4px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 500; }
  .hd--over:not(.is-solid) .hd-dot { background: var(--paper); color: var(--ink); }
  .hd-logo .wm { width: 96px; }
  .hero { height: 100vh; height: 100svh; min-height: 600px; }
  .hero-copy { left: 16px; right: 16px; bottom: 232px; gap: 12px; }
  .hero-copy h1 { font-size: 56px; }
  .hero-copy p { font-size: 15px; }
  .shelf { grid-template-columns: 1fr auto; gap: 16px; padding: 20px 0 20px 16px; }
  .shelf h2 { font-size: 26px; }
  .shelf-a { display: inline-flex; padding-right: 16px; }
  .shelf ul { grid-column: 1 / -1; grid-template-columns: 240px repeat(3, 260px); overflow-x: auto; scrollbar-width: none; }
  .shelf li a { padding-inline: 0 20px; }
  .shelf li + li a { padding-left: 20px; }
  .sec { padding-block: 56px 16px; }
  .sec-h { margin-bottom: 20px; }
  .sec-h h2, .az h2 { font-size: 34px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-top: 32px; }
  .cat { scroll-snap-align: start; }
  .cap { padding-bottom: 28px; }
  .chip { left: 8px; top: 8px; }
  .say { grid-template-columns: 1fr; gap: 28px; padding: 72px 16px; }
  .say h2 { font-size: 44px; }
  .steps li { grid-template-columns: 104px 1fr; }
  .az { padding-bottom: 56px; }
  .az-l { justify-content: flex-start; gap: 6px 10px; font-size: 30px; }
  .fb { height: 560px; }
  .fb-t { width: auto; right: 0; padding: 24px 16px; }
  .fb-t h2 { font-size: 34px; }
  .ft { grid-template-columns: 1fr; margin-top: 72px; padding: 48px 16px 24px; gap: 40px; }
  .ft-wm { width: 70%; }
  .nl { margin-top: 36px; }
  .ft-b { grid-template-columns: 1fr 1fr; }
  .ft-c { flex-direction: column; }
  .top { grid-template-columns: 1fr; min-height: 0; }
  .top-t { padding: 56px 16px 28px; }
  .top-t .crumb { top: 20px; }
  .top h1, .pt h1 { font-size: 56px; }
  .top-i { height: 220px; }
  .bar { gap: 12px; }
  .bar-c { display: none; }
  .grid .story { grid-column: span 2; height: 320px; margin-bottom: 28px; }
  .story-t { flex-direction: column; align-items: start; left: 16px; bottom: 16px; }
  .story-t > span:first-child { font-size: 38px; }
  .bt { padding: 40px 16px 32px; gap: 14px; }
  .bt h1 { font-size: 64px; }
  .bt-m { grid-template-columns: 1fr; gap: 20px; }
  .st { padding: 32px 16px 20px; }
  .st-f input { height: 64px; font-size: 36px; }
  .stage { min-height: 0; background: var(--ground); }
  .stage-crumb { top: 16px; }
  .stage-img { position: relative; inset: auto; height: 460px; background: var(--tile); }
  .stage-v { padding: 44px 10% 44px; }
  .stage-n { left: 0; right: 0; top: 416px; bottom: auto; justify-content: center; pointer-events: none; }
  .stage-n > * { pointer-events: auto; }
  .stage-a { display: none; }
  .buy { width: auto; margin: 0; padding: 24px 16px 8px; justify-self: stretch; background: var(--ground); }
  .buy h1 { font-size: 34px; }
  .info { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px 0; }
  .info-l h2 { font-size: 30px; }
  .stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); font-size: 13px; transform: translateY(100%); transition: transform .35s var(--ease); }
  .stick.is-on { transform: none; }
  .stick span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .stick .btn { width: auto; height: 44px; padding-inline: 22px; font-size: 14px; }
  .dr { width: 100vw; }
  .dr--r { top: auto; height: 88dvh; --from: 0; animation-name: sheet-in !important; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .dr-h { padding-inline: 16px; }
  .dr-b { padding-inline: 16px; }
  .dr-f { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mg summary, .mn-top { font-size: 28px; }
  .sr-f { height: 72px; gap: 12px; }
  .sr-f input { font-size: 28px; }
  .sr-b { padding: 24px 16px 32px; max-height: calc(100dvh - 72px); }
  .sr-idle { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sr-r { grid-template-columns: 1fr; }
  .pt { padding: 64px 16px 36px; }
  .pt .crumb { top: 20px; }
  .ed-i { height: 300px; }
  .ed-s { grid-template-columns: 1fr; gap: 24px; padding: 48px 16px 0; }
  .ed-s > h2 { font-size: 34px; }
  .rows div { grid-template-columns: 1fr; gap: 4px; }
  .steps--big li { grid-template-columns: 40px 1fr; }
  .steps--big p { grid-column: 2; }
  .fm { grid-template-columns: 1fr; }
  .fm .btn { width: 100%; }
  .bp { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; }
  .azg { padding: 0 16px; }
  .azg-r { grid-template-columns: 64px 1fr; gap: 16px; }
  .azg-r h2 { font-size: 44px; }
  .az-n .az-l { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 26px; }
  .toast { bottom: 84px; max-width: calc(100vw - 32px); }
}
.sec-h .lnk { white-space: nowrap; }
.tile:has(.ph) { padding: 14% 18%; }
.tile .ph { transition: transform .5s var(--ease); }
.card:hover .tile .ph { transform: scale(1.04); }

/* Info sheets (product page "What this means", "How we grade"): a centred panel, a bottom sheet on phones */
.sh { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: 85dvh; overflow: auto; padding: 28px 32px 32px; background: var(--ground); display: none; }
.sh[open] { display: block; animation: sh-in .35s var(--ease); }
@keyframes sh-in { from { opacity: 0; transform: translateY(12px); } }
.sh-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sh-h h2 { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.sh-b { margin: 0; }
.sh-b > div { padding: 14px 0 14px 16px; border-top: 1px solid var(--line); box-shadow: inset 2px 0 transparent; }
.sh-b > div.is-on { box-shadow: inset 2px 0 var(--ink); }
.sh-b dt { font-size: 15px; font-weight: 500; }
.sh-b dd { margin: 4px 0 0; color: var(--muted); }
.sh-m { display: inline-block; margin-top: 20px; }
@media (max-width: 800px) {
  .sh { inset: auto 0 0; width: 100%; margin: 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
  .sh[open] { animation: sh-up .4s var(--ease); }
  @keyframes sh-up { from { transform: translateY(100%); } }
}

/* A to Z index: a letter opens its houses, with one picture that follows each house in turn (no frame, on the page) */
.az-l a.on { opacity: 1; }
/* While a letter is open: the open letter in full, other letters with houses at half, empty letters faint */
.az[data-open] .az-l a:not(.on) { opacity: .5; }
.az[data-open] .az-l a:not(.on):hover { opacity: .8; }
.az[data-open] .az-l span { opacity: .12; }
.az-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; padding: 28px var(--pad) 0; animation: az-in .35s var(--ease); }
@keyframes az-in { from { opacity: 0; transform: translateY(8px); } }
.az-b { list-style: none; margin: 0; padding: 0; align-self: start; }
.az-b a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--muted); transition: color .25s; }
.az-b a small { font-family: var(--sans); font-size: 13px; }
.az-b a.on, .az-b a:hover { color: var(--ink); }
.az-p { position: relative; height: 300px; }
.az-p a { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.az-p a.on { opacity: 1; pointer-events: auto; }
.az-p img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.az-p span { text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 800px) {
  .az-x { grid-template-columns: 1fr; gap: 20px; }
  .az-p { height: 240px; }
}

/* Page text (Delivery, Returns, Privacy, Terms) */
.lg-b { max-width: 68ch; font-size: 16px; line-height: 1.65; }
.lg-b h2 { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; margin: 40px 0 12px; }
.lg-b h2:first-child { margin-top: 0; }
.lg-b h3 { font-size: 16px; font-weight: 500; margin: 24px 0 6px; }
.lg-b p, .lg-b ul, .lg-b ol { margin: 0 0 14px; }
.lg-b ul, .lg-b ol { padding-left: 1.2em; }
.lg-b li { margin-bottom: 6px; }
.lg-b a { border-bottom: 1px solid var(--line); }
.lg-b .note { padding: 14px 16px; background: var(--tile); }
.fm-o span small { color: var(--muted); font-size: 13px; }

/* Pilot preview only: homepage variant switch */
.vsw { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; background: var(--ink); padding: 3px; gap: 3px; }
.vsw a { min-width: 34px; padding: 6px 10px; text-align: center; color: var(--ground); font-size: 13px; }
.vsw a[aria-current] { background: var(--ground); color: var(--ink); }

/* Homepage footer: the foot of the honey clip plays behind a glass footer */
.ft--honey { position: relative; isolation: isolate; overflow: hidden; border-top: 0; }
.ft--honey > * { position: relative; z-index: 2; }
.ft--honey > .ft-v { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.ft--honey::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(251,250,245,.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-top: 1px solid rgba(255,255,255,.55); }
.ft--honey .ft-c { border-top-color: rgba(35,34,30,.14); }
@media (prefers-reduced-motion: reduce) { .ft--honey > .ft-v { display: none; } }

/* A rule between consecutive editorial sections */
.ed-s + .ed-s { margin: 72px var(--pad) 0; padding: 72px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .ed-s + .ed-s { margin: 48px 16px 0; padding: 48px 0 0; } }

/* Homepage rhythm (study 02, 27 Oct): the statement sits on a full-width band of warm grey between the tiles and the brands */
.home .say { margin-top: 104px; background: var(--stone); }
@media (max-width: 800px) { .home .say { margin-top: 64px; } }
/* Brands after the band: the same space above and below, and the honey footer follows straight on */
.home .az { padding-block: 96px; }
.home .ft--honey { margin-top: 0; }
@media (max-width: 800px) { .home .az { padding-block: 56px; } }

/* The story panel ends exactly where the product backgrounds beside it end: four columns of 4:5 tiles with 6px gaps,
   so a tile is (the grid's content width - 18px) / 4 wide and 1.25 times that tall */
.grid { container-type: inline-size; }
.grid .story { align-self: start; height: calc((100cqw - 18px) / 4 * 1.25); }
@media (max-width: 800px) { .grid .story { height: 320px; } }

/* iOS Safari zooms the page when a focused field's text is under 16px, so anything typed into is 16px on touch */
@media (pointer: coarse), (max-width: 800px) {
  .nl-f input, .nt-f input, .fm input, .fm textarea, .fl > input, .fl > textarea, .pw .fl > input, input[type=text], input[type=email], textarea { font-size: 16px; }
}

/* The footer's honey: a still sits behind the video, so iOS Low Power Mode (which blocks autoplay until the first touch) and Reduce Motion still show honey */
.ft--honey { background: url("../img/honey-poster-tall.webp") 50% 100% / cover no-repeat; }
.ft--honey > .ft-v::-webkit-media-controls-start-playback-button, .ft--honey > .ft-v::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
@media (max-width: 800px) { .ft--honey { background-image: url("../img/honey-poster-tall-mobile.webp"); } }