/* Base styles for MVA Wine website */
/* This file is rendered as a Django template to support static tags */

.error {
  color: var(--error-color);
}

.banner-container {
}
.banner-container > img,
.banner-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}

/* Navigation bar */
.top_nav_container {
  width: 100%;
  max-width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: white;
  /* Above main, which is a flex item of body and so stacks on its own z-index even though it is
     not positioned. At 1, level with main's z-index on pages that carry a login modal, the page
     painted over the header and took its clicks wherever that rule won (seen on /gift with a
     cached stylesheet). An open modal still covers it: modal_form.css lifts main above this then. */
  z-index: 2;
}

.top_nav_container nav {
  width: calc(100% - 2*var(--viewport-border));
  max-width: var(--global-max-width);
  margin-inline: 0;
  background-color: transparent;
  z-index: 1000;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3em;
  /* The top inset carries an extra 15px over the bottom so the nav content sits lower in the bar,
     where the design places it (about 63px down rather than 48). --nav-height below adds the same
     15px so every page's content still clears the fixed header. */
  padding-block: calc(var(--nav-padding-block) + 23px) var(--nav-padding-block);
  padding-inline: var(--main-default-margin);
  transition: background-color var(--transition-speed) ease;
  border-bottom: 1px solid white;
}
.top_nav_container nav.white {
  background-color: white;
  border-bottom: 0;
  transition: background-color .6s ease;
}

nav > ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
}

.top_nav_container nav > ul {
  /* Each side takes exactly half of whatever is left over, so the logo between them lands on
     the centre line whatever the links say. flex-grow alone could not do this: it shares out
     the free space but each side keeps its own content width on top, so the two were never
     equal and the logo sat wherever the difference put it. It drifted 25px the moment
     collections left the left side and the cart left the right.
     min-width: 0 lets a long side shrink into its half instead of shouldering the logo
     across. */
  flex: 1 1 0;
  min-width: 0;
  gap: clamp(1.125rem, 2 * var(--scale-factor), 2rem);
}
.top_nav_container nav > ul:first-of-type {
  justify-content: flex-start;
}
.top_nav_container nav > ul:last-of-type {
  justify-content: flex-end;
}

nav.top-nav a.logo {
  /* Its own width, no more. The equal siblings either side are what centre it. */
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

nav.top-nav a.logo img {
  width: auto;
  height: var(--nav-logo-height);
}

nav a {
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
  color: var(--nav-color);
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter-spacing);
  white-space: nowrap;
  text-transform: lowercase;
  transition: color var(--transition-speed) ease-in-out, text-decoration-color var(--transition-speed) ease-in-out;
}

nav .nav__item--current a {
  font-weight: 400;
}

/* Hide Mobile Navigation by Default */
.mobile-nav {
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 100%;
  right: -12px;
  width: auto;
  background: white;
  padding: 1em;
  list-style: none;
  border: 1px solid black;
  border-radius: 8px;
  gap: 2px;
  transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) linear;
}

/* Hide the Hamburger Button on Desktop */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
  min-width: unset;
  max-width: unset;
}

/* Hamburger Menu Lines */
.menu-toggle span {
    display: block;
    width: 30px;
    height: 2px;
    background: black;
}

/* Hide the Checkbox */
.mobile-nav-container {
  display: none;
}

#menu-toggle {
    display: none;
}

footer {
  width: 100%;
  padding-inline: var(--main-default-margin);
  padding-block: var(--main-default-margin) 2rem;
}
/* body is font-weight 300, and the browser resolves <strong>'s default "bolder" one step from
   there, which lands on 400: emphasis that is almost invisible against the copy around it. The
   designs set a true bold, so say so. */
strong, b {
  font-weight: 700;
}

footer nav > span {
  /* The copyright and fulfilment line sits a step smaller than the links beside it, as the
     design draws it (about 15 against the links' 17). */
  font-size: 0.9375rem;
  line-height: var(--footer-line-height);
}
footer nav > a {
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  letter-spacing: 0.4px;
  color: var(--nav-color);
  /* 1ch of a 12.8px Sombra is about 7px, which is the space between two words rather than
     between two links: the row read as one run-on line. The designs leave 34 to 45px. */
  margin-right: 2.5rem;
}
footer nav > a:visited {
  color: var(--nav-color);
}
footer .footer-social {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 0.75rem;
}
footer .footer-social a {
  color: var(--nav-color);
  display: flex;
  align-items: center;
  transition: opacity var(--transition-speed) ease-in-out;
}
footer .footer-social a:hover {
  opacity: 0.7;
}
footer .footer-social svg {
  /* The designs draw these at about 36px. At 20 they read as an afterthought beneath a footer
     whose type is larger than they are. */
  width: 32px;
  height: 32px;
}

main {
  padding-top: var(--main-padding-top);
  z-index: 0;
}
main.full-viewport {
  padding-top: 0;
  margin-inline: 0;
}

/* Every button on the site is the questionnaire's, which is what Arielle asked for: a black fill
   with white Sombra at its light weight, the label in the case the copy writes it, the site's
   button size, and the same padding above and below, which makes it 54 tall on a phone and 35
   on a wider screen. It replaces a transparent outline with a 2px rule, which some pages also
   lowercased and sized for themselves, so the site had three different buttons. text-transform
   is restated because several of those buttons sit inside a lowercased list. */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  white-space: nowrap;
  width: min-content;
  height: min-content;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
  color: #fff;
  border: 1px solid #111;
  padding: 14px 44px;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  letter-spacing: 0.48px;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  transition: color var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;
}

a.btn {
  text-decoration: none;
  -webkit-text-decoration: none;
}
/* base.html gives links a:visited { color: inherit }, which outranks a single class, so a link
   button names its own colour for both states or a visited one goes black on black. */
a.btn:link,
a.btn:visited {
  color: #fff;
}
@media (min-width: 768px) {
  .btn { padding-block: 7px; }
}

/* On rollover it trades its colours, black on white with a black edge so it does not vanish into
   a white page, as the home page's and the questionnaire's buttons do. The !important stays so a
   page's own fill does not hide the rollover. */
a.btn:hover,
button.btn:hover {
  color: #111;
  border-color: #111;
  background: #fff !important;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: color var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;
}

#mini_cart small {
  padding-left: var(--default-gap);
}

@media (min-width:1200px) {
  body {
    margin-inline: auto;
  }
  footer nav {
    display: flex;
    justify-content: space-between;
    /* So the copyright and fulfilment line, which never breaks on a wide screen, can move whole
       onto a row of its own when it does not fit beside the links. */
    flex-wrap: wrap;
  }
}

/* The copyright and fulfilment line on one line on a wide screen, as Arielle asked: at the 13.3px
   the design sets it, measured off the mockup where the sentence runs 650px beside the links. It
   never breaks mid sentence; where the row is too narrow it moves to a row of its own instead. A
   phone still wraps it, as the phone mockup does. */
@media (min-width: 1024px) {
  footer nav > span { font-size: 0.83rem; white-space: nowrap; }
}

/* Mobile Styles */
@media (max-width: 1023px) {
/* Adjust navbar for mobile */
  nav.top-nav > ul {
    display: none;
  }
  nav.top-nav a.logo {
    justify-content: left;
    display: flex;
    justify-content: center;
  }
  nav.top-nav a.logo img {
  }
  .navbar {
      justify-content: space-between;
  }

  /* Show Hamburger and Hide Desktop Nav */
  .mobile-nav-container {
    display: flex;
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
  }
  .menu-toggle {
      display: flex;
  }
  .desktop-nav {
      display: none;
  }

  /* Move logo to the left */
  .logo {
      order: 0;
  }

  /* Show Mobile Menu When Checkbox is Checked */
  #menu-toggle:checked ~ .mobile-nav {
    visibility: visible;
    opacity: 100%;
    transition: opacity var(--transition-speed) ease, visibility 0s linear;
  }
}

@media (max-width: 767px) {
  :root {
    --headline-padding-block: calc(clamp(var(--nav-padding-block), 16vw, 100px) - var(--nav-padding-block));
    --nav-font-size: clamp(1.5rem, 1.8vw, 1.875rem);
    /* Body copy stops following the nav here. --p-font-size aliases --nav-font-size, and the
       clamp above has a 1.5rem floor that 1.8vw can never reach on a phone, so every <p> on
       the site rendered at 24px: larger than some of the headings above it, and half again
       the 17px the designs set. Stated on its own so the nav keeps its own size. */
    --p-font-size: 1.0625rem;
    --button-font-size: 1.25rem;
    --info-button-font-size: 1.125rem;
  }
  body {
  }
  nav.top-nav {
    border-bottom: none;
    padding-bottom: 1em;
  }
  main {
    padding-inline: 0;
    width: 100%;
    margin-bottom: var(--main-default-margin);
  }
  /* Adjust navbar for mobile */
  nav.top-nav > ul {
    display: none;
  }
  nav.top-nav a.logo {
    justify-content: left;
    display: flex;
    justify-content: center;
  }
  nav.top-nav a.logo img {
  }
  .navbar {
      justify-content: space-between;
  }

  /* Show Hamburger and Hide Desktop Nav */
  .mobile-nav-container {
    display: flex;
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
  }
  .menu-toggle {
      display: flex;
  }
  .desktop-nav {
      display: none;
  }

  /* Move logo to the left */
  .logo {
      order: 0;
  }

  /* Show Mobile Menu When Checkbox is Checked */
  #menu-toggle:checked ~ .mobile-nav {
    visibility: visible;
    opacity: 100%;
    transition: opacity var(--transition-speed) ease, visibility 0s linear;
  }
  footer {
    padding-inline: 0;
    margin-inline: 0;
    padding-block: 2rem 1rem;
  }
  footer ul li:last-of-type {
    padding-block: 2rem 0;
    text-align: left;
    line-height: var(--p-line-height);
  }
  footer nav > span {
    display: block;
    padding-top: 1em;
    line-height: 1;
  }
  /* At the larger link size the old 2.5rem between links pushed the five onto three rows. The
     design wraps them to two, four on the first row and the long "terms and conditions" onto the
     second, so the gap closes and each link stays on its own line. */
  footer nav > a {
    margin-right: 1.25rem;
    white-space: nowrap;
  }
}

