/* ==========================================================================
   T-Dawg WoodWorks — Component & Layout Stylesheet
   Owner: Tyone (UX / site lead) · design-system layer
   Depends on: tokens.css (Bobby). NEVER hardcode a colour or size here —
   read a token, or derive one in the "Derived tokens" block below.

   Load order:
     1. assets/css/tokens.css
     2. assets/css/site.css   <- this file

   Contents
     01  Derived tokens & theme contexts
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons
     06  Eyebrow, chips, badges
     07  Header & navigation
     08  Hero
     09  Section header
     10  Product cards
     11  Gallery (images + video) & lightbox
     12  Process steps
     13  Split feature
     14  Stats
     15  Quote
     16  CTA band
     17  Forms
     18  Footer
     19  Prose
     20  Utilities, motion, print
   ========================================================================== */


/* ==========================================================================
   01  DERIVED TOKENS & THEME CONTEXTS
   Components read the SEMANTIC vars (--fg, --bg, --surface, --line...).
   Drop any component inside `.on-dark` and it re-themes itself. That is the
   whole trick — there are no `--dark` variants of components.
   ========================================================================== */

:root {
  /* Semantic surface/text context — light (default) */
  --fg:          var(--c-ink);
  --fg-soft:     var(--c-ink-soft);
  --bg:          var(--c-canvas);
  --surface:     var(--c-panel);
  --surface-alt: var(--c-panel-alt);
  --line:        var(--c-line);
  --line-strong: var(--c-line-strong);
  --accent:      var(--c-ember);
  --accent-hover: var(--c-ember-hover);
  --ring:        var(--focus-ring);

  /* Scrims for text over photography */
  --scrim-bottom: linear-gradient(to top, rgba(26, 21, 15, 0.92) 0%, rgba(26, 21, 15, 0.60) 38%, rgba(26, 21, 15, 0.10) 72%, rgba(26, 21, 15, 0) 100%);
  --scrim-left:   linear-gradient(to right, rgba(26, 21, 15, 0.94) 0%, rgba(26, 21, 15, 0.74) 42%, rgba(26, 21, 15, 0.28) 72%, rgba(26, 21, 15, 0.08) 100%);
  --scrim-flat:   linear-gradient(rgba(26, 21, 15, 0.55), rgba(26, 21, 15, 0.55));

  /* Fine paper/wood tooth. Sits at very low opacity — never a "texture". */
  --grain: 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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Grain-line hairline motif — reads as sawn edge, not barn wood */
  --edge-grain: repeating-linear-gradient(
    90deg,
    var(--c-line-strong) 0 1px,
    transparent 1px 7px
  );

  --tile-gap: clamp(10px, 1.4vw, 20px);
}

/* Dark context: bark / forest sections, header-over-hero, footer, lightbox */
.on-dark {
  --fg:          var(--c-ink-invert);
  --fg-soft:     var(--c-ink-invert-soft);
  --bg:          var(--c-bark);
  --surface:     rgba(247, 243, 236, 0.06);
  --surface-alt: rgba(247, 243, 236, 0.10);
  --line:        rgba(247, 243, 236, 0.16);
  --line-strong: rgba(247, 243, 236, 0.30);
  --accent:      var(--c-maple);
  --accent-hover: var(--c-canvas);
  --ring:        var(--focus-ring-dark);
  color: var(--fg);
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-2));
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* Photos only. Do NOT put max-width/height:auto on svg — unsized
   inline icons inherit the column width and render enormous. */
img { background-color: var(--c-panel-alt); }
img.brand__mark,
.brand img { background-color: transparent; }

svg { display: block; flex: none; overflow: visible; }

.icon,
.lb-btn svg,
.footer__social svg,
.card__go svg,
.nav-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

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

a { color: inherit; }

