/*
  The cards under a menu page's title (snippets/collection-tier-nav.html, generated, and
  snippets/collection-tier-tile.html): a category page's sub-category pages, and on a department
  page the same cards again, a row for each of its categories.

  Restyled 25 Oct 2026 (the user: "make it look premium ... you make it look premium"), after the
  labels on a showroom's display bays: the photo does the selling, and the words sit quietly
  under it. A card is white on the page's grey, square-cornered like the product cards.
  - The photo, in a white mat at the top and sides, shown whole over a blurred copy of itself
    that fills any spare edges, as the product cards show theirs (the user, 27 Oct 2026; the
    25 Oct restyle had cropped room scenes to fill the square instead).
  - A card whose photos a person picked (GOL-183, since 27 Oct 2026) shows all of them, 1 to 4,
    in the order picked, in equal squares two by two. With three, the fourth square reads
    "& more".
  - The menu's name in navy between two hairlines, then "Starting from" in slate and the lowest
    price in navy, each with the same room above and below. The navy price strip that ran
    along every card's foot is gone.
  - Brass only when the card is pointed at or focused, as in the megamenu: the hairline fills
    with brass from the left, and the photo eases in a little, as on a product card.
  Its text is Century Gothic Regular (the user, 24 Oct 2026), except the name: Baskerville italic
  (the user's pick, 25 Oct 2026, as on the megamenu's headings), 18px on every screen (the user,
  28 Oct 2026; 23px, and 20px from four a row down, until then).
  The same columns on every page, so a card is the same size everywhere at a given width: 7 a row
  on large screens, then 6, 5, 4, 3, and 2 on phones. A short last row ends in the page's own grey,
  never in empty white.
  A department page shows each of its categories in a row of its own (since 28 Oct 2026): the
  category's name, "Shop all", and its cards. From 990px wide they run on in one line, as many at
  once as a grid's row holds, with arrows on its ends and a line under it to drag; below that the
  row shows every card, in the grid's own columns, as Drench's phones do. Each row is a band the
  screen's full width, a shade deeper than the page's grey and the grey itself in turn. Over the
  bands, on the breadcrumb's line, "Jump to" and a bookmark to each of them (since 28 Oct 2026).
*/

.tier-nav {
  --tier-ink: rgb(var(--color-text));
  /* navy at 65% on white: 4.87 : 1, enough for the 11px "Starting from" */
  --tier-slate: #607389;
  --tier-rule: #e6e9ee;
  --tier-brass: rgb(var(--color-light-text));
  /* The columns and the room between them, set by the bands below. A grid and a department's row
     both read them, so their cards are the same size at any width. */
  --tier-cols: 7;
  --tier-gap: 16px;
  /* a department's every other band: navy over the page's grey, a shade deeper than it */
  --tier-band: rgba(var(--color-text), 0.05);
  /* The cards start straight under the breadcrumb, where the page's title sits on a page without
     cards, and the title comes after them, over the products (snippets/collection-title.html; the
     user, 28 Oct 2026: "move this ... in the main product grid area, like we have with the none
     category grid area pages", then "do the same on the category pages too"). Under a grid runs a
     faint line with equal room above and below it (the user, 25 Oct 2026, when the listing came
     straight after): 40px from the cards to the line, and 40px from the line to the title. */
  margin-top: 0;
  margin-bottom: 40px;
}

.tier-nav__list {
  display: grid;
  grid-template-columns: repeat(var(--tier-cols), minmax(0, 1fr));
  gap: var(--tier-gap);
  margin: 0;
  padding: 0 0 40px;
  border-bottom: 1px solid rgba(var(--color-text), 0.11);
  list-style: none;
}