@media (max-width: 375px) {
  footer nav > a {
    margin-right: 4px;
  }
}

#scroll-hint {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
#scroll-hint.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
@media (max-width: 767px) {
  #scroll-hint {
    display: none;
  }
}
body:has(.modal-form-container.open) #scroll-hint {
  display: none;
}
/* Wine heart — [heart] Loved by X members, above bottle image */
.wine-loved {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8125rem;
  color: black;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.75em;
}
.wine-heart {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: transform 0.15s ease;
}
.wine-heart:hover {
  transform: scale(1.2);
}
.wine-heart:active {
  transform: scale(0.95);
}
.wine-heart svg {
  fill: none;
  stroke: black;
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}
.wine-heart:hover svg {
  stroke: #e53935;
}
.wine-heart.liked svg {
  fill: #e53935;
  stroke: #e53935;
}
.wine-loved-text {
  white-space: nowrap;
}
.col1 .wine-loved {
  font-size: 1rem;
}
.col1 .wine-heart svg {
  width: 26px;
  height: 26px;
}
.wine-loved-text[hidden] {
  display: none;
}
ul.wine li.wine-heart-row {
  text-transform: none;
}


:root {
  /* 8, not 16: the page itself already carries 8px of its own on html, and the design's
     margin on a phone is 15 to 16 all told, measured from its photographs and its form
     fields. Ours came to 24 and every block on the phone was that much narrower than drawn. */
  --v2-gutter: 8px;
  --v2-measure: 34rem;        /* the comfortable reading width the designs hold to */
  --v2-tint: #f0edeb;          /* the section bands; the mockup samples #F0EDEA */
  --v2-ink: #1a1a1a;
  /* One colour for the secondary button and the back of every card, because the client's rule is
     that they match and a second hex is a second thing to drift. Sampled from the mockup, where
     the "Preview the wines" button and the back of a wine highlights card are both exactly this.
     C8BFB6 is this family's hover shade, which is probably where that reading came from. */
  --v2-secondary: #cdc2bb;
  --v2-secondary-hover: #bfb2a9;
  --v2-gap: 1.5rem;
  --v2-card-inset: 26px;       /* the air either side of a card on a phone */
  --v2-arrow: 20px;            /* the drawn chevron's width, which the controls are placed by */
  /* The width a membership card has in the row of four at 1200, which is where the row starts.
     The pair below that width holds the same figure, so crossing the breakpoint changes how
     many cards are on a line and nothing else. Measured rather than derived: the track's width
     depends on the page gutter, the section padding and the carousel's own inset. */
  /* The card the design draws, and the width every row of them is built from. The row steps
     from one to four as the window allows another 301 plus its gap, so the count changes and
     the card never does. */
  --v2-card-step: 301px;
  --v2-track-tail: 4px;        /* the track's bottom padding, kept off the scrollbar */
}

/* width: 100% and min-width: 0 because body is `display: flex; flex-direction: column;
   align-items: center`, which sizes main to its content rather than the viewport. A carousel row
   wider than the screen (the soundtrack, whose cards are a fixed width and do not shrink) would then
   stretch main past the viewport. width holds main to the body width and min-width lets the track's
   own overflow scroll instead of widening the page. */
.home-v2 { padding-top: 0; width: 100%; min-width: 0; }   /* the hero runs to the top, under the fixed nav */
/* body is a flex container, so the hidden scroll hint is still one of its items. This page
   renders no hint, so take its box away rather than leave a strip above the hero. */
#scroll-hint { display: none; }

/* The header over the hero ------------------------------------------------ */
/* The design draws the logo and the hamburger in white on the film, with no bar behind them,
   exactly as the v1 home page does. base.css paints .top_nav_container white and gives the nav a
   .white class on scroll, so the transparent state is the one to add here, and scrolling hands
   the page back to the base rules. Same technique as hub.css, written here rather than shared so
   this page does not inherit the hub's reasons for changing. */
.top_nav_container {
  background-color: transparent;
  transition: background-color .3s ease;
}
.top_nav_container:has(nav.white) {
  background-color: white;
  transition: background-color .6s ease;
}
.top_nav_container nav.white { background-color: transparent; }
/* base.css gives the bar a white hairline, which over a photograph reads as a seam. */
.top_nav_container nav { border-bottom: 0; }

.top_nav_container nav:not(.white) a {
  color: #fff;
  /* The film is bright in places, so the links need their own contrast rather than trusting it. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
/* The drawer is white, so its links stay dark whatever the bar behind it is doing. */
.top_nav_container nav:not(.white) ul.mobile-nav a { color: var(--v2-ink); text-shadow: none; }

/* brightness(0) flattens the logo to black whatever colour it ships in, then invert(1) makes it
   white; on scroll only the flattening is left. Doing it this way means a logo that is already
   white does not vanish against the white bar. */
.top_nav_container nav:not(.white) a.logo img { filter: brightness(0) invert(1); transition: filter .3s ease; }
.top_nav_container nav.white a.logo img { filter: brightness(0); }
.top_nav_container nav:not(.white) .menu-toggle span { background: #fff; }

/* Sections ---------------------------------------------------------------- */
.v2-section {
  padding-block: 33px;
  padding-inline: var(--v2-gutter);
}
.v2-section--tint { background: var(--v2-tint); }
/* A phone ends this section's tint under the last card and stands the buttons on the white
   below, where a wider screen tints the whole section. So on a phone the colour and the padding
   belong to the block holding the heading and the cards, and the section itself carries
   neither. It is the difference between a 483px block, which is the design's, and our 590.
   Undone at 768, where the section takes both back. */
.v2-section--tint.v2-howitworks { background: none; padding-block: 0; }
/* Members and founder are drawn as a pair and run closer together than any other neighbours on
   the page: 34px between the last line of one and the first of the other on a phone, 46 on a
   wider screen, where every other boundary is 81 to 138. Half each, so neither owns all of it. */
.v2-section.v2-members { padding-block-end: 17px; }
.v2-section.v2-founder { padding-block-start: 17px; }
.v2-howitworks__panel {
  background: var(--v2-tint);
  /* 20 of white above the tint, which is where the design starts it under the hero. */
  margin-block-start: 20px;
  background-clip: padding-box;
  padding-block: 33px 44px;
  margin-block-end: 33px;
}
/* The beliefs band sits between the hero and that panel. The panel's 20px above its tint adds to
   the white under this band, so the band takes the same 20 above it and its copy sits centred in
   the white. A phone only: from 768 neither carries the extra margin. */
.v2-believe { margin-block-start: 20px; }

/* On a phone the tinted bands run to the screen edge, past the site's 8px page frame (html
   padding), as the mockup draws them. A pair of 0-blur box-shadows paints the tint outward on each
   side: it reaches the edge without moving the content (which is positioned against the frame on
   purpose) and without ever widening the page, because a shadow adds no scrollable width and any
   excess falls off screen. The 2rem offset clears the widest inset (the how-it-works panel).
   Undone at 768, where the frame sits in the page's own side margins and is never seen. */
.v2-howitworks__panel,
.v2-section--tint:not(.v2-howitworks) {
  box-shadow: -2rem 0 0 0 var(--v2-tint), 2rem 0 0 0 var(--v2-tint);
}

/* 21px on a phone and 27px on a desktop, both measured off the mockup rather than chosen: at
   27px the ink box of "How membership works" is 341 by 26, which is the mockup's to the pixel.
   They were 28 and 36, a third too large, which is why every heading sat wrong and why the
   phone broke "How membership works" onto two lines in a 342px column. */
/* Broken into even lines rather than filled and spilled. The soundtrack's heading is the only
   one that takes two lines on a phone, and it set as a full line and a single word where the
   design sets two halves. */
.v2-heading {
  text-wrap: balance;
  text-align: center;
  margin-block: 0 1.25rem;
  font-size: 21px;
  line-height: 1.15;
}
.v2-standfirst {
  text-align: center;
  max-width: var(--v2-measure);
  margin-inline: auto;
  margin-block: 0 1.5rem;
}
.v2-prose {
  max-width: var(--v2-measure);
  margin-inline: auto;
  text-align: center;
}
/* base.html sets a global inline `p { font-size: var(--p-font-size) }`, so a rule on .v2-prose
   alone never reaches these paragraphs. Scope to the child, as CLAUDE.md says. */
.v2-prose p { margin-block: 0 1rem; line-height: 1.5; }
.v2-prose p:last-child { margin-block-end: 0; }

/* Curating our collections ------------------------------------------------ */
/* Phone: a single column, heading, film, prose, button, as the mockup stacks them. The wide
   screen below turns it into text beside the film. */
/* The phone stacks heading, film, prose, button. The mockup leaves ~19px under the heading and
   ~11 around the film, against our 44 and 24: the grid gap carries the 11, and the heading keeps
   a little of its own margin (below) to make the 19. The wide screen restores its own row gap. */
.v2-curating__grid { display: grid; gap: 11px; }
.v2-curating__head { margin-block-end: 8px; }
.v2-curating__video { aspect-ratio: 16 / 9; }
.v2-curating__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Hero -------------------------------------------------------------------- */
/* The film is inset 15 either side on a phone, so 360 in a 390 frame, where the page's own 8
   left it all but full bleed at 374. */
/* No side padding at any width: the film runs to the edge of the page frame on a phone as it does
   on a wide screen. The phone had 7px either side, which also left the scrim below spilling a grey
   band over the white beside the film. */
.v2-hero { display: flex; flex-direction: column; position: relative; }
/* A scrim under the header. The film runs from a night sky to a bright vineyard, and white nav
   links over that vineyard are close to invisible: a text shadow alone was not enough. The
   gradient is heaviest at the very top and gone by the height of the bar, so it does nothing to
   the picture below it and nothing at all on the dark frames. */
.v2-hero::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 55%, transparent 100%);
}
.v2-hero__media {
  width: 100%;
  /* 16:9, which is what the design draws: its film is 360 by 203 in a 390 frame and ends at
     row 202. Half the viewport height capped at 420 made it 420 on a phone, twice the design's,
     and it pushed the headline and both buttons below the fold. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}
.v2-hero__copy {
  /* The design leaves 24 between the film and the headline's cap and almost nothing under the
     last button: five pixels, because the next section's own space follows. Ours left 32 above
     and 40 below, which with the gaps below was most of a 68px overrun in the one part of the
     page that has to fit above the fold. Measured ink to ink, because a box carries the leading
     and reading one against the mockup's ink overstates every gap by the same few pixels. */
  padding: 19px var(--v2-gutter) 5px;
  text-align: center;
}
/* Sharp is the desktop headline's alone. base.html gives every h1 to h5 Attila with
   --attila-contrast, which is sharp by default, so this one was sharp at both sizes without
   anything here saying so. The phone takes classic at the regular weight, which is how the
   design draws it; the wide screen block below states sharp, at the same regular weight. */
