/* =============================================================
   HAVANA HOUSE — HOMEPAGE
   The nine sections A-I. Section letters match build.py and
   notes/brief.md.
   ============================================================= */

/* ---------------------------------------------------------------
   A — HERO CAROUSEL  (split frame)

   The copy sits on solid ink in its own cell; the photograph owns the cell
   beside it and stacks ABOVE it on a phone. Type never lands on the picture,
   so there is no scrim, no "keep the left of the frame quiet" rule, and no
   image the client can send that breaks the headline.

   Why split rather than full bleed, in one number: a 2400x1100 asset — what
   the shot list used to ask for — keeps 88% of its width on desktop and 27%
   on a phone. The split cell is 1.20 at desktop and 1.5 on a phone, either
   side of square, so ONE square master serves both at 17% and 33%. Away
   solve the same problem by shipping two art-directed files per slide; this
   solves it by never needing the second one. See hero-options.html.

   It does NOT auto-advance. Slides are stacked in one grid cell and
   cross-faded, so the section never changes height between slides.
   --------------------------------------------------------------- */
.hh-hero {
  position: relative;
  background: var(--hh-ink);
  color: #fff;
}
.hh-hero__track {
  display: grid;
  grid-template-areas: "slide";
  /* Capped, not full bleed. The copy cell is a percentage of this, so
     without the cap the headline drifts away from the page gutter on very
     wide screens while every other section stays put. */
  max-width: var(--hh-wrap);
  margin-inline: auto;
}
.hh-hero__slide {
  grid-area: slide;
  display: grid;
  /* Opaque, and it has to be. The slides are stacked in one grid cell and the
     first is pinned visible as the no-script fallback, so an active slide has
     to OCCLUDE the one underneath rather than merely sit above it. The old
     full-bleed layout got this for free from an image covering the whole
     slide; a split slide has a transparent copy cell, and without this the
     two headlines print on top of each other. */
  background: var(--hh-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hh-slow) var(--hh-ease), visibility var(--hh-slow);
}
.hh-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* With the script absent nothing gets .is-active, so the first slide shows
   and the rest stay stacked underneath. The hero still reads. */
.hh-hero__slide:first-child { opacity: 1; visibility: visible; }
.hh-hero__slide:first-child:not(.is-active) { z-index: 0; }

.hh-hero__media { position: relative; overflow: hidden; background: var(--hh-ink); }
/* Absolute, or the image's own intrinsic height drives the grid row and the
   cell comes out square instead of landscape. Out of flow, the row height
   comes from min-height and the copy, and the image fills whatever that is. */
.hh-hero__img,
.hh-hero__media .hh-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto; border: 0;
}

/* No background of its own — it takes the slide's --hh-ink, the same brand
   black the header uses. An ink-950 panel was tried here to put a tonal step
   under the nav and rejected: it read as black rather than as the warm grey
   the rest of the chrome is, and the step was doing almost nothing anyway
   (1.17:1). The nav's border-bottom carries the separation on its own. */
.hh-hero__copy {
  display: flex; align-items: center;
  padding: var(--hh-s7) var(--hh-gutter);
}
.hh-hero__copyin { max-width: 560px; }
.hh-hero__title {
  font-size: var(--hh-t-display);
  font-weight: 500;
  letter-spacing: var(--hh-ls-display);
  line-height: var(--hh-lh-tight);
  color: #fff;
  margin: 0 0 var(--hh-s5);
}
.hh-hero__body {
  font-size: var(--hh-t-lg);
  color: var(--hh-gold-200);
  margin-bottom: var(--hh-s6);
  max-width: 46ch;
}

/* Phone: image on top at 3:2, copy under it.

   The ratio is a fold decision, not a taste one. The chrome costs 177px
   before the hero starts, leaving 635px on an 812pt phone. At 4:5 the button
   landed at 780 and missed every phone; 3:2 is the shortest cell that still
   reads as a photograph rather than a letterbox, and it costs the square
   master 33% instead of 20%. Measured, not guessed — see notes/brief.md. */
