/* ==========================================================================
   Өлзийт Шанд — stylesheet

   Colour, type and spacing are all set as variables in :root below. Change a
   value there and it updates everywhere on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Cloth, not paper: a cool unbleached cotton rather than a warm cream. */
  --ground:      #F1F2EE;
  --paper:       #FAFAF9;
  --paper-sunk:  #E9EAE4;

  /* Indigo — the oldest dye in the trade — carries all the text. */
  --ink:         #16233D;
  --ink-2:       #4C5670;
  --ink-3:       #7E869A;

  --rule:        #D9DBD3;
  --rule-strong: #B8BBB1;

  /* Weld yellow. Used sparingly: the selvedge line, links, live details. */
  --accent:      #A2631A;
  --accent-deep: #7E4C12;
  --accent-wash: #F2E7D3;

  --good:        #2F6B4F;
  --alert:       #9A2F24;

  --font-ui:   'Roboto Flex', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Literata', Georgia, 'Times New Roman', serif;

  --fs-display: clamp(3rem, 8.4vw, 6.25rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3:      1.1875rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.78rem;

  --page:    1320px;
  --measure: 63ch;
  --gutter:  clamp(20px, 4.2vw, 60px);
  --radius:  2px;

  --header-h: 68px;
  --ease:     cubic-bezier(0.16, 0.84, 0.30, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--ground);
  padding: 10px 16px; z-index: 200;
  font-family: var(--font-ui); font-size: var(--fs-small);
  text-decoration: none; transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: 860px; }

.section { padding-block: clamp(56px, 8.5vw, 112px); }
.section-tight { padding-block: clamp(40px, 5.5vw, 68px); }
.section-line { border-top: 1px solid var(--rule); }

/* A row of weft picks, used as a heavier division than a hairline. */
.weft-rule {
  height: 5px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--rule-strong) 0 9px,
    transparent 9px 18px
  );
}

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--ink-2); max-width: 40ch; margin: 0; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark {
  font-family: var(--font-ui);
  font-weight: 800;
  font-stretch: 122%;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-right: auto;
}

.nav { display: flex; gap: 30px; }

.nav a {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 12px; }


.nav-toggle {
  display: none;
  width: 40px; height: 36px;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink); content: '';
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after  { position: absolute; top: 5px; }

/* --------------------------------------------------------------------------
   5. Hero — the loom
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: min(88vh, 860px);
  border-bottom: 1px solid var(--rule);
}

.hero-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
  padding-left: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));

  /* Measured by the headline below: the display scale is set against the
     viewport, but the headline has to fit THIS column, which is narrower
     than the viewport by a share that changes with the page gutter. */
  container-type: inline-size;
}

.hero h1 {
  /* As large as the display scale says, but never wider than the column
     can hold: "Монголдоо" is one unbreakable word about 5.7 times the font
     size, so 17cqw keeps it inside with a little to spare. Without the cap
     it runs under the cloth at every width where the hero is two columns. */
  font-size: var(--fs-display);            /* browsers without cq units */
  font-size: min(var(--fs-display), 17cqw);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.032em;
  margin-bottom: 28px;
}

.hero-lede {
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 42ch;
  margin-bottom: 36px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-cloth {
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--accent);   /* the selvedge */
  background: #DFDCD1;
  min-height: 320px;
}

.loom { position: absolute; inset: 0; width: 100%; height: 100%; }

.loom-warp,
.loom-weft { transform-box: view-box; }

.loom-warp {
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: thread-warp 0.9s var(--ease) 0.15s forwards;
}

.loom-weft {
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: thread-weft 1.05s var(--ease) 0.62s forwards;
}

@keyframes thread-warp { to { transform: scaleY(1); } }
@keyframes thread-weft { to { transform: scaleX(1); } }

.hero-type > * {
  opacity: 0;
  animation: settle 0.7s var(--ease) forwards;
}
.hero-type > *:nth-child(1) { animation-delay: 0.10s; }
.hero-type > *:nth-child(2) { animation-delay: 0.20s; }
.hero-type > *:nth-child(3) { animation-delay: 0.30s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}

