/* ============================================================
   CHAOTIC ROPE
   Everything you might want to change is in :root below.
   ============================================================ */

:root {
  /* ground + surfaces */
  --ink:        #08080A;
  --ink-2:      #101015;
  --ink-3:      #16161D;
  --hair:       #24242E;

  /* text */
  --bone:       #EDEAF2;
  --ash:        #9A96A6;
  --ash-dim:    #6E6A7A;

  /* accents, straight from the logo */
  --pink:       #F1256E;
  --magenta:    #FF2CED;
  --yellow:     #FFEB2C;
  --orange:     #FF8030;
  --cyan:       #03AFD6;
  --violet:     #6274F2;
  --crimson:    #9E0B3C;

  --dye: linear-gradient(90deg,
      var(--violet), var(--cyan), var(--magenta),
      var(--pink), var(--orange), var(--yellow));

  --display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1100px;
  --gut: clamp(1rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--magenta); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow); color: #000; padding: .6rem 1rem;
  font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: 0; }

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

/* ---------- the dye line: full-bleed gradient rule ---------- */
.dyeline {
  height: 2px;
  background: var(--dye);
  border: 0;
  margin: 0;
  opacity: .85;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(8, 8, 10, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  flex-wrap: wrap;
}
.topbar .mark {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .22em;
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}
.topbar nav {
  display: flex;
  gap: clamp(.75rem, 3vw, 1.75rem);
  flex-wrap: wrap;
}
.topbar nav a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover { color: var(--bone); border-bottom-color: var(--magenta); }

/* ---------- hero: full-bleed photo, logo sits on it ---------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(200px, 24vw, 320px);

  /* the hero photo. swap this file to change it */
  background-image: url("../images/RopeHero.jpg");
  background-size: cover;
  background-position: center left;
  background-color: var(--ink-2);
}

/* scrim: keeps the logo readable whatever the photo does,
   weighted to the right where the logo sits */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.15) 40%, rgba(8,8,10,.70) 100%),
    linear-gradient(180deg, rgba(8,8,10,.45) 0%, transparent 35%, rgba(8,8,10,.55) 100%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-block: clamp(1rem, 3vw, 1.6rem);
}

/* logo and tagline travel together, so they stay aligned to each other.
   the width lives here, not on the image, so the tagline can centre on it */
.hero-mark {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: min(340px, 100%);
}

.hero img.logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.65));
}

.hero .tagline {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(.85rem, 1.7vw, 1.08rem);
  letter-spacing: .07em;
  line-height: 1.3;
  color: var(--bone);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}

/* Phones: the logo sits on the photo as it does on desktop, but small enough
   that the hero box stays wide, so the photo is barely cropped. */
@media (max-width: 720px) {
  .hero { min-height: 0; background-position: center; }
  .hero .wrap {
    justify-content: center;
    padding-block: clamp(.9rem, 4vw, 1.4rem);
  }
  .hero-mark {
    width: min(250px, 66%);
    gap: .45rem;
    margin-inline: auto;
  }
  .hero .tagline {
    font-size: .8rem;
    letter-spacing: .05em;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .7rem 1.2rem;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--bone);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn:hover { border-color: var(--magenta); color: var(--bone); background: rgba(255,44,237,.10); }
.btn-solid {
  background: var(--bone);
  color: #08080A;
  border-color: var(--bone);
}
.btn-solid:hover { background: var(--yellow); border-color: var(--yellow); color: #08080A; }

/* ---------- the line under the hero ---------- */
.creed {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(.95rem, 2.4vw, 1.35rem);
  text-align: center;
}

/* soft bloom behind the words so the strip has some depth */
.creed::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 94%);
  height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(241,37,110,.11), transparent 72%);
  pointer-events: none;
}

.creed .wrap {
  position: relative;
  max-width: 54rem;
}

/* the flourish: a lit diamond between two fading dye lines */
.creed-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: min(300px, 76%);
  margin: 0 auto clamp(.5rem, 1.5vw, .75rem);
}

.creed-orn::before,
.creed-orn::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
}
.creed-orn::before {
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan));
}
.creed-orn::after {
  background: linear-gradient(90deg, var(--pink), var(--yellow), transparent);
}

.creed-orn i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--pink);
  box-shadow: 0 0 12px rgba(241, 37, 110, .6);
}

.creed p {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.45;
  letter-spacing: .012em;
  color: var(--bone);
  text-wrap: balance;
}

.creed p .nb { white-space: nowrap; }

/* the payoff, underscored in the dye gradient */
.creed p .hand {
  position: relative;
  white-space: nowrap;
  letter-spacing: .025em;
  padding-bottom: .14em;
}
.creed p .hand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--dye);
}

/* ---------- sections ---------- */
section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }

.sec-head { margin-bottom: 2rem; }
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash-dim);
  margin: 0 0 .5rem;
}
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
.sec-head p {
  margin: 0;
  color: var(--ash);
  max-width: 60ch;
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .02em;
  margin: 0;
}

/* ---------- stock colour grid ---------- */
.grid-stock {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: .85rem;
}
.swatch-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}
.swatch-card .bar {
  height: 10px;
  background: var(--c);
  transition: height .18s ease;
}
.swatch-card:hover .bar { height: 18px; }
.swatch-card .shot {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}
.swatch-card .meta {
  padding: .85rem .95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.swatch-card .name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.price {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hexcode {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--ash-dim);
  text-transform: uppercase;
}
.swatch-card .btn { margin-top: auto; width: 100%; text-align: center; }

/* ---------- multicolor ---------- */
.grid-multicolor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: .85rem;
}
.multicolor {
  background: var(--ink-2);
  border: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
}
.multicolor .shot { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.multicolor .meta {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.multicolor .colors {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.multicolor .colors li {
  width: 26px; height: 8px;
}
.multicolor .desc { margin: 0; color: var(--ash); font-size: .92rem; }
.chip {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border: 1px solid currentColor;
  align-self: flex-start;
}
.chip.available { color: var(--cyan); }
.chip.sold { color: var(--ash-dim); }
/* optional, for a multicolor rope that genuinely will not be repeated */
.chip.unique { color: var(--yellow); }

/* a card can carry both Available and One of one */
.multicolor .chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-self: flex-start;
}
.multicolor .chips .chip { align-self: auto; }
.multicolor.is-sold .shot { filter: grayscale(.85) brightness(.55); }

/* a design that is no longer stocked but can still be matched to order.
   the section it lives in hides itself while its grid has no cards in it */
.chip.order { color: var(--yellow); }

.prev-designs { position: relative; }
.prev-designs::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--dye);
  opacity: .85;
}
.prev-designs:not(:has(.multicolor)) { display: none; }
.multicolor .btn { margin-top: auto; }
.multicolor .btn[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

/* ---------- custom order ---------- */
.panel {
  background: var(--ink-2);
  border: 1px solid var(--hair);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
label .req { color: var(--pink); }
.hint {
  font-size: .82rem;
  color: var(--ash-dim);
  margin: 0;
}
input, select, textarea {
  font-family: var(--body);
  font-size: .95rem;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hair);
  padding: .6rem .7rem;
  width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--ash-dim); }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
select { appearance: none; background-image: none; }
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.estimate {
  margin-top: 1.25rem;
  border-top: 1px solid var(--hair);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.estimate .label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.estimate .total {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.estimate .note { font-size: .8rem; color: var(--ash-dim); width: 100%; margin: 0; }

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- the three option panels on Custom Orders ---------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}
.opt {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--magenta);
  background: var(--ink-2);
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.opt-n {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.opt p { margin: 0; color: var(--ash); font-size: .93rem; }
.opt p.opt-lead {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--bone);
  line-height: 1.25;
}
.opt strong { color: var(--bone); font-weight: 500; }
.opt ul.plainlist { padding-left: 1rem; }

/* ---------- call to action band ---------- */
.cta-band {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border: 1px solid var(--hair);
  background: var(--ink-2);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.cta-band .hint { max-width: 48ch; }

/* ---------- colour picker ---------- */
.picker {
  border: 1px solid var(--hair);
  background: var(--ink);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.swatch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .4rem;
}
.sw {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--bone);
  font-family: var(--body);
  font-size: .85rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sw:hover:not(:disabled) { border-color: var(--ash-dim); background: var(--ink-3); }
.sw-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: var(--c);
  border: 1px solid rgba(255,255,255,.22);
}
.sw-name { min-width: 0; line-height: 1.25; }
.sw[aria-pressed="true"] {
  border-color: var(--magenta);
  background: rgba(255,44,237,.10);
}
.sw[aria-pressed="true"] .sw-dot { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--magenta); }
.sw:disabled { opacity: .35; cursor: not-allowed; }

.picker-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
}
.picker-custom label {
  margin-right: .2rem;
}
.picker-custom input[type="color"] {
  width: 46px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  cursor: pointer;
}
.picker-custom .btn { padding: .5rem .9rem; }

.picker-chosen {
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
ol.chosen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  counter-reset: pick;
}
ol.chosen li {
  counter-increment: pick;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  padding: .3rem .35rem .3rem .5rem;
  font-size: .85rem;
}
ol.chosen li::before {
  content: counter(pick);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink);
  background: var(--bone);
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
ol.chosen .chip-dot {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid rgba(255,255,255,.22);
}

/* honeypot */
.gotcha { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- specs + process ---------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 5vw, 3rem);
}
dl.specs { margin: 0; }
dl.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--hair);
}
dl.specs dt {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
dl.specs dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

ol.process {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
ol.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .75rem;
  align-items: start;
}
ol.process li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--magenta);
  padding-top: .18rem;
  font-variant-numeric: tabular-nums;
}
ol.process p { margin: 0; color: var(--ash); font-size: .93rem; }
ol.process strong { color: var(--bone); font-weight: 500; }

