/* Finch & Hatton — editorial soft furnishings
   Re-skin by changing the :root variables. Every component reads from them. */

:root {
  /* Brand palette — vintage cream + forest green + warm ink */
  --primary: #2d4a3e;          /* forest green — buttons, accents */
  --primary-dark: #1f352b;     /* deep forest */
  --primary-tint: #e8efe9;     /* pale sage */
  --sage: #7a8a6f;             /* sage green — italic accents */
  --sage-dark: #5a6a4f;

  --brown: #3a2e26;            /* warm dark brown — for main headlines */
  --brown-soft: #4d3d33;       /* slightly lighter brown for secondary use */
  --olive: #3d3d2e;            /* dark olive — alt for headlines */
  --cream: #faf8f3;            /* main page background */
  --cream-warm: #f5f1e8;       /* slightly deeper cream for contrast blocks */
  --ink: #1f2424;              /* primary text — soft black */
  --ink-2: #4b4b4d;            /* secondary text */
  --ink-3: #6b6f6c;            /* tertiary / muted */

  --gold: #c4a96d;             /* antique gold — accent on dark backgrounds */
  --line: #e5e0d4;             /* hairline borders */

  --bg: var(--cream);
  --bg-soft: #ffffff;          /* white panels (product cards) */

  --radius: 8px;               /* consistent corner rounding */
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(20,30,20,.04);
  --shadow-md: 0 8px 28px rgba(20,30,20,.08);

  --max: 1280px;
  --pad: clamp(20px, 4vw, 40px);
  /* Mirrors .hero-grid's column gap. The desktop logo is centred on the
     hero's first column, so both must read the same number. */
  --hero-gap: 0px;

  /* Typography: serif headlines + clean sans body */
  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font: var(--font-sans);

  /* Motion — eased transitions, consistent timing */
  --ease: cubic-bezier(.22, .61, .36, 1);          /* gentle out, slow finish */
  --ease-in: cubic-bezier(.4, 0, 1, 1);            /* for exits */
  --ease-out: cubic-bezier(0, 0, .2, 1);           /* for entrances */
  --ease-emph: cubic-bezier(.16, 1, .3, 1);        /* for emphasis — slower out */
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 560ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--primary-dark); }
ul { margin: 0; padding: 0; list-style: none; }
button {
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; z-index: 1000; }

/* EYEBROW — small uppercase tracked label, used as section divider.
   HIGHEST specificity in the cascade so it always wins over parent
   paragraph rules (e.g. .process-copy p sets color: var(--ink-2)). */
.eyebrow,
p.eyebrow,
section .eyebrow,
.section .eyebrow,
.hero-copy .eyebrow,
.process-copy .eyebrow,
.journal .eyebrow,
.testimonials .eyebrow,
.bespoke .eyebrow,
.recent .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-3);       /* default for light sections */
  margin: 0 0 16px;
  font-family: var(--font-sans);
  text-decoration: none;
  line-height: 1.4;
}

/* TYPOGRAPHY — refined scale, optical sizing, better leading */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.012em;
  color: var(--olive);
  font-weight: 500;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 5.5vw + .5rem, 3.85rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
h2 {
  font-size: clamp(2rem, 3.5vw + .5rem, 2.75rem);
  line-height: 1.08;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
h4 {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  line-height: 1.3;
}

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

em.italic-accent {
  font-style: italic;
  color: var(--sage);
  font-weight: 500;
}

::selection { background: var(--sage); color: var(--cream); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.section-head .eyebrow { margin-bottom: 8px; }
.section-link {
  color: var(--ink);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  position: relative;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), letter-spacing var(--t-med) var(--ease);
}
.section-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  letter-spacing: .16em;
}

/* BUTTONS — 8px rounding, matching the imagery */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  text-align: center;
  min-height: 48px;
  font-family: var(--font-sans);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--cream); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost-light:hover { background: var(--cream); color: var(--primary); }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,243,.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.site-header.is-stuck {
  background: rgba(250,248,243,.97);
  border-bottom-color: var(--line);
}
.header-row {
  display: grid;
  /* Logo (auto) | Nav (1fr, centred) | Actions (auto) */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 160px;        /* twice the original 80px — taller header */
  gap: clamp(16px, 3vw, 32px);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  justify-self: start;     /* push logo to far left */
  margin-left: clamp(-12px, -1.5vw, 0);  /* bleed slightly past the page padding */
}
.brand img {
  width: 200px; height: auto;  /* larger logo to match taller header */
  transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.brand:hover img { opacity: .85; transform: translateY(-1px); }
.brand-mark {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1;
}
.brand-mark .amp { color: var(--gold); font-style: italic; }
.brand-sub {
  display: block;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 4px;
}

.nav-toggle {
  background: none; border: 0; padding: 10px;
  display: inline-flex; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-med) var(--ease-emph), opacity var(--t-fast) var(--ease); transform-origin: center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav { display: none; }
.primary-nav.is-open {
  display: block;
  /* On mobile, drop down full-width below the header instead of pushing the actions */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: 60;
  padding: var(--pad);
  box-shadow: 0 16px 40px rgba(20,30,20,.08);
}
.primary-nav ul { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.primary-nav a {
  display: block; padding: 12px 8px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  color: var(--ink);
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.primary-nav a:hover { color: var(--primary); }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-emph);
}
.primary-nav a:hover::after { transform: scaleX(1); }

/* DROPDOWN — editorial, no border, serif items */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-emph);
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after { transform: scaleX(1); }
.has-dropdown > a > .chev {
  display: inline-block;
  margin-left: 4px;
  font-size: .6em;
  opacity: .55;
  transition: transform var(--t-med) var(--ease-emph);
}
.has-dropdown:hover > a > .chev { transform: rotate(180deg); }
/* Dropdown sits directly under the trigger text (not 24px to the left).
   The whole .dropdown is the visible card — no separate inner panel needed.
   The "bridge" to the trigger is the card's own top area, painted solid. */