.button-primary { background: var(--ink); color: var(--ground); }
.button-primary:hover { background: #22355C; }

.button-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.button-quiet:hover { border-color: var(--ink); background: var(--paper); }

.button-block { width: 100%; }
.button-large { padding: 16px 30px; font-size: 0.95rem; }

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.link-text {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.link-text:hover { color: var(--ink); border-bottom-color: var(--ink); }

.link-quiet {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-quiet:hover { color: var(--alert); }

/* --------------------------------------------------------------------------
   7. Product grid — cards divided by warp threads
   -------------------------------------------------------------------------- */

.grid {
  /* Padding is the same on every card so the columns stay equal widths, and
     the grid is pulled out by half of it so column one still sits flush with
     the heading above. */
  --col-gap:  clamp(24px, 3.4vw, 48px);
  --card-pad: clamp(12px, 1.7vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(44px, 5vw, 72px);
  margin-inline: calc(var(--card-pad) / -2);
}

/* Two-up while the range is small: three columns with two cards in them
   leaves a hole where the third should be. The divider rule moves with it. */
.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-two .card:nth-child(3n + 1)::before { display: block; }
.grid-two .card:nth-child(2n + 1)::before { display: none; }

.card {
  position: relative;
  text-decoration: none;
  display: block;
  padding-inline: calc(var(--card-pad) / 2);
}

/* The warp thread between columns. */
.card::before {
  content: '';
  position: absolute;
  left: calc((var(--col-gap) + var(--card-pad)) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.card:nth-child(3n + 1)::before { display: none; }

.card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-sunk);
  margin-bottom: 18px;
}
.card-media .swatch { width: 100%; height: 100%; object-fit: cover; }

.card:hover .card-media .swatch { transform: scale(1.02); }
.card-media .swatch { transition: transform .5s var(--ease); }

.card-flag {
  position: absolute;
  left: 0; top: 0;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: 5px 10px;
}

.card-name {
  font-size: var(--fs-h3);
  font-stretch: 106%;
  margin-bottom: 14px;
}
.card:hover .card-name { color: var(--accent-deep); }

/* Unused while a card is name and price alone. Kept so putting the blurb
   back is one line of markup and no CSS. */
.card-blurb {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 34ch;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.card-price {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
}

.card-dots { display: flex; gap: 6px; }

/* Each dot shows the colourway's warp and weft, split on the diagonal. */
.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warp) 0 50%, var(--weft) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 35, 61, 0.16);
}
.dot.is-out { opacity: 0.4; }

/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */

.breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  padding-block: 20px 0;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { margin-inline: 7px; }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(28px, 4vw, 52px) clamp(56px, 8vw, 104px);
}

.product-media { position: sticky; top: calc(var(--header-h) + 24px); }
.product-figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-sunk);
  border-left: 3px solid var(--accent);
}
.product-figure .swatch { width: 100%; height: 100%; object-fit: cover; }

.product-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.thumb {
  flex: 0 0 auto;
  width: 68px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  cursor: pointer;
  overflow: hidden;
  opacity: .62;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}

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

.thumb:hover { opacity: .85; }

.thumb[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

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

/* The enquiry button stands where the buy row would, while CONFIG.shop is
   off. Same rhythm, one control instead of three. */
.buy-row-enquire { margin-top: 4px; }

.enquire-note {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin: 10px 0 26px;
  max-width: 46ch;
}

.product-caption {
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  margin-top: 10px;
}

.product h1 { font-size: var(--fs-h1); margin-bottom: 12px; }

/* A piece quoted per job carries a phrase, not a figure. Phrases read badly
   at the size a price wants to be, so it steps down and lightens. */
.product-price.is-on-request {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
}

.product-price {
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Unused while a product page is name, price and figures. Kept so putting
   the blurb back is one line of markup and no CSS. */
.product-blurb {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 44ch;
}

.field { margin-bottom: 24px; }
.field-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 10px;
}
.field-label em {
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 8px 14px 8px 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.chip[disabled] { opacity: 0.42; cursor: not-allowed; text-decoration: line-through; }

.chip-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warp) 0 50%, var(--weft) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 35, 61, 0.2);
}