.callout {
  border-left: 2px solid var(--orange);
  padding: .1rem 0 .1rem 1rem;
  color: var(--ash);
  font-size: .93rem;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--hair);
  padding-block: 2.5rem 3rem;
  color: var(--ash-dim);
  font-size: .85rem;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
/* the suspension disclaimer needs to be read, not skimmed past */
footer .warn {
  color: var(--orange);
  font-weight: 500;
}
footer .age {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--hair);
  padding: .3rem .55rem;
}

/* ---------- nav badge ---------- */
.cartcount {
  display: inline-block;
  margin-left: .4em;
  min-width: 1.35em;
  padding: 0 .3em;
  text-align: center;
  background: var(--magenta);
  color: #08080A;
  font-size: .68rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ---------- the three doors on the front page ---------- */
.linkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
}
.linkbox {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  text-decoration: none;
  color: var(--bone);
  transition: border-color .18s, transform .18s, background .18s;
}
.linkbox:hover, .linkbox:focus-visible {
  border-color: var(--ash-dim);
  background: var(--ink-3);
  color: var(--bone);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .linkbox:hover, .linkbox:focus-visible { transform: none; }
}

.lb-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  height: 92px;
}
.lb-swatches i { display: block; }
.lb-spectrum {
  display: block;
  background: var(--dye);
}

.lb-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.2rem 1.25rem;
  flex: 1;
}
.lb-eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.lb-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
}
.lb-desc { color: var(--ash); font-size: .93rem; }
.lb-foot {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.lb-price {
  font-family: var(--mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.lb-go {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magenta);
}

/* ---------- bulk discount promo ---------- */
.promo {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-top: 0;
  padding: clamp(1.25rem, 4vw, 1.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

/* the dye line, doubling as the promo's top edge */
.promo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--dye);
}

/* warm glow behind the numbers so the eye lands there */
.promo::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -60%;
  width: 46%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255,235,44,.13), transparent 70%);
  pointer-events: none;
}

.promo-body {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

.promo-kicker {
  margin: 0 0 .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--magenta);
}

.promo-head {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  line-height: 1.1;
  color: var(--bone);
  text-wrap: balance;
}
.promo-amt {
  font-weight: 500;
  color: var(--yellow);
}

.promo-sub {
  margin: 0;
  color: var(--ash);
  font-size: .93rem;
  max-width: 52ch;
}

.promo-prices {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.promo-price {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.promo-price .lbl {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}
.promo-price .nums {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.promo-price s {
  font-size: 1.15rem;
  color: var(--ash-dim);
  text-decoration-thickness: 1px;
}
.promo-price b {
  font-size: clamp(1.75rem, 4.2vw, 2.45rem);
  font-weight: 500;
  color: var(--yellow);
  line-height: 1;
}

@media (max-width: 560px) {
  .promo-prices { gap: 1.25rem 2rem; }
}

/* ---------- story rows: photo beside copy, alternating sides ---------- */
.story {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
  padding-block: clamp(1.9rem, 5vw, 2.9rem);
  border-top: 1px solid var(--hair);
}
.story:first-child { border-top: 0; padding-top: 0; }
.story:last-child { padding-bottom: 0; }
.story.flip { flex-direction: row-reverse; }

.story-img {
  position: relative;
  flex: 0 0 clamp(180px, 24%, 280px);
  margin: 0;
  line-height: 0;
}
.story-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--hair);
}
/* dye bar along the bottom edge, same note as the creed underline */
.story-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--dye);
}

.story-copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: 52ch;
}
/* on the mirrored rows, keep the copy up against the photo */
.story.flip .story-copy { margin-left: auto; }
.story-copy .eyebrow { color: var(--ash-dim); }
.story-copy h2 {
  margin: .3rem 0 .75rem;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}
.story-copy p { margin: 0 0 .7rem; color: var(--ash); }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy p.first { color: var(--bone); font-size: 1.05rem; }

.story-link {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.story-link:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

@media (max-width: 760px) {
  .story,
  .story.flip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .story-img { flex: 0 0 auto; width: min(260px, 100%); }
  .story.flip .story-copy { margin-left: 0; }
  .story-copy { max-width: none; }
}

/* ---------- picks carried into the order form ---------- */
.picked {
  border: 1px solid var(--hair);
  background: var(--ink);
  padding: .9rem 1rem 1rem;
  margin-bottom: 1.5rem;
}
.picked-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.picked-head .label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.picked ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.picked li {
  display: flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--hair);
  padding: .25rem .3rem .25rem .6rem;
  font-size: .85rem;
}
.pick-x {
  background: none;
  border: 0;
  color: var(--ash-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .1rem .3rem;
}
.pick-x:hover { color: var(--pink); }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.linkish:hover { color: var(--magenta); }

.btn.is-added { border-color: var(--cyan); color: var(--cyan); }

ul.plainlist {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ash);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
ul.plainlist li { font-size: .93rem; }

/* ---------- editor notes (delete the class to hide) ---------- */
.todo {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--yellow);
  padding: .5rem .7rem;
  margin-bottom: 1.25rem;
}


/* =========================================================================
   MOBILE COMPACTION
   Phones show the same content, just tighter: smaller type, smaller photos,
   two-up catalog grids and less air between things, so the pages are a
   fraction of the scroll they used to be. Desktop is untouched.
   ========================================================================= */
@media (max-width: 720px) {

  body { font-size: 15px; line-height: 1.5; }

  /* --- top bar --- */
  .topbar .wrap {
    min-height: 0;
    gap: .15rem .6rem;
    padding-block: .45rem;
    justify-content: center;
    text-align: center;
  }
  .topbar .mark { font-size: .68rem; letter-spacing: .16em; flex: 1 0 100%; }
  .topbar nav { gap: .6rem; justify-content: center; }
  .topbar nav a { font-size: .63rem; letter-spacing: .05em; padding-block: .15rem; }

  /* --- section rhythm --- */
  section { padding-block: 1.6rem; }
  .sec-head { margin-bottom: 1rem; }
  .sec-head p { font-size: .9rem; }
  h1, h2 { font-size: 1.3rem; margin-bottom: .35rem; }
  h3 { font-size: .98rem; }
  .eyebrow { font-size: .62rem; letter-spacing: .13em; margin-bottom: .3rem; }
  .dyeline { height: 1px; }

  /* --- the creed line --- */
  .creed { padding-block: 1rem; }
  .creed-orn { width: min(190px, 60%); margin-bottom: .55rem; gap: .5rem; }
  .creed-orn i { width: 5px; height: 5px; }
  .creed p { font-size: .95rem; line-height: 1.4; }

  /* --- the three doors --- */
  .linkboxes { gap: .7rem; }
  .lb-swatches { height: 46px; }
  .lb-body { padding: .7rem .8rem .8rem; gap: .3rem; }
  .lb-eyebrow { font-size: .6rem; }
  .lb-title { font-size: 1.15rem; }
  .lb-desc { font-size: .85rem; }
  .lb-foot { padding-top: .55rem; }
  .lb-price { font-size: .78rem; }
  .lb-go { font-size: .66rem; }

  /* --- bulk discount --- */
  .promo { margin-top: 1rem; padding: .95rem 1rem 1.05rem; gap: .8rem 1.5rem; }
  .promo-kicker { font-size: .62rem; margin-bottom: .3rem; }
  .promo-head { font-size: 1.45rem; margin-bottom: .35rem; }
  .promo-sub { font-size: .85rem; }
  .promo-prices { gap: 1.25rem; }

  /* --- story rows: keep the photo beside the copy, just small --- */
  .story,
  .story.flip {
    flex-direction: row;
    align-items: flex-start;
    gap: .9rem;
    padding-block: 1.1rem;
  }
  .story.flip { flex-direction: row-reverse; }
  .story-img { flex: 0 0 clamp(96px, 32%, 132px); width: auto; }
  .story-img::after { height: 2px; }
  .story-copy { max-width: none; }
  .story-copy h2 { font-size: 1.15rem; margin: .15rem 0 .4rem; }
  .story-copy p { font-size: .85rem; margin-bottom: .45rem; }
  .story-copy p.first { font-size: .9rem; }
  .story-link { font-size: .68rem; }

  /* --- catalog grids go two-up --- */
  .grid-stock,
  .grid-multicolor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  .swatch-card .bar { height: 8px; }
  .swatch-card .meta { padding: .55rem .6rem .65rem; gap: .35rem; }
  .multicolor .meta { padding: .6rem .65rem .7rem; gap: .4rem; }
  .price { font-size: .76rem; }
  .hexcode { font-size: .6rem; letter-spacing: .03em; }
  .chip { font-size: .58rem; }
  .btn { font-size: .66rem; padding: .5rem .6rem; letter-spacing: .06em; }

  /* --- long-form pages --- */
  .cards-3, .two-col { gap: .9rem; }
  .opt { padding: .9rem 1rem 1rem; }
  .callout { font-size: .85rem; }
  .process li p { font-size: .88rem; }
  .cta-band { padding: 1rem; gap: .8rem; }

  /* --- order form --- */
  .field label, .field .hint { font-size: .8rem; }
  .picker .sw { width: 34px; height: 34px; }

  /* --- footer --- */
  footer { padding-block: 1.4rem 1.8rem; font-size: .78rem; }
  footer .wrap { gap: .7rem 1rem; }
  footer .age { font-size: .64rem; padding: .22rem .45rem; }
}


/* =========================================================================
   THUMBNAILS + THE LARGER VIEW
   Catalog cards are small tiles carrying a photo, a name and a price. Tapping
   the photo opens the full-size shot in a dialog, and everything the tile has
   no room for (the hex, the chip, Add to order) lives in there instead.
   The tile markup is unchanged: those parts are hidden here and read by the
   script, so a card pasted in the old shape still works.
   ========================================================================= */

/* the photo is wrapped in a button by JS/script.js */
.zoom {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}
.zoom::after {
  content: "⤢";
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1;
  padding: .2rem .28rem;
  color: var(--bone);
  background: rgba(8, 8, 10, .62);
  opacity: 0;
  transition: opacity .15s ease;
}
.zoom:hover::after,
.zoom:focus-visible::after { opacity: 1; }
.zoom:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }

