/* ==========================================================================
   Autonomy Conference — autonomyconf.com
   Static recreation. No build step, no JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --color-bg: #1c1b1a;
  --color-text: #cbc9c4;
  --color-white: #fff;
  --color-red: #ff4330;
  --color-yellow: #ffe100;
  --color-pale-yellow: #fff6b4;
  --color-neutral-400: #acacac;
  --color-rule: #808080;

  /* Grid */
  --gutter: 20px;
  --gap-x: 18px;
  --gap-y: 20.25px;
  --col: calc((100% - 11 * var(--gap-x)) / 12);

  /* Spacing scale (mirrors the original 18px-root scale) */
  --space-100: max(13.5px, 0.8333vw);
  --space-125: max(18px, 1.0416vw);
  --space-150: max(20.25px, 1.25vw);
  --space-200: max(27px, 1.6665vw);
  --space-250: max(33.75px, 2.0833vw);
  --space-300: max(40.5px, 2.5vw);
  --space-400: max(54px, 3.333vw);
  --space-500: max(67.5px, 4.5833vw);
  --space-750: max(101.25px, 6.25vw);
  --space-1000: max(135px, 8.3333vw);

  /* Type families
     The live site uses two licensed typefaces: ABC Diatype (italic display)
     and PP Formula (card headings). Free stand-ins are used here — drop the
     licensed woff2 files in /fonts and swap these two vars to restore them. */
  --font-display: "Anton", "Arial Narrow", sans-serif;          /* headlines  */
  --font-italic: "Inter Tight", system-ui, sans-serif;          /* ≈ Diatype  */
  --font-heading: "Oswald", "Inter Tight", sans-serif;          /* ≈ Formula  */
  --font-body: "Inter Tight", system-ui, -apple-system, sans-serif;

  /* Fluid type scale, interpolated 390px → 1440px */
  --fs-headline-xl: clamp(36px, 25.6px + 2.667vw, 64.008px);
  --fs-headline-l: clamp(28.008px, 22.81px + 1.332vw, 41.994px);
  --fs-headline-l-italic: clamp(32.004px, 26.06px + 1.524vw, 48.006px);
  --fs-headline-m: clamp(27px, 24.135px + 0.7347vw, 34.714px);
  --fs-headline-s: clamp(22.5px, 21.067px + 0.3675vw, 26.358px);
  --fs-body-l: clamp(19.8px, 17.269px + 0.649vw, 26.615px);
  --fs-body-m: clamp(14.4px, 12.712px + 0.4327vw, 18.943px);
  --fs-body-s: clamp(12.6px, 11.756px + 0.2163vw, 14.872px);
}

@media (min-width: 768px) {
  :root { --gutter: 27px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.t-headline-xl {
  font-family: var(--font-display);
  font-size: var(--fs-headline-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 400;
}

.t-headline-l {
  font-family: var(--font-display);
  font-size: var(--fs-headline-l);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 400;
}

.t-headline-l-italic {
  font-family: var(--font-italic);
  font-size: var(--fs-headline-l-italic);
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-style: italic;
  font-weight: 500;
}

.t-headline-m {
  font-family: var(--font-heading);
  font-size: var(--fs-headline-m);
  line-height: 1.03;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--color-white);
}

.t-headline-s {
  font-family: var(--font-heading);
  font-size: var(--fs-headline-s);
  line-height: 1.04;
  letter-spacing: 0.016em;
  font-weight: 600;
  color: var(--color-white);
}

.t-body-l { font-size: var(--fs-body-l); line-height: 1.3; }
.t-body-m { font-size: var(--fs-body-m); line-height: 1.35; }
.t-body-s { font-size: var(--fs-body-s); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  padding-inline: var(--gutter);
}

.section { margin-top: var(--space-750); }

.section__title { color: var(--color-text); text-align: center; }

.eyebrow { text-align: center; }
.eyebrow--accent { color: var(--color-red); }

.rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

/* Breathing room where a section runs straight into the closing rules. */
.section + .rule { margin-top: var(--space-400); }

.card {
  border: 1px solid var(--color-white);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  background: var(--color-bg);
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13.5px;
  padding-block: 6px;
}

.site-header__brand {
  font-size: var(--fs-body-l);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-inline: var(--gutter);
  margin-top: var(--space-1000);
  margin-bottom: var(--space-400);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}

.hero > * { grid-column: 1 / -1; }

.hero__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-x);
  color: var(--color-text);
}

.hero__meta-end { text-align: end; }