hr {
  height: 1px;
  margin: var(--s-6) 0;
  border: 0;
  background: var(--line);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--c-maple);
  color: var(--c-bark);
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: var(--z-overlay);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--c-ember);
  color: var(--c-ink-invert);
  font-size: var(--t-sm);
  font-weight: var(--w-heading);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-2); }


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--t-lg); letter-spacing: 0; }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

.lede {
  max-width: 56ch;
  color: var(--fg-soft);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  text-wrap: pretty;
}

.text-soft { color: var(--fg-soft); }

/* Small tracked-out caps — the workshop label voice. Used for eyebrows,
   nav, spec labels, form labels, footer headings. */
.label,
.spec-label {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.3;
}

/* Numeric / dimensional data — tabular so spec rows line up */
.spec-value,
.numeral {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.link-underline {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.link-underline:hover { background-size: 100% 2px; color: var(--accent); }


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

/* Alternating warm band */
.section--alt { --bg: var(--c-panel-alt); }

/* Dark bands: bark (default), forest, or deep forest */
.section--dark   { background: var(--c-bark); }
.section--forest { background: var(--c-moss-deep); --bg: var(--c-moss-deep); }

/* Grain overlay for dark bands — 3.5%, essentially subliminal */
.section--dark::before,
.section--forest::before,
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.section--dark > *,
.section--forest > * { position: relative; }

/* Hairline divider that reads as a sawn edge */
.rule-grain {
  height: 3px;
  border: 0;
  margin: 0;
  background-image: var(--edge-grain);
  opacity: 0.9;
}

/* Auto-fitting card grid — one knob (--col-min) controls the breakpoint */
.grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min, 280px), 100%), 1fr));
}
.grid--2 { --col-min: 420px; }
.grid--3 { --col-min: 300px; }
.grid--4 { --col-min: 220px; gap: var(--s-2); }

.stack > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* Two-column split: stacks on mobile, 50/50 on desktop */
.split {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

/* Framed media: hairline square offset behind the image. Modern craft cue. */
.framed { position: relative; }
.framed > img,
.framed > video {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
}
.framed::after {
  content: "";
  position: absolute;
  inset: var(--s-3) calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3);
  border: 1px solid var(--c-moss);
  border-radius: var(--radius-lg);
  opacity: 0.55;
}
.framed--warm::after { border-color: var(--c-oak); }
@media (max-width: 640px) {
  .framed::after { inset: var(--s-2) calc(var(--s-2) * -1) calc(var(--s-2) * -1) var(--s-2); }
}

/* Aspect-ratio media box; img fills and crops */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-panel-alt);
  aspect-ratio: var(--ratio, 4 / 3);
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio-1-1  { --ratio: 1 / 1; }
.ratio-4-3  { --ratio: 4 / 3; }
.ratio-3-2  { --ratio: 3 / 2; }
.ratio-16-9 { --ratio: 16 / 9; }
.ratio-2-3  { --ratio: 2 / 3; }


/* ==========================================================================
   05  BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--c-ember);
  --btn-fg: var(--c-ink-invert);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 12px var(--s-3);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.btn:hover { --btn-bg: var(--c-ember-hover); transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn .icon { width: 1em; height: 1em; flex: none; transition: transform var(--dur-base) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* Secondary — outlined, inherits context colour */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--line-strong);
}
.btn--secondary:hover {
  --btn-bg: transparent;
  --btn-fg: var(--c-ember);
  --btn-border: var(--c-ember);
}
.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover,
.section--forest .btn--secondary:hover {
  --btn-fg: var(--c-bark);
  --btn-bg: var(--c-canvas);
  --btn-border: var(--c-canvas);
}

/* Ghost — text + arrow, no chrome */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: transparent;
  min-height: 0;
  padding: var(--s-half) 0;
}
.btn--ghost:hover { --btn-fg: var(--c-ember); transform: none; box-shadow: none; }
.on-dark .btn--ghost:hover { --btn-fg: var(--c-maple); }

