/* ============================================================
   Barkley Carpentry, shared design system
   Signature: the live edge (organic slab contour) as the section device.
   Palette grounded in real Texas hardwood tones.
   Spec: docs/specs/DESIGN_SPEC.md (type, spacing, radius, colour, targets, motion).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root {
  /* wood palette */
  --walnut-900: #211913;
  --walnut-800: #2c2118;
  --walnut-700: #3b2c1f;
  --mesquite:   #a8502b;      /* fills, borders, the bark line */
  --mesquite-bright: #c0603a; /* large display text on walnut only (3.72:1, large-text floor 3:1) */
  --mesquite-ink: #934521;    /* mesquite TEXT on cream: 5.30:1 on sanded */
  --mesquite-light: #d8875f;  /* mesquite TEXT and focus ring on walnut: 5.64:1 */
  --sanded:     #ede3d1;
  --sapwood:    #dbcbad;
  --linen:      #f6efe1;
  --pewter:     #5c564c;      /* secondary text: 5.71:1 on sanded */
  --ink:        #241c15;
  --surface-card: #f2eadb;    /* linen and sanded mixed, opaque */
  --border-control: #888074;  /* control boundary on cream: 3.06:1 (WCAG 1.4.11) */
  --border-control-dark: #958771; /* control boundary on walnut: 4.47:1 */
  --footer-muted: #a3967f;    /* muted footer text on walnut-900: 5.96:1 */

  /* type: five sizes, nothing below 13.3px */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-spec: 'Spline Sans Mono', ui-monospace, monospace;
  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem);
  --step-3:  clamp(2.3rem, 1.9rem + 2vw, 3.6rem);
  --step-4:  clamp(3rem, 2.2rem + 4vw, 5.8rem);

  /* spacing: a 4px grid, fixed per breakpoint so it holds at every width */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: 16px;

  /* radius: four steps. Controls, cards, panels, pills. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* targets */
  --target: 44px;

  /* motion: four named durations */
  --dur-instant: 60ms;
  --dur-ui: 180ms;
  --dur-panel: 300ms;
  --dur-reveal: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --measure: 64ch;
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }
@media (max-width: 760px) { :root { --space-7: 32px; --space-8: 48px; --space-9: 64px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-ui: 0ms; --dur-panel: 0ms; --dur-reveal: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--sanded);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; margin: 0; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---- spec / eyebrow (mono, the measurement device) ---- */
.spec {
  font-family: var(--font-spec);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--pewter);
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-spec);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mesquite-ink);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.hero .eyebrow, .section--dark .eyebrow { color: var(--mesquite-light); }

/* ---- layout ---- */
.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.section { padding-block: var(--space-9); }
.section--tight { padding-top: var(--space-7); }
.section--dark { background: var(--walnut-800); color: var(--sanded); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--linen); }
.section--dark .spec { color: var(--sapwood); }

/* ---- the live edge: organic slab divider (the signature, used at every material seam) ---- */
.liveedge { display: block; width: 100%; height: 46px; }
.liveedge path.bark { fill: none; stroke: var(--mesquite); stroke-width: 2.5; opacity: 0.9; }

/* two-way seam: bg = section above, path fill = section below, bark line traces the cut */
.edge { display: block; width: 100%; line-height: 0; }
.edge svg { display: block; width: 100%; height: 44px; }
.edge path.bark { fill: none; stroke: var(--mesquite); stroke-width: 2.5; opacity: 0.92; }
.edge--toDark   { background: var(--sanded); }      .edge--toDark   path.fill { fill: var(--walnut-800); }
.edge--toLight  { background: var(--walnut-800); }  .edge--toLight  path.fill { fill: var(--sanded); }
.edge--toFooter { background: var(--sanded); }      .edge--toFooter path.fill { fill: var(--walnut-900); }