.v2-hero__headline {
  margin-block: 0 1rem;
  --attila-contrast: var(--attila-classic);
  /* An h1 is bold by default, so font-weight sat at 700 against an axis of 77 and the two
     disagreed: the browser then synthesises rather than using the cut the font already has. */
  font-weight: var(--attila-regular);
  /* Measured against the film beside it rather than in pixels, because that ratio holds
     whatever the mockup's scale: her first line is 0.61 of her film's width and ours was 0.76,
     which is 27.2px against her 21. It cost 23px of height in the one part of the page that has
     to fit above the fold. Scaled with the viewport, because the two line break has to hold on
     a 360px Android as well as a 430px iPhone. */
  font-size: clamp(19px, 5.4vw, 24px);
  line-height: 1.3;
  max-width: 18ch;            /* the two line break the design draws */
  margin-inline: auto;
}
.v2-hero__subhead {
  /* 20 between the last sentence and the first button in the design, where ours left 37. */
  margin-block: 0 11px;
  font-family: "Attila Sans Variable";
  font-variation-settings: "wght" var(--attila-regular), "cnst" var(--attila-classic);
  font-weight: var(--attila-regular);
  /* Sized so each of the three sentences holds its own line, which is how the design reads: the
     phrase already carries the line breaks, so anything larger wraps them into five lines. The
     site's --p-font-size is 24px, which is a desktop figure that base.html applies inline to
     every <p>, so this has to be stated rather than inherited. */
  /* Scaled with the viewport rather than fixed at one phone's width: the three sentences carry
     their own line breaks, so the only job is to keep the longest one from wrapping, and a 360px
     Android needs a smaller figure than a 430px iPhone to do that. The mockup measures about
     14.5px in a 358px column, which 3.9vw lands on. */
  /* 13.8px at 390, not the 14.5 first estimated here. Two separate readings agree on it now:
     this line against the mockup's, and the newsletter's pitch against its own, each by the
     ink width of a line the copy breaks itself. Smaller only helps the job this size has. */
  font-size: clamp(13px, 3.54vw, 15px);
  line-height: 1.3;
}

/* The mute control, lower right of the film, as the production home page has it. Arielle's
   mockups leave it out, which is an omission rather than a decision. */
.v2-hero__mute {
  position: absolute;
  right: clamp(1rem, 2.4vw, 2rem);
  /* Measured from the top, because on a phone the hero is the film with the copy stacked
     beneath it and the film's foot is nowhere near the section's. The film is 50vh capped at
     420, which is the figure this follows. The wide screen puts it back on the bottom, where
     the film fills the section. */
  top: calc((100vw - 2 * 8px) * 9 / 16 - 44px - clamp(1rem, 2.4vw, 2rem));
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-hero__mute:hover { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .7); }
.v2-hero__mute:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v2-hero__mute svg { width: 22px; height: 22px; fill: currentColor; }
/* One icon or the other, never both: the class says which state the film is in. */
.v2-hero__mute .icon-unmuted { display: none; }
.v2-hero__mute.is-muted .icon-muted { display: block; }
.v2-hero__mute.is-muted .icon-unmuted { display: none; }
.v2-hero__mute:not(.is-muted) .icon-muted { display: none; }
.v2-hero__mute:not(.is-muted) .icon-unmuted { display: block; }

/* Buttons ----------------------------------------------------------------- */
/* Stacked and full width on a phone, which is what the designs show, and what a thumb wants. */
/* The hero's pair sit 15 apart on a phone rather than the 20 a section gives. */
.v2-hero .v2-actions { gap: 15px; }
/* A grid as wide as its widest button, so the buttons in a row or a stack always come out the
   same width as each other, whatever their labels: a column, or columns of 1fr, sized to fit
   their content is as wide as the widest of them. Arielle asked for pairs to match. */
.v2-actions {
  display: grid;
  grid-auto-flow: row;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 20px;
  margin-block-start: 2rem;
}
/* The questionnaire's button, which is the one Arielle asked every button on the site to match:
   Sombra at its light weight, labels in sentence case as the copy writes them, the site's own
   button size, and padding that makes it 54 tall on a phone and 35 on a wider screen. The size
   is read from the same --button-font-size the questionnaire uses, so the two cannot drift.

   It replaces Attila in a fixed box, 168 by 36 on a phone and 209 by 40 wider, which was her
   first design. Attila sits high in its line and needed more padding above than below to look
   centred. Sombra does not: it takes the same padding above and below, and an offset like
   Attila's sets its label visibly low. */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px;
  text-align: center;
  text-decoration: none;
  /* Transparent rather than none, so a border appearing on rollover does not resize the button. */
  border: 1px solid transparent;
  box-sizing: border-box;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
  font-size: var(--button-font-size);
  line-height: 1.2;
  letter-spacing: 0.48px;
  white-space: nowrap;
  /* Match the site's .btn (the "Begin the journey" newsletter button and the prod buttons): the
     colours fade quickly on rollover rather than snapping, and border-color rides the same timing
     so a pale button's appearing border fades in with the fill. box-shadow is deliberately left
     out: the hero glow snaps on with no fade, as it does on prod. */
  transition: color var(--transition-speed) ease-in-out,
              background-color var(--transition-speed) ease-in-out,
              border-color var(--transition-speed) ease-in-out;
}
/* Restate the transition on the active states, as base.css's .btn does. base.html's `a:hover`
   (a + :hover, which outweighs the single-class .v2-btn) carries its own transition of only color
   and text-decoration, so on the way in it wins and the background is not transitioned, only on the
   way out, which snapped the fill on rollover and faded it on release. box-shadow stays out so the
   hero glow still snaps on. */
.v2-btn:hover,
.v2-btn:focus,
.v2-btn:active {
  transition: color var(--transition-speed) ease-in-out,
              background-color var(--transition-speed) ease-in-out,
              border-color var(--transition-speed) ease-in-out;
}
/* base.html gives links `a:visited { color: inherit }`, which outweighs a single class, so each
   button restates its text colour for :visited or a visited link loses it. Only the colour is set
   under :visited, never the background, so the fill stays on the normal rules that transition.
   :visited comes before :hover so the hover still wins on a visited link. */