.btn--sm { min-height: 40px; padding: 8px var(--s-2); font-size: var(--t-xs); }
.btn--lg { min-height: 56px; padding: 16px var(--s-4); font-size: var(--t-base); }
.btn--block { width: 100%; }

@media (max-width: 480px) {
  .btn--block-sm { width: 100%; }
}


/* ==========================================================================
   06  EYEBROW, CHIPS, BADGES
   ========================================================================== */

/* Eyebrow: short tracked caps with a leading rule. Section signature. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0 0 var(--s-2);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.chip--solid {
  border-color: transparent;
  background: var(--c-bark);
  color: var(--c-ink-invert);
}
.chip--moss { border-color: transparent; background: var(--c-moss); color: var(--c-ink-invert); }

/* Filter chips — button variant of .chip */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}
.filter-chip {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.filter-chip:hover { border-color: var(--c-oak); color: var(--fg); }
.filter-chip[aria-pressed="true"] {
  border-color: var(--c-bark);
  background: var(--c-bark);
  color: var(--c-ink-invert);
}
.on-dark .filter-chip[aria-pressed="true"] {
  border-color: var(--c-canvas);
  background: var(--c-canvas);
  color: var(--c-bark);
}

.badge-num {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--c-ember);
  color: var(--c-ink-invert);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
}


/* ==========================================================================
   07  HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}
/* Home starts transparent over the dark hero (.on-dark). Interior pages
   set data-header-solid so the bar is cream from first paint — before JS
   adds .is-stuck — otherwise dark ink sits on a transparent bar. */
.header.is-stuck,
.header[data-header-solid] {
  background: color-mix(in srgb, var(--c-canvas) 94%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--c-line);
  box-shadow: var(--shadow-raised);
}
.header.is-stuck,
.header.is-open,
.header[data-header-solid] {
  --fg: var(--c-ink);
  --fg-soft: var(--c-ink-soft);
  --line-strong: var(--c-line-strong);
  --accent: var(--c-ember);
  color: var(--c-ink);
}
.header.is-open {
  background: var(--c-bark);
  --fg: var(--c-ink-invert);
  --fg-soft: var(--c-ink-invert-soft);
  --accent: var(--c-maple);
  color: var(--c-ink-invert);
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}

/* --- Wordmark ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--fg);
  text-decoration: none;
}
.brand__mark {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  flex: none;
  color: var(--c-ember);
  transition: transform var(--dur-slow) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg); }
.header.is-stuck .brand__mark,
.brand--footer .brand__mark { color: var(--c-ember); }

.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--w-heading);
  letter-spacing: -0.01em;
}
.brand__sub {
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* --- Desktop nav --------------------------------------------------------- */
.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  padding: 6px 0;
  color: var(--fg);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { opacity: 1; }

.header__cta { display: none; }

/* --- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span {
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.header.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.header.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile drawer ------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-popover);
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-5) var(--gutter) var(--s-8);
  background: var(--c-bark);
  background-image: var(--grain);
  background-blend-mode: overlay;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}
.drawer.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid rgba(247, 243, 236, 0.12);
  color: var(--c-ink-invert);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  text-decoration: none;
}
.drawer__link span {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  color: var(--c-ink-invert-soft);
}
.drawer__link[aria-current="page"] { color: var(--c-maple); }
.drawer__foot { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.drawer__meta { color: var(--c-ink-invert-soft); font-size: var(--t-sm); }

@media (min-width: 900px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle,
  .drawer { display: none; }
}

/* Gallery + contact open on a regular .section, not a hero. The header is
   fixed, so the first section has to clear --header-h or the h1 sits under
   the bar (--section-y is 48px on small screens). Hero pages already pad. */
.header[data-header-solid] ~ main > .section:first-child {
  padding-top: calc(var(--header-h) + var(--section-y));
}