/* A department page's rows (the user, 28 Oct 2026, after Drench's category pages: "for the first
   level categories, i need you to show the categories from the 2nd level in seperate row"). The
   category's name heads its row in the megamenu headings' Baskerville italic, with "Shop all"
   beside it. From 990px wide the cards run in one line that scrolls sideways, each exactly as wide
   as a grid's card at the same width; arrows on the row's ends and the line under it move it along
   (assets/component-tier-row.js). Below 990px the row wraps and shows them all (the bands, below).
   Each row runs the screen's full width, a band of its own colour (the user, 28 Oct 2026: "add some
   for on seperation for each category section perhapse the background colour full screen width? i
   would keep the bg colour of the product grid bellow, then make the cat above it a diferent
   bgcolour, then then the one above that that same colour as the product grid and so on"). Counted
   up from the listing, the band next to it is the deeper shade, the one above it the page's own
   grey, and so on; inside, the row keeps to the page's width. The bands meet edge to edge, and the
   change of colour parts them, and the last from the listing: no faint line as under a grid. */
.tier-nav__rows {
  display: grid;
}

/* A department's bands have no line under them: the room under the last band parts it from the
   page's title. Two classes: they outrank the .tier-nav margins, the phones' included. */
.tier-nav.tier-nav--rows {
  margin-bottom: 48px;
}

@media (max-width: 749px) {
  .tier-nav.tier-nav--rows {
    margin-bottom: 32px;
  }
}

/* A department's bookmarks (the user, 28 Oct 2026: "a bookmark bar at the top that lists that page's
   categories ... Place it on the right, and design it like the "Sort by" boxes"): "Jump to", then a
   link to each band, on the breadcrumb's line at the page's right edge, where the line is empty.
   They are the sort boxes' white boxes (component-facets.css .sort-tiles), but none is ever chosen:
   the one pointed at turns navy and a brass line fills its foot from the left, as on the cards.
   Below 1200px, where the sort boxes become a menu, one "Jump to" box opens them in a list under it
   (assets/component-tier-jump.js). The wrapper takes no room: the bar rises from its top onto the
   breadcrumb's line, 69.2px tall (base.css .breadcrumb: 25px above and below a 12px line at 1.6),
   and sits in its middle, so nothing below moves. The bar's empty part lets the pointer through to
   the breadcrumb. */
.tier-jump {
  display: flow-root;
}

.tier-jump__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -56.6px 0 12.6px;
  pointer-events: none;
}

.tier-jump__bar > * {
  pointer-events: auto;
}

.tier-jump__label {
  margin-right: 8px;
  font-size: 13px;
  color: var(--tier-slate);
}

.tier-jump__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Prefixed: base.css's a:not(.button) makes every link navy, and outranks one class. */
.tier-nav .tier-jump__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  background: #fff;
  font-family: century-gothic-regular;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--tier-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}

.tier-jump__link::after,
.tier-jump__toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tier-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.tier-nav .tier-jump__link:hover,
.tier-nav .tier-jump__link:focus-visible {
  color: var(--tier-ink);
}

.tier-jump__link:hover::after,
.tier-jump__link:focus-visible::after {
  transform: scaleX(1);
}

.tier-jump__link:focus-visible,
.tier-jump__toggle:focus-visible {
  outline: 2px solid var(--tier-brass);
  outline-offset: 2px;
}

.tier-jump__toggle,
.tier-jump__pick {
  display: none;
}

@media (max-width: 1199px) {
  .tier-jump__label {
    display: none;
  }

  /* the Jump to box, and the box a touch screen's picker lies over (below), drawn alike */
  .tier-jump__toggle,
  .tier-jump__face {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    margin: 0;
    padding: 0 16px 0 18px;
    border: 0;
    border-radius: 0;
    background: #fff;
    font-family: century-gothic-regular;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tier-slate);
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .tier-jump__toggle:hover,
  .tier-jump__toggle[aria-expanded="true"] {
    color: var(--tier-ink);
  }

  /* open, it looks as the chosen sort box does */
  .tier-jump__toggle[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .tier-jump__toggle .icon,
  .tier-jump__face .icon {
    width: 10px;
    height: 10px;
    transition: transform 200ms ease;
  }

  .tier-jump__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  /* The list: white, over the band below, 8px under the box, as wide as the sort menu is from 960px,
     its rows parted by the cards' hairline, at the phone sort menu's 14px. Over a band's arrows, and
     under the header when the page has moved. */
  .tier-jump__list {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    width: 275px;
    padding: 4px 0;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--color-text), 0.08), 0 10px 22px -10px rgba(var(--color-text), 0.5);
  }

  .tier-jump__toggle[aria-expanded="true"] + .tier-jump__list {
    display: flex;
  }

  /* Open, the list lies over the first band's arrows (990px to 1199px), and the outer half of one,
     which sits over the page's margin, would show beside it. */
  .tier-nav:has(.tier-jump__toggle[aria-expanded="true"]) .tier-row:first-child .tier-row__arrow {
    visibility: hidden;
  }

  .tier-jump__list > li + li {
    border-top: 1px solid var(--tier-rule);
  }

  .tier-nav .tier-jump__link {
    height: 48px;
    font-size: 14px;
    background: none;
  }

  .tier-jump__link:focus-visible {
    outline-offset: -2px;
  }
}

/* On a phone the list takes the page's width. */
@media (max-width: 749px) {
  .tier-jump__list {
    left: 0;
    width: auto;
  }
}

/* On a touch screen, a phone or a tablet, the box opens the device's own picker instead, as the sort
   menu does (the user, 28 Oct 2026: "the dropdown should use the native dropdown on mobile? just like
   the sort by dropdown?"): an unseen select over a box drawn like the Jump to box, the whole box to
   tap. Its 16px keeps iOS from zooming in on it. A desktop window this narrow keeps the list, as a
   select there would jump the page at every press of an arrow key. */
@media (max-width: 1199px) and (hover: none) and (pointer: coarse) {
  .tier-jump__toggle,
  .tier-jump__list {
    display: none;
  }

  .tier-jump__pick {
    position: relative;
    display: block;
  }

  .tier-jump__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .tier-jump__pick:has(.tier-jump__select:focus-visible) .tier-jump__face {
    outline: 2px solid var(--tier-brass);
    outline-offset: 2px;
  }
}

/* The room above and below a band's contents (the user, 28 Oct 2026: "add more padding above and
   bellow each section"; 40px until then, 28px on phones). */
.tier-row {
  --tier-band-pad: 64px;
  display: block;
  min-width: 0;
  padding: var(--tier-band-pad) 0;
}

.tier-row:nth-last-child(odd) {
  background: var(--tier-band);
}

/* A first band in the page's own grey runs on from the title above it: it needs no room at its top. */
.tier-row:first-child:nth-last-child(even) {
  padding-top: 0;
}

.tier-row__head {
  display: flex;
  align-items: baseline;
  column-gap: 18px;
  margin-bottom: 16px;
}

.tier-row__title {
  margin: 0;
  font-family: baskerville-italic;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

/* A bookmark's heading. Gone to by the browser alone (without assets/component-tier-jump.js, or from
   a link to it), it keeps the header's height and the band's room above it, as the script does: the
   header is 138px tall from 960px wide, 57px below. A bookmark followed from the keyboard puts the
   focus on it, in brass. */
.tier-row__title {
  scroll-margin-top: calc(138px + var(--tier-band-pad));
}

@media (max-width: 959px) {
  .tier-row__title {
    scroll-margin-top: calc(57px + var(--tier-band-pad));
  }
}

.tier-row__title:focus {
  outline: none;
}

.tier-row__title:focus-visible {
  outline: 2px solid var(--tier-brass);
  outline-offset: 4px;
}

/* Prefixed: base.css's a:not(.button):hover outranks one class. */
.tier-nav .tier-row__title a,
.tier-nav .tier-row__all {
  color: var(--tier-ink);
  transition: color 200ms ease;
}

.tier-nav .tier-row__title a {
  text-decoration: none;
}

.tier-nav .tier-row__all {
  font-family: century-gothic-regular;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.tier-nav .tier-row__title a:hover,
.tier-nav .tier-row__all:hover {
  color: var(--tier-brass);
}

/* The cards' line, with the arrows over its ends. It is a query container so that an arrow can find
   the photos' middle from its width: a card is a column of it, and its photo is that less the 10px
   mat either side, 10px down. flow-root keeps the list's 4px of outline room inside it, so it starts
   and ends exactly with the cards. */
.tier-row__track {
  position: relative;
  display: flow-root;
  container-type: inline-size;
}

/* 4px of room round the cards for a focused card's outline, which a scrolling box would clip; the
   cards still line up with the page's edges. */
.tier-row__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--tier-cols) - 1) * var(--tier-gap)) / var(--tier-cols));
  gap: var(--tier-gap);
  margin: -4px;
  padding: 4px;
  scroll-padding-inline: 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.tier-row__list > .tier-nav__item {
  scroll-snap-align: start;
}

