/* ==========================================================================
   Ellah Fashion — "Redefining Elegance, Everyday."
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens
     2.  Reset & base (includes the square-corner reset)
     3.  Skip link
     4.  Brand lockup
     5.  Buttons
     6.  Hero
     7.  Category sections (the three feature cards)
     8.  Footer
     9.  Toast (clipboard feedback)
    10.  Entrance animation
    11.  Responsive tweaks
    12.  FAQ page (faq.html)
    13.  About page (about.html)
    14.  Reduced motion & print
   ========================================================================== */

/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Brand — the logo is a vector trace of ELLAH LOGO GOLD.pdf and uses one
     flat gold, so the whole palette is built around that single hue. */
  --gold: #c99c14;              /* logo gold — rules, borders, button fill      */
  --gold-strong: #8a6a0c;       /* gold for small text (4.8:1 on --bg)          */
  --gold-tint: #faf3e0;         /* soft gold wash (highlights, hover states)    */

  /* Text */
  --ink: #16161a;               /* headings                                    */
  --ink-body: #55555f;          /* paragraphs (7.0:1 on --bg)                   */
  --ink-muted: #6b6b74;         /* copyright (5.0:1 on --bg)                    */

  /* Surfaces & lines */
  --bg: #fbf9f5;                /* warm ivory page background                   */
  --surface: #ffffff;           /* cards, header bar, footer                    */
  --surface-invert: #16161a;    /* toast                                        */
  --line: #e9e3d7;              /* hairline rules                               */
  --line-strong: #d8cfbc;       /* card borders                                 */

  /* Type */
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Shape & motion — the brand uses square corners sitewide (enforced by the
     global reset in section 2, exposed here as a token for one-off use). */
  --radius: 0;
  --shadow-card: 0 1px 2px rgba(22, 22, 26, 0.04), 0 12px 28px rgba(22, 22, 26, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(22, 22, 26, 0.05), 0 18px 40px rgba(22, 22, 26, 0.1);
  --shadow-toast: 0 14px 34px rgba(22, 22, 26, 0.22);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Square corners everywhere — buttons, cards, links, media and any form
     control added later — so nothing can re-introduce a rounded edge. */
  border-radius: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-strong);
  outline-offset: 3px;
}

/* Available to screen readers, invisible on screen (section headings that
   exist only to label a landmark). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 3. Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  padding: 0.65rem 1.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--ink);
  border-radius: var(--radius);
  transform: translateY(-250%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

/* 4. Brand lockup --------------------------------------------------------- */
/* The official logo is a self-contained square emblem (vector-traced from
   ELLAH LOGO GOLD.pdf). With the navigation removed it sits centred directly
   above the main heading, with the brand name and tagline stacked underneath
   it. Only the height is set — the width follows the intrinsic ratio. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
}

.brand__mark {
  flex: 0 0 auto;
  width: auto;
  height: clamp(3rem, 5.5vw, 4.5rem); /* 48px → 72px */
}

.brand__name {
  margin-top: clamp(0.85rem, 1.6vw, 1.15rem);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem); /* 22 → 28px */
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--ink);
}

.brand__tagline {
  margin-top: 0.45rem;
  font-size: clamp(0.6875rem, 0.15vw + 0.63rem, 0.75rem); /* 11 → 12px */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-strong);
}

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem; /* 46px — comfortable tap target */
  padding: 0.8rem 10.9rem;
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem); /* 12 → 13px */
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 100px;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s var(--ease-out);
}

.btn--primary {
  color: #14110a; /* 7.4:1 against the gold fill */
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(201, 156, 20, 0.26);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #d8ab21;
  border-color: #d8ab21;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(201, 156, 20, 0.34);
}

/* 6. Hero — brand lockup, main heading, supporting copy and call to action. */
.hero {
  max-width: 62rem; /* 992px */
  margin-inline: auto;
  padding: clamp(3.5rem, 10vw, 7rem) clamp(1.25rem, 5vw, 2.5rem)
    clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}

.hero__title {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.4vw, 4rem); /* 34px → 64px */
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.hero__lede {
  max-width: 42rem; /* 672px */
  margin: 1.25rem auto 0;
  font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.125rem); /* 15 → 18px */
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-body);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* 7. Category sections (the three feature cards) -------------------------- */
.collections {
  max-width: 72rem; /* 1152px */
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}

