/* ==========================================================================
   Hangtime — storefront components.
   Ordered the way the page is: chrome, rail, drop, editorial, overlays.
   ========================================================================== */

/* --- Ticker -------------------------------------------------------------- */

/* Two identical halves travel left as one track. When the first has moved
   its own width the animation restarts, and the second half is already in
   its place, so the loop never shows a seam. */

.ht-ticker {
  display: flex;
  align-items: center;
  height: var(--ht-announce-h);
  overflow: hidden;
  font-family: var(--ht-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ht-ls-mono);
  color: var(--ht-wall);
  text-transform: uppercase;
  user-select: none;
  background: var(--ht-ink);
}

.ht-ticker__track {
  display: flex;
  flex: none;
  min-width: 200%;
  animation: ht-ticker var(--ht-ticker-duration, 36s) linear infinite;
  will-change: transform;
}

/* Keyboard focus stops it, so a message carrying a link can be read and
   followed. A hovering cursor does not: this is the top strip of the page,
   which every cursor crosses on its way to the address bar, and stopping
   each time it goes past is what makes a running ticker look broken. */
.ht-ticker:focus-within .ht-ticker__track {
  animation-play-state: paused;
}

.ht-ticker__set {
  display: flex;
  flex: none;
  align-items: center;
}

.ht-ticker__item {
  flex: none;
  white-space: nowrap;
}

.ht-ticker__item a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.ht-ticker__item a:hover {
  text-decoration: underline;
}

.ht-ticker__sep {
  flex: none;
  padding: 0 18px;
  font-size: 7px;
  opacity: 0.5;
}

@keyframes ht-ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-ticker__track {
    animation: none;
  }
}

/* --- Header --------------------------------------------------------------- */

.ht-header {
  position: sticky;
  top: 0;
  z-index: var(--ht-z-header);
}

/* The blur sits on a pseudo-element so the header's own contents are never
   caught inside the backdrop filter's stacking context. */
.ht-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ht-wall) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ht-dur);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ht-header.is-scrolled::before {
  border-bottom-color: var(--ht-line);
}

.ht-header__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  height: var(--ht-header-h);
}

.ht-header__left {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
}

.ht-nav--centre {
  justify-self: center;
}

.ht-logo {
  display: inline-flex;
  flex: none;
  gap: 10px;
  align-items: center;
  font-family: var(--ht-display);
  font-size: 25px;
  font-weight: var(--ht-display-weight, 800);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.ht-logo svg {
  margin-top: -2px;
}

.ht-logo img {
  width: auto;
  height: var(--ht-logo-h, 28px);
}

.ht-nav {
  display: flex;
  gap: clamp(16px, 1.9vw, 30px);
}

.ht-nav a {
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono);
  font-weight: 500;
  letter-spacing: var(--ht-ls-mono);
  color: var(--ht-ink-2);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--ht-dur-fast);
}

.ht-nav a:hover,
.ht-nav a[aria-current="page"] {
  color: var(--ht-ink);
}

.ht-header__actions {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-self: end;
}

.ht-header__link {
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono);
  font-weight: 500;
  letter-spacing: var(--ht-ls-mono);
  color: var(--ht-ink-2);
  text-transform: uppercase;
  text-decoration: none;
}

.ht-header__link:hover {
  color: var(--ht-ink);
}

.ht-bag {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  /* The label is small type; the padding is what makes it pressable. The
     negative margin keeps it optically where the design puts it. */
  padding: 12px 0;
  margin: -12px 0;
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono);
  font-weight: 500;
  letter-spacing: var(--ht-ls-mono);
  text-transform: uppercase;
}

.ht-bag__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--ht-ink);
  background: var(--ht-panel);
  border-radius: var(--ht-radius-pill);
  transition:
    background var(--ht-dur) ease,
    color var(--ht-dur) ease,
    transform 0.35s var(--ht-ease);
}

.ht-bag__count.is-filled {
  color: var(--ht-on-accent, #fff);
  background: var(--ht-accent);
}

.ht-bag__count.is-bumped {
  transform: scale(1.25);
}

/* --- Search control ------------------------------------------------------- */

/* Reads as a field before it is one: the label, then whatever the caret is
   currently typing, then the caret itself. */
.ht-search-trigger {
  display: inline-flex;
  gap: 3px;
  align-items: baseline;
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono);
  font-weight: 500;
  letter-spacing: var(--ht-ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ht-search-trigger__typed {
  color: var(--ht-ink-2);
}

.ht-search-trigger__caret {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 12px;
  background: currentcolor;
  translate: 0 1px;
  animation: ht-caret 1.05s steps(1) infinite;
}

@keyframes ht-caret {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-search-trigger__caret {
    animation: none;
  }
}

/* --- Hero ----------------------------------------------------------------- */

.ht-hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--ht-header-h) - var(--ht-announce-h));
  padding: 22px 0;
  overflow: hidden;
}