.dropdown {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(250, 248, 243, .99);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 2px solid var(--primary);
  border-radius: 8px;
  min-width: 210px;
  padding: 10px 0 14px;
  z-index: 60;
  box-shadow:
    0 2px 8px rgba(20, 30, 20, .06),
    0 16px 40px -8px rgba(20, 30, 20, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.99);
  transform-origin: top left;
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease-emph),
              visibility var(--t-med) var(--ease);
  pointer-events: none;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-pinned .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Invisible hover bridge so the cursor can reach the dropdown from the trigger */
.dropdown::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
}
.dropdown a,
.primary-nav .dropdown a {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  white-space: nowrap;
  position: relative;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-med) var(--ease-emph);
}
.dropdown a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 10px;
  height: 2px;
  background: var(--primary);
  transition: transform var(--t-med) var(--ease-emph);
}
.dropdown a::after { display: none; }
.dropdown a:hover,
.primary-nav .dropdown a:hover {
  background: transparent;
  color: var(--primary);
  padding-left: 32px;
}
.dropdown a:hover::before { transform: translateY(-50%) scaleX(1); }
.dropdown a[aria-current="page"] {
  color: var(--primary);
  background: var(--primary-tint);
  font-weight: 500;
  font-style: normal;
  padding-left: 32px;
}
.dropdown a[aria-current="page"]::before { transform: translateY(-50%) scaleX(1); }
.nav-actions {
  display: none;
}
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;   /* bumped to match taller header */
  color: var(--ink);
  border-radius: 8px;
}
.nav-icon:hover { color: var(--primary); }

/* ============ HERO — full bleed, image dominates ============ */
.hero {
  background: var(--cream);
  padding: 0 0 clamp(40px, 6vw, 72px) 0;
  overflow: hidden;
  max-height: 760px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
  /* On mobile, image goes first, copy below. */
}
@media (min-width: 760px) {
  .hero-grid {
    grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
    gap: 0;
    height: 720px;
  }
}
.hero-copy {
  max-width: 640px;          /* wider for the heavier, more confident copy */
  /* Centre everything inside the hero-copy cell */
  text-align: center;
  align-items: center;       /* centres flex children horizontally */
  /* Top-anchor the text — no big void below the nav. Pad only the top to
     create breathing room between the nav and the eyebrow. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(104px, 6vw, 140px) 0 clamp(40px, 6vw, 64px);
  padding-left: var(--pad);
  padding-right: clamp(24px, 4vw, 48px);
  margin-left: auto;          /* centre the text block within its column */
  margin-right: auto;
}
.hero-copy .eyebrow {
  color: var(--ink-3);
  letter-spacing: .24em;     /* wider tracking to match the smaller size */
  font-weight: 600;
  font-size: .68rem;         /* smaller than before — true eyebrow scale */
  text-transform: uppercase;
  margin: 0 0 1.4em;         /* comfortable gap to the headline */
}
/* HERO HEADLINE — split into two elements so each line can be styled independently.
   "Fabric with a former life," is the brown serif main character (h1, weight 700).
   "a new purpose." is the italic sage follow-up (.hero-headline-em).
   Both flow naturally without a forced <br> — the second line is a separate <p> anyway. */
.hero-copy h1,
.hero-copy .hero-headline {
  color: var(--brown);
  font-weight: 700;
  letter-spacing: -.022em;
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);   /* bigger — true display scale */
  line-height: 1.02;
  margin: 0 0 .12em;          /* tight gap to the italic line */
  /* Wrapping is the mobile default. The single-line treatment is a desktop
     decision and is re-applied below once the viewport can actually hold it —
     unconditionally it forced a 410px line inside a 375px phone, and .hero's
     overflow:hidden then clipped the end of the headline without a scrollbar
     to show anything was wrong. */
  white-space: normal;
  animation: hero-rise 800ms var(--ease-emph) 80ms both;
}
.hero-copy .hero-headline-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;           /* lighter weight on the italic for visual contrast */
  color: var(--sage);
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.014em;
  margin: 0 0 .4em;           /* moderate gap to the body copy */
  animation: hero-rise 800ms var(--ease-emph) 200ms both;
}
.hero-copy h1 em,
.hero-copy h2 em { font-style: italic; color: var(--sage); font-weight: 500; }
.hero-copy p {
  font-size: 1.08rem;        /* slightly bigger body */
  font-weight: 500;          /* was normal — slight bump for cohesion with headline */
  max-width: 520px;
  animation: hero-rise 800ms var(--ease-emph) 280ms both;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;   /* centre the button group under the heading */
  animation: hero-rise 800ms var(--ease-emph) 420ms both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy p, .hero-ctas { animation: none; }
}

.hero-image {
  position: relative;
  aspect-ratio: 4/5;       /* mobile default */
  background: var(--cream);
  overflow: hidden;
  border-radius: 8px;
}
@media (min-width: 760px) {
  .hero-image {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
  }
  .hero { padding-bottom: 0; }
}
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 35% 35%;
  display: block;
}
.hero-image picture { display: block; width: 100%; height: 100%; }   /* subtle zoom on hover, building from base 1.5 */

/* Hero placeholder — soft textile tone (replace with real product photography) */
.hero-image-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(201,169,97,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(232,150,150,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(45,74,62,.10) 0%, transparent 60%),
    linear-gradient(135deg, #f0e9d8 0%, #e8d8c0 50%, #d4c0a0 100%);
}
.hero-image-placeholder::after {
  content: "Hero image — vintage floral fabric";
  position: absolute; bottom: 16px; right: 16px;
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255,255,255,.7);
  padding: 4px 10px;
}

