/* =============================================================
   HAVANA HOUSE — BASE, LAYOUT, CHROME
   ============================================================= */

/* =============================================================
   CAPSTONE DEMI-BOLD — the client's own licensed display face
   (Carmel Type Co.), self-hosted rather than fetched from a CDN.

   font-weight is declared as a RANGE on a single static face.
   Capstone ships one weight; without the range, a heading asking
   for 600 or 700 would get a synthetic bold — the browser smearing
   the outline sideways — which on a high-contrast Latin turns the
   hairlines to mud. Declaring 400-700 tells the browser this face
   answers all of them, so it never synthesises.

   woff2 first, woff second: woff2 is ~35% smaller (16.6kB against
   25.6kB) and everything current takes it.

   font-display: swap so a headline is readable in Copperplate for
   the few hundred milliseconds before the file lands, rather than
   being invisible.
   ============================================================= */
@font-face {
  font-family: 'Capstone';
  src: url('../fonts/capstone-demibold.woff2') format('woff2'),
       url('../fonts/capstone-demibold.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header rather than landing
     underneath it. Matches .hh-chrome's height at each breakpoint. */
  scroll-padding-top: calc(var(--hh-utility-h) + var(--hh-nav-h));
}

body {
  margin: 0;
  background: var(--hh-surface);
  color: var(--hh-ink-700);
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-base);
  font-weight: 300;
  line-height: var(--hh-lh-base);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--hh-font-display);
  font-weight: 500;
  color: var(--hh-ink);
  letter-spacing: var(--hh-ls-head);
  line-height: var(--hh-lh-snug);
  margin: 0 0 var(--hh-s4);
}

p { margin: 0 0 var(--hh-s4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--hh-ink);
  outline-offset: 2px;
  border-radius: var(--hh-r-sm);
}
.hh-sec--dark :focus-visible,
.hh-sec--darkest :focus-visible,
.hh-footer :focus-visible,
.hh-hero :focus-visible,
.hh-gate :focus-visible {
  outline-color: var(--hh-gold-400);
}

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

.hh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hh-ink); color: #fff;
  padding: var(--hh-s3) var(--hh-s5); text-decoration: none;
}
.hh-skip:focus { left: 0; }

/* ---------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------- */
.hh-wrap {
  width: 100%;
  max-width: var(--hh-wrap);
  margin-inline: auto;
  padding-inline: var(--hh-gutter);
}

.hh-sec { padding-block: var(--hh-section); }
.hh-sec--tint { background: var(--hh-surface-2); }
.hh-sec--warm { background: var(--hh-surface-3); }

.hh-sec--dark,
.hh-sec--darkest {
  background: var(--hh-ink);
  color: var(--hh-ink-200);
  padding-block: var(--hh-section-lg);
}
.hh-sec--darkest { background: var(--hh-ink-950); }
.hh-sec--dark h2, .hh-sec--dark h3,
.hh-sec--darkest h2, .hh-sec--darkest h3 { color: #fff; }
.hh-sec--dark a:not(.hh-btn), .hh-sec--darkest a:not(.hh-btn) { color: inherit; }

/* ---------------------------------------------------------------
   TYPE
   --------------------------------------------------------------- */
.hh-h2 {
  font-size: var(--hh-t-h2);
  font-weight: 500;
  letter-spacing: var(--hh-ls-display);
  line-height: 1.08;
  margin: 0;
}
.hh-h2--light { color: #fff; }

/* .hh-h2 zeroes the base heading margin because inside a section head the
   spacing belongs to the head, not the heading. Everywhere else that left a
   heading butting straight onto the next paragraph — measured at 0px in the
   about section, which is why a two-line heading read as running into the
   body copy. Restore it wherever the heading is followed by something.
   A heading that IS the last child (every section head) is untouched. */
.hh-h2:not(:last-child) { margin-bottom: var(--hh-s5); }

/* .hh-h2--centred is gone. "Why Havana House" was the only heading using it,
   and it was the only section head on the page not aligned to the gutter —
   Away's equivalent is text-align:start too. It now uses section_head() like
   every other rail, which also gives it their margins rather than its own. */

/* The `hidden` attribute is a UA `display: none`, so ANY author display
   declaration beats it — `.hh-pdp__actions { display: flex }` was enough to
   keep an element visible that JavaScript had correctly hidden. Worse, the
   DOM property still reads true, so a test that checks `el.hidden` passes
   while the thing is on screen. This makes the attribute mean what everyone
   assumes it means. */
[hidden] { display: none !important; }

.hh-eyebrow {
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-xxs);
  font-weight: 500;
  letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase;
  color: var(--hh-ink-600);
  margin: 0 0 var(--hh-s3);
}
/* Gold as an eyebrow is only legal on the dark ground: 9.38:1 there,
   1.74:1 on white. --brand is the light-ground variant, and it is a
   different token for that reason: gold-750 is the only gold that clears AA
   as text on white, at 4.58:1. Using --gold on a white page was caught on
   the product title, where "Tatuaje" rendered at 1.74:1 and was invisible. */
.hh-eyebrow--gold  { color: var(--hh-gold-300); }
.hh-eyebrow--brand { color: var(--hh-gold-750); }

/* Light ground by default, dark ground on request. It was ink-400, which is
   5.50:1 on ink and 2.96:1 on white — fine while the only label on the site
   sat in the dark cigar-of-the-month band, and an AA failure the moment the
   product page reused it. The base is now the safe one, because the next
   reuse will be on a light page too. */
.hh-label {
  font-size: var(--hh-t-xxs);
  font-weight: 500;
  letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase;
  color: var(--hh-ink-600);          /* 7.70:1 on white */
}
.hh-sec--dark .hh-label,
.hh-hero .hh-label { color: var(--hh-ink-400); }   /* 5.50:1 on ink */

.hh-lead {
  font-size: var(--hh-t-lg);
  line-height: var(--hh-lh-base);
  color: var(--hh-ink-700);
}
.hh-sec--dark .hh-lead, .hh-sec--darkest .hh-lead { color: var(--hh-gold-200); }

.hh-price {
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-base);
  font-weight: 500;
  color: var(--hh-ink);
  margin: 0;
}
.hh-sec--dark .hh-price, .hh-sec--darkest .hh-price { color: #fff; }
.hh-price--lg { font-size: 1.75rem; letter-spacing: -0.01em; }
.hh-price__was {
  font-size: var(--hh-t-base);
  font-weight: 300;
  color: var(--hh-ink-400);
  margin-left: var(--hh-s3);
}

.hh-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--hh-s5); margin-bottom: var(--hh-s7);
}