@media (max-width: 900px) {
  .hh-hero__slide { grid-template-rows: auto auto; }
  .hh-hero__media { aspect-ratio: 3 / 2; }
  .hh-hero__copy {
    padding: var(--hh-s5) var(--hh-gutter) calc(var(--hh-s5) + 44px);
  }
  .hh-hero__copyin { max-width: none; }

  /* Every value here is bought back from the fold. At the desktop settings
     the button landed at 807px against 812 of screen — visible by 5px, which
     is the same as not visible. The picture is not the thing to cut: 3:2 is
     already the shortest cell that reads as a photograph, and cutting it
     further only costs the master more crop. So the type tightens instead.
     44px display type set at the body's 1.65 leading is a desktop setting
     wearing a phone's clothes. */
  .hh-hero__title {
    font-size: 2.5rem;
    margin-bottom: var(--hh-s4);
  }
  .hh-hero__body {
    font-size: var(--hh-t-base);
    line-height: 1.5;
    margin-bottom: var(--hh-s4);
  }
  .hh-hero .hh-eyebrow { margin-bottom: 10px; }
}

@media (min-width: 901px) {
  .hh-hero__slide {
    grid-template-columns: 46fr 54fr;
    align-items: stretch;
    min-height: 640px;
  }
  .hh-hero__media { order: 2; }

  /* The bottom padding reserves the controls' band, and that is what fixes
     "the copy sits too low". The cell is 640 tall and the copy was centring
     in all of it — but the arrows and dots occupy the bottom 76px, so the
     space the copy actually has is 564. Centred in 640 it sat 95px from the
     top and 19px off the controls; centred in the space above them it sits
     evenly. Nothing moved except the container the centring measures. */
  .hh-hero__copy {
    order: 1;
    padding-bottom: calc(var(--hh-s7) + 76px);
  }
}

/* Anchored to the copy side, not floated over the middle of the section.
   Centred, they would straddle the seam between the two cells on desktop
   and sit on the photograph. Left-aligned they read as part of the copy
   column, which is what they control. */
.hh-hero__controls {
  position: absolute; z-index: 3;
  left: var(--hh-gutter); bottom: var(--hh-s6);
  display: flex; align-items: center; gap: var(--hh-s5);
}
.hh-heroarrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--hh-r-full);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hh-heroarrow:hover { background: var(--hh-gold-500); color: var(--hh-ink); border-color: var(--hh-gold-500); }

.hh-hero__dots { display: flex; gap: var(--hh-s3); }
.hh-hero__dot {
  width: 40px; height: 3px; padding: 0;
  background: rgba(255,255,255,.3);
  border: 0; cursor: pointer;
  position: relative;
}
/* The 3px bar is the visual; the hit area is 44px tall and invisible. */
.hh-hero__dot::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -20px; bottom: -20px;
}
.hh-hero__dot[aria-current="true"] { background: var(--hh-gold-500); }

@media (max-width: 900px) {
  /* Under the copy, not over the photo. The copy cell reserves 44px of
     bottom padding for them. */
  .hh-hero__controls { left: var(--hh-gutter); bottom: var(--hh-s5); }
}

/* ---------------------------------------------------------------
   B — SHOP BY

   A warm off-white panel, as Away does it. Theirs is #F7F4F2 on
   `.shop-by-category__inner` with `padding: 60px 45px` — and it is
   a CONTAINED panel, not a full-bleed band: measured at a 2200
   viewport it is 1830px wide, exactly their container, with the
   page showing white either side of it.

   Ours uses --hh-surface-3 rather than copying their hex. That is
   gold-50, the top of the brand ramp, and it lands within three
   points of #F7F4F2 on every channel — so it matches the reference
   without importing a colour that has nothing to do with the logo.

   The section contributes no padding of its own; the panel's own
   padding is the whole of it, which is what gives the slab a clean
   edge against the hero above and the favourites below.
   --------------------------------------------------------------- */
.hh-shopby { padding-block: 0; }
.hh-shopby > .hh-wrap {
  background: var(--hh-surface-3);
  padding-block: clamp(40px, 3.4vw, 60px);
}

/* ---------------------------------------------------------------
   D — CIGAR OF THE MONTH
   Away's two-up skeleton. The spec strip and the strength scale
   are this trade's own; luggage has no ring gauge.
   --------------------------------------------------------------- */
