/* The Rug Registry — editorial, mobile-first.
   Palette is fixed by the logo (plan §7): gold is accent and rule only, never
   body text, because #B08A4E on #F6F1E7 fails contrast. */

:root {
  --indigo: #1e2a47;
  --indigo-90: #2b3858;
  --indigo-70: #5a6480;
  --indigo-45: #8d94a8;
  --gold: #b08a4e;
  --gold-soft: #d9c7a4;
  --ivory: #f6f1e7;
  --ivory-deep: #ece4d6;
  --paper: #fffdf9;
  --ink: #1a1d26;
  --rule: rgba(30, 42, 71, 0.14);

  --serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 68rem;
  --gut: 1.25rem;
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--indigo);
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 46rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--indigo); color: var(--ivory); padding: 0.7rem 1rem; z-index: 99;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- eyebrow / small caps label ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--indigo-70);
  margin: 0 0 0.75rem;
}
.eyebrow--gold { color: #8a6a37; }

/* ---------- header ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); position: relative; }
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 38%, transparent 70%);
}
/* The lockup is ~3.4:1, so sizing it by height inside a shrinking flex row
   squeezed the box to ~68px wide on a phone and the wordmark scaled down with
   it. Below 52em the logo takes its own full-width row and is sized by WIDTH,
   which is the axis that is actually scarce; the nav wraps underneath. */
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding-block: 0.9rem; flex-wrap: wrap; }
.masthead__logo { display: block; line-height: 0; flex: 1 0 100%; }
.masthead__logo img { display: block; width: min(19rem, 78vw); height: auto; max-width: 100%; }
@media (min-width: 52em) {
  .masthead__in { flex-wrap: nowrap; }
  .masthead__logo { flex: 0 0 auto; }
  /* 64px, up from 54px. The compact lockup carries no strapline band, so the
     wordmark itself occupies more of the height and reads larger than the old
     54px full lockup did, without the masthead growing to match. */
  .masthead__logo img { width: auto; height: 64px; }
}

.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; align-items: center; justify-content: flex-start; flex: 1 1 100%; }
@media (min-width: 52em) { .nav { justify-content: flex-end; flex: 0 1 auto; } }
.nav a {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--indigo-90); font-weight: 500; white-space: nowrap;
}
.nav a:hover { color: var(--gold); }
.nav a.cta {
  border: 1px solid var(--gold); padding: 0.45rem 0.9rem; color: var(--indigo);
}
.nav a.cta:hover { background: var(--indigo); color: var(--ivory); border-color: var(--indigo); }

/* ---------- hero ---------- */
.hero { background: var(--indigo); color: var(--ivory); position: relative; overflow: hidden; }
.hero::before {
  /* the octagon from the mark, used as a watermark (plan §7: sparingly) */
  content: ""; position: absolute; right: -8%; top: -30%;
  width: 34rem; height: 34rem; opacity: 0.075;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 252'%3E%3Cpath d='M233.57 170.56 L170.56 233.57 L81.44 233.57 L18.43 170.56 L18.43 81.44 L81.44 18.43 L170.56 18.43 L233.57 81.44 Z' fill='none' stroke='%23F6F1E7' stroke-width='3'/%3E%3Cpath d='M224.87 166.95 L166.95 224.87 L85.05 224.87 L27.13 166.95 L27.13 85.05 L85.05 27.13 L166.95 27.13 L224.87 85.05 Z' fill='none' stroke='%23F6F1E7' stroke-width='1.5'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero__in { padding-block: clamp(2.75rem, 8vw, 5rem); position: relative; }
.hero h1 { color: var(--ivory); max-width: 30ch; }
.hero .eyebrow { color: var(--gold-soft); }
.hero__lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: #d8d3c6; max-width: 56ch; }
.hero__rule { width: 4.5rem; height: 2px; background: var(--gold); margin: 0 0 1.5rem; border: 0; }

/* ---------- search ---------- */
.finder { margin-top: 2rem; max-width: 34rem; }
.finder label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.5rem; }
.finder__row { display: flex; gap: 0; border: 1px solid var(--gold); background: var(--paper); }
.finder input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0.85rem 1rem;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
}
.finder input:focus-visible { outline: none; }
.finder__row:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
#finder-out { margin-top: 0.75rem; background: var(--paper); border: 1px solid var(--rule); }
#finder-out:empty { display: none; }
#finder-out a { display: block; padding: 0.7rem 1rem; text-decoration: none; border-bottom: 1px solid var(--rule); color: var(--indigo); }
#finder-out a:last-child { border-bottom: 0; }
#finder-out a:hover { background: var(--ivory); color: var(--indigo); }
#finder-out .muted { padding: 0.7rem 1rem; color: var(--indigo-70); font-size: 0.9rem; }
#finder-out small { color: var(--indigo-70); }