/* On a phone the heading takes the row to itself and the "view all" link
   drops beneath it. Capstone sets caps, which are markedly wider than the
   mixed case this was built against — "A few of our favourites" needs 474px
   at 28px, and sharing the row with the link left it about 250px and three
   ragged lines. */
@media (max-width: 700px) {
  .hh-sechead,
  .hh-sechead--split {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--hh-s4);
  }
  .hh-sechead > div:first-child { flex: 1 1 100%; min-width: 0; }
  .hh-sechead__tools { flex: 1 1 100%; }

  /* Both children of the tools row — the "view all" link and the rail
     arrows — are hidden on a phone, the link having been replaced by the
     end card in the rail. The div itself was still a flex item though, so
     the head's 16px gap was being applied to a zero-height box: a phantom
     16px between the heading and the row, on top of the 48px margin.
     Sixty-four in total, against Away's fifteen. */
  .hh-rail .hh-sechead__tools:not(:has(> :not([hidden]):not(.hh-rail__nav):not(.hh-seclink))) {
    display: none;
  }
}
.hh-sechead--split { align-items: flex-start; }

.hh-seclink {
  font-size: var(--hh-t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--hh-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--hh-line);
  padding-bottom: 2px;
  display: inline-flex; align-items: center; gap: var(--hh-s2);
}
.hh-seclink:hover { border-bottom-color: var(--hh-ink); }
.hh-seclink--light { color: var(--hh-gold-300); border-bottom-color: var(--hh-line-gold); }
.hh-seclink--light:hover { color: var(--hh-gold-200); border-bottom-color: var(--hh-gold-400); }

/* ---------------------------------------------------------------
   PLACEHOLDER HIGHLIGHTING — append ?ph to any URL
   --------------------------------------------------------------- */
