/* ============================================================
   HARRIET'S MARKET: visual identity. Site-specific.

   WHO THIS IS FOR
   Black and minority women who make and sell their own products
   (beauty, hair, candles, clothing, jewelry, art, food, kids'
   goods), some already on Etsy or Instagram, some not selling
   yet, looking for a market where they're centered, and the
   shoppers who want to buy from them.

   WHAT THE DESIGN HAS TO SAY
   Warm, proud and grown-up: a well-run market on a good day.
   Celebratory without being cute, and honest that the doors
   aren't open yet.

   SIGNATURES
   A striped market awning across the top of every page, hang-tag
   cards with a punched hole for the ways to get ready, a tag-color
   panel for the rules any marketplace must follow, and clear,
   fully labeled forms with explicit buttons.

   COLOR
   Cream, espresso ink, terracotta buttons, deep teal links and
   shopper actions, plum labels, marigold and terracotta stripes
   as decoration. Every text pair is checked by the build script.

   TYPE
   Yeseva One for headings: elegant, confident, a little dramatic.
   Work Sans for reading: plain, sturdy and very legible.
   ============================================================ */

:root {
  --cream:    #fbf5ec;
  --tag:      #fde9c4;
  --teal-t:   #dff0ee;
  --terra-t:  #f9e3d9;
  --ink:      #2b1d16;
  --soft:     #5e4b40;
  --terra:    #9a3c1b;
  --teal:     #0e5e5a;
  --plum:     #6b2d5c;
  --marigold: #f2b233;
  --line:     #e6d8c4;
  --f-text:   #f4e6d4;

  --accent:     var(--terra);
  --accent-ink: #ffffff;
  --focus:      var(--teal);
  --measure:    66ch;

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

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--cream); }
.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
a:hover { color: var(--ink); text-decoration-thickness: 2.5px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.kicker, .tagline { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 0.5rem; }
.tagline { display: block; font-size: 0.75rem; margin-bottom: 0.2rem; }
.tagline--terra { color: var(--terra); }
.lede { font-size: 1.2rem; color: var(--soft); max-width: 56ch; }
.fine { font-size: 0.9rem; color: var(--soft); margin-top: 0.9rem; }
.source { font-size: 0.8125rem; color: var(--soft); margin-top: auto; padding-top: 0.6rem; overflow-wrap: anywhere; }
.meta { font-size: 0.875rem; color: var(--soft); margin: 0 0 0.2rem; }

.site-header { background: var(--cream); border-bottom: 1px solid var(--line); }
.awning { height: 16px; background: repeating-linear-gradient(90deg, var(--terra) 0 36px, var(--cream) 36px 72px, var(--marigold) 72px 108px, var(--cream) 108px 144px); position: relative; }
.awning::after { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 9px; background: radial-gradient(circle at 18px 0, var(--terra) 8.5px, transparent 9px) 0 0 / 36px 9px repeat-x; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 1rem 0.7rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: 1.55rem; color: var(--ink); text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--terra); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 17ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

.hangtags { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.hangtag { max-width: none; position: relative; background: var(--tag); border: 2px solid var(--ink); border-radius: 6px 6px 18px 18px; padding: 2.4rem 1.2rem 1.1rem; clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); }
.hangtag::before { content: ""; position: absolute; top: 0.85rem; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); }
.hangtag h3 a { color: var(--ink); text-decoration: none; }
.hangtag h3 a::after { content: ""; position: absolute; inset: 0; }
.hangtag h3 a:hover { text-decoration: underline; }
.hangtag:focus-within { outline: 3px solid var(--teal); outline-offset: 3px; }
.hangtag h3 a:focus-visible { outline: none; }

.cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card { max-width: none; background: #ffffff; border: 1px solid var(--line); border-top: 5px solid var(--terra); border-radius: 8px; padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; }
.card.program { border-top-color: var(--teal); }
.cost { font-size: 0.95rem; margin-top: 0.5rem; }
.status { font-size: 0.95rem; margin-top: 0.6rem; background: var(--teal-t); border-radius: 6px; padding: 0.5rem 0.7rem; }
.status .tagline { color: var(--teal); }
.go { margin-top: auto; padding-top: 0.6rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

.panel { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.2rem, 3vw, 1.9rem); max-width: 52rem; }
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.5rem; }
.panel--teal { background: var(--teal-t); border-color: #bfdcd8; }
.panel--tag { background: var(--tag); border-color: #efcf8f; }
.panel--terra { background: var(--terra-t); border-color: #efc4b2; }

.form-panel { max-width: 40rem; }
.stack { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.field { display: grid; gap: 0.35rem; border: 0; margin: 0; padding: 0; }
.field label, .field legend { font-weight: 600; }
.opt { font-weight: 400; color: var(--soft); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field select { min-height: 48px; padding: 0.4rem 0.8rem; border: 2px solid var(--soft); border-radius: 8px; background: #ffffff; font: inherit; color: var(--ink); width: 100%; }
.checks { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.1rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.checks li { margin: 0 !important; }
.checks label { display: flex; gap: 0.6rem; align-items: center; font-weight: 500; min-height: 44px; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; min-height: 44px; padding-top: 0.3rem; }
.checks input, .consent input { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; accent-color: var(--terra); }
.consent input { margin-top: 0.3rem; }
.stack .btn { justify-self: start; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4rem; background: var(--terra); color: #ffffff; border: 2px solid var(--terra); border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn--quiet { background: #ffffff; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--tag); color: var(--ink); }
.btn--teal { background: var(--teal); border-color: var(--teal); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.site-footer { background: var(--ink); color: #ffffff; margin-top: 3rem; padding-block: 2.5rem 3rem; border-top: 8px solid var(--marigold); }
.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.12em; text-transform: uppercase; color: var(--marigold); margin-bottom: 0.5rem; }
.site-footer p { color: var(--f-text); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--marigold); }
.site-footer .fine { color: var(--f-text); margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--marigold); }

@media (forced-colors: active) {
  .awning { display: none; }
  .hangtag { clip-path: none; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
}