.tier-row.is-ready .tier-row__list {
  scrollbar-width: none;
}

.tier-row.is-ready .tier-row__list::-webkit-scrollbar {
  display: none;
}

/* While a mouse drags the cards, or the line under them, the row follows it freely, then settles on
   a card's edge; nothing under the pointer lights up or opens. */
.tier-row.is-dragging .tier-row__list {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.tier-row.is-dragging .tier-card {
  pointer-events: none;
}

/* The arrows (the user, 28 Oct 2026: "i need the pagination buttons to show in each gallery on left
   and right, again its hard to scroll"): a white square on each end of the row, half over the page's
   margin, level with the middle of the photos. Each shows only while there is more its way, and pages
   through a screenful of cards at a time. Pointed at, it turns navy with a brass line along its foot,
   as the chosen sort box below the cards does. */
.tier-row__arrow {
  position: absolute;
  z-index: 1;
  top: 38%;
  top: calc(10px + ((100cqi - (var(--tier-cols) - 1) * var(--tier-gap)) / var(--tier-cols) - 20px) / 2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--tier-ink);
  box-shadow: 0 0 0 1px rgba(var(--color-text), 0.08), 0 10px 22px -10px rgba(var(--color-text), 0.5);
  cursor: pointer;
  /* back at once (it may be handed the focus), then fades in */
  transition: background-color 200ms ease, color 200ms ease, opacity 250ms ease, visibility 0s;
}

.tier-row__arrow--prev {
  left: -22px;
}

.tier-row__arrow--next {
  right: -22px;
}

.tier-row__arrow[hidden] {
  display: none;
}

/* at the start of the row there is nothing back, and at its end nothing on: it fades, then goes */
.tier-row__arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms ease, visibility 0s 250ms;
}

.tier-row__arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tier-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.tier-row__arrow:hover {
  background: var(--tier-ink);
  color: #fff;
}

.tier-row__arrow:hover::after {
  transform: scaleX(1);
}

.tier-row__arrow:focus-visible {
  outline: 2px solid var(--tier-brass);
  outline-offset: 2px;
}

.tier-row__arrow .icon {
  width: 14px;
  height: 14px;
}

/* the caret's 1.5 of its 10 units drawn at 14px is a heavy 2.1px; this keeps it to 1.5px */
.tier-row__arrow .icon path {
  stroke-width: 1.1;
}

.tier-row__arrow--prev .icon {
  transform: rotate(90deg);
}

.tier-row__arrow--next .icon {
  transform: rotate(-90deg);
}

/* The line under the row is its scrollbar (the user, 28 Oct 2026: "i want the the user to be able to
   scroll on desktop"): the darker part is the part of the row in view; drag it, or press the line
   anywhere, to move along. It is a light grey a step darker than the line (the user, the same day:
   "lighten the black or navy colour ... a light grey colour, thats a bit darker that the scrollbar
   track, so that its not them but you can still see it"), navy at 22% over it, the same step on
   either band. The bar is 20px tall to be easy to take hold of, with the 2px line across its middle,
   16px under the cards; its margins give back the extra height, so the rows sit where they would
   round a plain line. Pointed at or held, the line thickens to 4px and its darker part deepens a
   little. */
.tier-row__bar {
  position: relative;
  display: block;
  height: 20px;
  margin: 7px 0 -9px;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transition: opacity 250ms ease;
}

/* A row that fits keeps the line's room but shows nothing there, so every band is built alike. */
.tier-row__bar[hidden] {
  visibility: hidden;
}