.ph { }
body.show-ph .ph {
  background: rgba(183,174,128,.28);
  box-shadow: 0 0 0 2px rgba(183,174,128,.28);
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   ANNOUNCEMENT
   --------------------------------------------------------------- */
.hh-announce {
  background: var(--hh-ink-950);
  color: var(--hh-gold-300);
  font-size: var(--hh-t-xs);
  letter-spacing: 0.04em;
  min-height: var(--hh-announce-h);
  display: flex; align-items: center;
}
.hh-announce__list {
  display: flex; justify-content: center; gap: var(--hh-s6);
  flex-wrap: wrap; text-align: center;
}

/* ---------------------------------------------------------------
   TRUSTPILOT — a stand-in, see chrome.trustpilot()

   Drawn the way Trustpilot draws it: the SQUARE carries the rating and the
   star sitting on top of it stays white. A 4.8 is four solid green squares
   and a fifth filled 80% from the left, which is a gradient with a hard
   colour stop, not a clipped overlay.

   The white-on-green star is 2.36:1. That is Trustpilot's own artwork and it
   is exempt as a logo, but it is also never the only carrier of the rating —
   the score and the review count are stated as text alongside, so nothing
   depends on reading the stars.
   --------------------------------------------------------------- */
.hh-tp {
  display: none;             /* desktop only — see the media query below */
  align-items: center; gap: var(--hh-s2);
  color: inherit; text-decoration: none;
}
.hh-tp__stars { display: flex; gap: 3px; }
.hh-tp__star {
  display: grid; place-items: center;
  width: 14px; height: 14px;
  background: linear-gradient(to right,
              var(--hh-tp-green) var(--fill), var(--hh-tp-off) var(--fill));
}
.hh-tp__star .hh-icon { width: 12px; height: 12px; color: #fff; }
.hh-tp__text { white-space: nowrap; }
.hh-tp__text b { font-weight: 600; }
.hh-tp:hover .hh-tp__text { color: #fff; }
.hh-announce__list li { position: relative; }
.hh-announce__list li + li::before {
  content: ""; position: absolute; left: calc(var(--hh-s6) / -2);
  top: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .5; transform: translateY(-50%);
}
/* ---------------------------------------------------------------
   TICKER ARROWS — phone only

   Measured off Away at 375: 36px square, transparent, pinned 15px
   in from each edge of a 41px bar. Ours sit at the gutter (16px)
   in a 40px bar.

   The visible box is 36px but the tap area is stretched to 44px
   by a pseudo-element, because 36px is under every thumb-target
   guideline and the bar is the first thing a thumb meets.

   They are display:none until js/site.js sets data-ticker-ready,
   so a page without the script never shows two dead controls —
   the strip is swipeable either way.
   --------------------------------------------------------------- */
.hh-announce__inner { position: relative; }

.hh-announce__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  padding: 0; border: 0; background: none;
  color: var(--hh-gold-500);
  cursor: pointer;
  z-index: 2;
}
.hh-announce__arrow .hh-icon { width: 15px; height: 15px; }
.hh-announce__arrow::before {
  /* 44px tap target without a 44px box pushing the bar taller. */
  content: "";
  position: absolute; left: 0; right: 0;
  top: -4px; bottom: -4px;
}
.hh-announce__arrow:hover { color: var(--hh-gold-300); }
/* Hard against the page boundary, not inset by the gutter. The 36px box
   starts at the screen edge, so the chevron itself sits about 10px in —
   tight, but still clear of the bezel and of a rounded display corner. */
.hh-announce__arrow--prev { left: 0; }
.hh-announce__arrow--next { right: 0; }

@media (max-width: 900px) {
  .hh-announce { --hh-announce-h: 40px; }
  .hh-announce[data-ticker-ready] .hh-announce__arrow { display: inline-flex; }
}

/* Four messages wrap to a second line below about 900px and push the whole
   header down. So from there down the row becomes a one-at-a-time strip:
   each message is exactly one container wide, snapped, and swipeable.
   js/site.js advances it.

   Nothing is hidden, and that is the point — this replaces a rule that threw
   three of the four messages away to make the fourth fit. */
@media (max-width: 900px) {
  .hh-announce__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    /* The row is centred at desktop width. Centring an overflowing track
       list spills it off BOTH edges, and the start edge is not reachable by
       scrolling — the first message sat at left:-985px and scrollWidth
       reported 838 instead of 1340. Overflow must start at the start. */
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;   /* see components.css — auto on one axis moves the other off `visible` */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hh-announce__list::-webkit-scrollbar { display: none; }
  .hh-announce__list > li {
    scroll-snap-align: start;
    /* Each message is centred inside its own full-width column instead,
       inset far enough to clear the chevrons but no further. The chevron
       glyph ends 26px from the screen edge; text starts at 38px. At the
       old 40px inset the delivery message needed 268px and had 263, so it
       lost the "£40" to an ellipsis — the one part of it that matters. */
    text-align: center;
    padding-inline: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The separator dot belongs to a row of four, not to one at a time. */
  .hh-announce__list li + li::before { display: none; }
}

/* ---------------------------------------------------------------
   THE STRIP AT DESKTOP — lockup left, one message at a time on the right

   Four messages side by side needed 958px of the 1329px this strip has at
   1440, which left 185px a side for a lockup that measures 405px. Showing
   ONE message removes the problem rather than negotiating with it: the
   widest is 289px, so the pair fits from 901px up with room to spare.

   It is the same mechanism as the phone — a scroll-snap track one container
   wide, driven by the same code in js/site.js — only right-aligned instead
   of centred, and without the arrows. Two layouts for this strip, not
   three, and one behaviour.
   --------------------------------------------------------------- */
@media (min-width: 901px) {
  .hh-announce__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--hh-s6);
  }
  .hh-tp { display: inline-flex; flex: 0 0 auto; }

  .hh-announce__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    justify-content: start;   /* overflow must start at the start — see above */
    flex: 0 0 var(--hh-announce-msg-w);
    overflow-x: auto;
    overflow-y: hidden;   /* auto on one axis moves the other off `visible` */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hh-announce__list::-webkit-scrollbar { display: none; }
  .hh-announce__list > li {
    scroll-snap-align: start;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The separator dot belongs to a row of four, not to one at a time. */
  .hh-announce__list li + li::before { display: none; }
}

/* ---------------------------------------------------------------
   STICKY CHROME

   The utility bar and the nav stick; the announcement bar does not
   and is outside the wrapper. A dispatch cut-off is worth reading
   once — it is not worth 40px of every screen thereafter.

   z-index sits below the scrim (90) and drawer (100) so the drawer
   still covers the header, and above the mega panel's own stacking.

   Sticky breaks if any ancestor has overflow other than visible,
   so nothing between body and .hh-chrome may gain one.
   --------------------------------------------------------------- */
.hh-chrome {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--hh-ink);
  transition: transform 220ms var(--hh-ease), box-shadow 220ms var(--hh-ease);
}

/* Scrolling DOWN takes the whole header off canvas; scrolling UP brings it
   straight back. Reading gets the full screen, and the moment someone
   reverses — which usually means they want to go somewhere else — the search
   and the nav are already there.

   transform, not `top`. Cloud Pharmacy animates `top` on a fixed header,
   which works but runs on the layout thread and needs a spacer to stop the
   page jumping. A sticky element stays in flow, so there is nothing to
   reserve, and translateY is composited.

   The reduced-motion block at the foot of tokens.css already flattens this
   transition to nothing, so the header snaps instead of sliding. */
.hh-chrome.is-hidden { transform: translateY(-100%); }
/* Only once it is actually stuck — an edge on a header sitting in its
   natural place is just a line across the page. */
.hh-chrome.is-stuck {
  box-shadow: 0 1px 0 var(--hh-line-dark), 0 6px 24px rgba(16,16,15,.45);
}

/* ---------------------------------------------------------------
   UTILITY BAR
   --------------------------------------------------------------- */
.hh-utility { background: var(--hh-ink); }
.hh-utility__inner {
  min-height: var(--hh-utility-h);
  display: flex; align-items: center; gap: var(--hh-s6);
}

/* The wordmark. Set as type until the real SVG is vendored — two lines in
   the same arrangement as the mark, gold on ink (7.28:1). The tag line is
   gold-300 (9.38:1) because at 9px it needs the extra contrast. */
.hh-logo {
  flex: 0 0 auto;
  text-decoration: none;
  display: block;
  line-height: 1;
}
/* 437.625 x 100.091 in the file — ratio 4.372. Width and height are both
   set so the box is reserved before the SVG lands: no reflow of the whole
   utility bar on load. */
.hh-logo img { width: 200px; height: 45.75px; }
.hh-logo__name {
  display: block;
  font-family: var(--hh-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-gold-500);
  white-space: nowrap;
}
.hh-logo__tag {
  display: block;
  font-family: var(--hh-font-body);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hh-gold-300);
  margin-top: 4px;
  white-space: nowrap;
}
.hh-logo--lg .hh-logo__name { font-size: 2rem; }
.hh-logo--lg .hh-logo__tag { font-size: 0.6875rem; letter-spacing: 0.38em; }