/* ============ EDITORIAL PULL QUOTE ============ */
.pull-quote {
  --pq-pad: clamp(72px, 11vw, 144px);
  /* Section colour. The ruler artwork is transparent now, so this no longer
     has to match a fill baked into the image — it once did, and a mismatch
     showed as a rectangle around the artwork. (was sampled
     #f9f2eb) — close to --cream-warm but different enough to seam otherwise. */
  background: #f9f2eb;
  padding: calc(var(--pq-pad) * .55) 0 var(--pq-pad);
  position: relative;
  overflow: hidden;
}
/* Ruler accent — fixed-scale crop window (same technique as the earlier
   corner threads) onto the source's left strip, entering from the left edge
   and spanning wider than the first version. */
.pull-quote-ruler {
  --scale: .47;
  --crop-x: 0;
  --crop-y: 720;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1100px * var(--scale));
  height: calc(160px * var(--scale));
  background-image: url('../images/pull-quote-ruler2.webp');
  background-repeat: no-repeat;
  background-size: calc(1477px * var(--scale)) calc(1024px * var(--scale));
  background-position: calc(-1px * var(--crop-x) * var(--scale)) calc(-1px * var(--crop-y) * var(--scale));
  pointer-events: none;
  z-index: 0;
}
.pull-quote-inner {
  position: relative;
  z-index: 1;
}
.pull-quote-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.pull-quote-text {
  margin: 0;
  text-align: center;
  display: block;
}
.pull-quote-text .pq-main {
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.16;
  color: var(--brown);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pull-quote-text .pq-em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.16;
  color: var(--sage-dark);
  letter-spacing: -0.01em;
  margin-top: .18em;
  text-wrap: balance;
}
.pull-quote-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(48px, 6vw, 64px);
  border-top: 1px solid var(--line);
}
.pillar {
  text-align: left;
  padding: clamp(24px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  transition: background var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.pillar:hover {
  background: var(--primary-tint);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(58, 46, 38, .10);
}
.pillar-num {
  display: block;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-3);
  margin-bottom: 12px;
  transition: color var(--t-med) var(--ease);
}
.pillar:hover .pillar-num { color: var(--sage-dark); }
.pillar h4 {
  color: var(--olive);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  transition: color var(--t-med) var(--ease);
}
.pillar:hover h4 { color: var(--brown); }
.pillar p {
  font-size: .92rem;
  color: var(--ink-2);
  max-width: 340px;
  margin: 0;
  line-height: 1.55;
}
@media (min-width: 700px) {
  .pull-quote-pillars {
    flex-direction: row;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-left: calc(-1 * clamp(20px, 2.6vw, 32px));
    margin-right: calc(-1 * clamp(20px, 2.6vw, 32px));
  }
  .pillar {
    flex: 1;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: clamp(28px, 3vw, 36px) clamp(20px, 2.6vw, 32px);
  }
  .pillar:last-child { border-right: 0; }
  .pillar p { max-width: none; }
}

/* ============ PROCESS (Our Process) — overlapping editorial collage ============ */
.process {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--cream);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
/* Collage container — taller than the short image, with negative space
   on the right so the short image can overlap into the copy column. */
.process-images {
  position: relative;
  width: 100%;
  /* Total collage height: lets the short image sit below + overlap the tall one */
  aspect-ratio: 4/5;
  max-width: 580px;
}
.process-img {
  background: var(--cream-warm);
  overflow: hidden;
  position: absolute;
  border-radius: 8px;      /* soften the photo corners */
  box-shadow: 0 24px 60px -20px rgba(20,30,20,.25), 0 8px 24px -8px rgba(20,30,20,.12);
}
/* Tall image — back layer, anchored to the left */
.process-img-tall {
  top: 0;
  left: 0;
  width: 72%;
  aspect-ratio: 3/5;
  z-index: 1;
}
/* Short image — front layer, bottom-right, overlapping the tall one.
   Zoom in via scale so the cream/wall background around the cushion
   is cropped — gives a clean, edge-to-edge textile frame. */
.process-img-short {
  right: -4%;                /* nudge slightly off the right edge for a more editorial feel */
  bottom: -4%;
  width: 42%;
  aspect-ratio: 1/1;
  z-index: 2;
}
.process-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-emph), filter var(--t-med) var(--ease);
}
.process-img-short img {
  transform: scale(1);
  transform-origin: center;
}
.process-img:hover img { transform: scale(1.04); }
.process-img-short:hover img { transform: scale(1.04); }
.process-img .ph {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 40% 40%, rgba(201,169,97,.20) 0%, transparent 55%),
    linear-gradient(135deg, #e8d8c0 0%, #c9a961 50%, #8b6f3a 100%);
  transition: transform 1.6s var(--ease-emph);
}
.process-img:hover .ph { transform: scale(1.04); }
.process-img-short .ph {
  background:
    radial-gradient(circle at 50% 50%, rgba(232,150,150,.30) 0%, transparent 60%),
    linear-gradient(135deg, #f5e8d8 0%, #d4a090 100%);
}
.process-img .ph::after {
  content: attr(data-label);
  position: absolute; bottom: 10px; left: 10px;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35);
  padding: 3px 8px;
}

.process-copy h2 em { font-style: italic; color: var(--sage); }
.process-copy h2 { color: var(--olive); }
.process-copy p { color: var(--ink-2); max-width: 520px; line-height: 1.7; }
.process-copy .btn { margin-top: 16px; }

