/* =========================================================================
   charlotteindependentvenuealliance.org -- shared stylesheet for index.html
   and 404.html.

   Second site through the scripts/vivio/03-04-04b-05 pipeline, after
   cannabuddy.org. Same house rules, and they are deliberate:

     - ONE stylesheet for both pages. cannabuddy.org started with a copy per
       page and they had already drifted in six places within a day.
     - No JavaScript, no external requests, no webfont. Everything here is
       served from this origin.
     - Every contrast ratio below is MEASURED, not estimated, and recorded
       next to the token so the next site does not re-derive it.

   Type is a system stack rather than a licensed webfont: cannabuddy.org needed
   Campton because it had to match a sibling brand. CIVA has no such
   constraint, so this saves ~39 KB and a licence question.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Brand tokens. The violet-blue echoes the blue-guitar hero the WordPress
   site used, which is the only real brand cue the original carried.

   Measured against their own backgrounds (WCAG 2.1 relative luminance):

     LIGHT                              DARK
     ink/surface       15.83:1          15.97:1
     ink-soft/surface   8.08:1           9.55:1
     muted/surface      5.22:1           5.78:1
     brand/surface      6.19:1           6.71:1
     ink/card          17.23:1          14.65:1
     brand/card         6.74:1           6.16:1
     muted/card         5.68:1           5.30:1
     brand-deep/card    9.62:1           8.83:1

   Body text needs 4.5:1 and focus indicators need 3:1, so every one of these
   clears its bar with room -- including --muted, which is the token that
   failed on cannabuddy.org's first pass and had to be darkened.
   ------------------------------------------------------------------------- */
:root{
  --surface:    #f7f5f2;
  --card:       #ffffff;
  --ink:        #1c1a21;
  --ink-soft:   #4e4857;
  --muted:      #6b6474;
  /* #3c1ef0 is the ACTUAL brand blue, sampled from the CIVA logo -- uniform at
     every corner of the artwork, and its dominant colour by area. An earlier
     revision guessed #5a3fd6 from the old site's hero; this is measured. */
  --brand:      #3c1ef0;   /* 7.32:1 on surface, 7.97:1 on card, white-on-it 7.97:1 */
  --brand-deep: #3317c4;   /* hover: 10.19:1 on card; also the focus ring, 9.37:1 */
  --border:     #e6e1da;
  --ring:       #3317c4;
  --shadow:     0 1px 2px rgba(28,26,33,.06), 0 8px 24px -12px rgba(28,26,33,.18);
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface:    #16141a;
    --card:       #1f1c26;
    --ink:        #f2eef7;
    --ink-soft:   #c0b8cc;
    --muted:      #968da4;
    /* 🔴 The true brand blue CANNOT be used here: #3c1ef0 measures 2.29:1
       against this surface, less than half the 4.5:1 bar -- it is a dark
       saturated blue designed to sit behind white artwork, not on a dark page.
       #9b86ff is the brand hue lightened until it clears: 6.31:1 on surface,
       5.79:1 on card. The logo itself still carries the real colour, since it
       brings its own background with it. */
    --brand:      #9b86ff;
    --brand-deep: #b9abff;
    --border:     #302b3a;
    --ring:       #9b86ff;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:0;
  font-family:var(--font-sans);
  color:var(--ink);
  /* Flat colour BEFORE the gradient: a browser without color-mix() discards
     only the background-image and keeps this. */
  background:var(--surface);
  background-image:
    radial-gradient(60rem 40rem at 50% -14%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}

.wrap{
  width:100%;
  max-width:64rem;
  margin:0 auto;
  padding:0 1.25rem;
}

/* --- masthead ----------------------------------------------------------- */
header{padding:clamp(3rem,9vw,5.5rem) 0 clamp(1.5rem,4vw,2.5rem);text-align:center}

/* The masthead is the real CIVA logo, not type. It ships with its own solid
   brand-blue background, which is why it is NOT made transparent: the artwork's
   "CHARLOTTE INDEPENDENT VENUE ALLIANCE" line is WHITE, so knocking the
   background out would make that text vanish on the light theme. Keeping the
   blue panel is both safer and more on-brand. */
.wordmark{margin:0;line-height:0}
.wordmark img{
  width:min(100%, 34rem);
  height:auto;
  border-radius:.9rem;
  box-shadow:var(--shadow);
}

.lede{
  margin:1.1rem auto 0;
  max-width:34rem;
  font-size:clamp(1rem, 2.4vw, 1.15rem);
  color:var(--ink-soft);
  text-wrap:balance;
}

/* --- mission ------------------------------------------------------------ */
.mission{padding:clamp(1rem,3vw,2rem) 0 clamp(2rem,5vw,3rem)}
.mission-inner{
  max-width:44rem;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.1rem;
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,4vw,2.5rem);
}
.mission p{margin:0 0 1rem;color:var(--ink-soft)}
.mission p:last-child{margin-bottom:0}
.mission strong{color:var(--ink);font-weight:700}

