/* ==========================================================================
   Old Chief Leather Co.
   Hand-built static site. No build step, no framework.
   Sections: Tokens / Reset / Type / Layout / Header / Buttons / Hero /
             Ridge / Cards / Story / Swatches / Process / FAQ / Forms /
             Product page / Footer / Utilities / Motion / Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts
   Charcuterie Block is the face used in the logo: all caps, oblique, condensed.
   It's a display font, so it's reserved for the big page titles rather than
   every heading, where it would cost too much readability.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Charcuterie Block";
  src: url("../fonts/charcuterie-block.woff2") format("woff2"),
       url("../fonts/charcuterie-block.woff") format("woff");
  font-weight: 400;
  font-style: normal;   /* the slant is drawn in; don't let the browser fake it */
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand: green sampled from the circle logo */
  --green-900: #16281b;
  --green-800: #1d3623;
  --green:     #2a5233;
  --green-600: #35673f;
  --green-400: #5c8a66;

  /* Leather */
  --tan:       #c0743a;
  --tan-light: #dda86e;
  --tan-deep:  #8b5228;

  /* Neutrals */
  --paper:     #faf7f1;
  --bone:      #f2ece1;
  --bone-deep: #e6ddcd;
  --ink:       #1b1a17;
  --ink-soft:  #55504a;
  --ink-faint: #857e74;
  --line:      rgba(27, 26, 23, 0.12);
  --line-soft: rgba(27, 26, 23, 0.07);

  /* Type */
  --display: "Oswald", "Poppins", system-ui, sans-serif;
  --title:   "Charcuterie Block", "Oswald", system-ui, sans-serif;
  --body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Space + shape */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.06),
               0 2px 8px rgba(27, 26, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 26, 23, 0.08),
               0 12px 32px rgba(27, 26, 23, 0.08);
  --shadow-lg: 0 8px 24px rgba(27, 26, 23, 0.12),
               0 24px 64px rgba(27, 26, 23, 0.12);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Height of the mountain range above the footer, at the artwork's true
     proportions (2966 x 332). Kept here so the section above can reserve
     matching clearance. */
  --range-h: calc(100vw / 8.934);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

button { cursor: pointer; }

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

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

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

::selection {
  background: var(--tan);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.h-xxl { font-size: clamp(2.75rem, 8vw, 5.5rem); }
.h-xl  { font-size: clamp(2rem, 5vw, 3.25rem); }
.h-lg  { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
.h-md  { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

p { text-wrap: pretty; }

/* The logo face, on the one big title each page gets. It's caps-only and
   condensed, so it runs a little larger and a little looser than Oswald. */
.hero h1,
.story-hero-title,
.page-head h1,
.page-head h2 {
  font-family: var(--title);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.02;
}

.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tan-deep);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--tan);
  flex: none;
}

.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--tan);
  flex: none;
}