/* ============ AU BADGE ============ */
.au-badge {
  background: var(--cream);
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.au-badge-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}
.au-badge-inner::before,
.au-badge-inner::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.au-mark {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
  line-height: 1;
  flex-shrink: 0;
}
.au-badge-inner p {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============ JOURNAL (dark green section) ============ */
.journal {
  background: var(--primary);
  color: var(--cream);
  padding: clamp(64px, 10vw, 120px) 0;
}
.journal .eyebrow { color: rgba(250,248,243,.7); }
.journal h2 { color: var(--cream); }
.journal h2 em { font-style: italic; color: var(--gold); }
.journal .section-link { color: var(--cream); border-color: var(--cream); }
.journal .section-link:hover { color: var(--gold); border-color: var(--gold); }

.journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.journal-card {
  display: block;
  color: var(--cream);
}
.journal-card:hover { color: var(--cream); }
.journal-card .img {
  aspect-ratio: 4/3;
  background: var(--primary-dark);
  overflow: hidden;
  border-radius: 8px;      /* soften the photo corners */
  margin-bottom: 20px;
  position: relative;
}
.journal-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-emph), filter var(--t-med) var(--ease);
}
.journal-card:hover .img img { transform: scale(1.05); }
.journal-card .img .ph {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(201,169,97,.25) 0%, transparent 60%),
    linear-gradient(135deg, #1f352b 0%, #2d4a3e 60%, #3d5a4e 100%);
}
.journal-card .img .ph::after {
  content: attr(data-label);
  position: absolute; bottom: 12px; left: 12px;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,248,243,.6);
}
.journal-card .date {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,248,243,.6);
  margin-bottom: 8px;
  font-weight: 500;
}
.journal-card h3 {
  color: var(--cream);
  font-size: 1.4rem;
  margin: 0 0 10px;
  line-height: 1.25;
}
.journal-card p {
  color: rgba(250,248,243,.78);
  font-size: .95rem;
  margin: 0 0 14px;
}
.journal-card .more {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s;
}
.journal-card:hover .more { border-color: var(--gold); }

/* ============ FEATURES (4 trust icons) ============ */
.features {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--cream-warm);
}
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
}
.feature {
  padding: 20px 8px;
  border-radius: var(--radius);
  transition: background var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.feature:hover {
  background: var(--primary-tint);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -10px rgba(58, 46, 38, .10);
}
.feature-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  color: var(--primary);
  transition: transform var(--t-med) var(--ease-emph), color var(--t-med) var(--ease);
}
.feature:hover .feature-icon { color: var(--sage-dark); transform: scale(1.1); }
.feature h4 { color: var(--ink); margin-bottom: 8px; font-family: var(--font-sans); }
.feature p {
  color: var(--ink-2);
  font-size: .92rem;
  margin: 0;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.collections {
  padding: clamp(24px, 4vw, 40px) 0 clamp(64px, 10vw, 120px);
  background: var(--cream);
}

/* ============ CUSTOM (call-out band) ============ */
.custom {
  background: var(--cream-warm);
  padding: clamp(64px, 10vw, 120px) 0;
  overflow: hidden;
}
.custom-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}
.custom-copy { max-width: 480px; }
.custom h2 { color: var(--ink); margin-bottom: 20px; }
.custom h4 {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 32px;
}
.custom .btn { margin-top: 8px; }
.custom-mark {
  display: none;
}
/* Threaded variant (homepage only) — swaps the "&" medallion for a thread
   accent instead, and reverts to a single-column layout since there's no
   longer a second grid item filling that slot. */
.custom--threaded {
  /* Section colour. The thread artwork is transparent now, so this no longer
     has to match a fill baked into the image. (was sampled #faf9f4) */
  background: #faf9f4;
  position: relative;
}
.custom--threaded .custom-inner { position: relative; z-index: 1; }
.custom-thread {
  /* Hidden by default and brought back at 700px. The artwork is roughly 1:2, so
     background-size: auto 100% scales its width to half the section height —
     about 240px on a phone. The strip is only 16vw (60px) wide, so all that
     showed was the right-hand sliver of it: disconnected arcs rather than a
     thread, crowding the copy. Showing it properly would need two thirds of a
     375px screen, which leaves nowhere for the text, so it stays off until
     there is room for it to read as intended. */
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 190px;
  max-width: 16vw;
  background-image: url('../images/process-thread.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 900px) {
  .custom--threaded .custom-inner { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .custom-inner {
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(48px, 6vw, 96px);
  }
  .custom-copy { max-width: 480px; }
  .custom-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-tint);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(6rem, 9vw, 8.5rem);
    color: var(--sage);
    opacity: .85;
    line-height: 1;
    justify-self: end;
    width: min(100%, 320px);
  }
}

/* ============ RECENTLY CRAFTED (products) ============ */
.crafted {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--cream);
}
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform var(--t-med) var(--ease-emph);
}
.product-card[hidden] { display: none !important; }
.product-price {
  margin: auto 0 0;
  padding-top: 8px;
  font-family: var(--font-serif);
  color: var(--ink-2);
  font-size: 1.25rem;
  text-align: center;
}
.btn-checkout {
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-fast) var(--ease);
}
.btn-checkout:hover { background: var(--primary-dark); }
.btn-checkout:disabled { opacity: .6; cursor: wait; }
.feed-empty { color: var(--ink-3); padding: 24px 0; }
/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter-btn:hover,
.filter-btn[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* Card link wrapper — flex:1 so it fills the card and the Buy Now button
   always pins to the bottom regardless of how long the title is */
.product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
/* Staggered fade-in for Square-loaded cards (class removed on animationend) */
@keyframes fhCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-card.card-reveal {
  opacity: 0;
  animation: fhCardIn 550ms cubic-bezier(.22,.61,.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .product-card.card-reveal { opacity: 1; animation: none; }
}

.product-card:hover { transform: translateY(-4px); }
.product-card .img {
  aspect-ratio: 1/1;
  background: var(--cream-warm);
  overflow: hidden;
  border-radius: 8px;      /* soften the photo corners */
  margin-bottom: 16px;
  position: relative;
}
.product-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-emph), filter var(--t-med) var(--ease);
}
.product-card:hover .img img { transform: scale(1.06); }
.product-card .img .ph {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,169,97,.18) 0%, transparent 60%),
    linear-gradient(135deg, #e8d8c0 0%, #d4a090 50%, #b8866a 100%);
  transition: transform .4s;
}
.product-card:hover .img .ph { transform: scale(1.04); }
.product-card .img .ph::after {
  content: attr(data-label);
  position: absolute; bottom: 10px; left: 10px;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.30);
  padding: 3px 8px;
}
.product-card h3 {
  font-size: 1.375rem;
  text-align: center;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
  font-weight: 500;
  transition: color .15s;
}
.product-card:hover h3 { color: var(--primary); }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--primary);
  color: var(--cream);
  padding: 64px 0 28px;
}
.site-footer a {
  color: var(--cream);
  transition: color var(--t-fast) var(--ease);
}
.site-footer a:hover { color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
.footer-brand .brand-mark { color: var(--cream); font-size: 1.6rem; }
.footer-brand .brand-sub { color: rgba(250,248,243,.7); }
.footer-brand p {
  color: rgba(250,248,243,.7);
  font-size: .92rem;
  margin: 16px 0 20px;
  max-width: 320px;
}
.footer-social {
  display: flex; gap: 10px;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(250,248,243,.3);
  border-radius: 50%;
  transition: background .15s, border-color .15s;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--primary-dark); }

