/* ==========================================================================
   Saint Society Scrubs - Components
   --------------------------------------------------------------------------
   The React build expressed these as Tailwind utility strings on each JSX
   element. There is no Tailwind here, so each component that used to be a
   utility soup is written out once as a real class. Values are lifted from
   the original components so the two builds render the same.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   solid  - accent fill, ink text. The single primary action on a view.
   ghost  - hairline outline. Secondary actions.
   quiet  - underlined text. Tertiary, inline.
   Accent fill is rationed: one solid button per viewport is the rule.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  user-select: none;
  min-height: 2.75rem;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-nav);
  padding: 0.875rem 2rem;
  border: 1px solid transparent;
  text-align: center;
  transition: background-color var(--duration-quick) var(--ease-luxe),
    border-color var(--duration-quick) var(--ease-luxe),
    color var(--duration-quick) var(--ease-luxe);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

.btn--lg {
  font-size: var(--text-small);
  padding: 1rem 2.75rem;
}

.btn--sm {
  padding: 0.625rem 1.25rem;
  min-height: 2.25rem;
}

/* The deep wine is near black, so the solid button carries a lighter hairline
   or it disappears into the ground entirely. */
.btn--solid {
  background: var(--color-accent-solid);
  color: var(--color-ink);
  font-weight: 500;
  border-color: #5c1a1e;
}

.btn--solid:hover {
  background: var(--color-accent-solid-hover);
  border-color: #7a2328;
}

.btn--ghost {
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
  font-weight: 400;
}

.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.btn--on-light {
  border-color: rgba(11, 10, 9, 0.28);
  color: var(--color-onyx);
  font-weight: 400;
}

.btn--on-light:hover {
  border-color: var(--color-onyx);
}

.btn--quiet {
  color: var(--color-ink-muted);
  font-weight: 400;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0.25rem 0;
  min-height: 0;
}

.btn--quiet:hover {
  color: var(--color-gold-light);
  border-bottom-color: var(--color-rule-gold);
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Wordmark lockup
   Serif caps, very wide tracking, descriptor set smaller beneath. Sizes are
   self contained so the same markup serves header, footer and loader.
   -------------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7em;
}

.lockup--stacked {
  flex-direction: column;
  gap: 0.75em;
}

.lockup__mark {
  flex: none;
  width: 26px;
}

.lockup__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.lockup__name {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
}

.lockup__sub {
  font-size: 0.44rem;
  letter-spacing: 0.34em;
  margin-top: 0.5em;
  color: var(--color-ink-muted);
}

.lockup--md .lockup__mark {
  width: 34px;
}
.lockup--md .lockup__name {
  font-size: 1.05rem;
}
.lockup--md .lockup__sub {
  font-size: 0.55rem;
  letter-spacing: 0.42em;
}

.lockup--lg .lockup__mark {
  width: 62px;
}
.lockup--lg .lockup__name {
  font-size: 1.9rem;
}
.lockup--lg .lockup__sub {
  font-size: 0.95rem;
  letter-spacing: 0.5em;
}