/* ---------- sections ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.section--ivory-deep { background: var(--ivory-deep); }
.section__head { max-width: 50rem; margin-bottom: 2rem; }

/* octagon divider (plan §7) */
.oct-divider { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; }
.oct-divider::before, .oct-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }
.oct-divider span {
  width: 12px; height: 12px; flex: none; border: 1.5px solid var(--gold);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* ---------- grids / cards ---------- */
.grid { display: grid; gap: 1rem; }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--paper); border: 1px solid var(--rule); padding: 1.25rem 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.card h3 { margin-bottom: 0.25rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--gold); }
.card__meta { font-size: 0.85rem; color: var(--indigo-70); }
.card__note { font-size: 0.94rem; color: #3a3f4d; margin-top: 0.5rem; }

/* metro / state link lists */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 40em) { .linklist { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
@media (min-width: 58em) { .linklist { grid-template-columns: repeat(3, 1fr); } }
.linklist li { border-bottom: 1px solid var(--rule); }
.linklist a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; text-decoration: none; }
.linklist a:hover { color: var(--gold); }
.linklist .n { color: var(--indigo-45); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ---------- badges / pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border: 1px solid var(--rule); color: var(--indigo-90);
  background: var(--ivory); text-decoration: none;
}
.pill--verified { border-color: var(--gold); background: #fbf6ec; color: #6d5325; }
.pill--repair { border-color: var(--indigo); background: var(--indigo); color: var(--ivory); }
.pill--listed { color: var(--indigo-70); }
.pill__oct {
  width: 9px; height: 9px; flex: none; background: var(--gold);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.pill--repair .pill__oct { background: var(--gold-soft); }
.pill--listed .pill__oct { background: var(--indigo-45); }

/* ---------- listing rows (metro page) ---------- */
.listing {
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  padding: 1.35rem 1.25rem; margin-bottom: 1rem;
}
.listing--listed { border-left-color: var(--indigo-45); }
.listing__top { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; }
.listing h3 { margin: 0 0 0.2rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.listing h3 a { text-decoration: none; }
.listing__addr { font-size: 0.9rem; color: var(--indigo-70); margin: 0 0 0.7rem; }
.listing__desc { margin: 0.6rem 0 0.9rem; }
.listing__svc { list-style: none; padding: 0; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.listing__svc li {
  font-size: 0.76rem; letter-spacing: 0.04em; padding: 0.22rem 0.5rem;
  background: var(--ivory); border: 1px solid var(--rule); color: var(--indigo-90);
}
.listing__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; font-size: 0.9rem; }
.listing__actions .tel { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.8rem 1.4rem; border: 1px solid var(--indigo); background: var(--indigo); color: var(--ivory);
  cursor: pointer;
}
.btn:hover { background: var(--indigo-90); color: var(--ivory); }
.btn--ghost { background: transparent; color: var(--indigo); }
.btn--ghost:hover { background: var(--indigo); color: var(--ivory); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #2a2008; }
.btn--gold:hover { background: #9c7840; border-color: #9c7840; color: #fff; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- prose (guides, policy pages) ---------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose blockquote {
  margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-size: 1.2rem; color: var(--indigo-90);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.94rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo-70); }
.prose code { font-size: 0.9em; background: var(--ivory-deep); padding: 0.1em 0.35em; }
.prose .lede { font-size: 1.1rem; color: #3a3f4d; }

.callout {
  background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  padding: 1.1rem 1.2rem; margin: 1.8em 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h4 { margin-bottom: 0.4em; }

/* ---------- tables: evidence + services ---------- */
.evidence { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.evidence th, .evidence td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.evidence th { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo-70); white-space: nowrap; }
.evidence td:first-child { white-space: nowrap; font-weight: 500; }
.svc-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 1.5rem; }
@media (min-width: 34em) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-grid li { display: flex; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-size: 0.94rem; }
.svc-grid .mark { width: 1.1rem; flex: none; text-align: center; }
.svc-grid .yes .mark { color: #6d5325; }
.svc-grid .no { color: var(--indigo-45); }
.svc-grid .unk { color: var(--indigo-45); }

/* ---------- forms ---------- */
.form { max-width: 34rem; }
.form .field { margin-bottom: 1.15rem; }
.form label { display: block; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--indigo-70); margin-bottom: 0.4rem; font-weight: 500; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"],
.form input[type="number"], .form select, .form textarea {
  width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--rule); background: var(--paper);
  font-family: var(--sans); font-size: 1rem; color: var(--ink); border-radius: 0;
}
.form textarea { min-height: 7rem; resize: vertical; }
.form .row { display: grid; gap: 1.15rem; }
@media (min-width: 34em) { .form .row--2 { grid-template-columns: 1fr 1fr; } }
.form .hint { font-size: 0.82rem; color: var(--indigo-70); margin: 0.35rem 0 0; text-transform: none; letter-spacing: 0; }
.form .hp { position: absolute; left: -9999px; }
.form__status { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); background: var(--paper); font-size: 0.94rem; }
.form__status:empty { display: none; }
.form__status.ok { border-color: var(--gold); background: #fbf6ec; }
.form__status.err { border-color: #a4403a; background: #fdf2f1; }
fieldset { border: 1px solid var(--rule); padding: 1rem; margin: 0 0 1.15rem; }
legend { font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--indigo-70); padding-inline: 0.4rem; }
.check { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.95rem; }
.check input { margin-top: 0.3rem; }
.check label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink); margin: 0; }

/* ---------- breadcrumb ---------- */
.crumbs { font-size: 0.8rem; color: var(--indigo-70); padding-block: 1rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.crumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--indigo-45); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1rem 0; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 600; color: var(--indigo); list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--sans); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .faq__a { padding: 0 0 1.1rem; max-width: 42rem; }

/* ---------- badge kit ---------- */
.badge-previews { display: grid; gap: 1rem; }
@media (min-width: 40em) { .badge-previews { grid-template-columns: repeat(2, 1fr); } }
.badge-preview { border: 1px solid var(--rule); padding: 1.25rem; text-align: center; }
.badge-preview.light { background: var(--paper); }
.badge-preview.dark { background: var(--indigo); }
.badge-preview .cap { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.9rem; color: var(--indigo-70); }
.badge-preview.dark .cap { color: var(--gold-soft); }
pre.embed {
  background: var(--indigo); color: #e4e0d4; padding: 1rem; overflow-x: auto;
  font-size: 0.8rem; line-height: 1.5; border-left: 3px solid var(--gold); margin: 0 0 1rem;
}
pre.embed code { background: none; color: inherit; }

/* ---------- footer ---------- */
.footer { background: var(--indigo); color: #cfcabd; padding-block: 2.75rem 2rem; margin-top: 0; }
.footer a { color: var(--ivory); text-decoration: none; }
.footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 46em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
/* Stacked mark is 667x565; sized by width for the same reason as the header. */
.footer__logo img { display: block; width: min(11.5rem, 46vw); height: auto; }
@media (min-width: 46em) { .footer__logo img { width: 9.5rem; } }
.footer h4 { color: var(--ivory); font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.9rem; font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.footer__legal {
  margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(246, 241, 231, 0.16);
  font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: space-between;
}
.footer__blurb { font-size: 0.92rem; max-width: 34ch; margin-top: 0.9rem; }

.muted { color: var(--indigo-70); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.unpub { background: #fdf2f1; border: 1px solid #a4403a; padding: 0.8rem 1rem; font-size: 0.9rem; margin-bottom: 1.5rem; }