.hh-cotm__inner {
  display: grid;
  /* Narrower than it was: a 1:12 cut-out in a 0.85fr column left most of
     that column empty. */
  grid-template-columns: 0.5fr 1fr;
  gap: clamp(var(--hh-s7), 5vw, var(--hh-s10));
  align-items: center;
}
.hh-cotm__media { position: relative; display: grid; place-items: center; }
/* The <picture> is a wrapper, not a box. display:contents takes it out of
   the layout so the <img> is the grid item directly and every rule below
   still addresses the thing it was written for.

   The second line is not optional. <source> computes to display:block, and
   once its parent is display:contents it becomes a real grid item — a 0x0
   one, but enough to create a second row that the media cell then split its
   height between, leaving the cigar sitting 25px low in its own box. */
.hh-cotm__media picture { display: contents; }
.hh-cotm__media picture source { display: none; }

/* The cut-out is 208x2560 — about 1:12, which is a real cigar's proportions.
   So it is sized by HEIGHT and left to find its own width, rather than being
   fitted into a box built for a photograph. Transparent, so it needs no
   scrim, no multiply and no white plate: it stands on the dark band. */
.hh-cotm__img {
  height: clamp(320px, 46vw, 620px);
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

/* The stamp is the cigar band idea made literal: gold rule, gold
   type, on ink. 7.28:1. It is the one ornament on the page. */
.hh-cotm__stamp {
  position: absolute; right: calc(var(--hh-s6) * -1); top: var(--hh-s7);
  width: 118px; height: 118px;
  display: grid; place-items: center;
  border: 1px solid var(--hh-gold-600);
  border-radius: 50%;
  background: var(--hh-ink);
  color: var(--hh-gold-300);
  font-family: var(--hh-font-display);
  font-size: var(--hh-t-xs);
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.hh-cotm__stamp span { display: block; }

.hh-cotm__copy { max-width: 620px; }
.hh-cotm__note {
  font-size: var(--hh-t-sm);
  color: var(--hh-gold-300);
  margin: var(--hh-s3) 0 var(--hh-s5);
}
.hh-cotm__strength {
  display: flex; align-items: center; gap: var(--hh-s5);
  padding: var(--hh-s4) 0;
  margin-top: var(--hh-s5);
  border-top: 1px solid var(--hh-line-dark);
}

/* Written for the dark cigar-of-the-month band and then reused on the light
   product page, where dt was 2.76:1 and dd was WHITE ON CREAM at 1.07:1 —
   invisible, not merely low. So the base is the light-ground version and the
   dark band opts in, which is the way round that fails safe. */
.hh-spec {
  margin: 0 0 var(--hh-s6);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--hh-s7);
  border-top: 1px solid var(--hh-line);
}
.hh-spec__row {
  display: flex; justify-content: space-between; gap: var(--hh-s4);
  padding: 9px 0;
  border-bottom: 1px solid var(--hh-line);
  font-size: var(--hh-t-sm);
}
.hh-spec dt { color: var(--hh-ink-600); }                    /* 7.70:1 */
.hh-spec dd { margin: 0; color: var(--hh-ink); font-weight: 500; text-align: right; }

.hh-sec--dark .hh-spec,
.hh-sec--dark .hh-spec__row { border-color: var(--hh-line-dark); }
.hh-sec--dark .hh-spec dt { color: var(--hh-ink-400); }      /* 5.50:1 on ink */
.hh-sec--dark .hh-spec dd { color: #fff; font-weight: 400; }

.hh-cotm__buy {
  display: flex; align-items: center; gap: var(--hh-s4);
  flex-wrap: wrap;
}
.hh-cotm__buy .hh-price { margin-right: var(--hh-s3); }

@media (max-width: 700px) {
  /* Price on its own line, the two buttons sharing the next one.

     They were missing a single row by THREE pixels — 174 + 156 + a 16px gap
     is 346 against 343 available — so each element took a line of its own and
     the buy block ran to three rows. Letting the buttons flex to equal halves
     fixes it without shrinking the type or the tap target: 163.5px each,
     against content that needs about 145. */
  .hh-cotm__buy .hh-price { flex: 1 1 100%; margin-right: 0; }
  .hh-cotm__buy .hh-btn {
    flex: 1 1 0;
    min-width: 0;
    /* "ADD TO BASKET" needs 108px once uppercased, and the default 32px of
       padding each side left only 100px inside a 164px half — so the label
       wrapped and that button grew 20px taller than its neighbour. 16px
       padding gives it 132px. The 48px tap height is untouched. */
    padding-inline: var(--hh-s4);
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .hh-cotm__inner { grid-template-columns: 1fr; }
  .hh-spec { grid-template-columns: 1fr; }

  /* The cigar lies down. <picture> has already swapped in the 2560x208
     sibling, so the image is sized by WIDTH here — the mirror of the
     desktop rule, which sizes a 208x2560 file by height. */
  .hh-cotm__img {
    width: 100%;
    height: auto;
    /* 24px of lift under a 620px cigar reads as depth; under a 28px one it
       reads as a smudge. */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
  }

  /* The media cell is now only as tall as a lying cigar — about 28px at
     375px wide — and the stamp is 96. The cell keeps enough height for the
     stamp to sit beside the cigar rather than hang out of the section, and
     the stamp centres on the cigar instead of dropping from the top. */
  .hh-cotm__media { min-height: 128px; }
  .hh-cotm__stamp {
    right: var(--hh-s4);
    top: 50%; transform: translateY(-50%);
    width: 96px; height: 96px;
  }
}

/* ---------------------------------------------------------------
   F — EVENTS
   Replaces 1,576px of full-length list on the current site.
   --------------------------------------------------------------- */
.hh-events__intro {
  max-width: 46ch;
  font-size: var(--hh-t-sm);
  color: var(--hh-gold-200);
}
.hh-events__intro .hh-sechead__tools { margin-top: var(--hh-s4); }

.hh-event {
  display: flex; flex-direction: column; height: 100%;
  background: var(--hh-ink);
  border: 1px solid var(--hh-line-dark);
  border-radius: var(--hh-r-lg);
  overflow: hidden;
}
.hh-event__media { position: relative; }
.hh-event__media .hh-slot { border: 0; }

/* The date block. A cigar evening sells on when and where before it
   sells on what, so the date is the first thing on the card. */
.hh-event__date {
  position: absolute; left: var(--hh-s4); top: var(--hh-s4);
  background: var(--hh-gold-500); color: var(--hh-ink);
  width: 54px; padding: var(--hh-s2) 0;
  text-align: center; border-radius: var(--hh-r-sm);
  margin: 0;
}
.hh-event__date b {
  display: block;
  font-family: var(--hh-font-display);
  font-size: 1.5rem; line-height: 1; font-weight: 600;
}
.hh-event__date span {
  display: block;
  font-size: var(--hh-t-xxs); letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase;
}

.hh-event__body {
  padding: var(--hh-s5);
  display: flex; flex-direction: column; flex: 1;
}
.hh-event__venue {
  font-size: var(--hh-t-xxs); letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase; color: var(--hh-gold-300);
  margin: 0 0 var(--hh-s3);
}
.hh-event__title {
  font-family: var(--hh-font-body);
  font-weight: 500;
  font-size: var(--hh-t-h4);
  letter-spacing: 0;
  line-height: 1.34;
  margin: 0 0 var(--hh-s3);
}
.hh-event__title a { text-decoration: none; }
/* The whole card is the target; the anchor spans it. */
.hh-event__title a::after { content: ""; position: absolute; inset: 0; }
.hh-event { position: relative; }
.hh-event:hover { border-color: var(--hh-gold-600); }
.hh-event:hover .hh-event__title a { text-decoration: underline; text-underline-offset: 3px; }

.hh-event__blurb {
  font-size: var(--hh-t-sm); color: var(--hh-ink-300);
  margin-bottom: var(--hh-s5);
}
.hh-event__foot {
  margin: auto 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s4);
}

/* ---------------------------------------------------------------
   G — ABOUT
   --------------------------------------------------------------- */
.hh-about__inner {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(var(--hh-s7), 5vw, var(--hh-s9));
  align-items: center;
}
/* The source is a 4:3 landscape of a shopfront, shown in a 6:7 portrait
   frame, so cover crops ~36% of the width away. 42% rather than centre:
   the bay runs from the left pilaster to the entrance door on the right,
   but the things worth keeping — the fascia, the crest on the awning and
   the window display — all sit left of the bay's true centre. */
.hh-about__img {
  display: block; width: 100%; aspect-ratio: 6 / 7;
  object-fit: cover; object-position: 42% 50%;
}
.hh-about__copy { max-width: 58ch; }
.hh-about__award {
  font-size: var(--hh-t-sm);
  color: var(--hh-gold-800);       /* 6.84:1 — gold as TEXT on light needs 750 or darker */
  border-left: 2px solid var(--hh-gold-500);
  padding-left: var(--hh-s4);
  margin-block: var(--hh-s5);
}
.hh-about__actions {
  display: flex; align-items: center; gap: var(--hh-s5);
  flex-wrap: wrap; margin-top: var(--hh-s6);
}
@media (max-width: 900px) {
  .hh-about__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   H — WHY HAVANA HOUSE
   --------------------------------------------------------------- */
/* Bordered cards on the white page, as Away does it: 1px, square corners, no
   fill, no section background behind them. The border does all the work.

   The border is --hh-line, which is Away's #e2e1e1 to within two points per
   channel (ours is #e4e3e0). Using the token rather than their literal hex
   keeps the value in one place — it is the same light rule the product
   cards, the footer columns and the tile grid all use.

   Away applies a dark #111 border to one card only, a highlight tied to
   their carousel position. Not copied: with a progress bar already under the
   row, a second "you are here" cue says the same thing twice. */
.hh-reason {
  text-align: left;
  height: 100%;
  padding: var(--hh-s5);
  border: 1px solid var(--hh-line);
  background: transparent;
  transition: border-color var(--hh-fast) var(--hh-ease),
              background var(--hh-fast) var(--hh-ease);
}
.hh-reason:hover {
  border-color: var(--hh-gold-600);
  background: var(--hh-gold-50);
}
/* No ring. The card already has a hard ink rectangle round it; a gold circle
   inside that was a second frame doing the same job, and a round one inside a
   square one at that. The glyph carries itself. */
.hh-reason__icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hh-gold-800);
  margin-bottom: var(--hh-s4);
}
.hh-reason__title {
  font-family: var(--hh-font-body);
  font-weight: 500;
  font-size: var(--hh-t-h4);
  letter-spacing: 0;
  line-height: 1.34;
  margin-bottom: var(--hh-s3);
}
.hh-reason p { font-size: var(--hh-t-sm); color: var(--hh-ink-600); }

/* Four across on desktop, where the rail is a static grid and its arrows
   disable themselves; a scrolling carousel below 1000px. */
@media (min-width: 1001px) {
  #rail-why { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  #rail-why { grid-auto-columns: minmax(0, calc((100% - 2 * var(--hh-card-gap)) / 2.4)); }
}
@media (max-width: 700px) {
  /* 62% of the content width, ~213px at 375 — close to Away's 204px, and
     wide enough that the longest reason title stays on two lines. */
  #rail-why { grid-auto-columns: 62%; }
}

/* ---------------------------------------------------------------
   I — THE JOURNAL
   Away's grid treatment, carrying posts. Caption over image,
   one rail. NOT a shoppable social wall — see notes/brief.md.
   --------------------------------------------------------------- */
.hh-journal { padding-bottom: var(--hh-section-lg); }
.hh-post {
  position: relative; display: block;
  text-decoration: none; color: #fff;
  border-radius: var(--hh-r); overflow: hidden;
}
.hh-post__media { display: block; }
.hh-post__media .hh-slot { border: 0; }
.hh-post__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16,16,15,0) 30%, rgba(16,16,15,.55) 62%, rgba(16,16,15,.92) 100%);
}
.hh-post__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--hh-s5);
}
.hh-post__cat {
  display: inline-block;
  font-size: var(--hh-t-xxs); letter-spacing: var(--hh-ls-wide);
  text-transform: uppercase; color: var(--hh-gold-300);
  margin-bottom: var(--hh-s2);
}
.hh-post__title {
  display: block;
  font-family: var(--hh-font-body);
  font-size: var(--hh-t-h4); font-weight: 500; line-height: 1.34;
  letter-spacing: 0;
  margin-bottom: var(--hh-s2);
}
.hh-post:hover .hh-post__title { text-decoration: underline; text-underline-offset: 3px; }
.hh-post__date { display: block; font-size: var(--hh-t-xs); color: var(--hh-ink-300); }