/* tile: name and price only */
.swatch-card .meta,
.multicolor .meta { padding: .5rem .55rem .62rem; gap: .2rem; }
.swatch-card h3,
.multicolor h3 { font-size: .92rem; }
.price { font-size: .74rem; }
.swatch-card .bar { height: 7px; }
.swatch-card:hover .bar { height: 12px; }

.swatch-card .hexcode,
.swatch-card .meta > .btn,
.multicolor .meta > .btn,
.multicolor .meta > .chip,
.multicolor .meta > .chips { display: none; }

/* except the one that changes what the button does */
.multicolor .meta > .chip.order {
  display: block;
  align-self: flex-start;
  font-size: .56rem;
  letter-spacing: .06em;
  padding: .15rem .32rem;
  margin-bottom: .1rem;
}

/* ---------- the dialog ---------- */
.lightbox {
  position: fixed;
  margin: auto;
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  color: var(--bone);
  width: min(92vw, 460px);
  max-width: 92vw;
  max-height: 92vh;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(4, 4, 6, .84); }

.lb-dye {
  display: block;
  height: 3px;
  background: var(--dye);
}

.lb-figure { margin: 0; background: var(--ink); }
.lb-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  margin-inline: auto;
}

.lb-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--bone);
  background: rgba(8, 8, 10, .68);
  border: 1px solid var(--hair);
  cursor: pointer;
}
.lb-close:hover { background: var(--crimson); border-color: var(--crimson); }

.lb-info {
  padding: .85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.lb-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .01em;
}
.lb-price {
  font-family: var(--mono);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lb-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.lb-add { width: 100%; text-align: center; }
.lb-add[hidden] { display: none; }

/* step through the grid without closing */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 3rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--bone);
  background: rgba(8, 8, 10, .55);
  border: 0;
  cursor: pointer;
  opacity: .65;
}
.lb-nav:hover { opacity: 1; background: rgba(8, 8, 10, .8); }
.lb-prev { left: 0; }
.lb-next { right: 0; }
.lb-nav[hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox { width: 94vw; }
  .lb-figure img { max-height: 56vh; }
  .lb-name { font-size: 1.1rem; }
  .lb-info { padding: .7rem .8rem .85rem; }
}

/* ---------- stock, written by builder.html ---------- */
/* Cards carry data-stock. The line only appears when the number is low, and a
   card at zero picks up the sold-out treatment that already existed. */
.stock {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash-dim);
  align-self: flex-start;
}
.stock.low { color: var(--orange); }
.stock.out { color: var(--ash-dim); }

.swatch-card.is-sold .shot { filter: grayscale(.85) brightness(.55); }
.swatch-card.is-sold .bar { opacity: .35; }
.swatch-card .btn[aria-disabled="true"],
.multicolor .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- category blocks inside a catalog page ---------- */
.cat-block + .cat-block { margin-top: clamp(1.9rem, 5vw, 3rem); }
.cat-head { margin-bottom: 1rem; }
.cat-title {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  letter-spacing: .015em;
}
.cat-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--hair), transparent);
}
.cat-note {
  margin: 0;
  color: var(--ash);
  font-size: .92rem;
  max-width: 62ch;
}
@media (max-width: 720px) {
  .cat-head { margin-bottom: .7rem; }
  .cat-note { font-size: .84rem; }
}


/* ============================================================
   THE MESSAGE POPUP
   A link carrying data-ask opens this. JS/script.js builds the
   dialog, so no page needs the markup pasted into it.
   ============================================================ */

.ask-link {
  color: var(--pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 37, 110, .45);
  cursor: pointer;
}
.ask-link:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.askbox {
  position: fixed;
  margin: auto;
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  color: var(--bone);
  width: min(92vw, 420px);
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
}
.askbox::backdrop { background: rgba(4, 4, 6, .84); }

.ask-dye {
  display: block;
  height: 3px;
  background: var(--dye);
}

.ask-body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.1rem 1.15rem;
}

.ask-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ask-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0;
}
.ask-x {
  background: none;
  border: 0;
  color: var(--ash-dim);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 .15rem;
  cursor: pointer;
}
.ask-x:hover { color: var(--pink); }

.askbox textarea { min-height: 110px; }

.ask-msg {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ash-dim);
  margin: 0;
  min-height: 1em;
}
.ask-msg.bad  { color: var(--orange); }
.ask-msg.good { color: var(--cyan); }

.ask-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .ask-body { padding: .85rem .9rem 1rem; gap: .7rem; }
  .ask-actions { justify-content: stretch; }
  .ask-actions .btn { flex: 1; }
}


/* ============================================================
   POPUP THEME + CTA BUTTON
   Black surface, accent trim. Scoped to .askbox and .btn-cta so
   nothing else on the site shifts.
   ============================================================ */

/* the dialog reads as black, not as a grey panel */
.askbox {
  background: var(--ink);
  border-color: rgba(255, 44, 237, .26);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .66);
}
.askbox::backdrop { background: rgba(4, 4, 6, .88); }

.ask-head {
  border-bottom: 1px solid var(--hair);
  padding-bottom: .7rem;
}

/* fields sit just above the black, and pick up an accent on focus */
.askbox input,
.askbox textarea {
  background: var(--ink-2);
  border-color: var(--hair);
  transition: border-color .15s;
}
.askbox input:focus,
.askbox textarea:focus {
  outline: none;
  border-color: var(--pink);
}
.askbox .field:has(:focus) label { color: var(--pink); }

/* send is the primary action, so it carries the primary accent */
.ask-send {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #08080A;
}
.ask-send:hover:not(:disabled) {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #08080A;
}
.ask-send:disabled { opacity: .55; cursor: default; }

/* ---------- the big call to action ---------- */
.btn-cta {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #08080A;
  font-size: .92rem;
  letter-spacing: .12em;
  padding: 1rem 2rem;
}
.btn-cta:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #08080A;
}

/* The CTA sits centred in the space left over beside the text block.
   Matches .btn, not .btn-cta, so the centring survives a change of button
   style: custom-orders uses .btn-solid, the FAQ uses .btn-cta. */
.cta-band .btn { margin-left: auto; margin-right: auto; }

@media (max-width: 480px) {
  .btn-cta { width: 100%; text-align: center; padding: .95rem 1.2rem; font-size: .86rem; }
  .cta-band .btn { width: 100%; text-align: center; }
}


/* =========================================================================
   STORY GRID, FOOTER CREDIT, FAQ
   Added 20 Sep 2026. Appended on purpose: these rules override the ones
   above by source order, so nothing earlier in the file had to move.
   ========================================================================= */

/* the front page starts sooner now that the hero is a banner */
#shop { padding-top: clamp(1.4rem, 3.5vw, 2.25rem); }

/* ---------- stories, two by two ---------- */
.stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.stories .story {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--ink-2);
}
.stories .story-img {
  flex: 0 0 auto;
  width: 100%;
}
/* landscape crop so a card is not a column of photo. change the ratio here */
.stories .story-img img {
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--hair);
}
.stories .story-copy {
  max-width: none;
  margin: 0;
  padding: clamp(.9rem, 2.2vw, 1.3rem);
}

/* one column before the cards get narrow enough to look mean */
@media (max-width: 860px) {
  .stories { grid-template-columns: 1fr; }
}

/* phones keep the old compact row: small photo beside the copy */
@media (max-width: 720px) {
  .stories { gap: 0; }
  .stories .story {
    flex-direction: row;
    align-items: flex-start;
    gap: .9rem;
    padding-block: 1.1rem;
    border: 0;
    border-top: 1px solid var(--hair);
    background: none;
  }
  .stories .story:first-child { border-top: 0; padding-top: 0; }
  .stories .story-img { flex: 0 0 clamp(96px, 32%, 132px); width: auto; }
  .stories .story-img img { aspect-ratio: 1 / 1; border: 1px solid var(--hair); }
  .stories .story-copy { padding: 0; }
}

/* ---------- footer photo credit ---------- */
footer .credit {
  flex: 1 0 100%;
  margin: .4rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
  font-size: .78rem;
  color: var(--ash-dim);
}
footer .credit a {
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
footer .credit a:hover { color: var(--pink); border-bottom-color: var(--pink); }

@media (max-width: 720px) {
  footer .credit { font-size: .72rem; padding-top: .7rem; margin-top: .2rem; }
}

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > .cat-title { margin-bottom: .35rem; }
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
  margin-top: .9rem;
}
.faq-item {
  border-bottom: 1px solid var(--hair);
  padding: 1rem 0 1.1rem;
  max-width: 78ch;
}
.faq-q {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--bone);
  margin: 0 0 .45rem;
}
.faq-a {
  margin: 0;
  color: var(--ash);
  font-size: .93rem;
}
/* placeholder styling. delete the class on a line once it has a real answer */
.faq-a.is-todo {
  color: var(--ash-dim);
  font-style: italic;
  border-left: 2px solid var(--hair);
  padding-left: .7rem;
}

@media (max-width: 720px) {
  .faq-group { margin-bottom: 1.6rem; }
  .faq-item { padding: .8rem 0 .85rem; }
  .faq-q { font-size: .95rem; }
  .faq-a { font-size: .85rem; }
}

/* five nav items have to fit one line on a phone */
@media (max-width: 720px) {
  .topbar nav { gap: .5rem; }
  .topbar nav a { font-size: .6rem; letter-spacing: .04em; }
}


/* ---------- bulk promo: centred prices, asterisk, fine print ---------- */

/* auto margins on both sides split the space left over beside the copy,
   which centres the prices between the text block and the box edge */
.promo-prices {
  margin-left: auto;
  margin-right: auto;
}

.promo-star {
  font-size: .42em;
  vertical-align: super;
  line-height: 0;
  margin-left: .12em;
  color: var(--yellow);
}

