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

   WHO THIS IS FOR
   People with a bare wall and a real budget: first apartments,
   dorm rooms, new homes, anyone who wants original art from actual
   artists instead of the same mass-market print everyone has.
   Galleries feel out of reach; big-box art feels like nobody.

   WHAT THE DESIGN HAS TO SAY
   A zine for a very good flea market. Loud, friendly, handmade
   energy on a clean gallery wall, and money shown plainly so a $50
   wall feels as legit as a $500 one.

   SIGNATURES
   The wall planner: frames drawn to scale in real print sizes, black
   frames with mats, labeled with the artist and title. Yellow price
   tags like sticker labels. Numbered "how it works" dots.

   COLOR
   Gallery-white wall, ink black, cobalt for buttons and links, a
   tomato red for labels, sticker yellow for price tags. Every text
   pair is checked by the build script.

   TYPE
   Unbounded for headings: wide, bold, a little playful. Albert Sans
   for reading: clean and even at small sizes, so sizes and prices
   stay easy to scan.
   ============================================================ */

:root {
  --ground:      #fbfaf6;
  --card:        #ffffff;
  --wall:        #efece4;
  --mat:         #fdfcf9;
  --frame:       #1b1b1b;
  --ink:         #141414;
  --ink-soft:    #52525b;
  --heading:     #141414;
  --link:        #2437c9;
  --label:       #b8341b;
  --button:      #2437c9;
  --button-hover:#1a2896;
  --button-ink:  #ffffff;
  --tag:         #ffd23f;
  --tag-ink:     #141414;
  --accent-edge: #2437c9;
  --picked:      #eef0fd;
  --line:        #e6e3db;
  --line-strong: #b9b5ab;
  --focus:       #b8341b;
  --accent:      var(--button);
  --accent-ink:  #ffffff;
  --measure:     66ch;

  --display: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1 { font-weight: 800; letter-spacing: -0.02em; }
h2, h3 { font-weight: 700; }
.tag, .how li::before, .wall-total, .frame-table th { font-weight: 700; }

.site-header { background: var(--ink); }
.brand { color: #ffffff; font-weight: 800; }
.brand .mark { width: 22px; height: 22px; background: var(--tag); border-radius: 4px 10px 10px 4px; }
.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); }

.hero h1 span { background: var(--tag); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.site-footer { background: var(--ink); color: #ffffff; }
.site-footer h2 { color: var(--tag); }
.site-footer p { color: #e4e4e7; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--tag); }
.site-footer .fine { color: #d4d4d8; 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; }
}