:root {
  --navy: #232e47;
  --navy-deep: #1b2337;
  --cream: #f3ead9;
  --paper: #faf4e7;
  --card: #fbf6ea;
  --green: #2e5636;
  --green-deep: #24432b;
  --amber: #d89a45;
  --amber-deep: #b97b2b;
  /* v3 a11y fix: hover label token. #1b2337 on #b97b2b computes 4.42:1 —
     just under AA; this navy-ink keeps the navy look at 4.9:1 on the hover bg. */
  --navy-ink: #141a26;
  --brown: #6e431f;
  --ink: #2b2b28;
  --line: #d5c8ab;
}

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

html { font-size: 100%; }

body {
  font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--green); }
a:hover { color: var(--amber-deep); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */
.site-head {
  background: var(--cream);
  border-bottom: 4px solid var(--navy);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand picture { display: block; line-height: 0; }
.brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.brand-name { font-family: "Alfa Slab One", Georgia, serif; color: var(--navy); line-height: 1.05; }
.brand-name small {
  display: block;
  font-family: "Kaushan Script", cursive;
  font-size: 1rem;
  color: var(--green);
  margin-bottom: .1rem;
}
.brand-name span { font-size: 1.35rem; letter-spacing: .04em; }
.brand-name em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .32em;
  color: var(--brown);
  padding-top: .25rem;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
nav a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem 0;
  border-bottom: 3px solid transparent;
}
nav a:hover { color: var(--amber-deep); }
nav a.current { border-bottom-color: var(--amber); }

/* =====================================================================
   WOOD LAYER — one real veneer photograph behind the whole page.

   v3.1 (CEO ruling, backing-card-spec-v31.md): a single
   position:fixed layer (.wood-stage) at EVERY width is the only wood
   source. It never scrolls, so the grain is pixel-stationary; the hero
   and the footer are transparent windows straight onto it at mobile
   and desktop alike, and the cream content bands cover it. The old
   <768px in-flow hero/footer branch is retired — there is no
   duplicate wood fetch at mobile.

   Mobile URL-bar churn: 100dvh with a 100vh fallback; js/site.js
   re-measures the stage on resize/orientationchange when dvh is not
   supported. `background-attachment: fixed` is not used anywhere in
   this stylesheet at any width.
   ===================================================================== */

/* html[data-wood] is the public selector/cookie contract (js/site.js,
 * cookie "kc-hero-wood", expires at local midnight). Each slug carries
 * its own image pair. Because the image is referenced through a custom
 * property, only the selected wood is ever fetched — the other seven
 * rules are never applied, so their files stay unloaded.
 * v3.1: the per-wood veil alphas of v3 are gone — raw wood, no tint.
 * The html{} base block is the no-JS default (oak). */
html {
  --wood-jpg: url("../assets/img/wood/wood-oak.jpg");
  --wood-webp: url("../assets/img/wood/wood-oak.webp");
}
html[data-wood="oak"]    { --wood-jpg: url("../assets/img/wood/wood-oak.jpg");    --wood-webp: url("../assets/img/wood/wood-oak.webp"); }
html[data-wood="walnut"] { --wood-jpg: url("../assets/img/wood/wood-walnut.jpg"); --wood-webp: url("../assets/img/wood/wood-walnut.webp"); }
html[data-wood="maple"]  { --wood-jpg: url("../assets/img/wood/wood-maple.jpg");  --wood-webp: url("../assets/img/wood/wood-maple.webp"); }
html[data-wood="cherry"] { --wood-jpg: url("../assets/img/wood/wood-cherry.jpg"); --wood-webp: url("../assets/img/wood/wood-cherry.webp"); }
html[data-wood="ash"]    { --wood-jpg: url("../assets/img/wood/wood-ash.jpg");    --wood-webp: url("../assets/img/wood/wood-ash.webp"); }
html[data-wood="teak"]   { --wood-jpg: url("../assets/img/wood/wood-teak.jpg");   --wood-webp: url("../assets/img/wood/wood-teak.webp"); }
html[data-wood="sapele"] { --wood-jpg: url("../assets/img/wood/wood-sapele.jpg"); --wood-webp: url("../assets/img/wood/wood-sapele.webp"); }
html[data-wood="okoume"] { --wood-jpg: url("../assets/img/wood/wood-okoume.jpg"); --wood-webp: url("../assets/img/wood/wood-okoume.webp"); }

.wood-stage {
  position: fixed;   /* the only wood source at ALL widths (v3.1 ruling) */
  inset: 0;
  height: 100vh;     /* URL-bar churn fallback; overridden where dvh… */
  height: 100dvh;    /* …is supported (js/site.js re-measures where not) */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wood-stage__image {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat var(--wood-jpg);
  background-image: image-set(var(--wood-webp) type("image/webp"),
                              var(--wood-jpg) type("image/jpeg"));
}

/* Everything real sits above the stage; nothing wrapping the stage may
 * carry transform/filter/contain, or fixed stops being viewport-fixed. */
.site-head, main, .site-foot { position: relative; z-index: 1; }

/* Content bands deliberately hide the wood behind their own pigment. */
section.band { background: var(--paper); }

/* ---------- hero (transparent window over the wood; v3.1: no veil) ---------- */
.hero {
  position: relative;
  color: var(--cream);
  text-align: center;
  padding: 2rem 1rem 4.5rem;
  background: transparent;
}
.hero .wrap { position: relative; z-index: 1; }
/* Maker's stamp: circular, alpha kept, no shadow, no backing. */
.hero .badge-lg {
  display: block;
  width: 190px; height: 190px;
  margin: 0 auto 1.9rem;
  border-radius: 50%;
  object-fit: cover;
}
.hero h1 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  letter-spacing: .02em;
  text-shadow: none; /* v3.1: the backing card carries the contrast, not a shadow */
}
.hero h1 .script {
  display: block;
  font-family: "Kaushan Script", cursive;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--amber);
  margin-bottom: .4rem;
}
.hero p.lede {
  max-width: 40rem;
  margin: 1.1rem auto 1.8rem;
  color: #efe7d5;
  font-size: 1.05rem;
}
.btn {
  display: inline-block;
  background: var(--amber);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.6rem;
  border: 2px solid var(--navy-deep);
  box-shadow: 3px 3px 0 var(--navy-deep);
}
.btn:hover { background: var(--amber-deep); color: var(--navy-ink); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 3px 3px 0 rgba(20, 26, 42, .5); }
.btn + .btn { margin-left: .8rem; }

