/* ==========================================================================
   Conferencias Poiema — Larry E. McCall in Bogotá, August 2026
   Two conferences, one weekend. The palette is taken from the campaign
   banner: navy for "Amando a tu esposa", sage for "Abuelos de Gracia".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* The page is light-only by design. Declaring it stops iOS, Android and
     macOS from re-rendering native form controls, selects and scrollbars in
     dark mode, which would fight the palette. Windows High Contrast is
     deliberately left alone: that one is an accessibility setting, not a
     preference. */
  color-scheme: light;

  /* Paper and ink, sampled from the campaign banner.
     Contrast against --paper: ink 13.6:1, ink-soft 7.9:1, ink-faint 5.2:1.
     All three clear WCAG AA for body text. */
  --paper:        #f1f1f1;
  --paper-alt:    #e6e6e4;
  --paper-edge:   #d8d8d6;
  --ink:          #22252b;
  --ink-soft:     #454a52;
  --ink-faint:    #5f656e;

  /* Event identities, both taken from the banner artwork.
     --sage is the banner's #759395 stepped one shade darker: the original
     only reaches 2.9:1 on this paper and 3.3:1 behind white text, which
     fails AA. #527074 keeps the hue and reaches 4.7:1 and 5.4:1. */
  --navy:       #17203d;
  --navy-deep:  #0f1629;
  --navy-wash:  #eaecf1;
  --sage:       #527074;
  --sage-deep:  #3e585c;
  --sage-wash:  #e9eeee;
  --sage-soft:  #759395; /* banner tone — rules and dividers only, never text */

  /* Active event accent — swapped per section */
  --accent:       var(--navy);
  --accent-deep:  var(--navy-deep);
  --accent-wash:  var(--navy-wash);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale. Body sits at 17px minimum — a large share of the
     audience for "Abuelos de Gracia" is over sixty. */
  --step--1: clamp(0.88rem, 0.84rem + 0.20vw, 0.98rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1.00vw, 2.20rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2.00vw, 3.20rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.50vw, 4.60rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  --measure: 62ch;
  --shell: 1180px;

  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;

  --shadow-book: 0 24px 60px -18px rgba(34, 37, 43, 0.34), 0 6px 16px -8px rgba(34, 37, 43, 0.18);
  --shadow-lift: 0 12px 34px -12px rgba(34, 37, 43, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-s); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 0.2em; }

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

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-s);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* The wide-tracked uppercase label is the one motif both book covers share.
   It is used for every eyebrow, date and category label on the page. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(241, 241, 241, 0.92); /* --paper, so the bar and the banner ground match */
  -webkit-backdrop-filter: blur(12px); /* Safari needed the prefix until 18.0 */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--paper-edge);
}

/* flex-start, not space-between: below the mobile breakpoint the link panel
   is absolutely positioned, so its <nav> parent collapses to zero width but
   still counts as a flex item — which used to strand the Menú button mid-bar.
   The toggle pushes itself right instead. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 66px;
}

.nav__brand { display: flex; align-items: center; }
.nav__brand img { width: 104px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 0.55rem 0.8rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--paper-alt); }

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Hero — the campaign banner

   The banner already carries both conferences, the speaker and the venues,
   so the page does not repeat any of it here. Its artwork sits on the same
   near-white the page uses, which lets the image dissolve into the page
   instead of sitting in a box.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
}

.hero__banner {
  display: block;
  width: min(100%, 1500px);
  margin-inline: auto;
}
.hero__banner img {
  width: 100%;
  height: auto;
}

/* Jump links to the two event sections. The dates carry the information —
   this is a weekend with two distinct days, and that is what people are
   choosing between. */
.hero__dates {
  display: flex;
  gap: 0;
  width: min(100% - 2.5rem, var(--shell));
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--paper-edge);
  list-style: none;
}
/* Each cell stacks the jump link over a one-tap register button, so the
   accent pair lives on the <li> where both children can inherit it. */
.hero__dates > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero__dates > li + li { border-left: 1px solid var(--paper-edge); }

