/* =====================================================================
   Fox Frame Productions — Equipment Rental
   Shared stylesheet for all pages
   Visual system: editorial restraint, near-monochrome, type-led
   Reference DNA: Old Fast Glass, Studio MK27, Joint Editorial
   ===================================================================== */

/* ---------- reset ---------- */

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

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

/* ---------- design tokens ---------- */

:root {
  /* color */
  /* 2026-10-24 redesign: low-chroma stone ground, ink taken from the gear, the fox mark's oxblood as the one accent */
  --bg: #F5F5F2;
  --bg-soft: #E8E7E2;
  --surface: #E8E7E2;
  --surface-2: #DEDDD7;
  --surface-3: #D2D1CA;
  --ink: #151515;
  --ink-soft: #3F3F3B;
  --ink-muted: #5E5E5A;        /* 6.5:1 on --bg */
  --rule: #DCDBD5;
  --rule-soft: #E6E5DF;
  --accent: #7A2E2E;           /* the fox mark */
  --accent-soft: #93403F;
  --accent-tint: #F0E6E4;

  /* typography */
  --font-display: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* five type steps (redesign) */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13-14 */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);       /* 17-19 */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);         /* 20-26 */
  --step-head: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);         /* 28-36 */
  --step-display: clamp(2.75rem, 1rem + 3.6vw, 4.25rem);         /* 44-68 */
  --margin: clamp(20px, 6vw, 96px);

  /* motion tokens */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* scale (8px base) */
  --s-1: 4px;
  --s0:  8px;
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;
  --s4: 48px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;
  --s8: 192px;

  /* containers */
  --container: 1200px;
  --container-narrow: 720px;
  --container-text: 640px;
}

/* ---------- base typography ---------- */

html {
  font-size: 100%;          /* 16px base, no iOS zoom */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern", "liga";
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

h2 {
  font-size: var(--step-head);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h3 {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h4 {
  font-size: var(--step-body);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

p {
  font-size: 1.0625rem;                    /* 17 px — editorial body */
  line-height: 1.65;
  color: var(--ink);
}

p + p {
  margin-top: var(--s2);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
}

a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

small, .small {
  font-size: 0.875rem;                     /* 14 px */
  color: var(--ink-soft);
  line-height: 1.5;
}



/* ---------- layout ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.container-text {
  max-width: var(--container-text);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.section {
  padding: var(--s6) 0;
}

.section-tight {
  padding: var(--s5) 0;
}



/* ---------- header / nav ---------- */

.site-header {
  background: var(--bg);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s2) var(--s3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.site-mark {
  font-family: var(--font-display);
  font-size: 1.25rem;                      /* 20 px */
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: none;
  white-space: nowrap;
}

.site-mark:hover {
  border-bottom: none;
}

.site-mark__sub {
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: var(--s1);
}

.site-nav {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
}

.site-nav a {
  font-size: 0.9375rem;                    /* 15 px */
  font-weight: 400;
  color: var(--ink);
  border-bottom: none;
  position: relative;
  padding-bottom: 2px;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
}

/* ---------- hero (homepage) ---------- */

.hero {
  padding: var(--s7) 0 var(--s6);
}

.hero__eyebrow {
  margin-bottom: var(--s3);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);       /* 48–96 px */
  font-weight: 350;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 50;
  max-width: 14ch;
}

.hero__lede {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: var(--s4);
  max-width: 38ch;
  font-variation-settings: "SOFT" 100;
}

/* ---------- page header (interior pages) ---------- */

.page-header {
  padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px);
}



.page-header__title {
  font-size: var(--step-display);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.page-header__lede {
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
  margin-top: 20px;
  max-width: 44ch;
}

/* ---------- prose blocks ---------- */

.prose p {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: var(--container-text);
}

.prose p + p {
  margin-top: var(--s2);
}

.prose h2 {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.prose h3 {
  margin-top: var(--s4);
  margin-bottom: var(--s1);
}

/* ---------- card / list patterns ---------- */

.entry-list {
  display: grid;
  gap: 0;
}

.entry {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s4);
  padding: 28px 0;
}



.entry__label {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.entry__body p {
  font-size: var(--step-body);
  line-height: 1.6;
  max-width: 60ch;
}

.entry__body p + p {
  margin-top: var(--s1);
}

.entry__body ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: var(--s1) 0;
  font-size: var(--step-body);
  line-height: 1.6;
}

.entry__body li + li {
  margin-top: 0.35em;
}

.entry__body ul + p {
  margin-top: var(--s1);
}

/* ---------- section heading on long pages ---------- */

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.section-heading__count {
  font-size: var(--step-body);
  color: var(--ink);
}

/* ---------- footer ---------- */

.site-footer {
  padding: var(--s5) 0 var(--s4);
  margin-top: var(--s7);
}

.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s3);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s4);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-footer__brand p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: var(--s1);
  max-width: 36ch;
}

.site-footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s1);
}