.collections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Primary call to action centred directly beneath the collection row. */
.collections__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(2rem, 4.5vw, 3rem);
}

/* Contact block beneath the primary call to action. Each row is a flex line so
   the call and WhatsApp numbers sit side by side but wrap together on narrow
   screens instead of stacking awkwardly. */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  color: var(--ink-body);
  text-align: center;
}

.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
}

.contact__item {
  display: inline-flex;
  gap: 0.35rem;
}

.link {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}

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

.link--strong {
  font-weight: 600;
  text-decoration-thickness: 2px;
}

/* Grid children: min-width: 0 stops long words in the copy from blowing the
   column out, while the card itself stretches to the tallest sibling. */
.collections__item {
  min-width: 0;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  text-align: left;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card-hover);
}

/* Highlight the card the visitor jumped to (nav links and card buttons). */
.card:target {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint), var(--shadow-card-hover);
}

.card__label {
  font-size: clamp(0.6875rem, 0.15vw + 0.63rem, 0.75rem); /* 11 → 12px */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-strong);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.125rem); /* 28 → 34px */
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: var(--ink);
}

.card__copy {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 → 16px */
  line-height: 1.7;
  color: var(--ink-body);
}

.card__link {
  margin-top: auto;
  padding-top: 1rem;
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem); /* 12 → 13px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-strong);
  transition: color 0.18s ease;
}

.card__link::after {
  content: "\2192"; /* decorative arrow */
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.18s var(--ease-out);
}

.card__link:hover,
.card__link:focus-visible {
  color: var(--ink);
}

.card__link:hover::after,
.card__link:focus-visible::after {
  transform: translateX(3px);
}

/* 8. Legal pages (privacy / terms / returns / shipping) -------------------- */
/* One shared layout for all four policy pages: a page header, a sticky table
   of contents rail beside the numbered clauses, and typographic rules for
   long-form legal copy. Everything reuses the tokens above, so the policy
   pages inherit the same gold-and-ivory identity as the landing page. */
.legal {
  max-width: 72rem; /* 1152px */
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2.5rem)
    clamp(3rem, 7vw, 5rem);
}

/* Page header: gold eyebrow label, serif title, and the "last updated" line
   Google's quality guidelines expect on every policy page. */
.legal__header {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.legal__eyebrow {
  font-size: clamp(0.6875rem, 0.15vw + 0.63rem, 0.75rem); /* 11 → 12px */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-strong);
}

.legal__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem); /* 32 → 52px */
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}

.legal__lede {
  margin-top: 1rem;
  font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem); /* 15 → 17px */
  line-height: 1.75;
  color: var(--ink-body);
  text-wrap: pretty;
}

.legal__updated {
  margin-top: 1.25rem;
  font-size: clamp(0.8125rem, 0.2vw + 0.75rem, 0.875rem); /* 13 → 14px */
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Two-column body: rail + clauses. min-width: 0 keeps long paragraphs and
   wide tables from stretching the grid track on small screens. */
.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.legal__toc {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.legal__toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal__toc-list {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-body);
}

.legal__toc-list li + li {
  margin-top: 0.5rem;
}

.legal__toc-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.legal__toc-list a:hover,
.legal__toc-list a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Clause blocks. Each <section> is one numbered policy clause. */
.legal__section + .legal__section {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.legal__section-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.4vw + 1.05rem, 1.75rem); /* 22 → 28px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.legal__section-body > * + * {
  margin-top: 1rem;
}

.legal__section-body p,
.legal__section-body li {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 → 16px */
  line-height: 1.75;
  color: var(--ink-body);
}

.legal__section-body strong {
  font-weight: 600;
  color: var(--ink);
}

.legal__section-body ul,
.legal__section-body ol {
  padding-left: 1.35rem;
}

.legal__section-body li + li {
  margin-top: 0.6rem;
}

.legal__section-body li::marker {
  color: var(--gold-strong);
}

.legal__section-body a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__section-body a:hover {
  color: var(--ink);
}

/* Numbered "steps" used by the returns and shipping process sections. */
.legal__steps {
  padding-left: 1.5rem;
}

.legal__steps li::marker {
  font-weight: 600;
}