/* --------------------------------------------------------------------------
   Header
   Transparent over the homepage hero at the very top, solid once scrolled or
   on any inner page. The `is-scrolled` and `over-hero` classes are toggled in
   theme.js from an IntersectionObserver, not a scroll handler.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(11, 10, 9, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-luxe),
    border-color var(--duration-base) var(--ease-luxe);
}

.site-header.over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-rule);
}

.site-header__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__side {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2rem;
}

.site-header__side--end {
  justify-content: flex-end;
  gap: 1.25rem;
}

.site-header__brand {
  flex: none;
}

.nav-primary ul,
.nav-secondary ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-primary a,
.nav-secondary a {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  color: var(--color-ink);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.nav-primary a:hover,
.nav-secondary a:hover {
  color: var(--color-gold-light);
}

.nav-primary .current-menu-item > a,
.nav-secondary .current-menu-item > a,
.nav-primary .current_page_item > a,
.nav-secondary .current_page_item > a {
  color: var(--color-gold);
}

.icon-btn {
  position: relative;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color var(--duration-quick) var(--ease-luxe);
}

.icon-btn:hover {
  color: var(--color-gold-light);
}

.icon-btn__count {
  position: absolute;
  right: 0.125rem;
  top: 0.25rem;
  display: flex;
  height: 1rem;
  min-width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  padding-inline: 0.25rem;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-onyx);
}

.icon-btn__dot {
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  display: block;
  height: 1px;
  width: 1.5rem;
  background: currentColor;
}

.burger span:last-child {
  width: 1rem;
}

.header-toggle {
  margin-left: -0.75rem;
}

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

@media (max-width: 1023px) {
  .nav-primary,
  .nav-secondary {
    display: none;
  }
}

@media (max-width: 639px) {
  .icon-btn--wishlist {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Overlays: mobile menu, search, cart drawer
   All three share the scrim and the same easing. Closed state is a transform
   so nothing animates layout.
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 5, 5, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-quick) linear,
    visibility 0s linear var(--duration-quick);
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-quick) linear, visibility 0s;
}

.panel {
  position: fixed;
  z-index: 100;
  background: var(--color-onyx-raised);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-luxe),
    visibility 0s linear var(--duration-base);
  visibility: hidden;
}

.panel.is-open {
  visibility: visible;
  transition: transform var(--duration-base) var(--ease-luxe), visibility 0s;
}

/* Cart drawer, right */
.panel--cart {
  inset-block: 0;
  right: 0;
  width: min(30rem, 100vw);
  transform: translateX(100%);
  border-left: 1px solid var(--color-rule);
}

.panel--cart.is-open {
  transform: translateX(0);
}

/* Mobile menu, left */
.panel--menu {
  inset-block: 0;
  left: 0;
  width: min(24rem, 88vw);
  transform: translateX(-100%);
  border-right: 1px solid var(--color-rule);
}

.panel--menu.is-open {
  transform: translateX(0);
}

/* Search, drops from the top */
.panel--search {
  inset-inline: 0;
  top: 0;
  transform: translateY(-100%);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2.5rem;
}

.panel--search.is-open {
  transform: translateY(0);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--spacing-gutter);
  border-bottom: 1px solid var(--color-rule);
  flex: none;
}

.panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem var(--spacing-gutter);
}

.panel__foot {
  flex: none;
  border-top: 1px solid var(--color-rule);
  padding: 1.5rem var(--spacing-gutter);
}

.panel__close {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-right: -0.75rem;
  transition: color var(--duration-quick) var(--ease-luxe);
}

.panel__close:hover {
  color: var(--color-gold-light);
}

.menu-list {
  display: flex;
  flex-direction: column;
}

.menu-list a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.menu-list a:hover {
  color: var(--color-gold-light);
}

/* Search field */
.search-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-rule-strong);
  padding-bottom: 0.75rem;
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

.search-field:focus-within {
  border-bottom-color: var(--color-gold);
}

.search-field input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--color-ink);
}

.search-field input:focus {
  outline: none;
}

.search-field input::placeholder {
  color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   Product card
   Second image cross fades in on hover. Colour dots swap the card image with
   no navigation. No star ratings, no review counts: that absence is
   deliberate and came out of the category research.
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-onyx-raised);
  aspect-ratio: 4 / 5;
}

.product-card__media img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.product-card__media img:first-child {
  transition: transform 1200ms var(--ease-luxe);
}

.product-card:hover .product-card__media img:first-child {
  transform: scale(1.04);
}

.product-card__media img + img {
  opacity: 0;
  transition: opacity 900ms var(--ease-luxe);
}

.product-card:hover .product-card__media img + img {
  opacity: 1;
}

.product-card__badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: rgba(11, 10, 9, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.375rem 0.75rem;
  color: var(--color-gold-light);
}

.product-card__wish {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 10;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.product-card__wish:hover {
  color: var(--color-gold-light);
}

.product-card__wish[aria-pressed='true'] svg {
  fill: var(--color-gold);
  stroke: var(--color-gold);
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 1.25rem;
}

.product-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: 1.28;
  color: var(--color-ink);
}

