/* ============================================================================
   YOYAKU World Tour 2026 — shared identity system
   ----------------------------------------------------------------------------
   One design system consumed by both /events (public/events.html) and the
   yy.link bio pages (public/assets/linktree.css @imports this). Mirrors the
   Atelier 14 World Tour 2026 poster: acid green (#56e990) on a frosted-glass
   texture, 1px green frames, halftone band, expanded display type + mono meta,
   date list `12.09.26 PARIS [FR]`.

   Fonts are TOKENS. GT America Extended / Tempel Grotesk (the print faces) have
   no web licence, so the display face is variable Archivo at width 125% and the
   mono is self-hosted IBM Plex Mono. Swap --wt-font-* + one @font-face block to
   move to GT America if a webfont licence is ever bought — nothing else changes.
   ============================================================================ */

/* Variable Archivo (width 62.5–125, weight 100–900) + IBM Plex Mono. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,100..900&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

:root {
  /* — colour — the whole system is one green on glass — */
  --wt-green:      #56e990;
  --wt-green-soft: rgba(86, 233, 144, 0.62);
  --wt-green-dim:  rgba(86, 233, 144, 0.30);
  --wt-green-hair: rgba(86, 233, 144, 0.16);
  --wt-green-wash: rgba(86, 233, 144, 0.08);
  --wt-ink:        #06120b;                 /* near-black text on green fills */
  --wt-bg:         #0a0e0c;                 /* dark base behind the glass */
  --wt-glass-tint: rgba(10, 14, 12, 0.42);  /* darkening veil over the photo */
  --wt-paper:      #8a8f99;                 /* solid fallback if webp fails */

  /* — type tokens (single point of change for GT America) — */
  --wt-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; /* wide caps */
  --wt-font-city:    'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --wt-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --wt-display-stretch: 125%;   /* the "Extended" look via Archivo width axis */

  /* — frame + rhythm — */
  --wt-frame-line: 1px solid var(--wt-green);
  --wt-hair:       1px solid var(--wt-green-hair);
  --wt-track:      0.08em;       /* uppercase legibility */
  --wt-track-wide: 0.16em;       /* kickers */

  /* — texture asset paths (exported once from the .ai package) — */
  --wt-glass:    url('/assets/events/identity/glass-bg.webp');
  --wt-halftone: url('/assets/events/identity/halftone-band.png');
}

/* ── frosted-glass surface ─────────────────────────────────────────────────
   Applied to a page/section background. Solid --wt-paper shows if the webp
   fails; the photo sits on top, then a dark veil so green text always clears. */
.wt-surface {
  background-color: var(--wt-paper);
  background-image: linear-gradient(var(--wt-glass-tint), var(--wt-glass-tint)), var(--wt-glass);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--wt-green);
}

/* ── panel with the 1px green frame ────────────────────────────────────────── */
.wt-frame {
  border: var(--wt-frame-line);
  background: rgba(10, 14, 12, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── halftone band (poster header strip) — green via alpha mask ───────────── */
.wt-band {
  height: 44px;
  background-color: var(--wt-green);
  -webkit-mask: var(--wt-halftone) top center / cover no-repeat;
  mask: var(--wt-halftone) top center / cover no-repeat;
}

/* ── kicker: mono uppercase micro-label (OVER 20 CITIES) ───────────────────── */
.wt-kicker {
  font-family: var(--wt-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--wt-track-wide);
  text-transform: uppercase;
  color: var(--wt-green-soft);
}

/* ── display wordmark (YOYAKU / WORLD TOUR) ────────────────────────────────── */
.wt-display {
  font-family: var(--wt-font-display);
  font-stretch: var(--wt-display-stretch);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--wt-green);
  margin: 0;
}

/* ── date list (12.09.26 PARIS [FR]) ───────────────────────────────────────── */
.wt-list { display: flex; flex-direction: column; }

.wt-row {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: var(--wt-hair);
}
.wt-row:last-child { border-bottom: 0; }

.wt-row__date {
  font-family: var(--wt-font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--wt-green);
  white-space: nowrap;
}
.wt-row__city {
  font-family: var(--wt-font-city);
  font-stretch: var(--wt-display-stretch);
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 19px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wt-green);
  min-width: 0;
}
.wt-row__cc {
  font-family: var(--wt-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wt-green-soft);
  white-space: nowrap;
}
.wt-row__cc::before { content: '['; }
.wt-row__cc::after  { content: ']'; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.wt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 15px;
  font-family: var(--wt-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--wt-track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--wt-green);
  color: var(--wt-ink);
  border: var(--wt-frame-line);
  transition: background .18s, color .18s, box-shadow .18s;
}
.wt-btn:hover { box-shadow: 0 0 0 3px var(--wt-green-wash); }

.wt-btn--ghost {
  background: transparent;
  color: var(--wt-green);
}
.wt-btn--ghost:hover {
  background: var(--wt-green-wash);
  box-shadow: none;
}
.wt-btn--muted {
  background: transparent;
  color: var(--wt-green-soft);
  border-color: var(--wt-green-hair);
  cursor: default;
}

/* ── artist line-up run (MARGARET DYGAS · SONJA MOONEAR · …) ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.wt-lineup {
  margin: 6px 0 0;
  font-family: var(--wt-font-display);
  font-stretch: var(--wt-display-stretch);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--wt-green);
  overflow-wrap: anywhere;
}
.wt-lineup a { color: var(--wt-green); text-decoration: none; }
.wt-lineup a:hover,
.wt-lineup a:focus-visible { color: var(--wt-green); text-decoration: underline; text-underline-offset: 3px; }
.wt-lineup__sep { color: var(--wt-green-dim); padding: 0 8px; font-weight: 500; }
.wt-lineup--tba { color: var(--wt-green-dim); font-family: var(--wt-font-mono); font-size: 11px; letter-spacing: var(--wt-track); font-weight: 500; }

@media (max-width: 820px) {
  .wt-lineup { font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.16; }
}


/* ── rosace + 予約 marks (rosace tinted green from the white brand logo) ────── */
.wt-rosace {
  width: 52px; height: 52px;
  background-color: var(--wt-green);
  -webkit-mask: url('/assets/logos-hq/yoyaku-rosace-white.png') center / contain no-repeat;
  mask: url('/assets/logos-hq/yoyaku-rosace-white.png') center / contain no-repeat;
}
.wt-kanji {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  font-weight: 700;
  color: var(--wt-green);
}
.wt-kanji--fill {                 /* the filled 約 tile on the poster */
  background: var(--wt-green);
  color: var(--wt-ink);
}

@media (prefers-reduced-motion: reduce) {
  .wt-btn { transition: none; }
}