/* Callout box for important notes (return exceptions, duties, etc.). */
.legal__note {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
  background-color: var(--gold-tint);
  border-left: 3px solid var(--gold);
}

.legal__note > * + * {
  margin-top: 0.75rem;
}

.legal__note p,
.legal__note li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
}

.legal__note-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

/* Data tables: shipping zones, cookie categories, processing times. The
   wrapper scrolls horizontally on narrow screens so the table never breaks
   the layout. */
.legal__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal__table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: clamp(0.875rem, 0.2vw + 0.83rem, 0.9375rem); /* 14 → 15px */
}

.legal__table caption {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-align: left;
}

.legal__table th,
.legal__table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  line-height: 1.6;
  color: var(--ink-body);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal__table thead th {
  font-weight: 600;
  color: var(--ink);
  background-color: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.legal__table tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Key-value grid for short fact pairs (retention periods, contact details). */
.legal__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  margin: 0;
}

.legal__facts > div {
  padding: 1rem 1.15rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
}

.legal__facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.legal__facts dd {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-body);
}

/* Closing "questions? contact us" block at the foot of every policy page. */
.legal__contact {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.legal__contact-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.4vw + 1.05rem, 1.75rem);
  font-weight: 500;
  color: var(--ink);
}

.legal__contact-copy {
  max-width: 40rem;
  margin: 0.85rem auto 0;
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  line-height: 1.7;
  color: var(--ink-body);
}

.legal__contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  margin-top: 1.1rem;
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  color: var(--ink-body);
}

.legal__contact-links a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__contact-links a:hover {
  color: var(--ink);
}

/* Cross-links to the other policy pages, shown under the contact block. */
.legal__related {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  border-top: 1px solid var(--line);
}

.legal__related-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.legal__related-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  margin-top: 0.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.legal__related-list a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__related-list a:hover {
  color: var(--ink);
}

.legal__back {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  font-size: 0.9375rem;
}

.legal__back a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* 9. Footer --------------------------------------------------------------- */
.site-footer {
  background-color: var(--surface);
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem)
    clamp(2rem, 4vw, 2.5rem);
  text-align: center;
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem); /* 17 → 20px */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}

.site-footer__tagline {
  margin-top: 0.5rem;
  font-size: clamp(0.8125rem, 0.2vw + 0.75rem, 0.875rem); /* 13 → 14px */
  letter-spacing: 0.03em;
  color: var(--gold-strong);
}

/* The footer reuses the cross-link component from the policy pages, but at a
   smaller size so it sits quietly under the copyright line. */
.site-footer__inner .legal__related {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
}

.site-footer__inner .legal__related-list {
  margin-top: 0.75rem;
  gap: 0.4rem 1.35rem;
  font-size: 0.875rem;
}

.site-footer__inner .legal__related-list a {
  color: var(--ink-body);
}

.site-footer__inner .legal__related-list a:hover {
  color: var(--ink);
}

.copyright {
  margin-top: clamp(1rem, 2.5vw, 1.35rem);
  font-size: clamp(0.8125rem, 0.2vw + 0.75rem, 0.875rem); /* 13 → 14px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* 9. Toast (clipboard feedback) ------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.25rem);
  z-index: 30;
  max-width: min(24rem, calc(100vw - 2.5rem));
  padding: 0.7rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  background-color: var(--surface-invert);
  border-radius: var(--radius);
  box-shadow: var(--shadow-toast);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.9rem);
  transition: opacity 0.28s ease, transform 0.28s var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 10. Entrance animation -------------------------------------------------- */
/* The .js class is set in <head>; without JavaScript nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 11. Responsive tweaks --------------------------------------------------- */
@media (max-width: 30rem) {
  .brand__tagline {
    letter-spacing: 0.06em;
  }

  .collections__grid {
    grid-template-columns: 1fr;
  }

  /* Tighten the dense tables on very small screens. */
  .legal__table {
    min-width: 26rem;
  }

  .legal__table th,
  .legal__table td {
    padding: 0.6rem 0.7rem;
  }
}

/* Short landscape phones: keep everything readable without clipping. */
@media (max-height: 34rem) and (orientation: landscape) {
  .hero {
    padding-block: 2rem 1.5rem;
  }
}

/* Policy pages: give the table of contents its own rail beside the clauses
   once there is room for it. It is a normal block (not fixed) so it scrolls
   with the page and never traps the reader. */
@media (min-width: 60rem) {
  .legal__layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    /* Clear the fixed header bar, otherwise the rail slides underneath it. */
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* 12. FAQ page (faq.html) -------------------------------------------------- */
/* One searchable accordion for the four FAQ categories. Everything here
   reuses the tokens above so the page carries the same gold-and-ivory
   identity as the landing and policy pages. Progressive enhancement: the
   answers ship open in the markup — CSS only collapses them once the .js
   class is on <html>, so with JavaScript disabled every answer stays
   readable (see the .js guards below). */

/* Live search: hairline field with a gold magnifier and a clear button. */
.faq__search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}

.faq__search-icon {
  position: absolute;
  left: 1.05rem;
  color: var(--gold-strong);
  pointer-events: none;
}

.faq__search-input {
  width: 100%;
  min-height: 3.25rem; /* 52px */
  padding: 0.9rem 3.1rem 0.9rem 2.9rem;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.3vw + 0.93rem, 1.0625rem); /* ≥16px: no iOS zoom */
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__search-input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.faq__search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}

