/*
 * Green St Kitchen - components: pills, chips, header, footer.
 * No literal colour values. Everything comes from tokens.css.
 */

/* =========================================================================
 * PILLS
 * Four variants per the brief: dark, light, colour, ghost.
 * 40px radius, Figtree Medium, consistent padding.
 *
 * Hover was not in the mockup. PROJECT-BRIEF 7A gives Webstein the decision,
 * so all four variants share one treatment: the fill shifts by
 * --gs-hover-shift toward its own contrast partner. One rule, four variants,
 * nothing to remember per call site.
 * ========================================================================= */
/* Every button on this site is a pill, so core/button gets the pill shape by
 * default rather than needing a class. .gs-pill is the same treatment for
 * links written in a template. */
.gs-pill,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gs-pill-height);
  padding: 0 var(--gs-pill-padding-x);
  border: 1px solid transparent;
  border-radius: var(--gs-pill-radius);
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gs-transition), color var(--gs-transition),
    border-color var(--gs-transition);
}

.gs-pill--sm,
.gs-buttons--sm .wp-block-button__link {
  min-height: var(--gs-pill-height-sm);
  font-size: var(--gs-step-pill-sm);
}

/* Dark pill: Ink background, Paper text. Primary CTA and the nav button.
 * Also the default for an unstyled core/button. */
.gs-pill--dark,
.wp-block-button__link,
.wp-block-button.is-style-gs-dark .wp-block-button__link {
  background-color: var(--gs-ink);
  color: var(--gs-paper);
}

.gs-pill--dark:hover,
.wp-block-button__link:hover,
.wp-block-button.is-style-gs-dark .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--gs-ink), var(--gs-paper) var(--gs-hover-shift));
}

/* Light pill: Paper background, Ink text. Secondary CTA on dark backgrounds. */
.gs-pill--light,
.wp-block-button.is-style-gs-light .wp-block-button__link {
  background-color: var(--gs-paper);
  color: var(--gs-ink);
}

.gs-pill--light:hover,
.wp-block-button.is-style-gs-light .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--gs-paper), var(--gs-ink) var(--gs-hover-shift));
}

/* Colour pill: range accent background. --gs-accent is set by the section, so
 * this variant needs no per-range class.
 *
 * The label colour is --gs-on-accent, defaulting to Paper, which is what the
 * mockup uses on all three range pills. The hook stays because it is the correct
 * remedy for a fill that Paper cannot sit on accessibly: override it to Ink for
 * that section rather than touching the fill, which is a brand value. Nothing
 * overrides it at present; see the contrast table in BUILD-REPORT.md. */
.gs-pill--colour,
.wp-block-button.is-style-gs-colour .wp-block-button__link {
  background-color: var(--gs-accent);
  color: var(--gs-on-accent, var(--gs-paper));
}

.gs-pill--colour:hover,
.wp-block-button.is-style-gs-colour .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--gs-accent), var(--gs-ink) var(--gs-hover-shift));
}

/* Ghost pill: transparent, current colour border and text. */
.gs-pill--ghost,
.wp-block-button.is-style-gs-ghost .wp-block-button__link {
  background-color: transparent;
  border-color: currentColor;
  color: currentColor;
}

.gs-pill--ghost:hover,
.wp-block-button.is-style-gs-ghost .wp-block-button__link:hover {
  background-color: color-mix(in srgb, transparent, currentColor var(--gs-hover-shift));
}

/* core/buttons wrapper: match the measured 12px gap between adjacent pills. */
.wp-block-buttons {
  gap: var(--gs-pill-gap);
}

.gs-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-pill-gap);
}

/* =========================================================================
 * PLAY CONTROL
 * Measured from the Home mockup: 1px Paper ring, transparent fill,
 * a 19px triangle, vertically centred, 140px in from the right edge at 1280px.
 * The base ring is shared by the Banner and Media slider blocks, which is why it
 * lives here rather than in either block's own stylesheet. Each block's own file
 * carries only the rules that position or reveal this control within its own
 * layout: .gs-play--hero in banner/style.css, .gs-play--reel and its relatives
 * in media-slider/style.css.
 * ========================================================================= */
.gs-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gs-play-hero);
  height: var(--gs-play-hero);
  padding: 0;
  border: 1px solid var(--gs-fg-inverse);
  border-radius: 50%;
  background-color: transparent;
  color: var(--gs-fg-inverse);
  cursor: pointer;
  transition: background-color var(--gs-transition);
}