.promo-fine {
  position: relative;
  flex: 1 0 100%;
  margin: .1rem 0 0;
  font-size: .72rem;
  letter-spacing: .01em;
  color: var(--ash-dim);
}

@media (max-width: 720px) {
  .promo-fine { font-size: .66rem; margin-top: 0; }
  .promo-prices { margin-left: 0; margin-right: auto; }
}

/* small print inside a story card, still readable */
.story-copy .fine {
  display: inline-block;
  margin-top: .2rem;
  font-size: .85em;
  line-height: 1.45;
  color: var(--ash-dim);
}


/* ---------- hero photo, 30% brighter ---------- */
/* The photo moves onto its own layer so brightness() lands on the image and
   not on the logo or the tagline. The scrim above it is unchanged, so the
   layers stack: photo (0), scrim (1), logo and tagline (2). */
.hero { background-image: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/RopeHero.jpg");
  background-size: cover;
  background-position: center left;
  filter: brightness(1.3);
  pointer-events: none;
}
.hero::before { z-index: 1; }
.hero .wrap { z-index: 2; }

@media (max-width: 720px) {
  .hero::after { background-position: center; }
}


/* ---------- stories scaled down about 40% ---------- */
/* The grid gets a max width and centres, so each card is roughly 60% of the
   width it had. Type and padding scale with it so the cards stay in
   proportion instead of turning into narrow columns of text. */
.stories {
  max-width: 62%;
  margin-inline: auto;
  gap: clamp(.8rem, 1.8vw, 1.2rem);
}
.stories .story-copy { padding: clamp(.7rem, 1.6vw, .95rem); }
.stories .story-copy h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  margin: .1rem 0 .45rem;
}
.stories .story-copy p { font-size: .84rem; margin-bottom: .5rem; }
.stories .story-copy p.first { font-size: .89rem; }
.stories .story-link { font-size: .7rem; }

@media (max-width: 1100px) {
  .stories { max-width: 80%; }
}
@media (max-width: 860px) {
  .stories { max-width: min(430px, 100%); }
}
@media (max-width: 720px) {
  .stories { max-width: 100%; margin-inline: 0; gap: 0; }
  .stories .story-copy { padding: 0; }
}


/* =========================================================================
   PAGE HEADS
   The title leads, the eyebrow supports it, and the numbers people came for
   sit in a row of small tiles instead of four spaced paragraphs.
   ========================================================================= */

.sec-head .lede { color: var(--ash); }

.factbar {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.factbar li {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  padding: .45rem .7rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.factbar b {
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.head-note {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--ash-dim);
  max-width: 72ch;
}

/* phones: the heading has to outweigh the eyebrow above it */
@media (max-width: 720px) {
  .sec-head { margin-bottom: 1.1rem; }
  .sec-head .eyebrow {
    font-size: .58rem;
    letter-spacing: .09em;
    margin-bottom: .2rem;
  }
  .sec-head h1, .sec-head h2 { font-size: 1.55rem; margin-bottom: .45rem; }
  .sec-head p, .sec-head .lede { font-size: .88rem; }
  .factbar { gap: .35rem; margin-top: .8rem; }
  .factbar li {
    font-size: .6rem;
    letter-spacing: .06em;
    padding: .35rem .5rem;
    gap: .3rem;
  }
  .factbar b { font-size: .95rem; }
  .head-note { font-size: .74rem; margin-top: .5rem; }
}


/* ---------- FAQ: one collapsible row per question ---------- */
/* Native <details>, so it works with no JavaScript and the browser handles
   keyboard and find-in-page. The marker is drawn with ::after instead of the
   default triangle. */

.faq-list details.faq-item { padding: 0; }

summary.faq-q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .9rem 0;
  cursor: pointer;
  list-style: none;
  transition: color .15s;
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ash-dim);
  transition: color .15s;
}
summary.faq-q:hover { color: var(--pink); }
summary.faq-q:hover::after { color: var(--pink); }
summary.faq-q:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }

details.faq-item[open] > summary.faq-q { color: var(--bone); }
details.faq-item[open] > summary.faq-q::after { content: "\2212"; color: var(--pink); }

details.faq-item > .faq-a {
  margin: 0;
  padding: 0 0 1rem;
  max-width: 72ch;
}

@media (max-width: 720px) {
  summary.faq-q { padding: .7rem 0; }
  summary.faq-q::after { font-size: 1rem; }
  details.faq-item > .faq-a { padding-bottom: .8rem; }
}


/* =========================================================================
   NAV BAR, 20 Sep 2026
   Dot separators in the logo's colours, the current page locked and marked
   with the dye line, and the wordmark carrying the spectrum.
   ========================================================================= */

.topbar nav {
  --navgap: clamp(.75rem, 3vw, 1.75rem);
  gap: var(--navgap);
  align-items: center;
}
.topbar nav > * { position: relative; }

/* the separators live in the gap, so they are never part of a link */
.topbar nav > * + *::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--navgap) / -2);
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--violet);
  pointer-events: none;
}
.topbar nav > *:nth-child(3)::before { background: var(--cyan); }
.topbar nav > *:nth-child(4)::before { background: var(--pink); }
.topbar nav > *:nth-child(5)::before { background: var(--yellow); }

/* the page you are on is a span, not a link, so there is nothing to click */
.topbar nav .current {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.topbar nav .current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dye);
}

/* the wordmark takes the logo's spectrum. guarded, since the text is
   transparent and would vanish where background-clip is unsupported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .topbar .mark {
    background: var(--dye);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .topbar .mark:hover { filter: brightness(1.18) saturate(1.1); }
}

@media (max-width: 720px) {
  .topbar nav { --navgap: .5rem; }
  .topbar nav .current {
    font-size: .6rem;
    letter-spacing: .04em;
    padding-block: .15rem;
  }
  .topbar nav > * + *::before { width: 2.5px; height: 2.5px; }
}


/* =========================================================================
   FAQ COLOUR
   Each group carries one colour from the dye line: a lit diamond on the
   heading, the rule beside it, and the open row's edge.
   ========================================================================= */

.faq-group { --acc: var(--pink); }
.faq-group.acc-1 { --acc: var(--violet); }
.faq-group.acc-2 { --acc: var(--cyan); }
.faq-group.acc-3 { --acc: var(--magenta); }
.faq-group.acc-4 { --acc: var(--pink); }
.faq-group.acc-5 { --acc: var(--orange); }
.faq-group.acc-6 { --acc: var(--yellow); }

.faq-page .eyebrow { color: var(--magenta); }

.faq-group > .cat-title { gap: .7rem; color: var(--bone); }
.faq-group > .cat-title::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--acc);
  box-shadow: 0 0 10px rgba(241, 37, 110, .45);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 60%, transparent);
}
.faq-group > .cat-title::after {
  background: linear-gradient(90deg, var(--acc), transparent 70%);
  opacity: .5;
}

.faq-list details.faq-item {
  border-left: 2px solid transparent;
  transition: background .18s, border-color .18s;
}
.faq-list details.faq-item[open] {
  background: var(--ink-2);
  border-left-color: var(--acc);
  padding-inline: .9rem;
}

summary.faq-q:hover,
summary.faq-q:hover::after { color: var(--acc); }
details.faq-item[open] > summary.faq-q { color: var(--bone); }
details.faq-item[open] > summary.faq-q::after { color: var(--acc); }

/* keep every rule on the page ending at the same right edge */
.faq-group > .cat-title,
.faq-group > .cat-note,
.faq-list { max-width: 78ch; }

@media (max-width: 720px) {
  .faq-group > .cat-title::before { width: 6px; height: 6px; }
  .faq-list details.faq-item[open] { padding-inline: .7rem; }
}


/* ---------- story photos keep their own shape ---------- */
/* The cards used to crop every photo to 4:3, which cut the top and bottom off
   the landscape shots and most of a portrait one. Each photo now sets its own
   height from its real proportions, so nothing is cropped or stretched. The
   cards in a row still finish level, because the grid stretches them. */
.stories .story-img img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* cards end where their content ends, so a short photo beside a tall one
   leaves the gap outside the card instead of a void inside it */
.stories { align-items: start; }

@media (max-width: 720px) {
  .stories .story-img img { aspect-ratio: auto; }
}

/* ============================================================
   ORDER BUILDER  (21 Sep 2026)
   One card per rope. Replaces the single colour picker and the
   four quantity boxes. Appended, so it beats the older
   .sw / .swatch-list rules further up the file.
   ============================================================ */

.builder {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.builder-head { display: flex; flex-direction: column; gap: .4rem; }
.builder-head .hint { max-width: 62ch; }
/* .label is a class here, and the bare `label` rule further up does not reach it */
.builder-head .label,
.rope-chosen-label,
.addons-head {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.builder-head .label { font-size: .78rem; color: var(--bone); }
.builder-head .label .req { color: var(--pink); }

.rope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rope-empty {
  font-size: .85rem;
  color: var(--ash-dim);
  margin: 0;
  border: 1px dashed var(--hair);
  padding: 1rem 1.1rem;
}
.rope-empty a { color: var(--cyan); }

.builder-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- one rope ---------- */

.rope {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--magenta);
  background: var(--ink-2);
}
.rope.is-design { border-top-color: var(--cyan); }

.rope-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--hair);
}
.rope-n {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  flex: 0 0 auto;
}
.rope-kind {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border: 1px solid var(--hair);
  color: var(--ash);
  white-space: nowrap;
}
.rope-kind.is-empty { color: var(--ash-dim); border-style: dashed; }
.rope-kind.is-solid { color: var(--bone); border-color: var(--ash-dim); }
.rope-kind.is-multi { color: var(--magenta); border-color: var(--magenta); }
.rope-kind.is-natural { color: var(--orange); border-color: var(--orange); }

.rope-price {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--yellow);
  white-space: nowrap;
}
.rope-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--ash-dim);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 .1rem;
  cursor: pointer;
}
.rope-x:hover { color: var(--pink); }