.ht-hero__head,
.ht-hero__foot {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
}

.ht-hero__foot {
  align-items: center;
}

.ht-hero__head p,
.ht-hero__foot a,
.ht-hero__hint {
  color: var(--ht-ink-2);
}

.ht-hero__foot a {
  text-decoration: none;
}

.ht-hero__foot a:hover {
  color: var(--ht-ink);
}

/* --- Rail ----------------------------------------------------------------- */

.ht-rack {
  position: relative;
  display: grid;

  /* The rows pack together and the group is centred as one, so spare height
     lands above and below the rail rather than between it and the line. */
  place-content: center;
  place-items: center;
  padding: var(--ht-rack-pt) 0 var(--ht-rack-pb);
}

/* The line under the clothes should start and finish where the rail does,
   not where the page's text column does. */
.ht-rack__under {
  width: var(--ht-railw);
  max-width: 100%;
}

/* The wall the rail hangs against. Decorative only: aria-hidden, and never
   carrying anything the page does not say in words elsewhere.

   The scrim is a wash of the room's own colour rather than a dim: dimming
   would push the wall grey and the garments, which are cut out and have no
   background of their own, would lose their edge against it. */
/* The wall is the whole hero, from the top of the page to the rule that ends
   the section. */
.ht-wall {
  position: absolute;
  inset: 0;
  z-index: var(--ht-z-wall);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.ht-wall picture {
  display: contents;
}

.ht-wall img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--ht-wall-focus, 22%);
}

/* Two washes in one layer. The flat one, under, holds the whole picture back
   so cut-out garments keep their edge against it. The graded one, over,
   closes to the room's own colour at the top and bottom, which is where the
   eyebrow, the readout and the footnote sit — they get plain ground to be
   read against without being boxed. The band left open in the middle is
   exactly where the clothes hang. */
.ht-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      var(--ht-wall) 0%,
      transparent 11%,
      transparent 95%,
      var(--ht-wall) 100%
    ),
    color-mix(in srgb, var(--ht-wall) var(--ht-wall-fade, 42%), transparent);
}

/* The quiet grey these are usually set in was chosen against a flat colour;
   on a photograph of a wall it stops being readable. Over a picture they go
   to full ink and let size and face carry the hierarchy instead. */
.ht-hero--walled .ht-hero__head p,
.ht-hero--walled .ht-hero__foot p,
.ht-hero--walled .ht-hero__foot a,
.ht-hero--walled .ht-readout__sub,
.ht-hero--walled .ht-readout__sizes,
.ht-hero--walled .ht-rail-rule span {
  color: var(--ht-ink);
}

/* The rule either side of the label is a hairline, which a shutter's own
   ribbing swallows. */
.ht-hero--walled .ht-rail-rule::before,
.ht-hero--walled .ht-rail-rule::after {
  background: color-mix(in srgb, var(--ht-ink) 38%, transparent);
}

/* The oversized word painted on the wall behind the rail. Decorative only:
   it is aria-hidden and never carries information. */