.site-footer__col li {
  font-size: 0.9375rem;
  line-height: 2;
}

.site-footer__col li a {
  color: var(--ink);
  border-bottom: none;
}

.site-footer__col li a:hover {
  text-decoration-color: var(--ink);
}

.site-footer__bottom {
  max-width: var(--container);
  margin: var(--s5) auto 0;
  padding: var(--s3) var(--s3) 0;
  font-size: var(--step-small);
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
}

/* ---------- equipment page (catalog) ---------- */

.equipment-toc {
  max-width: none;
  margin: 0;
  padding: 8px var(--margin) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: var(--step-body);
}

.equipment-toc a,
.equipment-toc__item {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  padding: 8px 0;
  display: inline-block;
}

.equipment-toc a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.equipment-toc__item--active {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ---------- equipment index (category cards) ---------- */

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  padding-top: 24px;
}

.cat-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
  color: var(--ink);
  text-decoration: none;
}

.cat-card:hover .cat-card__title {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 6px;
  color: var(--ink);
  transition: color 150ms ease;
}

.cat-card__count {
  font-size: var(--step-body);
  color: var(--ink-muted);
  display: block;
  margin-bottom: 8px;
}

.cat-card__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--s1);
  color: var(--ink);
}

.cat-card__desc {
  font-size: var(--step-body);
  color: var(--ink);
  line-height: 1.5;
  max-width: 36ch;
}

@media (max-width: 700px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
}

.equipment-search {
  max-width: none;
  margin: 0;
  padding: 28px var(--margin) 8px;
}

.equipment-search input {
  width: 100%;
  max-width: 480px;
  font: inherit;
  font-size: var(--step-body);
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

.equipment-search input::placeholder {
  color: var(--ink-muted);
  font-style: normal;
}

.equipment-results-banner {
  max-width: none;
  margin: 0;
  padding: 8px var(--margin);
  font-size: var(--step-body);
  color: var(--ink-muted);
}

.equipment-section {
  padding-top: var(--s5);
}

.equipment-section:last-of-type {
  padding-bottom: var(--s5);
}

.equipment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 64px;
  padding: 24px var(--margin) 0;
}

.gear-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
}

.gear-item__photo {
  width: 80px;
  aspect-ratio: 1;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gear-item__photo img {
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: contain;
}

.gear-item__photo--empty {
  background: var(--surface-2);
}

.gear-item__title {
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.gear-item__meta {
  font-size: var(--step-body);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 4px;
}

.gear-item__notes {
  font-size: var(--step-body);
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 40ch;
}

.gear-item__included {
  font-size: var(--step-body);
  color: var(--ink-soft);
  margin-top: 8px;
}

.gear-item__included summary {
  cursor: pointer;
  color: var(--ink-muted);
  list-style: none;
  padding: 6px 0;
}

.gear-item__included summary::-webkit-details-marker {
  display: none;
}

.gear-item__included summary::before {
  content: "+ ";
  font-style: normal;
  font-family: var(--font-body);
}

.gear-item__included[open] summary::before {
  content: "− ";
}

.gear-item__included ul {
  margin-top: 2px;
  padding-left: 0;
  list-style: none;
}

.gear-item__included li {
  margin-top: 2px;
  font-size: var(--step-small);
  color: var(--ink-soft);
  line-height: 1.5;
}

.gear-item__included li::before {
  content: none;
}

/* ---------- empty state ---------- */

.empty-state {
  padding: var(--s6) var(--margin);
  color: var(--ink-muted);
  font-size: var(--step-body);
}

/* ---------- gear-item title link (category pages) ---------- */

.gear-item__title a {
  color: var(--ink);
  text-decoration-color: transparent;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.gear-item__title a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.gear-item__photo {
  display: flex;
}

/* ---------- item page (per-item detail) ---------- */

.item-page {
  padding: var(--s4) 0 var(--s6);
}

.item-page .container {
  max-width: none;
  margin: 0;
  padding: 0 var(--margin);
}

.item-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 7vw, 112px);
  margin-bottom: 0;
}

.item-page__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item-page__photo img {
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: contain;
}

.item-page__photo--empty {
  background: var(--bg-soft);
}

.item-page__hero-text {
  padding-top: var(--s1);
}





.item-page__title {
  font-size: var(--step-head);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 16px;
}

.item-page__lede {
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 44ch;
}

/* ---------- prices ---------- */

.item-page__price {
  margin: 0 0 28px;
  padding: 0;
  max-width: 360px;
}

.item-page__price-day {
  font-size: var(--step-lead);
  line-height: 1.2;
  color: var(--ink);
}

.item-page__price-day span,
.gear-item__price span {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-left: 2px;
}

.item-page__price-more {
  margin-top: 4px;
  font-size: var(--step-body);
  color: var(--ink);
}

.item-page__price-note {
  margin-top: 10px;
  font-size: var(--step-small);
  color: var(--ink-muted);
  max-width: 36ch;
}

.item-page__price-note a {
  text-decoration: underline;
}

.gear-item__price {
  margin-top: 4px;
  font-size: var(--step-body);
  font-weight: 400;
  color: var(--ink);
}

.gear-item__addon {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--step-small);
  color: var(--accent);
}