.gs-play:hover {
  background-color: color-mix(in srgb, transparent, var(--gs-fg-inverse) 18%);
}

/* No video asset has been supplied yet, so the control renders disabled rather
 * than pretending to work. It keeps its drawn appearance: the mockup shows it at
 * full strength, and dimming it would be inventing a state. Set a video on the
 * block and it becomes live. */
.gs-play[disabled] {
  cursor: default;
}

.gs-play__icon {
  width: 19px;
  height: 22px;
  margin-left: 4px; /* optical centring: a triangle's mass sits left of centre */
  fill: currentColor;
}

/* ---- Lightbox -----------------------------------------------------------
 * A native <dialog>, so Escape and the focus trap are the browser's job. Shared
 * by both blocks for the same reason as the play control above.
 */
.gs-lightbox {
  width: min(92vw, 1100px);
  padding: 0;
  border: 0;
  border-radius: var(--gs-card-radius);
  background-color: var(--gs-ink);
  color: var(--gs-fg-inverse);
  overflow: visible;
}

.gs-lightbox::backdrop {
  background-color: color-mix(in srgb, transparent, var(--gs-ink) 86%);
}

.gs-lightbox__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gs-card-radius);
}

.gs-lightbox__frame iframe,
.gs-lightbox__frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gs-lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gs-fg-inverse);
  border-radius: 50%;
  background-color: transparent;
  color: var(--gs-fg-inverse);
  cursor: pointer;
}

.gs-lightbox__close svg {
  width: 18px;
  height: 18px;
}

/* =========================================================================
 * CLOSING COLOUR BAND
 * A full bleed colour band with a centred heading, an optional line of body copy
 * and one pill. Our Story ends with one and FAQ ends with one, so the structure
 * is here rather than in either page's stylesheet - the same reasoning as the
 * coloured card below.
 *
 * The two are drawn to different depths with different heading sizes and
 * different pill variants, so the geometry comes from custom properties that each
 * modifier reassigns. Those numbers are measurements, not a scale: see the
 * "Closing colour band" block in tokens.css before changing any of them.
 *
 * Every band carries .gs-on-colour as well. That is load-bearing: it flips the
 * focus ring to Paper, which is the only way it keeps 3:1 on these fills. Ink
 * measures 2.59:1 on the forest green.
 * ========================================================================= */
.gs-cta-band {
  padding-block: var(--gs-cta-pad-top) var(--gs-cta-pad-bottom);
  background-color: var(--gs-cta-bg);
  text-align: center;
}

.gs-cta-band__title {
  font-size: var(--gs-cta-title);
  line-height: var(--gs-leading-heading);
  color: var(--gs-white);
  margin: 0;
}

.gs-cta-band__body {
  font-size: var(--gs-step-base);
  color: var(--gs-white);
  margin: var(--gs-cta-body-gap) 0 0;
}

/* The buttons block is a flex row; centring it is what centres the single pill
 * under the heading. */
.gs-cta-band .wp-block-buttons {
  justify-content: center;
  margin-block-start: var(--gs-cta-gap);
}

/* Our Story: rust, 42px heading, no body line, dark pill. */
.gs-cta-band--pickled-things {
  --gs-cta-bg: var(--gs-pickled-things);
}

/* FAQ: forest green, 40px heading, one body line, light pill. */
.gs-cta-band--forest {
  --gs-cta-bg: var(--gs-forest);
  --gs-cta-title: var(--gs-cta-title-faq);
  --gs-cta-pad-top: var(--gs-cta-pad-top-faq);
  --gs-cta-pad-bottom: var(--gs-cta-pad-bottom-faq);
  --gs-cta-gap: var(--gs-cta-gap-faq);
  --gs-cta-body-gap: var(--gs-cta-body-gap-faq);
}

/* =========================================================================
 * COLOURED CARD
 * A brand-colour panel holding a heading, a paragraph and a pill. First drawn as
 * "Stock Green St." on Contact, and measured there: 20px radius, 28px padding.
 *
 * It lives here rather than in contact.css because it is made of core blocks
 * carrying a class, so an editor can put one on any page. Left in the page
 * stylesheet it would render as unstyled plain text anywhere else.
 *
 * .gs-card--colour is the name to use from now on. .gs-wholesale is the name the
 * seeded Contact page already carries and is kept so that page keeps working.
 * ========================================================================= */