.footer-col h4 {
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .22em;
  margin: 0 0 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: .92rem;
  color: rgba(250,248,243,.78);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(250,248,243,.15);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(250,248,243,.6);
  font-size: .82rem;
}
.footer-bottom a { color: rgba(250,248,243,.6); }
.footer-bottom a:hover { color: var(--gold); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ============ TESTIMONIALS (dark green band) ============ */
.testimonials {
  background: var(--primary);
  color: var(--cream);
  padding: clamp(64px, 10vw, 120px) 0;
}
.testimonials .eyebrow { color: rgba(250,248,243,.7); }
.testimonials h2 { color: var(--cream); }
.testimonials h2 em { font-style: italic; color: var(--gold); }
.testimonials .quotes { display: grid; grid-template-columns: 1fr; gap: 48px; }
/* Open, unboxed cards — no border or fill. The signature flourish is a thin
   gold rule that draws itself in under the attribution once the card has
   scrolled into view (not hover-gated, so it plays on mobile too), like a
   line being written rather than a static ornament. */
.testimonials figure {
  position: relative;
  margin: 0;
  padding: 8px 4px;
  transition: transform var(--t-med) var(--ease-emph);
}
.testimonials figure:hover { transform: translateY(-5px); }
.testimonials .stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: .15em;
  margin-bottom: 16px;
  transition: letter-spacing var(--t-med) var(--ease);
}
.testimonials figure:hover .stars { letter-spacing: .22em; }
.testimonials blockquote {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.55;
  font-weight: 400;
}
.testimonials blockquote::before { content: none; }
.testimonials figcaption {
  color: rgba(250,248,243,.65);
  font-size: .8rem;
  font-family: var(--font-sans);
  letter-spacing: .06em;
  position: relative;
  padding-top: 14px;
}
.testimonials figcaption::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: rgba(196, 169, 109, .65);
  transition: width 900ms var(--ease-emph) 500ms;
}
.testimonials figure.is-visible figcaption::before { width: 28px; }
@media (min-width: 700px) {
  .testimonials .quotes { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .testimonials figure { padding: 8px 32px; border-left: 1px solid rgba(250,248,243,.14); }
  .testimonials figure:first-child { border-left: 0; padding-left: 4px; }
  .testimonials figure:last-child { padding-right: 4px; }
}

/* ============ CATEGORY GRID (collections landing) ============ */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.category-card {
  display: block;
  color: var(--ink);
  background: var(--primary-tint);
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s;
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(20,30,20,.08);
  color: var(--ink);
}
.category-card .cat-img {
  aspect-ratio: 16/10;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.category-card .cat-info {
  padding: 24px 24px 28px;
  text-align: center;
}
.category-card h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}
.category-card p {
  color: var(--ink-2);
  font-size: .95rem;
  margin: 0 0 12px;
}
.category-card .cat-count {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
@media (min-width: 700px) {
  .category-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .category-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============ RESPONSIVE — TABLET ============ */
@media (min-width: 700px) {
  :root { --hero-gap: 64px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--hero-gap); }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .journal-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .journal-list-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1.2fr; gap: 80px; }
  .contact-form-large .form-row-2 { grid-template-columns: 1fr 1fr; }
  .contact-grid-2 { grid-template-columns: 1fr 1.2fr; gap: 80px; }
}

/* ============ RESPONSIVE — DESKTOP ============ */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav { display: flex !important; align-items: center; justify-content: center; }
  .primary-nav ul {
    display: flex; flex-direction: row; gap: clamp(32px, 4vw, 56px); padding: 0;
    justify-content: center;     /* centre the menu group */
  }
  .primary-nav a {
    padding: 12px 0;            /* taller hit area for the bigger header */
    font-size: .85rem;          /* slightly bigger to match scale */
    letter-spacing: .18em;      /* more breathing room between letters */
    position: relative;
  }
  .primary-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
  }
  .primary-nav a:hover::after { transform: scaleX(1); }
  .nav-actions {
    display: flex; align-items: center; gap: 4px;
    border-top: 0; margin-top: 0; margin-left: 8px;
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }
  .journal-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .features-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .products-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
  .hero { padding: 0; }  /* desktop: image bleeds to nav and to the section edge */
}

@media (min-width: 1100px) {
  :root { --hero-gap: 88px; }
  .hero-grid { gap: var(--hero-gap); }
  .process-grid { gap: 88px; }
}