/* One custom clear button instead of the per-browser native one. */
.faq__search-input::-webkit-search-cancel-button,
.faq__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.faq__search-clear {
  position: absolute;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.375rem; /* 38px tap target */
  min-height: 2.375rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}

.faq__search-clear:hover,
.faq__search-clear:focus-visible {
  color: var(--ink);
}

/* The [hidden] attribute loses to the display rule above, so restate it. */
.faq__search-clear[hidden] {
  display: none;
}

/* Live results line ("3 of 8 questions match “size”"). Empty by default,
   so it never reserves awkward space before the first keystroke. */
.faq__status {
  min-height: 1.35rem;
  margin-top: 0.55rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Shown by js/main.js when nothing matches the query. */
.faq__empty {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.faq__empty-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.2vw + 0.95rem, 1.5rem);
  font-weight: 500;
  color: var(--ink);
}

.faq__empty-copy {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
}

.faq__empty-copy a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq__empty-copy a:hover {
  color: var(--ink);
}

/* A whole category is removed from the flow while filtering. */
.faq__category.is-filtered-out,
.faq__item.is-filtered-out {
  display: none;
}

.faq__category + .faq__category {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.faq__category-title {
  padding-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.4vw + 1.05rem, 1.75rem); /* 22 → 28px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
/* Accordion: white cards on the ivory page, a gold frame once open. */
.faq__list {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2vw, 1.35rem);
}

.faq__item {
  background-color: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.faq__item.is-open {
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
  width: 100%;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.05rem, 2.2vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: clamp(0.9375rem, 0.3vw + 0.87rem, 1.0625rem); /* 15 → 17px */
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Plus sign that rotates into a cross while open. */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  transition: transform 0.35s var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background-color: var(--gold-strong);
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

/* Answer panel: grid-template-rows animates 0fr → 1fr for a smooth,
   height-agnostic dropdown (no magic max-height). Collapsed panels also get
   visibility: hidden — delayed until the collapse finishes — so their links
   never sit in the tab order while closed. With no JS the .js guards below
   never apply and every panel simply stays open. */
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s var(--ease-out), visibility 0s linear 0s;
}

.js .faq__answer {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.js .faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s var(--ease-out), visibility 0s linear 0s;
}

.faq__answer-inner {
  min-height: 0; /* lets the grid track collapse to zero */
  overflow: hidden;
  padding: 0 clamp(1.05rem, 2.2vw, 1.5rem) clamp(1.15rem, 2.2vw, 1.5rem);
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 → 16px */
  line-height: 1.75;
  color: var(--ink-body);
}

.faq__answer-inner > * + * {
  margin-top: 0.8rem;
}

.faq__answer-inner strong {
  font-weight: 600;
  color: var(--ink);
}

.faq__answer-inner a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq__answer-inner a:hover {
  color: var(--ink);
}

/* The global reset strips list styling; restore it inside answers only. */
.faq__answer-inner ul,
.faq__answer-inner ol {
  padding-left: 1.3rem;
  list-style: revert;
}

.faq__answer-inner li + li {
  margin-top: 0.5rem;
}

.faq__answer-inner li::marker {
  color: var(--gold-strong);
}

/* Very small screens: tighten the accordion paddings so long questions
   (like the collections one) wrap comfortably. */
@media (max-width: 30rem) {
  .faq__button {
    gap: 0.85rem;
    padding: 0.95rem 1rem;
  }

  .faq__answer-inner {
    padding: 0 1rem 1.05rem;
  }

  .faq__search-input {
    padding-right: 2.9rem;
  }
}

/* 13. About page (about.html) ---------------------------------------------- */
/* Shares the .legal page shell and every token above: a centred brand
   hero, a narrative with an "at a glance" rail, a gold-tinted vision
   statement, numbered mission cards, a services grid and a closing CTA.
   Fully responsive through clamp() and two grid breakpoints. */

/* Hero: emblem + wordmark (reusing the .brand lockup from the landing
   page), champagne tagline, serif title, centred lede. */
.about__hero {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.about__tagline {
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  font-size: clamp(0.6875rem, 0.15vw + 0.63rem, 0.8125rem); /* 11 → 13px */
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-strong);
}

.about__title {
  margin-top: 0.75rem;
  text-wrap: balance;
}

.about__hero .legal__lede {
  margin-inline: auto;
  max-width: 40rem;
}

/* Section rhythm: serif heading over a hairline rule, matching the
   category titles on the FAQ page. */
.about__section + .about__section {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

.about__heading {
  padding-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2rem); /* 24 → 32px */
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.about__section-lede {
  margin-top: 0.9rem;
  font-size: clamp(0.9375rem, 0.3vw + 0.87rem, 1.0625rem); /* 15 → 17px */
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* Narrative: prose column beside a facts rail once there is room. The
   min-width: 0 keeps long words in the grid from stretching the track. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.15rem, 2.5vw, 1.6rem);
}

@media (min-width: 60rem) {
  .about__layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
  }
}