.rope-body {
  padding: .95rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rope-chosen { display: flex; flex-direction: column; gap: .55rem; }
.rope-note { max-width: 62ch; }

.rope .picker { padding: .85rem; gap: .85rem; border-top: 0; }

/* one picker open at a time, so a four rope order still fits on a screen */
.rope-picker { border: 1px solid var(--hair); background: var(--ink); }
.rope-picker-sum {
  list-style: none;
  cursor: pointer;
  padding: .6rem .85rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.rope-picker-sum::-webkit-details-marker { display: none; }
.rope-picker-sum::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  color: var(--ash-dim);
}
.rope-picker[open] > .rope-picker-sum {
  color: var(--bone);
  border-bottom: 1px solid var(--hair);
}
.rope-picker[open] > .rope-picker-sum::after { content: "\2212"; color: var(--magenta); }
.rope-picker-sum:hover { color: var(--bone); background: var(--ink-3); }

/* the add ons sit apart from the ropes themselves */
.addons {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}
.addons-head { display: block; margin-bottom: .9rem; }

.rope-opts {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr);
  gap: .9rem;
  align-items: start;
}
.rope-opts .rope-qty { max-width: 8rem; }
/* .field sets display:flex, which outranks the browser's own [hidden] rule */
.rope-opts .field[hidden] { display: none; }

.form-error {
  margin: 1rem 0 0;
  border: 1px solid var(--pink);
  background: rgba(241,37,110,.08);
  color: var(--bone);
  padding: .7rem .85rem;
  font-size: .88rem;
}

/* ---------- swatches are photographs of the rope ---------- */
/* A flat hex cannot tell the truth about dye on jute, so the
   swatch is a crop of that colour's own catalogue photo. */

.rope .swatch-list {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .5rem;
}
.rope .sw {
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  overflow: hidden;
}
.rope .sw-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--c);
}
.rope .sw-name {
  display: block;
  padding: .35rem .4rem .4rem;
  font-size: .72rem;
  line-height: 1.2;
  text-align: center;
  color: var(--ash);
}
.rope .sw:hover:not(:disabled) { border-color: var(--ash-dim); background: var(--ink-3); }
.rope .sw:hover:not(:disabled) .sw-name { color: var(--bone); }
.rope .sw[aria-pressed="true"] {
  border-color: var(--magenta);
  background: rgba(255,44,237,.12);
  box-shadow: inset 0 0 0 1px var(--magenta);
}
.rope .sw[aria-pressed="true"] .sw-name { color: var(--bone); }
.rope .sw:disabled { opacity: .3; }

/* ---------- the chosen chips ---------- */

.rope ol.chosen li { padding: .3rem .35rem .3rem .4rem; }
.rope ol.chosen .chip-dot {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background-size: cover;
  background-position: center;
}
.rope ol.chosen li.is-design {
  counter-increment: none;
  font-family: var(--display);
  font-size: .98rem;
  color: var(--bone);
  padding: .35rem .7rem;
}
.rope ol.chosen li.is-design::before { content: none; }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  .rope-opts { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* the old rule sized .picker .sw as a 34px square; these are tiles now */
  .rope .sw { width: 100%; height: auto; }
  .rope .swatch-list { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; }
  .rope .sw-name { font-size: .66rem; padding: .3rem .25rem .35rem; }
  .rope-top { flex-wrap: wrap; gap: .5rem .6rem; }
  .rope-price { margin-left: 0; }
  .rope-x { margin-left: auto; }
  .rope-body { padding: .8rem .7rem; }
  .rope .picker { padding: .7rem .6rem; }
}

/* ============================================================
   WHAT COMES NEXT  (21 Sep 2026)
   Replaces the two-column block under the order form. The
   "What we need from you" list said what the builder already
   says, so it is gone. What is left is centred as a block and
   left aligned inside, at a size that reads as a section.
   ============================================================ */

.next-steps {
  max-width: 44rem;
  margin: clamp(2.5rem, 7vw, 4rem) auto 0;
  text-align: left;
}
.next-steps h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.2;
  color: var(--bone);
  margin: 0 0 1.3rem;
}
.next-steps ol.process { gap: 1.25rem; }
.next-steps ol.process li {
  grid-template-columns: 2.9rem 1fr;
  gap: 1rem;
}
.next-steps ol.process li::before {
  font-size: 1.02rem;
  padding-top: .12rem;
}
/* beats the .process li p size in the older phone block by specificity */
.next-steps ol.process p {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.55;
  color: var(--bone);
}

@media (max-width: 620px) {
  .next-steps ol.process li { grid-template-columns: 2.2rem 1fr; gap: .8rem; }
  .next-steps ol.process li::before { font-size: .92rem; }
}

/* ============================================================
   THE THREE ROPE CUSTOM MINIMUM  (21 Sep 2026)
   A card is custom when its colours were built here rather than
   picked off a catalogue page. Custom cards carry a minimum of
   three of that design. Catalogue picks and single Basics do not.
   ============================================================ */

/* filled, not outlined, so it does not read as another kind chip next to
   the outlined Natural one, which is also orange */
.rope-custom {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #08080A;
  white-space: nowrap;
}
.rope-custom[hidden] { display: none; }

.rope.is-custom { border-top-color: var(--orange); }

.rope-min-note {
  margin: .4rem 0 0;
  font-size: .8rem;
  color: var(--orange);
}
.rope-min-note[hidden] { display: none; }

/* the custom colour control carries real weight now that the grid
   holds only the eight Basics, so it reads as a choice, not a footnote */
.picker-custom {
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}
.picker-custom .picker-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.picker-custom .hint { max-width: 62ch; }

@media (max-width: 620px) {
  .rope-custom { font-size: .58rem; padding: .18rem .4rem; }
}

/* ---------- footer social links ---------- */
/* Instagram is drawn in the footer's own ink rather than brand colour, and the
   FetLife heart is a flat silhouette, so the two read as one pair. */
footer .social {
  display: flex;
  align-items: center;
  gap: .55rem;
}
footer .social a {
  display: inline-flex;
  padding: .4rem;
  color: var(--ash);
  border: 1px solid var(--hair);
  line-height: 0;
  transition: color .15s ease, border-color .15s ease;
}
footer .social a:hover,
footer .social a:focus-visible {
  color: var(--pink);
  border-color: var(--pink);
}
footer .social svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  footer .social a { padding: .32rem; }
  footer .social svg { width: 18px; height: 18px; }
}

/* ---------- nav: the current-page line hugs the word ---------- */
/* .cartcount sets display on the element itself, which outranks the browser's
   own [hidden] rule, so the empty basket badge kept its width. That is what
   ran the dye line 19px past the word on the current page, and what left a
   gap after the link on every other page. */
.cartcount[hidden] { display: none; }

/* The line is drawn under the label rather than the whole nav item, so a
   visible basket badge sits outside it. letter-spacing is added after the
   last letter too, so the line is pulled back by exactly that much. */
.topbar nav .current { --ls: .08em; letter-spacing: var(--ls); }
.topbar nav .current::after { content: none; }
.topbar nav .current .navlabel { position: relative; }
.topbar nav .current .navlabel::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--ls);
  bottom: -.35rem;
  height: 2px;
  background: var(--dye);
}

@media (max-width: 720px) {
  .topbar nav .current { --ls: .04em; }
  .topbar nav .current .navlabel::after { bottom: -.15rem; }
}

/* ---------- order form: pickup or shipping ---------- */
/* Two square boxes that behave as a pair. They are radio inputs underneath,
   so picking one clears the other and the form cannot say both. The address
   block only shows, and only becomes required, once "Ship it to me" is on. */
.ship-field { gap: .7rem; }
.ship-choice { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.ship-opt {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-family: var(--body);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
  border: 1px solid var(--hair);
  background: var(--ink);
  padding: .6rem .9rem;
}
.ship-opt:hover { border-color: var(--ash-dim); }
.ship-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ash-dim);
  background: var(--ink);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.ship-opt input::after {
  content: "";
  width: .32rem;
  height: .6rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}
.ship-opt input:checked { background: var(--magenta); border-color: var(--magenta); }
.ship-opt input:checked::after { opacity: 1; }
.ship-opt input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ship-opt:has(input:checked) { border-color: var(--magenta); }

.ship-address {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--cyan);
  margin: .2rem 0 0;
  padding: 1rem;
  min-width: 0;
}
.ship-address[hidden] { display: none; }
.ship-address legend { float: left; width: 100%; padding: 0; margin: 0 0 .9rem; }
.ship-address legend + * { clear: both; }
.ship-field > .label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.ship-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}
.ship-street { grid-column: 1 / 3; }
.ship-line2  { grid-column: 3 / 4; }
.ship-city   { grid-column: 1 / 2; }
@media (max-width: 720px) {
  .ship-grid { grid-template-columns: 1fr 1fr; }
  .ship-street, .ship-line2, .ship-city { grid-column: 1 / -1; }
}
.ship-field > .label .req { color: var(--pink); }

/* =========================================================================
   QUICK ADD ICON
   A small bag icon over the top right of each catalog photo, added by
   wireQuickAdd() in JS/script.js. It sits in the card's flex column just
   above the photo and pulls the photo up under itself with a negative
   bottom margin, so it tracks the colour bar as that grows on hover.
   ========================================================================= */
.quick-add {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 30px;
  height: 30px;
  margin: .35rem .35rem calc(-30px - .35rem) 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237, 234, 242, .28);
  border-radius: 50%;
  background: rgba(8, 8, 10, .68);
  color: var(--bone);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.quick-add svg { display: block; }
.quick-add:hover,
.quick-add:focus-visible {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--ink);
}
.quick-add:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.quick-add.is-added,
.quick-add.is-added:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}