.product-card__name a:hover {
  color: var(--color-gold-light);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.product-card__price {
  flex: none;
  margin-top: 1.5rem;
  font-size: var(--text-body);
}

.product-card__swatches {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Colour swatch. The ring, not a border, so the dot size never shifts. */
.swatch {
  position: relative;
  display: block;
  height: 16px;
  width: 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 225, 216, 0.28);
  transition: box-shadow var(--duration-quick) var(--ease-luxe);
}

.swatch.is-selected {
  box-shadow: 0 0 0 1px var(--color-onyx), 0 0 0 2px var(--color-gold);
}

/* The button around the dot. WCAG 2.2 wants a 24px target, and a 24px dot
   reads as a bauble rather than a colour chip, so the target is the button
   and the dot stays 16. */
.swatch-btn {
  display: flex;
  height: 24px;
  width: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
}

.swatch-btn--lg {
  height: 34px;
  width: 34px;
}

.swatch-btn[aria-pressed='true'] .swatch {
  box-shadow: 0 0 0 1px var(--color-onyx), 0 0 0 2px var(--color-gold);
}

.swatch--lg {
  height: 26px;
  width: 26px;
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem) clamp(0.75rem, 1.6vw, 1.5rem);
}

@media (min-width: 900px) {
  .grid-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .grid-products--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid-split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .grid-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Hero
   The parallax is a CSS scroll driven animation rather than a scroll handler.
   Browsers without scroll timelines get a still hero, which is a fair
   degradation for a background image.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim);
}

.hero__body {
  position: relative;
  z-index: 10;
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
  padding-top: var(--header-h);
}

.hero__title {
  margin-top: 1.5rem;
  max-width: 16ch;
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 46ch;
  color: var(--color-bone-dim);
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero {
      view-timeline: --hero block;
    }

    .hero__media {
      animation: hero-drift linear both;
      animation-timeline: --hero;
      animation-range: entry 0% exit 100%;
    }

    .hero__body {
      animation: hero-fade linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 80%;
    }
  }
}

@keyframes hero-drift {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(18%) scale(1.12);
  }
}

@keyframes hero-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Replaces the Framer Motion `rise` / `stagger` / `settleImage` variants with
   the same durations and the same cubic-bezier, driven by an
   IntersectionObserver in theme.js.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-luxe), transform 900ms var(--ease-luxe);
}

.reveal--small {
  transform: translateY(18px);
}

.reveal--small.is-in {
  transition-duration: 700ms;
}

.reveal--fade {
  transform: none;
}

.reveal--fade.is-in {
  transition-duration: 1100ms;
}

/* The photograph coming into focus: a slow scale down from a slight zoom. */
.reveal--settle {
  transform: scale(1.08);
}

.reveal--settle.is-in {
  transform: none;
  transition-duration: 1400ms;
}

/* The line that draws itself. For accent rules and dividers. */
.reveal--line {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.reveal--line.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1200ms var(--ease-drape), transform 1200ms var(--ease-drape);
}

/* Editorial cascade. Children release one after another. */
.stagger > * {
  opacity: 0;
  transform: translateY(34px);
}

.stagger.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-luxe), transform 900ms var(--ease-luxe);
}

.stagger.is-in > *:nth-child(1) { transition-delay: 80ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 200ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 320ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 440ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 560ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 680ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Editorial blocks used across the marketing pages
   -------------------------------------------------------------------------- */
.figure-frame {
  position: relative;
  overflow: hidden;
}

.figure-frame img {
  width: 100%;
  object-fit: cover;
}

.figure-frame--tall {
  aspect-ratio: 4 / 5;
}

.figure-frame--wide {
  aspect-ratio: 16 / 10;
}

.scrim-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim-soft);
}

.quote {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: 1.24;
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
}

.stat-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--color-rule);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--color-ink);
}

.stat__label {
  margin-top: 0.5rem;
}

/* Accordion, used on the product page and the fit guide */
.accordion__item {
  border-bottom: 1px solid var(--color-rule);
}

.accordion__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  transition: color var(--duration-quick) var(--ease-luxe);
}

.accordion__trigger:hover {
  color: var(--color-gold-light);
}

.accordion__sign {
  flex: none;
  color: var(--color-gold);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 300ms var(--ease-luxe);
}

.accordion__trigger[aria-expanded='true'] .accordion__sign {
  transform: rotate(45deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-luxe);
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__trigger[aria-expanded='true'] + .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel .accordion__inner {
  padding-bottom: 1.5rem;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Forms
   Label above input, hairline underline rather than a boxed field.
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label,
.field > .label {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.75rem 0;
  color: var(--color-ink);
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-ink-faint);
}

.field__help {
  font-size: var(--text-eyebrow);
  color: var(--color-ink-faint);
}

.field__error {
  font-size: var(--text-eyebrow);
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule);
  background: var(--color-onyx-sunken);
}