.on-dark .eyebrow { color: var(--tan-light); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(1200px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.container-sm {
  width: min(780px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.container-md {
  width: min(980px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(2.5rem, 6vw, 4rem); }

/* A section sitting directly under a ridge divider needs extra headroom, or
   the mountain crowds the first line of content. */
.section.under-ridge { padding-top: clamp(5rem, 10vw, 8.5rem); }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

.bg-bone  { background: var(--bone); }
.bg-green { background: var(--green); color: var(--bone); }
.bg-ink   { background: var(--ink); color: var(--bone); }

.on-dark,
.bg-green,
.bg-ink { color: var(--bone); }

.on-dark p,
.bg-green p,
.bg-ink p { color: rgba(242, 236, 225, 0.78); }

/* Paper grain: subtle, keeps big flat areas from feeling like a template */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. Announcement bar + Header
   -------------------------------------------------------------------------- */
.announce {
  background: var(--green-900);
  color: var(--bone);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem var(--gutter);
}

.announce strong {
  font-weight: 600;
  color: var(--tan-light);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.3s var(--ease);
}

/* The frosted background lives on a pseudo-element rather than on the header
   itself. `backdrop-filter` makes an element the containing block for its
   fixed-position descendants, which would trap the mobile drawer inside the
   header instead of letting it fill the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.nav-logo img {
  width: clamp(160px, 20vw, 215px);
  height: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-menu a {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 1.5px;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after,
.nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu a[aria-current="page"] { color: var(--ink); }

/* `.nav-menu a` is more specific than `.btn-primary`, so buttons sitting in
   the nav need their colours restated or they inherit the muted link grey. */
.nav-menu .btn::after { display: none; }
.nav-menu .btn { color: var(--ink); }
.nav-menu .btn:hover { color: var(--paper); }
.nav-menu .btn-primary,
.nav-menu .btn-primary:hover { color: var(--bone); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  padding: 0;
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span + span { margin-top: 5px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 1.5rem 2rem;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.36s var(--ease);
    overflow-y: auto;
  }

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

  .nav-menu a {
    font-size: 1.05rem;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-menu a::after { display: none; }
  .nav-menu .btn { margin-top: 1.25rem; justify-content: center; }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(27, 26, 23, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
    z-index: 99;
  }

  .nav-scrim.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  transition: background 0.24s var(--ease), color 0.24s var(--ease),
              border-color 0.24s var(--ease), transform 0.24s var(--ease);
  text-align: center;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--bone);
}

.btn-primary:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}

.btn-tan {
  background: var(--tan);
  border-color: var(--tan);
  color: #fff;
}

.btn-tan:hover {
  background: var(--tan-deep);
  border-color: var(--tan-deep);
}

.btn-ghost-light {
  border-color: rgba(242, 236, 225, 0.55);
  color: var(--bone);
}

.btn-ghost-light:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.8125rem; }
.btn-lg { padding: 1.05rem 2rem; font-size: 0.9375rem; }

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

.btn .icon { width: 1em; height: 1em; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Text link with arrow */
.link-arrow {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tan-deep);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.24s var(--ease), color 0.24s var(--ease);
}

.link-arrow:hover { gap: 0.85rem; color: var(--ink); }
.on-dark .link-arrow { color: var(--tan-light); }
.on-dark .link-arrow:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Centred to sit with .page-head and .story-hero, so every page on the site
   opens the same way. */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 840px);
  display: grid;
  align-items: center;
  isolation: isolate;
  color: var(--bone);
  overflow: hidden;
  text-align: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(11, 18, 13, 0.55),
    rgba(11, 18, 13, 0.38) 45%,
    rgba(11, 18, 13, 0.6));
}

.hero-inner {
  padding-block: clamp(3rem, 8vw, 6rem);
  max-width: 46rem;
  margin-inline: auto;
}

.hero-mark {
  width: clamp(230px, 32vw, 340px);
  margin: 0 auto 1.75rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  line-height: 0.98;
  color: #fff;
  margin-bottom: 1.25rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--tan-light);
}

.hero p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(242, 236, 225, 0.86);
  max-width: 36rem;
  margin: 0 auto 2rem;
}

.hero .btn-row {
  margin-bottom: 0;
  justify-content: center;
}

/* Page banner for interior pages. Deliberately matches .story-hero on
   about.html, meaning centred type over a full-bleed photograph, so every page
   opens the same way. */
.page-head {
  position: relative;
  isolation: isolate;
  color: var(--bone);
  display: grid;
  align-items: center;
  min-height: clamp(320px, 46vh, 500px);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
  text-align: center;
}

.page-head-media { position: absolute; inset: 0; z-index: -2; }

.page-head-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(11, 18, 13, 0.55),
    rgba(11, 18, 13, 0.38) 45%,
    rgba(11, 18, 13, 0.6));
}

/* Same weight and scale as .story-hero-title. */
.page-head h1,
.page-head h2 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 24px rgba(11, 18, 13, 0.4);
  margin-bottom: 0.85rem;
}

.page-head p {
  color: rgba(242, 236, 225, 0.85);
  max-width: 52ch;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   8. Ridge divider: the Chief Mountain skyline, borrowed from the logo
   -------------------------------------------------------------------------- */
/* The band is a flat horizon with Chief Mountain standing on it, traced from
   the logo mark. The mountain keeps its true proportions at every screen width
   (stretching it to fill flattens the summit into an unrecognisable plateau),
   and the horizon carries the colour out to both edges. */
.ridge-wrap {
  position: relative;
  height: clamp(64px, 9vw, 120px);
  line-height: 0;
  overflow: hidden;
  /* Overlaps the section below by 2px. Meeting it exactly leaves a hairline of
     page background whenever the boundary lands on a fractional pixel. The
     horizon bar below covers the overlap, and both are the same colour. */
  margin-bottom: -2px;
}

/* Flipped, the divider sits after its section, so it overlaps upward instead. */
.ridge-wrap.ridge-flip {
  margin-bottom: 0;
  margin-top: -2px;
}

.ridge-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: currentColor;
}