.v2-btn--primary { background: var(--v2-ink); color: #fff; }
.v2-btn--primary:visited { color: #fff; }
.v2-btn--secondary { background: var(--v2-secondary); color: var(--v2-ink); }
.v2-btn--secondary:visited { color: var(--v2-ink); }

/* Every button trades its colours on rollover, which is the one gesture that reads the same on a
   dark fill, a pale fill and an outline. The border comes with it so a button that turns pale
   does not disappear into a pale band.

   Each state is spelled out rather than left to the default, because base.html:186 carries a
   global `a:hover { color: black }` which is one specificity step above a single class: without
   these the black button's label went black on black on rollover. */
.v2-btn--primary:hover,
.v2-btn--primary:focus,
.v2-btn--primary:active {
  background: #fff;
  color: var(--v2-ink);
  border-color: var(--v2-ink);
}
.v2-btn--secondary:hover,
.v2-btn--secondary:focus,
.v2-btn--secondary:active { background: #fff; color: var(--v2-ink); border-color: var(--v2-ink); }
/* Discover, on the artwork: a white rule around nothing, so the picture shows through it. */
.v2-btn--onart {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
}
.v2-btn--onart:hover,
.v2-btn--onart:focus,
.v2-btn--onart:active { background: #fff; color: var(--v2-ink); border-color: #fff; }

/* The back of a highlights card: a bordered button on the tint, as the mockup draws it. */
.v2-btn--outline {
  background: transparent;
  color: var(--v2-ink);
  border: 1px solid var(--v2-ink);
  min-width: 9rem;
  padding: 0.6rem 1.25rem;
  font-size: clamp(13px, 3.6vw, 15px);
}
.v2-btn--outline:visited { color: var(--v2-ink); }
.v2-btn--outline:hover,
.v2-btn--outline:focus,
.v2-btn--outline:active { color: var(--v2-ink); background: #fff; border-color: var(--v2-ink); }

/* Both faces of a highlights card say they can be clicked, because both of them turn: the
   front to the note and the back to the picture. */
.v2-wine-card__front,
.v2-wine-card__back { cursor: pointer; }
.v2-wine-card__front { background: var(--v2-ink); }
.v2-wine-card__art { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Three zones over the artwork, as Arielle draws them: the style and country along the top, the
   name in the middle of the card, and Discover at the foot. No scrim: her artwork is composed to
   carry white text, and darkening it would be overruling work she has already balanced.

   The front is the layout, so the picture sits behind it rather than being its container. */
.v2-wine-card__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Uneven on purpose, and uneven differently at each size because the design is. With the
     same figure at both ends the name came out six pixels above the middle of the card: the
     button below it is taller than the line above it, and the name is centred in what is left
     between them, so the leftover has to be centred for the name to be.

     A phone gets 27 and 26, which is where she puts the top line and the button on a phone,
     and a wide screen gets 33 and 18, which is where she puts them there. */
  padding: 27px 1.25rem 26px;
  text-align: center;
  color: #fff;
}
.v2-wine-card__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.v2-wine-card__meta,
.v2-wine-card__name,
.v2-wine-card__cta { position: relative; z-index: 1; }

/* Sombra, not Attila: the three lines of this card are set in three different faces, and the
   top one is the only Sombra among them. Bold at 14px, as the mockup has it.

   Stated, not inherited: base.html styles every <p>, and a declared colour beats an inherited
   one however deep the tree, so this line came out black while the <h3> beside it was white. */
.v2-wine-card__meta {
  margin: 0;
  color: #fff;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.4px;
}
/* Centred in what is left between the two, which is what puts it in the middle of the card
   however many lines a winery and a wine name run to. Cards 2 and 6 take four lines.

   The padding is a nudge rather than space: padding above a centred child moves it by half,
   so ten pixels is five of travel. A phone's card has more room below the button than above
   the top line, which would otherwise carry the name up with it, and the design keeps the name
   where it is. A wide screen's card is even enough not to need it. */
.v2-wine-card__name {
  margin: 0;
  padding-block-start: 10px;
  display: flex;
  align-items: center;
  flex: 1;
  /* Attila Sans Classic, semibold, 16px. Classic rather than sharp: the card uses both faces,
     classic here and sharp on the button, and the cnst axis is what chooses between them.
     font-weight repeats the wght axis because Attila needs both to agree.

     Semibold rather than the bold the Canva metrics gave, and a size up: read off the design
     the numbers said 14 bold, and against the artwork that came out heavier and smaller than
     the look it was copied from. */
  font-family: "Attila Sans Variable";
  font-variation-settings: "wght" var(--attila-semibold), "cnst" var(--attila-classic);
  font-weight: var(--attila-semibold);
  font-size: 18px;
  line-height: 1.45;
  text-wrap: balance;
}
/* The back is laid out to the front's measurements, so the two buttons are in the same place
   and turning the card does not move anything under the cursor. The button is the only child in
   flow, pushed to the foot by the same padding the front uses, which is what puts it where
   Discover was. */
.v2-flipcard__face--back.v2-wine-card__back {
  justify-content: flex-end;
  gap: 0;
  padding: 1.6rem 1.25rem 1.5rem;
}
/* Centred in the space above the button, which is what the mockup draws: the note takes
   whatever height is left once the button has its own, and centres inside that. The same shape
   as the name on the front, which centres between the line above it and the button below. */
.v2-wine-card__note {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.45;
}
/* One geometry for both of this card's buttons, so Discover and Learn more are the same shape
   in the same place and turning the card moves nothing under the cursor. Written once rather
   than twice because the two agreeing is the requirement, and two copies drift.

   It has to outrank .v2-btn, which the wide screen gives a min-width of 11rem: that floor was
   holding Discover wider than the back's button, which had already escaped it. Two classes here
   put both buttons on the same rule at every width.

   The extra couple of pixels above the text and the couple fewer below centre Attila in the
   button; it sits high in its line box otherwise.

   18px on all three zones, found by rendering ours at candidate sizes and matching the ink
   against the mockup: at 18 the style and country line measures 12px of ink and the Discover
   label 13, which are the mockup's. The 14 and 16 these replace came off the standalone card
   artboard, which is 1080 by 1350 and about three and a half times the card on the page. */
.v2-wine-card .v2-btn {
  min-width: 0;
  width: 182px;
  height: 35px;
  padding: 0 1.25rem;
  font-size: 18px;
}
/* The lettering is the shared button's, Sombra at the light weight. Discover and Learn more were
   Attila, semibold and regular, which was the "Attila bold" Arielle asked to bring into line with
   the questionnaire. The box stays the size of the card it sits on. */

/* Photograph beside words ------------------------------------------------- */
/* Two sections are built this way, "What our members say" and "Meet our founder". On a phone
   both are one column, the photograph above the words and everything centred, which is how the
   phone design draws them. The wide screen below puts them side by side and alternates which
   side the picture takes. */
.v2-split { display: grid; gap: 1.5rem; }
/* The picture goes above the words on a phone, in both of these sections. The founder's markup
   runs words then photograph, so a one column grid left its photograph at the foot of the
   section, below the buttons, where the design has it at the top. Done with order rather than
   by moving the markup, so a screen reader still meets the heading before the picture beside
   it. The members section reads this way already and is unaffected. */
.v2-split .v2-section-photo { order: -1; }
/* min-width: 0 or the quotes carousel inside this column refuses to shrink below the width of
   its own track, and a grid item's floor is its content. On a phone that made the column 638px
   inside a 393px screen and pushed the whole page sideways. */
.v2-split__words { text-align: center; min-width: 0; }
.v2-section-photo {
  display: block;
  width: 100%;
  /* Never wider than the 538px the design draws it at, even stacked. Without the cap a tablet
     at 767px rendered it 704px wide, and a 704px picture on a three times screen wants a
     2100px master before it stops looking soft. Capped, one number covers every device: 538
     at three times is 1614, so a 1600px upload is sharp everywhere. */
  max-width: 538px;
  margin-inline: auto;
  height: auto;
  border-radius: 2px;
}

/* Newsletter -------------------------------------------------------------- */
/* One column on a phone, the pitch over the form, and the whole thing centred: the phone
   design centres every line of it, from the pitch down to the social icons, where the desktop
   design ranges all of it left. Centred is the plain rule here and the wide screen undoes it,
   which is the way round this file is written. */
.v2-newsletter__inner { display: grid; gap: 1.5rem; text-align: center; }
.v2-newsletter__pitch {
  /* Centred as a box as well as line by line: its measure is capped below, and a capped box
     left at the start of the column put every centred line 25px left of the form under it. */
  margin: 0 auto;
  /* Body size on a phone. It is a heading on the desktop, where it has a column to itself, and
     on a phone she sets it at the size of the copy around it, which is about 13.8px.

     Measured from the two lines the copy breaks itself, "Don't miss a drop." and "Get first
     access.", because a forced line is the same words in both and its ink can be compared
     directly: hers run 127 and 116 against our 147 and 134 at 16px, the same 0.865 both times.
     Her leading is looser than her type is small, 19 on a 13.8px line. */
  font-size: 14px;
  line-height: 1.38;
  /* Held to about the measure the design gives it. Left to run the full column the sentences
     made two very long lines instead of the short stack she draws. In em, not ch: Attila's
     figures are wide, so a ch here is 19px and 44 of them came to the full column anyway. */
  max-width: 22em;
  font-family: "Attila Sans Variable";
  font-variation-settings: "wght" var(--attila-light), "cnst" var(--attila-sharp);
  font-weight: var(--attila-light);
}
.v2-newsletter__form { display: grid; gap: 1.3rem; justify-items: center; }
.v2-newsletter__form .v2-btn { margin-block-start: 0.6rem; }

/* The honey pot. Hidden, and it has to stay hidden: a visible one is worse than none, because a
   person fills it in and their signup is discarded as a robot's. It had no rule on this page,
   so it was drawing a "Last name" box between the two real fields. */
.v2-newsletter__pot { display: none; }
.v2-newsletter__field {
  width: 100%;
  /* 37px tall, which is the design's: 45 reads as a different kind of form. The placeholder
     sits close to the rule there too, 6px rather than the 17 our 0.9rem gave it. */
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--v2-ink);
  border-radius: 0;
  background: #fff;
  color: var(--v2-ink);
  font-family: inherit;
  font-size: 1rem;
}
.v2-newsletter__field::placeholder { color: var(--v2-ink); opacity: 1; }
/* The placeholder reads from the left inside its box even where the block is centred. */
.v2-newsletter__field { text-align: start; }
.v2-newsletter__terms {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: start;
  gap: 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  cursor: pointer;
}
.v2-newsletter__terms input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--v2-ink);
}
.v2-newsletter__terms a { color: inherit; text-decoration: underline; }


/* The mark and the line under it, above the links the footer already carries. Centred on a
   phone with everything else, including the links and the icons the footer brings with it. */
.v2-footer-brand { margin-block-end: 1.25rem; text-align: center; }
.v2-footer-brand__mark { display: block; width: 133px; height: auto; margin-inline: auto; }
.v2-footer-brand__line { margin: 0.6rem 0 0; font-size: 1.0625rem; }
footer:has(.v2-footer-brand) { text-align: center; padding-block-start: 0.5rem; }
/* base.css gives main a 3rem bottom margin below 1024, which nothing on this page wanted: with
   the section's own padding and the footer's head room it left 104px between the Subscribe
   button and the mark, where the design leaves 30. Scoped to the page that has a brand block,
   so no other page's footer moves. */
main:has(.v2-footer-brand), body:has(.v2-footer-brand) main { margin-bottom: 0; }
footer:has(.v2-footer-brand) nav { justify-content: center; }
.v2-section.v2-newsletter { padding-block-end: 1.5rem; }

/* Carousel ---------------------------------------------------------------- */
/* One card per screen on a phone, swiped with the browser's own scroll snapping. The controls
   are hidden here: there is no cursor, and a thumb does not need them. */
.v2-carousel { position: relative; }
.v2-carousel__track {
  display: flex;
  gap: var(--v2-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Symmetric padding so a card can sit in the middle: without it the first card has nothing to
     its left to scroll into and scroll-snap-align: center cannot centre it. The card is then
     100% of the padded content box rather than a percentage of the carousel, which keeps the
     two figures from multiplying.

     The gap is twice the padding on purpose. The padding is not a clip, so the neighbouring
     card shows through it: at one gap away it was leaving a sliver of the next card down one
     edge and the previous card down the other. Two paddings away puts it exactly off screen. */
  padding-inline: var(--v2-card-inset);
  column-gap: calc(2 * var(--v2-card-inset));
  padding-block-end: var(--v2-track-tail);
}
.v2-carousel__track::-webkit-scrollbar { display: none; }
.v2-carousel__track > * {
  flex: 0 0 100%;             /* of the padded track, so the card is centred with air either side */
  scroll-snap-align: center;
}
/* The arrows are on the phone too, over the card's edge, because the mockups draw them there
   and because a swipe is not discoverable on its own. The script hides whichever one leads
   nowhere, so the first card shows only a right arrow and the last only a left. */
.v2-carousel__control {
  position: absolute;
  /* Against the middle of the card, not of the carousel: the track carries a few pixels of
     padding at the bottom to keep the scrollbar off the card, which puts its own centre half
     that distance lower. 40% left them riding high, which reads as misaligned rather than as a
     decision; 50% was two pixels out. */
  top: calc(50% - (var(--v2-track-tail) / 2));
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: 0;
  /* No padding of its own: the mark has to sit in the gutter beside the card, and on a small
     phone that gutter is only as wide as the mark. 8px of padding made the control 28 wide in
     a 21px gap and it overlapped the card whatever the offset said. */
  padding: 0;
  line-height: 0;
  color: var(--v2-ink);
  cursor: pointer;
}
/* The drawn mark, at the design's size: 20 by 34 on a phone and 26 by 46 from the wide screen
   up, where the characters this replaced rendered 8 by 18. */
.v2-carousel__control svg { display: block; width: var(--v2-arrow); height: 34px; }
.v2-carousel__control--prev {
  inset-inline-start: calc((var(--v2-card-inset) - var(--v2-arrow)) / 2 - (var(--v2-gutter) + 8px) / 2);
}
.v2-carousel__control--next {
  inset-inline-end: calc((var(--v2-card-inset) - var(--v2-arrow)) / 2 - (var(--v2-gutter) + 8px) / 2);
}
.v2-carousel__control[hidden] { display: none; }
.v2-carousel.is-static .v2-carousel__control { display: none; }

/* Cards ------------------------------------------------------------------- */
.v2-playlist-card { display: block; text-decoration: none; color: inherit; text-align: center; }

/* Flip cards -------------------------------------------------------------- */
/* Two faces, and two ways of getting at the second one, because the client asked for different
   things in two sections.

   The default is a card that turns: the faces stack and the back is reached by a flip, on hover
   with a cursor and on a tap without one (--tapflip, used by the wine highlights).

   The membership cards do something else on a phone: --serial makes the wrapper display:
   contents, so the faces stop being a card and become direct children of the flex track, and the
   carousel swipes card 1 front, card 1 back, card 2 front. That is why the faces are siblings
   inside a wrapper rather than one element holding a rotated copy of itself. On a wide screen
   --serial turns like everything else. */
.v2-flipcard {
  position: relative;
  perspective: 1200px;
  /* Measured off the mockup rather than rounded to a tidy ratio: a highlight card is 301 by
     353 there and a membership card 300 by about 352, which is 1 to 1.173 either way. At 4/5
     they came out 377 tall once the grids were widened to the design's card, which is 24px
     more than she draws. */
  aspect-ratio: 301 / 353;
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.v2-flipcard__face {
  position: absolute;
  inset: 0;
  /* 16px, measured off the mockup's own corner: the horizontal inset of the ink runs 16, 13,
     11, 9, 8, 6 ... and reaches the straight edge at 15 rows down, which fits a 16px radius.
     Ours was 14. */
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform .6s ease;
}
.v2-flipcard__face--front { transform: rotateY(0deg); }
.v2-flipcard__face--back {
  transform: rotateY(180deg);
  /* The same colour as the secondary button, by instruction and by the mockup. */
  background: var(--v2-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.v2-flipcard.is-flipped .v2-flipcard__face--front { transform: rotateY(-180deg); }
.v2-flipcard.is-flipped .v2-flipcard__face--back { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
  .v2-flipcard__face { transition: none; }
}

/* The membership cards, on a phone only: two slides rather than one card. */
.v2-flipcard--serial { display: contents; }
.v2-flipcard--serial .v2-flipcard__face {
  /* relative, not static. The card's title is absolutely positioned, so the face has to be its
     containing block: with static faces every title resolved against the carousel instead and
     all four piled up on the first card while their pictures scrolled away underneath. */
  position: relative;
  transform: none;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 301 / 353;
}

/* Our tasting panel -------------------------------------------------------- */
/* A player keeps 16:9 whatever width it is given, so the row cannot end up with one letterboxed
   video and one stretched. */
.v2-panel-video { aspect-ratio: 16 / 9; }
.v2-panel-video__player {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  display: block;
  background: var(--v2-ink);
}

/* Press reviews ----------------------------------------------------------- */
.v2-press-card__front { background: var(--v2-ink); }
/* These say they can be clicked. Neither card carries a button or a link, so without this the
   only thing that answers a click looks like a picture.

   Both faces of a press card, because a press card turns and then turns back. The membership
   card's front only: a tap there moves the carousel on, and its back is a slide rather than
   somewhere a click leads from. */
.v2-press-card__front,
.v2-press-card__back,
.v2-membership-card__frame { cursor: pointer; }
.v2-press-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The logo sits in the middle of the picture, as the mockup draws it, and is given a ceiling
   rather than a size: a masthead can be any shape and should not be stretched to fit. */
.v2-press-card__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 62%;
  max-height: 28%;
  object-fit: contain;
}
.v2-press-card__logo--back { position: static; margin: 0 auto 0.75rem; max-height: 2.5rem; }
/* The publication's name in the logo's place when it has none: centred over the picture, in white
   with a shadow so it reads over any photograph. */
.v2-press-card__publication {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  color: #fff;
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .3);
}
.v2-press-card__body { text-align: center; }
.v2-press-card__body p {
  margin-block: 0 0.6rem;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.45;
}
.v2-press-card__body p:last-child { margin-block-end: 0; }

/* How membership works ---------------------------------------------------- */
/* The title sits on the photograph. A gradient carries it rather than the picture itself,
   because the pictures are Arielle's and a bright one would otherwise swallow white text. */
.v2-membership-card__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v2-ink);
  aspect-ratio: 301 / 353;
}
.v2-membership-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The gradient exists to carry white words over a photograph. A card whose words are already
   part of the picture does not need it, and darkening someone's artwork for nothing is worse
   than leaving it alone, so it only appears when there is a title to carry. */
.v2-membership-card__frame:has(.v2-membership-card__title)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.65) 100%);
}
.v2-membership-card__title {
  position: absolute;
  inset-inline: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-family: "Attila Sans Variable";
  font-variation-settings: "wght" var(--attila-semibold), "cnst" var(--attila-sharp);
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.5px;
}
.v2-membership-card__body {
  margin-block-start: 0.9rem;
  text-align: center;
}
/* The copy is sized against the card it sits in, not against the window. A card in a row of
   four is narrower than the same card in a pair, and a viewport width cannot tell the two
   apart: at 992 the window was wide while the card was 190px, and the longest answer lost 64
   pixels off the bottom with nothing to say it had. A container query asks the card instead,
   so the copy cannot outgrow the thing holding it however the cards are arranged.

   7cqi is 16px at the widest card, and the floor stops it going so small it cannot be read.
   base.html sizes every <p> inline, which is why this has to be stated at all. */