.about__prose > * + * {
  margin-top: 1rem;
}

.about__prose p {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 → 16px */
  line-height: 1.8;
  color: var(--ink-body);
  text-wrap: pretty;
}

.about__prose strong {
  font-weight: 600;
  color: var(--ink);
}

/* "At a glance" rail — same card treatment as the policy-page TOC. */
.about__facts {
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.about__facts-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.about__facts-list {
  margin-top: 1rem;
}

.about__facts-list > div + div {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.about__facts-list dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.about__facts-list dd {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Vision: a serif pull-quote on the soft gold wash. */
.about__vision {
  margin: clamp(1.15rem, 2.5vw, 1.6rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--gold-tint);
  border-left: 3px solid var(--gold);
}

.about__vision p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.2vw + 0.95rem, 1.6rem); /* 20 → 26px */
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Mission: numbered cards — two columns once there is room, with the
   fifth card spanning the full width so the grid never looks orphaned. */
.about__mission {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(1.15rem, 2.5vw, 1.6rem);
  counter-reset: mission;
}

@media (min-width: 48rem) {
  .about__mission {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__mission-item:last-child {
    grid-column: 1 / -1;
  }
}

.about__mission-item {
  display: flex;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.about__mission-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.about__mission-index {
  flex: 0 0 auto;
  padding-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-strong);
}

.about__mission-item p {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 → 16px */
  line-height: 1.7;
  color: var(--ink-body);
}

/* Services: icon cards — one column on phones, two on tablets, three on
   desktops. The fifth card fills the middle of the last row. */
.about__services {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 40rem) {
  .about__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .about__services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about__service {
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.about__service:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.about__service-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold-strong);
}

.about__service-title {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem); /* 19 → 22px */
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.about__service-copy {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
}

/* CTA buttons: the landing page's gold primary, with sane padding for a
   centred layout (the shared .btn carries landing-page-specific sizing). */
.about__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem; /* 46px — comfortable tap target */
  padding: 0.8rem 1.9rem;
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem); /* 12 → 13px */
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s var(--ease-out),
    box-shadow 0.2s ease;
}

.about__btn:hover,
.about__btn:focus-visible {
  color: #ffffff;
  background-color: var(--ink);
}

.about__btn--primary {
  color: #14110a; /* 7.4:1 against the gold fill */
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(201, 156, 20, 0.26);
}

.about__btn--primary:hover,
.about__btn--primary:focus-visible {
  color: #14110a;
  background-color: #d8ab21;
  border-color: #d8ab21;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(201, 156, 20, 0.34);
}

/* Very small screens: stack the CTA buttons full-width for easy tapping. */
@media (max-width: 30rem) {
  .about__actions {
    flex-direction: column;
  }

  .about__btn {
    width: 100%;
  }
}

/* 14. Reduced motion & print --------------------------------------------- */



@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  body,
  .site-footer {
    background: #ffffff;
  }

  /* FAQ page: drop the live search and print every answer in full. */
  .faq__search,
  .faq__status {
    display: none;
  }

  .js .faq__answer {
    grid-template-rows: 1fr !important;
    visibility: visible !important;
  }

  .faq__icon {
    display: none;
  }

  .toast {
    display: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}



/* 15. Size guide page (sizes.html) ------------------------------------------ */
/* Shares the .legal page shell and every token above: a page header with a
   unit switcher, a tabbed size chart, a "how to measure" guide, fit notes for
   each collection and a measurement request form. Square corners, gold rules
   and Cormorant/Inter typography throughout, exactly like the FAQ page. */

/* Header row: the page header beside the unit switcher. */
.sizes__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sizes__header-row .legal__header {
  margin-bottom: 0;
  flex: 1 1 22rem;
}

/* Unit switcher: two radio inputs styled as buttons. */
.sizes__units {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 0.25rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.sizes__unit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sizes__unit-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.25rem;
  min-height: 2.5rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-body);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sizes__unit-label:hover {
  color: var(--ink);
}

.sizes__unit:checked + .sizes__unit-label {
  color: #14110a; /* 7.4:1 against the gold fill */
  background-color: var(--gold);
}

.sizes__unit:focus-visible + .sizes__unit-label {
  box-shadow: 0 0 0 3px var(--gold-tint);
  outline: 2px solid var(--gold-strong);
  outline-offset: 1px;
}
/* Tabs — the collection switcher and the women/men chart switcher share one
   component. A roving tabindex keeps only the active tab focusable. */
.sizes__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.sizes__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.7rem clamp(0.9rem, 2vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem); /* 13 -> 14px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-body);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.sizes__tab:hover {
  color: var(--ink);
  background-color: var(--gold-tint);
}

.sizes__tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.sizes__tab:focus-visible {
  outline: 2px solid var(--gold-strong);
  outline-offset: -2px;
}

/* Panel wrapper: one visible at a time. The hiding class is added by
   js/sizes.js only, so without JavaScript every panel stays visible and
   readable and the charts never disappear. */
.sizes__panel.is-hidden {
  display: none;
}

.sizes__panel-inner {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sizes__panel-intro {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); /* 15 -> 16px */
  line-height: 1.75;
  color: var(--ink-body);
}

.sizes__panel-intro strong {
  font-weight: 600;
  color: var(--ink);
}

/* The chart reuses the legal table styling, with a larger minimum width so
   the measurement columns never crush on a phone. */
.sizes__chart {
  min-width: 44rem;
}

.sizes__chart caption {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-align: left;
}

.sizes__chart thead th {
  white-space: nowrap;
}

.sizes__chart tbody th {
  min-width: 5.5rem;
}

.sizes__chart td {
  font-variant-numeric: tabular-nums;
}

.sizes__chart-note {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* Dimension tables carry more columns than the body-measurement charts, so
   they need a wider minimum before the scroll container takes over. */
.sizes__chart--wide {
  min-width: 56rem;
}

/* Sub-heading above each category table inside a panel. */
.sizes__chart-head {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Group heading above each gender block of category tables. */
.sizes__group-head {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.4rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.sizes__group-head:first-child {
  margin-top: 0;
}

.sizes__chart-lede {
  max-width: 46rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-body);
}
/* How-to-measure guide: numbered cards in a responsive grid. */
.sizes__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  margin-top: clamp(1.15rem, 2.5vw, 1.6rem);
  padding: 0;
  list-style: none;
  counter-reset: sizes-step;
}

.sizes__step {
  padding: clamp(1rem, 2vw, 1.35rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
}

.sizes__step::before {
  counter-increment: sizes-step;
  content: counter(sizes-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}

.sizes__step-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.sizes__step-copy {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-body);
}

/* Size-help callout, styled like the legal note box. */
.sizes__note {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
  background-color: var(--gold-tint);
  border-left: 3px solid var(--gold);
}

.sizes__note-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.sizes__note p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
}

.sizes__note a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

/* Collection fact grid. */
.sizes__collection-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  margin: 0;
}

.sizes__collection-facts > div {
  padding: 1rem 1.15rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
}

.sizes__collection-facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.sizes__collection-facts dd {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-body);
}
/* Measurement request form. */
.sizes__form {
  margin-top: clamp(1.15rem, 2.5vw, 1.6rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.sizes__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.15rem);
}