.ridge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  aspect-ratio: 947 / 263;
  fill: currentColor;
}

.ridge-flip { transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   9. Product cards
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

/* The homepage featured row and the related-products row hold two or three
   cards, not a full catalogue. A plain auto-fill grid would strand them in the
   left-hand tracks, so these centre instead and grow to a sensible width. */
.product-grid.is-featured {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-grid.is-featured > .product-card {
  flex: 1 1 280px;
  max-width: 380px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

/* Square, because every product photo in the library is square. A taller frame
   would crop them and upscale harder than the source can stand. */
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bone-deep);
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
}

.product-card:hover .product-media img { transform: scale(1.045); }

/* Second image cross-fades in on hover when one is provided */
.product-media .alt-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.product-card:hover .product-media .alt-shot { opacity: 1; }

.product-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
}

.product-body h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.product-cat {
  font-family: var(--display);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.product-blurb {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.product-foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.price {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.price small {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

.price.is-tbd { color: var(--ink-faint); font-style: italic; font-size: 1rem; }

/* Status badges */
.badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  background: var(--green);
  color: var(--bone);
}

.badge-ready { background: var(--green); }
.badge-made  { background: var(--tan-deep); }
.badge-soon  { background: var(--ink-soft); }
.badge-draft { background: #8a2f2f; }

.badge-inline {
  position: static;
  display: inline-block;
}

/* Stand-in for a photograph that hasn't been taken yet. Styled as a deliberate
   slot with the mountain mark, not as a broken image. */
.photo-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, var(--paper), var(--bone) 62%, var(--bone-deep));
}

.photo-pending-mark {
  width: clamp(58px, 34%, 96px);
  height: auto;
  fill: var(--green);
  opacity: 0.16;
}

.photo-pending span {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The gallery frame is not positioned by default; the placeholder needs it. */
.gallery-main { position: relative; }

/* --------------------------------------------------------------------------
   10. Shop filters
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.filter-btn {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-soft);
  transition: all 0.22s var(--ease);
}

.filter-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-btn[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--bone);
}

.filter-count {
  margin-left: auto;
  align-self: center;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-faint);
}

/* Explains the C2 / F5 product names so they read as a system, not a code. */
.naming-key {
  margin: -0.5rem 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0.9rem 1.15rem;
  border-left: 3px solid var(--tan);
  background: rgba(192, 116, 58, 0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 74ch;
}

.naming-key strong { color: var(--ink); }

.naming-key b {
  font-family: var(--display);
  font-weight: 600;
  color: var(--tan-deep);
}

/* --------------------------------------------------------------------------
   11. Story blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.split.is-reversed .split-media { order: 2; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.is-reversed .split-media { order: 0; }
}

.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.figure-note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--tan);
  font-style: italic;
}

/* --- Polaroid ----------------------------------------------------------
   White block with a square picture inside and the deep band at the bottom
   that a real Polaroid has. */
.polaroid {
  margin: 0 auto;
  max-width: 440px;
  background: #fdfbf6;
  /* the deep band at the bottom is what makes it read as a Polaroid, with or
     without anything written on it */
  padding: 15px 15px 62px;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(11, 18, 13, 0.28),
    0 18px 40px rgba(11, 18, 13, 0.34);
  transform: rotate(-1.6deg);
  transition: transform 0.5s var(--ease);
}

.polaroid:hover { transform: rotate(0deg); }

.polaroid-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
}

/* Beat the generic .split-media img rules. */
.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Optional: anything written on the band. */
.polaroid figcaption {
  margin-bottom: -34px;
  padding-top: 1.1rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-style: italic;
  color: #6b655c;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid { transform: none; }
}

.on-dark .figure-note { color: rgba(242, 236, 225, 0.6); }

/* Offset photo pair */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.photo-pair img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.photo-pair img:last-child { margin-top: clamp(1.5rem, 5vw, 3.5rem); }

/* Pull quote */
.pull-quote {
  max-width: 40ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.pull-quote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-light);
}

/* Fact strip */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fact {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem;
  text-align: center;
}

.fact dt {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.fact dd {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   12. Swatch picker: leather + thread
   -------------------------------------------------------------------------- */
.swatch-studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

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

.swatch-group + .swatch-group { margin-top: 1.75rem; }

.swatch-label {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}

.on-dark .swatch-label { color: rgba(242, 236, 225, 0.65); }

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.swatch {
  --sw: transparent;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, 0.18) inset;
  padding: 0;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

/* A soft highlight gives the flat colour a little depth, so the circles read
   as material rather than as paint chips. */
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle at 72% 82%,
    rgba(0, 0, 0, 0.22),
    rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}

.swatch:hover { transform: scale(1.08); }

.swatch[aria-pressed="true"] {
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--tan), 0 0 0 1px rgba(27, 26, 23, 0.2) inset;
  transform: scale(1.08);
}

.on-dark .swatch[aria-pressed="true"] { border-color: var(--green-900); }

.swatch-thread { width: 44px; height: 44px; }

.swatch-readout {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.on-dark .swatch-readout { border-color: rgba(242, 236, 225, 0.18); }

.swatch-readout .combo {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
}

.swatch-readout .combo .plus { color: var(--tan); margin-inline: 0.35rem; }

/* Preview panel: a drawn square of leather with a stitched border. The SVG is
   generated by main.js from the two selected colours. */
.swatch-preview {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

/* The combination is already named on the left, so the drawing carries no
   caption of its own and gets the room instead. */
.preview-stage {
  display: block;
  width: 100%;
  margin-inline: auto;
}

.preview-stage svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.preview-note {
  margin: 1.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12b. Story page (about.html)
   Mirrors the old site's About Us layout: full-bleed mountain, centred
   editorial copy, a scroll-driven swap from photograph to logo, then the
   family photographs.
   -------------------------------------------------------------------------- */

.story-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 68vh, 720px);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.story-hero-media { position: absolute; inset: 0; z-index: -2; }

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

.story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 18, 13, 0.42), rgba(11, 18, 13, 0.28) 45%, rgba(11, 18, 13, 0.5));
}

.story-hero-inner { text-align: center; }

.story-eyebrow {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1rem;
}

.story-hero-title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 24px rgba(11, 18, 13, 0.4);
}