/* The design gives this face a wider margin than the rest of the card: its text block is 220px
   inside a 300px card, so about 40 either side rather than the 24 a face carries by default.
   That narrower measure is half of why the copy sets in six lines there and four here.

   32 rather than her 40, because the fourth card's answer is longer than the one she drew and
   at 40 it ran ten pixels past the bottom of its card. A container query sizes by width, and
   all four cards are the same width, so it cannot make room for the one with the most to say:
   the measure has to suit the longest of them. 32 keeps the type at her size, which is the
   thing you see, and gives back eight pixels of margin, which is not. */
.v2-membership-card__back {
  container-type: inline-size;
  /* A share of the card rather than a fixed figure. The card's height follows its width, and
     the copy inside is sized against its width too, so a fixed padding is the one thing that
     does not shrink with it: at the middle widths it ate enough of the card to push the
     longest answer past the bottom. 10.6% is the design's 32 of a 302px card. */
  padding: 10.6%;
}
.v2-membership-card__body p {
  margin-block: 0 0.6rem;
  /* The largest that the longest of the four answers can hold at every width: 18.55px where
     the card is widest, against the 19 the mockup sets. A container query sizes by width and
     all four cards are the same width, so it cannot make room for the one with the most to
     say; the scale has to suit that one. At the mockup's own 19 the fourth card ran twelve
     pixels past the bottom of its card between 768 and 1280.

     Six lines on a 28px pitch at full width, which is how the mockup sets it. It was capped at
     16 and set four. */
  font-size: clamp(12px, 7.8cqi, 19px);
  line-height: 1.47;
}
.v2-membership-card__body p:last-child { margin-block-end: 0; }

/* No card around a quote: the design sets it as words on the page beside the photograph, and
   the white panel and its padding only narrowed the line by three inches of nothing. */
.v2-quote-card {
  box-sizing: border-box;
  text-align: center;
}
.v2-quote-card__text { margin-block: 0 1.4rem; line-height: 1.35; }
.v2-quote-card__who { margin: 0; font-weight: 700; }

/* A flex column, so the three parts line up across every card however the art or title vary: the
   collection label at the top, the art fixed in the middle, the name pinned to the bottom. Rounded
   and padded as the mockup draws it. border-box keeps the padding inside the carousel's --v2-card. */