.hero__date {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  text-align: center; /* mirrors the centered register button; reset on mobile */
  padding: var(--space-m) var(--space-s);
  border-top: 3px solid transparent;
  margin-top: -1px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.hero__date:hover,
.hero__date:focus-visible {
  color: var(--ink);
  border-top-color: var(--slide-accent, var(--accent));
  background: rgba(255, 255, 255, 0.6);
}

.hero__date-day {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slide-accent, var(--ink-faint));
}
.hero__date-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 0.15em;
}
.hero__date-go {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.2em;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding: 0.85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

/* One-tap register buttons under each hero date. Oversized on purpose:
   a large share of the audience is over sixty, so the target and the type
   both step up a size. The accent pair is inherited from the parent <li>. */
.hero__register {
  /* Centered in its cell on desktop; the mobile query stretches it instead.
     The top margin is deliberate: it separates the link's tap area from the
     button's, so a tremoring finger aiming at one doesn't land on the other. */
  align-self: center;
  width: min(340px, 100% - 2 * var(--space-s));
  margin: var(--space-xs) var(--space-s) var(--space-m);
  min-height: 64px;
  font-size: var(--step-1);
  background: var(--slide-accent, var(--accent));
}
.hero__register:hover { background: var(--slide-accent-deep, var(--accent-deep)); }
.hero__register:focus-visible { outline-color: var(--slide-accent, var(--accent)); }

/* --------------------------------------------------------------------------
   6. Bridge — states the premise that ties both events together
   -------------------------------------------------------------------------- */
.bridge {
  padding-block: var(--space-2xl);
  text-align: center;
  border-bottom: 1px solid var(--paper-edge);
}

.bridge__lead {
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
}
.bridge__lead .navy   { color: var(--navy); }
.bridge__lead .sage { color: var(--sage); }

.bridge__body {
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   7. Event sections
   -------------------------------------------------------------------------- */
.event {
  --accent:      var(--navy);
  --accent-deep: var(--navy-deep);
  --accent-wash: var(--navy-wash);
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--paper-edge);
  scroll-margin-top: 70px;
}

.event--sage {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-wash: var(--sage-wash);
  background: var(--paper-alt);
}

.event__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.event--sage .event__grid { grid-template-columns: 1fr 320px; }
.event--sage .event__art  { order: 2; }

/* margin:0 matters: the UA gives <figure> 1em 40px, which was eating 80px
   out of the 320px grid column and shrinking the cover to 240px. */
.event__art { position: relative; margin: 0; }
.event__art img {
  width: 100%;
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--shadow-book);
}
.event__art figcaption {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

.event__eyebrow { color: var(--accent); margin-bottom: var(--space-xs); }

.event__title {
  font-size: var(--step-3);
  margin-bottom: var(--space-xs);
}
.event__title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  color: var(--ink-soft);
  margin-top: 0.3em;
}

.event__audience {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--space-l);
}

/* Event facts. A description list, because that is what this is:
   four labelled values, not a row of decorative cards. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--space-l);
  border-top: 1px solid var(--paper-edge);
}

.facts__row {
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--paper-edge);
}
.facts__row:nth-child(odd)  { padding-right: var(--space-m); }
.facts__row:nth-child(even) { padding-left: var(--space-m); border-left: 1px solid var(--paper-edge); }

.facts dt {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3xs);
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.facts dd span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 0.25em;
}
/* "Ver en el mapa" is the one link people tap while standing on a street.
   Bare, it was an 18px-tall target — below the 24px WCAG 2.5.8 floor. */
.facts dd span a {
  display: inline-block;
  padding-block: 0.65rem;
  color: var(--accent);
}

.event__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.event__cta-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   8. Author
   -------------------------------------------------------------------------- */
.author {
  --accent: var(--ink);
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--paper-edge);
  scroll-margin-top: 70px;
}

.author__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
}

.author__name {
  font-size: var(--step-3);
  margin-bottom: var(--space-xs);
}
.author__role {
  font-size: var(--step-0);
  color: var(--ink-faint);
  margin-bottom: 0;
}

.author__body { max-width: var(--measure); font-size: var(--step-0); }
.author__body p + p { margin-top: var(--space-s); }
.author__body em { font-style: italic; }

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer { padding-block: var(--space-xl); text-align: center; }

.footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-m);
}
/* Normalised by height, not width: two marks are wide, the Comunidad de
   Gracia one is square, and matching widths would make it tower. */
.footer__logos img { width: auto; height: 58px; opacity: 0.85; }

.footer__text { font-size: var(--step--1); color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   10. Registration dialog
   -------------------------------------------------------------------------- */
.dialog {
  width: min(100% - 2rem, 480px);
  max-height: min(88vh, 780px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 90px -24px rgba(34, 37, 43, 0.45);
  overflow: hidden;
}
/* Column layout so the body takes the leftover height on its own. Measuring
   the header in CSS would break the moment a title wraps to a second line. */
.dialog[open] {
  display: flex;
  flex-direction: column;
}
.dialog::backdrop {
  background: rgba(34, 37, 43, 0.62);
  -webkit-backdrop-filter: blur(3px); /* Safari needed the prefix until 18.0 */
  backdrop-filter: blur(3px);
}

.dialog__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--accent);
  color: #fff;
}
/* Each dialog carries its event's accent, so everything inside it —
   header, focus rings, submit button — resolves to the right colour. */
.dialog--navy {
  --accent:      var(--navy);
  --accent-deep: var(--navy-deep);
}
.dialog--sage {
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
}

.dialog__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.82;
  margin: 0 0 var(--space-3xs);
}
.dialog__title {
  font-size: var(--step-1);
  color: #fff;
  margin: 0;
}
.dialog__when {
  font-size: var(--step--1);
  opacity: 0.85;
  margin: var(--space-3xs) 0 0;
}