/* Centred editorial column */
.story-block { text-align: center; }

.story-block p {
  font-size: clamp(1rem, 1.35vw, 1.0625rem);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-inline: auto;
}

.story-block p + p { margin-top: 1.5rem; }

.story-portrait {
  width: clamp(160px, 22vw, 220px);
  height: clamp(160px, 22vw, 220px);
  object-fit: cover;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.story-signoff {
  margin-top: 2rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
}

.story-title {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- Scroll swap: photograph → logo ---------------------------------------
   The section is taller than the viewport; the stage sticks while you scroll
   past it, and --p (set by main.js) drives the cross-fade. */
.swap {
  --p: 0;
  height: 220vh;
  position: relative;
}

.swap-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.swap-photo,
.swap-logo {
  position: absolute;
  inset: 0;
}

.swap-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Drifts in slightly as it fades out, so the swap reads as a dissolve
     rather than a light switch. */
  transform: scale(calc(1 + var(--p) * 0.14));
  opacity: calc(1 - var(--p) * 1.25);
}

.swap-logo {
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--green);
  opacity: var(--p);
}

.swap-logo img {
  width: min(520px, 72vw);
  height: auto;
  transform: scale(calc(0.88 + var(--p) * 0.12));
}

/* Without the scroll effect, show the photograph and the mark stacked. */
@media (prefers-reduced-motion: reduce) {
  .swap { height: auto; }
  .swap-stage { position: static; height: auto; }
  .swap-photo, .swap-logo { position: static; }
  .swap-photo img {
    height: clamp(320px, 55vh, 560px);
    transform: none;
    opacity: 1;
  }
  .swap-logo {
    opacity: 1;
    padding-block: clamp(3rem, 8vw, 5rem);
  }
  .swap-logo img { transform: none; }
}