/* ---- buttons: 48px tall, radius-sm ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-0); line-height: 1.2;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--dur-ui) var(--ease-out), background var(--dur-ui) ease, color var(--dur-ui) ease;
}
.btn--primary { background: var(--mesquite); color: var(--linen); }
.btn--primary:hover { background: var(--mesquite-bright); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover span { color: var(--walnut-900); }
.btn:active { transform: translateY(0); filter: brightness(0.92); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.cta-row { text-align: center; margin-top: var(--space-7); }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sanded);
  border-bottom: 1px solid color-mix(in srgb, var(--walnut-900) 12%, transparent);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target); text-decoration: none; transition: opacity var(--dur-ui) ease; }
.brand:hover { opacity: 0.85; }
.brand:hover .brand__mark { transform: rotate(-6deg); }
.brand__mark { height: 42px; width: auto; display: block; transition: transform var(--dur-ui) var(--ease-out); }
.footer-mark { width: 88px; height: auto; display: block; margin-bottom: var(--space-4); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.wordmark b { color: var(--mesquite-ink); font-weight: 700; }
.nav { display: flex; gap: var(--space-6); align-items: center; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target); text-decoration: none; font-weight: 500; font-size: var(--step-0); }
.nav a:hover { color: var(--mesquite-ink); }
.nav a.nav__cta, .nav a.nav__cta:hover { color: var(--linen); }
.nav__cta { font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 760px) {
  .nav a:not(.nav__cta) { display: none; }
  .site-header .nav__cta { min-height: var(--target); padding: 0 var(--space-3); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; border-width: 1px; }
  .site-header .wordmark { font-size: var(--step-0); }
}

/* ---- hero ---- */
.hero { background: var(--walnut-800); color: var(--sanded); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; padding-block: var(--space-9); }
.hero h1 { font-size: var(--step-4); color: var(--linen); margin-bottom: var(--space-5); }
.hero h1 em { font-style: italic; color: var(--mesquite-bright); }
.hero p { color: var(--sapwood); font-size: var(--step-1); max-width: 42ch; }
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.hero figure { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.hero figure img { width: 100%; height: 100%; flex: 1; min-height: 320px; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.hero figcaption { margin-top: var(--space-3); color: var(--sapwood); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero figure { align-self: auto; } .hero figure img { aspect-ratio: 4/3; height: auto; flex: none; min-height: 0; } }

/* slab placeholder (honest, until a real hero photo lands) */
.slab {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md);
  background: repeating-linear-gradient(91deg, color-mix(in srgb, var(--walnut-700) 92%, #000) 0 7px, var(--walnut-700) 7px 15px);
  border: 1px solid color-mix(in srgb, var(--mesquite) 40%, transparent);
  display: grid; place-content: center; text-align: center; gap: var(--space-2); padding: var(--space-6);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.slab .spec, .slab__note { color: var(--sapwood); }
.slab__note { font-family: var(--font-spec); font-size: var(--step--1); max-width: 26ch; }

/* ---- portfolio / piece cards: radius-md ---- */
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.piece { background: var(--linen); border-radius: var(--radius-md); overflow: hidden; border: 1px solid color-mix(in srgb, var(--walnut-900) 8%, transparent); transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; }
.piece:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(33,25,19,0.5); }
.piece__img { aspect-ratio: 4 / 3; background: var(--sapwood); display: grid; place-content: center; color: var(--pewter); position: relative; }
.piece__img { overflow: hidden; }
.piece__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.piece__img--ph { background: repeating-linear-gradient(45deg, var(--sapwood) 0 12px, color-mix(in srgb, var(--sapwood) 88%, var(--walnut-900)) 12px 24px); }
.piece__img .ph-tag { font-family: var(--font-spec); font-size: var(--step--1); background: var(--walnut-800); color: var(--sanded); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
.piece__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.piece__body h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.piece__body p { font-size: var(--step--1); color: var(--pewter); margin-bottom: var(--space-3); }
.piece__spec { border-top: 1px solid color-mix(in srgb, var(--walnut-900) 10%, transparent); padding-top: var(--space-3); }

/* ---- service list ---- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.svc { padding: var(--space-6); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-card); text-decoration: none; color: inherit; transition: border-color var(--dur-instant) ease, transform var(--dur-ui) var(--ease-out); }
a.svc:hover { border-color: var(--mesquite); transform: translateY(-2px); }
.svc h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.svc p { font-size: var(--step--1); color: var(--pewter); margin: 0; }
.svc .spec { display: block; margin-bottom: var(--space-3); }

/* ---- where we work band ---- */
.towns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.town-chip { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-spec); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1);
  border: 1px solid var(--border-control); padding: 0 var(--space-4); border-radius: var(--radius-full); text-decoration: none; transition: border-color var(--dur-instant) ease, color var(--dur-instant) ease; }
.section--dark .town-chip { border-color: var(--border-control-dark); }
.town-chip:hover { border-color: var(--mesquite); color: var(--mesquite-ink); }
.section--dark .town-chip:hover { border-color: var(--mesquite-light); color: var(--mesquite-light); }

/* ---- review slot ---- */
.review-first { border: 2px dashed color-mix(in srgb, var(--mesquite) 60%, transparent); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; max-width: 44ch; margin-inline: auto; }
.review-first .spec { color: var(--mesquite-ink); display: block; margin-bottom: var(--space-3); }
.section--dark .review-first .spec { color: var(--mesquite-light); }
.block-gap { margin-top: var(--space-7); }

/* ---- contact / quote ---- */
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 640px; }
.quote label { font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pewter); display: block; margin-bottom: var(--space-1); }
.quote .full { grid-column: 1 / -1; }
.quote input, .quote select, .quote textarea { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: inherit; font-size: var(--step-0); background: var(--linen); color: var(--ink); }
.quote textarea { min-height: 120px; resize: vertical; }
.quote-done { margin-top: var(--space-3); color: var(--mesquite-ink); }
@media (max-width: 620px) { .quote { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.site-footer { background: var(--walnut-900); color: var(--sapwood); padding-block: var(--space-8); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.site-footer a { color: var(--sapwood); text-decoration: none; transition: color var(--dur-instant) ease; }
.site-footer a:hover { color: var(--linen); }
.site-footer h4 { font-family: var(--font-spec); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); color: var(--sanded); margin: 0 0 var(--space-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--target); }
.footer-blurb { margin-top: var(--space-2); max-width: 34ch; }
.footer-note { border-top: 1px solid color-mix(in srgb, var(--sapwood) 20%, transparent); margin-top: var(--space-6); padding-top: var(--space-5); font-size: var(--step--1); color: var(--footer-muted); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---- utility ---- */
.lede { font-size: var(--step-1); max-width: 52ch; color: var(--pewter); }
.section--dark .lede { color: var(--sapwood); }
.stack > * + * { margin-top: var(--space-4); }
.stack h3 { font-size: var(--step-1); }
.faq { max-width: 62ch; }
.section-head { max-width: 56ch; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--step-3); }
.section-head h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }

/* ---- project planner: radius-lg panel, radius-sm controls (concentric) ---- */
.planner { position: relative; max-width: 400px; margin-left: auto; background: var(--linen);
  border-radius: var(--radius-lg); padding: 0 var(--space-5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.20), 0 26px 44px -18px rgba(0,0,0,0.55); }
.planner__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) 0 var(--space-2); }
.planner__avatar { width: 44px; height: 44px; flex: none; display: block; }
.planner__head .tag { font-family: var(--font-spec); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mesquite-ink); display: block; }
.planner__head h3 { font-size: var(--step-1); color: var(--ink); margin: 0; line-height: 1; }
.planner__body { padding: var(--space-1) 0; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; max-height: 188px; }
.msg { font-size: var(--step--1); line-height: 1.45; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); max-width: 90%; animation: msgIn var(--dur-panel) var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.msg--barkley { background: var(--sapwood); color: var(--ink); align-self: flex-start; border-bottom-left-radius: var(--radius-sm); }
.msg--me { background: var(--mesquite); color: var(--linen); align-self: flex-end; border-bottom-right-radius: var(--radius-sm); }
.planner__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0; }
.chip { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  background: var(--sanded); border: 1px solid var(--border-control); color: var(--ink);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); transition: background var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease; }
.chip:hover { background: var(--mesquite); color: var(--linen); border-color: var(--mesquite); transform: translateY(-1px); }
.chip:active { transform: translateY(0); filter: brightness(0.92); }
.planner__form { display: none; gap: var(--space-2); padding: 0 0 var(--space-3); }
.planner__form.show { display: flex; }
.planner__form input { flex: 1; width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: inherit; font-size: var(--step-0); background: #fff; color: var(--ink); }
.planner .planner__foot { font-family: var(--font-spec); font-size: var(--step--1); line-height: 1.3; color: var(--pewter); max-width: none; padding: 0 0 var(--space-4); margin: 0; }
@media (max-width: 860px) { .planner { margin-left: 0; } }

/* reveal on scroll (quiet) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* focus visibility: 3px ring, 3:1 or better against every surface it can sit on */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--mesquite); outline-offset: 2px;
}
.hero :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--mesquite-light); }