/* ============ MOBILE HERO SAFETY (per template README) ============ */
@media (max-width: 699px) {
  .hero-grid { flex-direction: column; grid-template-columns: 1fr; }
  .hero { max-height: none; }
}

/* ============ INNER PAGE HERO + BREADCRUMB ============ */
.page-hero,
.page-header {
  background: var(--cream);
  padding: clamp(64px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
}
.page-hero h1,
.page-header h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  margin: 12px 0 16px;
  color: var(--brown);
}
.page-hero h1 em,
.page-header h1 em {
  color: var(--sage);
  font-style: italic;
  font-weight: 500;
}
.page-hero p,
.page-header p { max-width: 56ch; margin: 0 auto; }
.page-hero-sub {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ============ BUTTON — outline variant ============ */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* ============ ABOUT PAGE ============ */
.about-story { padding: clamp(56px, 8vw, 96px) 0; }
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 800px) {
  .about-story-grid { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .about-story-grid .about-story-text { order: 1; }
  .about-story-grid .about-story-image { order: 2; }
}
.about-story h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 20px;
  color: var(--brown);
}
.about-story h2 em { color: var(--sage); font-style: italic; font-weight: 500; }
.about-story p { margin-bottom: 16px; line-height: 1.75; color: var(--ink-2); }
.about-story-image img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2/3; object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(20,30,20,.25);
}

.about-values { padding: clamp(56px, 8vw, 96px) 0; background: var(--cream-warm); }
.about-values h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 40px;
  color: var(--brown);
  text-align: center;
}
.about-values h2 em { color: var(--sage); font-style: italic; font-weight: 500; }
.about-values .eyebrow { text-align: center; display: block; }
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1100px; margin: 0 auto;
}
@media (min-width: 700px) { .values-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.value-card {
  background: var(--cream);
  padding: 32px 28px;
  border-radius: 8px;
  border: 1px solid rgba(58,46,38,.08);
}
.value-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--brown);
}
.value-card p { line-height: 1.7; color: var(--ink-2); margin: 0; font-size: .95rem; }

.about-workshop { padding: clamp(56px, 8vw, 96px) 0; }
.about-workshop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 800px) {
  .about-workshop-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; }
}
.about-workshop-image img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1/1; object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(20,30,20,.25);
}
.about-workshop h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin: 8px 0 20px;
  color: var(--brown);
}
.about-workshop h2 em { color: var(--sage); font-style: italic; font-weight: 500; }
.about-workshop p { margin-bottom: 16px; line-height: 1.75; color: var(--ink-2); }
.about-workshop .btn { margin-top: 16px; }

.about-cta {
  background: var(--primary-dark);
  color: var(--cream);
  padding: clamp(64px, 10vw, 112px) 0;
  text-align: center;
}
.about-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 12px auto 20px;
  max-width: 22ch;
  color: var(--cream);
}
.about-cta h2 em { color: var(--accent); font-style: italic; font-weight: 500; }
.about-cta p {
  max-width: 56ch;
  margin: 0 auto 28px;
  line-height: 1.75;
  color: rgba(250,248,243,.85);
}
.about-cta .btn { color: var(--cream); border-color: var(--cream); background: transparent; }
.about-cta .btn:hover { background: var(--cream); color: var(--primary); }

/* ============ JOURNAL LIST + POSTS ============ */
.journal-list { padding: clamp(56px, 8vw, 96px) 0; background: var(--cream); }
.journal-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
  max-width: 1100px; margin: 0 auto;
}
@media (min-width: 800px) { .journal-list-grid { grid-template-columns: 1fr 1fr 1fr; } }

.article-hero {
  padding: clamp(64px, 8vw, 96px) 0 0;
  background: var(--cream);
  text-align: center;
}
.article-hero-image {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16/9;
  margin: clamp(28px, 4vw, 48px) auto 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(20,30,20,.25);
}
.article-hero-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.article-meta {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 16px;
}
.article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 24px clamp(56px, 8vw, 96px);
}
.article-body p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--ink-2);
}
.article-body p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.4rem;
  font-weight: 600;
  float: left;
  line-height: 1;
  margin: 6px 8px 0 0;
  color: var(--brown);
}
.article-body h2 {
  font-size: 1.6rem;
  margin: 36px 0 16px;
  color: var(--brown);
}
.article-body h2 em { color: var(--sage); font-style: italic; font-weight: 500; }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.article-back:hover { color: var(--brown); }

/* ============ CONTACT + CUSTOM-ORDER PAGES ============ */
.page-form {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--cream);
}
.page-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  max-width: 1100px; margin: 0 auto;
}
@media (min-width: 800px) { .page-form-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; } }
@media (min-width: 800px) { .page-form-info { padding-top: 60px; } }
.page-form-info h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 8px 0 16px;
  color: var(--brown);
}
.page-form-info h2 em { color: var(--sage); font-style: italic; font-weight: 500; }
.page-form-info p { line-height: 1.75; color: var(--ink-2); margin-bottom: 14px; }
.page-form-info .info-line {
  display: flex; gap: 14px; padding: 14px 0;
  border-top: 1px solid rgba(58,46,38,.1);
  font-size: .95rem;
}
.page-form-info .info-line strong {
  min-width: 110px; color: var(--ink); font-weight: 600;
}
.page-form-info .info-line a { color: var(--primary); text-decoration: none; }
.page-form-info .info-line a:hover { text-decoration: underline; }
.hours-block { display: grid; grid-template-columns: 5.5rem 1fr; row-gap: 3px; line-height: 1.65; }
.page-form-form label {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 6px;
}
.page-form-form input,
.page-form-form textarea,
.page-form-form select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(58,46,38,.2);
  border-radius: 4px;
  background: var(--cream-warm);
  color: var(--ink);
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.page-form-form input:focus,
.page-form-form textarea:focus,
.page-form-form select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--cream);
}
.page-form-form textarea { min-height: 140px; resize: vertical; }
.page-form-form .form-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .page-form-form .form-row.two { grid-template-columns: 1fr 1fr; } }
.page-form-form .btn { margin-top: 24px; width: 100%; }