/* ---- Poem ---- */
.quote-rule {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.quote-rule span {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.quote-rule svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: var(--green);
}

.story-poem { text-align: center; }

.story-poem p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.story-poem footer { margin-top: 1.75rem; }

.poem-name {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.poem-role {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Family photographs ---- */
.story-photos {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.story-photos figure { margin: 0; }

.story-photos img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.photo-credit {
  margin-top: 1rem;
  text-align: center;
}

/* ---- Ground rules, restyled to sit with the rest of this page ---- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.75rem);
  text-align: center;
}

.rule h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
  padding-top: 1.15rem;
  border-top: 2px solid var(--tan);
  display: inline-block;
}

.rule p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   13. Process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step { position: relative; padding-top: 2.5rem; }

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tan);
  opacity: 0.5;
}

.step h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--line);
}

.on-dark .step h3 { border-color: rgba(242, 236, 225, 0.22); }

.step p { font-size: 0.9375rem; color: var(--ink-soft); }

/* Vertical timeline variant used on the process page */
.timeline { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.timeline-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 700px) {
  .timeline-item { grid-template-columns: 1fr; gap: 1rem; }
}

.timeline-num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--tan);
  opacity: 0.55;
}

.timeline-body h3 { margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   14. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.faq-q:hover { color: var(--tan-deep); }

.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }

.faq-q[aria-expanded="true"] .faq-icon::after { transform: translateX(-50%) scaleY(0); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}

.faq-a > div { overflow: hidden; }

.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

.faq-a p {
  color: var(--ink-soft);
  padding-bottom: 1.5rem;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.field .req { color: var(--tan-deep); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 300;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(42, 82, 51, 0.12);
}

.field textarea { resize: vertical; min-height: 140px; }

.field-hint {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   16. Product detail page
   -------------------------------------------------------------------------- */
.product-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone-deep);
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-md);
  /* tools/prep-photos.py writes 1400px squares, so this can go up to 700 and
     still be sharp on a 2x display. */
  max-width: 700px;
}

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

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.gallery-thumb {
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bone-deep);
  opacity: 0.6;
  transition: opacity 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 1; }

.gallery-thumb[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--tan);
}

.product-detail > * + * { margin-top: 1.5rem; }

.product-detail h1 { margin-bottom: 0.4rem; }

.product-price-lg {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 500;
}

.spec-list {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.spec-list div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  font-size: 0.9375rem;
}

@media (max-width: 480px) {
  .spec-list div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.spec-list dt {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.15rem;
}

.spec-list dd { margin: 0; color: var(--ink-soft); }

.feature-list { display: grid; gap: 0.65rem; }

.feature-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.feature-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--tan);
}

.buy-box {
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.buy-note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  text-align: center;
}

.setup-note {
  border-left: 3px solid var(--tan);
  background: rgba(192, 116, 58, 0.08);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.setup-note strong { color: var(--tan-deep); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--green-900);
  color: rgba(242, 236, 225, 0.72);
  padding-top: clamp(3rem, 7vw, 5rem);
}

/* The Chief Mountain range forms the top edge of the footer. It sits just
   above the footer box in the footer's own colour, and the silhouette is solid
   below the ridgeline, so the range and the footer read as one shape.
   No overflow:hidden on the footer, or this gets clipped away.

   `aspect-ratio` matches the artwork exactly, so the range is never squashed:
   it just gets taller as the page gets wider. --range-h mirrors that height so
   the section above can reserve clearance for it. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Overlaps the footer by 2px. Sitting exactly on the edge leaves a hairline
     of the section behind showing through whenever the footer's top lands on a
     fractional pixel, which reads as a seam. */
  bottom: calc(100% - 2px);
  aspect-ratio: 2966 / 332;
  height: auto;
  background: var(--green-900);
  pointer-events: none;
  -webkit-mask: url("../img/brand/chief-range.png") bottom center / 100% 100% no-repeat;
  mask: url("../img/brand/chief-range.png") bottom center / 100% 100% no-repeat;
}

/* The range overhangs whatever section precedes the footer, so that section
   gives back the space rather than letting the mountains sit on its text. */
main > *:last-child { padding-bottom: calc(var(--range-h) + 1.5rem); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-brand img { width: 220px; margin-bottom: 1.25rem; }

.footer-brand p { font-size: 0.9rem; max-width: 34ch; }

.site-footer h4 {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 1.1rem;
}

.site-footer li + li { margin-top: 0.6rem; }

.site-footer a { font-size: 0.9375rem; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--tan-light); }

