/* ============================================================
   MELANATED ART CLUB: visual identity. Site-specific.

   WHO THIS IS FOR
   Black and brown buyers who want art on their walls that looks
   like them, their families and their stories, and people shopping
   for them. Many already know the feeling of walking through a home
   store where no art reflects them. They want to support artists of
   color directly, at a price that works.

   WHAT THE DESIGN HAS TO SAY
   A warm home gallery: rich, proud and lived-in, not a museum and
   not a stock "diversity" page. The artists are the headline; the
   site is the good friend who knows where to find them.

   SIGNATURES
   The same wall planner as its sister site, redrawn in walnut frames
   on a clay wall. A three-thread stripe (mahogany, gold, green) under
   section headings. Gold price tags on espresso.

   COLOR
   Clay wall and warm cream cards, espresso ink, mahogany for buttons
   and links, deep green for labels, gold for tags on espresso.
   Every text pair is checked by the build script.

   TYPE
   Gloock for headings: a high-contrast serif with presence, like a
   gallery title card. Mona Sans for reading: clear and modern, so
   sizes and prices stay easy to scan.
   ============================================================ */

:root {
  --ground:      #f5ebe0;
  --card:        #fffaf4;
  --wall:        #ead9c6;
  --mat:         #fdf8f1;
  --frame:       #5b3a22;
  --ink:         #23160f;
  --ink-soft:    #5a4637;
  --heading:     #2b1a12;
  --link:        #7b2d1a;
  --label:       #1e5040;
  --button:      #7b2d1a;
  --button-hover:#5c2012;
  --button-ink:  #ffffff;
  --tag:         #d6a13d;
  --tag-ink:     #2b1a12;
  --espresso:    #2b1a12;
  --accent-edge: #7b2d1a;
  --picked:      #f6e6d6;
  --line:        #e6d5c3;
  --line-strong: #b89c83;
  --focus:       #1d4ed8;
  --accent:      var(--button);
  --accent-ink:  #ffffff;
  --measure:     66ch;

  --display: 'Gloock', Georgia, 'Times New Roman', serif;
  --body:    'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3 { font-weight: 400; }
.tag, .how li::before, .wall-total, .frame-table th { font-weight: 400; }
.section > h2::after, .threads::after { content: ""; display: block; width: 6.5rem; height: 9px; margin-top: 0.5rem;
  background: linear-gradient(var(--button) 0 3px, var(--tag) 3px 6px, var(--label) 6px 9px); }

.site-header { background: var(--espresso); }
.brand { color: #ffffff; }
.brand .mark { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--tag) 0 33%, #a8452b 0 66%, #3c8a6c 0); }
.site-nav a { color: #ffffff; }
.site-nav a:hover { color: #ffffff; border-bottom-color: #ffffff; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--tag); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--tag); }

.site-footer { background: var(--espresso); color: #ffffff; }
.site-footer h2 { color: var(--tag); }
.site-footer p { color: #efe2d4; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--tag); }
.site-footer .fine { color: #e3d2c1; margin-top: 2rem; }

/* ---- Shared layout for the two art clubs (colors and type come from each site's tokens) ---- */
[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--ground); }
.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; color: var(--heading); }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.kicker { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 54ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }
main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1.25rem; }
.hero h1 { max-width: 16ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.5rem; }

/* Header and nav */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-size: 1.25rem; text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }

/* How it works */
.how { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); counter-reset: how; }
.how li { counter-increment: how; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; max-width: none; }
.how li::before { content: counter(how); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--button); color: var(--button-ink); font-family: var(--display); margin-bottom: 0.5rem; }

/* Budget walls */
.walls { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); margin-top: 1.1rem; }
.wall { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; }
.wall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 0.4rem; }
.tag { display: inline-block; font-family: var(--display); font-size: 1.05rem; line-height: 1; padding: 0.45rem 0.7rem 0.4rem; border-radius: 4px 12px 12px 4px; background: var(--tag); color: var(--tag-ink); }
.wall-art { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; min-height: 11rem; padding: 1.2rem 0.8rem; margin: 0.5rem 0 0.8rem; background: var(--wall); border-radius: 10px; }
.frame { position: relative; box-sizing: border-box; flex: none; border: 5px solid var(--frame); background: var(--mat); padding: 0; overflow: hidden; display: grid; place-items: center; }
.frame span { font-size: 0.6875rem; line-height: 1; white-space: nowrap; color: var(--ink-soft); }
.wall-list { list-style: none; margin: 0; padding: 0; }
.wall-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line-strong); max-width: none; font-size: 0.95rem; }
.wall-list .price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wall-total { display: flex; justify-content: space-between; margin-top: 0.6rem; font-family: var(--display); font-size: 1.15rem; }
.frames-needed { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.3rem; }

/* Artists */
.artists { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); margin-top: 1.1rem; }
.artist { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--accent-edge); border-radius: 14px; padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; }
.platform { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); margin: 0 0 0.3rem; }
.work { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.work h4 { font-family: var(--body); font-size: 1rem; margin: 0 0 0.2rem; }
.sizes { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.sizes th, .sizes td { text-align: left; padding: 0.25rem 0.4rem 0.25rem 0; border-bottom: 1px solid var(--line); }
.sizes th { font-weight: 600; color: var(--ink-soft); }
.go { font-weight: 700; margin-top: auto; padding-top: 0.6rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* Mix your own */
.builder { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; margin-top: 1rem; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pick { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--card); border: 2px solid var(--line); border-radius: 12px; }
.pick label { display: flex; gap: 0.7rem; align-items: flex-start; min-height: 44px; cursor: pointer; }
.pick input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--button); }
.p-name { display: block; font-weight: 700; }
.p-meta { display: block; font-size: 0.875rem; color: var(--ink-soft); }
.p-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.p-controls select { font: inherit; font-size: 0.95rem; min-height: 44px; padding: 0.3rem 0.5rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; color: #111111; }
.p-price { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.pick:has(input:checked) { border-color: var(--button); background: var(--picked); }
@media (max-width: 36rem) { .pick { grid-template-columns: minmax(0, 1fr); } .p-controls { justify-content: flex-start; } }
.tally { position: sticky; top: 1rem; background: var(--card); border: 1px solid var(--line); border-top: 8px solid var(--tag); border-radius: 6px 6px 14px 14px; padding: 1rem 1.1rem; }
.tally dl { margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.tally dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--line-strong); }
.tally dt, .tally dd { margin: 0; }
.tally dd { font-weight: 700; }
.budget { display: grid; gap: 0.3rem; margin-top: 0.4rem; }
.budget select { font: inherit; padding: 0.5rem 0.7rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; color: #111111; }
.verdict { margin-top: 0.7rem; font-weight: 600; }

/* Sizes and frames */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
.frame-table { border-collapse: collapse; min-width: 32rem; background: var(--card); font-variant-numeric: tabular-nums; }
.frame-table th, .frame-table td { text-align: left; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); }
.frame-table th { font-family: var(--display); font-weight: 400; }

/* Buttons, forms, prose */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; background: var(--button); color: var(--button-ink); border: 2px solid var(--button); border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; font-family: var(--body); }
.btn:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--card); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink-soft); border-radius: 10px; background: #ffffff; color: #111111; font: inherit; }
.signup button { justify-self: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.9rem); }

/* Footer */
.site-footer { margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { display: inline-block; padding-block: 0.3rem; }

@media (max-width: 52rem) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .tally { position: static; }
}
@media (forced-colors: active) {
  .how li, .wall, .frame, .artist, .pick, .tally, .btn, .tag, .panel { border: 1px solid; }
}