/* Kathak Vancouver. See docs/styleguide.md for the reasoning behind every
   token and rule in this file. */

:root {
  --ground:     #FFFFFF;
  --band:       #F5F2EC;
  --ink:        #17130F;
  --ink-muted:  #5C554D;
  --line:       #E4DED4;

  --brass:      #E0A012;   /* fill only. Never text. */
  --brass-ink:  #8A5D00;   /* text variant of brass */
  --alta:       #C42A46;
  --indigo:     #2E3C8F;
  --leaf:       #2C6E52;

  --r-flat: 4px;
  --r-pill: 999px;

  --maxw:    1200px;
  --gutter:  clamp(20px, 5vw, 64px);
  --sec-gap: clamp(72px, 10vw, 128px);

  /* Set per section. --plate is the accent at 12% over white, precomputed so
     the cards do not depend on color-mix. */
  --accent: var(--ink);
  --plate:  var(--band);
}

.s-alta   { --accent: var(--alta);      --plate: #F8E5E9; }
.s-indigo { --accent: var(--indigo);    --plate: #E6E8F2; }
.s-leaf   { --accent: var(--leaf);      --plate: #E6EEEA; }
.s-brass  { --accent: var(--brass-ink); --plate: #F1ECE0; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.55 "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis-weight: none;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.10; font-weight: 400; letter-spacing: -0.01em; }
h3 { font-size: 1.375rem; line-height: 1.20; font-weight: 500; letter-spacing: -0.01em; }
p  { margin: 0; }

/* The long arrow that ends a link. */
.arr {
  display: inline-block; width: 18px; height: 1px;
  background: currentColor; position: relative; margin-left: 6px;
}
.arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Buttons. One rule, two variants. The border is always present, so both
   variants share a height and a baseline. */
.btn {
  display: inline-flex; align-items: center;
  padding: 11px 26px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 500 1rem/1 inherit; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn-primary:hover { background: #C88C08; border-color: #C88C08; }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  min-height: 68px; padding-block: 12px;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.site-nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.site-nav a { color: var(--ink-muted); font-size: 0.9375rem; font-weight: 600; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }

/* Sections */
.section { padding-block: var(--sec-gap); }
.section.band { background: var(--band); }
.section-head { color: var(--accent); }

.hero { padding-block: var(--sec-gap) calc(var(--sec-gap) / 2); }
.hero .lede {
  margin-top: 24px;
  font-size: 1.125rem; color: var(--ink-muted); max-width: 62ch;
}

/* Events. Cards in the same grid as the artists, so the two sections share
   one plate, one title size, and one link row. The card carries the plate,
   the title and the meta line. The blurb sits on the event page. */
.event-when {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  background: var(--plate); border-radius: var(--r-flat);
  font-variant-numeric: tabular-nums;
}
.event-day { display: block; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.event-month {
  display: block; margin-top: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.event-when.has-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 52%, transparent 78%);
}
.event-when.has-photo > span { position: relative; z-index: 1; color: #FFFFFF; }
.credit { font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }
.event-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted);
}
.event-card .card-name { font-size: 1.375rem; }

/* Event page. Title, meta, plate, then the prose. The plate is narrower than
   the text column, because a 4:3 plate at the full column is 480px tall and
   pushes the first sentence off the screen. */
.event-page .event-meta { margin: -12px 0 32px; }
.event-page .card-plate { max-width: 440px; margin-bottom: 32px; }
.event-page .links { margin-top: 32px; }
.event-page .credit { margin-top: 16px; }

/* Filters */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 32px;
}
.filters .label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); margin-right: 6px; }
.filter-btn {
  font: 500 0.9375rem/1 inherit;
  padding: 9px 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-muted);
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.filter-btn:hover { color: var(--ink); border-color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.count { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }

/* Motif. Each plate carries one abstract Kathak figure from assets/motifs/.
   The SVG is a mask, not an image, so the figure takes --accent and changes
   color with the section. Every motif leaves the lower left quiet, because
   that is where the name or the date sits. */
.plate { position: relative; overflow: hidden; }
.plate > * { position: relative; }
.plate::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  opacity: .34;
  -webkit-mask: var(--motif) center / cover no-repeat;
  mask: var(--motif) center / cover no-repeat;
}

/* Card grid. The events section and the artists section share it. */
.grid {
  display: grid; gap: 48px 32px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 48px;
}
.card { display: flex; flex-direction: column; gap: 12px; }
.card.is-hidden { display: none; }
.card-plate {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--plate); border-radius: var(--r-flat);
}
.card-plate img, .event-when img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-name { color: var(--accent); font-size: 1.5rem; line-height: 1.1; font-weight: 500; }
.hood { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }
.blurb { color: var(--ink-muted); }
.tags { font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: auto; padding-top: 4px; }
.links a { font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; }

.no-results {
  display: none;
  margin-top: 48px; padding: 48px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
}
.no-results.show { display: block; }

/* Prose pages */
.page { max-width: 68ch; }
.page h1 { margin-bottom: 28px; }
.page h2 {
  margin: 56px 0 16px;
  font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em;
  color: var(--accent);
}
.page p, .page li { color: var(--ink-muted); }
.page p + p, .page ul, .page ol { margin-top: 16px; }
.page li + li { margin-top: 6px; }
.page strong { color: var(--ink); font-weight: 600; }

/* Footer */
.site-footer { background: var(--band); border-top: 1px solid var(--line); }
.footer-inner { padding-block: 48px; }
.footer-inner p { max-width: 68ch; color: var(--ink-muted); font-size: 0.9375rem; }
.footer-inner p + p { margin-top: 12px; }
.footer-inner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Word-stagger reveal. The stagger is driven by a timer in default.html, not
   by transition-delay: a delayed transition that starts on the first paint
   never runs, and the heading stops after its first word. */
.split-word {
  display: inline-block; opacity: 0; transform: translateY(0.4em);
  transition: opacity .5s ease, transform .5s ease;
}
.split-word.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .split-word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  .header-inner { min-height: 0; }
  .site-nav { margin-left: 0; width: 100%; }
  .grid { gap: 40px 24px; }
}