.hh-utility .hh-utility__burger { display: none; }   /* beaten by .hh-iconbtn at equal specificity otherwise */

/* The slack in this row used to pool entirely between the search and the
   account/basket cluster — 24px on the logo side, 287px on the other. The
   auto margins split it, so the field sits in the middle of the space it has
   rather than shoved up against the wordmark. They collapse to nothing once
   the row is tight, so the narrow layout is unaffected. */
.hh-search {
  flex: 1 1 auto;
  max-width: 560px;
  margin-inline: auto;
  position: relative;
}
.hh-search__input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hh-line-dark);
  border-radius: var(--hh-r);
  color: #fff;
  font: inherit; font-size: var(--hh-t-sm);
  padding: 10px 44px 10px var(--hh-s4);
}
.hh-search__input::placeholder { color: var(--hh-ink-400); }
.hh-search__input:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--hh-gold-600);
  outline: none;
}
.hh-search__go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--hh-gold-400); padding: var(--hh-s2);
}

/* 4px between the two icon buttons, not 16. Away's svg-to-svg gap is 26px,
   but Away's ink almost fills its svg while ours used to rattle around
   inside it — so svg-to-svg was the wrong thing to match. Measured INK to
   INK, Away runs 28.6px and we were at 35px. 4px of box gap with the
   redrawn glyphs lands on 27.5px of ink. The phone link buys its own
   separation back with a margin, so the pair still groups against it. */
.hh-utility__right {
  display: flex; align-items: center; gap: var(--hh-s1);
}
/* The number was never too small — 14px, the same as the nav links and the
   search placeholder. Four other things were making it read as fine print
   parked in a gap:

   1. The hours ran at weight 300. Light, at 11px, on a dark ground, in a
      header where nothing else is below 400.
   2. Both lines inherited the 1.65 body line-height, so a two-line block
      stood 41px tall and read as loose rather than deliberate.
   3. The icon was 20px and gold beside 30px white glyphs — the smallest
      thing in the row, so it scanned as decoration, not a control.
   4. It had ~105px of air on its left and 22px on its right, which glued it
      to the icon cluster instead of giving it a place of its own.

   So: the number takes the size (16/600, it is the thing anyone acts on),
   the hours become an eyebrow rather than fine print — which is what
   --hh-t-xxs is for, and it is only ever correct uppercase — the block
   tightens to 34px, and a hairline gives it its own edge. */
.hh-utility__phone {
  display: flex; align-items: center; gap: var(--hh-s2);
  /* 12, against the divider's 24 on the other side. The account glyph sits
     9px inside its own box, so 12 + the 4px cluster gap + 9 puts the divider
     25px from the glyph and 24px from the number — centred in the gap it
     divides, rather than hugging the text it belongs to. */
  margin-right: var(--hh-s3);
  text-decoration: none; color: #fff;
}
.hh-utility__phone b {
  display: block;
  font-size: var(--hh-t-base); font-weight: 600;
  line-height: 1.2; letter-spacing: 0.005em;
}
/* Sentence case, and quiet again — uppercase turned a supporting line into a
   label that competed with the number above it. But not back to 11px/300:
   that was the frailty in the first place, and caps read optically larger
   than lower case, so dropping the caps at the same size would have put it
   right back to looking undersized. 12/400 is the trade — a size up, three
   steps of weight down, no tracking. */
.hh-utility__phone small {
  display: block;
  font-size: var(--hh-t-xs); font-weight: 400;
  line-height: 1.3; letter-spacing: 0.01em;
  color: var(--hh-ink-300);
}
.hh-utility__phone .hh-icon { width: 24px; height: 24px; color: var(--hh-gold-500); }
.hh-utility__phone:hover b { color: var(--hh-gold-400); }

/* Its own edge, so it stops looking like it fell into the gap between the
   search field and the icons. Sits in the flex gap, not in the block. */
.hh-utility__phone::after {
  content: ""; align-self: center;
  width: 1px; height: 28px;
  /* 16, not 24: the 8px flex gap is already between the text and this, so
     16 puts the rule 24px from the number against 26px to the account
     glyph. Measured, not guessed — the first pass sat at 32 against 26. */
  margin-left: var(--hh-s4);
  background: var(--hh-line-dark);
}

/* 30-in-48. Chasing this in CSS alone was the wrong move: at 28px the glyphs
   still read small because the DRAWING only filled 18 of its 24 viewBox
   units, so a 28px <svg> showed 21px of ink. Away's account mark fills 22 of
   24 and shows 25.7px at the same nominal size — 22% more, for free. The
   glyphs are redrawn to fill their box (see STROKE_ICONS in kit.py), so 30px
   of svg is now ~26px of ink, fractionally more than Away. */
.hh-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 0; cursor: pointer;
  color: #fff; text-decoration: none; border-radius: var(--hh-r);
}
.hh-iconbtn .hh-icon { width: 30px; height: 30px; }
.hh-iconbtn:hover { background: rgba(255,255,255,.08); }

.hh-basket { position: relative; }
/* Anchored to the corner of the GLYPH, not the corner of the box. The box is
   the tap target and is much larger, so offsets measured from it left the
   badge floating off in space — a third of it outside the bag. These land it
   3px proud of the glyph on both axes; the numbers differ per breakpoint
   because the glyph sits 9px inside a 48px box and 8px inside a 44px one,
   and the bag's own ink starts a little inside that again. The badge is
   centred ON that corner rather than tucked inside it, so it clips a quarter
   of itself over the bag instead of sitting across the top of it. The ring is
   the header ground, punched out around the badge — without it the gold disc
   merges into the bag's 1px outline and both read as mush. */