/* ---------- keyboard focus (v3 a11y fix, Friday review blocker 1) ----------
 Amber ring per the v3 spec; a navy underlay ring hugs the box so the ring
 always has a >=3:1 edge even where amber sits on cream/paper (2.1:1 alone).
 The ring surrounds the whole item, offset clear of the active-page underline
 (nav a.current), so the two indicators can never be confused. */
.site-head a:focus-visible,
.site-foot a:focus-visible,
.page-banner a:focus-visible,
main a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}
.site-head a:focus-visible,
main a:focus-visible {
  box-shadow: 0 0 0 3px var(--navy-deep);
}
.btn:focus-visible {
  box-shadow: 3px 3px 0 var(--navy-deep), 0 0 0 3px var(--navy-deep);
}

/* ---------- sections ---------- */
section.band { padding: 3.25rem 0; }
section.band + section.band { border-top: 1px solid var(--line); }

.kicker {
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: .35rem;
}
h2.title {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--navy);
  margin-bottom: 1.4rem;
}
.rule {
  width: 64px;
  border: 0;
  border-top: 3px solid var(--amber);
  margin: .4rem 0 1.4rem;
}

/* ---------- page banner (inner pages) ---------- */
.page-banner {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 2.6rem 0 2.2rem;
  border-bottom: 4px solid var(--amber);
}
.page-banner h1 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 2rem;
}
.page-banner p { color: #cfc6b2; max-width: 44rem; margin-top: .4rem; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.step {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.3rem 1.2rem;
}
.step h3 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .4rem;
}
.step .num {
  font-family: "Alfa Slab One", Georgia, serif;
  color: var(--amber-deep);
  font-size: 1.5rem;
}