.stock-line {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 22px;
}
.stock-line::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
}
.stock-line.is-out { color: var(--alert); }
.stock-line.is-out::before { background: var(--alert); }

.buy-row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px; }
.buy-row .button { flex: 1; }

.buy-note { font-size: var(--fs-tiny); color: var(--ink-3); margin-bottom: 32px; }

.specs { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.specs th, .specs td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: var(--fs-small);
}
.specs th {
  font-family: var(--font-ui);
  font-weight: 600;
  width: 34%;
  color: var(--ink-2);
}
.specs tr:first-child th, .specs tr:first-child td { border-top: 1px solid var(--rule); }

.disclosure { border-bottom: 1px solid var(--rule); }
.disclosure summary {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: '+'; font-size: 1.1rem; color: var(--ink-3); }
.disclosure[open] summary::after { content: '\2212'; }
.disclosure-body { padding-bottom: 18px; color: var(--ink-2); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   9. Shop page
   -------------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 52px); }

.filter {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.filter:hover { border-color: var(--ink-2); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

.result-count { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   10. Forms, and the contact page aside
   -------------------------------------------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.summary {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 30px);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.summary h2 { font-size: 1.2rem; margin-bottom: 18px; }

.summary-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: var(--fs-small);
  padding: 9px 0;
  color: var(--ink-2);
}
.summary-row span:last-child { font-family: var(--font-ui); color: var(--ink); }
.summary-total {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.15rem;
  padding-top: 15px; margin-top: 9px;
  border-top: 1px solid var(--rule-strong);
}
.summary-note { font-size: var(--fs-tiny); color: var(--ink-3); margin-top: 14px; }
.summary-note a:not(.link-quiet) { color: var(--accent-deep); text-underline-offset: 3px; }
.summary .button { margin-top: 20px; }

.summary-items { margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.summary-item {
  display: grid; grid-template-columns: 46px 1fr auto;
  gap: 12px; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.summary-item:last-child { border-bottom: 0; }
.summary-item-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-sunk); }
.summary-item-media .swatch { width: 100%; height: 100%; object-fit: cover; }
.summary-item-name { font-family: var(--font-ui); font-weight: 600; }
.summary-item-meta { font-size: var(--fs-tiny); color: var(--ink-3); }

.form-section { margin-bottom: clamp(32px, 4vw, 46px); }
.form-section h2 { font-size: 1.22rem; margin-bottom: 6px; }
.form-section-note { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 20px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-thirds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: 600;
  margin-bottom: 6px;
}

.input, .select, .textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(154, 47, 36, 0.1);
}
.textarea { resize: vertical; min-height: 96px; font-family: var(--font-text); }
.select { appearance: none; background-image: none; padding-right: 40px; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute; right: 15px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field-error {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  color: var(--alert);
  margin-top: 5px;
}

/* The honeypot on the contact form. Moved off-screen rather than given
   display:none, because a script that skips hidden fields would then skip
   this one — and being filled in is the whole job of it. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.radio-card:hover { border-color: var(--ink-2); }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.radio-card input { margin-top: 3px; accent-color: var(--ink); }
.radio-card-title { display: block; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; }
.radio-card-note { display: block; font-size: var(--fs-tiny); color: var(--ink-3); margin-top: 2px; }
/* Side by side in a form row the cards carry their own gap, so the stacked
   spacing would double it. */
.form-row > .radio-card { margin-bottom: 0; }

.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 16px 18px;
  font-size: var(--fs-small);
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.notice-alert { border-left-color: var(--alert); background: #F6E7E4; color: #7C2A21; }
.notice strong { font-family: var(--font-ui); }

.page-head {
  padding-block: clamp(28px, 4vw, 52px) clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(34px, 4.4vw, 56px);
}
.page-head h1 { font-size: var(--fs-h1); margin-bottom: 10px; }
/* Nothing follows the heading today, so its margin would just pad the rule
   below it. Guarded rather than removed, so adding a standfirst still works. */
.page-head h1:last-child { margin-bottom: 0; }

/* The map embed. Google hands out a fixed 600x450 iframe; the box owns the
   ratio instead so it fills the column at any width. The accent edge is the
   same motif as .product-figure. */
.map {
  aspect-ratio: 16 / 9;
  background: var(--paper-sunk);
  border-left: 3px solid var(--accent);
  overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 760px) {
  .map { aspect-ratio: 4 / 3; }
}

.empty-state { text-align: center; padding: clamp(60px, 10vw, 120px) 0; }
.empty-state h1,
.empty-state h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.empty-state p { color: var(--ink-2); margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   11. Editorial blocks
   -------------------------------------------------------------------------- */

.stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 56px);
}
/* The four promises, side by side. Falls to two across on tablets and one on
   phones, using the breakpoints further down. */
.stages-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stages-four .stage h3 { font-size: 1.12rem; }

.stage { border-top: 2px solid var(--ink); padding-top: 18px; }
.stage h3 { font-size: 1.3rem; font-stretch: 108%; margin-bottom: 10px; }
.stage p { color: var(--ink-2); font-size: 0.99rem; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.fact-value {
  font-family: var(--font-ui);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.fact-label { font-size: var(--fs-small); color: var(--ink-2); }

.editorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.editorial-cloth { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-sunk); border-left: 3px solid var(--accent); }
.editorial-cloth .swatch { width: 100%; height: 100%; object-fit: cover; }
.editorial h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.editorial p { color: var(--ink-2); }

.assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.assurance h3 { font-size: 1rem; font-stretch: 104%; margin-bottom: 6px; }
.assurance p { font-size: var(--fs-small); color: var(--ink-2); }

/* The Facebook band. A paper panel carrying the same accent selvedge as the
   map and the editorial cloth, so it reads as part of the page rather than a
   widget dropped on top of it. The button drops below the words when the row
   runs out of width. */
.follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(22px, 3.4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: clamp(26px, 3.4vw, 44px);
}
.follow h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.follow .lede { margin: 0; }
.follow .button { flex: none; }
.follow-mark { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------------------
   12. Legal pages — the terms, and anything else long and numbered
   -------------------------------------------------------------------------- */

/* Contents on the left holding its place, the text scrolling past it. Clause
   numbers are CSS counters rather than typed in, so inserting a clause
   renumbers the page and its contents list together and they cannot drift. */

.legal {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
  counter-reset: clause;
}

.legal-head {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(20px, 2.6vw, 30px);
  margin-bottom: clamp(6px, 1.4vw, 16px);
}
.legal-head h1 { font-size: var(--fs-h1); margin-bottom: 14px; }

.legal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  margin: 0;
}

/* --- contents ------------------------------------------------------------- */

.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }

.legal-toc-head {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  border-left: 1px solid var(--rule);   /* a warp thread down the margin */
}
.legal-toc li { counter-increment: toc; break-inside: avoid; }

.legal-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 15px;
  border-left: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.legal-toc a::before {
  content: counter(toc) '.';
  color: var(--ink-3);
  margin-right: 7px;
}
.legal-toc a:hover { color: var(--ink); border-left-color: var(--rule-strong); }

/* The selvedge marks where you are, as it marks the cloth everywhere else. */
.legal-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.legal-toc a[aria-current="true"]::before { color: var(--accent-deep); }

/* --- the text ------------------------------------------------------------- */

.legal-body { max-width: var(--measure); }

.legal-body section {
  counter-increment: clause;
  border-top: 1px solid var(--rule);
  margin-top: clamp(26px, 3.4vw, 42px);
  padding-top: clamp(22px, 2.8vw, 32px);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal-body section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* The clause number hangs in the margin, the way it would in print. */
.legal-body h2 {
  display: grid;
  grid-template-columns: 1.75em minmax(0, 1fr);
  align-items: baseline;
  font-size: 1.3rem;
  font-stretch: 108%;
  margin-bottom: 14px;
}
.legal-body h2::before {
  content: counter(clause);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--accent-deep);
}

.legal-body h3 {
  font-size: 1rem;
  font-stretch: 104%;
  color: var(--ink);
  margin: 26px 0 8px;
}

.legal-body p,
.legal-body li { color: var(--ink-2); }
.legal-body strong { color: var(--ink); font-weight: 600; }

.legal-body ul,
.legal-body ol { margin: 0 0 1em; padding-left: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body li:last-child { margin-bottom: 0; }
.legal-body ul { list-style: none; padding-left: 0; }
.legal-body ul li { padding-left: 18px; position: relative; }
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 1px;
  background: var(--rule-strong);       /* a weft pick, not a bullet */
}

.legal-body a { color: var(--accent-deep); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--ink); }

.legal-body .notice { margin-block: 18px; }
.legal-body .specs { margin-block: 4px 20px; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--paper); border-top: 1px solid var(--rule); margin-top: auto; }