.dialog__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.dialog__close:hover { background: rgba(255, 255, 255, 0.3); }

.dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-m);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   11. MailerLite overrides

   The vendor stylesheet scopes every rule to the form's id
   (#mlb2-6133410 / #mlb2-6133411) and marks most of them !important, so a
   plain class selector always loses. Each override below repeats the vendor's
   own selector and prefixes it with .dialog — one extra class, which is all
   it takes to win, without editing the generated vendor file.
   -------------------------------------------------------------------------- */
.dialog .ml-form-embedContainer,
.dialog .ml-form-embedContainer button,
.dialog .ml-form-embedContainer input,
.dialog .ml-form-embedContainer label,
.dialog .ml-form-embedContainer p,
.dialog .ml-form-embedContainer select {
  font-family: var(--font-body) !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper {
  background-color: transparent !important;
  display: block !important;
}
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper.embedForm,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  max-width: 100% !important;
}
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding: 0 !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
  text-align: left !important;
  font-size: var(--step--1) !important;
  color: var(--ink-faint) !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
  color: var(--ink) !important;
  font-size: var(--step--1) !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select {
  min-height: 48px;
  border-color: var(--paper-edge) !important;
  border-radius: var(--radius-s) !important;
  font-size: 1rem !important; /* 16px minimum stops iOS zooming the field on focus */
  color: var(--ink) !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  margin-bottom: 0 !important;
}
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  min-height: 52px !important;
  background-color: var(--accent) !important;
  border-radius: var(--radius-s) !important;
  font-size: var(--step-0) !important;
}
.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background-color: var(--accent-deep) !important;
}

.dialog #mlb2-6133410.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p,
.dialog #mlb2-6133411.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  text-align: center !important;
  color: var(--ink) !important;
}

/* Focus ring. Not marked !important — the outline property is unset by the
   vendor sheet, so normal cascade order is enough here. */
.dialog .ml-form-embedContainer .ml-form-fieldRow input:focus-visible,
.dialog .ml-form-embedContainer .ml-form-fieldRow .custom-select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12a. Collapsed navigation

   Set at 900px to match the layout breakpoint, so iPad portrait (768px) —
   a device with only fingers — gets the touch-sized menu rather than the
   desktop bar. The JS mirrors this width.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; margin-inline-start: auto; }

  .nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2xs);
    background: var(--paper);
    border-bottom: 1px solid var(--paper-edge);
    box-shadow: var(--shadow-lift);
  }
  .nav__links[hidden] { display: none; }
  .nav__link { padding: var(--space-s); font-size: var(--step-0); text-align: center; }
}

/* The panel ships with hidden in the markup so it is never painted open
   before the script runs. Above the breakpoint it is always visible —
   stated here too, so a failed main.js cannot leave the menu unreachable. */
@media (min-width: 901px) {
  .nav__links[hidden] { display: flex; }
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .event__grid,
  .event--sage .event__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .event__art { order: -1; max-width: 240px; margin-inline: auto; }
  .event--sage .event__art { order: -1; }

  .author__grid { grid-template-columns: 1fr; gap: var(--space-m); }
}

@media (max-width: 720px) {
  :root { --space-3xl: 4.5rem; --space-2xl: 3rem; }

  /* Stacked, not side by side: two half-width columns leave no room for
     finger-sized register buttons on a phone. Each button stretches to the
     full card width, directly under its own conference. */
  .hero__dates { flex-direction: column; }
  .hero__dates > li + li { border-left: 0; border-top: 1px solid var(--paper-edge); }
  .hero__register { align-self: stretch; width: auto; }
  .hero__date { text-align: left; padding: var(--space-s) var(--space-xs); }

  .facts { grid-template-columns: 1fr; }
  .facts__row:nth-child(odd)  { padding-right: 0; }
  .facts__row:nth-child(even) { padding-left: 0; border-left: 0; }

  .event__cta { flex-direction: column; align-items: stretch; }
  .event__cta .btn { width: 100%; }
  .event__cta-note { max-width: none; text-align: center; }

  .footer__logos { gap: var(--space-l); }
  .footer__logos img { height: 46px; }

  /* Full-height sheet: a six-field form needs the room on a phone.
     vh first as the Safari 15.3 and older fallback, dvh right after. */
  .dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  /* Extra room under the submit button so it never sits flush against the
     bottom edge. (No env() safe-area here: without viewport-fit=cover those
     insets always resolve to 0, and iOS already shrinks the viewport for the
     home indicator on its own.) */
  .dialog__body { padding-bottom: var(--space-l); }
}

/* --------------------------------------------------------------------------
   13. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .nav, .hero__dates, .btn, .dialog { display: none !important; }
  body { background: #fff; }
  .event, .author { break-inside: avoid; border: 0; }
}