/* INK — Marcus's pick, 10-17 (board "Shop sites: three looks", A with B's drawing details). Ink and one wood accent,
   heavy type, mono notes like a shop drawing, the shop's own photos. No tinted washes anywhere: status is an ink pill,
   an outlined pill, or the accent. Rules: businesses/shop-sites/TASTE.md. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Azeret+Mono:wght@400;500&display=swap");

:root {
  --paper: #ffffff;
  --sand: #f4f1ec;
  --ink: #141414;
  --muted: #57534e;
  --accent: #79431b;
  --cta: #141414;
  --cta-ink: #ffffff;
  --line: #e6e3de;
  --line-strong: #cbc5bc;
  --field: #ffffff;
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;
  --head-weight: 800;
  --head-track: -0.035em;
  --radius-img: 4px;
  --radius-btn: 6px;
  --radius-card: 6px;
  --radius-field: 6px;
  --wood: #b98a5e;
  --finish: #efebe4;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: .98; }
h2 { letter-spacing: -0.03em; }
.lede { color: #3d3a36; font-size: 1.2rem; max-width: 34ch; }
.eyebrow { color: var(--muted); letter-spacing: .16em; }
.btn-ghost { border: 1.5px solid var(--ink); }
.btn:hover { filter: none; background: #2a2724; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* one tall photo with a note under it, not a mosaic */
.hero-grid { align-items: end; }
.hero-mosaic { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 5; }
.hero-mosaic .m0 { grid-row: auto; }
.hero-mosaic img:not(.m0) { display: none; }
.trust b { color: var(--accent); }

/* a section head is a small dark pill with the explanation muted beside it, never a banner */
.section-head { align-items: center; justify-content: flex-start; gap: 10px 16px; margin-bottom: 28px; }
.section-head h2 { font: 500 .78rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 8px 13px; border-radius: 999px; }
.section-head h2::after { display: none; }
.section-head p { font-size: 1.02rem; }
.section-head .more { margin-left: auto; color: var(--ink); }
.cta-band .cta-row h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* photos are figures on a drawing: FIG. 1, FIG. 2 … */
.work-grid { counter-reset: fig; }
.work { counter-increment: fig; }
.work figcaption b { font-weight: 700; }
.work figcaption span { letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; }
.work figcaption span::before { content: "FIG. " counter(fig) " · "; color: var(--accent); }
.room h3 { font-weight: 800; letter-spacing: -0.02em; }

/* steps as a ruled strip, like the title block of a sheet */
.steps { gap: 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.steps li { border-top: 0; padding: 20px 20px 24px; border-left: 1px solid var(--ink); }
.steps li:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 900px) { .steps li { border-left: 0; border-top: 1px solid var(--line-strong); padding-left: 0; } .steps li:first-child { border-top: 0; } }
.proc-steps li { border-top: 1px solid var(--ink); }
.proc-steps h3 { font-weight: 800; letter-spacing: -0.02em; }
.youget { background: transparent; border: 1.5px solid var(--ink); }

/* status without halos */
.status-pill { background: var(--ink); color: var(--paper); font: 500 .8rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 13px; }
.status-pill span { background: var(--paper); box-shadow: none; width: 7px; height: 7px; }
.tracker .done .dot { background: var(--ink); border-color: var(--ink); }
.tracker .now .dot { background: var(--accent); border-color: var(--accent); box-shadow: none; outline: 2px solid var(--accent); outline-offset: 3px; }
.review { border-color: var(--line-strong); }
.review p { font-size: 1.12rem; letter-spacing: -0.005em; }
.faq summary { font-weight: 700; }
.concept-bar { background: var(--accent); }