/* ============================================================
   Design tokens
   Brand direction: same Singa family, dressed up. Premium,
   industry-grade, evening-in-Vegas energy. Serious about fun.
   Values below come from the KIS logo lockup + Figma hero design.
   ============================================================ */
:root {
  /* Colours */
  --color-bg: #000000;              /* base background, matches KIS hero */
  --color-bg-alt: #141414;          /* alt section background */
  --color-ink: #ffffff;             /* primary text on dark */
  --color-ink-muted: #c7c2ba;       /* secondary text, warm grey */
  --color-accent: #db941b;          /* KIS amber accent (CTAs, eyebrows, glow) */
  --color-accent-hover: #eaa93a;    /* amber CTA hover, lifted toward the logo gold */
  --color-white-hover: #f4ead9;     /* white CTA hover, warm off-white rather than grey */
  --color-gradient-start: #eac115;  /* KIS logo gradient */
  --color-gradient-end: #ba2c2a;
  --color-gradient: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));

  /* Typography */
  /* TODO: license Basier Square (brand display/body face) and swap in via @font-face */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing + layout */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --container: 1120px;
  --radius: 14px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 var(--space-2); }

a { color: inherit; text-decoration: none; }

.link-accent { color: var(--color-accent); }
.link-accent:hover { text-decoration: underline; }

/* Available to search engines and screen readers, not to sighted users.
   Used for the h1 text behind the KIS logo lockup. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 20;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #1a1400;
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.lead { font-size: 1.15rem; color: var(--color-ink-muted); max-width: 62ch; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--color-accent); color: #1a1400; }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-accent-hover); color: #1a1400; }
.btn--white { background: #ffffff; color: #1a1a1a; }
.btn--white:hover,
.btn--white:focus-visible { background: var(--color-white-hover); color: #1a1a1a; }
.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.05rem; }

/* Higher specificity than the Luma embed script's injected stylesheet,
   which otherwise overrides .btn with its own default button look. Luma's
   sheet is injected at runtime, so it lands after ours and wins any tie on
   specificity: these rules need one more class than its own selectors. */
.btn.luma-checkout--button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
}
.btn--primary.luma-checkout--button { background: var(--color-accent); color: #1a1400; }
.btn--primary.luma-checkout--button:hover,
.btn--primary.luma-checkout--button:focus-visible,
.btn--primary.luma-checkout--button:active {
  background: var(--color-accent-hover);
  color: #1a1400;
}
.btn--white.luma-checkout--button { background: #ffffff; color: #1a1a1a; }
.btn--white.luma-checkout--button:hover,
.btn--white.luma-checkout--button:focus-visible,
.btn--white.luma-checkout--button:active {
  background: var(--color-white-hover);
  color: #1a1a1a;
}
.btn--lg.luma-checkout--button { padding: 0.95rem 1.9rem; font-size: 1.05rem; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; }
.brand__logo { display: block; height: 32px; width: auto; }
.site-nav { display: flex; gap: var(--space-3); margin-left: auto; }
.site-nav a {
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a:hover { color: var(--color-ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding-block: var(--space-6);
  background: var(--color-bg);
  text-align: center;
  overflow: clip;
}
/* The hero art is wrapped in <picture> for art direction. The wrapper must not
   generate a box of its own, since the img inside is absolutely positioned. */
.hero picture { display: contents; }
.hero__skyline {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  /* Needed because the img carries width/height attributes: without this the
     height attribute applies as a presentational hint and squashes the image. */
  height: auto;
  min-width: 1200px;
  max-width: none;
  opacity: 0.6;
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero__title { margin: 0; }
.hero__mark { display: block; width: min(460px, 65vw); height: auto; margin: 0 auto var(--space-3); }
.hero__tagline {
  color: var(--color-ink);
  opacity: 0.9;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  max-width: 40ch;
  margin: 0 auto var(--space-4);
}

/* ============================================================
   Venue + photo
   ============================================================ */
.venue {
  position: relative;
  padding-block: var(--space-6);
  background: var(--color-bg);
  overflow: clip;
}
.venue__dots {
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 640px;
  height: 640px;
  max-width: none;
  background-image: radial-gradient(circle, var(--color-accent) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, black, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, black, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.venue__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.venue__heading { color: var(--color-ink); }
.venue__photo-wrap { position: relative; aspect-ratio: 595 / 467; }
.venue__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.venue__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--color-gradient);
  mix-blend-mode: color;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to top left, black 0%, transparent 55%);
  mask-image: linear-gradient(to top left, black 0%, transparent 55%);
  pointer-events: none;
}

/* ============================================================
   KWC context + photo
   ============================================================ */
.kwc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.kwc__photo-wrap { position: relative; aspect-ratio: 1 / 1; }
.kwc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.kwc__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--color-gradient);
  mix-blend-mode: color;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(20deg, black 0%, transparent 55%);
  mask-image: linear-gradient(20deg, black 0%, transparent 55%);
  pointer-events: none;
}

#kwc {
  position: relative;
  overflow: clip;
}
.kwc__dots {
  position: absolute;
  right: -100px;
  top: -100px;
  width: 640px;
  height: 640px;
  max-width: none;
  background-image: radial-gradient(circle, var(--color-accent) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0%, black, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: var(--space-6); }
.section--alt { background: var(--color-bg-alt); }
.section__title { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }

/* ============================================================
   Speakers
   ============================================================ */
.speakers-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.speaker-card {
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.speaker-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--color-gradient);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.speaker-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.speaker-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gradient);
  mix-blend-mode: color;
}
.speaker-card__name { font-size: 1.15rem; margin-bottom: 0.25rem; }
.speaker-card__title { color: var(--color-ink-muted); margin: 0 0 0.25rem; font-size: 0.9rem; }
.speaker-card__topic { color: var(--color-accent); margin: 0; font-size: 0.9rem; }
.speaker-card__bio { color: var(--color-ink-muted); margin: 0; font-size: 0.9rem; line-height: 1.5; }