/* ============ JOURNAL LIST — light-background card overrides ============ */
/* .journal-card defaults to cream text (dark green homepage section).
   The standalone journal list page uses a cream background so we flip to dark. */
.journal-list .journal-card { color: var(--ink); }
.journal-list .journal-card:hover { color: var(--primary); }
.journal-list .journal-card .img { background: var(--cream-warm); }
.journal-list .journal-card h3 { color: var(--ink); }
.journal-list .journal-card p { color: var(--ink-2); }
.journal-list .journal-card .date { color: var(--ink-3); }
/* Classes used on journal.html list cards */
.journal-card-date {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 500;
}
.journal-card-link {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s;
}
.journal-list .journal-card:hover .journal-card-link { border-color: var(--primary); }

/* ============ POLICY PAGES ============ */
.policy-body { padding: 3rem 0 5rem; }
.policy-container {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.policy-container > p:first-child { font-size: 1.05rem; color: var(--ink); margin-bottom: 2rem; }
.policy-container h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2.5rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.policy-container h3 {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.75rem 0 .5rem;
}
.policy-container p { margin-bottom: 1rem; }
.policy-container ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.policy-container ul li { margin-bottom: .4rem; }
.policy-container a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.policy-container a:hover { color: var(--primary-dark); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .marquee { display: none; } /* legacy ticker class — hidden if any old page references it */
}

/* ============ PRODUCT DETAIL PAGE ============ */
.pd-wrap {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.pd-loading {
  padding: 80px 0;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
}
.pd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.pd-breadcrumb a { color: var(--ink-3); }
.pd-breadcrumb a:hover { color: var(--primary); }
.pd-breadcrumb span[aria-current] { color: var(--ink-2); }

.pd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 760px) {
  .pd-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .pd-grid { grid-template-columns: 1.1fr 0.9fr; gap: 80px; }
}

.pd-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream-warm);
  display: block;
}

.pd-name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
  color: var(--brown);
  line-height: 1.15;
  margin: 0 0 12px;
}
.pd-price {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--primary);
  font-weight: 500;
  margin: 0 0 24px;
}
.pd-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 28px;
  white-space: pre-line;
}
.pd-variations {
  margin-bottom: 24px;
}
.pd-var-label {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.pd-var-select {
  width: 100%;
  font-family: var(--font-sans);
  /* 16px minimum: iOS Safari zooms the whole page when a smaller control is
     focused, and this is the size selector on every product page. */
  font-size: 1rem;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b4b4d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color var(--t-fast) var(--ease);
}
.pd-var-select:focus { outline: none; border-color: var(--primary); }

.pd-buy { width: 100%; justify-content: center; font-size: .8rem; padding: 16px 28px; }
.pd-note {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--ink-3);
  text-align: center;
}

/* ---- Product gallery ---- */
.pd-gallery { display: flex; flex-direction: column; gap: 12px; }
.pd-img-wrap { position: relative; }
.pd-img-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream-warm);
  display: block;
  transition: opacity var(--t-fast) var(--ease);
}
.pd-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-thumb {
  width: 72px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: var(--cream-warm);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.pd-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pd-thumb:hover { border-color: var(--ink-3); }

/* ============ CART ============ */

/* Cart badge on header icon */
.cart-badge {
  position: absolute;
  top: 5px; right: 5px;
  min-width: 17px; height: 17px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  line-height: 17px; text-align: center;
  padding: 0 3px;
  border-radius: 999px;
  pointer-events: none;
}
a.nav-icon[href="#cart"] { position: relative; }

/* Overlay */
#cart-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 24, 20, 0);
  z-index: 800;
  pointer-events: none;
  transition: background var(--t-med) var(--ease);
}
#cart-overlay.is-active {
  background: rgba(20, 24, 20, 0.4);
  pointer-events: auto;
}

/* Drawer panel */
#cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--cream);
  z-index: 900;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease-emph);
  box-shadow: -4px 0 40px rgba(20, 30, 20, 0.14);
}
#cart-drawer.is-open { transform: translateX(0); }
body.cart-is-open { overflow: hidden; }

/* Drawer header */
.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cart-title {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 500;
  color: var(--olive); margin: 0;
  letter-spacing: -0.01em;
}
.cart-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-close:hover { background: var(--primary-tint); color: var(--primary); }
.cart-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Items list */
.cart-items {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.cart-empty {
  padding: 56px 24px; text-align: center;
  color: var(--ink-3); font-style: italic;
}

/* Each cart item row */
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item-main { grid-column: 1; }
.cart-item-name {
  margin: 0; font-size: 0.88rem;
  color: var(--ink); font-weight: 500; line-height: 1.3;
}
.cart-item-unit { margin: 3px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.cart-item-controls {
  grid-column: 2;
  display: flex; align-items: center; gap: 6px;
}
.cart-qty-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 1rem; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-qty-btn:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.cart-qty-num { min-width: 22px; text-align: center; font-size: 0.88rem; font-weight: 600; }
.cart-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px; color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-remove-btn:hover { background: #fde8e8; color: #b94040; }
.cart-item-line-total {
  grid-column: 3;
  margin: 0; font-size: 0.88rem; font-weight: 600;
  color: var(--ink); text-align: right; white-space: nowrap;
}

/* Drawer footer */
.cart-footer {
  padding: 20px 24px 28px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--cream-warm);
}
.cart-totals { margin-bottom: 16px; }
.cart-row {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--ink-2);
  padding: 3px 0;
}
.cart-row-total {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  padding-top: 10px; margin-top: 8px;
  border-top: 1px solid var(--line);
}
.cart-checkout-btn { width: 100%; margin-top: 4px; }
.cart-secure-note {
  text-align: center; font-size: 0.73rem;
  color: var(--ink-3); margin: 10px 0 0;
}

/* Toast notification */
.cart-toast {
  position: fixed; bottom: 28px;
  left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--primary); color: #fff;
  padding: 10px 20px; border-radius: 24px;
  font-size: 0.83rem; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease-emph);
  pointer-events: none; z-index: 950;
}
.cart-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dynamic card "Add to Cart" button — matches collection grid style */
.btn-add-cart {
  display: block; width: 100%; margin-top: 10px;
  padding: 9px 0;
  background: var(--primary); color: #fff;
  font-family: var(--font-sans); font-size: 0.78rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius); border: 0;
  transition: background var(--t-fast) var(--ease);
}
.btn-add-cart:hover { background: var(--primary-dark); }

