/* Interiors Upholstery, LLC — atelier warm (synthesis of design panel d1,
   with d2's answer-first hero + specs ledger and d3's gallery seam + print block)
   Leather, tan, cream. Serif display over sans body. Stitch-line motifs on
   DECORATIVE elements only — never on interactive controls.
   No external requests: system font stacks only. */

:root {
  color-scheme: light;

  --cream:      #faf6ef;
  --paper:      #fffdf8;
  --ink:        #33241a;
  --ink-soft:   #5e4632;
  --leather:    #8a4b22;
  --leather-dk: #6d3a19;
  --tan:        #e2d2ba;
  --tan-soft:   #efe4d1;
  --hide:       #2e2018;
  --hide-ink:   #f3e8d8;
  --hide-soft:  #c9b49a;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 68rem;
  --pad: 1.25rem;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--leather-dk); }
a:hover { color: var(--leather); }

:focus-visible {
  outline: 3px solid var(--leather);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hide);
  color: var(--hide-ink);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
/* No one-word last lines ("welcome." alone under the band's email note). Ignored where unsupported. */
p, dd { text-wrap: pretty; }

h1 {
  font-size: clamp(1.9rem, 6.8vw, 3.2rem);
  line-height: 1.1;
  max-width: 24ch;
}

.h1-loc {
  display: block;
  color: var(--leather-dk);
}

h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.15rem);
  line-height: 1.15;
  max-width: 22ch;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leather-dk);
  margin: 0 0 0.7rem;
}

.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.section-lead {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 2rem;
}

/* ---------- header ---------- */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--tan);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--leather-dk);
  margin-right: auto;
}

.mark { width: 38px; height: 38px; flex: none; }

.brand-text { display: block; line-height: 1.2; }

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
}

.brand-sub {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.9rem;
  font-size: 0.95rem;
}

/* inline-block + generous padding-block = >=44px tap targets */
.site-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.65rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover {
  color: var(--leather-dk);
  border-bottom-color: var(--leather);
}

.site-nav .nav-call {
  font-weight: 700;
  color: var(--leather-dk);
}

/* Below 26em the four nav links cannot share one row: measured 2026-09-13 at 320px and 375px the
   number wrapped onto a row of its own and the header took 174px of an 812px screen. At those
   widths the fixed call bar (visible below 46em) and the hero's call button carry the same number. */
.site-nav .nav-call { display: none; }
@media (min-width: 26em) { .site-nav .nav-call { display: inline-block; } }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(2rem, 6vw, 3.5rem); }

.hero-inner { max-width: 54rem; }

.cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.6rem 0 0;
}
.cta-row .btn { width: 100%; }

.hero-note {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* hero specs ledger (transplant: d2) — dashed rules are decorative */
.specs {
  list-style: none;
  margin: clamp(1.8rem, 5vw, 2.6rem) 0 0;
  padding: 0;
  max-width: 36rem;
  border-top: 1px dashed var(--tan);
}
.specs li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--tan);
}
.specs-k {
  flex: none;
  width: min(11.5rem, 100%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leather-dk);
  padding-top: 0.15rem;
}
.specs-v { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- buttons (solid borders only — dashed reads as disabled) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--leather);
  color: #fff9f1;
  border-color: var(--leather);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 241, 0.28);
}
.btn-primary:hover { background: var(--leather-dk); border-color: var(--leather-dk); color: #fff9f1; }

.btn-ghost {
  background: transparent;
  color: var(--leather-dk);
  border: 2px solid var(--leather);
}
.btn-ghost:hover { background: var(--tan-soft); color: var(--leather-dk); }

.btn-light {
  background: var(--hide-ink);
  color: var(--hide);
  border-color: var(--hide-ink);
}
.btn-light:hover { background: #fff; color: var(--hide); }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- stitch rule ---------- */

.stitch-rule {
  height: 2px;
  margin-inline: var(--pad);
  background-image: repeating-linear-gradient(
    90deg,
    var(--tan) 0 11px,
    transparent 11px 19px
  );
}

/* ---------- sections + cards ---------- */

.section { padding-block: clamp(2.75rem, 8vw, 4.75rem); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--tan);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
}

.card > * { position: relative; }

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* inset stitch on cards: desktop decoration only — visual noise on a phone column */
@media (min-width: 40em) {
  .card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--tan);
    border-radius: calc(var(--radius) - 4px);
    pointer-events: none;
  }
}

/* ---------- gallery (transplant: d3 — ready for photos; unused until #work exists) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.gallery figure { margin: 0; }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--tan);
}
.gallery figcaption { margin-top: 0.4rem; font-size: 0.875rem; color: var(--ink-soft); }

/* ---------- manufacturing band ---------- */

.band {
  background: var(--hide);
  color: var(--hide-ink);
}

.band h2, .band h3 { color: var(--hide-ink); }
.band .eyebrow { color: #e0b98f; }
.band .section-lead { color: var(--hide-soft); }

.band .card {
  background: rgba(255, 253, 248, 0.045);
  border-color: rgba(226, 210, 186, 0.34);
}
.band .card::after { border-color: rgba(226, 210, 186, 0.28); }
.band .card p { color: var(--hide-soft); }

.band :focus-visible { outline-color: #e0b98f; }

.band-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  margin: 2rem 0 0;
}

.band-cta-note {
  color: var(--hide-soft);
  font-size: 0.95rem;
  max-width: 34rem;
}

.band-link { color: #e0b98f; overflow-wrap: anywhere; }
.band-link:hover { color: var(--hide-ink); }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  gap: 1.25rem;
}
/* A grid item's min-width is its longest unbreakable word (the email address) unless told otherwise. */
.contact-grid > * { min-width: 0; }

.contact-primary { padding: 1.75rem 1.5rem; }

.contact-primary .cta-row { margin-top: 1.25rem; }

/* The label and the big number are <p>s inside a .card, and `.card p` (0,1,1) outranked their
   single-class rules (0,1,0): measured 2026-09-13 at 375px, the number rendered at 15.68px in
   the soft ink, the label at 15.68px with no gap. Qualified by the block they live in. */
.contact-primary .contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}