/* inline text links: underlined, and the underline thickens on hover */
.text-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-instant) ease; }
.text-link:hover { color: var(--linen); text-decoration-thickness: 2px; }

/* ---- rating line and reviews (real Google reviews, verbatim, _DATA/reviews/) ---- */
.rating { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target); margin-top: var(--space-5); text-decoration: none; color: inherit; }
.rating__stars { color: var(--mesquite-light); font-size: var(--step-1); letter-spacing: 0.08em; line-height: 1; }
.rating { transition: opacity var(--dur-instant) ease; }
.rating:hover { opacity: 0.8; }
.rating:hover .rating__text { text-decoration: underline; text-underline-offset: 3px; }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.review { margin: 0; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-control); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-4); }
.review--feature { grid-column: 1 / -1; }
.review--feature .review__text { font-size: var(--step-1); line-height: 1.45; max-width: 64ch; }
.review .rating__stars { color: var(--mesquite-ink); font-size: var(--step-0); }
.review__text { margin: 0; flex: 1; }
.review__text p { margin: 0 0 var(--space-3); }
.review__by { font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--pewter); }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* ---- town numbers (U.S. Census Bureau ACS, _DATA/town_census.json) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { padding: var(--space-5); border: 1px solid var(--border-control-dark); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.stat__num { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--linen); }
.stat__label { font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sapwood); }
.stat-src { margin-top: var(--space-4); font-size: var(--step--1); color: var(--sapwood); }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- spec card: services with no photo yet sit in the grid as a list, never an empty frame ---- */
.piece--spec { background: var(--walnut-800); color: var(--sanded); border-color: var(--walnut-800); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.piece--spec:hover { transform: none; box-shadow: none; }
.piece--spec .eyebrow { color: var(--mesquite-light); margin: 0; }
.piece--spec h3 { font-size: var(--step-1); color: var(--linen); }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); flex: 1; align-content: start; }
.spec-list li { font-family: var(--font-spec); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sapwood); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-control-dark); }
.piece--spec .btn { align-self: flex-start; }