/* ==========================================================================
   08  HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 820px);
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-8);
  background: var(--c-bark);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-bottom);
}
@media (min-width: 860px) {
  .hero__bg::after { background: var(--scrim-left), var(--scrim-bottom); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__inner { max-width: 40rem; }
.hero__title { margin-bottom: var(--s-2); }
.hero__title em {
  font-style: normal;
  color: var(--c-maple);
}
.hero__lede { margin-bottom: var(--s-4); font-size: var(--t-lg); }
.hero__actions { margin-bottom: var(--s-4); gap: var(--s-2); }

/* Trust strip under the CTAs — dot-separated, wraps cleanly */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.hero__meta li { display: flex; align-items: center; gap: var(--s-2); }
.hero__meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-ember);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-4);
  display: none;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-ink-invert-soft);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--c-ink-invert-soft), transparent);
  animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}
@media (min-width: 900px) {
  .hero__scroll { display: flex; writing-mode: vertical-rl; }
}

/* --- Interior page hero -------------------------------------------------- */
.hero--page {
  min-height: 0;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-6);
}
.hero--page .hero__inner { max-width: 46rem; }
.hero--page .hero__bg img { opacity: 0.55; }
.hero--page .hero__bg::after { background: var(--scrim-flat), var(--scrim-bottom); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--s-2);
  padding: 0;
  list-style: none;
  color: var(--fg-soft);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.breadcrumb a { text-decoration: none; opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; color: var(--c-maple); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }


/* ==========================================================================
   09  SECTION HEADER
   ========================================================================== */

.section-head {
  max-width: 46rem;
  margin-bottom: var(--s-5);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { margin-bottom: var(--s-2); }

/* Title on the left, "view all" link on the right, stacking on mobile */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
  max-width: none;
}
.section-head--split .section-head__body { max-width: 44rem; }


/* ==========================================================================
   10  PRODUCT CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-flat);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lifted);
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--c-panel-alt);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

/* Species / status chip floating on the photo */
.card__tag {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(26, 21, 15, 0.78);
  backdrop-filter: blur(6px);
  color: var(--c-canvas);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card__tag--right { left: auto; right: var(--s-1); background: rgba(180, 83, 31, 0.92); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-1);
  padding: var(--s-3);
}
.card__title { font-size: var(--t-xl); }
.card__title a {
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
/* Stretched link — whole card clickable, inner links still work */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:hover .card__title a { color: var(--c-ember); }

.card__desc {
  color: var(--fg-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}

/* Spec rows: wood / dimensions / lead time */
.card__specs {
  display: grid;
  gap: 2px;
  margin: var(--s-1) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.card__specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-xs);
}
.card__specs .spec-label { color: var(--fg-soft); font-weight: var(--w-medium); letter-spacing: 0.06em; }
.card__specs .spec-value { color: var(--fg); font-weight: var(--w-heading); }

.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
}
.card__price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: var(--w-heading);
  font-variant-numeric: tabular-nums;
}
.card__price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}
.card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-ember);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.card__go svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.card:hover .card__go svg { transform: translateX(4px); }

/* Featured card — spans two columns on desktop, media beside body */
@media (min-width: 860px) {
  .card--feature {
    grid-column: span 2;
    flex-direction: row;
  }
  .card--feature .card__media { flex: 1 1 55%; aspect-ratio: auto; }
  .card--feature .card__body { flex: 1 1 45%; justify-content: center; padding: var(--s-5); }
  .card--feature .card__title { font-size: var(--t-2xl); }
}


/* ==========================================================================
   11  GALLERY (IMAGES + VIDEO) & LIGHTBOX
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--tile-gap);
  grid-auto-flow: dense;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--c-panel-alt);
  aspect-ratio: var(--ratio, 1 / 1);
  cursor: pointer;
  text-align: left;
  color: var(--c-ink-invert);
}
.tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-base) var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-bottom);
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease);
}
.tile:hover > img { transform: scale(1.05); }
.tile:hover::after { opacity: 0.9; }
.tile[hidden] { display: none; }

/* Mosaic spans — desktop only, so mobile stays a clean single column */
@media (min-width: 1000px) {
  .tile--tall { grid-row: span 2; --ratio: 2 / 3; }
  .tile--wide { grid-column: span 2; --ratio: 16 / 9; }
}