.footer-newsletter {
  border-bottom: 1px solid var(--color-rule);
}

.footer-newsletter__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 1024px) {
  .footer-newsletter__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 5rem;
  }
}

.footer-cols {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-cols {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.footer-col h3 {
  margin-bottom: 1.25rem;
  color: var(--color-ink);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col a {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.footer-col a:hover {
  color: var(--color-gold-light);
}

.footer-brand p {
  margin-top: 1.5rem;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 20rem;
}

.footer-base {
  border-top: 1px solid var(--color-rule);
}

.footer-base__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-base__inner {
    flex-direction: row;
    text-align: left;
  }
}

.footer-base__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.legal {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   Page head, used by every inner page that is not the homepage
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.page-head h1 {
  margin-top: 1.25rem;
  max-width: 18ch;
}

.page-head .t-lead {
  margin-top: 1.5rem;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Notices, empty states
   -------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-gold);
  background: var(--color-onyx-raised);
  padding: 1rem 1.25rem;
  font-size: var(--text-small);
  color: var(--color-ink);
}

.empty-state {
  border: 1px dashed var(--color-rule-strong);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}

.empty-state h2 {
  margin-bottom: 0.75rem;
}

.empty-state p {
  margin-inline: auto;
  margin-bottom: 1.75rem;
  max-width: 44ch;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Small utilities the templates lean on. Deliberately few: this is not a
   utility framework, just the handful that earn their place.
   -------------------------------------------------------------------------- */
.flow > * + * {
  margin-top: var(--flow, 1.5rem);
}

/* --------------------------------------------------------------------------
   Homepage sections
   -------------------------------------------------------------------------- */

/* The scroll cue under the hero. A hairline that breathes rather than a
   bouncing chevron. */
.hero__cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.hero__cue span {
  display: block;
  height: 2.5rem;
  width: 1px;
  transform-origin: top;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: cue-breathe 2400ms ease-in-out infinite;
}

@keyframes cue-breathe {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.3;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.hero__statement {
  display: block;
}

/* Marquee. The row is printed twice and the track moves by exactly half its
   width, so the loop is seamless with no measuring in JS. */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
  padding-block: 1.25rem;
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.marquee__pip {
  height: 4px;
  width: 4px;
  rotate: 45deg;
  background: var(--color-gold-deep);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

  .hero__cue span {
    animation: none;
  }
}

/* The belief statement */
.manifesto {
  margin: 2rem auto 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.18;
  color: var(--color-ink);
}

.manifesto__rule {
  margin: 2.5rem auto 0;
  width: 6rem;
}

/* Section heading block: eyebrow, title, and a quiet link on the far side. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-head h2,
.section-head__title {
  margin-top: 1.25rem;
}

.section-head__cta {
  margin-top: 2.25rem;
}

.section-head--centred {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.measure {
  margin-top: 1.5rem;
  max-width: 46ch;
}

/* A full width band in the raised ground */
.band {
  border-block: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
}

.band__head {
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  max-width: 42ch;
}

/* The three column argument. The 1px gap is the border showing through, which
   is how the hairline grid is drawn without doubled borders. */
.gap-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  background: var(--color-rule);
}

@media (min-width: 768px) {
  .gap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gap-card {
  background: var(--color-onyx);
  padding: clamp(1.75rem, 4vw, 2.25rem);
}

.gap-card__number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
}

.gap-card h3 {
  margin-top: 1.25rem;
}

.gap-card p {
  margin-top: 0.75rem;
}

/* Craft detail grid */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .craft-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.craft-card__frame {
  display: block;
  overflow: hidden;
}

.craft-card__frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1100ms var(--ease-luxe);
}

.craft-card:hover .craft-card__frame img,
.journal-tease:hover .craft-card__frame img {
  transform: scale(1.05);
}

.craft-card figcaption {
  margin-top: 1rem;
}

.craft-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-ink);
}

.craft-card figcaption p {
  margin-top: 0.25rem;
}

/* Beauty cross sell strip */
.beauty-strip {
  display: grid;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .beauty-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.beauty-strip__media {
  position: relative;
  min-height: 42vh;
}

@media (min-width: 1024px) {
  .beauty-strip__media {
    min-height: 68vh;
  }
}

.beauty-strip__media img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.beauty-strip__body {
  display: flex;
  align-items: center;
  background: var(--color-espresso-deep);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}

/* Journal teasers */
.journal-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.journal-tease__frame img {
  aspect-ratio: 3 / 2;
}

.journal-tease__tag {
  display: block;
  margin-top: 1.25rem;
}

.journal-tease__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.journal-tease:hover .journal-tease__title {
  color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   Marketing pages
   -------------------------------------------------------------------------- */

/* A centred banner at the top of an inner page. Same job as .page-head, but
   ruled off and centred rather than left aligned. */
.page-banner {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  border-bottom: 1px solid var(--color-rule);
}

.page-banner--top {
  padding-top: var(--spacing-section-tight);
  border-bottom: 0;
  border-top: 1px solid var(--color-rule);
}

.page-banner__title {
  margin-top: 1.5rem;
  max-width: 20ch;
}

.page-banner__lead {
  margin-top: 1.25rem;
  max-width: 52ch;
}

.section-tight--no-top {
  padding-top: 0;
}

/* A full bleed image hero on a story page, centred rather than bottom set. */
.story-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70vh;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
}

.story-hero__media {
  position: absolute;
  inset: 0;
}

.story-hero__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.story-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim-soft), rgba(11, 10, 9, 0.55);
}