.gs-card--colour,
.gs-wholesale {
  background-color: var(--gs-wild-ferments);
  border-radius: var(--gs-card-radius-lg);
  padding: var(--gs-space-lg);
  color: var(--gs-fg-inverse);
}

@media (min-width: 768px) {
  .gs-card--colour,
  .gs-wholesale {
    /* 28px, measured on all four sides from the pill and the heading. 4px less
     * than the white card above it on Contact, which is how it is drawn. */
    padding: 28px;
  }
}

.gs-card--colour h2,
.gs-card--colour h3,
.gs-wholesale h2,
.gs-wholesale__title {
  font-size: var(--gs-step-card-heading);
  line-height: 1.21;
  margin-block-end: var(--gs-space-2xs);
  color: var(--gs-fg-inverse);
}

.gs-card--colour p,
.gs-wholesale p {
  font-size: var(--gs-step-body-sm);
  line-height: 1.4;
  margin: 0;
}

.gs-card--colour .wp-block-buttons,
.gs-card--colour .gs-pill-row,
.gs-wholesale .wp-block-buttons,
.gs-wholesale .gs-pill-row {
  margin-block-start: 14px;
}

/* =========================================================================
 * CHIPS - the small "Kimchi · 4 flavours" tags
 * ========================================================================= */
.gs-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-space-2xs);
}

.gs-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--gs-pill-radius);
  background-color: var(--gs-chip-bg, transparent);
  color: var(--gs-chip-fg, currentColor);
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-chip);
}

/* =========================================================================
 * JAR MEDIA
 * The panel a jar photograph sits in. Three surfaces draw it: the product
 * hero, the related cards at the foot of a product page, and the cards on the
 * Products catalogue. It lives here rather than in product.css because the
 * catalogue is a block with its own stylesheet and would otherwise have made a
 * third copy of it - house standard section 3.
 *
 * Bottom to top it is:
 *
 *   1. hero-texture.png       the gradient the designer supplied for this panel
 *   2. the scheme colour      multiplied over it as a tint
 *   3. the jar photograph     when one exists
 *   4. the brand shape        the product's own cluster
 *
 * Layers 1 and 2 are here, because all three surfaces draw them identically.
 * Layers 3 and 4 are NOT, because the hero and the cards order them
 * differently and draw the shape by different means: on a card the shape sits
 * OVER the photograph and is a mask filled from the scheme, on the hero it
 * sits UNDER and is the supplied file with its own colour baked in. That is not
 * an inconsistency to tidy up - it is what the two artboards draw.
 *
 * The tint uses multiply rather than a flat translucent fill so the texture's
 * own gradient survives instead of being flattened to one colour. Its strength
 * is a variable because it is the one value here nobody measured: the mockups
 * show the finished panel, not how it was composed.
 *
 * The card keeps its shape colour as the background beneath all four layers, so
 * it still reads as designed while every product photograph is still
 * placeholder. Aspect ratio and corner radius belong to the consumer, since the
 * three surfaces are drawn 551x540, 371x159 and 273x200.
 * ========================================================================= */
.gs-jarmedia {
  --gs-tint-strength: 0.72;
  position: relative;
  isolation: isolate;
  display: block;
  background-color: var(--gs-product-shape);
  background-image: url("../img/hero-texture.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Layer 2. */
/* .gs-jarmedia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--gs-product);
  mix-blend-mode: multiply;
  opacity: var(--gs-tint-strength);
} */

/* Layer 3, for the two card surfaces. The hero puts its photograph above its
 * shape instead and so carries its own rule. */
.gs-jarmedia__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Layer 4, for the two card surfaces.
 *
 * A mask rather than an image, which is the opposite of the hero and is
 * deliberate: both artboards draw the card shapes in the LIGHT tint - #e8adbc,
 * #e8b792, #ddc2b3 and eight more, every one of them already a scheme shape
 * colour in tokens.css - while the supplied files carry the dark version. Using
 * the file as a mask takes its outline and fills it from the scheme.
 *
 * Anchored to the bottom right corner and oversized so the cluster runs off it
 * rather than floating in the middle of the food, which is how both artboards
 * draw it. Measured on all eleven Products cards: the fill reaches within 0.6px
 * of the right edge and 0.1px of the bottom on every one of them, so the anchor
 * is not a judgement. The SIZE is: the visible cluster ranges from 52% to 94%
 * of the card's width and 49% to 100% of its height, because each supplied file
 * arranges its four shapes differently. The default below lands on the mean of
 * the eleven, about 75% by 65% visible, and each surface overrides it.
 * PROJECT-BRIEF 7A already records this residual for the range cards on Home. */
.gs-jarmedia__shape {
  position: absolute;
  z-index: 3;
  right: -10%;
  bottom: -20%;
  width: 85%;
  aspect-ratio: 1080 / 789;
  background-color: var(--gs-product-shape);
  mask-image: var(--gs-shape);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--gs-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* =========================================================================
 * SITE HEADER
 * Measured: 93px tall on desktop, warm beige, logo 219px wide at x=64,
 * nav right aligned, "find a stockist" pill 149 x 45.
 *
 * Fixed. Reverses the earlier 7A "static" decision: the header now stays
 * pinned while the page scrolls. --gs-header-height carries the header's
 * own min-height so body's top padding (base.css) and the Products page
 * anchor offset (product-catalogue/style.css) can both clear it without
 * duplicating the 72/93px figures.
 * ========================================================================= */
.gs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: var(--gs-warm-beige);
}

.gs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-md);
  min-height: var(--gs-header-height);
}