.sizes__field {
  display: flex;
  flex-direction: column;
}

.sizes__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.sizes__input,
.sizes__select {
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.45rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sizes__select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a6a0c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  cursor: pointer;
}

.sizes__input:focus,
.sizes__select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}

.sizes__input[aria-invalid="true"],
.sizes__select[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.sizes__error {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #b42318;
}

.sizes__error.is-visible {
  display: block;
}

/* Consent checkbox row. */
.sizes__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: clamp(1rem, 2vw, 1.35rem);
}

.sizes__checkbox {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--gold-strong);
  cursor: pointer;
}

.sizes__consent-label {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-body);
}

.sizes__consent-label a {
  color: var(--gold-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sizes__consent-label a:hover {
  color: var(--ink);
}

.sizes__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem; /* 46px tap target */
  margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
  padding: 0.8rem 2.25rem;
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem); /* 12 -> 13px */
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #14110a; /* 7.4:1 against the gold fill */
  background-color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(201, 156, 20, 0.26);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

.sizes__submit:hover,
.sizes__submit:focus-visible {
  background-color: #d8ab21;
  border-color: #d8ab21;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(201, 156, 20, 0.34);
}

.sizes__form-note {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-muted);
}
/* Very small screens: stack the unit switcher and the submit button. */
@media (max-width: 30rem) {
  .sizes__header-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sizes__units {
    align-self: flex-start;
  }

  .sizes__submit {
    width: 100%;
  }

  .sizes__tab {
    flex: 1 1 auto;
    padding-inline: 0.75rem;
  }
}

