/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON style.css — the mechanical layer of skill-e as code (Aug 12 2026).
   Copy this file to start every build. Fill the :root palette from the business's
   world (§5 sourcing hierarchy + the three-ground rule). Add per-business styles
   below the marked line. NEVER undo an encoded rule — that is a rule proposal.

   Encoded here:
   [v1.36] img reset with height:auto           [v1.19] header layout law + nav gotcha
   [v1.5]  header CTA is a real button          [v1.17] semantic open/closed dot
   [v1.14/27] stacked hours micro-table         [v1.36/GAL-5] gallery 1-col <600px,
   [§4]    mobile CTAs full width, stacked         2-col 600–759px, 3-col ≥760px
   [TYPE-2/ACC-3] body 16-21px,                 [ACC-2] focus visible; 44px targets on
           line-height 1.4-1.5 (ruling 24)               wordmark, buttons, NAV LINKS, footer
   [MOB-2] NO overflow-x mask on body
═══════════════════════════════════════════════════════════════════════════ */

/* TWO SELF-HOSTED FACES — A DISPLAY FACE AND A BODY FACE. */
@font-face{font-family:'Nunito';src:url('fonts/nunito-var.woff2?v=1') format('woff2-variations');
  font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Rubik';src:url('fonts/rubik-var.woff2?v=1') format('woff2-variations');
  font-weight:300 600;font-style:normal;font-display:swap;}

:root{
  /* PALETTE — Jake's Barber Shop, Eagle Rock. Sourced from their own storefront and mark
     (PAL-1): the black sign panel / shutters / capes, the red JAKES letters, the tan stucco,
     the white-painted planter brick. */
  --ground:#FBFAF8;        /* near-white, crisp — the painted planter brick and the mark's white outline */
  --ink:#1A1614;           /* the ONE dark hue — the sign panel, the shutters, the capes */
  --muted:#6B625C;         /* the stucco in shade */
  --line:#E5DED4;          /* hairline, from the stucco */
  --panel:#F2ECE3;         /* tan/khaki stucco tint */
  --action:#C1121F;        /* the JAKES letters — CTAs ONLY (POP-3) */
  --action-dark:#97101A;
  /* [v1.17] semantic, never brand: clear green open, clear red closed, on every site */
  --open:#1B7F3B;
  --closed:#B0202F;
  --wrap:1080px;
  --display:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- reset. height:auto IS THE RULE. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink);}
section[id]{scroll-margin-top:80px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.01em;}

/* ---------- sticky header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--line);}
.header-inner{max-width:var(--wrap);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.wordmark{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;}
.site-nav{display:none;gap:26px;align-items:center;}
.site-nav a{color:var(--muted);text-decoration:none;font-size:15px;
  display:inline-flex;align-items:center;min-height:44px;}
.site-nav a:hover{color:var(--ink);}
@media (min-width:900px){ .site-nav{display:flex;} }

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:16px;
  border-radius:8px;text-decoration:none;border:2px solid transparent;
  padding:12px 22px;min-height:44px;transition:background .18s ease,color .18s ease;}
/* white label on --action measures 6.2:1 (POP-1's 4.5:1 floor verified for this business) */
.btn-primary{background:var(--action);color:#fff;}
.btn-primary:hover{background:var(--action-dark);}
.btn-secondary{background:transparent;color:var(--action);border-color:var(--action);}
.btn-secondary:hover{background:color-mix(in srgb,var(--action) 8%,transparent);}
.btn-header{padding:10px 20px;font-size:15px;white-space:nowrap;min-width:120px;}
/* third channel in the Final CTA — a real button, kept out of the action colour (POP-1) */
.btn-tertiary{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,transparent);}
.btn-tertiary:hover{background:rgba(26,22,20,.06);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--action);outline-offset:2px;}

/* [§2.3] mobile: both hero CTAs span the full content width, stacked, primary first */
.hero-cta{display:flex;flex-direction:column;gap:10px;margin:18px 0 20px;}
.hero-cta .btn{width:100%;}
@media (min-width:600px){ .hero-cta{flex-direction:row;} .hero-cta .btn{width:auto;} }

/* ---------- hours — status line + ALWAYS-STACKED micro-table */
.hours-status{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 6px;}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none;}
.dot.open{background:var(--open);}
.dot.closed{background:var(--closed);}
.hours-table{display:grid;grid-template-columns:auto auto;gap:2px 18px;justify-content:start;
  margin:0;font-size:15px;color:var(--muted);}
.hours-table dt{font-weight:500;}
.hours-table dd{margin:0;}

/* ---------- hero ---------- */
.hero{padding:22px 0 8px;}
.hero-grid{display:grid;gap:20px;}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;}
  .hero{padding:34px 0 8px;} }
.eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
h1{font-size:clamp(28px,6.7vw,50px);margin:0 0 12px;}
.sub{font-size:18px;color:var(--muted);margin:0;max-width:34em;}

/* ---------- gallery columns */
.gallery-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:600px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:760px){ .gallery-grid{grid-template-columns:1fr 1fr 1fr;} }

/* ---------- reveal-on-scroll */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease;}
html.js .reveal.visible,html.js.noanim .reveal{opacity:1;transform:none;transition:none;}
@media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none;transition:none;} }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:22px 0 30px;
  color:var(--muted);font-size:14px;}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;} /* qa: 44px tap floor */

/* ═══════════════════════════════════════════════════════════════════════════
   PER-BUSINESS STYLES BELOW THIS LINE — Jake's Barber Shop
═══════════════════════════════════════════════════════════════════════════ */

/* --- shared section rhythm --- */
section{padding:38px 0;}
@media (min-width:900px){ section{padding:52px 0;} }
h2{font-size:clamp(25px,4.2vw,34px);margin:0 0 20px;}
.hero h1{margin-bottom:12px;}

/* --- hero photo --- */
.hero-photo img{border-radius:10px;width:100%;}

/* --- proof strip (PROOF-1: quiet, light ground, no band) --- */
.proof{padding:26px 0 10px;}
.proof blockquote{margin:0;max-width:40em;}
.proof p{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.6vw,23px);
  line-height:1.35;margin:0 0 10px;}
.proof cite{font-style:normal;font-size:15px;color:var(--muted);}

/* --- services cards --- */
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (min-width:620px){ .service-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:900px){ .service-grid{grid-template-columns:repeat(4,1fr);gap:16px;} }
.service{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.service svg{width:34px;height:34px;flex:none;}
.service h3{font-size:17px;line-height:1.25;}

/* --- pricing: the signature element (SIG-1) — their price board on the sign's black field.
       This is the page's ONE heavy band (BAND-1), in the single dark hue. --- */
.pricing{background:var(--ink);color:var(--ground);padding:44px 0;}
.pricing h2{color:var(--ground);text-align:center;}
.board{background:var(--panel);color:var(--ink);max-width:620px;margin:0 auto;
  border-radius:6px;padding:26px 22px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.30);}
.board-inner{border:2px solid var(--ink);padding:20px 16px;}
@media (min-width:600px){ .board-inner{padding:24px 24px;} }
.price-row{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding:13px 0;border-bottom:1px solid var(--line);}
.price-row:last-of-type{border-bottom:0;}
.price-row .name{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;}
.price-row .amount{font-family:var(--display);font-weight:700;font-size:18px;white-space:nowrap;}
.price-row .meta{grid-column:1 / -1;font-size:15px;color:var(--muted);line-height:1.45;}
.board-notes{margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted);}
.board-notes li{margin:4px 0;}
.pricing-cta{text-align:center;margin:26px 0 0;}

/* --- work gallery --- */
.work-grid img{width:100%;border-radius:8px;}

/* --- reviews --- */
.review-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:700px){ .review-grid{grid-template-columns:1fr 1fr;} }
.review{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 18px;margin:0;}
.review p{margin:0 0 10px;font-size:17px;}
.review cite{font-style:normal;font-size:15px;color:var(--muted);}

/* --- about --- */
.about-grid{display:grid;gap:22px;align-items:center;}
@media (min-width:820px){ .about-grid{grid-template-columns:1fr 1fr;gap:40px;} }
.about-grid p{margin:0;max-width:34em;font-size:18px;}
.about-grid img{border-radius:10px;width:100%;}

/* --- faq --- */
.faq-list{max-width:44em;border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;
  font-size:17px;padding:14px 34px 14px 0;position:relative;min-height:44px;
  display:flex;align-items:center;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease;}
.faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.faq-list p{margin:0 0 16px;max-width:40em;color:var(--muted);}

/* --- final CTA — THE ASK ONLY --- */
.final{text-align:center;padding:46px 0 40px;}
.final p{font-size:19px;margin:0 auto 22px;max-width:30em;}
.final-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:340px;margin:0 auto;}
@media (min-width:640px){ .final-cta{flex-direction:row;justify-content:center;max-width:none;} }

/* --- footer --- */
.footer-name{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 8px;}
.footer-facts{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:0;align-items:baseline;}
.footer-facts dt{font-weight:500;}
.footer-facts dd{margin:0;}
.footer-facts a{flex-direction:column;align-items:flex-start;text-decoration:none;color:var(--muted);}
.footer-facts a span{display:block;text-decoration:underline;}
.footer-facts a:hover{color:var(--ink);}