.hh-basket__count {
  position: absolute; top: 2px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--hh-gold-500); color: var(--hh-ink);
  border-radius: var(--hh-r-full);
  box-shadow: 0 0 0 2px var(--hh-ink);
  font-size: 11px; font-weight: 600; line-height: 19px; text-align: center;
}

/* ---------------------------------------------------------------
   NAV + MEGA
   --------------------------------------------------------------- */
/* Ruled on BOTH edges. It always had a top border and never a bottom one,
   which did not show while the hero was a full-bleed photograph — the picture
   was the boundary. A split hero puts an ink copy panel directly under an ink
   nav, and with nothing between them the chrome appeared to bleed into the
   hero. Every near-black in the ramp is within 1.3:1 of every other, so a
   tonal step cannot carry this on its own; the rule does the work and the
   step below reinforces it. This is not new decoration, it is the symmetry
   the nav was already half way to. */
.hh-nav {
  background: var(--hh-ink);
  border-top: 1px solid var(--hh-line-dark);
  border-bottom: 1px solid var(--hh-line-dark);
  position: relative;
}
.hh-nav__list {
  display: flex; justify-content: center; gap: var(--hh-s7);
  min-height: var(--hh-nav-h); align-items: center; flex-wrap: wrap;
}
.hh-nav__link {
  display: inline-block; padding: var(--hh-s3) 0;
  color: #fff; text-decoration: none;
  font-size: var(--hh-t-sm); font-weight: 400;
  letter-spacing: var(--hh-ls-wide); text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.hh-nav__link:hover,
.hh-nav__link[aria-expanded="true"] {
  color: var(--hh-gold-400);
  border-bottom-color: var(--hh-gold-500);
}
.hh-nav__list li:last-child .hh-nav__link { color: var(--hh-gold-400); }

.hh-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--hh-ink-900);
  border-top: 1px solid var(--hh-line-dark);
  box-shadow: var(--hh-shadow-lg);
}
.hh-mega__inner {
  display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr;
  gap: var(--hh-s7); padding-block: var(--hh-s7);
}
.hh-mega__h {
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-xxs); font-weight: 500;
  letter-spacing: var(--hh-ls-wide); text-transform: uppercase;
  color: var(--hh-gold-300); margin-bottom: var(--hh-s4);
}
.hh-mega__link, .hh-mega__all {
  display: block; padding: 5px 0;
  color: var(--hh-ink-200); text-decoration: none; font-size: var(--hh-t-sm);
}
.hh-mega__link:hover, .hh-mega__all:hover { color: var(--hh-gold-400); }
.hh-mega__all {
  margin-top: var(--hh-s3); padding-top: var(--hh-s3);
  border-top: 1px solid var(--hh-line-dark);
  color: var(--hh-gold-400);
  display: flex; align-items: center; gap: var(--hh-s2);
}
.hh-mega__aside {
  background: var(--hh-ink-800); padding: var(--hh-s5);
  border-radius: var(--hh-r-lg);
}
.hh-mega__aside h3 { color: #fff; font-size: var(--hh-t-h4); }
.hh-mega__aside p { font-size: var(--hh-t-sm); color: var(--hh-ink-300); }

/* ---------------------------------------------------------------
   MEGA MENU, VERSION 2 — the John Lewis shape (23 Oct 2026)
   A rail of ways in on the left; a panel of one promo column and three
   text groups on the right. Both versions sit in the page and
   body.menu-v2 picks one, so the two can be compared on any page.
   --------------------------------------------------------------- */
body.menu-v2 .hh-mega--v1 { display: none; }
body:not(.menu-v2) .hh-mega--v2 { display: none; }

.hh-mega2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; padding-block: 0; }
.hh-mega2__rail {
  display: flex; flex-direction: column;
  padding: var(--hh-s5) 0; border-right: 1px solid var(--hh-line-dark);
}
.hh-mega2__rail-btn {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent;
  padding: 9px var(--hh-s5) 9px var(--hh-s4);
  color: var(--hh-ink-200); font: inherit; font-size: var(--hh-t-sm);
  cursor: pointer;
}
.hh-mega2__rail-btn:hover { color: #fff; }
.hh-mega2__rail-btn.is-on {
  color: var(--hh-gold-400); border-left-color: var(--hh-gold-500);
  background: var(--hh-ink-800);
}
.hh-mega2__rail-btn:focus-visible { outline: 2px solid var(--hh-gold-500); outline-offset: -2px; }

.hh-mega2__panels { min-height: 440px; }
.hh-mega2__panel {
  display: none;
  grid-template-columns: 250px repeat(3, minmax(0, 1fr));
  gap: var(--hh-s6) var(--hh-s7);
  padding: var(--hh-s6) var(--hh-s5) var(--hh-s6) var(--hh-s7);
}
.hh-mega2__panel.is-on { display: grid; }

/* The promo column: six small pictures, then the "all" link. Pictures are
   for things that change — offers, the cigar of the month — and links stay
   text, which is the split John Lewis gets right. */
.hh-mega2__promos { display: flex; flex-direction: column; gap: var(--hh-s3); }
.hh-promo {
  display: flex; align-items: center; gap: var(--hh-s3);
  color: var(--hh-ink-200); text-decoration: none;
}
.hh-promo:hover .hh-promo__t { color: var(--hh-gold-400); }
.hh-promo__img {
  flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain;
  background: #fff; border-radius: var(--hh-r-sm);
}
.hh-promo__img--slot {
  display: block;
  background: repeating-linear-gradient(135deg, var(--hh-ink-800) 0 6px, var(--hh-ink-700, #333) 6px 12px);
}
.hh-promo__t { display: block; font-size: var(--hh-t-sm); color: #fff; }
.hh-promo__s { display: block; font-size: var(--hh-t-xs); color: var(--hh-ink-400); }
.hh-mega2__promos .hh-mega__all { margin-top: var(--hh-s2); }

.hh-mega2__group .hh-mega__link { display: flex; justify-content: space-between; gap: var(--hh-s3); }
.hh-mega__n { color: var(--hh-ink-500); font-size: var(--hh-t-xs); font-variant-numeric: tabular-nums; }

/* Brands: the twelve biggest as tiles, then every brand A to Z in four
   columns with a search. The one panel John Lewis does not give its brands. */
.hh-mega2__panel--brands { display: none; grid-template-columns: 1fr; gap: var(--hh-s5); }
.hh-mega2__panel--brands.is-on { display: grid; }
.hh-mega2__brandhead { display: flex; justify-content: space-between; align-items: center; gap: var(--hh-s4); }
.hh-mega2__brandhead .hh-mega__h { margin: 0; }
.hh-mega2__search {
  width: 260px; padding: 8px var(--hh-s3);
  background: var(--hh-ink-800); border: 1px solid var(--hh-line-dark);
  color: #fff; font: inherit; font-size: var(--hh-t-sm);
}
.hh-mega2__search::placeholder { color: var(--hh-ink-500); }
.hh-brandtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hh-s3); }
.hh-brandtile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--hh-s4); background: var(--hh-ink-800);
  color: #fff; text-decoration: none; font-size: var(--hh-t-sm);
  border: 1px solid transparent;
}
.hh-brandtile small { color: var(--hh-ink-400); font-size: var(--hh-t-xs); }
.hh-brandtile:hover { border-color: var(--hh-gold-500); color: var(--hh-gold-400); }
.hh-mega2__az { columns: 5; column-gap: var(--hh-s6); }
.hh-mega2__az .hh-mega__link { padding: 3px 0; break-inside: avoid; }
.hh-mega2__az .hh-mega__link[hidden] { display: none; }