/* --- members ------------------------------------------------------------ */
.members{padding:0 0 clamp(3rem,7vw,5rem)}

h2{
  margin:0 0 .4rem;
  font-size:clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight:700;
  letter-spacing:-.015em;
  text-align:center;
}
.section-note{
  margin:0 auto clamp(1.5rem,4vw,2.25rem);
  max-width:34rem;
  text-align:center;
  font-size:.95rem;
  color:var(--muted);
}

.grid{
  display:grid;
  /* auto-fit + minmax means no media queries: 4 across on a desktop, 2 on a
     tablet, 1 on a phone, and it never leaves a stranded half-width card. */
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  gap:clamp(.9rem, 2.2vw, 1.4rem);
  list-style:none;
  margin:0;
  padding:0;
}

.venue{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* The whole card is the link. `display:flex` + `height:100%` keeps every card
   the same height regardless of how long the venue name wraps. */
.venue a,
.venue .noweb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  height:100%;
  padding:1.4rem 1rem 1.25rem;
  text-decoration:none;
  color:inherit;
}
.venue a{transition:transform .18s ease, border-color .18s ease}
.venue a:hover{transform:translateY(-3px)}
.venue a:hover .name{color:var(--brand-deep)}
/* Solid ring, not an alpha tint -- a translucent outline composites to well
   under the 3:1 WCAG 2.2 focus-appearance bar against a white card. */
.venue a:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:-3px;
  border-radius:1rem;
}

.venue img{
  width:104px;
  height:104px;
  /* Explicit width/height in the markup AND here: the intrinsic size is
     300x300, so without this the grid reflows as each logo loads. */
  object-fit:contain;
  border-radius:.6rem;
}

.name{
  font-weight:700;
  font-size:1rem;
  text-align:center;
  text-wrap:balance;
  transition:color .18s ease;
}
.meta{
  margin-top:-.35rem;
  font-size:.8rem;
  color:var(--muted);
}

/* --- footer ------------------------------------------------------------- */
footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding:1.75rem 0 2.25rem;
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}
footer a:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:.2rem}

/* --- 404 ---------------------------------------------------------------- */
.notfound{
  flex:1;
  display:grid;
  place-items:center;
  text-align:center;
  padding:4rem 1.25rem;
}
.code{
  margin:0;
  font-size:clamp(3rem,12vw,4.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--brand);
}
/* :not(.code) is load-bearing -- `.notfound p` (0-1-1) outranks `.code`
   (0-1-0) and comes later, so without it the numeral silently loses its brand
   colour, zero margin and line-height. This exact bug was introduced on
   cannabuddy.org by extracting the shared stylesheet, and caught by review. */
.notfound p:not(.code){
  margin:.85rem auto 1.75rem;
  max-width:32ch;
  color:var(--ink-soft);
}
.btn{
  display:inline-block;
  padding:.8rem 1.9rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
@media (prefers-color-scheme: dark){
  /* Bright violet needs a DARK label in dark mode -- white on --brand is
     under 4.5:1 there, and this is the idiomatic dark-UI treatment anyway. */
  .btn{color:#16141a}
}
.btn:hover{background:var(--brand-deep)}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .venue a{transition:none}
  .venue a:hover{transform:none}
}