.item-page__cta {
  display: inline-block;
  padding: 16px 26px;
  background: var(--accent);
  color: #fff;
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}

.item-page__cta:hover {
  background: var(--accent-soft);
  color: #fff;
}

.item-page__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 8vw, 112px);
  padding-bottom: 0;
}

.item-page__section {
  padding: 0;
}

.item-page__section-title {
  font-size: var(--step-head);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 24px;
}

.item-page__description {
  max-width: 60ch;
  color: var(--ink);
  font-size: var(--step-body);
  line-height: 1.6;
}

.item-page__description p + p {
  margin-top: var(--s1);
}

.item-page__includes-intro {
  color: var(--ink-soft);
  font-size: var(--step-body);
  margin-bottom: 16px;
}

.item-page__includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s0) var(--s3);
}

.item-page__includes li {
  font-size: var(--step-body);
  color: var(--ink);
  line-height: 1.5;
  padding: 6px 0;
}

.item-page__includes-meta {
  color: var(--ink-muted);
  font-size: var(--step-body);
  margin-left: 6px;
}

.item-page__includes-notes {
  color: var(--ink-muted);
  font-size: var(--step-body);
}

.item-page__specs-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 32px;
  margin: 0 0 28px;
  font-size: var(--step-body);
}

.item-page__specs-dl dt {
  color: var(--ink-muted);
  font-weight: 400;
}

.item-page__specs-dl dd {
  color: var(--ink);
  margin: 0;
}

.item-page__specs-key-title {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
}

.item-page__specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.item-page__specs-list li {
  font-size: var(--step-body);
  color: var(--ink);
  line-height: 1.5;
  padding-left: 0;
  position: static;
}

.item-page__specs-list li::before {
  content: none;
}

.item-page__compat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 32px;
}

.item-page__compat-pill {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--step-body);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration-color: var(--rule);
}

.item-page__compat-pill:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.item-page__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.item-page__related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  padding: 0;
}

.item-page__related-card:hover .item-page__related-name {
  color: var(--accent);
}

.item-page__related-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item-page__related-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 4px;
}

.item-page__related-photo--empty {
  background: var(--bg-soft);
}

.item-page__related-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink);
}

@media (max-width: 900px) {
  .item-page__hero {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
  .item-page__photo {
  }
  .item-page__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .item-page__includes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .item-page {
    padding: var(--s3) 0 var(--s5);
  }
  .item-page .container {
    padding: 0 var(--s2);
  }
  .item-page__sections {
    gap: var(--s4);
  }
  .item-page__related-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s1);
  }
  .item-page__specs-dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .item-page__specs-dl dt {
    padding-top: var(--s0);
  }
}