/* =========================================================================
   ORDER BUTTON, 22 Sep 2026
   The last nav item (Order, with the basket badge) is lifted out of the
   link row and pinned to the top right of the bar as a solid button. The
   bar is sticky, so the button stays on screen while the page scrolls.
   CSS only: every page's markup is untouched, and the rule keys on the
   last nav item, so it works whether Order is a link or the current page.
   ========================================================================= */

.topbar {
  --order-r: clamp(.75rem, 2vw, 1.5rem);   /* distance from the page edge */
  --order-w: 8.5rem;                       /* room kept for the button */
}

/* keep the nav from running under the button on narrower screens */
.topbar .wrap {
  padding-right: max(var(--gut),
    calc(var(--order-r) + var(--order-w) - max(0px, (100vw - var(--wrap)) / 2)));
}

.topbar nav > :last-child {
  position: absolute;
  top: 50%;
  right: var(--order-r);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.05rem;
  background: var(--magenta);
  color: var(--ink);
  border: 1px solid var(--magenta);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.topbar nav > a:last-child:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.topbar nav > a:last-child:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

/* no separator dot in front of it, now that it is not in the row */
.topbar nav > :last-child::before { content: none; }

/* on the Order page itself it reads as pressed, not clickable */
.topbar nav > .current:last-child {
  background: transparent;
  color: var(--magenta);
  cursor: default;
}
.topbar nav > .current:last-child .navlabel::after { content: none; }

/* the basket badge flips to dark so it shows on the magenta button */
.topbar nav > a:last-child .cartcount {
  background: var(--ink);
  color: var(--magenta);
}

@media (max-width: 720px) {
  /* the bar stacks here: wordmark on the first row, links on the second.
     The button sits at the right end of the wordmark row. */
  .topbar .wrap { padding-right: var(--gut); }
  .topbar nav > :last-child {
    top: .4rem;
    right: .6rem;
    transform: none;
    font-size: .6rem;
    letter-spacing: .06em;
    line-height: 1.2;
    padding: .25rem .55rem;
  }
  .topbar nav > :last-child .cartcount { font-size: .55rem; line-height: 1.4; }
  /* the wordmark row grows to the button's height so the links clear it */
  .topbar .mark { line-height: 1.6rem; }
  .topbar nav > .current:last-child .navlabel::after { content: none; }
}


/* =========================================================================
   ROPE WAX PROMO, 23 Sep 2026
   One block on three pages: under the stories on the front page, and at
   the bottom of Solid Colors and Multicolor. It builds on .promo (dye line
   along the top, yellow glow behind the price): photo, copy, then price
   and button. On the front page the button links to rope-wax.html. On the
   catalog pages it carries data-add-wax, and script.js adds a tin to the
   order when it is clicked.
   ========================================================================= */

.wax-sec { padding-top: 0; }
.wax-sec .promo { margin-top: 0; }

.promo.wax-promo {
  display: grid;
  grid-template-columns: clamp(140px, 17vw, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem clamp(1.25rem, 3.5vw, 2.5rem);
}

.wax-shot {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 45%;
  border: 1px solid var(--hair);
}

.wax-more {
  display: inline-block;
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
}
.wax-more:hover { color: var(--yellow); }

.wax-buy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
}
.wax-buy .promo-price { align-items: center; }
.wax-note {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
.wax-buy .btn { margin-top: .5rem; white-space: nowrap; }
.btn[data-add-wax].is-added,
.btn[data-add-wax].is-added:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

/* phones: small photo beside the copy, price and button on a row below */
@media (max-width: 640px) {
  .promo.wax-promo {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: .9rem 1rem;
  }
  .wax-buy {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
  }
  .wax-buy .promo-price { flex-direction: row; align-items: baseline; justify-content: center; gap: .6rem; }
  .wax-buy .btn { align-self: stretch; margin-top: .35rem; text-align: center; }
}


/* =========================================================================
   ROPE CARE PAGE
   Scoped to <section class="care"> on care.html, so no other page moves.
   Each .care-block is a card that takes its colour from the dye line, in
   logo order from top to bottom (violet, cyan, magenta, pink, orange,
   yellow), so the page reads as one long dye run. To recolour a card,
   change its --accent line below. A seventh card starts over at violet.
   Three levels of type: the title in the card's colour, the bold lead-ins
   in bright bone, and the rest of the copy a step softer.
   ========================================================================= */

.care {
  --accent: var(--cyan);
  --care-text: #CFCBD8;   /* between --bone and --ash */
}

.care-block { --accent: var(--cyan); --accent-2: var(--magenta); }
.care-block:nth-child(6n+1 of .care-block) { --accent: var(--violet);  --accent-2: var(--cyan); }
.care-block:nth-child(6n+2 of .care-block) { --accent: var(--cyan);    --accent-2: var(--magenta); }
.care-block:nth-child(6n+3 of .care-block) { --accent: var(--magenta); --accent-2: var(--pink); }
.care-block:nth-child(6n+4 of .care-block) { --accent: var(--pink);    --accent-2: var(--orange); }
.care-block:nth-child(6n+5 of .care-block) { --accent: var(--orange);  --accent-2: var(--yellow); }
.care-block:nth-child(6n+6 of .care-block) { --accent: var(--yellow);  --accent-2: transparent; }

/* the card: dye bar along the top, a faint glow of its colour in the corner */
.care-block {
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--hair);
  border-top: 0;
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) top left / 100% 3px no-repeat,
    radial-gradient(120% 60% at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--ink-2);
}
.care-block > :last-child { margin-bottom: 0; }

.care-block h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--accent);
  text-wrap: balance;
}

.care-block > p { color: var(--care-text); }

.care-block ul.plainlist li::marker { color: var(--accent); }
.care-block ul.plainlist strong,
.care-block ol.process strong { color: var(--bone); font-weight: 600; }

/* numbered steps sit in a ring of the card's colour */
.care-block ol.process li { grid-template-columns: 1.9rem 1fr; gap: .8rem; }
.care-block ol.process li::before {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: .7rem;
}
.care-block ol.process p { padding-top: .2rem; }

/* notes and options: tinted panel, label in the card's colour */
.care .callout {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: .8rem 1rem;
}
.care .callout strong { color: var(--accent); font-weight: 600; }

/* page title in the dye gradient, like the logo */
.care .sec-head .eyebrow { color: var(--pink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .care .sec-head h1, .care .sec-head h2 {
    width: fit-content;
    padding-bottom: .08em;
    background: var(--dye);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}


/* =========================================================================
   PAGE HEAD PHOTOS (27 Sep 2026)
   .head-split wraps a page's .sec-head and a <figure class="head-photo">,
   text on the left, photo top right. Used on multicolor, solid colors and
   custom orders. Modifiers:
     .fade-left   photo fades into the page on its left edge (multicolor)
     .vignette    dark vignette around the photo (custom orders)
     --tall       portrait crop (solid colors)
   .photo-band is the wide photo under the rope wax promo on solid colors.
   ========================================================================= */

.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 40%);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}
.head-split > .sec-head { margin-bottom: 0; }
.head-split--mc     { grid-template-columns: minmax(0, 1fr) minmax(260px, 48%); gap: 0; }
.head-split--solid  { grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); }
.head-split--custom { grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); }

.head-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.head-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.head-photo--tall img { aspect-ratio: 4 / 5; object-position: 50% 40%; border: 1px solid var(--hair); }

/* multicolor: left edge dissolves into the black page */
.head-photo.fade-left img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 45%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 18%, #000 45%);
}

/* custom orders: vignette, edges darkened and softened into the page */
.head-photo.vignette img {
  aspect-ratio: 1 / 1;
  object-position: 50% 30%;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 55%, transparent 100%);
}
.head-photo.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 45%, rgba(8,8,10,.55) 80%, var(--ink) 100%);
}

/* solid colors: wide photo under the wax promo */
.photo-band { padding-top: 0; }
.band-photo { margin: 0; }
.band-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 0%;
  border: 1px solid var(--hair);
}

/* tablets and phones: photo drops under the head copy */
@media (max-width: 760px) {
  .head-split,
  .head-split--mc,
  .head-split--solid,
  .head-split--custom { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
  .head-photo img { aspect-ratio: 16 / 10; }
  .head-photo--tall img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
  .head-photo.vignette img { aspect-ratio: 4 / 3; object-position: 50% 25%; }
  /* stacked, the left fade has nothing beside it, so fade the top edge instead */
  .head-photo.fade-left img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  }
}


/* =========================================================================
   TRADEMARK MARKS (29 Sep 2026)
   Header wordmark: <sup class="tm">&trade;</sup> inside .mark.
   Hero logo: the image is wrapped in .logo-tm, and the TM sits just right
   of the E in ROPE. left/top are percentages of the logo, so it tracks it
   at every size.
   ========================================================================= */
.topbar .mark .tm {
  font-size: .85em;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: super;
  margin-left: .15em;
}
.logo-tm {
  position: relative;
  display: block;
}
.logo-tm .tm {
  position: absolute;
  left: 85.2%;
  top: 47%;
  font-family: var(--display);
  font-size: .95rem;
  line-height: 1;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
  pointer-events: none;
}
@media (max-width: 720px) {
  .logo-tm .tm { font-size: .75rem; }
}


/* =========================================================================
   CATALOG REF NUMBERS (29 Sep 2026)
   Each card carries data-ref. JS/script.js puts it in a small .ref line
   under the name on the tile. In the popup it rides on the hex line for a
   solid and gets its own .lb-ref line on a multicolor.
   ========================================================================= */