.story-hero__body {
  position: relative;
  z-index: 10;
  padding-top: var(--header-h);
}

.story-hero__title {
  margin-top: 1.5rem;
  max-width: 18ch;
}

.story-hero__title .foil {
  display: block;
}

/* The opening statement on a story page: display type, but not a heading. */
.lede {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: var(--color-ink);
}

.two-col {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pull-quote {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.4;
}

.panel-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.story-panel__frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  transition: border-color var(--duration-quick) var(--ease-luxe);
}

.story-panel__frame:hover {
  border-color: var(--color-rule-gold);
}

.story-panel__frame img {
  width: 100%;
  transition: transform 1100ms var(--ease-luxe);
}

.story-panel__frame:hover img {
  transform: scale(1.02);
}

.story-panel__caption {
  margin-top: 1rem;
}

.story-panel__sub {
  display: block;
  margin-top: 0.375rem;
}

.trio-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .trio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trio-grid__body {
  margin-top: 0.75rem;
}

/* Size chart. The wrapper scrolls, never the page. */
.size-table {
  overflow-x: auto;
  border: 1px solid var(--color-rule);
}

.size-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}

.size-table th,
.size-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.size-table tbody tr:last-child th,
.size-table tbody tr:last-child td {
  border-bottom: 0;
}

.size-table__size {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-ink);
}

.table-head {
  margin-bottom: 2rem;
}

.table-note {
  margin-top: 1rem;
}

/* A list of short labelled notes, ruled in the accent. */
.rule-list {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rule-list__item {
  border-left: 1px solid var(--color-rule-gold);
  padding-left: 1.25rem;
}

.rule-list__item p {
  margin-top: 0.5rem;
}

.care-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

.care-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.care-list__row {
  display: grid;
  gap: 0.5rem;
  border-left: 1px solid var(--color-rule-gold);
  padding-left: 1.25rem;
}

@media (min-width: 640px) {
  .care-list__row {
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    border-left: 0;
    padding-left: 0;
  }
}

/* A link inside a paragraph needs more than colour to be findable. The accent
   against muted body copy is only 1.49:1, well under the 3:1 WCAG asks for
   when colour is the only signal, so these carry an underline. */
/* The :not(.btn) is load bearing. .article-body a is one class plus an
   element, which outranks the single class on .btn--solid, so without it the
   accent link colour silently repaints the button label and drops it to
   4.26:1 on its own background. */
.care-list__row a:not(.btn),
.article-body a:not(.btn),
.page-content a:not(.btn) {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-rule-gold);
  transition: color var(--duration-quick) var(--ease-luxe),
    text-decoration-color var(--duration-quick) var(--ease-luxe);
}