/* Print: expand every panel and drop the interactive furniture. */
@media print {
  .sizes__tabs,
  .sizes__units,
  .sizes__form,
  .sizes__submit {
    display: none;
  }

  .sizes__panel.is-hidden {
    display: block;
  }
}

/* 16. Site header (fixed navigation bar) ----------------------------------- */
/* One header bar, identical on every page. It is fixed to the top of the
   viewport so the logo (home link) and the "Back" button are reachable
   from anywhere in a long policy page without scrolling back up.

   The brand lockup is the official square gold emblem plus the wordmark set
   in the site sans-serif; the whole site uses square corners (see the reset
   in section 2), so nothing here needs a border-radius. */

:root {
  --header-h: 3.75rem; /* 60px — the fixed bar's height                    */
}

html {
  /* Keep anchored headings clear of the fixed bar when a link jumps to them. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  /* Offset for the fixed bar so no page content hides underneath it. The
     extra header height is added to the minimum height so a short page still
     fills the viewport exactly as it did before the bar was added. */
  padding-top: var(--header-h);
  min-height: calc(100vh + var(--header-h));
  min-height: calc(100svh + var(--header-h));
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40; /* above the toast (30) */
  /* The bar's total height (border included) must equal --header-h, otherwise
     the 1px border would sit on top of the first pixel of content. The
     global reset makes this border-box, so the height is exact. */
  height: var(--header-h);
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  max-width: 62rem;
  height: 100%;
  margin-inline: auto;
  padding: 0 clamp(0.875rem, 3.5vw, 2.5rem);
}

/* Logo + wordmark, linked to the homepage. */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.site-header__brand:hover .site-header__name,
.site-header__brand:focus-visible .site-header__name {
  color: var(--gold-strong);
}

.site-header__logo {
  flex: 0 0 auto;
  width: auto;
  height: 2rem; /* 32px — square emblem, height only, width follows ratio */
}

.site-header__name {
  font-family: var(--font-ui);
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Pushes the navigation cluster to the trailing edge of the bar. */
.site-header__spacer {
  flex: 1 1 auto;
}

/* The "Back" button. It is an anchor so that, without JavaScript, it still
   navigates somewhere sensible; js/main.js upgrades it to history.back(). */
.site-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-height: 2.375rem; /* 38px — comfortable tap target */
  padding: 0.5rem clamp(0.7rem, 2.2vw, 1.1rem);
  font-family: var(--font-ui);
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  background-color: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease;
}