.ht-wall-word {
  position: absolute;
  top: calc(48px + var(--ht-hang) * 0.52);
  left: 50%;
  z-index: var(--ht-z-wall);
  font-family: var(--ht-display);
  font-size: clamp(180px, 31vw, 560px);
  font-weight: var(--ht-display-weight, 800);
  line-height: 0.76;
  letter-spacing: -0.01em;
  color: var(--ht-paint);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

.ht-rail {
  position: relative;
  z-index: var(--ht-z-rail);
  width: var(--ht-railw);
  height: calc(var(--ht-hang) + 6px);
  /* Vertical page scrolling must keep working over the rail on touch. */
  touch-action: pan-y;
  user-select: none;
}

/* The steel bar. One gradient reads as a round tube under this lighting. */
.ht-rail__bar {
  position: absolute;
  top: 1px;
  right: calc(var(--ht-rail-overhang) * -1);
  left: calc(var(--ht-rail-overhang) * -1);
  z-index: var(--ht-z-railbar);
  height: var(--ht-rail-bar-h);
  background: linear-gradient(
    #fbfbfc 0%,
    #d6d8dc 22%,
    #a3a6ac 48%,
    #7d8087 62%,
    #c9cbcf 84%,
    #eceef0 100%
  );
  border-radius: 5px;
  box-shadow: var(--ht-shadow-rail);
}

.ht-bracket {
  position: absolute;
  top: -12px;
  z-index: var(--ht-z-bracket);
  width: 12px;
  height: 34px;
  background:
    radial-gradient(circle at 50% 22%, #6f727a 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 50% 78%, #6f727a 0 1.6px, transparent 2.2px),
    linear-gradient(90deg, #8b8e95, #f2f3f5 38%, #c2c5ca 64%, #83868d);
  border-radius: 3px;
  box-shadow: 0 4px 8px -2px rgb(20 22 30 / 25%);
}

.ht-bracket--l {
  left: calc((var(--ht-rail-overhang) + 8px) * -1);
}

.ht-bracket--r {
  right: calc((var(--ht-rail-overhang) + 8px) * -1);
}

.ht-hang {
  position: absolute;
  top: 6px;
  left: calc(var(--ht-slot) * var(--ht-i, 0));
  z-index: var(--ht-z-garment);
  display: block;
  width: var(--ht-slot);
  height: var(--ht-hang);
  cursor: pointer;
}

.ht-hang:focus-visible {
  outline-offset: -2px;
}

.ht-hang__swing {
  position: absolute;
  inset: 0;
  perspective: 900px;
  transform-origin: 50% 0;
}

.ht-hang img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: none;
  height: 100%;
  filter: drop-shadow(0 14px 14px rgb(20 22 30 / 14%));
  user-select: none;
  -webkit-user-drag: none;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}

.ht-hang__front {
  opacity: 0;
}

/* Once WebGL has uploaded the textures the same images are drawn on the
   canvas, so the DOM copies are hidden but stay in the accessibility tree. */
.ht-rail.is-gl .ht-hang img {
  visibility: hidden;
}

/* The garment that has flown into the product viewer. */
.ht-hang.is-away img {
  opacity: 0 !important;
}

.ht-rail__canvas {
  position: absolute;
  z-index: var(--ht-z-canvas);
  pointer-events: none;
}

.ht-rail.is-grabbing,
.ht-rail.is-grabbing .ht-hang {
  cursor: grabbing;
}

/* The merchant is editing this garment in the theme editor. */
.ht-hang.is-editing::after {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  border: 1px dashed var(--ht-accent);
}

/* Shown when a rail position has no product or no usable media yet. */
.ht-hang__placeholder {
  position: absolute;
  top: 8%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78%;
  height: 72%;
  padding: 8px;
  font-family: var(--ht-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ht-ink-2);
  text-align: center;
  text-transform: uppercase;
  background: var(--ht-panel);
  border: 1px dashed var(--ht-steel);
  transform: translateX(-50%);
}

/* --- Rule under the rail -------------------------------------------------- */
/* A line that breaks for its own label, so the instruction sits in the
   composition rather than floating under it. Shown with the readout. */

.ht-rail-rule {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
}

/* Only one of the two instructions applies to the device reading this. */
.ht-rail-rule__touch {
  display: none;
}

.ht-rail-rule::before,
.ht-rail-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ht-line);
}

.ht-rail-rule span {
  flex: none;
  font-family: var(--ht-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ht-ink-2);
  text-transform: uppercase;
}

/* --- The readout ---------------------------------------------------------- */
/* The one place the rail describes a piece. It replaced a tag that hung off
   the garment: that only worked where there was a pointer which hovers and
   room beside the piece to hang in, and it put the price somewhere a phone
   could never reach. This sits under the clothes on every screen and says
   more than the tag did. */

.ht-readout {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 78px;
  padding: 12px 0 14px;
}

.ht-readout__text {
  min-width: 0;
}

.ht-readout__brand {
  display: block;
  padding-bottom: 7px;
  font-family: var(--ht-mono);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--ht-accent-text, var(--ht-accent));
  text-transform: uppercase;
}

.ht-readout__name {
  display: block;
  font-family: var(--ht-display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: var(--ht-display-weight, 800);
  line-height: 0.95;
  text-transform: uppercase;
}

.ht-readout__sub {
  display: block;
  padding-top: 7px;
  font-family: var(--ht-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ht-ink-2);
}

/* The price it used to be, kept beside the price it is. */
.ht-readout__sub s {
  margin-left: 6px;
  color: var(--ht-steel);
}

/* Sizes carry their own state: struck is gone, accented is nearly gone. */
.ht-readout__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  padding-top: 7px;
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ht-ink-2);
}