/* The mockup's header fits the 1280px canvas exactly: 236 logo + 48 + six nav
 * items totalling 430 + five 48px gaps + 48 + the 150px pill comes to precisely
 * the 1152px content column, with nothing spare. So every width between the
 * 1024px nav breakpoint and 1280px has to buy the difference back out of the
 * gaps, or the pill is pushed off the right edge. Both gaps therefore ramp
 * linearly and reach their measured 48px exactly at 1280.
 *
 * Before this, the header overflowed by a couple of pixels at 1024px and at
 * 375px. See BUILD-REPORT.md and PROJECT-BRIEF 7A. */
@media (min-width: 1024px) {
  .gs-header__inner {
    gap: clamp(14px, 12.5vw - 112px, var(--gs-space-xl));
  }
}

/* Phone: logo, toggle and pill on one 375px row. The pill stays in the bar at
 * every width, which is the 7A rule, so the wordmark and the gaps give way
 * instead. */
@media (max-width: 479px) {
  .gs-header__inner {
    gap: var(--gs-space-xs);
  }
}

/* Measured 236px wide in the mockup, in both the header and the footer. The
 * supplied SVGs had padding inside their viewBox, which made a CSS width
 * render smaller and inset than asked for; the viewBox is now cropped to the
 * glyphs so width means what it says. Ratio is 8.94, so 236px gives the
 * measured 26.4px cap height.
 *
 * The wordmark is only 26px tall, so the link gets a 44px hit area around it
 * to meet the target size criterion. */
.gs-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 160px;
  min-height: 44px;
  line-height: 0;
}

/* 132px at phone widths, so the wordmark, the nav toggle and the pill all fit
 * inside 375px without the row overflowing. */
@media (max-width: 479px) {
  .gs-header__logo {
    width: 132px;
  }
}

.gs-header__logo svg,
.gs-header__logo img {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .gs-header__logo {
    width: 236px;
  }
}

/* ---- Primary navigation ------------------------------------------------
 * Small screens: seven items plus the pill will not fit, so the links move
 * into a disclosure panel. The pill stays in the bar at every width because
 * it is the primary conversion path. PROJECT-BRIEF 7A decision.
 */
.gs-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gs-space-sm);
}

/* A pill label that wraps stops being a pill. The header pill is the primary
 * conversion path and is present at every width, so it never wraps and never
 * shrinks below its own label. */
.gs-header__actions .gs-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .gs-header__actions {
    gap: var(--gs-space-2xs);
  }

  .gs-header__actions .gs-pill {
    padding-inline: 14px;
  }
}

@media (min-width: 1024px) {
  /* The nav sits hard against the pill with the same 48px rhythm, rather than
   * being spread by space-between. The 48px comes from the row's own gap, so
   * it must not be added again here or it compounds. */
  .gs-nav {
    margin-left: auto;
  }
}

/* 48px between every pair of nav items in the mockup, and between the last item
 * and the pill. That measured value is what the clamp reaches at 1280px; below
 * that it ramps down, because at 1024px the six items plus five 48px gaps do not
 * fit beside the logo and the pill. See the note on .gs-header__inner. */