/* The prototype's switch. Not a site element. */
.hh-proto-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px; background: var(--hh-ink); color: var(--hh-ink-300);
  border: 1px solid var(--hh-line-dark); border-radius: var(--hh-r-full);
  font-size: var(--hh-t-xs); box-shadow: var(--hh-shadow-lg);
}
.hh-proto-switch button {
  background: none; border: 1px solid transparent; color: var(--hh-ink-300);
  padding: 3px 9px; border-radius: var(--hh-r-full); font: inherit; font-size: var(--hh-t-xs); cursor: pointer;
}
.hh-proto-switch button.is-on { background: var(--hh-gold-500); color: var(--hh-ink); }

/* ---------------------------------------------------------------
   DRAWER
   --------------------------------------------------------------- */
.hh-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16,16,15,.6);
}
.hh-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  width: min(340px, 88vw);
  background: var(--hh-ink); color: var(--hh-ink-200);
  transform: translateX(-100%);
  transition: transform var(--hh-slow) var(--hh-ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
}
.hh-drawer.is-open { transform: none; visibility: visible; }
.hh-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--hh-s5); border-bottom: 1px solid var(--hh-line-dark);
}
.hh-drawer__top .hh-eyebrow { margin: 0; }
.hh-drawer__list { padding: var(--hh-s4) 0; }
.hh-drawer__list a {
  display: block; padding: var(--hh-s4) var(--hh-s5);
  color: #fff; text-decoration: none;
  font-size: var(--hh-t-lg);
  border-bottom: 1px solid var(--hh-line-dark);
}
.hh-drawer__foot { margin-top: auto; padding: var(--hh-s5); }
.hh-drawer__foot p { font-size: var(--hh-t-sm); color: var(--hh-ink-300); margin-top: var(--hh-s3); text-align: center; }
.hh-drawer__sub {
  margin-bottom: var(--hh-s5);
  padding-bottom: var(--hh-s5);
  border-bottom: 1px solid var(--hh-line-dark);
}
.hh-drawer__sub a {
  display: block; padding: var(--hh-s2) 0;
  color: var(--hh-gold-300); text-decoration: none;
  font-size: var(--hh-t-sm);
}
.hh-drawer__sub a:hover { color: var(--hh-gold-400); text-decoration: underline; }

/* ---------------------------------------------------------------
   AGE GATE
   --------------------------------------------------------------- */
.hh-gate {
  border: 0; padding: 0; max-width: 520px; width: calc(100% - 40px);
  background: var(--hh-ink); color: var(--hh-ink-200);
  border-radius: var(--hh-r-lg);
  box-shadow: var(--hh-shadow-lg);
}
.hh-gate::backdrop { background: rgba(16,16,15,.86); }
.hh-gate__panel { padding: var(--hh-s8) var(--hh-s7); text-align: center; }
.hh-gate h2 {
  color: #fff; font-size: var(--hh-t-h2);
  letter-spacing: var(--hh-ls-display); margin-bottom: var(--hh-s4);
}
.hh-gate p { font-size: var(--hh-t-sm); }
.hh-gate__actions {
  display: flex; flex-direction: column; gap: var(--hh-s3);
  margin: var(--hh-s6) 0 var(--hh-s4);
}
.hh-gate__small { font-size: var(--hh-t-xs); color: var(--hh-ink-400); }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
/* --hh-ink, matching the header, NOT ink-950.

   #231f20 is the brand black — sampled from the live site, where it carries
   332 elements. #10100f is a darker step generated from it, and it was doing
   no work down here: the footer is page chrome, the same as the header, so
   ending the page in a different black than it starts in is a distinction
   with nothing behind it.

   ink-950 keeps a job: the announcement strip that caps the very top, and
   the events band, which needs to sit deeper than the cigar-of-the-month
   section above it so the two dark sections do not read as one. */
