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

:root {
  /* This site has one deliberate light theme, no dark variant - tell
     browsers not to auto-dark-mode/invert it. Without this, a browser's
     "force dark" (common on Android Chrome, and some desktop settings)
     inverts every element by its own luminance: cream backgrounds go
     black, the maroon accent goes salmon-pink, and anything we
     deliberately made dark (like the Art Scene heading band) flips the
     other way, to light - the opposite of what was authored. */
  color-scheme: light;
  --ink: #1c1a17;
  --muted: #6b6459;
  --line: #ddd6ca;
  --bg: #faf7f0;
  --card: #fffdf8;
  --accent: #7a1f1f;
  --ok: #1f6b3a;
  --warn: #8a5a00;
}

* { 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: var(--card);
}
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);
}

/* Provisional wordmark: "Collective" sits at ~half the size of the name it
   follows, wherever brandMark() is rendered (header, footer, admin hub).
   Remove with BRAND_SUFFIX in src/html.js if the name doesn't stick. */
.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: var(--bg);
  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: var(--muted);
}

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

h1 { font-weight: normal; letter-spacing: 0.02em; }
h2.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: var(--muted);
}

.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;
}
.card img { width: 100%; height: 230px; object-fit: cover; display: block; background: #eee; }
.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: #cbb26b; color: #7a6626; }
/* Origin-city marker on the National Showcase - identity is never lost. */
.badge.city { border-color: #9bb3c9; color: #3d5a75; }
/* How the piece reaches a buyer. */
.badge.fulfillment { border-color: #a9c3a2; color: #4a6340; }
.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: var(--muted); }

/* 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; }
.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%; border: 1px solid var(--line); background: #eee; }
.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 var(--line);
  background: #fff;
  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; }

button, .btn {
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 9px 16px;
  text-decoration: none;
  display: inline-block;
}
button.ghost, .btn.ghost { background: transparent; color: var(--ink); }

/* 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: var(--ok); border-color: var(--ok); }
button.reject { background: var(--accent); border-color: var(--accent); }

.notice { padding: 12px 16px; border: 1px solid var(--line); background: var(--card); }
.error { border-color: var(--accent); color: var(--accent); }
.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; }
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: var(--line); color: var(--muted); }