.gs-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(8px, 15.6vw - 152px, var(--gs-space-xl));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill);
  /* Two word items such as "Wild Ferments" wrapped to two lines in the 1024 to
   * 1280 band, which made the row 46px tall instead of 44 and shifted the whole
   * bar. They are single line in the mockup at every width it shows. */
  white-space: nowrap;
  text-decoration: none;
  color: var(--gs-ink);
}

@media(max-width:1023px){
    .gs-nav__list>li>a{
        padding-left:15px; 
        padding-right: 15px;
    }
}

.gs-nav__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gs-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Toggle button, phone and tablet only. */
.gs-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2xs);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--gs-pill-radius);
  background-color: transparent;
  color: var(--gs-ink);
}

.gs-nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

.gs-nav-toggle__bars::before,
.gs-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--gs-transition), top var(--gs-transition);
}

.gs-nav-toggle__bars::before { top: -6px; }
.gs-nav-toggle__bars::after { top: 6px; }

.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bars {
  background-color: transparent;
}

.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Panel: below 1024px the nav collapses. */
@media (max-width: 1023px) {
  .gs-nav {
    position: absolute;
    /* Without an explicit top, an absolutely-positioned flex item's static
     * position follows .gs-header__inner's align-items: center, anchoring a
     * zero-height placeholder mid-bar and pushing the real panel off the top
     * of the viewport. Pin it to the bottom edge of .gs-header__bar instead. */
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--gs-warm-beige);
    border-top: 1px solid color-mix(in srgb, var(--gs-warm-beige), var(--gs-ink) 12%);
    box-shadow: 0 12px 24px color-mix(in srgb, transparent, var(--gs-ink) 10%);
  }

  .gs-nav[hidden] {
    display: none;
  }

  .gs-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--gs-space-2xs) var(--gs-space-md) var(--gs-space-md);
  }

  .gs-nav__link {
    min-height: 48px;
    font-size: var(--gs-step-intro);
  }
}

@media (min-width: 1024px) {
  .gs-nav-toggle {
    display: none;
  }

  .gs-nav[hidden] {
    display: block;
  }
}

.gs-header__bar {
  position: relative;
}

/* =========================================================================
 * SITE FOOTER
 * Measured: Ink band 292px tall. Brand block left, three link columns from
 * x=517, legal row at the bottom.
 * ========================================================================= */
/* Footer link rows are 22px, matching the mockup. Instructed 5 August 2026.
 *
 * This is a deliberate exception to the 44px target size in PROJECT-BRIEF
 * section 9: 22px rows cannot give 44px hit areas without the areas overlapping
 * and stealing each other's clicks. The decision was the client's to make and
 * has been made. Recorded in BUILD-REPORT.md so it is not mistaken for an
 * oversight, and so nobody "fixes" it back. */
.gs-footer {
  background-color: var(--gs-bg-inverse);
  color: var(--gs-beige-rose);
  padding-block: var(--gs-space-xl);
}

.gs-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-xl);
}

@media (min-width: 768px) {
  .gs-footer__top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gs-space-md);
  }
}

@media (min-width: 1024px) {
  .gs-footer__top {
    grid-template-columns: 396px 1fr 1fr 1fr;
  }
}

.gs-footer__logo {
  display: flex;
  align-items: center;
  width: 236px;
  max-width: 100%;
  min-height: 44px;
  margin-bottom: var(--gs-space-2xs);
  line-height: 0;
}

.gs-footer__tagline {
  font-size: var(--gs-step-sm);
  margin: 0;
}

.gs-footer__tagline + .gs-footer__tagline {
  margin-top: var(--gs-space-sm);
}

.gs-footer__heading {
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill-sm);
  letter-spacing: var(--gs-tracking-label);
  text-transform: uppercase;
  margin: 0 0 var(--gs-space-sm);
  color: color-mix(in srgb, var(--gs-fg-inverse), transparent 35%);
}

.gs-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* 22px row height, per the mockup. See the note on .gs-footer above: this is a
 * signed-off exception to the 44px target size rule, not an oversight. */
.gs-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-size: var(--gs-step-pill);
  text-decoration: none;
}

.gs-footer__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gs-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gs-space-2xs) var(--gs-space-md);
  margin-top: var(--gs-space-xl);
  padding-top: var(--gs-space-md);
  border-top: 1px solid var(--gs-darker-grey);
  font-size: var(--gs-step-label);
  color: var(--gs-stone-grey);
}

.gs-footer__legal p {
  margin: 0;
}