.swatch-card .meta > .ref,
.multicolor .meta > .ref {
  display: block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--ash-dim);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.lb-ref {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.lb-ref[hidden] { display: none; }


/* =========================================================
   ROPE WAX PAGE: fade the tins photo to black on its right side
   ========================================================= */
.two-col > img[src$="ropewax1-web.jpg"] {
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%);
          mask-image: linear-gradient(to right, #000 50%, transparent 100%);
  justify-self: start !important; /* beats the inline centre */
}
/* size the columns to the photo and the text, so they sit together */
.two-col:has(> img[src$="ropewax1-web.jpg"]) {
  grid-template-columns: minmax(0, 400px) minmax(0, 60ch);
}
@media (max-width: 720px) {
  .two-col:has(> img[src$="ropewax1-web.jpg"]) { grid-template-columns: 1fr; }
}

/* rope wax page: section titles read as titles.
   Scoped by the page's own photo, so no other page changes. */
main:has(img[src$="ropewax1-web.jpg"]) h3 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.2;
  color: var(--bone);
}
main:has(img[src$="ropewax1-web.jpg"]) h3::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: .45rem;
  background: var(--magenta);
}
main:has(img[src$="ropewax1-web.jpg"]) .opt p.opt-lead {
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  color: var(--yellow);
}

/* =========================================================
   SOLID COLORS: head photo centred between the end of the
   text and the right edge of the screen (29 Sep 2026).
   The text column sizes to the text, the photo column takes
   the rest, and the photo is nudged right by half the space
   between the page wrap and the screen edge.
   ========================================================= */
@media (min-width: 761px) {
  .head-split--solid {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 0;
    --bleed: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  }
  .head-split--solid > .head-photo {
    width: min(100%, 19rem);
    justify-self: center;
    /* less 1.75rem: the lede's box runs past its longest line by
       about 3.5rem, and the photo centres on the words, not the box */
    transform: translateX(calc(var(--bleed) / 2 - 1.75rem));
  }
}

/* =========================================================================
   PHONE MENU (29 Sep 2026)
   On phones the page links fold into a three-line menu button to the left
   of the wordmark. The Order button stays pinned on the right. script.js
   (wireMenu) adds the button and a copy of the links in .nav-drawer, and
   puts .has-menu on the bar. Without the script the old link row shows,
   so nothing is ever unreachable. Desktop is untouched.
   ========================================================================= */

.nav-toggle,
.nav-drawer { display: none; }

@media (max-width: 720px) {
  .topbar.has-menu .wrap {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .55rem;
    min-height: 52px;
    padding-block: .3rem;
    text-align: left;
  }
  .topbar.has-menu .mark {
    flex: 0 1 auto;
    font-size: .74rem;
    letter-spacing: .18em;
    line-height: 1.2;
  }
  /* only Order stays in the bar, centred on the row */
  .topbar.has-menu nav > :not(:last-child) { display: none; }
  .topbar.has-menu nav > :last-child {
    top: 50%;
    transform: translateY(-50%);
    font-size: .66rem;
    padding: .45rem .75rem;
  }

  .topbar.has-menu .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: -.55rem;
    padding: 0 11px;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--bone);
    transition: transform .2s, opacity .2s, background .2s;
  }
  .nav-toggle span:nth-child(1) { background: var(--cyan); }
  .nav-toggle span:nth-child(2) { background: var(--magenta); }
  .nav-toggle span:nth-child(3) { background: var(--yellow); }
  .nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
  .topbar.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar.has-menu .nav-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .55);
    padding: .35rem var(--gut) .8rem;
  }
  .topbar.has-menu .nav-drawer::before {
    content: "";
    display: block;
    height: 2px;
    margin: 0 calc(var(--gut) * -1) .35rem;
    background: var(--dye);
  }
  .topbar.menu-open .nav-drawer { display: block; }
  .nav-drawer[hidden] { display: none !important; }

  .nav-drawer > a,
  .nav-drawer > .current {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 48px;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ash);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
  }
  .nav-drawer > :last-child { border-bottom: 0; }
  .nav-drawer > *::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--violet);
    flex: 0 0 auto;
  }
  .nav-drawer > :nth-child(2)::before { background: var(--cyan); }
  .nav-drawer > :nth-child(3)::before { background: var(--magenta); }
  .nav-drawer > :nth-child(4)::before { background: var(--pink); }
  .nav-drawer > :nth-child(5)::before { background: var(--yellow); }
  .nav-drawer > a:hover,
  .nav-drawer > a:focus-visible { color: var(--bone); outline: none; }
  .nav-drawer > a:focus-visible { background: var(--ink-2); }
  .nav-drawer > .current { color: var(--bone); cursor: default; }
  .nav-drawer > .current .navlabel::after { content: none; }
  .nav-drawer > .current::after {
    content: "You are here";
    margin-left: auto;
    font-size: .6rem;
    letter-spacing: .12em;
    color: var(--magenta);
  }
}


/* =========================================================================
   CUSTOM ORDERS: WHAT YOU CHOOSE AS DROPDOWNS (29 Sep 2026)
   Three native <details> boxes on custom-orders.html, closed by default.
   The inside keeps the old .opt card's type.
   ========================================================================= */

.choose-list {
  display: grid;
  gap: .75rem;
  max-width: 46rem;
}
.choose-box {
  border: 1px solid var(--hair);
  border-top: 2px solid var(--magenta);
  background: var(--ink-2);
}
.choose-box:nth-child(2) { border-top-color: var(--cyan); }
.choose-box:nth-child(3) { border-top-color: var(--yellow); }
.choose-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.2rem;
  padding: .75rem 1.2rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--bone);
  cursor: pointer;
  list-style: none;
}
.choose-q::-webkit-details-marker { display: none; }
.choose-q::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--ash);
  transition: color .15s;
}
.choose-q:hover,
.choose-q:hover::after { color: var(--pink); }
.choose-q:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.choose-box[open] > .choose-q::after { content: "\2212"; color: var(--pink); }
.choose-a {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 0 1.2rem 1.2rem;
}
.choose-a p { margin: 0; color: var(--ash); font-size: .93rem; }
.choose-a p.opt-lead {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--bone);
  line-height: 1.25;
}
.choose-a strong { color: var(--bone); font-weight: 500; }
.choose-a ul.plainlist { margin: 0; padding-left: 1rem; color: var(--ash); font-size: .93rem; }
@media (max-width: 720px) {
  .choose-q { font-size: 1.05rem; padding: .7rem 1rem; }
  .choose-a { padding: 0 1rem 1rem; }
}


/* =========================================================================
   ORDER FORM: PICKUP OR SHIPPING AS PICK-ONE BUTTONS (29 Sep 2026)
   Still radio inputs underneath, so the form and its validation are
   unchanged. The dot is hidden and the whole label reads as a button;
   the chosen one fills magenta.
   ========================================================================= */

.ship-choice { gap: .6rem; }
.ship-opt {
  position: relative;
  justify-content: center;
  flex: 1 1 14rem;
  min-height: 48px;
  padding: .7rem 1rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ash);
  transition: background .15s, border-color .15s, color .15s;
}
/* kept in place (not display:none) so the browser's "pick one" prompt
   still has something to point at */
.ship-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.ship-opt:hover { border-color: var(--magenta); color: var(--bone); }
.ship-opt:has(input:checked) {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--ink);
}
.ship-opt:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==========================================================
   ORDER FORM: ORDER SENT (30 Sep 2026)
   Replaces the form once Formspree has the order.
   ========================================================== */
.sent-note {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--cyan);
  background: rgba(255,255,255,.02);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  outline: none;
}
.sent-note h3 { margin: 0 0 .5rem; }
.sent-note p { margin: 0 0 1.1rem; color: var(--bone); max-width: 52ch; }

/* ==========================================================
   MAIN HEADINGS (30 Sep 2026)
   Every page title is an <h1> now, for search engines and screen
   readers. The rules above style h1 and h2 the same. On the front
   page the h1 is the logo wrapper, so it must not look like a heading.
   ========================================================== */
h1.logo-tm {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-wrap: inherit;
}


/* =========================================================================
   QUICK ADD PILL, 30 Sep 2026
   The round 30px quick-add icon read as a mystery button. It is now a
   wider pill carrying the bag icon plus the word ADD (ADDED after a tap).
   Same flex column trick as before: the negative bottom margin equals the
   pill's own height plus its top gap, so the photo still sits under it.
   ========================================================================= */
.quick-add {
  --qa-h: 30px;
  width: auto;
  height: var(--qa-h);
  min-width: 4.3rem;
  margin: .45rem .45rem calc(-1 * var(--qa-h) - .45rem) 0;
  padding: 0 .68rem 0 .56rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  border-radius: 999px;
  border-color: rgba(237, 234, 242, .45);
  background: rgba(8, 8, 10, .8);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.quick-add .qa-text { display: block; }
.quick-add svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .quick-add {
    --qa-h: 27px;
    min-width: 3.7rem;
    margin: .35rem .35rem calc(-1 * var(--qa-h) - .35rem) 0;
    padding: 0 .52rem 0 .44rem;
    gap: .24rem;
    font-size: .56rem;
  }
  .quick-add svg { width: 14px; height: 14px; }
}


/* =========================================================================
   QUICK ADD PILL AT THE BOTTOM, 30 Sep 2026
   wireQuickAdd() now inserts the pill just AFTER the photo. A negative top
   margin of its own height plus the gap pulls it up over the bottom of the
   photo, and align-self centres it across the tile.
   ========================================================================= */
.quick-add {
  align-self: center;
  margin: calc(-1 * var(--qa-h) - .45rem) 0 .45rem;
}
@media (max-width: 720px) {
  .quick-add { margin: calc(-1 * var(--qa-h) - .35rem) 0 .35rem; }
}


/* =========================================================================
   SHIPPING ESTIMATE, 9 Oct 2026
   The speed choice under the address, and the shipping line in the
   estimate box. The speed radios reuse .ship-choice and .ship-opt.
   ========================================================================= */
.ship-address .ship-speed { margin-top: .9rem; }
.ship-address .ship-speed .label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.estimate .ship-est { color: var(--ash); font-family: var(--mono); font-size: .74rem; line-height: 1.5; }
.estimate .ship-est[hidden] { display: none; }


/* =========================================================
   OCTOBER SALE AD (front page, 14 Oct 2026)
   Shown by wireSale() in script.js until 31 Oct, then removed.
   Deliberately unlike .promo: photo, pink frame, glow, big button.
   ========================================================= */