/* The line shows only while its band is pointed at, holds the keyboard's focus, or is being moved
   (the user, 28 Oct 2026: "hide the scrolball and only show it when you hover over the section"),
   fading in where it always sits, so nothing moves. */
.tier-row:hover .tier-row__bar,
.tier-row:has(:focus-visible) .tier-row__bar,
.tier-row.is-dragging .tier-row__bar {
  opacity: 1;
}

/* Every row keeps the line's 18px under its cards, shown or not, and its band gives them back below,
   so the room under the cards matches the room above the name. */
@media (min-width: 990px) {
  .tier-row {
    padding-bottom: calc(var(--tier-band-pad) - 18px);
  }
}

.tier-row__bar::before,
.tier-row__thumb {
  position: absolute;
  top: 9px;
  height: 2px;
  transition: top 200ms ease, height 200ms ease, background-color 200ms ease;
}

.tier-row__bar::before {
  content: "";
  left: 0;
  right: 0;
  background: rgba(var(--color-text), 0.11);
}

.tier-row__thumb {
  left: 0;
  background: rgba(var(--color-text), 0.22);
}

.tier-row__bar:hover::before,
.tier-row__bar:hover .tier-row__thumb,
.tier-row.is-holding-bar .tier-row__bar::before,
.tier-row.is-holding-bar .tier-row__thumb {
  top: 8px;
  height: 4px;
}

.tier-row__bar:hover .tier-row__thumb,
.tier-row.is-holding-bar .tier-row__thumb {
  background: rgba(var(--color-text), 0.34);
}

.tier-row.is-holding-bar .tier-row__bar {
  cursor: grabbing;
}

/* The bands: each keeps a card about 160px wide or wider. */
@media (max-width: 1359px) {
  .tier-nav {
    --tier-cols: 6;
  }
}

@media (max-width: 1174px) {
  .tier-nav {
    --tier-cols: 5;
  }
}

@media (max-width: 989px) {
  .tier-nav {
    --tier-cols: 4;
  }
}

@media (max-width: 749px) {
  .tier-nav {
    --tier-cols: 3;
    --tier-gap: 10px;
  }
}

@media (max-width: 599px) {
  .tier-nav {
    --tier-cols: 2;
  }
}

/* Below 990px a department's row shows all its cards, wrapped in the grid's own columns, as
   Drench's phones do (the user, 28 Oct 2026: "also match then on mobile, when they show all the
   cards"): nothing to scroll, so no arrows and no line. */
@media (max-width: 989px) {
  .tier-row__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--tier-cols), minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .tier-row__arrow,
  .tier-row__bar {
    display: none;
  }
}

.tier-nav__item {
  display: flex;
  min-width: 0;
}

/* Its colours carry the .tier-nav prefix: base.css's a:not(.button):hover outranks one class.
   The padding is the photo's white mat, 10px at the top and sides (the user, 25 Oct 2026: "i did
   10px border and it looked good", then "remove the bottom border from the image"), and the
   words and hairlines keep to the same 10px line. */
.tier-nav .tier-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 0;
  background: #fff;
  color: var(--tier-ink);
  font-family: century-gothic-regular;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}

.tier-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

/* The photos. One fills the square; two to four share it in equal squares, two by two, parted by
   the card's hairline (the user, 27 Oct 2026: "keep them the same square"). With three, the
   fourth square reads "& more"; with two, the lower half does. Each photo is shown whole, never
   cropped, over a stretched copy of itself, blurred and faded, that fills any spare edges: the
   product cards' own recipe (component-card.css .blur-image; the user: "with blurred background
   to mask the cutoff like we do on the plp images"). */
.tier-card__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--tier-rule);
  transition: transform 500ms ease;
}

.tier-card__mosaic--1 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.tier-card__mosaic--2 .tier-card__more {
  grid-column: 1 / -1;
}

