/* Preview H: keep the editorial structure, let the handmade work feel authored. */

/* The alpaca is the hero signature. It sits a touch smaller and lower, while the
   only saturated interface color remains the invitation action. */
.hero__art {
  right: -10%;
  bottom: -15%;
  width: min(59%, 950px);
}

.hero__glow { animation: none; }

.hero__note {
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.deck {
  display: grid;
  gap: 0.04em;
  padding-left: clamp(16px, 1.8vw, 26px);
  border-left: 2px solid var(--mark);
  line-height: 1.03;
}
.deck__lead { font-weight: 500; }
.deck__next {
  color: rgba(232, 232, 232, 0.68);
  font-weight: 300;
}

/* Metadata is small but deliberate, not microscopic. */
.tag,
.hero__foot-rule,
.rail__spec {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.seg__label,
.card__role,
.card__link,
.run__t,
.close__when {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* The facts stand on their own; repeated editorial scaffolding made the cards
   feel generated and added noise to an already long lineup. */
.card__fact::before { content: none; display: none; }

/* One readable sentence with emphasis, rather than white copy interrupted by
   disabled-looking gray fragments. */
.thesis__soft {
  color: rgba(232, 232, 232, 0.72);
  font-weight: 400;
}

.venue__address { font-style: normal; }
.venue__address a {
  display: inline-block;
  color: var(--meta-lit);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.venue__address a:hover { color: var(--white); }
.venue__address i {
  display: inline-block;
  margin-left: 0.2em;
  color: var(--mint);
  font-style: normal;
  font-size: 0.72em;
}

/* Give the hero a clean ending before the substation enters much lower in the
   argument. The image still arrives once with its section, then stays still. */
.thesis::before {
  top: 22%;
  right: -10%;
  bottom: -10%;
  width: min(60vw, 920px);
  background-position: 46% 62%;
  -webkit-mask-image: radial-gradient(ellipse 76% 66% at 74% 60%, #000 0%, rgba(0,0,0,.9) 43%, transparent 82%);
          mask-image: radial-gradient(ellipse 76% 66% at 74% 60%, #000 0%, rgba(0,0,0,.9) 43%, transparent 82%);
}

.thesis.is-in::before,
.no-js .thesis::before { opacity: 0.27; }

/* Logistics stay visible. They are reference material, so they do not need to
   perform on scroll. Their tighter rhythm also makes the final CTA arrive sooner. */
#agenda,
#venue,
#sponsors { --pad: clamp(58px, 8vw, 114px); }

#agenda .seg__label,
#agenda .run__i,
#venue .seg__label,
#venue .seg__head,
#venue .seg__intro,
#sponsors .seg__label {
  opacity: 1;
  transform: none;
  transition: none;
}

.lineup__cta { display: none; }
.rail__cta-short { display: none; }

@media (max-width: 860px) {
  /* Mobile layout hardening. iOS treats overflow on body alone inconsistently,
     so contain both roots and make every grid child explicitly shrinkable. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .seg {
    min-width: 0;
    overflow: hidden;
  }
  .seg__label {
    position: relative;
    top: auto;
    grid-column: 1;
    width: max-content;
    max-width: 100%;
  }
  .seg:not(.seg--nolabel) > .seg__label { grid-row: 1; }
  .seg:not(.seg--nolabel) > .seg__body {
    grid-column: 1;
    grid-row: 2;
  }
  .seg--nolabel > .seg__body {
    grid-column: 1;
    grid-row: 1;
  }
  .seg__body,
  .lede,
  .run,
  .run__i,
  .run__w,
  .venue__address,
  .marks {
    min-width: 0;
    max-width: 100%;
  }
  .lede,
  .run__w,
  .venue__address { overflow-wrap: break-word; }

  .hero__art {
    width: 118%;
    right: -30%;
    bottom: -9%;
  }

  .hero__note { font-size: 1rem; }

  .rail {
    gap: 10px;
    max-width: 100vw;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  .rail__mark {
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(0.8125rem, 3.8vw, 0.9375rem);
  }
  .rail__cta {
    flex: none;
    min-height: 44px;
    margin-left: auto;
    padding: 10px 15px;
    font-size: clamp(0.75rem, 3.3vw, 0.8125rem);
    white-space: nowrap;
  }

  .lineup__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -8px 0 30px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 201, 142, 0.34);
    color: var(--mint);
    font: 600 0.875rem/1.2 var(--sans);
    text-decoration: none;
  }
  .lineup__cta i { font-style: normal; }

  .marks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(16px, 5vw, 28px);
    width: 100%;
  }
  .mark {
    justify-self: start;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .thesis::before {
    top: 42%;
    right: -58%;
    bottom: -12%;
    width: 132%;
    background-position: 45% 64%;
  }
  .thesis.is-in::before,
  .no-js .thesis::before { opacity: 0.18; }
}

@media (max-width: 359px) {
  .rail__mark { font-size: 0.8125rem; }
  .rail__cta { padding-inline: 12px; }
  .rail__cta-full { display: none; }
  .rail__cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { transform: none; }
}