.tile__cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: var(--s-2);
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.tile:hover .tile__cap,
.tile:focus-visible .tile__cap { transform: none; opacity: 1; }
.tile__title { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.2; }
.tile__meta {
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-invert-soft);
}
/* Touch devices never hover — show captions by default */
@media (hover: none) {
  .tile__cap { transform: none; opacity: 1; }
}

/* Video tile affordances */
.tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 243, 236, 0.7);
  background: rgba(26, 21, 15, 0.42);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.tile__play svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--c-canvas); }
.tile:hover .tile__play {
  background: var(--c-ember);
  border-color: var(--c-ember);
  transform: translate(-50%, -50%) scale(1.08);
}
.tile__duration {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(26, 21, 15, 0.75);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.gallery-empty {
  padding: var(--s-8) var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--fg-soft);
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-2);
  padding: var(--s-2);
  background: rgba(20, 16, 12, 0.94);
  backdrop-filter: blur(8px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.lightbox.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  color: var(--c-ink-invert-soft);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.lightbox__note {
  max-width: 34rem;
  padding: var(--s-6) var(--s-4);
  border: 1px dashed rgba(247, 243, 236, 0.28);
  border-radius: var(--radius-lg);
  color: var(--c-ink-invert-soft);
  text-align: center;
}
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--c-ink-invert);
  text-align: center;
}
.lightbox__caption { display: grid; gap: 2px; }
.lightbox__caption strong { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--w-heading); }
.lightbox__caption span { color: var(--c-ink-invert-soft); font-size: var(--t-sm); }

.lb-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(247, 243, 236, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-ink-invert);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.lb-btn:hover { background: rgba(247, 243, 236, 0.12); border-color: rgba(247, 243, 236, 0.5); }
.lb-btn svg { width: 18px; height: 18px; }


/* ==========================================================================
   12  PROCESS STEPS
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--s-4);
  counter-reset: step;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } }

.step {
  position: relative;
  padding-top: var(--s-3);
  border-top: 2px solid var(--line);
  transition: border-color var(--dur-base) var(--ease);
}
.step:hover { border-top-color: var(--c-ember); }
.step__num {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-heading);
  font-variant-numeric: tabular-nums;
  color: var(--c-oak);
  opacity: 0.85;
}
.on-dark .step__num,
.section--dark .step__num,
.section--forest .step__num { color: var(--c-maple); }
.step__title { margin-bottom: var(--s-1); font-size: var(--t-lg); }
.step__text { color: var(--fg-soft); font-size: var(--t-sm); line-height: var(--lh-snug); }


/* ==========================================================================
   13  SPLIT FEATURE
   ========================================================================== */

.feature__eyebrow { margin-bottom: var(--s-1); }
.feature__title { margin-bottom: var(--s-2); }
.feature__list {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.feature__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1);
  align-items: start;
  font-size: var(--t-sm);
  color: var(--fg-soft);
}
.feature__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  border-radius: 2px;
  background: var(--c-moss);
  transform: rotate(45deg);
}
.on-dark .feature__list li::before { background: var(--c-maple); }


/* ==========================================================================
   14  STATS
   ========================================================================== */

.stats {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { display: grid; gap: 4px; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: var(--w-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--fg);
}
.stat__label {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-soft);
}


/* ==========================================================================
   15  QUOTE
   ========================================================================== */

.quote {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.quote__mark {
  display: block;
  margin-bottom: calc(var(--s-2) * -1);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--c-oak);
  opacity: 0.5;
}
.quote__text {
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-body);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}
.quote__by {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-soft);
}