.contact-primary .contact-number {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6.5vw, 2.35rem);
  line-height: 1.1;
  margin: 0;
}
.contact-number a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tan);
  text-underline-offset: 0.14em;
}
.contact-number a:hover { color: var(--leather-dk); text-decoration-color: var(--leather); }

.contact-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.contact-row {
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--tan);
  word-break: break-word;
}
.contact-row:last-child { border-bottom: 0; padding-bottom: 0; }

.contact-row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.2rem;
}
.contact-row dd { margin: 0; }
.dd-note { display: block; color: var(--ink-soft); }
.contact-row a { color: var(--leather-dk); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 2px dashed var(--tan);
  background: var(--cream);
  padding-block: 2.5rem 3rem;
}

.footer-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
}

.footer-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  font-size: 0.95rem;
}
.footer-links a { display: inline-block; padding-block: 0.35rem; }

/* ---------- large text ----------
   Measured 2026-09-13 at 375px with the root font doubled (Android text scaling, browser zoom): the
   page scrolled sideways to 466px. The spec labels had a fixed 11.5rem width, the contact grid's
   columns could not shrink below the email address, the band's email could not wrap, and the call
   bar's buttons could not shrink. An address wider than its column now breaks rather than overflows. */
.contact-row a { overflow-wrap: anywhere; }
/* A phone number may wrap at its space, never at its hyphen: at 150% text "581-" and "6223" landed on
   separate lines. */
.nowrap { white-space: nowrap; }

/* ---------- tap targets ----------
   Every link a thumb aims at is at least 44px tall. Measured 2026-09-13 at 375px on the
   live page: brand link 38px, the band's email link 20px, the big contact number 23px,
   the contact list's email and Instagram 22px, footer links 36px (8 of 20 controls).
   Same shape as psc-collab round 60: inline-flex + min-height grows the target, the
   words stay where they were. Placed AFTER every rule it overrides; print resets it. */
.brand { min-height: 2.75rem; }
.band-link, .contact-number a, .contact-row a, .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
}

/* ---------- mobile call bar (dark bar for hard separation from the cream page) ---------- */

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--hide);
  border-top: 1px solid rgba(226, 210, 186, 0.35);
  box-shadow: 0 -6px 18px rgba(51, 36, 26, 0.28);
  z-index: 40;
}

.callbar-btn {
  flex: 1;
  min-width: 0;
  padding-inline: 0.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: var(--radius);
  border: 2px solid var(--hide-ink);
  background: var(--hide-ink);
  color: var(--hide);
  font-weight: 700;
  text-decoration: none;
}

.callbar-primary {
  background: var(--leather);
  border-color: var(--leather);
  color: #fff9f1;
}

.callbar :focus-visible { outline-color: #e0b98f; }

body { padding-bottom: 4.9rem; }

/* The fixed bar covers the bottom 68px. Measured 2026-09-13 at 375px: a focus or anchor scroll to
   the NEAREST edge (Safari and Firefox tab order) left 10 of 17 links under the bar. scroll-padding
   makes every browser-initiated scroll stop above it. */
html { scroll-padding-bottom: 5rem; }

/* ---------- responsive ---------- */

@media (min-width: 34em) {
  .grid { gap: 1.15rem; }
  .cta-row { flex-direction: row; flex-wrap: wrap; }
  .cta-row .btn { width: auto; }
}

@media (min-width: 46em) {
  html { scroll-padding-bottom: 0; }
  body { font-size: 1.09375rem; padding-bottom: 0; }
  .callbar { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* An odd last card fills its row instead of leaving a hole beside it (services: 5 cards). */
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1.05fr 1fr; gap: 2rem; }
  /* The phone card keeps its own height; stretched to the contact list it showed an empty block. */
  .contact-primary { align-self: start; }
  .contact-list { padding-top: 0.25rem; }
}

@media (min-width: 62em) {
  :root { --pad: 2rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards-tight { grid-template-columns: repeat(2, 1fr); }
  .cards > :last-child:nth-child(odd) { grid-column: auto; }
  /* Exactly five cards: 3 over 2 on a six-track grid, the bottom two widened so the rows end flush.
     Any other count, or a browser without :has(), falls back to plain thirds. */
  .cards:not(.cards-tight):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .cards:not(.cards-tight):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .cards:not(.cards-tight):has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  .card { padding: 1.9rem 1.7rem; }
}

/* ---------- print (transplant: d3) ---------- */

@media print {
  .callbar, .site-nav, .skip { display: none; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .band { background: #fff; color: #000; }
  .band h2, .band h3, .band .eyebrow, .band .section-lead, .band .card p,
  .band-cta-note, .band-link { color: #000; }
  .band .card { background: #fff; border-color: #999; }
  .band-link, .contact-number a, .contact-row a, .footer-links a { display: inline; min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a, .contact-number a { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}