.tier-card__cell,
.tier-card__more {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.tier-card__blur,
.tier-card__photo {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.tier-card__blur {
  object-fit: fill;
  opacity: 0.25;
  filter: blur(4px);
}

/* Every photo runs to the hairlines, as on the product cards. The 8% white inset the four-product
   squares used to have boxed in photos shot on grey (27 Oct 2026). The cells still say what each
   photo is (tier-card__cell--scene, --studio or --other), for any later styling. */
.tier-card__photo {
  object-fit: contain;
}

/* "& more": the shop's own ampersand (Golita & Sons), in the name's Baskerville italic and navy,
   warming to brass with the hairline when the card is pointed at; "more" in the card's small
   slate type. It stays plain white when the page holds no more products than the card shows. */
.tier-card__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 20px and 9px on every screen (the user, 27 Oct 2026; 34px and 11px at first) */
.tier-card__amp {
  font-family: baskerville-italic;
  font-size: 20px;
  line-height: 1;
  color: var(--tier-ink);
  transition: color 350ms ease;
}

.tier-card__more-word {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--tier-slate);
}

/* The name, in Baskerville italic (the user's pick), between two hairlines with the same room
   above and below it. The upper one parts it from the photo, which matters most on a photo with
   a white background (the user, 25 Oct 2026). It takes the spare height, so the prices line up
   along a row, and stays centred in it. A long name takes two lines; 1.15 keeps them close.
   18px on every screen (the user, 28 Oct 2026, ".tier-card__name { font-size: 18px; }"; 23px, and
   20px from four a row down, until then). */
.tier-card__name {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--tier-rule);
  font-family: baskerville-italic;
  font-size: 18px;
  line-height: 1.15;
}

/* The price, under a hairline that fills with brass from the left on hover, with the same room
   above and below it as the name has. */
.tier-card__ticket {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  padding: 12px 0;
}

.tier-card__ticket::before,
.tier-card__ticket::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--tier-rule);
}

.tier-card__ticket::after {
  height: 2px;
  background: var(--tier-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms ease;
}

.tier-card__lead {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--tier-slate);
}

/* a size above "Starting from" and below the name (15px until the user asked for smaller) */
.tier-card__price {
  font-size: 13px;
  line-height: 1.2;
  color: var(--tier-ink);
}

/* A row's card shows no price (snippets/collection-tier-tile.html): no hairline closes it, only the
   brass line along its foot when it is pointed at, as on a priced card. */
.tier-card__ticket.tier-card__ticket--bare {
  height: 2px;
  padding: 0;
}

.tier-card__ticket.tier-card__ticket--bare::before {
  content: none;
}

.tier-card:hover .tier-card__ticket::after,
.tier-card:focus-visible .tier-card__ticket::after {
  transform: scaleX(1);
}

.tier-card:hover .tier-card__amp,
.tier-card:focus-visible .tier-card__amp {
  color: var(--tier-brass);
}

.tier-card:hover .tier-card__mosaic {
  transform: scale(1.04);
}

.tier-card:focus-visible {
  outline: 2px solid var(--tier-brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tier-card__mosaic,
  .tier-card__amp,
  .tier-card__ticket::after,
  .tier-row__arrow,
  .tier-row__arrow:disabled,
  .tier-row__arrow::after,
  .tier-row__bar,
  .tier-row__bar::before,
  .tier-row__thumb,
  .tier-nav .tier-row__title a,
  .tier-nav .tier-row__all,
  .tier-nav .tier-jump__link,
  .tier-jump__link::after,
  .tier-jump__toggle,
  .tier-jump__toggle::after,
  .tier-jump__toggle .icon {
    transition: none;
  }

  .tier-card:hover .tier-card__mosaic {
    transform: none;
  }
}

@media (max-width: 749px) {
  /* 32px either side of the line under a grid, to the cards and to the page's title */
  .tier-nav {
    margin-bottom: 32px;
  }

  .tier-nav__list {
    padding-bottom: 32px;
  }

  .tier-row {
    --tier-band-pad: 40px;
  }

  .tier-row__head {
    margin-bottom: 12px;
  }

  .tier-row__title {
    font-size: 24px;
  }

  .tier-card__name {
    padding: 10px 0;
  }

  .tier-card__ticket {
    padding: 10px 0;
  }

  .tier-card__lead {
    font-size: 10px;
  }

  .tier-card__price {
    font-size: 12px;
  }
}