/* ============================================================
   Schedule
   ============================================================ */
.schedule { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.schedule__item {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.schedule__time { color: var(--color-accent); font-weight: 700; min-width: 6ch; }

/* Shared "more to come" line used under the speakers grid and the schedule.
   Styled as an accent chip rather than muted small print, so it reads as an
   announcement instead of a footnote. */
.section-note {
  margin: var(--space-4) 0 0;
  padding: 0.9rem 1.15rem;
  max-width: 60ch;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
}

/* ============================================================
   Partners
   ============================================================ */
.partners-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.partner-logo {
  width: 160px;
  height: 64px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Organiser
   ============================================================ */
/* Border separates this from the program section above it, which shares
   the same alt background. */
.organiser { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.organiser__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.organiser__logo-wrap { display: flex; justify-content: center; }
.organiser__logo { width: min(240px, 70%); height: auto; }
.organiser__cta { margin: var(--space-3) 0 0; font-weight: 700; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}
.faq-item__q { font-size: 1.05rem; margin-bottom: 0.4rem; }
.faq-item__a { color: var(--color-ink-muted); margin: 0; max-width: 58ch; }

/* ============================================================
   CTA
   ============================================================ */
/* Border separates the CTA from the FAQ section above it, which shares
   the same alt background. */
.cta {
  position: relative;
  overflow: clip;
  text-align: center;
  background: var(--color-bg-alt);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cta .lead { margin-inline: auto; }
.cta__countdown { margin-top: var(--space-3); color: var(--color-accent); font-weight: 700; }
.register__dots {
  position: absolute;
  left: -100px;
  bottom: -100px;
  width: 640px;
  height: 640px;
  max-width: none;
  background-image: radial-gradient(circle, var(--color-accent) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, black, transparent 70%);
  mask-image: radial-gradient(circle at 0% 100%, black, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { padding-block: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}
.site-footer__icon { display: block; border-radius: 4px; }
.site-footer__meta { color: var(--color-ink-muted); margin: 0; }
.site-footer__links { display: flex; gap: var(--space-3); margin-left: auto; }
.site-footer__links a { color: var(--color-ink-muted); }
.site-footer__links a:hover { color: var(--color-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .venue__grid { grid-template-columns: 1fr; }
  .venue__photo-wrap { order: -1; }
  .kwc__grid { grid-template-columns: 1fr; }
  .kwc__photo-wrap { order: -1; }
  .organiser__grid { grid-template-columns: 1fr; }
  .organiser__logo-wrap { order: -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  /* Phones load the portrait hero art (see the <picture> in index.html),
     which carries its own clear band through the middle for the copy. So
     here the image just needs to fill the hero rather than be cropped or
     scrimmed: the clear zone is baked into the artwork. */
  .hero__skyline {
    inset: 0;
    transform: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
  }
}

@media (max-width: 720px) {
  .site-nav { display: none; } /* TODO: mobile menu */
  .site-footer__links { margin-left: 0; width: 100%; }
}