.hh-footer {
  background: var(--hh-ink); color: var(--hh-ink-300);
  padding-top: var(--hh-section);
  font-size: var(--hh-t-sm);
}
.hh-footer__top {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--hh-s8);
  padding-bottom: var(--hh-s8);
  border-bottom: 1px solid var(--hh-line-dark);
}
.hh-footer .hh-logo { margin-bottom: var(--hh-s4); }
/* The crest, not the wordmark: 576x360, so 1.6:1 rather than the header
   mark's 4.37:1. Sized to about the same optical weight as the header logo
   rather than the same width. */
/* The crest stays left-aligned in its column; the social row is centred
   BENEATH IT, within the crest's own width rather than the column's. The
   inner wrapper is width:fit-content, so it takes the crest's width — the
   social row then fills that and centres inside it. No hardcoded 210px, so
   resizing the crest moves the icons with it. */
.hh-footer__brandinner { width: fit-content; }
.hh-footer .hh-logo--crest { display: block; }
.hh-footer .hh-logo--crest img { width: 210px; height: 131.25px; }

/* Social marks under the crest, centred beneath it at every width — the
   brand block is one thing, so the mark and the marks under it share an axis.

   The glyphs were 20px in 44px boxes with an 8px gap: 12px of padding either
   side plus the gap put THIRTY-TWO pixels between neighbouring glyphs, so
   they read as three separate items rather than one row. 24px glyphs in
   touching 44px boxes gives 20px between them and a bigger mark, with the
   44px tap target intact. */
.hh-social {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: var(--hh-s5) 0 0;
}
.hh-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--hh-gold-500);
  border-radius: var(--hh-r);
  transition: color var(--hh-fast) var(--hh-ease),
              background var(--hh-fast) var(--hh-ease);
}
.hh-social a:hover { color: var(--hh-ink); background: var(--hh-gold-500); }
.hh-social .hh-icon { width: 24px; height: 24px; }
.hh-footer__signup h3 {
  font-family: var(--hh-font-body); font-weight: 500;
  color: #fff; font-size: var(--hh-t-h4); letter-spacing: 0;
}
.hh-signup { display: flex; gap: var(--hh-s2); margin-top: var(--hh-s4); }
.hh-signup__input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hh-line-dark);
  border-radius: var(--hh-r);
  color: #fff; font: inherit; padding: 11px var(--hh-s4);
}
.hh-signup__input::placeholder { color: var(--hh-ink-400); }
.hh-footer__small { font-size: var(--hh-t-xs); color: var(--hh-ink-400); margin-top: var(--hh-s3); }

/* The shops column carries the two longest strings on the page —
   "Stratford-upon-Avon" and "The Cigar Emporium" — and it splits into two
   internally. Equal quarters made both break mid-name, which reads as two
   separate shops. It gets the extra width. */
.hh-footer__cols {
  display: grid; grid-template-columns: 1fr 1fr 1.45fr 1fr;
  gap: var(--hh-s7); padding-block: var(--hh-s8);
}

/* ---------------------------------------------------------------
   FOOTER ACCORDIONS

   Native <details>, as doorstep does it — no JavaScript, and with
   the script absent they still open and close. They ship with the
   `open` attribute so the lists are present for search engines and
   for anyone arriving with CSS unstyled.
   --------------------------------------------------------------- */
.hh-footer-acc summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s3);
  list-style: none;
  cursor: pointer;
}
.hh-footer-acc summary::-webkit-details-marker { display: none; }
.hh-footer-acc summary h4 { margin: 0; }
.hh-footer-acc summary .hh-icon {
  flex: 0 0 auto;
  color: var(--hh-ink-400);
  transition: transform var(--hh-slow) var(--hh-ease);
}
.hh-footer-acc[open] summary .hh-icon { transform: rotate(180deg); }

@media (min-width: 701px) {
  /* Above the breakpoint they are lists, not controls — always open, and
     the chevron goes.

     ::details-content is load-bearing. Current engines wrap a closed
     details' contents in that pseudo-element and hide THAT, so styling the
     child does nothing; the second rule covers older engines that hid the
     child directly. */
  .hh-footer-acc::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
  .hh-footer-acc > *:not(summary) { display: block !important; }
  .hh-footer-acc summary {
    cursor: default;
    pointer-events: none;
    margin-bottom: var(--hh-s4);
  }
  .hh-footer-acc summary .hh-icon { display: none; }
}

@media (max-width: 700px) {
  /* Each accordion carries its own top rule, and the last one closes the set
     — so the rules are the ONLY dividers down here. The signup block's
     border-bottom and the legal block's border-top are both removed: each
     was drawing a second line a few pixels from an accordion's own. */
  .hh-footer__top { border-bottom: 0; }

  .hh-footer-acc { border-top: 1px solid var(--hh-line-dark); }
  .hh-footer-acc:last-of-type { border-bottom: 1px solid var(--hh-line-dark); }

  /* Full bleed. The rules break out of the wrap's gutter and pay it back as
     padding, so the lines run edge to edge while the labels stay aligned
     with everything above them. */
  .hh-footer-acc {
    margin-inline: calc(var(--hh-gutter) * -1);
    padding-inline: var(--hh-gutter);
  }

  .hh-footer-acc summary { padding-block: var(--hh-s4); min-height: 48px; }
  .hh-footer-acc summary h4 { margin-bottom: 0; }
  .hh-footer-acc__body { padding-bottom: var(--hh-s4); }

  /* One column, and no vertical padding: the first accordion's own rule is
     the divider under the signup block, so padding here would push it away
     from the join and reopen the gap the second line used to fill. */
  .hh-footer__cols { grid-template-columns: 1fr; gap: 0; padding-block: 0; }

  /* Two columns of shops inside a collapsed panel is a cramped read. */
  .hh-footer__stores ul { columns: 1; }
}
.hh-footer__cols h4 {
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-xxs); font-weight: 500;
  letter-spacing: var(--hh-ls-wide); text-transform: uppercase;
  color: var(--hh-gold-300); margin-bottom: var(--hh-s4);
}
.hh-footer__cols li { margin-bottom: var(--hh-s2); }
.hh-footer__cols a { text-decoration: none; }
.hh-footer__cols a:hover { color: var(--hh-gold-400); text-decoration: underline; }
.hh-footer__stores ul { columns: 2; column-gap: var(--hh-s5); }
.hh-footer__stores li { break-inside: avoid; }