.ht-readout__sizes s {
  color: var(--ht-steel);
}

.ht-readout__sizes b {
  font-weight: 500;
  color: var(--ht-accent-text, var(--ht-accent));
}

.ht-readout .ht-btn {
  flex: none;
  height: var(--ht-control-h-sm);
  padding: 0 18px;
}

/* --- Product grid --------------------------------------------------------- */

/* Sections set `--ht-cols-wide` inline. The column count itself is a second
   property so the breakpoints below can still override it — an inline custom
   property beats any stylesheet rule, which would otherwise pin a phone to
   the desktop column count. */
.ht-grid {
  --ht-cols: var(--ht-cols-wide, 5);

  display: grid;
  grid-template-columns: repeat(var(--ht-cols), 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(14px, 1.6vw, 24px);
}

.ht-card {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.ht-card__art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ht-panel);
  perspective: 900px;
}

/* Product images are prepared on one shared 4:5 frame with the garment
   contained at a fixed scale, so the card simply fills itself. Sizing a
   garment here instead would make a wide tee and a tall jersey land at
   different scales — the frame does the normalising, once, for all of them. */
.ht-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
}

/* The back of the piece, swapped in under the pointer. Both shots are drawn
   on the same frame at the same scale, so the garment does not shift between
   them: the swap reads as turning the piece round rather than as two
   pictures changing place.

   The art is a cut-out, so the back does not cover the front -- the two
   cross over each other, on the same tenth of a second the reference uses,
   which reads as a swap rather than as a fade. */
.ht-card__front,
.ht-card__back {
  transition: opacity 0.1s ease-in-out;
}

.ht-card__back {
  opacity: 0;
}

.ht-card__art--two:hover .ht-card__front,
.ht-card:focus-visible .ht-card__front {
  opacity: 0;
}

.ht-card__art--two:hover .ht-card__back,
.ht-card:focus-visible .ht-card__back {
  opacity: 1;
}

/* Nothing to swap to without a second image, and nothing hovers on a phone:
   the front simply stays. */
@media (hover: none) {
  .ht-card__back {
    display: none;
  }
}

/* A card whose art is an ordinary product photo rather than a cut-out garment
   fills the frame instead of hanging, so the grid never looks broken. */
.ht-card__art--cover::before {
  display: none;
}

.ht-card__art--cover img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.ht-card__art--empty {
  display: grid;
  place-items: center;
}

.ht-card__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
}

.ht-card__name {
  font-size: 15px;
  font-weight: 500;
}

.ht-card__price {
  font-family: var(--ht-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.ht-card__price s {
  margin-right: 6px;
  color: var(--ht-steel);
}

.ht-card__sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ht-ink-2);
}

.ht-card__sold {
  color: var(--ht-steel);
}

.ht-card:hover .ht-card__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- The feed ------------------------------------------------------------- */

.ht-feed__handle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--ht-accent-text, var(--ht-accent));
  text-decoration: none;
  text-underline-offset: 3px;
}

.ht-feed__handle:hover {
  text-decoration: underline;
}

.ht-feed__lead {
  max-width: 34ch;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--ht-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: var(--ht-display-weight, 800);
  line-height: 1.04;
  text-transform: uppercase;
}

/* The strip runs off both edges rather than stopping at the text column: a
   feed carries on past the window, and seeing a post cut by the edge is what
   says there are more of them. The gutter is re-applied as padding so the
   first and last posts still line up with everything else. */
.ht-feed__strip {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(26px, 3vw, 44px) var(--ht-gutter) 4px;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;

  /* Snapping aligns a post to the edge of the scroll area, which would pull
     the first one out under the gutter; this keeps the strip starting on the
     same line as the heading above it. */
  scroll-padding-left: var(--ht-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ht-feed__strip::-webkit-scrollbar {
  display: none;
}

.ht-feed__strip:focus-visible {
  outline: 2px solid var(--ht-accent);
  outline-offset: -4px;
}

.ht-feed__item {
  flex: 0 0 auto;
  width: clamp(200px, 21vw, 300px);
  scroll-snap-align: start;
}

.ht-feed__post {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ht-panel);
}

.ht-feed__post img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-feed__post--empty {
  display: grid;
  place-items: center;
}

/* The caption is the post's own words, so it stays out of the way until the
   post is asked about. */
.ht-feed__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 14px 12px;
  font-family: var(--ht-mono);
  font-size: 11px;
  letter-spacing: var(--ht-ls-mono);
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgb(16 17 21 / 72%));
  opacity: 0;
  transition: opacity var(--ht-dur-fast) var(--ht-ease);
}