/* ==========================================================================
   16  CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--c-moss-deep);
  color: var(--c-ink-invert);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--section-y);
  text-align: center;
  justify-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
    justify-items: start;
    gap: var(--s-5);
  }
}
.cta-band__title { margin-bottom: var(--s-1); }
.cta-band__text { color: var(--c-ink-invert-soft); max-width: 44ch; }


/* ==========================================================================
   17  FORMS
   ========================================================================== */

.form-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 6px; }

.field > label,
.fieldset__legend {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg);
}
.field .req { color: var(--c-ember); }

.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--t-base);
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-soft); opacity: 0.75; }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--c-oak); }

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  border-color: var(--c-ember);
  box-shadow: var(--ring);
}

.textarea { min-height: 150px; resize: vertical; line-height: var(--lh-body); }

.select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5B4A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.field__help { font-size: var(--t-xs); color: var(--fg-soft); }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--c-error);
}
.field__error::before { content: "!"; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--c-error); color: var(--c-panel); font-size: 10px; font-weight: var(--w-bold); }
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--c-error); }
.field.has-error .field__error { display: flex; }

/* Radio / checkbox chips */
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.choice:hover { border-color: var(--c-oak); }
.choice:has(input:checked) {
  border-color: var(--c-bark);
  background: var(--c-bark);
  color: var(--c-ink-invert);
}
.choice:has(input:focus-visible) { box-shadow: var(--ring); }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-ember);
  cursor: pointer;
}

.form-status {
  display: none;
  gap: 10px;
  align-items: start;
  padding: var(--s-2);
  border: 1px solid var(--c-ok);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: rgba(63, 107, 63, 0.08);
  font-size: var(--t-sm);
}
.form-status.is-visible { display: flex; }
.form-status.is-error { border-color: var(--c-error); background: rgba(155, 44, 31, 0.08); }

/* Contact info panel beside the form */
.info-panel {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background: var(--c-bark);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--c-ink-invert);
}
.info-panel dl { display: grid; gap: var(--s-2); margin: 0; }
.info-panel dt {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-invert-soft);
}
.info-panel dd { margin: 3px 0 0; font-size: var(--t-base); }
.info-panel a { color: var(--c-maple); text-decoration: none; }
.info-panel a:hover { text-decoration: underline; }


/* ==========================================================================
   18  FOOTER
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--c-bark);
  color: var(--c-ink-invert);
  padding-block: var(--s-8) var(--s-3);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.footer__inner { position: relative; }

.footer__top {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(247, 243, 236, 0.14);
}
@media (min-width: 720px)  { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--s-4); } }

.footer__blurb {
  max-width: 34ch;
  margin-top: var(--s-2);
  color: var(--c-ink-invert-soft);
  font-size: var(--t-sm);
}
.footer h4 {
  margin-bottom: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ink-invert-soft);
}
.footer__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__list a {
  color: var(--c-ink-invert);
  font-size: var(--t-sm);
  text-decoration: none;
  opacity: 0.9;
  transition: color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.footer__list a:hover { color: var(--c-maple); opacity: 1; }

.footer__social { display: flex; gap: 10px; margin-top: var(--s-2); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(247, 243, 236, 0.2);
  border-radius: var(--radius-sm);
  color: var(--c-ink-invert);
  transition: all var(--dur-base) var(--ease);
}
.footer__social a:hover {
  border-color: var(--c-ember);
  background: var(--c-ember);
  transform: translateY(-2px);
}
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  color: var(--c-ink-invert-soft);
  font-size: var(--t-xs);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--c-maple); }


/* ==========================================================================
   19  PROSE  (about page long-form)
   ========================================================================== */