.hh-footer__legal {
  border-top: 1px solid var(--hh-line-dark);
  padding-block: var(--hh-s5) var(--hh-s7);
  font-size: var(--hh-t-xs); color: var(--hh-ink-400);
  display: flex; justify-content: space-between; gap: var(--hh-s5); flex-wrap: wrap;
}
.hh-footer__warn { color: var(--hh-gold-300); }

/* ---------------------------------------------------------------
   RESPONSIVE CHROME
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hh-utility__phone small { display: none; }
}
/* Two footer columns ONLY between 701 and 900. Bounded below rather than
   left open: the single-column accordion rule for phones sits earlier in
   this file, and at equal specificity the later @media wins — an unbounded
   max-width:900 rule silently re-columned the accordions two-up. */
@media (max-width: 900px) and (min-width: 701px) {
  .hh-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--hh-s6); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 132px; }   /* logo row + search row */
  .hh-utility .hh-utility__burger { display: inline-flex; }
  .hh-nav { display: none; }

  /* Burger left, wordmark centred, account and basket right, search on its
     own full-width row beneath.

     minmax(0, 1fr) on the outer tracks, not 1fr. A bare 1fr floors at its
     content's min-content width, so the 88px icon cluster forced its track
     wider than the burger's and pushed the wordmark off centre by ~4px.
     Zeroing the floor makes both tracks exactly equal, which is what puts
     the middle track — and the wordmark in it — dead centre. The cluster
     then overflows its own track by a few pixels into the column gap, which
     is harmless: it still clears the wordmark. */
  .hh-utility__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "burger logo   right"
      "search search search";
    align-items: center;
    column-gap: var(--hh-s3);
    row-gap: var(--hh-s4);
    padding-block: var(--hh-s4);
    min-height: 0;
  }
  .hh-utility .hh-utility__burger { grid-area: burger; justify-self: start; }
  .hh-logo { grid-area: logo; justify-self: center; margin-inline: 0; }
  .hh-utility__right { grid-area: right; justify-self: end; }
  .hh-search { grid-area: search; max-width: none; margin-inline: 0; }

  /* Boxes touching. Each is still a 44px target, but a 16px gap between two
     44px boxes put 32px of air between the two glyphs, which is what made
     them read as unrelated. Touching leaves 16px glyph to glyph — tighter
     than Away's 20px, looser than smoke-king's 9px. */
  .hh-utility__right { gap: 0; }

  /* The number stays out — it is a full-width button in the drawer, and it
     was only costing this row the width it needs. The account link comes
     back; it is a first-class destination in a shop. */
  .hh-utility__phone { display: none; }
  .hh-utility__account { display: inline-flex; }

  /* Away and smoke-king both run 28px glyphs here; ours were 20px, which is
     what made them read as undersized. The box goes to 44px with them —
     that is the thumb target, not decoration. */
  .hh-utility .hh-iconbtn { width: 44px; height: 44px; }
  .hh-utility .hh-iconbtn .hh-icon { width: 28px; height: 28px; }

  /* Away pins the menu GLYPH to the gutter and lets the box hang outside it
     — box at 5px, glyph at 15px on a 15px gutter. Centring a 28px glyph in a
     44px box leaves 8px of padding, which is exactly the inset that made
     ours look arbitrarily nudged in. Pull each end icon out by that 8px and
     the glyphs land on the gutter. */
  .hh-utility .hh-utility__burger { margin-left: -10px; }
  .hh-utility__right > :last-child { margin-right: -10px; }

  /* 1px, not 2: the mobile glyph is 28px in a 44px box, so the bag's ink
     corner sits ~1px higher and further in relative to the box than it does
     on desktop. Same badge, same corner. */
  .hh-basket__count { top: 1px; right: 2px; }

  /* A centred wordmark has to fit between the two clusters, and the right
     one is 88px. The headroom works out at (viewport - 204px), which is 171
     at 375 — so on any phone from 375 up this is simply 168px. Below that it
     gives way rather than colliding with the account icon. */
  .hh-logo img {
    width: min(168px, calc(100vw - 204px));
    height: auto;
    aspect-ratio: 437.625 / 100.091;
  }
  .hh-logo__name { font-size: 1.125rem; }
  .hh-logo__tag { font-size: 0.5rem; letter-spacing: 0.28em; }
  .hh-footer__top { grid-template-columns: 1fr; gap: var(--hh-s7); }

  /* Once the footer stacks, the brand block has the full width to itself and
     a left-aligned mark with three icons under it reads as an orphaned
     column. Centred, it becomes the sign-off it is. The -10px that pulled the
     social row back onto the logo's left edge is removed here — it would
     throw the centring out by half an icon. */
  /* Stacked, the brand block has the full width to itself, so the whole
     wrapper centres — crest and icons together. */
  .hh-footer__brandinner { margin-inline: auto; }
}
@media (max-width: 560px) {
  .hh-signup { flex-direction: column; }
}

/* ---------------------------------------------------------------
   Last, because it has to be.

   .hh-footer__legal's border-top is declared further up this file, and at
   equal specificity the later rule wins regardless of which is inside a
   media query. Removing it from the accordion block above did nothing —
   the base rule simply came afterwards. It lives here so it is genuinely
   last: the closing line under the accordions is the last accordion's own
   border-bottom, not a second rule a few pixels below it.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .hh-footer__legal { border-top: 0; }
}