.care-list__row a:not(.btn):hover,
.article-body a:not(.btn):hover,
.page-content a:not(.btn):hover {
  color: var(--color-gold-light);
  text-decoration-color: var(--color-gold-light);
}

.grid-split--top {
  align-items: start;
}

.contact {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
}

.contact-details {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-details dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
}

.contact-details a {
  transition: color var(--duration-quick) var(--ease-luxe);
}

.contact-details a:hover {
  color: var(--color-gold-light);
}

.contact-panel {
  border: 1px solid var(--color-rule);
  background: var(--color-onyx-raised);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.enquiry-form p {
  margin: 0;
}

.enquiry-form__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .enquiry-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.enquiry-form textarea {
  resize: vertical;
}

.enquiry-form__actions .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .enquiry-form__actions .btn {
    width: auto;
    padding-inline: 3.5rem;
  }
}

.closing-cta {
  border-top: 1px solid var(--color-rule);
}

.closing-cta__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Article */
.article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 58vh;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
}

.article-hero__media {
  position: absolute;
  inset: 0;
}

.article-hero__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.article-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim);
}

.article-hero__body {
  position: relative;
  z-index: 10;
  padding-top: var(--header-h);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.article-hero__title {
  margin-top: 1.5rem;
  max-width: 24ch;
}

.article-hero__meta {
  margin-top: 1.25rem;
  color: var(--color-bone-dim);
}

.article-body p {
  font-size: var(--text-lead);
  line-height: 1.85;
  color: var(--color-bone-dim);
}

.article-body p + p {
  margin-top: 1.75rem;
}

/* The drop cap, on the first paragraph only. */
.article-body > p:first-of-type::first-letter {
  float: left;
  margin-right: 0.75rem;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--color-gold);
}

.article-body__rule {
  margin-block: clamp(2.5rem, 6vw, 3.5rem);
}

.article-more {
  border-top: 1px solid var(--color-rule);
}

.article-more__title {
  margin-bottom: 2.5rem;
}

.journal-grid--two {
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .journal-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 404 */
.error-404 {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-top: var(--header-h);
}

.error-404__mark {
  opacity: 0.5;
}

.error-404__code {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1;
}

.error-404__lead {
  margin-top: 1.5rem;
  max-width: 40ch;
}

.error-404__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.wishlist {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  min-height: 70vh;
}

.wishlist .grid-products[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Chrome additions the port needed
   -------------------------------------------------------------------------- */

/* The observer target for the transparent header. One pixel, no layout
   impact. It sits between the header and the hero, so while it is on screen
   the page has not scrolled past the top of the hero. */
#hero-sentinel {
  height: 1px;
  margin-bottom: -1px;
}

/* Journal card. Same 4:5 frame as a product card, editorial body. */
.journal-card__body {
  padding-top: 1.25rem;
}

.journal-card__body .t-heading {
  margin-top: 0.75rem;
}

.journal-card__body .t-heading a {
  transition: color var(--duration-quick) var(--ease-luxe);
}

.journal-card__body .t-heading a:hover {
  color: var(--color-gold-light);
}

.journal-card__body p {
  margin-top: 0.75rem;
}

/* Pagination, WordPress markup */
.pagination {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--color-rule);
  padding-top: 2rem;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.pagination .page-numbers {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-muted);
  transition: color var(--duration-quick) var(--ease-luxe);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--color-gold);
}

.footer-newsletter__submit {
  flex: none;
  padding-block: 0.5rem;
  transition: color var(--duration-quick) var(--ease-luxe);
}

.footer-newsletter__submit:hover {
  color: var(--color-gold-light);
}

/* The newsletter reuses .search-field, which sets the display serif for the
   search overlay. In the footer it is a plain input. */
.footer-newsletter__form .search-field input {
  font-family: var(--font-body);
  font-size: var(--text-lead);
}

.text-center { text-align: center; }
.text-ink { color: var(--color-ink); }
.text-muted { color: var(--color-ink-muted); }
.text-faint { color: var(--color-ink-faint); }
.text-gold { color: var(--color-gold); }
.mx-auto { margin-inline: auto; }
.mt-auto { margin-top: auto; }
.hide-mobile { display: none; }

@media (min-width: 768px) {
  .hide-mobile { display: revert; }
  .hide-desktop { display: none; }
}