/* ============ TOKENS ============ */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --ash:#6e6e6e;
  --line:rgba(10,10,10,.14);
  --line-strong:rgba(10,10,10,.28);
  --head:92px;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Double-tap zoom is never what anyone means here — it fires on a quick second
   tap of a thumbnail or an arrow and leaves the page zoomed at a strange crop.
   `manipulation` drops that one gesture and keeps the two that matter: scrolling
   and pinch to zoom. Pinch stays deliberately; taking it away breaks the page
   for anyone who needs to magnify it. Elements that need a tighter rule (the
   thumb rail, the photo stage) set their own and win on specificity. */
*{touch-action:manipulation}
html{scroll-behavior:smooth;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
/* the canvas behind the page is black, so the rubber-band overscroll on phones
   shows black past the closing bar instead of a white strip */
html{background:var(--ink)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ============ TYPE ============ */
.display{
  font-family:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  line-height:.88;letter-spacing:-.005em;margin:0;
}

/* ============ LOADER ============ */
@media(prefers-reduced-motion:no-preference){
  html.noloader .hero{animation:heroZoom .95s var(--ease) both}
  @keyframes heroZoom{from{opacity:0;transform:scale(1.055)}to{opacity:1;transform:none}}
}

.loader{
  position:fixed;inset:0;z-index:5000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transition:opacity .7s var(--ease),visibility .7s;
  /* failsafe: if the script never runs, the curtain still lifts */
  animation:loaderFailsafe .6s linear 12s forwards;
}
.loader.done{opacity:0;visibility:hidden;animation:none}
/* returning visitor: the curtain never paints at all */
html.noloader .loader{display:none}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader__logo{
  width:min(360px,64vw);height:auto;
  animation:loaderZoom 3.4s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes loaderZoom{from{transform:scale(.96);opacity:.72}to{transform:scale(1.08);opacity:1}}
/* on release the mark pushes in and dissolves */
.loader.done .loader__logo{
  animation:none;transform:scale(1.4);opacity:0;
  transition:transform .95s var(--ease),opacity .6s var(--ease);
}
html.loading,html.loading body{overflow:hidden}

/* images fade in as they decode — only when JS is running, so they are never
   left invisible if it isn't */
.js .cat img,.js .mega__thumb img{opacity:0;transition:opacity .55s var(--ease)}
.js .cat img.ready,.js .mega__thumb img.ready{opacity:1}

/* ============ HEADER ============ */
.hdr{
  position:fixed;inset:0 0 auto;height:var(--head);z-index:1000;
  display:flex;align-items:center;gap:24px;padding:0 var(--pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
}
.hdr.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--line)}
/* flex:none on the link, not just the img — the link is the flex child and
   was collapsing, squashing the logo to a sliver on narrow headers */
.hdr__brand{flex:none;display:flex;align-items:center}
.hdr__logo{height:54px;width:auto;flex:none;transition:opacity .3s}
.hdr__logo--dark{display:none}
.hdr.solid .hdr__logo--light{display:none}
.hdr.solid .hdr__logo--dark{display:block}

.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a,.nav button{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  color:#fff;background:none;border:0;padding:10px 14px;cursor:pointer;
  text-decoration:none;white-space:nowrap;position:relative;transition:opacity .2s;
}
.hdr.solid .nav a,.hdr.solid .nav button{color:var(--ink)}
.nav a::after,.nav button::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav button:hover::after,.nav [aria-expanded="true"]::after{transform:scaleX(1)}
.nav__cta{
  background:#fff !important;color:var(--ink) !important;
  border:2px solid #fff !important;padding:9px 18px !important;margin-left:10px;
}
/* on the solid white bar it needs an outline to stay visible */
.hdr.solid .nav__cta{border-color:var(--ink) !important}
.nav__cta::after{display:none}
.nav__cta:hover{background:transparent !important;color:#fff !important}
.hdr.solid .nav__cta:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
.caret{display:inline-block;margin-left:7px;font-size:11px;transform:translateY(-2px);transition:transform .3s var(--ease)}
[aria-expanded="true"] .caret{transform:translateY(-2px) rotate(180deg)}

/* ---- search ----
   Two triggers, one panel. The nav one sits beside Find Us and dies with the
   inline row at 1300; the bar one lives next to the burger and only appears
   once the nav has collapsed, so the magnifier never leaves the header. */
.srch__btn{
  flex:none;display:grid;place-items:center;width:42px;height:42px;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  transition:transform .3s var(--ease),opacity .2s;
}
.hdr.solid .srch__btn{color:var(--ink)}
.srch__btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
@media(hover:hover){.srch__btn:hover{transform:scale(1.14)}}
.srch__btn::after{display:none !important}
.hdr__search{display:none}
.srch__label{display:none}

/* the panel: the loader curtain reused as a room you type into */
.srch{
  position:fixed;inset:0;z-index:2000;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.srch.open{opacity:1;visibility:visible}
.srch__x{
  position:absolute;top:22px;right:calc(var(--pad) - 8px);z-index:2;
  width:46px;height:46px;display:grid;place-items:center;
  background:none;border:0;color:#fff;cursor:pointer;
  transition:transform .35s var(--ease);
}
@media(hover:hover){.srch__x:hover{transform:rotate(90deg)}}
.srch__x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
/* The whole panel is the scroller, not just the list. When only the list
   scrolled, the top 180px — the padding, the field, the count — swallowed every
   wheel and drag, so scrolling back up did nothing if the cursor happened to be
   up there. The field block stays put by being sticky at full height instead of
   by sitting outside the scroll area, so it looks identical and scrolls from
   anywhere. */
.srch__in{
  flex:1;min-height:0;padding:0 var(--pad);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
}
.srch__in::-webkit-scrollbar{width:3px}
.srch__in::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.srch__head{
  position:sticky;top:0;z-index:1;background:var(--ink);
  padding-top:clamp(74px,12vh,140px);
}
/* the field is the rule under it — no box, so the type is the whole interface */
.srch__field{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  border-bottom:2px solid rgba(255,255,255,.22);
  padding-bottom:clamp(10px,1.6vh,18px);
  transition:border-color .4s var(--ease);
}
.srch.open .srch__field{border-bottom-color:#fff}
.srch__field svg{
  flex:none;width:clamp(24px,2.6vw,34px);height:clamp(24px,2.6vw,34px);
  fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;
  transition:stroke .4s var(--ease);
}
.srch__field:focus-within svg{stroke:#fff}
.srch__q{
  flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,86px);line-height:1;letter-spacing:-.005em;
  padding:0;-webkit-appearance:none;appearance:none;
}
.srch__q::placeholder{color:rgba(255,255,255,.26)}
.srch__q::-webkit-search-cancel-button{display:none}
.srch__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:16px 0 0;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;
  font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:rgba(255,255,255,.42);
}
.srch__keys{flex:none}
/* The list is plain content now — .srch__in above does the scrolling, and its
   overflow-x is pinned there. That pin matters: left `visible` beside an auto
   overflow-y, the browser computes it to `auto`, and the 12px name slide on
   hover pushed a row past the right edge — a horizontal scrollbar appeared,
   which stole height, which moved the rows, which moved the row out from under
   the cursor, which dropped the hover, which removed the scrollbar. */
.srch__res{margin-top:6px;padding-bottom:clamp(30px,6vh,70px)}
/* Results come back in the site's own shape: a heading per category, then its
   products, each with its price. The headings scroll with their rows — pinned
   under the field they drifted over it on an iPhone with the keyboard up, and
   sat on top of their own first result. */
.srch__grp{margin-top:clamp(18px,3vh,34px)}
.srch__grp:first-child{margin-top:4px}
.srch__gh{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 4px 10px;border-bottom:1px solid rgba(255,255,255,.28);
  opacity:0;transform:translateY(14px);
}
.srch__gh.in{opacity:1;transform:none}
.srch__gt{
  margin:0;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;line-height:1.3;color:#fff;
}
.srch__ga{
  flex:none;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  color:rgba(255,255,255,.5);text-decoration:none;transition:color .3s var(--ease);
}
.srch__ga:focus-visible{color:#fff;outline:0}
@media(hover:hover){.srch__ga:hover{color:#fff}}
.srch__hit{
  display:flex;align-items:baseline;gap:clamp(12px,1.8vw,22px);
  /* an arrow-key pick scrolls clear of the sticky field block */
  scroll-margin-top:calc(var(--srch-head,0px) + 8px);scroll-margin-bottom:12px;
  /* 16px of right padding is the room the hovered name slides into — a row with
     no price ran to the full width and had nowhere to move */
  padding:clamp(12px,1.7vh,18px) 16px clamp(12px,1.7vh,18px) 4px;
  text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(14px);
}
/* the stagger delay is set inline per row, so a long list still cascades */
.srch__hit.in{opacity:1;transform:none}
.srch__name{
  flex:1;min-width:0;font-size:clamp(18px,2vw,28px);line-height:1.05;
  transition:transform .4s var(--ease);transform-origin:left;
}
.srch__name b{background:rgba(255,255,255,.17);font-weight:inherit;box-shadow:0 0 0 2px rgba(255,255,255,.17)}
.srch__price{
  flex:none;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;font-weight:800;
  font-size:clamp(14px,1.4vw,18px);letter-spacing:.02em;color:rgba(255,255,255,.62);
  transition:color .3s var(--ease);
}
.srch__hit:focus-visible,.srch__hit.on{
  outline:0;background:rgba(255,255,255,.05);
}
.srch__hit.on .srch__name{transform:translateX(12px)}
.srch__hit.on .srch__price{color:#fff}
/* hover only with a real pointer: on a phone a :hover rule can make the first
   tap on a result a preview and only the second the visit */
@media(hover:hover){
  .srch__hit:hover{background:rgba(255,255,255,.05)}
  .srch__hit:hover .srch__name{transform:translateX(12px)}
  .srch__hit:hover .srch__price{color:#fff}
}
.srch__hit{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.srch__none{
  padding:clamp(26px,5vh,54px) 4px;color:rgba(255,255,255,.5);
  font-size:clamp(17px,2vw,24px);
}
/* a phone has no room for a price column: it tucks under the name instead */
@media(max-width:600px){
  .srch__hit{flex-wrap:wrap;row-gap:4px}
  .srch__name{flex-basis:100%}
  .srch__price{font-size:13px}
}
@media(prefers-reduced-motion:no-preference){
  .srch__hit,.srch__gh{transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s var(--ease)}
}
@media(prefers-reduced-motion:reduce){
  .srch__hit,.srch__gh{opacity:1;transform:none}
}

/* ---- mega dropdown ---- */
.mega{
  position:fixed;top:var(--head);left:0;right:0;z-index:999;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:44px var(--pad) 48px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  max-height:calc(100vh - var(--head));overflow-y:auto;
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.mega__title{font-size:clamp(28px,3.4vw,44px)}
.mega__note{font-size:13px;color:var(--ash)}
.mega__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1px;
}
.mega__item{
  background:var(--paper);text-decoration:none;padding:0;display:block;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow .35s var(--ease);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* the hairline firms up to ink on hover — enough to read as active, no lift */
.mega__item:focus-visible{box-shadow:0 0 0 1px var(--ink)}
@media(hover:hover){.mega__item:hover{box-shadow:0 0 0 1px var(--ink)}}
.mega__thumb{aspect-ratio:16/10;overflow:hidden;background:#eee}
.mega__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mega__item:focus-visible .mega__thumb img{transform:scale(1.04)}
@media(hover:hover){.mega__item:hover .mega__thumb img{transform:scale(1.04)}}
.mega__label{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.05em;font-size:16px;line-height:1.1;
  padding:13px 14px 14px;
}
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.42);opacity:0;visibility:hidden;transition:.38s;z-index:998}
.scrim.on{opacity:1;visibility:visible}

/* ---- mobile menu button ---- */
.burger{display:none}

/* ============ HERO ============ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.5s var(--ease);
  will-change:opacity;
}
.hero__slide.on{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 8s linear;
}
.hero__slide.on img{transform:scale(1.13)}
.hero__slide picture{display:block;width:100%;height:100%}
/* Upright screens (phones) get their own 9:16 frames, each cropped around the
   machine, so nothing important falls off the sides. The slow zoom is gentler
   there too: at 1.13 it was trimming another eighth off an already narrow crop. */
@media (max-aspect-ratio:4/5){
  .hero__slide img{transform:scale(1.01)}
  .hero__slide.on img{transform:scale(1.06)}
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.30) 44%,rgba(10,10,10,0) 70%),
    linear-gradient(180deg,rgba(10,10,10,.70) 0%,rgba(10,10,10,.18) 28%,rgba(10,10,10,.50) 58%,rgba(10,10,10,.80) 80%,rgba(10,10,10,.90) 100%);
}
.hero__inner{
  /* low-left, lifted clear of the bottom edge to leave room for the scroll cue */
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--head) var(--pad) clamp(96px,15vh,150px);color:#fff;
}
.hero__h1{
  font-size:clamp(40px,7.4vw,112px);max-width:16ch;
  text-shadow:0 2px 16px rgba(0,0,0,.6),0 2px 54px rgba(0,0,0,.45);
}
.hero__sub{
  margin:24px 0 0;max-width:44ch;font-size:clamp(15px,1.5vw,19px);
  color:rgba(255,255,255,.96);line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__acts .btn{min-width:266px;text-align:center}
.btn{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.13em;font-size:16px;
  padding:15px 30px;text-decoration:none;border:2px solid;display:inline-block;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn--solid{background:#fff;color:var(--ink);border-color:#fff}
.btn--solid:hover{background:transparent;color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn--inkghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--inkghost:hover{background:var(--ink);color:#fff}

.hero__dots{position:absolute;right:var(--pad);bottom:clamp(48px,8vh,96px);z-index:4;display:flex;flex-direction:column;gap:9px}
.hero__dot{width:9px;height:9px;border:1.5px solid rgba(255,255,255,.85);background:transparent;padding:0;cursor:pointer;border-radius:50%;transition:.3s}
.hero__dot.on{background:#fff}
.hero__cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  color:rgba(255,255,255,.75);font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;
  font-weight:700;letter-spacing:.2em;font-size:11px;text-transform:uppercase;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.hero__cue span{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ SECTIONS ============ */
section{padding:clamp(72px,11vh,144px) var(--pad)}
.sec__head{max-width:900px;margin-bottom:clamp(40px,6vh,72px)}
.sec__title{font-size:clamp(36px,5.6vw,84px)}
.sec__lead{margin:24px 0 0;font-size:clamp(16px,1.6vw,20px);color:var(--ash);max-width:60ch}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.pillar{background:var(--paper);padding:clamp(32px,4vw,54px) clamp(24px,3vw,44px)}
.pillar__t{font-size:clamp(28px,3vw,42px);margin-bottom:16px}
.pillar p{margin:0;color:var(--ash);font-size:16px}

/* ---- category grid ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px}
/* only two tiles — split the width rather than huddling in the first columns */
.cats--two{grid-template-columns:repeat(2,1fr)}
.mega__grid--two{grid-template-columns:repeat(2,minmax(210px,340px))}
/* Flex column (not absolute text) so long category names grow the tile
   instead of overflowing past `overflow:hidden` and getting clipped. */
.cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;background:var(--ink);overflow:hidden;aspect-ratio:4/3;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* Hover: a slow, shallow push-in rather than a snap-zoom, the veil deepening
   from the foot of the card, and a rule wiping in under the name — the same
   left-origin scaleX the nav links use, so the motion reads as one system.
   The rule reserves its space at all times, so nothing shifts on hover. */
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
/* Hover only where there is a real pointer. On a phone a :hover rule turns the
   first tap into a preview of this animation and the second tap into the
   visit; there the tap plays it (`.is-tap`, set in site.js) and then goes. */
@media(hover:hover){
  .cat:hover img{transform:scale(1.045)}
  .cat:hover .cat__veil{background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.92) 100%)}
  .cat:hover .cat__txt::after{transform:scaleX(1)}
}
.cat:focus-visible img{transform:scale(1.045)}
.cat__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(10,10,10,.86) 100%);
  transition:background .55s var(--ease);
}
.cat:focus-visible .cat__veil{
  background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.92) 100%);
}
.cat__txt{position:relative;z-index:2;padding:22px 24px;color:#fff}
.cat__name{font-size:clamp(20px,2vw,27px);line-height:1.02}
.cat__txt::after{
  content:"";display:block;height:2px;width:46px;background:#fff;margin-top:14px;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.cat:focus-visible .cat__txt::after{transform:scaleX(1)}
/* the tap: the same three moves, quick enough to finish before the page turns */
.cat.is-tap img{transform:scale(1.045);transition-duration:.3s}
.cat.is-tap .cat__veil{background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.92) 100%);transition-duration:.22s}
.cat.is-tap .cat__txt::after{transform:scaleX(1);transition-duration:.22s}
.cat:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ---- map ---- */
.map{padding:0;position:relative;background:var(--ink)}
/* nothing overlays the map now, so the pin sits dead centre */
.map__frame{width:100%;height:clamp(480px,62vh,680px);border:0;display:block}

/* ---- footer: the black bar beneath the map ----
   Grove's format: one bar with the logo at the left, the contact links
   spread evenly, and the "Site by" credit at the right, all centred on one
   line. Under 1340px it splits into two lines (the links, then the logo and
   the credit). On a phone the links stack, then the logo and credit share a row. */
.mapbar{
  background:var(--ink);color:#fff;
  padding:clamp(40px,4vw,56px) var(--pad) clamp(24px,2.4vw,32px);
}
.mapbar__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.mapbar__links{display:contents}
.mapbar__home{flex:none;display:block;transition:opacity .25s var(--ease)}
.mapbar__home:hover{opacity:.75}
.mapbar__logo{width:156px;height:auto;display:block}
.mapbar__link{
  color:#fff;font-size:17px;line-height:1.45;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:rgba(255,255,255,.4);
  transition:text-decoration-color .3s var(--ease),opacity .18s var(--ease);
}
a.mapbar__link:hover{text-decoration-color:#fff}
a.mapbar__link:active{opacity:.55;transition-duration:0s}
.mapbar__link--plain{text-decoration:none}
.mapbar__link--nowrap{white-space:nowrap}
/* Ethan Long Design's wordmark, outlined so it needs no font, one <path> per
   glyph. Each glyph carries --x (its left edge as a fraction of the mark) so a
   hover sweeps white across it left to right. "Site by" sits centred over it.
   No target="_blank": Facebook's in-app browser has no tabs. */
.credit{
  flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.62);text-decoration:none;
  transition:color .3s var(--ease),opacity .18s var(--ease);
}
.credit__by{font-size:12px;line-height:1;letter-spacing:.02em}
.credit:hover,.credit:focus-visible{color:#fff}
.credit:active{opacity:.6;transition-duration:0s}
.elw{height:32px;width:auto;flex:none;overflow:visible;display:block}
.elw .g{fill:rgba(255,255,255,.62);transition:fill .28s var(--ease) 0s}
.credit:hover .elw .g,.credit:focus-visible .elw .g{fill:#fff;transition-delay:calc(var(--x) * 420ms)}
/* two lines: the links across the top, the logo and the credit beneath */
@media(max-width:1339px){
  .mapbar__bar{row-gap:40px}
  .mapbar__links{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;order:-1}
}
/* the fine print */
.mapbar__legal{
  display:flex;flex-wrap:wrap;justify-content:center;text-align:center;
  margin-top:clamp(32px,3.6vw,40px);padding-top:clamp(20px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:16px;color:rgba(255,255,255,.5);
}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq__empty{
  border-bottom:1px solid var(--line);
  padding:clamp(56px,9vh,110px) 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.faq__mark{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(48px,7vw,86px);line-height:1;color:var(--line-strong);
}
.faq__note{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ash);margin:0;
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
/* The nav switches to the burger earlier than the rest of the layout does.
   With two long dropdown labels the inline row needs ~1270px beside the logo,
   so the burger takes over below 1300. Layout rules stay at 900px below. */
@media(max-width:1300px){
  .burger{
    /* flex, not grid: grid's stretched auto-rows spread the bars wider than the
       ±7px translate below, so the X never closed */
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;
    background:none;border:0;cursor:pointer;gap:5px;
  }
  .burger i{display:block;width:24px;height:2px;background:#fff;transition:.3s var(--ease)}
  .hdr.solid .burger i{background:var(--ink)}
  .burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x i:nth-child(2){opacity:0}
  .burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{
    position:fixed;top:var(--head);left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:14px var(--pad) 30px;
    border-bottom:1px solid var(--line);margin:0;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s var(--ease);
    max-height:calc(100vh - var(--head));overflow-y:auto;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a,.nav button{color:var(--ink) !important;font-size:20px;padding:14px 0;text-align:left;width:100%;white-space:normal}
  .nav a::after,.nav button::after{display:none}
  .nav__cta{border:2px solid var(--ink) !important;text-align:center !important;margin:12px 0 0;padding:14px !important}
  /* Once the nav collapses the magnifier steps out of it and sits beside the
     burger — but on its own an icon reads as decoration, so here it carries the
     word in a bubble. The label types itself in on first load. */
  .nav .srch__btn{display:none}
  .burger{margin-left:0}
  .hdr{gap:6px}
  .hdr__search{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    width:auto;height:38px;padding:0 15px 0 12px;border-radius:999px;
    border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);
    transition:transform .3s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  }
  .hdr.solid .hdr__search{border-color:var(--line-strong);background:rgba(10,10,10,.045)}
  @media(hover:hover){
    .hdr__search:hover{transform:scale(1.045);background:rgba(255,255,255,.2)}
    .hdr.solid .hdr__search:hover{background:rgba(10,10,10,.09)}
  }
  .hdr__search svg{width:16px;height:16px}
  /* the ghost holds the full word's width from the first frame, so the header
     never reflows while the letters land */
  .hdr__search .srch__label{
    display:block;position:relative;
    font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:.15em;font-size:12px;line-height:1;
  }
  .srch__ghost{visibility:hidden}
  .srch__type{position:absolute;left:0;top:0;white-space:nowrap}
  /* the caret only exists while it is typing */
  .srch__label.typing .srch__type::after{
    content:"";display:inline-block;width:1.5px;height:11px;margin-left:2px;
    background:currentColor;vertical-align:-1px;animation:srchCaret .78s steps(1) infinite;
  }
  @keyframes srchCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
}

@media(max-width:900px){
  :root{--head:70px}
  .srch__x{top:12px}
  .srch__keys{display:none}
  .mega{padding:24px var(--pad) 34px}
  .mega__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .mega__label{font-size:14px;padding:10px 11px 12px}
  .hdr__logo{height:38px}
  .hero__dots,.hero__cue{display:none}
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{text-align:center}
  .cat__name{font-size:21px}
  .cat__txt{padding:18px 20px}
  .map__frame{height:340px}
  /* the links stack, each on its own line; the logo and credit share the row beneath */
  .mapbar__bar{row-gap:32px}
  .mapbar__links{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px}
  .mapbar__link{font-size:18px}
  .mapbar__logo{width:148px}
  .elw{height:28px}
  .mapbar__legal{margin-top:32px;padding-top:20px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .pillars{grid-template-columns:1fr}
}
/* Small phones: the bubble tightens so the logo, the word and the burger all fit
   on one bar. Below 360 the bar itself gives up padding and a few logo pixels —
   at 320 the row is 353px wide otherwise and the burger walks off the edge. */
@media(max-width:390px){
  .hdr__search{height:34px;padding:0 11px 0 9px;gap:6px}
  .hdr__search svg{width:15px;height:15px}
  .hdr__search .srch__label{font-size:11px;letter-spacing:.1em}
}
@media(max-width:360px){
  .hdr{padding:0 14px}
  .hdr__logo{height:32px}
  .burger{width:38px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hero__slide img{transform:none !important}
  .rv{opacity:1;transform:none}
}

/* small phones: the logo and the credit give up a little so they stay on one row */
@media(max-width:370px){
  .mapbar__logo{width:128px}
  .elw{height:24px}
}

/* ---- product sections ----
   Each product is its own block, and it has to read that way: a heavy ink rule
   opens every one, so the only thin grey line left inside a product is the one
   over its sizes and nothing is mistaken for the break between two products.
   `#prodList` outranks the per-page .prod rules. */
#prodList .prod{border-top:4px solid var(--ink)}
/* On a phone the column is one long run, so the name leads its own block —
   rule, name, photos, then price, copy and sizes — instead of the photos coming
   first and reading as the end of the product above. */
@media(max-width:900px){
  #prodList .prod{row-gap:0}
  #prodList .prod__info{display:contents}
  #prodList .prod__info > *{min-width:0}
  #prodList .prod__name{order:-2;margin-bottom:18px}
  #prodList .prod__media{order:-1;margin-bottom:6px}
}