.sale-ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 2rem;
  background: var(--ink);
  border: 3px solid var(--pink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ink), 0 0 34px rgba(241, 37, 110, .45);
  position: relative;
}
.sale-ad::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--dye);
  z-index: 1;
}
.sale-ad-photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  background: #fff;
}
.sale-ad-body {
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 6px solid transparent;
  border-image: var(--dye) 1;
  border-top: 0; border-right: 0; border-bottom: 0;
}
.sale-ad-body p { margin: 0; }
.sale-ad-kick {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(.8rem, 1.3vw, 1rem);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--pink);
}
.sale-ad-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: .95; text-transform: uppercase;
  color: var(--bone); margin-top: .35rem !important;
}
.sale-ad-deal {
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem);
  margin-top: .6rem;
}
.sale-ad-now {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(4.4rem, 10vw, 7.5rem);
  line-height: .85; color: var(--yellow); letter-spacing: -.03em;
}
.sale-ad-side {
  display: flex; flex-direction: column; gap: .25rem;
  border-left: 3px solid var(--pink); padding-left: clamp(.7rem, 1.6vw, 1.1rem);
}
.sale-ad-per { font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--bone); }
.sale-ad-was { color: var(--ash); font-size: clamp(.95rem, 1.5vw, 1.1rem); }
.sale-ad-until { color: var(--bone); font-weight: 600; font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.25; }
.sale-ad-until .nw { white-space: nowrap; }
.sale-ad-btn {
  display: block; text-align: center;
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  padding: 1rem 1.4rem;
  background: var(--pink); color: #fff;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--yellow);
  transition: transform .15s ease, background .15s ease;
}
.sale-ad-btn:hover, .sale-ad-btn:focus-visible {
  background: #ff3d82; color: #fff; transform: translateY(-2px);
}
@media (max-width: 720px) {
  .sale-ad { grid-template-columns: 1fr; margin-top: 1.4rem; border-width: 2px; border-radius: 10px;
             box-shadow: 0 0 0 1px var(--ink), 0 0 20px rgba(241, 37, 110, .4); }
  .sale-ad::before { height: 4px; }
  .sale-ad-photo { height: auto; aspect-ratio: 5 / 2; object-position: center 50%; }
  .sale-ad-body { padding: .9rem 1rem 1rem; border-left: 0; border-top: 4px solid transparent; border-image: var(--dye) 1; }
  .sale-ad-kick { font-size: .68rem; letter-spacing: .22em; }
  .sale-ad-name { font-size: 1.7rem; margin-top: .2rem !important; }
  .sale-ad-deal { margin-top: .35rem; gap: .7rem; }
  .sale-ad-now { font-size: 3.2rem; }
  .sale-ad-side { gap: .1rem; padding-left: .6rem; border-left-width: 2px; }
  .sale-ad-per { font-size: 1rem; }
  .sale-ad-was, .sale-ad-until { font-size: .8rem; }
  .sale-ad-btn { margin-top: .8rem; padding: .6rem 1rem; font-size: .95rem;
                 box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--yellow); }
}


/* =========================================================
   OCTOBER SALE, SOLID COLORS (14 Oct 2026)
   The sale tile under the factbar, and the yellow sale price on
   the Black card and in its popup. Remove with the sale.
   ========================================================= */
.sale-tile {
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: .25rem .6rem;
  margin: .7rem 0 0 !important;
  padding: .55rem 1rem .6rem;
  background: var(--ink);
  border: 2px solid var(--pink);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(241, 37, 110, .4);
  position: relative; overflow: hidden;
}
.sale-tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--dye);
}
.sale-tile-kick {
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pink);
  width: 100%;
}
.sale-tile b {
  font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; line-height: 1; color: var(--yellow);
}
.sale-tile span:last-child {
  font-family: var(--mono); font-size: .85rem; color: var(--bone);
  letter-spacing: .04em;
}
.price s, .lb-price s { color: var(--ash); }
.sale-now {
  color: var(--yellow); font-weight: 700; font-size: 1.25em;
}
@media (max-width: 720px) {
  .sale-tile { padding: .45rem .8rem .5rem; }
  .sale-tile b { font-size: 1.4rem; }
  .sale-tile span:last-child { font-size: .75rem; }
}


/* =========================================================================
   FRONT PAGE, 21 Oct 2026
   Promoted from index-alt.html. The door, shelf and steps classes exist
   only on the front page. Rules that would also hit other pages (wordmark
   size, rounded buttons and boxes) are scoped to body.home, so the rest of
   the site is unchanged. Drop the "body.home " prefix to take them sitewide.
   ========================================================================= */

/* hero: shorter on phones so rope shows on the first screen */
@media (max-width: 720px) {
  body.home .hero .wrap { padding-block: .7rem; }
  body.home .hero-mark { width: min(190px, 52%); gap: .3rem; }
  body.home .hero .tagline { font-size: .72rem; }
}

/* ---------- the two doors, now with real rope ---------- */
.alt-shop { padding-top: clamp(1rem, 3vw, 2rem); }
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 2vw, 1.5rem);
}
.door {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  color: var(--bone);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.door:hover, .door:focus-visible { border-color: var(--magenta); background: var(--ink-3); color: var(--bone); }
.door-pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  aspect-ratio: 9 / 4;
  overflow: hidden;
}
.door-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* zoom on the solid and multicolor door photos. Change --door-zoom to taste (1 = no zoom) */
.door-pic { display: block; overflow: hidden; --door-zoom: 1.6; }
.door-pic img { transform: scale(var(--door-zoom)); transition: transform .4s ease; }
.door:hover .door-pic img { transform: scale(calc(var(--door-zoom) * 1.06)); }
.door-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(.7rem, 2vw, 1.2rem);
  flex: 1;
}
.door-eyebrow {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.door-title { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.15; }
.door-desc { color: var(--ash); font-size: .93rem; }
.door-price { font-family: var(--mono); font-size: .85rem; color: var(--yellow); }
.door-btn {
  margin-top: auto;
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .75rem .5rem;
  background: var(--magenta);
  color: #08080A;
  font-weight: 500;
}
.door:hover .door-btn { background: var(--bone); }

.door--wide {
  margin-top: clamp(.6rem, 2vw, 1.5rem);
  flex-direction: row;
  align-items: stretch;
}
.door--wide .door-pics { display: block; aspect-ratio: auto; width: clamp(110px, 30%, 320px); flex: none; }
.door--wide .door-btn { background: transparent; color: var(--magenta); border: 1px solid var(--magenta); }
.door--wide:hover .door-btn { background: var(--magenta); color: #08080A; }
.door-fine { color: var(--ash-dim); font-size: .8rem; }

@media (max-width: 560px) {
  .door-pics { grid-template-columns: 1fr 1fr; aspect-ratio: 6 / 4; }
  .door-pics > :nth-child(3) { display: none; }
  .door-desc { display: none; }
  .door-btn { font-size: .66rem; padding: .65rem .3rem; }
  .door--wide .door-desc { display: block; font-size: .82rem; }
}

/* ---------- available now ---------- */
.shelf { padding-block: clamp(1.4rem, 4vw, 2.6rem) 0; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .9rem; }
.shelf-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.shelf-head p { margin: 0; color: var(--ash); font-size: .88rem; }
.shelf-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.1rem);
}
.shelf-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  color: var(--bone);
  text-decoration: none;
  transition: border-color .18s;
}
.shelf-item:hover, .shelf-item:focus-visible { border-color: var(--magenta); color: var(--bone); }
.shelf-item img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #f4f2f0; }
.shelf-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; padding: .55rem .65rem .65rem; }
.shelf-name { font-size: .9rem; line-height: 1.2; }
.shelf-item .price { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.shelf-item .price s { color: var(--ash-dim); }
.shelf-item .price .sale-now { color: var(--yellow); }
.shelf-tag { display: block; padding: 0 .65rem .6rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); }
.shelf-more { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.shelf-more a { flex: 1 1 14rem; text-align: center; }

@media (max-width: 860px) {
  /* one swipeable row on phones and tablets */
  .shelf-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    padding-bottom: .4rem;
    scrollbar-width: none;
  }
  .shelf-row::-webkit-scrollbar { display: none; }
  .shelf-row > li { flex: 0 0 38%; scroll-snap-align: start; }
}
@media (max-width: 480px) { .shelf-row > li { flex-basis: 42%; } }

/* ---------- how ordering works ---------- */
.steps-sec { padding-block: clamp(1.4rem, 4vw, 2.4rem) 0; }
.steps-eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2vw, 1.2rem);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: .9rem 1rem .95rem 3rem;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  font-size: .88rem;
  color: var(--ash);
  line-height: 1.45;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: .9rem;
  top: .85rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dye);
  color: #08080A;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
}
.steps b { display: block; color: var(--bone); font-weight: 500; font-size: .95rem; margin-bottom: .1rem; }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: .45rem; }
  .steps li { padding: .7rem .9rem .75rem 2.9rem; }
  .steps li::before { top: .7rem; }
}

/* ---------- rounded corners and buttons ----------
   Two numbers to tune: --r-card for boxes and photos, --r-btn for buttons. */
body.home { --r-card: 14px; --r-btn: 999px; }
.door, .shelf-item, .steps li, body.home .promo, body.home .stories .story {
  border-radius: var(--r-card);
  overflow: hidden;
}
body.home .btn, body.home .btn-cta, .door--wide .door-btn, body.home .topbar nav > :last-child { border-radius: var(--r-btn); }
.door-btn { border-radius: var(--r-btn); margin-top: auto; }

/* ---------- bigger wordmark, top left, every page ---------- */
.topbar .mark { font-size: 1.3rem; letter-spacing: .2em; }
@media (max-width: 720px) {
  .topbar .mark,
  .topbar.has-menu .mark { font-size: 1.02rem; letter-spacing: .14em; }
}