/* ==================================================================
   furniture-foshan.com  ::  design system "Floor Directory"

   The site is built like a market floor directory, because that is
   what it is. Ruled rows, hall numbers set in mono, hairline rules,
   no drop shadows, no floating cards, almost no corner radius.
   Warm paper ground because every furniture showroom in Lecong is
   lit warm and a cold grey site looks wrong next to the photos.

   Do NOT reintroduce: dark hero + amber accent + rounded cards with
   icon tiles. That is the template look every competitor already has.
   ================================================================== */

/* Fonts are loaded from a <link> in the head, never an @import here.
   An @import serialises the request behind this file and delays first
   paint, which Core Web Vitals now charges real traffic for. */

:root {
  --paper:      #f6f3ec;
  --paper-2:    #efeae0;
  --ink:        #171512;
  --ink-2:      #4a4540;
  --ink-3:      #7d766d;
  --rule:       #d8d1c4;
  --rule-2:     #c2b9a8;
  --celadon:    #2f6b56;
  --celadon-lo: #e3ece8;
  --brass:      #a8763a;

  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 2px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

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

a { color: var(--celadon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 600; margin-top: 1.8em; }
p  { margin: 0 0 1.15em; max-width: 68ch; }

/* ---- the mono label. Used for anything that is data, never prose --- */
.label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 74ch; }

/* ---------------- identification strip + masthead ------------------ */
.idstrip {
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  padding: 7px 0;
}
.idstrip .wrap { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; }
.idstrip a { color: var(--paper-2); }

.masthead { border-bottom: 1px solid var(--rule-2); background: var(--paper); }
.masthead .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.035em; color: var(--ink); text-decoration: none; }
/* Three ruled bars, the middle one brass: a market floor directory, and
   the same shape as the price minus in the wordmark. */
.brandmark { width: 28px; height: 28px; flex: none; display: block; }
.brandtext i { font-style: normal; color: var(--brass); padding: 0 .04em; }
.brandtext em { font-style: normal; font-weight: 600; font-size: .78em; color: var(--ink-3); }
.nav { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--display); font-size: .95rem; font-weight: 600; }
.nav a { color: var(--ink-2); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--celadon); }

/* ---------------------------- hero --------------------------------- */
.hero { border-bottom: 1px solid var(--rule); padding: clamp(40px, 7vw, 78px) 0 clamp(34px, 5vw, 56px); }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.28rem); color: var(--ink-2); max-width: 60ch; }
.hero .label { display: block; margin-bottom: 1.1rem; }

/* ------------------- ruled rows: the core pattern ------------------ */
.rows { border-top: 1px solid var(--rule-2); margin: 2rem 0; }
.row {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 1.4rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.row:hover { background: var(--paper-2); }
.row .no { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); padding-top: .35rem; }
.row h3 { margin: 0 0 .2rem; font-size: 1.12rem; font-weight: 600; font-family: var(--display); }
.row p { margin: 0; font-size: .94rem; color: var(--ink-2); max-width: 62ch; }
.row .tier { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--celadon); white-space: nowrap; padding-top: .4rem; }

/* ---------------------------- grid --------------------------------- */
.grid { display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
@media (min-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.grid > .cell { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .grid.cols-2 > .cell:nth-child(2n) , .grid.cols-3 > .cell:not(:nth-child(3n+1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); } }
.cell h3 { margin-top: 0; }
.cell p:last-child { margin-bottom: 0; }

/* --------------------------- callout ------------------------------- */
.note {
  border-left: 3px solid var(--celadon);
  background: var(--celadon-lo);
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  border-radius: var(--r);
}
.note p:last-child { margin-bottom: 0; }
.note .label { color: var(--celadon); }

.unverified {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-3);
  border: 1px dashed var(--rule-2);
  padding: .15rem .45rem;
  border-radius: var(--r);
}

/* ----------------------------- FAQ --------------------------------- */
.faq { border-top: 1px solid var(--rule-2); margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.faq summary { font-family: var(--display); font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--celadon); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: .9rem 0 0; font-size: .96rem; }

/* ----------------------------- CTA --------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .98rem;
  padding: .7rem 1.4rem;
  border-radius: var(--r);
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn:hover { background: var(--celadon); border-color: var(--celadon); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* --------------------------- footer -------------------------------- */
.foot { border-top: 1px solid var(--rule-2); margin-top: 4rem; padding: 2.5rem 0 3rem; font-size: .92rem; }
.foot .cols { display: grid; gap: 2rem; }
@media (min-width: 720px) { .foot .cols { grid-template-columns: 2fr 1fr 1fr; } }
.foot h4 { font-family: var(--display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--celadon); text-decoration: underline; }
.legal { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

/* ------------------------- breadcrumbs ----------------------------- */
.crumbs { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); padding: 1rem 0 0; }
.crumbs a { color: var(--ink-3); }

/* -------------------------- long form ------------------------------ */
.prose h2 { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.prose ul, .prose ol { max-width: 66ch; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; }
.tablewrap { overflow-x: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 99; }

/* ---- publisher service module. Positive, disclosed, not sitewide ---- */
.service { border: 1px solid var(--rule-2); border-left: 3px solid var(--celadon);
  background: var(--paper-2); padding: 1.4rem 1.5rem; margin: 2.4rem 0; border-radius: var(--r); }
.service .blurb { font-size: 1.02rem; margin: .5rem 0 1rem; max-width: 58ch; }
.service .disclose { font-size: .82rem; color: var(--ink-3); margin: 1rem 0 0; }