/* ---------- mobile ---------- */

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .equipment-grid {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
  .entry {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
  .entry__label {
    padding-top: 0;
  }
  .section, .section-tight {
    padding: var(--s5) 0;
  }
  .hero {
    padding: var(--s5) 0 var(--s4);
  }
  .hero__title {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }
  .page-header {
    padding: var(--s4) 0 var(--s3);
  }
  .section-heading__count {
    display: inline-block;
    padding: 10px 0;
    border-bottom: none;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: var(--s1);
  }
}

@media (max-width: 480px) {
  :root {
    --s3: 20px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;
    --s7: 80px;
  }
  .gear-item {
    grid-template-columns: 64px 1fr;
    gap: var(--s1);
  }
  .gear-item__photo {
    width: 64px;
    height: 64px;
  }
}

/* ---------- header search ---------- */

.site-search {
  margin-left: auto;
}

.site-search input {
  width: 180px;
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: 0;
  transition: border-color 150ms ease, width 150ms ease;
}

.site-search input:focus {
  border-color: var(--ink-soft);
  width: 220px;
}

.search-status {
  margin: var(--s1) 0 var(--s2);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

@media (max-width: 768px) {
  .site-search {
    margin-left: 0;
    width: 100%;
  }
  .site-search input,
  .site-search input:focus {
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
  }
}

/* ---------- day + week side by side ---------- */

.price-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
}

.price-sep {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 10px -1px;
  background: var(--rule);
}

/* ---------- kits ---------- */

.kit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s3);
}

.kit {
  background: var(--bg);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  scroll-margin-top: var(--s4);
}

.kit:target {
  border-color: var(--accent);
}

.kit__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
}

.kit__for {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.kit__price {
  margin: 0;
}

.kit__note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-style: italic;
}

.kit__contents summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
}

.kit__contents ul {
  margin-top: var(--s1);
  padding-left: 1.1em;
  list-style: disc;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.kit__contents a {
}

.kit__included {
  font-size: var(--step-small);
  color: var(--accent);
  margin-left: 4px;
}

.kit .item-page__cta {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 480px) {
  .kit-list {
    grid-template-columns: 1fr;
  }
}

.kit .price-pair {
  gap: 4px 18px;
}

.kit .item-page__price-day {
  font-size: 1.625rem;
}

/* ---------- live search dropdown ---------- */

.site-search--live {
  position: relative;
}

.search-drop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--rule); /* taste-skill-ignore: floating menu */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* taste-skill-ignore: floating menu */
  z-index: 50;
}

.search-drop__row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft); /* taste-skill-ignore: floating menu */
  color: var(--ink);
}

.search-drop__row:hover,
.search-drop__row.is-active {
  background: var(--bg-soft);
}

