/* THE ARTIST COLONNADE - one small stylesheet for every page. */

:root {
  /* One deliberate theme: black with white lettering and gold accents,
     matching the demos and artist sites (public/kitd-theme.css) - site
     owner, 2026-10 (it was cream and maroon before). color-scheme: dark
     keeps a browser's "force dark" from re-inverting it. */
  color-scheme: dark;
  --ink: #f2f2f2;
  --muted: #b5b5b5;
  --line: #333;
  --bg: #0a0a0a;
  --card: #141414;
  --accent: #e8c766;
  --gold: #d4af37;
  --gold-glow: rgba(212, 175, 55, 0.6);
  --ok: #6fcf8f;
  --warn: #e8b04a;
  --danger: #ff8a80;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

a { color: var(--accent); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Header + sub-banner (when present) freeze together at the top of the
   viewport as the page scrolls - like freezing rows in a spreadsheet. */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 20;
}

header.site {
  border-bottom: 1px solid var(--line);
  background: #000;
}
header.site .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
header.site .brand {
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

/* Renders any BRAND_SUFFIX (src/html.js) at ~half the size of the name it
   follows, wherever brandMark() is rendered (header, footer, admin hub).
   Currently unused - BRAND_SUFFIX is '' - but left in place in case a
   suffix comes back. */
.brand-sub {
  font-size: 0.5em;
  margin-left: 0.3em;
  letter-spacing: inherit;
}
header.site nav a { margin-left: 18px; text-decoration: none; }
header.site .city { color: var(--muted); font-style: italic; }

.sub-banner {
  background: #000;
  border-bottom: 1px solid var(--line);
}
.sub-banner .wrap { padding-top: 14px; padding-bottom: 14px; }

/* Art Scene only: centered heading, frozen with the header via .sticky-top
   (see the "Header + sub-banner" rule above - this content sits inside it,
   so it's already sticky; this just centers the text within that band).
   Black band + white lettering, every city and the regional hub alike -
   :has() scopes it so the generic sub-banner (Home, National Showcase)
   is untouched. Specificity (two classes, not one) beats .sub-banner h1
   below regardless of source order. */
.art-scene-heading { text-align: center; }
.sub-banner:has(.art-scene-heading) {
  background: #000;
  border-bottom-color: #000;
}
.sub-banner .art-scene-heading h1,
.sub-banner .art-scene-heading .sub-note {
  color: #fff;
}
.sub-banner h1 {
  margin: 0;
  font-size: 1.15rem;
  color: #fff;
}

main.wrap { padding-top: 32px; padding-bottom: 64px; }

h1 { font-weight: normal; letter-spacing: 0.02em; }
h2.category, h3.category {
  margin-top: 44px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
  margin-top: 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
/* Only the title is a link; this stretches it over the whole card so the
   card stays clickable without its photo, artist, badges and price all
   becoming part of the link's text. */
.card .card-link { display: block; color: inherit; text-decoration: none; }
.card .card-link::after { content: ""; position: absolute; inset: 0; }
.card:hover .card-link { text-decoration: underline; }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.card .card-link:focus { outline: none; }
.card img { width: 100%; height: 230px; object-fit: cover; display: block; background: #1c1c1c; }
.card .body { padding: 12px 14px 16px; }
.card .t { font-size: 1.05rem; }
.card .a { color: var(--muted); font-size: 0.9rem; }
.card .p { margin-top: 6px; }

/* Neutral, factual label (design origin) - not a warning. Muted gold. */
.badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--card);
}
.badge.origin { border-color: #8f7a3a; color: #e8c766; }
/* Origin-city marker on the National Showcase - identity is never lost. */
.badge.city { border-color: #5c7894; color: #b9d0e6; }
/* How the piece reaches a buyer. */
.badge.fulfillment { border-color: #5f7d58; color: #c2dcbb; }
.detail .badge { margin: 4px 0 14px; }
.detail .delivery-note { margin: 6px 0 14px; }

/* Showcase cards can carry both a city badge and an origin badge. */
.card .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.card .badges .badge { margin-top: 8px; }

/* Second line under the showcase sub-banner heading. */
.sub-banner .sub-note { margin: 4px 0 0; font-size: 0.85rem; color: #fff; }

/* Home page: what the site is, above the National Showcase. */
.home-intro { max-width: 720px; font-size: 1.05rem; line-height: 1.6; margin: 0 0 8px; }
main .sub-note { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }

/* Art Scene: a venue's street address, under its name. */
.event-address { color: var(--muted); font-size: 0.9rem; }

/* Art Scene: dated event list. */
.event { padding: 18px 0; border-bottom: 1px solid var(--line); max-width: 620px; }
.event:first-of-type { padding-top: 6px; }

/* Responsive event grid. CSS multi-column, not CSS grid: it packs cards by
   column so uneven card heights (poster + long text vs. name + date only)
   don't leave ragged row gaps, and it needs no JS. column-count is a
   maximum, so with a 300px column-width it lays out 3 wide on desktop, then
   2, then 1 as the container narrows. DOM order stays date order, so screen
   readers are unaffected. */
.event-grid { columns: 300px 3; column-gap: 22px; }
.event-grid > .event {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  max-width: none;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
}
.event-grid > .event:first-of-type { padding-top: 16px; }
/* The live-listing link in an emailed event's auto-reply lands on #event-<id>. */
.event:target { outline: 2px solid var(--accent); outline-offset: 2px; scroll-margin-top: 16px; }
.event h3 { margin: 2px 0 4px; }
.event p { margin: 2px 0; }
.event .event-date {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent);
}
.event .event-where { color: var(--muted); }
.event .event-tickets { margin-top: 4px; font-size: 0.95rem; }
.event .event-meta { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
/* Optional poster/flyer, above the listing text. Events with no image are
   unaffected - this rule only matches when an <img> is present. */
.event .event-poster {
  display: block; width: 100%; max-width: 340px; height: auto;
  border: 1px solid var(--line); border-radius: 3px; margin: 0 0 10px;
}
.art-scene-more { margin-top: 24px; }

/* Link between a city board and its regional hub, and the origin-city badge
   the hub puts on each event. */
.art-scene-region { margin: 0 0 22px; font-size: 0.95rem; }
.event .event-city { margin: 2px 0 4px; }
.event .event-city .badge { margin-top: 0; }
.region-cities {
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 0.9rem;
}
.region-cities p { margin: 0 0 6px; color: var(--muted); }
.region-cities ul { margin: 0; padding-left: 18px; }
.region-cities li { margin: 3px 0; }

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.detail img { width: 100%; height: auto; border: 1px solid var(--line); background: #1c1c1c; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } }

form.stack { display: grid; gap: 16px; max-width: 560px; }
form.stack label { display: grid; gap: 4px; }
label .hint { color: var(--muted); font-size: 0.85rem; }
input, select, textarea, button {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid #555;
  background: #141414;
  color: var(--ink);
  border-radius: 3px;
}
textarea { min-height: 90px; resize: vertical; }

/* Date fields: render the native calendar picker (popup + icon + segment
   text) in dark mode so it's legible, and match the field to it. */
input.dt {
  color-scheme: dark;
  background: #26241f;
  color: #f5f2ea;
  border-color: #4a463d;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }
.hp { position: absolute; left: -9999px; }  /* honeypot */

/* Radio-group field (e.g. "Origin of the design"). */
fieldset.choice { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; display: grid; gap: 10px; }
fieldset.choice legend { padding: 0 6px; font-weight: bold; }
fieldset.choice > .hint { margin-bottom: 2px; }
fieldset.choice label.radio { display: flex; gap: 10px; align-items: start; }
fieldset.choice label.radio input { width: auto; margin-top: 4px; padding: 0; }
fieldset.choice label.radio .hint { display: block; }

/* Art Scene cross-posting: "Also show this event in ..." checkbox group. */
fieldset.crosspost { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; display: grid; gap: 8px; }
fieldset.crosspost legend { padding: 0 6px; font-weight: bold; }
fieldset.crosspost .hint { margin: 0 0 2px; }
label.cp-opt { display: flex; gap: 8px; align-items: center; }
label.cp-opt input { width: auto; padding: 0; }

/* Gold-outlined, like .gold-btn on the demos. */
button, .btn {
  cursor: pointer;
  background: #000;
  color: #fff;
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 9px 16px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 0 6px var(--gold-glow);
}
button:hover, .btn:hover { box-shadow: 0 0 12px var(--gold-glow); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: #666; box-shadow: none; }

/* Admin hub link list. */
.hub-link { margin: 0 0 14px; }
.hub-link a { font-weight: bold; }
.hub-link .hint { display: block; }

/* Art Scene admin: Edit (a <details>) sits next to Delete. */
.event-actions { margin-top: 10px; }
.event-actions details { margin-bottom: 8px; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
button.approve { background: #1f6b3a; border-color: var(--ok); }
button.reject { background: #7a1f1f; border-color: var(--danger); }

.notice { padding: 12px 16px; border: 1px solid var(--line); background: var(--card); }
.error { border-color: var(--danger); color: var(--danger); }
.notice.success { border-color: var(--ok); color: var(--ok); }
.empty { color: var(--muted); font-style: italic; }

/* Admin */
.admin-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.admin-item img { width: 200px; height: 200px; object-fit: cover; border: 1px solid var(--line); }
.admin-item .meta { color: var(--muted); font-size: 0.9rem; }
.tag { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border: 1px solid var(--line); }
.tag.pending { color: var(--warn); }
.tag.active, .tag.approved { color: var(--ok); }
.tag.rejected { color: var(--accent); }
.tabs { margin: 20px 0; }
.tabs a { margin-right: 16px; text-decoration: none; }
.tabs a.on { font-weight: bold; text-decoration: underline; }
@media (max-width: 640px) {
  .admin-item { grid-template-columns: 1fr; }
  .admin-item img { width: 100%; height: auto; }
}

footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; background: #000; }
footer.site .wrap { padding: 24px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-dmca { padding: 3px 10px; font-size: 0.8rem; border-color: #555; color: var(--muted); box-shadow: none; }

/* City landing page: "Websites for artists" (home.js websitesForArtistsHtml)
   and /faq (faq.js), site owner 2026-10. */
.sell {
  margin: 22px 0 40px;
  padding-bottom: 32px;
  scroll-margin-top: 140px;
  border-bottom: 1px solid var(--gold);
  color: #fff;
}
.sell-btns { margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.sell-lead, .plan-card p { color: #fff; }
.sell h2.category { margin-top: 0; color: #d4af37; border-bottom-color: #3a3324; }
.sell-lead { max-width: 760px; font-size: 1.05rem; line-height: 1.6; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 20px;
}
.plan-card {
  background: #2b2b2b; border: 1px solid #d4af37; border-radius: 8px;
  padding: 18px 20px; display: flex; flex-direction: column;
}
.plan-card h3 { margin: 0 0 6px; font-weight: normal; font-size: 1.3rem; color: #fff; }
.plan-card .plan-price { margin: 0 0 8px; font-weight: bold; color: #fff; }
.plan-card p { margin: 0 0 10px; }
.plan-card .plan-btns { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.sell-more { margin: 22px 0 0; color: #cfcfcf; }
.sell a:not(.gold) { color: var(--accent); }

/* Gold-outlined button, the same look as .gold-btn on the demos. */
a.gold {
  display: inline-block; padding: 10px 18px; color: #fff; background: #000;
  border: 2px solid #d4af37; border-radius: 8px; text-decoration: none;
  font: 600 0.98rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.3px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.gold:hover { box-shadow: 0 0 14px rgba(212, 175, 55, 0.6); transform: scale(1.04); color: #fff; }

.faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 14px 0; scroll-margin-top: 140px; }
.faq-item summary { cursor: pointer; font-size: 1.1rem; }
.faq-item .faq-a { margin-top: 8px; line-height: 1.6; }
.faq-item ul { padding-left: 20px; }
.faq-item li { margin-bottom: 6px; }
.faq-cta { margin-top: 28px; }
@media (max-width: 600px) {
  /* The sticky header wraps to several lines on phones. */
  .sell, .faq-item { scroll-margin-top: 280px; }
}

/* --- Site review changes (2026-10) ------------------------------------- */
/* Footer: Contact / FAQ / Privacy / Terms beside the DMCA button. */
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }
/* Privacy, Terms, Contact pages. */
.legal { max-width: 720px; line-height: 1.6; }
.legal h2 { font-size: 1.15rem; margin: 26px 0 6px; color: var(--accent); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
/* Homepage: buyer lead, city links, separate artist band. */
.buyer-lead { font-size: 1.15rem; margin: 0 0 6px; color: #fff; }
.city-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 22px; align-items: center; }
.city-pick .label { color: #fff; font-size: 0.9rem; }
.city-pick a { border: 1px solid var(--gold); color: #fff; border-radius: 999px; padding: 4px 12px; text-decoration: none; font-size: 0.9rem; }
.city-pick a:hover { border-color: var(--accent); color: var(--accent); }
.artist-band { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 16px 18px; margin: 28px 0 8px; }
.artist-band p { margin: 0; }
/* Card: artist + city on one line; muted "Price on request". */
.card .a .where { color: var(--muted); }
.card .p.ask { color: var(--muted); font-size: 0.9rem; }
.more-by { margin: 8px 0 18px; font-size: 0.95rem; }
/* Piece page: short artist block, more by this artist, what happens next. */
.artist-block { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 18px; }
.artist-block .grid { margin-top: 12px; }
.next-step { color: var(--muted); }
.card .spec { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }