/* Yinzider — Parking Chair design system.
   Shared by the homepage (index.html) and the event explorer (events.html).
   Ported from ui/mockups/parking-chair/shared.css with the Confluence header.

   Page-specific rules do not belong here. Explorer chrome lives in styles.css. */

:root{
  /* --- palette ------------------------------------------------------- */
  --cream:oklch(0.955 0.022 92);
  --cream-2:oklch(0.915 0.030 92);
  --cream-3:oklch(0.93 0.028 92);
  --ink:oklch(0.28 0.026 62);
  --ink-soft:oklch(0.46 0.024 62);
  --mustard:oklch(0.82 0.155 88);
  --mustard-deep:oklch(0.72 0.150 76);
  --kielbasa:oklch(0.56 0.170 30);
  --pickle:oklch(0.62 0.125 145);
  --porch:oklch(0.40 0.038 244);
  --porch-deep:oklch(0.29 0.034 244);
  --chair:oklch(0.66 0.145 250);
  --line:oklch(0.80 0.030 92);
  --river:oklch(0.52 0.075 232);

  /* state and inversion pairs — a hover or a text-on-accent value is part of
     the system, not a one-off, so each one gets a name */
  --kielbasa-deep:oklch(0.50 0.175 30);
  --mustard-light:oklch(0.88 0.150 88);
  --cream-dim:oklch(0.86 0.018 92);
  --cream-on-pickle:oklch(0.98 0.01 145);
  --cream-on-pickle-soft:oklch(0.94 0.02 145);
  --ink-on-mustard:oklch(0.32 0.05 70);
  --porch-hover:oklch(0.36 0.036 244);
  --porch-chip:oklch(0.48 0.04 244);
  --porch-set:oklch(0.33 0.035 244);
  --porch-set-hi:oklch(0.38 0.03 244);
  --porch-set-lo:oklch(0.28 0.03 244);
  --porch-dial:oklch(0.24 0.02 244);

  /* header scene: the confluence drawn as the wordmark's Y */
  --river-deep:oklch(0.44 0.070 232);
  --river-light:oklch(0.72 0.060 232);
  --land:oklch(0.80 0.070 132);
  --forest:oklch(0.52 0.090 148);
  --sun:oklch(0.86 0.115 78);

  /* --- type ---------------------------------------------------------- */
  --display:'Alfa Slab One',Georgia,serif;
  --body:Karla,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- shape --------------------------------------------------------- */
  --r-micro:3px;
  --r-meter:5px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:18px;
  --r-pill:22px;

  color-scheme:light;
}

/* Dark theme tokens (#1403) */
[data-theme="dark"], body.dark-theme {
  --cream: oklch(0.18 0.015 244);
  --cream-2: oklch(0.14 0.015 244);
  --cream-3: oklch(0.22 0.020 244);
  --ink: oklch(0.96 0.01 92);
  --ink-soft: oklch(0.78 0.015 92);
  --porch: oklch(0.26 0.02 244);
  --porch-deep: oklch(0.12 0.015 244);
  --line: oklch(0.28 0.015 244);
  color-scheme: dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.slab{font-family:var(--display);font-weight:400;letter-spacing:-.005em}

:focus-visible{outline:3px solid var(--kielbasa);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mustard);color:var(--ink);
  font-weight:700;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;text-decoration:none}
.skip-link:focus{left:0}

/* ---------- header: the bar, then the confluence scene ---------------- */
.site-header{background:var(--hdr-bg,var(--porch-deep));color:var(--hdr-fg,var(--cream));position:relative;
  --hdr-bg:oklch(0.29 0.034 244);--hdr-fg:oklch(0.955 0.022 92);
  --hdr-accent:oklch(0.82 0.155 88);--hdr-hover:var(--porch-hover)}
.bar{display:flex;align-items:center;gap:20px;padding:15px 0 13px;position:relative;z-index:3}
.bar-mark{font-family:var(--display);font-size:23px;line-height:1;color:var(--hdr-accent);text-decoration:none;display:block}
.bar-mark span{display:block;font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hdr-fg);opacity:.72;margin-top:6px}
.bar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.bar nav a{font-family:var(--body);font-weight:700;font-size:14.5px;text-decoration:none;color:var(--hdr-fg);
  padding:8px 14px;border-radius:var(--r-pill);transition:background .16s,color .16s}
.bar nav a:hover{background:var(--hdr-hover)}
.bar nav a[aria-current]{background:var(--hdr-accent);color:var(--ink)}

.dibs{display:flex;align-items:center;gap:9px;background:var(--kielbasa);color:var(--cream);border:none;
  font-family:var(--body);font-weight:700;font-size:14.5px;padding:9px 16px 9px 12px;border-radius:var(--r-pill);
  cursor:pointer;text-decoration:none;min-height:44px}
.dibs:hover{background:var(--kielbasa-deep)}
.dibs svg{width:22px;height:22px}
.dibs b{background:var(--cream);color:var(--kielbasa);border-radius:20px;padding:0 8px;font-size:13px}
.theme-toggle-btn{min-width:44px;min-height:44px}

.scene{display:block;width:100%;height:auto;background:var(--cream-3)}
.scene-art{aspect-ratio:2172/724;object-fit:contain;object-position:center}

/* ---------- section chrome -------------------------------------------- */
section{padding:clamp(34px,4.6vw,62px) 0}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sh h2{font-family:var(--display);font-size:clamp(28px,3.8vw,44px);line-height:1.05}
.sh .c{font-weight:700;font-size:14px;color:var(--ink-soft);background:var(--cream-2);padding:4px 12px;border-radius:20px}
.sh .a{margin-left:auto;font-weight:700;font-size:15px;text-decoration:none;color:var(--kielbasa);
  border-bottom:2.5px solid var(--mustard)}
.sh .a:hover{color:var(--ink)}

/* ---------- buttons ---------------------------------------------------- */
.btn{font-family:var(--body);font-weight:700;font-size:14px;padding:9px 15px;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:none;color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.fill{background:var(--ink);color:var(--cream)}
.btn.fill:hover{background:var(--porch-deep);border-color:var(--porch-deep)}
.btn.chair{border-color:var(--chair);color:var(--chair)}
.btn.chair:hover{background:var(--chair);color:var(--cream)}
.btn.chair svg{width:17px;height:17px}

.f{font-family:var(--body);font-weight:700;font-size:14px;padding:9px 16px;border-radius:var(--r-pill);
  border:2px solid var(--line);background:var(--cream);cursor:pointer;color:var(--ink);text-decoration:none;
  display:inline-block}
.f:hover{border-color:var(--ink)}
.f.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------- event card ------------------------------------------------- */
/* Flyers are never cropped: PRODUCT.md requires text on a flyer stay readable,
   so the media box is a fixed plate and the image is contained inside it. */
.ev{background:var(--cream-2);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.ev:hover{transform:translateY(-4px)}
.ev .top{position:relative;height:190px;background:var(--cream-3);overflow:hidden}
.ev .top img{width:100%;height:100%;object-fit:contain}
.ev-initials{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:44px;
  color:var(--ink-soft);opacity:.35}
.ev .clock{position:absolute;left:12px;top:12px;background:var(--cream);color:var(--ink);
  font-family:var(--display);font-size:16px;padding:5px 11px;border-radius:var(--r-sm)}
.ev .cost{position:absolute;right:12px;top:12px;background:var(--pickle);color:var(--cream-on-pickle);
  font-weight:700;font-size:14px;padding:5px 11px;border-radius:20px}
.ev .cost.paid{background:var(--kielbasa)}
.ev .b{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.ev h3{font-family:var(--display);font-size:21px;line-height:1.16}
.ev h3 a{color:inherit;text-decoration:none}
.ev h3 a:hover{color:var(--kielbasa)}
.ev .v{font-weight:700;font-size:13.5px;color:var(--kielbasa);margin:6px 0 8px}
.ev p{font-size:15px;color:var(--ink-soft);flex:1}
.ev .row{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}

/* ---------- written empty and error states ----------------------------- */
/* An empty section says what is missing and what to do next. Never a blank hole. */
.nowt{background:var(--cream-2);border:2px dashed var(--line);border-radius:var(--r-md);
  padding:24px;color:var(--ink-soft);font-size:15.5px}
.nowt strong{display:block;font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);margin-bottom:6px}
.nowt a{color:var(--kielbasa);font-weight:700}

/* ---------- footer ----------------------------------------------------- */
footer.footer{background:var(--porch);color:var(--cream);padding:36px 0 56px}
.footer .foot{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-weight:600;font-size:15px;
  max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.footer .foot a,.footer .foot button{color:var(--cream);text-decoration:none;opacity:.85;background:none;
  border:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.footer .foot a:hover,.footer .foot button:hover{opacity:1;color:var(--mustard)}
.footer .foot .r{margin-left:auto;font-size:13.5px;opacity:.7;font-weight:400}

@media(max-width:960px){
  .bar nav{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}