.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--s-2); }
.prose h2 { margin-top: var(--s-6); }
.prose h3 { margin-top: var(--s-4); }
.prose p { color: var(--fg-soft); }
.prose strong { color: var(--fg); font-weight: var(--w-heading); }
.prose ul, .prose ol { padding-left: 1.2em; color: var(--fg-soft); }
.prose li + li { margin-top: 6px; }
.prose figure { margin: var(--s-4) 0; }
.prose figcaption {
  margin-top: 10px;
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  color: var(--fg-soft);
}
.prose blockquote {
  margin: var(--s-4) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-oak);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Dropped capital opening a story section */
.prose--lead > p:first-of-type::first-letter {
  float: left;
  margin: 0.05em 0.08em 0 0;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  color: var(--c-oak);
}


/* ==========================================================================
   19b  INTEROP ALIASES
   --------------------------------------------------------------------------
   Class names in active use by the data-driven pages (gallery.html and the
   catalog/gallery renderers) that arrived alongside this system. They are
   real, supported aliases — not dead code — so nobody has to rewrite working
   markup to get styled output.

   CANONICAL              ALIAS SUPPORTED HERE
   .filter-bar        →   .filters
   .filter-chip       →   .chip used as a <button> (i.e. has aria-pressed)
   .gallery-empty     →   .empty-state
   .cluster           →   .btn-row
   (new)              →   .result-count
   .btn--secondary    →   .btn--onDark
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

/* A .chip that is a button becomes the pressable filter variant. Static
   .chip spans (species tags, badges) are untouched. */
.chip[aria-pressed] {
  padding: 9px 16px;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--fg-soft);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.chip[aria-pressed]:hover { border-color: var(--c-oak); color: var(--fg); }
.chip[aria-pressed="true"] {
  border-color: var(--c-bark);
  background: var(--c-bark);
  color: var(--c-ink-invert);
}
.on-dark .chip[aria-pressed="true"] {
  border-color: var(--c-canvas);
  background: var(--c-canvas);
  color: var(--c-bark);
}

.result-count {
  margin: 0 0 var(--s-2);
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.result-count:empty { display: none; }

.empty-state {
  padding: var(--s-8) var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--fg-soft);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* --- Markup emitted by assets/js/catalog.js + gallery.js ----------------- */

/* Body-level species/category tag (the overlay version is .card__tag). */
.tag {
  align-self: start;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Card description — alias of .card__desc. */
.card__text {
  color: var(--fg-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}

/* Spec list rendered as a <dl> of <div><dt>/<dd></div> rows. Mirrors
   .card__specs, which is the <ul> form of the same thing. */
.card__meta {
  display: grid;
  gap: 2px;
  margin: var(--s-1) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--line);
}
.card__meta > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-xs);
}
.card__meta dt {
  color: var(--fg-soft);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card__meta dd {
  margin: 0;
  color: var(--fg);
  font-weight: var(--w-heading);
  font-variant-numeric: tabular-nums;
}

/* Result count inside a filter chip: "Cabinets 4" */
.chip__count {
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: inherit;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip__count { background: rgba(247, 243, 236, 0.22); }

/* Legacy name for the outlined button used on dark bands. */
.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--line-strong);
}
.btn--onDark:hover {
  --btn-fg: var(--c-bark);
  --btn-bg: var(--c-canvas);
  --btn-border: var(--c-canvas);
}


/* ==========================================================================
   20  UTILITIES, MOTION, PRINT
   ========================================================================== */

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

.center      { text-align: center; }
.mt-0        { margin-top: 0; }
.mt-2        { margin-top: var(--s-2); }
.mt-4        { margin-top: var(--s-4); }
.mt-6        { margin-top: var(--s-6); }
.mb-0        { margin-bottom: 0; }
.mx-auto     { margin-inline: auto; }
.full-bleed  { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.no-wrap     { white-space: nowrap; }

/* Scroll reveal. The hidden state only applies when JS is running, so
   no-JS visitors get everything immediately. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .drawer, .lightbox, .hero__scroll, .footer__social, .filter-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; padding-block: var(--s-4); }
  .section { padding-block: var(--s-3); break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}