.footer-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 78px) var(--gutter) clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
}

/* Three columns, not four — the range came down to one piece. */
.footer-inner-slim { grid-template-columns: 1.6fr 1fr 1.4fr; }

.footer-wordmark {
  font-family: var(--font-ui);
  font-weight: 800; font-stretch: 122%;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.footer-strapline { color: var(--ink-3); font-size: var(--fs-small); max-width: 26ch; }

.footer-head {
  font-size: var(--fs-tiny);
  font-weight: 700;
  font-stretch: 100%;
  color: var(--ink-3);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.footer-col a {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  text-decoration: none;
  padding-block: 5px;
  width: fit-content;
}
.footer-col a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer-address { font-size: var(--fs-small); color: var(--ink-3); margin-top: 12px; line-height: 1.5; }
.footer-social { margin-top: 10px; display: flex; gap: 16px; }
.footer-social a { display: inline; }

.footer-base {
  max-width: var(--page);
  margin-inline: auto;
  padding: 18px var(--gutter) 26px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}
.footer-base p { margin: 0; }

body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   14. Narrower screens
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
  .layout-split { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .product { grid-template-columns: minmax(0, 1fr); }
  .product-media { position: static; max-width: 520px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .stages-four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }

  .legal { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .legal-toc {
    position: static;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 22px;
  }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(3n + 1)::before { display: block; }
  .card:nth-child(2n + 1)::before { display: none; }

  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-type { padding-inline: var(--gutter); padding-block: clamp(48px, 9vw, 72px); order: 1; }
  .hero-cloth { order: 2; height: min(52vh, 400px); border-left: 0; border-top: 3px solid var(--accent); }

  .stages, .facts, .assurances { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .editorial { grid-template-columns: minmax(0, 1fr); }
  .editorial-cloth { max-width: 420px; }
}

@media (max-width: 760px) {
  :root { --header-h: 60px; }

  .grid, .grid-two { grid-template-columns: minmax(0, 1fr); }
  .card::before { display: none !important; }

  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 18px;
    display: none;
  }
  .nav-open .nav { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { color: var(--accent-deep); }
  .nav-toggle { display: grid; }
  .header-inner { position: relative; }

  .form-row, .form-row-thirds { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }

  .legal-toc a { padding-block: 5px; font-size: var(--fs-tiny); }
  .legal-body h2 { grid-template-columns: 1.55em minmax(0, 1fr); font-size: 1.2rem; }
}

/* Two columns of contents on a small tablet, but not on a phone, where a
   160px column breaks half the labels across three lines. */
@media (max-width: 760px) and (min-width: 481px) {
  .legal-toc ol { border-left: 0; columns: 2; column-gap: 22px; }
  .legal-toc a { margin-left: 0; padding-left: 0; border-left: 0; }
  .legal-toc a[aria-current="true"] { color: var(--accent-deep); }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-inline: 0; }
  .card::before { display: none; }
  .card { padding-inline: 0; }
  .buy-row { flex-wrap: wrap; }
  .buy-row .button { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion — the cloth is simply already woven
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .loom-warp { transform: scaleY(1); }
  .loom-weft { transform: scaleX(1); }
  .hero-type > * { opacity: 1; }
}

@media print {
  .site-header, .site-footer { display: none !important; }

  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
  .legal-body { max-width: none; }
  .legal-body section { break-inside: avoid; }
}