.socials {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(242, 236, 225, 0.25);
  border-radius: 50%;
  transition: all 0.24s var(--ease);
}

.socials a:hover {
  background: var(--tan);
  border-color: var(--tan);
  color: #fff;
  transform: translateY(-2px);
}

.socials svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(242, 236, 225, 0.14);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
}

.footer-bottom .made-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(242, 236, 225, 0.5);
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.measure { max-width: 68ch; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--green);
  color: var(--bone);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s var(--ease);
}

.skip-link:focus { top: 0; }

.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.prose h3 { margin-top: 2rem; font-size: 1.1rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { display: grid; gap: 0.5rem; padding-left: 1.1rem; list-style: disc; }
.prose a { color: var(--tan-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

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

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

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

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .announce, .btn, .hero-media { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   20. Cart
   -------------------------------------------------------------------------- */

.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-cart:hover { color: var(--green); background: var(--bone); }
.nav-cart svg { width: 27px; height: 27px; }

/* The badge only appears once there is something to count, so an empty cart
   adds no visual noise to the header. */
.cart-count {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--green);
  color: var(--paper);
  font-family: var(--display);
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 0 0 2px var(--paper);
}

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

/* ---- line items ---- */

.cart-line {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 1.1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}

.cart-line-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bone-deep);
}

.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.2rem;
}

.cart-line h3 a { color: var(--ink); }
.cart-line h3 a:hover { color: var(--green); }

.cart-line-opts {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

/* The swatch dots repeat the chosen colours next to the words, because a
   customer who picked "Havana Cigar" three pages ago may not remember it. */
.cart-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: -1px;
  border: 1px solid rgba(27, 26, 23, 0.18);
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty button {
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s var(--ease);
}

.qty button:hover:not(:disabled) { background: var(--bone); color: var(--green); }
.qty button:disabled { opacity: 0.32; cursor: not-allowed; }

.qty span {
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

.cart-remove {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-remove:hover { color: var(--tan-deep); }

.cart-line-price {
  font-family: var(--display);
  font-size: 1.0625rem;
  white-space: nowrap;
  text-align: right;
}

.cart-line-each {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.cart-line.is-unavailable { opacity: 0.62; }

/* ---- summary ---- */

.cart-summary {
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: var(--bone);
  border-radius: var(--radius-lg);
}

.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.cart-row.is-total {
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ink);
}

.cart-row .free { color: var(--green-600); font-weight: 500; }

/* Progress toward free shipping. Worth showing: it is the one number that
   reliably changes what someone puts in the basket. */
.ship-nudge {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.ship-bar {
  height: 4px;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: var(--bone-deep);
  overflow: hidden;
}

.ship-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--green-400);
  transition: width 0.4s var(--ease);
}

.cart-error {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--tan-deep);
  background: var(--paper);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.checkout-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ---- add to cart on the product page ---- */

.buy-row { display: flex; gap: 0.6rem; align-items: stretch; }
.buy-row .qty { flex: 0 0 auto; }
.buy-row .btn { flex: 1; }

/* Confirmation after adding. Inline rather than a popup: a modal that steals
   focus is the most disliked pattern in online shops. */
.added-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  color: var(--green-600);
}

.added-note a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .cart-line { grid-template-columns: 68px 1fr; }
  .cart-line-price { grid-column: 2; text-align: left; margin-top: 0.3rem; }
}

/* ---- quick add on the shop grid ---- */

.quick-add {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}

.quick-add .btn { flex: 1; white-space: nowrap; }

.qty-sm button { width: 26px; height: 26px; font-size: 0.9375rem; }
.qty-sm span { min-width: 24px; font-size: 0.875rem; }

/* The confirmation replaces the row rather than sitting under it, so a card
   never changes height and the grid never jumps while someone is clicking. */
.quick-added {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 34px;
  font-size: 0.8125rem;
  color: var(--green-600);
}

.quick-added a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The grid card's own foot loses its "View" link once quick add is there:
   the photo and the title are both already links to the product page. */
.product-foot.has-quick-add { padding-bottom: 0.75rem; }