.hero__title { margin: 0; }

.hero__wordmark { width: 100%; height: auto; }

.hero__lede {
  text-align: center;
  color: var(--color-text);
  margin-top: var(--space-250);
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hero > * { grid-column: 2 / span 10; }
}

/* --------------------------------------------------------------------------
   It's a wrap — photo carousel (CSS only, no JS)
   -------------------------------------------------------------------------- */
.wrap__lede {
  text-align: center;
  color: var(--color-text);
  margin-top: var(--space-150);
  margin-inline: auto;
  max-width: 42ch;
}

.carousel {
  margin-top: var(--space-300);
}

.carousel__track {
  display: flex;
  gap: var(--gap-x);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

/* One slide plus a peek of the next, so it reads as scrollable. */
.carousel__slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Two across on tablets, three on desktop. */
@media (min-width: 600px) {
  .carousel__slide { flex-basis: calc((100% - var(--gap-x)) / 2); }
}

@media (min-width: 1000px) {
  .carousel__slide { flex-basis: calc((100% - 2 * var(--gap-x)) / 3); }
}

.carousel__slide img {
  width: 100%;
  height: auto;            /* let aspect-ratio win over the height attribute */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: var(--space-125) 0 0;
  padding: 0;
  list-style: none;
}

.carousel__dots a {
  display: block;
  padding: 10px 7px;       /* ~24x30 tap target around a 10px square */
  line-height: 0;
}

.carousel__dots a::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: var(--color-neutral-400);
  opacity: 0.45;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.carousel__dots a:hover::before { opacity: 0.8; }

/* Mark the dot for whichever slide is targeted; slide 1 when none is. */
.carousel:has(#wrap-1:target) .carousel__dots a[href="#wrap-1"]::before,
.carousel:has(#wrap-2:target) .carousel__dots a[href="#wrap-2"]::before,
.carousel:has(#wrap-3:target) .carousel__dots a[href="#wrap-3"]::before,
.carousel:has(#wrap-4:target) .carousel__dots a[href="#wrap-4"]::before,
.carousel:has(#wrap-5:target) .carousel__dots a[href="#wrap-5"]::before,
.carousel:not(:has(:target)) .carousel__dots a[href="#wrap-1"]::before {
  background: var(--color-red);
  opacity: 1;
}

/* The slides are scrolled into view horizontally; don't let the anchor jump
   drag the page around vertically as well. */
.carousel__slide { scroll-margin: 0; }

/* --------------------------------------------------------------------------
   Why attend
   -------------------------------------------------------------------------- */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-y) var(--gap-x);
  margin-top: var(--space-250);
}

.why-card {
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-x);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc(var(--col) * 8 + var(--gap-x) * 7);
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Where robotics meets the real world
   -------------------------------------------------------------------------- */
.section--focus {
  margin-top: var(--space-1000);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap-x);
  row-gap: var(--space-400);
}

.focus__intro { display: flex; flex-direction: column; gap: var(--space-150); }

.focus__lede { color: var(--color-text); }

.focus__cards { display: flex; flex-direction: column; gap: var(--gap-y); }

.focus-card {
  position: relative;
  margin: 0;
  min-height: 160px;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.focus-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.focus-card__body {
  padding: 33.75px 20.25px;
  text-align: center;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
}

.focus-card__title { color: var(--color-white); }

@media (min-width: 768px) {
  .section--focus {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--gap-y);
  }
  .focus__intro { grid-column: 3 / span 3; align-self: start; }
  .focus__cards { grid-column: 7 / span 4; }
}

/* --------------------------------------------------------------------------
   Speakers
   -------------------------------------------------------------------------- */
.speakers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-y) var(--gap-x);
  margin-top: var(--space-400);
}

.speaker__inner {
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-x);
  height: 100%;
}

.speaker__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 782 / 526;
  object-fit: cover;
}

.speaker__role,
.speaker__org { color: var(--color-white); }

@media (min-width: 600px) {
  .speakers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .speakers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: var(--space-400);
  padding-bottom: var(--space-150);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gap-x);
  row-gap: var(--space-300);
  align-items: end;
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  color: var(--color-white);
}

.site-footer__wordmark { width: 100%; height: auto; }

@media (min-width: 768px) {
  .site-footer {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .site-footer__info { grid-column: 1 / span 3; align-self: start; }
  .site-footer__wordmark { grid-column: 5 / span 8; align-self: end; }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { scroll-behavior: auto; }
  .carousel__dots a { transition: none; }
}