.v2-playlist-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  /* 13 on a phone and 16 on a wider screen, which are the mockup's: its phone card is 140
     tall where ours was 154, and its wide one 176 where ours was 184. */
  padding: 13px;
  border-radius: 16px;
}
/* The mockup draws the collection label as the larger of the two lines and the playlist name as
   the smaller; ours had it the other way round because the name is a <p> and took the global p
   size. Phone sizes here, wider sizes in the 768 block. */
.v2-playlist-card__collection { display: block; font-size: 1rem; text-decoration: none; color: inherit; }
/* A fixed landscape box, so every card's art is the same size whatever the source image's shape:
   object-fit crops the artwork into it rather than letting its height set the card's. */
.v2-playlist-card__art {
  position: relative;
  display: block;
  /* 8 above and below on a phone, 10 on a wider screen. The artwork itself already measures
     what the design draws, 62 tall against 61, so the card's extra height was all in the two
     gaps around it. */
  margin-block: 8px;
  aspect-ratio: 19 / 10;
  border-radius: 6px;
  overflow: hidden;
}
.v2-playlist-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-playlist-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  /* 23px on a phone, 29 on a wide screen (below), measured off the mockup. At the old flat 32 the
     circle swallowed the little thumbnail on a phone. */
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #fff;
}
.v2-playlist-card__play::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-inline-start: 7px solid var(--v2-ink);
  border-block: 4.5px solid transparent;
  /* A right-pointing triangle's visual weight sits left of its box centre, so margin auto leaves it
     looking a touch left; nudge it right to sit centred in the circle by eye. */
  transform: translateX(1px);
}
/* margin-top auto pushes the name to the foot of the card, so it sits level across the row. */
.v2-playlist-card__name { margin: 0; margin-block-start: auto; text-align: center; font-size: 0.875rem; }

/* The soundtrack is its own carousel: two cards on a phone (the mockup draws two, not the one the
   other carousels swipe), with the arrows flanking them in the band's margins rather than over the
   card edge. On the wide screen (below) the card takes a fixed size and the row shows as many as
   fit, five down to three, so the cards never resize as the window does. */
.v2-carousel--howitworks {
  --v2-card-inset: max(21px, calc(50vw - 166px));
}
/* A quote is words rather than a card, so it does not need the inset that keeps a neighbouring
   card out of sight: that was holding the line 30px narrower than the design's, which runs the
   quote nearly the full width of the photograph above it. Enough is left for the chevrons,
   which are placed by this same figure. */
.v2-carousel--members { --v2-card-inset: 12px; }

/* --v2-sound-gap is the gap between soundtrack cards. The phone keeps the shared gap; the wide
   screen below widens it to the 52px the mockup draws. Scoped to this carousel so --v2-gap, and
   every other carousel that reads it, is left alone. */
.v2-carousel--soundtrack { --v2-sound-gap: var(--v2-gap); padding-inline: 25px; }
/* The phone draws the first card 33px from the screen edge with the arrows in the margin, not the
   60px the section inset plus the old 36px carousel padding gave. The section's own side padding is
   dropped so the row can reach that far out; the heading is centred, so it needs none. */
.v2-soundtrack { padding-inline: 0; }
.v2-carousel--soundtrack .v2-carousel__track {
  padding-inline: 0;
  column-gap: var(--v2-sound-gap);
}
.v2-carousel--soundtrack .v2-carousel__track > * {
  flex: 0 0 calc((100% - var(--v2-sound-gap)) / 2);
  /* A flex item's floor is min-content unless it is told otherwise, and "Geosynchronous" is
     one unbreakable word: that card alone forced itself wider than the other five and dragged
     every card's height up with it. The basis above is the width that was asked for. */
  min-width: 0;
  scroll-snap-align: start;
}
.v2-carousel--soundtrack .v2-carousel__control--prev { inset-inline-start: 0; }
.v2-carousel--soundtrack .v2-carousel__control--next { inset-inline-end: 0; }

