/* ============================================================
   KANE'S CABINETS & COUNTERTOPS — "Measured Craft" design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- color: warm craftsman ---- */
  --paper:        oklch(0.971 0.010 86);   /* warm cream bg */
  --paper-2:      oklch(0.945 0.013 84);   /* slightly deeper panel */
  --paper-3:      oklch(0.915 0.016 82);   /* card edge / inset */
  --ink:          oklch(0.255 0.018 60);   /* espresso text */
  --ink-soft:     oklch(0.420 0.020 62);   /* muted body */
  --ink-faint:    oklch(0.580 0.018 64);   /* captions */
  --line:         oklch(0.250 0.018 60 / 0.14);
  --line-strong:  oklch(0.250 0.018 60 / 0.30);

  /* two accents, same chroma & lightness, different hue */
  --walnut:       oklch(0.470 0.062 52);   /* warm wood */
  --walnut-deep:  oklch(0.380 0.055 50);
  --forest:       oklch(0.470 0.062 152);  /* sage/forest */
  --forest-deep:  oklch(0.385 0.052 152);

  --white:        oklch(0.995 0.004 86);

  /* ---- type ---- */
  --serif: 'Spectral', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;

  /* ---- shape ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px oklch(0.25 0.02 60 / 0.06), 0 2px 6px oklch(0.25 0.02 60 / 0.05);
  --shadow-md: 0 4px 16px oklch(0.25 0.02 60 / 0.08), 0 12px 40px oklch(0.25 0.02 60 / 0.07);
  --shadow-lg: 0 10px 30px oklch(0.25 0.02 60 / 0.10), 0 30px 80px oklch(0.25 0.02 60 / 0.10);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--forest); color: var(--white); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

/* ---------------- layout ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); width: 100%; }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }

/* ---------------- type helpers ---------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--walnut);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--walnut);
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--walnut);
  display: inline-block;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); }
.display {
  font-size: clamp(44px, 7.2vw, 104px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.h2 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 300; }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); line-height: 1.62; max-width: 60ch; text-wrap: pretty; }
.italic { font-style: italic; }
.serif-em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
  line-height: 1;
}
.btn .arr { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--walnut-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-forest { background: var(--forest-deep); color: var(--white); }
.btn-forest:hover { background: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 18px 32px; font-size: 16px; }

.link-arrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; gap: 9px; align-items: center;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 4px;
  transition: gap .25s, border-color .25s, color .25s;
}
.link-arrow:hover { gap: 14px; border-color: var(--walnut); color: var(--walnut); }

/* ---------------- placeholder imagery ---------------- */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(0.25 0.02 60 / 0.045) 0 2px,
    transparent 2px 11px
  );
  display: flex; align-items: flex-end;
  border: 1px solid var(--line);
}
.ph::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px;
  padding: 5px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  line-height: 1.2;
}
.ph.dark {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(-45deg, oklch(1 0 0 / 0.04) 0 2px, transparent 2px 11px);
}
.ph.dark::after { color: oklch(1 0 0 / 0.6); background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.12); }

/* reveal on scroll — hidden state only applies under .anim (added by JS only when
   the animation clock is confirmed running). If frozen/throttled, .anim is removed
   and content stays fully visible. */
.reveal { will-change: opacity, transform; }
/* Hidden "from" state is applied by JS only to below-the-fold elements (.pre),
   so first paint is always visible. Transition lives on .pre, so removing .pre
   (the frozen-clock fallback) yields instant visibility with nothing to freeze. */
.reveal.pre { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.pre.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal.pre { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* divider rule with mono tick */
.rule { height: 1px; background: var(--line); width: 100%; }