/* Remove sits apart from the quantity stepper — pushed up against "+" and the
   line total it read as a multiplication sign rather than a button. */
.cart-remove-btn {
  margin-left: 10px;
  padding: 5px;
  border-radius: 50%;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cart-remove-btn:hover { color: #a4443a; background: rgba(164,68,58,.08); }
.cart-remove-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Collection instead of posting */
.cart-pickup-toggle {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 4px;
  font-size: .82rem; color: var(--ink-2); line-height: 1.45;
  cursor: pointer; user-select: none;
}
.cart-pickup-toggle input { margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
.cart-pickup-toggle:hover { color: var(--ink); }
.cart-pickup-note {
  margin: 14px 0 4px;
  padding: 10px 12px;
  background: var(--cream-warm);
  border-left: 2px solid var(--primary);
  font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}

/* Sold-out state */
.btn-add-cart:disabled,
.btn-add-cart[disabled] {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.pd-buy--sold-out {
  background: transparent !important;
  border: 1px solid var(--ink-3) !important;
  color: var(--ink-3) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.sold-out-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(26,26,26,0.80);
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  pointer-events: none;
}
.is-sold-out .product-card-link { opacity: 0.65; }
.is-sold-out:hover { transform: none; }

.pd-thumb.is-active { border-color: var(--primary); }

/* ============ SEARCH OVERLAY ============ */
#search-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 24, 20, 0.5);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(80px, 12vh, 140px);
}
#search-overlay.is-open { opacity: 1; pointer-events: auto; }
body.search-is-open { overflow: hidden; }

.search-panel {
  width: min(640px, calc(100vw - 32px));
  background: var(--cream);
  border-radius: 12px;
  box-shadow: 0 16px 64px rgba(20, 30, 20, 0.2);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform var(--t-med) var(--ease-emph);
}
#search-overlay.is-open .search-panel { transform: translateY(0); }

.search-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.search-icon-sm { flex-shrink: 0; color: var(--ink-3); }
.search-input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  outline: none;
}
.search-input::placeholder { color: var(--ink-3); }
.search-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  color: var(--ink-3); flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.search-close:hover { background: var(--primary-tint); color: var(--primary); }

.search-results {
  max-height: 400px; overflow-y: auto;
  padding: 8px 0;
}
.search-hint, .search-empty {
  padding: 24px 20px; color: var(--ink-3);
  font-size: 0.88rem; font-style: italic; text-align: center;
}
.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: var(--primary-tint); }
.search-result-name {
  grid-column: 1; grid-row: 1;
  font-size: 0.9rem; font-weight: 500; color: var(--ink);
}
.search-result-cat {
  grid-column: 1; grid-row: 2;
  font-size: 0.75rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.search-result-price {
  grid-column: 2; grid-row: 1 / 3;
  font-size: 0.9rem; font-weight: 600; color: var(--primary);
  text-align: right; white-space: nowrap;
}

/* "Fabric with a former life," on one line, but only where it fits. At the
   clamp's 44px floor the line is ~410px and the hero copy adds 44px of padding,
   so 560px is the first viewport that holds it without clipping. */
@media (min-width: 560px) {
  .hero-copy .hero-headline { white-space: nowrap; }
}

/* Desktop header composition.
   The hero below is a full-bleed 50/50 grid, so the centre of the hero text
   sits at 25vw. The logo is aligned to that same axis rather than to the page
   edge, and the nav and actions are released from the 1280px container so they
   can reach the true right-hand edge. Everything therefore shifts right
   together instead of the header sitting on its own alignment.

   Mobile keeps the 200px logo and the standard container — at 220px the
   wordmark runs into the menu button on a 375px screen. */
@media (min-width: 900px) {
  .brand img { width: 220px; }

  .site-header .container {
    max-width: none;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  /* 25vw is the hero text's centre line; 110px is half the logo. */
  /* Centre of the hero's first column. Two regimes, because .hero-copy is
     capped at 640px: on a wide screen the columns are equal and the copy is
     centred inside its own column, giving (viewport - gap) / 4. Once the
     viewport tightens, the column stops shrinking at 640px and the copy fills
     it, giving a fixed 320px. max() picks whichever applies.
     110px is half the logo; --pad backs out the container's own padding. */
  .brand {
    margin-left: calc(max(320px, (100vw - var(--hero-gap)) / 4) - 110px - var(--pad));
  }

  /* Nav sits between the logo and the actions rather than centred on the page,
     so it moves right with everything else. */
  .header-row { justify-items: end; }
  .primary-nav { justify-self: end; margin-right: clamp(24px, 4vw, 72px); }
  .nav-actions { justify-self: end; }
}

/* The bespoke thread only reads once the section is wide enough for a usable
   slice of it to sit clear of the copy. */
@media (min-width: 700px) {
  .custom-thread { display: block; }
}