.ht-feed__go {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ht-ink);
  background: var(--ht-accent);
  opacity: 0;
  transition: opacity var(--ht-dur-fast) var(--ht-ease), translate var(--ht-dur-fast) var(--ht-ease);
  translate: 6px -6px;
}

.ht-feed__post:hover .ht-feed__caption,
.ht-feed__post:focus-visible .ht-feed__caption,
.ht-feed__post:hover .ht-feed__go,
.ht-feed__post:focus-visible .ht-feed__go {
  opacity: 1;
}

.ht-feed__post:hover .ht-feed__go,
.ht-feed__post:focus-visible .ht-feed__go {
  translate: 0 0;
}

/* --- FAQ ------------------------------------------------------------------ */

/* Column flow rather than a grid: a grid row is as tall as its tallest cell,
   so four groups of different lengths left a hole under the short one. These
   fill the first column and carry on into the second, and a group is kept
   whole so a question never lands in a different column from its heading. */
.ht-faq__cols {
  margin-top: clamp(8px, 1.5vw, 20px);
  columns: 2;
  column-gap: clamp(32px, 4vw, 72px);
}

.ht-faq__group {
  display: block;
  margin-bottom: clamp(28px, 3.5vw, 52px);
  break-inside: avoid;
}

.ht-faq__group:last-child {
  margin-bottom: 0;
}

.ht-faq__label {
  padding-bottom: 14px;
  font-family: var(--ht-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--ht-steel);
  text-transform: uppercase;
}

/* The closing line sits apart from the questions: it is the way out of the
   list, not another item in it. */
.ht-faq__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: var(--ht-border);
}