.search-drop__img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--rule-soft); /* taste-skill-ignore: floating menu */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.search-drop__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.search-drop__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-drop__name {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.search-drop__meta {
  font-size: var(--step-small);
  color: var(--ink-muted);
  margin-top: 2px;
}

.search-drop__all {
  display: block;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.search-drop__all:hover {
  background: var(--bg-soft);
}

.search-drop__empty {
  padding: 12px;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

@media (max-width: 768px) {
  .search-drop {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* ---------- logo ---------- */

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-mark__logo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.site-footer__logo {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s1);
}

@media (max-width: 480px) {
  .site-mark__logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}


/* =====================================================================
   2026-10-24 REDESIGN LAYER (Taste Skill direction: photographs at uneven sizes)
   Header + footer on every page, the homepage sections (hm-*), motion.
   ===================================================================== */

/* ---------- header: a plain bar, wordmark · links · search ---------- */
.site-header { background: var(--bg); }
.site-header__inner {
  max-width: none;
  padding: 22px var(--margin);
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-mark {
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-mark__logo { width: 36px; height: 36px; display: inline-block; }
.site-nav { display: flex; gap: 28px; align-items: baseline; }
.site-nav a {
  font-size: var(--step-body);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.07em;
  padding: 10px 0;
  border: 0;
}
.site-nav a[aria-current="page"] { text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { text-decoration-color: var(--ink); border: 0; color: var(--ink); }
}
.site-search { margin-left: auto; }
.site-search input {
  width: 220px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-body);
  padding: 12px 16px;
  border-radius: 0;
  transition: width 200ms var(--ease-out), background-color 150ms ease;
}
.site-search input:focus { border: 0; width: 260px; background: var(--surface-2); }
.site-search input::placeholder { color: var(--ink-muted); font-style: normal; }
.site-menu-btn { display: none; }

@media (max-width: 768px) {
  .site-header__inner { flex-wrap: wrap; gap: 8px 16px; padding: 14px 20px; }
  .site-mark { flex: 1 1 auto; }
  .site-menu-btn {
    display: inline-block;
    order: 2;
    font: inherit;
    font-size: var(--step-body);
    color: var(--ink);
    background: none;
    border: 0;
    padding: 10px 0 10px 12px;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 0.07em;
    cursor: pointer;
  }
  .site-search { order: 3; flex-basis: 100%; margin: 4px 0 0; }
  .site-search input, .site-search input:focus { width: 100%; font-size: 16px; padding: 12px 14px; }
  .site-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 4px; }
  .site-nav a { display: block; padding: 12px 0; font-size: var(--step-lead); }
  .js .site-nav { display: none; }
  .js .site-header.is-open .site-nav { display: flex; }
}

/* ---------- footer: the name returns at full width ---------- */
.site-footer {
  border: 0;
  background: var(--surface);
  margin-top: clamp(96px, 12vw, 200px);
  padding: 56px var(--margin) 36px;
}
.site-footer__inner { max-width: none; padding: 0; display: block; }
.site-footer__lockup { display: flex; align-items: center; gap: 20px; margin: 0 0 44px; }
.site-footer__mark { display: block; width: 72px; height: 72px; margin: 0; flex: 0 0 auto; }
.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--step-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 64px;
  align-items: flex-start;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer__links a, .site-footer__contact a {
  font-size: var(--step-body);
  color: var(--ink);
  text-decoration-color: transparent;
  padding: 8px 0;
  display: inline-block;
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover, .site-footer__contact a:hover { text-decoration-color: var(--ink); border: 0; }
}
.site-footer__contact { display: flex; flex-direction: column; gap: 2px; }
.site-footer__contact span { font-size: var(--step-body); padding: 8px 0; }
.site-footer__legal {
  margin-left: auto;
  font-size: var(--step-small);
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}
@media (max-width: 768px) {
  .site-footer { padding: 44px 20px 28px; }
  .site-footer__lockup { gap: 14px; margin-bottom: 28px; }
  .site-footer__mark { width: 56px; height: 56px; }
  .site-footer__name { font-size: var(--step-lead); }
  .site-footer__row { flex-direction: column; gap: 12px; }
  .site-footer__legal { margin-left: 0; padding-top: 12px; }
}

/* ---------- shared pieces ---------- */
.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: var(--step-body);
  font-weight: 500;
  padding: 16px 26px;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-soft); color: #fff; }
}
img.is-white { mix-blend-mode: multiply; }
.hm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding: 0 var(--margin);
}

/* ---------- hero: statement beside specimen mosaic ---------- */
.hm-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100svh - 84px);
  min-height: 600px;
  max-height: 960px;
}
.hm-hero__text {
  padding: 40px var(--margin) 48px var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.hm-hero__title {
  font-size: var(--step-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: none;
  margin-top: 6vh;
}
.hm-hero__title .line { display: block; overflow: hidden; }
.hm-hero__title .line span { display: block; }
.hm-hero__foot {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.hm-hero__support {
  font-size: var(--step-body);
  max-width: 34ch;
  color: var(--ink);
  flex: 1 1 280px;
}
.hm-hero__field {
  background: var(--surface);
  padding: 36px 0 0 28px;
  overflow: hidden;
  position: relative;
}
.hm-mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
  width: 105%;
}
.hm-tile {
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  grid-column: var(--c);
  grid-row: var(--r);
}
.hm-tile--alt { background: var(--surface-3); }
.hm-tile img {
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: contain;
  transition: transform 900ms var(--ease-soft);
}
.hm-tile--big { aspect-ratio: auto; background: var(--ink); }
.hm-tile--big img { width: 100%; height: 100%; object-fit: cover; }
.hm-tile--big.shutter { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .hm-tile--big:hover img { transform: scale(1.04); }
}

@media (max-width: 900px) {
  .hm-hero { grid-template-columns: 1fr; min-height: 0; }
  .hm-hero__text { padding: 24px 20px 40px; gap: 32px; }
  .hm-hero__title { font-size: clamp(2.6rem, 10.5vw, 4rem); max-width: none; margin-top: 8px; }
  .hm-hero__support { font-size: 16px; }
  .hm-hero__field { padding: 20px 20px 0; max-height: 78svh; }
  .hm-mosaic { width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hm-tile { grid-column: auto; grid-row: auto; }
  .hm-tile--big { grid-column: 1 / 3; aspect-ratio: 4 / 3; order: -1; }
  .hm-tile:nth-child(3), .hm-tile:nth-child(5) { margin-top: 48px; }
  .hm-tile--phone-hide { display: none; }
}

/* ---------- the kit: band of unequal panels ---------- */
.hm-kit { margin-top: clamp(96px, 12vw, 200px); }
.hm-kit__title { grid-column: 3 / 13; margin-bottom: 48px; }
.hm-band {
  display: flex;
  height: 68svh;
  min-height: 420px;
  max-height: 760px;
}
.hm-panel {
  flex: var(--grow) 1 0;
  min-width: 0;
  background: var(--field);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: flex-grow 500ms var(--ease-in-out);
}
.hm-panel img {
  width: 110%;
  height: 86%;
  max-width: none;
  object-fit: contain;
  transition: transform 700ms var(--ease-soft);
}
.hm-panel__name {
  position: absolute;
  left: 24px;
  top: 22px;
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.07em;
  transition: text-decoration-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hm-panel:hover { flex-grow: 6; }
  .hm-panel:hover img { transform: scale(1.05); }
  .hm-panel:hover .hm-panel__name { text-decoration-color: var(--ink); }
}
.hm-kit__caption { grid-column: 1 / 8; margin-top: 24px; font-size: var(--step-body); }
.hm-lists {
  grid-column: 1 / 13;
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 64px;
}
.hm-lists p { max-width: 44ch; font-size: var(--step-body); }
.hm-lists b { font-weight: 500; }
@media (max-width: 768px) {
  .hm-grid { column-gap: 16px; padding: 0 20px; }
  .hm-kit__title { grid-column: 1 / 13; margin-bottom: 24px; }
  .hm-band { flex-wrap: wrap; height: 84svh; min-height: 480px; }
  .hm-panel { flex: 0 0 auto; height: 50%; }
  .hm-panel:nth-child(1) { width: 64%; }
  .hm-panel:nth-child(2) { width: 36%; }
  .hm-panel:nth-child(3) { width: 36%; }
  .hm-panel:nth-child(4) { width: 64%; }
  .hm-panel__name { left: 16px; top: 14px; font-size: var(--step-body); }
  .hm-kit__caption { grid-column: 1 / 13; }
  .hm-lists { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
}

/* ---------- how to rent: lines that step across ---------- */
.hm-how { margin-top: clamp(96px, 12vw, 200px); row-gap: 56px; }
.hm-step { grid-column: var(--col) / span 8; }
.hm-step h2 {
  font-size: var(--step-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 14ch;
}
.hm-step p { margin-top: 14px; max-width: 34ch; color: var(--ink-soft); font-size: var(--step-body); }
.hm-step--last h2 { color: var(--accent); }
@media (max-width: 768px) {
  .hm-how { row-gap: 40px; }
  .hm-step { grid-column: 1 / 13; margin-left: calc((var(--i) - 1) * 6vw); }
  .hm-step h2 { font-size: clamp(2rem, 8.4vw, 3rem); max-width: none; }
  .hm-step p { font-size: 16px; }
}

/* ---------- contact: sentence, specimen, two links ---------- */
.hm-contact { margin-top: clamp(96px, 12vw, 200px); align-items: start; }
.hm-contact__title { grid-column: 1 / 13; margin-bottom: 36px; }
.hm-contact__sentence {
  grid-column: 1 / 7;
  font-size: var(--step-head);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 30ch;
  color: var(--ink);
}
.hm-contact__pic {
  grid-column: 8 / 10;
  width: 160px;
  aspect-ratio: 1;
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hm-contact__pic img { width: 118%; height: 118%; max-width: none; object-fit: contain; }
.hm-contact__pic--mark img { width: 72%; height: 72%; }
.hm-contact__links { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 6px; }
.hm-contact__links a { font-size: var(--step-body); color: var(--ink); text-decoration-color: var(--ink); padding: 6px 0; display: inline-block; }
.hm-contact__meta { font-size: var(--step-small); color: var(--ink-muted); margin-top: 10px; }
@media (max-width: 768px) {
  .hm-contact__title { margin-bottom: 20px; }
  .hm-contact__sentence { grid-column: 1 / 13; font-size: 22px; max-width: none; }
  .hm-contact__pic { grid-column: 1 / 13; width: 96px; margin-top: 28px; }
  .hm-contact__links { grid-column: 1 / 13; margin-top: 20px; }
}

/* ---------- motion (transform + opacity only; still page without it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .hm-hero__title .line span {
    transform: translateY(105%);
    animation: hm-line 800ms var(--ease-expo) forwards;
    animation-delay: calc(120ms + var(--i) * 90ms);
  }
  @keyframes hm-line { to { transform: none; } }
  .js .hm-hero [data-load] {
    opacity: 0;
    transform: translateY(12px);
    animation: hm-rise 600ms var(--ease-out) forwards;
    animation-delay: var(--d, 500ms);
  }
  @keyframes hm-rise { to { opacity: 1; transform: none; } }
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out) 200ms; }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft) 200ms; }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in img { transform: none; }

}

/* Phase 1: Work Sans italics are not loaded; keep legacy ledes upright until Phase 2 restyles these pages */
.empty-state,
.equipment-search input::placeholder,
.gear-item__included summary,
.hero__lede,
.item-page__lede,
.kit__note,
.page-header__lede { font-style: normal; }


/* =====================================================================
   PHASE 2 LAYER: catalogue pages, item pages, hand-written pages
   ===================================================================== */
.container, .container-narrow, .container-text { max-width: none; padding: 0 var(--margin); }
.container-text { max-width: calc(60ch + 2 * var(--margin)); margin: 0; }
.prose p { font-size: var(--step-body); line-height: 1.6; max-width: 60ch; color: var(--ink); }
.prose h2 { margin-top: clamp(40px, 5vw, 72px); margin-bottom: 16px; }
.section { padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 8vw, 120px); }

.gear-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gear-item__head .gear-item__price { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gear-item__price span, .price-sep { color: var(--ink-muted); }
.price-sep::before { content: " · "; }
.gear-item__included[open] summary { color: var(--ink); }

.cat-card__photo { width: 120px; aspect-ratio: 1; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.cat-card__photo img { width: 118%; height: 118%; max-width: none; object-fit: contain; }

.item-page__price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 8px 0; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.item-page__price-row span:first-child { color: var(--ink-muted); }
.item-page__price-row--lead { font-size: var(--step-lead); }
.item-page__back { margin-top: 28px; font-size: var(--step-body); }
.item-page__back a { color: var(--ink); text-decoration-color: var(--rule); }
.item-page__related-name { font-size: var(--step-body); transition: color 150ms ease; }

@media (max-width: 900px) {
  .item-page__hero { grid-template-columns: 1fr; gap: 28px; }
  .equipment-grid, .cat-grid { grid-template-columns: 1fr; gap: 28px; }
  .item-page__related-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .equipment-toc { padding: 4px 20px 0; gap: 2px 20px; }
  .equipment-search { padding: 20px 20px 4px; }
  .equipment-search input { font-size: 16px; }
  .equipment-grid { padding: 20px 20px 0; }
  .equipment-results-banner, .empty-state { padding-left: 20px; padding-right: 20px; }
  .entry { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .cat-card { grid-template-columns: 96px 1fr; gap: 16px; }
  .cat-card__photo { width: 96px; }
  .gear-item { grid-template-columns: 64px 1fr; gap: 14px; }
  .gear-item__photo { width: 64px; }
  .equipment-toc { position: sticky; top: 0; background: var(--bg); z-index: 5; padding-top: 8px; padding-bottom: 6px; }
  .item-page__compat { grid-template-columns: 1fr; }
  .page-header__title { max-width: none; }
}


/* page header with the category's specimen (category pages, equipment index, About, Services) */
.page-header__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.page-header__specimen { aspect-ratio: 4 / 3; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.page-header__specimen img { width: 112%; height: 112%; max-width: none; object-fit: contain; }
.page-header--specimen { padding-bottom: clamp(32px, 4vw, 56px); }
.gear-item__included-meta { color: var(--ink-muted); }
@media (max-width: 900px) {
  .page-header__grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .page-header__specimen { aspect-ratio: 16 / 10; }
  .item-page__photo { aspect-ratio: 16 / 10; }
}


/* item page: short names get the display size on narrow screens; the action lands in the first phone screen */
@media (max-width: 900px) {
  .item-page__title--short { font-size: var(--step-display); }
}
@media (max-width: 768px) {
  .item-page__hero-text { display: flex; flex-direction: column; }
  .item-page__title { order: 1; }
  .item-page__price { order: 2; margin-bottom: 16px; }
  .item-page__cta { order: 3; align-self: flex-start; }
  .item-page__lede { order: 4; margin: 24px 0 0; }
  .item-page__back { order: 5; }
}
/* long page titles (About) keep two lines at every width */
.page-header__title--long { font-size: clamp(2.125rem, 0.9rem + 3vw, 3.25rem); max-width: 20ch; }

.list-foot { padding: clamp(40px, 5vw, 72px) var(--margin) 0; font-size: var(--step-body); }
.list-foot a { color: var(--ink); text-decoration-color: var(--ink); }
@media (max-width: 768px) { .list-foot { padding-left: 20px; padding-right: 20px; } }

@media (max-width: 768px) {
  .item-page__title--long { font-size: var(--step-lead); font-weight: 400; }
}


/* =====================================================================
   THE LIST (cart) + quote request
   ===================================================================== */
.site-list {
  font-size: var(--step-body);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.07em;
  padding: 10px 0;
  white-space: nowrap;
}
.site-list[aria-current="page"] { text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .site-list:hover { text-decoration-color: var(--ink); } }
@media (max-width: 768px) {
  /* phone header: row 1 = mark + Menu, row 2 = search + List */
  .site-menu-btn { order: 2; }
  .site-search { order: 3; flex: 1 1 200px; flex-basis: auto; width: auto; }
  .site-list { order: 4; flex: 0 0 auto; padding: 10px 0 10px 14px; margin-top: 4px; }
  .site-nav { order: 5; }
}

.add-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  font: inherit;
  font-size: var(--step-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.add-btn:active { transform: scale(0.97); }
.add-btn.is-added, .item-page__cta.is-added { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .add-btn:hover { background: var(--surface-3); } }
.item-page__cta { cursor: pointer; font: inherit; font-size: var(--step-body); font-weight: 500; }

.section--list { padding-top: 0; }
.list-empty { font-size: var(--step-lead); font-weight: 300; max-width: 36ch; }
.list-items { list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; display: grid; gap: 24px; max-width: 920px; }
.list-item { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 20px; align-items: center; }
.list-item__photo { width: 72px; aspect-ratio: 1; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.list-item__photo img { width: 118%; height: 118%; max-width: none; object-fit: contain; }
.list-item__name { font-size: var(--step-body); font-weight: 500; color: var(--ink); text-decoration-color: transparent; }
.list-item__rate { font-size: var(--step-body); color: var(--ink); margin-top: 2px; }
.list-item__rate span, .list-item__avail { color: var(--ink-muted); }
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty__btn { width: 40px; height: 40px; font: inherit; font-size: var(--step-lead); line-height: 1; color: var(--ink); background: var(--surface-2); border: 0; cursor: pointer; }
.qty__btn:disabled { color: var(--ink-muted); cursor: default; }
.qty__n { min-width: 36px; text-align: center; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.list-item__remove { font: inherit; font-size: var(--step-small); color: var(--ink-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; padding: 10px 0; }
.list-form { max-width: 920px; }
.list-form__title { margin-bottom: 24px; }
.list-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.list-form label { display: flex; flex-direction: column; gap: 8px; font-size: var(--step-body); color: var(--ink); }
.list-form input, .list-form textarea { font: inherit; font-size: var(--step-body); color: var(--ink); background: var(--surface); border: 0; border-radius: 0; padding: 12px 14px; width: 100%; }
.list-form textarea { resize: vertical; min-height: 110px; }
.list-form__wide { grid-column: 1 / -1; }
.list-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* taste-skill-ignore: hidden spam trap, not a line */
.list-form__foot { display: flex; align-items: flex-start; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.list-form__note { font-size: var(--step-body); color: var(--ink-soft); max-width: 44ch; }
.list-form__status { margin-top: 20px; font-size: var(--step-body); color: var(--ink); min-height: 1.5em; }
@media (max-width: 768px) {
  .list-item { grid-template-columns: 64px 1fr; gap: 12px 14px; }
  .list-item__photo { width: 64px; }
  .qty { grid-column: 2; }
  .list-item__remove { grid-column: 2; justify-self: start; padding: 4px 0 8px; }
  .list-form__grid { grid-template-columns: 1fr; gap: 16px; }
  .list-form input, .list-form textarea { font-size: 16px; }
}