.site-header__back:hover,
.site-header__back:focus-visible {
  color: #14110a; /* 7.4:1 against the gold fill */
  background-color: var(--gold);
  border-color: var(--gold);
}

.site-header__back-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Narrow phones: the wordmark shrinks first, then the button label — the
   arrow alone still identifies the control. */
@media (max-width: 30rem) {
  .site-header__inner {
    gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  .site-header__name {
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.1em;
  }

  .site-header__logo {
    height: 1.75rem; /* 28px */
  }

  .site-header__back {
    padding-inline: 0.65rem;
  }
}

@media (max-width: 22rem) {
  .site-header__name {
    display: none;
  }
}

/* The header is screen furniture — it never belongs on paper. */
@media print {
  .site-header {
    position: static;
    display: none;
  }

  body {
    padding-top: 0;
    min-height: auto;
  }
}

/* ==========================================================================
   15. Size guide page – Pants chart
   --------------------------------------------------------------------------
   Pants Size Chart, styled to match the page's clean editorial rhythm.
   Section headers and containers inherit the standard legal__section-title
   and legal__section-body typography. The data table uses the navy brand
   accent (#1616D7) on a crisp, high-contrast border grid per brief.

   Design tokens used: --ink, --ink-body, --ink-muted, --line, --surface,
   --gold, --gold-tint, --radius, --font-ui, --font-display.
   ========================================================================== */

.pants-size-chart {
  --chart-accent: #c99c14;
}

/* Table: crisp high-contrast borders, navy header row. */
.pants-size-chart .legal__table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  border: 1px solid var(--ink);
}

.pants-size-chart .legal__table caption {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-align: left;
}

.pants-size-chart .legal__table thead {
  background-color: var(--chart-accent);
}

.pants-size-chart .legal__table thead th {
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 2px solid var(--chart-accent);
  background-color: var(--chart-accent);
  white-space: nowrap;
  border-radius: var(--radius);
}

.pants-size-chart .legal__table th,
.pants-size-chart .legal__table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.pants-size-chart .legal__table tbody th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
}

.pants-size-chart .legal__table tbody tr:hover td,
.pants-size-chart .legal__table tbody tr:hover th {
  background-color: var(--gold-tint);
}

/* Helper text below the table — standard sizes__chart-note styling. */
.pants-size-chart .sizes__chart-note {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.pants-size-chart .sizes__chart-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* Return policy note — styled as a gold-tint callout to match .sizes__note. */
.pants-size-chart .pants__return {
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
  background-color: var(--gold-tint);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
}

.pants-size-chart .pants__return strong {
  color: var(--ink);
  font-weight: 600;
}
/* ==========================================================================
   15. Size guide page – Bust / Waist / Hip & Length chart
   --------------------------------------------------------------------------
   Bust / Waist / Hip & Length Size Chart, styled to match the page's clean
   editorial rhythm. Section headers and containers inherit the standard
   legal__section-title and legal__section-body typography. The data table
   uses the navy brand accent (#1616D7) on a crisp, high-contrast border
   grid per brief.

   Design tokens used: --ink, --ink-body, --ink-muted, --line, --surface,
   --gold, --gold-tint, --radius, --font-ui, --font-display.
   ========================================================================== */

.bwhl-size-chart {
  --chart-accent: #c99c14;
}

/* Table: crisp high-contrast borders, navy header row. */
.bwhl-size-chart .legal__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  border: 1px solid var(--ink);
}

.bwhl-size-chart .legal__table caption {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-align: left;
}

.bwhl-size-chart .legal__table thead {
  background-color: var(--chart-accent);
}

.bwhl-size-chart .legal__table thead th {
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 2px solid var(--chart-accent);
  background-color: var(--chart-accent);
  white-space: nowrap;
  border-radius: var(--radius);
}

.bwhl-size-chart .legal__table th,
.bwhl-size-chart .legal__table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.bwhl-size-chart .legal__table tbody th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
}

.bwhl-size-chart .legal__table tbody tr:hover td,
.bwhl-size-chart .legal__table tbody tr:hover th {
  background-color: var(--gold-tint);
}