/* Wide screen ------------------------------------------------------------- */
@media (min-width: 768px) {
  .v2-wine-card__front { padding: 33px 1.25rem 18px; }
  .v2-wine-card__name { padding-block-start: 0; }
  /* A standfirst is one line in every section of the design, and 34rem is too narrow to hold
     one: the widest, over the wine highlights, measures 691px of ink and was wrapping to two.
     The 34rem stays where it belongs, on .v2-prose, which is body copy of several lines and
     wants a reading width rather than a line that fits. */
  .v2-standfirst { max-width: 45rem; }
  /* The design's rhythm between a heading, its standfirst and the cards below. Measured ink to
     ink across three sections, where she leaves 24 to 36 between a heading and its standfirst
     and 50 to 55 between the standfirst and the cards. Ours were the wrong way round, 46 and
     26, which read as a heading adrift from its own sentence and a sentence sitting on the
     cards. The middle of her range is 30 and 52.

     Where no standfirst comes between, as over the membership cards, she leaves 40 rather than
     the 23 a standfirst follows at, so the carousel asks for the whole 40 itself. The whole of
     it, not the difference: these are adjacent siblings in a block, so the two margins collapse
     to the larger rather than adding up. */
  .v2-heading { margin-block-end: 23px; }
  .v2-standfirst { margin-block-end: 46px; }
  .v2-heading + .v2-carousel { margin-block-start: 40px; }
  /* The soundtrack section is tighter than the rest of the page in the design, and measurably
     so: 307 tall against the wine highlights' 1003, with its heading's cap 27 rows down where
     the highlights' is 54. One row of small cards, so it does not take a full section's
     breathing room. Ours was 364 with the shared padding.

     Written as .v2-section.v2-soundtrack rather than .v2-soundtrack because the shared
     .v2-section padding is set further down this same block: one class each, so the later of
     the two wins on order alone and a single class here would do nothing. */
  .v2-section.v2-soundtrack { padding-block: 25px 45px; }
  /* The phone's arrangement undone: the tint and the padding go back to the section. */
  .v2-section--tint.v2-howitworks { background: var(--v2-tint); padding-block: 48px 57px; }
  .v2-howitworks__panel { background: none; padding-block: 0; margin-block: 0; }
  /* The full-bleed tint shadows are a phone thing; here the frame is lost in the page margins. */
  .v2-howitworks__panel,
  .v2-section--tint:not(.v2-howitworks) { box-shadow: none; }
  .v2-believe { margin-block-start: 0; }
  .v2-soundtrack .v2-heading + .v2-carousel { margin-block-start: 26px; }

  /* Curating: text on the left, the film on the right across both rows, as the mockup draws it.
     The heading and prose go left aligned here, where the phone centres them. With no film the
     grid stays a single centred column (the --no-video modifier), so the section still reads. */
  .v2-curating__grid:not(.v2-curating__grid--no-video) {
    /* The film takes the larger share, ~58 to the text's 42, as the mockup draws it; a straight
       half each left our film 44px narrower and 26px shorter than hers. */
    grid-template-columns: 42fr 58fr;
    grid-template-areas: "head video" "text video";
    align-items: center;
    column-gap: 3rem;
    /* The phone's tight row gap is for the stacked layout; a section's worth between the stacked
       heading and text reads better here. */
    row-gap: 1.5rem;
  }
  .v2-curating__grid:not(.v2-curating__grid--no-video) .v2-curating__head {
    grid-area: head; text-align: left; align-self: end; margin-block-end: 0;
  }
  .v2-curating__grid:not(.v2-curating__grid--no-video) .v2-curating__text {
    grid-area: text; align-self: start;
  }
  .v2-curating__grid:not(.v2-curating__grid--no-video) .v2-curating__video { grid-area: video; }
  .v2-curating__grid:not(.v2-curating__grid--no-video) .v2-prose {
    text-align: left; margin-inline: 0; max-width: none;
  }
  /* The mockup centres the button under the ragged paragraph block rather than ranging it left,
     which puts it about 124px in from the column edge. Centring it in its own column does that. */
  .v2-curating__grid:not(.v2-curating__grid--no-video) .v2-actions { justify-content: center; }

  /* On a wide screen the membership cards stop being two slides and turn like the rest. */
  .v2-flipcard { flex: 0 0 var(--v2-card); scroll-snap-align: start; }
  .v2-flipcard--serial { display: block; }
  .v2-flipcard--serial .v2-flipcard__face {
    position: absolute;
    flex: none;
    aspect-ratio: auto;
  }
  .v2-flipcard--serial .v2-flipcard__face--front { transform: rotateY(0deg); }
  .v2-flipcard--serial .v2-flipcard__face--back { transform: rotateY(180deg); }
  /* A cursor can hover, so the membership cards turn under it. Focus turns them too, for the
     keyboard. The press and highlights cards are excluded by instruction: they turn on a tap
     and on nothing else, on a desktop as on a phone, so the gesture is the same wherever the
     visitor is. Leaving focus-within on them would fight the tap as well, because the Discover
     button takes focus on the click that turns the card and would turn it straight back. */
  .v2-flipcard:not(.v2-flipcard--tapflip):hover .v2-flipcard__face--front,
  .v2-flipcard:not(.v2-flipcard--tapflip):focus-within .v2-flipcard__face--front { transform: rotateY(-180deg); }
  .v2-flipcard:not(.v2-flipcard--tapflip):hover .v2-flipcard__face--back,
  .v2-flipcard:not(.v2-flipcard--tapflip):focus-within .v2-flipcard__face--back { transform: rotateY(0deg); }

  /* Pitch and form side by side, as the design draws them: the words take the room they need
     and the form holds a fixed column, which is what keeps the fields from stretching across
     half the page. */
  .v2-newsletter__inner {
    grid-template-columns: 1fr minmax(0, 360px);
    gap: 3rem;
    align-items: start;
    text-align: start;
  }
  .v2-newsletter__pitch { margin-inline: 0; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.35; }
  .v2-newsletter__form { justify-items: start; }
  .v2-newsletter__terms { justify-content: flex-start; }
  .v2-footer-brand { text-align: start; }
  .v2-footer-brand__mark { width: 264px; margin-inline: 0; }
  footer:has(.v2-footer-brand) { text-align: start; }
  footer:has(.v2-footer-brand) nav { justify-content: flex-start; }
  /* The design closes the page up: the mark sits just under the form rather than a section's
     worth of air below it. Two classes, because .v2-section sets padding-block further down
     this same block and a single class would simply lose to it on source order.

     The footer's own 90px of head room is trimmed to match, scoped by the brand block so only
     the page that has one is affected and every other page's footer is left as it was. */
  footer:has(.v2-footer-brand) { padding-block-start: 2rem; }
  /* The mark, the line under it and the links start where the pitch above them starts. The
     footer's own inset is wider than a section's, so the two were stepped apart by about sixty
     pixels down the left edge of the page. */
  footer:has(.v2-footer-brand) { padding-inline: 2rem; }

  .v2-section { padding-block: 48px 57px; padding-inline: 2rem; }
  /* The design leaves 58px above the buttons, against our 32. Stated here rather than on the
     shared token because the phone's own gaps already matched and would have been pushed out
     with them. The heading's own margin is set with the standfirst's, further up. */
  .v2-actions { margin-block-start: 3.375rem; }
  .v2-heading { font-size: 27px; }
  /* The tasting panel's two buttons sit 59px below the last film with 42px between them, wider
     than the shared row gap, as the mockup draws them. Their size is left to the shared .v2-btn.
     Scoped to this section so the shared .v2-actions rule is untouched. */
  .v2-panel .v2-actions { margin-block-start: 59px; gap: 42px; }
  /* Where the buttons are centred under a row of cards the design leaves 58 above them, which
     is what the shared 54 is for and what the membership and tasting sections use. Where they
     sit at the foot of a column of text beside a picture it leaves 28 to 30, and both of our
     split sections were taking the wider figure: it was the whole of why each stood about
     30px taller than hers. */
  .v2-founder .v2-actions { margin-block-start: 28px; }
  .v2-curating .v2-actions { margin-block-start: 30px; }
  /* Two of her breaks are wider than the rest, and both come before a section that stands on
     its own: 138 before the members and 134 before the newsletter, where the others run 97 to
     118 and ours was a flat 105, or 93 under the soundtrack's tighter foot. */
  .v2-section.v2-members { padding-block-start: 81px; padding-block-end: 23px; }
  .v2-section.v2-newsletter { padding-block-start: 89px; }
  .v2-section.v2-founder { padding-block-start: 23px; }

  /* The hero is a different composition on a wide screen, not the same one stretched: the film
     runs full bleed and the copy sits on it in a glass panel. Measured off the design, where the
     hero is 768px of a 1366px page and the panel starts 5.7% in, 23% down, and takes 60% of the
     width. Kept in proportions rather than pixels so it holds at 1440 and 1920 too. */
  /* The film stops at the content edge rather than running to the window, which is what the
     production home page does and what the site's --viewport-border frame is for. */
  .v2-hero { position: relative; }
  .v2-hero__media { height: min(56vw, 768px); max-height: none; }
  .v2-hero__copy {
    position: absolute;
    inset-inline-start: 5.7%;
    /* 23% down the film at the mockup width, where the film is tall enough to hold the panel with
       air above and below. The film is bound to the window width (min(56vw, 768px)), so between
       768 and the low 1000s it is shorter than 23% plus the panel's own height, and the panel ran
       past its foot (by 23px at 768 even before the panel grew). This tucks the panel up as the
       film shrinks and settles back to 23% (176px) once the film caps, so it never overruns and
       the mockup's placement is unchanged. Same calc-of-the-viewport style as the actions margin
       below. */
    inset-block-start: clamp(50px, calc(26.75vw - 155px), 176px);
    width: min(60%, 840px);
    /* The horizontal geometry is already the mockup's to the pixel, so only the vertical padding
       grows: the mockup's panel is 555px tall where the type alone takes ours to about 540, and
       this makes up the rest. */
    padding-inline: clamp(1.75rem, 2.6vw, 2.75rem);
    padding-block: clamp(1.75rem, 3.5vw, 3.6rem);
    text-align: start;
    color: #fff;
    border-radius: 24px;
    /* A plain dark tint with no blur, at Arielle's request (October 2026): the film shows through
       sharp, and 46% black keeps the white copy readable over its brightest frames. */
    background: rgba(0, 0, 0, .46);
  }
  /* The two sizes come off one scale. Before, the headline was clamp(2.3rem, 3.5vw, 3.1rem)
     and the subhead clamp(15px, 1.35vw, 19px): different floors, different vw terms and
     different caps, so each reached its own limit at its own window width and the pair drifted
     apart as the window moved. The subhead is now a fixed fraction of the headline, which is
     the only way they can scale identically.

     3.89vw puts the headline at 53px at 1366, which is the design's, and 0.51 puts the subhead
     at 27px, which is also the design's. */
  .v2-hero {
    --v2-hero-type: clamp(1.8rem, 3.89vw, 3.4rem);
  }
  /* The film fills the section here, so the control goes back to its foot. */
  .v2-hero__mute { top: auto; bottom: clamp(1rem, 2.4vw, 2rem); }

  .v2-hero__headline {
    font-size: var(--v2-hero-type);
    color: #fff;
    margin-inline: 0;
    max-width: 16ch;
    font-family: "Attila Sans Variable";
    font-variation-settings: "wght" var(--attila-regular), "cnst" var(--attila-sharp);
    font-weight: var(--attila-regular);
    font-size: var(--v2-hero-type);
    line-height: 1.39;
  }
  .v2-hero__subhead {
    color: #fff;
    font-size: calc(var(--v2-hero-type) * 0.51);
  }

  /* The copy panel is as tall as its contents while the film behind it is bound to the width of
     the window, so between 768 and the low 900s the panel ran past the bottom of the film, by
     86px at the narrow end. The air above the buttons is the slack.

     Written as a function of the type scale rather than inside a media query, so it moves with
     the headline and the subhead instead of stepping: a breakpoint here jumped 66px at the one
     pixel between 949 and 950. The two constants put it at -12px where the hero is tightest
     and 54px at 1366, which is the figure every other section uses, and because the scale it
     reads is itself clamped this stops at both ends without being told to. */
  .v2-hero .v2-actions { margin-block-start: calc(var(--v2-hero-type) * 2.716 - 90.2px); }

  /* Stacked and left aligned in the panel, where the rest of the page puts them in a row. */
  .v2-hero .v2-actions { grid-auto-flow: row; margin-inline: 0; gap: 31px; }
  /* On the film the contrast inverts: white is the thing that reads as the primary action, and
     the dark button is the quieter one. Everywhere else on the page it is the other way round.

     Both carry the same white border and the same width, 230px as the design draws them, so the
     pair reads as one control stacked twice rather than two buttons that nearly line up. The
     border goes on both for that reason: the white button does not need it to be seen, but
     without it the two would differ by two pixels. */
  /* The hero's pair is wider and taller than the shared button. The mockup's two differ from
     each other by six pixels, which reads as a slip rather than intent, so both take the
     shorter of them. */
  .v2-hero .v2-btn { border: 1px solid #fff; }
  .v2-hero .v2-btn--primary { background: #fff; color: var(--v2-ink); }
  .v2-hero .v2-btn--primary:visited { color: var(--v2-ink); }
  /* Gift a collection is the white outline alone over the film, as Arielle asked, rather than
     a black fill. It fills white on rollover. */
  .v2-hero .v2-btn--secondary { background: transparent; color: #fff; }
  .v2-hero .v2-btn--secondary:visited { color: #fff; }
  /* The primary (join the waitlist) keeps its white fill and only lifts on a box-shadow glow, as
     the prod hero's primary does. The secondary still trades its colours, the clearest way to show
     a dark button is live. */
  .v2-hero .v2-btn--primary:hover,
  .v2-hero .v2-btn--primary:focus,
  .v2-hero .v2-btn--primary:active { background: #fff; color: var(--v2-ink); box-shadow: #fff 0 0 1px 1px; }
  .v2-hero .v2-btn--secondary:hover,
  .v2-hero .v2-btn--secondary:focus,
  .v2-hero .v2-btn--secondary:active { background: #fff; color: var(--v2-ink); }

  /* Side by side once there is room for a cursor to reach them. */
  .v2-actions { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 43px; }
  .v2-btn { padding-block: 7px; }

  /* The same inset on every carousel, including the membership grid below, which is what makes
     a membership card and a press card come out the same size as each other. */
  /* --v2-cols is set on the carousel rather than its track so the carousel can size itself to
     the cards it shows; the track inherits it. --visible comes from the include. */
  .v2-carousel { padding-inline: 3rem; --v2-cols: min(var(--visible), 2); }
  .v2-carousel__track {
    /* No centring padding here: a row of cards fills the track, and the gap goes back to one
       --v2-gap. The phone's gap is twice its padding, to push the neighbouring card out of
       sight through the padding; carry that figure up here and the row is three half gaps too
       wide for the track, which is what pushed the fourth membership card off the edge.

       --visible is how many the section would like to show, from the include. --v2-cols is how
       many fit, which is that number capped by the width: four across the desktop, then three,
       then two, then the phone's one. A section asking for two never shows more than two. */
    padding-inline: 0;
    column-gap: 31px;
    /* Capped at the width a card has in the full row of four, and the row centred in what is
       left over. Without the cap a press card grew to 404px on a tablet while a membership card
       beside it held at 234, because one section fills the track with however many cards it is
       showing and the other does not. A card is a card at any width now. The figure is the
       grids' own width at full page, because a press card sitting a few pixels narrower
       than a highlight card on the same screen is exactly what the cap exists to stop.

       safe centring, not plain centring: a centred flex row that is wider than its scroll
       container puts its first item off the left edge where no scrolling can reach it. safe
       falls back to the start exactly then, which is the case where the carousel has something
       to page through. */
    --v2-card: min(calc((100% - (var(--v2-cols) - 1) * 31px) / var(--v2-cols)), var(--v2-card-step));
    justify-content: safe center;
  }
  .v2-carousel__track > * { flex: 0 0 var(--v2-card); scroll-snap-align: start; }

  /* How membership works and the wine highlights are not carousels once there is room: every
     card is on screen, two to a row here and four to a row further down, which puts the
     membership cards in one row and the eight highlights in two. The client asked for the whole
     answer at a glance rather than a thing to page through. A phone still pages through them.

     The arrows go by themselves: with nothing to scroll the script marks the carousel
     is-static, which is the same path the tasting panel takes. */
  /* These two are carousels until a full row of four fits, which is what the design asks for:
     four across while they fit, then three with an arrow to page on, then two, then one. They
     were a wrapping grid from 768 up, which showed two cards and no way to reach the rest. */
  /* A quote is words in a column, not a picture, so it takes the whole column rather than the
     280px a card is capped at. With the cap it came out at 280 inside a 537px column and two
     quotes sat side by side, each clipped by the other. */
  .v2-carousel--members .v2-carousel__track { --v2-card: 100%; }

  /* The panel stops being a carousel: the two films sit side by side and there is nothing to
     scroll, so the arrows take themselves off (is-static) and the track stops snapping.

     Two equal columns rather than the shared card width, because a film is not a card: it took
     the 280px every carousel card is capped at and sat as a thumbnail in a 1190px track. And no
     inset for arrows that are not there, so the pair fills the same box as the section above
     it: content runs 40 to 1326 in both, the gap is the same 48px, and each film comes out at
     619, which is the width of the film in Curating. */
  .v2-carousel--panel { padding-inline: 0; }
  .v2-carousel--panel .v2-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .v2-carousel--panel .v2-carousel__track > * { width: auto; }

  /* Clear of the cards once there is room, rather than over their edge. */
  .v2-carousel__control { top: 50%; }
  .v2-carousel__control svg { width: 26px; height: 46px; }
  .v2-carousel__control--prev { inset-inline-start: 0; }
  .v2-carousel__control--next { inset-inline-end: 0; }

  /* The soundtrack row carries larger arrows set clear of the cards in the band's margins, as the
     mockup draws it, rather than the smaller ones the other carousels carry. */
  /* 76 rather than 80 for the arrows, because 80 left the track seven pixels short of a fifth
     card and the design shows five: her row runs 117 to 1248 of 1366, which is 1131, and five
     cards with her 52 between them need 1133. The arrows still clear the cards. */
  .v2-carousel--soundtrack { --v2-sound-gap: 52px; padding-inline: 76px; }
  .v2-carousel--soundtrack .v2-carousel__control svg { width: 34px; height: 60px; }
  /* The label is the larger line and the name the smaller, as the mockup draws them. */
  .v2-playlist-card__collection { font-size: 1.25rem; }
  .v2-playlist-card__name { font-size: 1rem; }
  .v2-playlist-card__play { width: 29px; height: 29px; }
  .v2-playlist-card__play::after {
    border-inline-start: 9px solid var(--v2-ink);
    border-block: 6px solid transparent;
    transform: translateX(1.5px);
  }
  /* A fixed card, so its size never changes with the window: the row simply shows as many as fit,
     five on a wide desktop down to three, then two, and the phone's two below 768. The track is
     capped at exactly five cards and centred, so a screen wider than the mockup's desktop still
     shows five evenly spaced (the extra width falling into the margins) rather than a sixth card
     peeking in; narrower screens fall below the cap and step down to four, then three. */
  /* Five 185px cards and four 52px gaps come to 1133, the row width the mockup draws. */
  .v2-playlist-card { padding: 16px; }
  .v2-playlist-card__art { margin-block: 10px; }
  .v2-carousel--soundtrack .v2-carousel__track {
    max-width: calc(5 * 185px + 4 * 52px);
    margin-inline: auto;
  }
  .v2-carousel--soundtrack .v2-carousel__track > * { flex: 0 0 185px; }
}

/* The picture sections split in two here rather than at the usual breakpoint. The design's
   column is 538px, and a fixed 538 at 768 left 71px for the words beside it and pushed the
   page sideways. Proportions rather than a fixed column, 46 against 54, which is what the
   design comes to at full width; the picture's own max-width holds it at 538 once there is
   room for more.

   The two sections alternate, the members photograph on the left and the founder's on the
   right. That is done by placing them in the grid rather than by reordering the markup, so a
   screen reader still meets the heading before the picture beside it. */
@media (min-width: 1024px) {
  .v2-split {
    grid-template-columns: 46fr 54fr;
    gap: 4rem;
    align-items: center;
  }
  .v2-split .v2-section-photo { grid-row: 1; margin-inline: 0; order: 0; }
  /* The design sets the heading's cap level with the top edge of the photograph rather than
     centring the words against it. */
  .v2-members .v2-split { align-items: start; }
  .v2-split .v2-split__words { grid-row: 1; }
  .v2-split--photo-first .v2-section-photo { grid-column: 1; }
  .v2-split--photo-first .v2-split__words { grid-column: 2; }
  /* The founder's words are the wider half, so that column leads and the picture follows. */
  .v2-founder .v2-split { grid-template-columns: 54fr 46fr; }
  .v2-founder .v2-section-photo {
    grid-column: 2;
    margin-inline-start: auto;
    order: 0;
    /* The design sets the foot of the photograph level with the foot of the buttons. Centred,
       it left the buttons hanging 17px below the picture. */
    align-self: end;
  }
  .v2-founder .v2-split__words { grid-column: 1; text-align: start; }
  /* The bio ranges left in the design, against the centred measure .v2-prose gives every other
     block on the page. It also stops being a measure: the column is already the right width,
     so centring it inside itself would narrow it twice. */
  .v2-founder .v2-prose { text-align: start; max-width: none; margin-inline: 0; }
  /* The heading sits over the middle of its own column, not over the page. */
  .v2-founder .v2-split__words .v2-heading { text-align: center; }
  .v2-founder .v2-actions { margin-inline: 0; }
}

/* Three across, where a row of three still leaves each card wide enough to read.

   The membership grid stays two wide here. A row of four at this width puts each card at 190px,
   which is narrower than the longest answer on the back of card four can be read at: it was
   clipping 64 pixels of copy. The row of four waits for 1200, where a card is 234px. */
@media (min-width: 1141px) {
  .v2-carousel { --v2-cols: min(var(--visible), 3); }
}

/* The foot of the page is inset by hand at full width, because the design does not centre it.
   Measured off the mockup, which is 1366 wide so its pixels are the page's: the pitch and the
   mark start at 83, and the fields stop at 1140, which is the middle of the last card in the
   carousel above. That leaves the right margin a good deal wider than the left, which is the
   look she is after rather than an oversight.

   Only at this width. The right inset is 226px, and carrying that down to a tablet would leave
   the pitch a few characters wide beside a form that does not shrink. */
@media (min-width: 1200px) {
  .v2-section.v2-newsletter { padding-inline: 75px 218px; }
  footer:has(.v2-footer-brand) { padding-inline: 75px 2rem; }
  /* Curating and the two picture sections start on the same edge as the newsletter and the mark
     below them. A section's own padding put them at 40 while the cards above sat at 88 and the
     newsletter at 83, so the middle of the page stepped in and out down its left side.

     The right inset is smaller than the left, which is the design again rather than a slip:
     the founder photograph runs to within about 47px of the page edge while the words begin
     77px in, and the curating film runs out the same way. */
  .v2-section.v2-curating,
  .v2-section.v2-members,
  .v2-section.v2-founder { padding-inline: 75px 40px; }
}

/* The full row of four, which is the layout the mockups draw: the membership cards in one row,
   the highlights in two rows of four, and the press showing four at the same size.

   From 1200, where the cards come out at 260. At her 1366 they are the 301 she draws, and from
   there down they shrink with the page rather than the row dropping a card: four of her cards
   need 1363, which put a 14 inch Windows laptop at its default 150% scaling, 1280 wide, on the
   carousel of three. That is what Arielle reviews on, and she wanted the four, which there come
   out at about 276. There is no room for an arrow gutter here and none is needed: the two grids
   have every card on screen, and press puts its arrows over the card edges instead. Below 1200
   the gutter comes back and the row drops a card. */
@media (min-width: 1200px) {
  .v2-carousel { --v2-cols: min(var(--visible), 4); }
  .v2-section.v2-howitworks,
  .v2-section.v2-highlights,
  .v2-section.v2-press { padding-inline: 25px; }
  .v2-carousel--howitworks,
  .v2-carousel--highlights,
  .v2-carousel--press { padding-inline: 0; }

  /* The two with every card on screen stop being carousels and become a plain grid, so the
     highlights' eight fall into two rows rather than one long scroll. */
  .v2-carousel--howitworks .v2-carousel__track,
  .v2-carousel--highlights .v2-carousel__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--v2-card-step)));
    justify-content: center;
    column-gap: 31px;
    row-gap: var(--v2-gap);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .v2-carousel--highlights .v2-carousel__track { row-gap: 52px; }
}


/* Between the phone and the full row of four, the card carousels are as wide as the whole cards
   they show and no wider, centred, with the arrows beside them.

   The card is held at 301 so it never changes size, but the strip holding it was the width of
   the page, so whatever the strip had beyond two or three whole cards showed as a slice of the
   next one, cut through its title. Below the band where a card shrinks under 301 this never
   binds, because the page is narrower than it. */
@media (min-width: 768px) and (max-width: 1199px) {
  .v2-carousel--howitworks,
  .v2-carousel--highlights,
  .v2-carousel--press {
    max-width: calc(var(--v2-cols) * var(--v2-card-step) + (var(--v2-cols) - 1) * 31px + 6rem);
    margin-inline: auto;
  }
}