/* ---------- gallery ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
}
.card figure { margin: 0; }
.card .thumb { display: block; width: 100%; border-bottom: 3px solid var(--navy); }
.card figcaption { padding: 1rem 1.1rem 1.2rem; }
.card h3 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--navy);
}
.card .meta {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
  margin-top: .15rem;
}
.card p { font-size: .92rem; margin-top: .5rem; }
.note {
  background: #f1e7cf;
  border: 1px dashed var(--amber-deep);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  margin: 1.6rem 0;
}

/* ---------- blog ---------- */
.post { border-bottom: 1px solid var(--line); padding: 1.9rem 0; }
.post:last-child { border-bottom: 0; }
.post .meta {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
}
.post h3 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--navy);
  margin: .3rem 0 .6rem;
}
.post h3 a { text-decoration: none; color: inherit; }
.post h3 a:hover { color: var(--amber-deep); }
.post .thumb-strip { width: 100%; max-width: 340px; border: 1px solid var(--line); margin: .8rem 0; }
.post p { max-width: 44rem; }
.post + .post .rule { margin-bottom: 0; }

/* ---------- about/contact ---------- */
.two-col { display: grid; grid-template-columns: 3fr 2fr; gap: 2.4rem; align-items: start; }
.prose p { margin-bottom: 1rem; max-width: 40rem; }
.contact-card {
  background: var(--navy);
  color: var(--cream);
  padding: 1.6rem 1.5rem;
}
.contact-card h3 {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: .8rem;
}
.contact-card dl { font-size: .95rem; }
.contact-card dt {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: .9rem;
}
.contact-card dd { margin: .1rem 0 0; }
.contact-card a { color: #f0e6d2; }
.fineprint { font-size: .82rem; color: #5d5a50; margin-top: 1rem; }

/* ---------- footer (raw-wood window; v3.1: no veil, one bounded card) ---------- */
.site-foot {
  position: relative;
  background: transparent;
  color: var(--cream);
  border-top: 3px solid var(--amber);
  box-shadow: inset 0 1px 0 rgba(243, 234, 217, .34);
  padding: 2.2rem 0 1.8rem;
  text-align: center;
  font-size: .9rem;
}
.site-foot .wrap { position: relative; z-index: 1; }
.site-foot .cross { color: var(--amber); letter-spacing: .3em; }
.site-foot .brand-name { color: var(--cream); margin-bottom: .4rem; }
.site-foot nav { margin-top: .9rem; }
.site-foot nav ul { justify-content: center; }
.site-foot nav a { color: var(--cream); font-size: .74rem; }
.site-foot nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: .3em; }

/* ---------- wood threshold ---------- */
/* v3.1 (CEO ruling): the fixed stage covers every width; the former
   < 768px in-flow hero/footer branch is retired. Only hero metrics and
   layout stay breakpoint-dependent now. */
@media (min-width: 768px) {
  .hero { min-height: 72svh; display: flex; align-items: center; justify-content: center; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .steps, .grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-head .wrap { justify-content: center; }
  .steps, .grid { grid-template-columns: 1fr; }
  .hero { padding: 2rem 1rem 3.2rem; }
  .hero .badge-lg { width: 142px; height: 142px; margin-bottom: 1.4rem; }
  .btn + .btn { margin-left: 0; margin-top: .8rem; }
}

/* =====================================================================
   V3.1 BACKING CARDS — token block pasted verbatim from
   v3/reports/backing-card-spec-v31.md. Read the spec for rationale.
   Application notes: the site header sits on its own opaque cream band
   (never over wood), so the raw-wood nav treatment applies to the
   FOOTER nav; gallery/blog copy lives on opaque bands but the spec
   application map still calls for card treatment on caption/article
   text, so it is applied there too. .raw-wood-nav flex geometry is
   applied to its ul (markup keeps the ul list container).
   ===================================================================== */

/* v3.1: a small, oiled-paper reading surface over unaltered wood. */
:root {
  --backing-fill: rgba(20, 26, 38, .78);       /* #141a26; 22% wood remains visible */
  --backing-border: rgba(243, 234, 217, .22);  /* quiet hand-finished edge */
  --backing-shadow: rgba(8, 12, 18, .34);      /* short shop-label lift */
  --backing-radius: 8px;
  --backing-pad-y: clamp(1rem, 2.2vw, 1.75rem);
  --backing-pad-x: clamp(1.125rem, 3vw, 2.625rem);
  --backing-control-y: .73rem;
  --backing-control-x: 1.1rem;
  --backing-ink: #f3ead9;
  --backing-ink-soft: #efe7d5;
  --backing-accent: #d89a45;
}

/* Shared card; deliberately no blur and no transparency effect beyond fill. */
.text-backing,
.raw-wood-nav a,
.btn.ghost,
.raw-wood-card-copy {
  background: var(--backing-fill);
  border: 1px solid var(--backing-border);
  border-radius: var(--backing-radius);
  box-shadow: 0 5px 0 var(--backing-shadow);
}

/* HERO: wrap h1 (including .script) plus .lede in .hero-copy.text-backing. */
.hero {
  background: transparent;
  color: var(--backing-ink);
}
.hero::before { content: none; }
.hero-copy {
  width: min(760px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: var(--backing-pad-y) var(--backing-pad-x);
  text-align: center;
}
.hero h1 { color: var(--backing-ink); text-shadow: none; }
.hero h1 .script { color: var(--backing-accent); }
.hero p.lede { color: var(--backing-ink-soft); }

/* CTAs: one opaque amber primary, one small dark-backed secondary. */
.btn {
  border-radius: 6px;
  padding: var(--backing-control-y) var(--backing-control-x);
  color: #141a26;
  background: #d89a45;
  border: 2px solid #d89a45;
  box-shadow: 3px 3px 0 var(--backing-shadow);
}
.btn:hover,
.btn:focus-visible { color: #141a26; background: #b97b2b; }
.btn.ghost {
  color: var(--backing-ink);
  border: 2px solid var(--backing-accent);
  box-shadow: 3px 3px 0 var(--backing-shadow);
}
.btn.ghost:hover,
.btn.ghost:focus-visible { color: #141a26; background: #d89a45; }

/* NAV: each link is its own compact backing card, never the whole nav bar. */
.raw-wood-nav ul { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.raw-wood-nav a {
  color: var(--backing-ink);
  padding: .28rem .45rem;
  border-bottom: 0;
  text-decoration: none;
}
.raw-wood-nav a:hover { color: #141a26; background: #d89a45; text-decoration: none; }
.raw-wood-nav a.current { border-bottom: 2px solid var(--backing-accent); }

/* GALLERY/BLOG: apply only to the textual caption/article, not its image. */
.raw-wood-card-copy {
  color: var(--backing-ink);
  padding: 1rem 1.1rem 1.2rem;
}
.raw-wood-card-copy h3 { color: var(--backing-ink); }
/* AA resolution (see v31-implementation-evidence.md): #d89a45 at the
   kicker's normal 0.8rem size measured 3.64:1 on sampled fill pixels —
   below the 4.5 normal threshold. The spec's own "AA must be measured
   on rendered composition" rule takes precedence over the token name,
   so small kickers render with the ink token; accent stays on large
   type and borders. The accent is not lost: uppercase/letterspacing
   still reads as a kicker. */
.raw-wood-card-copy .meta { color: var(--backing-ink-soft); }
.raw-wood-card-copy p,
.raw-wood-card-copy a { color: var(--backing-ink-soft); }
.raw-wood-card-copy h3 a { color: inherit; }
.raw-wood-card-copy a:hover { color: var(--backing-accent); }

/* FOOTER: one content-sized card inside the raw-wood footer, no footer veil. */
.site-foot { background: transparent; }
.site-foot::before { content: none; }
.footer-copy {
  width: min(820px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: var(--backing-pad-y) var(--backing-pad-x);
  text-align: center;
  color: var(--backing-ink-soft);
}
.footer-copy .brand-name,
.footer-copy nav a { color: var(--backing-ink); }
/* ✕✕ is a decorative joint mark; AA-safe on sampled fill pixels only at
   large-text size (measured 4.24:1 worst-case — above the 3:1 large
   threshold, below 4.5 at the inherited .9rem). Promoted to 1.7rem and
   aria-hidden in the markup. */
.footer-copy .cross { color: var(--backing-accent); font-size: 1.7rem; margin: .45rem 0 .3rem; }

/* The existing verified focus geometry stays explicit over every backing. */
.raw-wood-nav a:focus-visible,
.btn:focus-visible,
.footer-copy a:focus-visible {
  outline: 3px solid var(--backing-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #141a26, 3px 3px 0 var(--backing-shadow);
}

@media (max-width: 560px) {
  .hero-copy,
  .footer-copy { width: calc(100% - 2.5rem); }
  .raw-wood-nav ul { justify-content: center; gap: 2px; }
  .raw-wood-nav a { padding: .28rem; font-size: .67rem; }
}