.ht-faq__ask {
  font-family: var(--ht-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: var(--ht-display-weight, 800);
  line-height: 1;
  text-transform: uppercase;
}

.ht-faq__ways {
  font-family: var(--ht-mono);
  font-size: var(--ht-fs-mono);
  letter-spacing: var(--ht-ls-mono);
  text-transform: uppercase;
}

.ht-faq__ways a {
  color: var(--ht-accent-text, var(--ht-accent));
  text-underline-offset: 3px;
}

/* --- Help ----------------------------------------------------------------- */

.ht-help {
  border-top: var(--ht-border);
}

.ht-help details {
  border-bottom: var(--ht-border);
}

.ht-help summary {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: var(--ht-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: var(--ht-display-weight, 800);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.ht-help summary::-webkit-details-marker {
  display: none;
}

.ht-help summary::after {
  content: "+";
  font-family: var(--ht-mono);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--ht-dur) var(--ht-ease);
}

.ht-help details[open] summary::after {
  transform: rotate(45deg);
}

.ht-help__body {
  max-width: 60ch;
  padding: 0 0 20px;
  font-size: 14.5px;
  color: var(--ht-ink-2);
}

.ht-help__body a {
  color: var(--ht-accent-text, var(--ht-accent));
}

/* --- Footer -------------------------------------------------------------- */

.ht-foot {
  padding-top: clamp(56px, 7vw, 96px);
  overflow: hidden;
  border-top: var(--ht-border);
}

.ht-foot__grid {
  display: grid;
  grid-template-columns: var(--ht-foot-tracks, minmax(280px, 1.6fr) repeat(3, minmax(120px, 1fr)));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.ht-foot__heading {
  margin-bottom: 16px;
  font-family: var(--ht-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ht-ink);
  text-transform: uppercase;
}

.ht-foot__signup-copy {
  max-width: 42ch;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ht-ink-2);
}

/* An underline, not a box: the field should read as a line to write on. */
.ht-signup {
  display: flex;
  gap: 16px;
  align-items: center;
  max-width: 420px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ht-ink);
}

.ht-signup__field {
  flex: 1;
  min-width: 0;
  padding: 0;
  font-size: 14px;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
}

.ht-signup__field::placeholder {
  color: var(--ht-steel);
}

.ht-signup__submit {
  flex: none;
  font-family: var(--ht-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ht-signup__submit:hover {
  color: var(--ht-accent-text, var(--ht-accent));
}

.ht-foot__note {
  min-height: 16px;
  margin-top: 10px;
  font-family: var(--ht-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ht-ink-2);
}

.ht-foot__note.is-ok {
  color: var(--ht-ok);
}

.ht-foot__note.is-error {
  color: var(--ht-warn);
}

.ht-foot__consent {
  max-width: 44ch;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ht-ink-2);
}

.ht-foot__col ul {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ht-foot__col li a {
  font-size: 14px;
  color: var(--ht-ink);
  text-decoration: none;
}

.ht-foot__col li a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ht-foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 56px);
}

.ht-foot__locale {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ht-foot__locale .ht-foot__heading {
  margin-bottom: 0;
}

.ht-foot__locale select {
  height: 30px;
  padding: 0 6px;
  font-family: var(--ht-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: var(--ht-border);
  border-radius: 0;
}

.ht-foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.ht-foot__social a {
  font-family: var(--ht-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ht-ink);
  text-transform: uppercase;
  text-decoration: none;
}

.ht-foot__social a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The wordmark runs the full width of the page, outside the gutter, and is
   allowed to bleed off both edges rather than being letter-spaced to fit. */
.ht-foot__word {
  margin: clamp(36px, 5vw, 72px) 0 0;
  font-family: var(--ht-display);
  font-size: var(--ht-wordmark-size, 17vw);
  font-weight: var(--ht-display-weight, 800);
  padding-bottom: 0.11em;
  line-height: 0.78;
  letter-spacing: -0.012em;
  color: var(--ht-ink);
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
}

.ht-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 28px;
  font-size: 12px;
  color: var(--ht-ink-2);
}

.ht-foot__legal a {
  color: var(--ht-ink-2);
}

.ht-foot__legal a:hover {
  color: var(--ht-ink);
}

/* --- Responsive ----------------------------------------------------------- */
/* Two breakpoints only, matching the reference: the catalogue thins out at
   1100px, and at 760px the page switches to its touch composition. */

@media screen and (max-width: 1100px) {
  .ht-grid {
    --ht-cols: 3;
  }
}

@media screen and (max-width: 760px) {
  /* Only the first announcement survives; squeezing three into 360px is
     unreadable, so the rest are dropped rather than truncated. */
  .ht-nav,
  .ht-header__link--desktop,
  .ht-search-trigger__typed {
    display: none;
  }

  .ht-header__in {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .ht-search-trigger {
    justify-self: end;
  }

  .ht-hero {
    min-height: calc(100svh - var(--ht-header-h) - var(--ht-announce-h));
    padding-top: 16px;
  }

  .ht-hero__head p:last-child {
    display: none;
  }

  /* The word is the wall behind the rail, so it comes down with it: at the
     old size it was taller than the clothes it was meant to sit behind. */
  .ht-wall-word {
    top: calc(40px + var(--ht-hang) * 0.5);
    font-size: 30vw;
  }

  .ht-hero__foot {
    justify-content: center;
  }

  .ht-grid {
    --ht-cols: 2;
  }

  .ht-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ht-news__grid {
    grid-template-columns: 1fr;
  }

  .ht-faq__cols {
    columns: 1;
  }

  /* On a phone a post takes most of the width, so the next one shows at the
     edge and the strip reads as something you push along. */
  .ht-feed__item {
    width: 62vw;
  }

  .ht-foot__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ht-foot__signup {
    grid-column: 1 / -1;
  }

  .ht-foot__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Grid children default to a min-width of auto, which lets a long word or a
   wide input push a column past the page. */
.ht-news__grid > *,
.ht-foot__grid > * {
  min-width: 0;
}

/* Narrow phones: the signup stacks instead of squeezing the field down to
   nothing beside the button. */
@media screen and (max-width: 440px) {
  .ht-news__form {
    flex-wrap: wrap;
  }

  .ht-news__form .ht-field {
    flex: 1 1 100%;
  }

  .ht-news__form .ht-btn {
    width: 100%;
  }
}

/* Very narrow phones: keep two columns but tighten the gutters rather than
   collapsing to one, which would make the drop feel endless. */
@media screen and (max-width: 380px) {
  .ht-grid {
    gap: 28px 10px;
  }
}

/* --- Tag or readout ------------------------------------------------------- */
/* Where there is no pointer that can hover, the instruction changes and the
   page's own hint -- which talks about hovering -- is not advice anyone here
   can act on. */

@media screen and (max-width: 900px), (hover: none), (pointer: coarse) {
  .ht-rail-rule__pointer,
  .ht-hero__hint {
    display: none;
  }

  .ht-rail-rule__touch {
    display: block;
  }
}