/* SCEN page layouts v2. Mobile first. */
@layer components {
  /* ---------- hero: full screen, crossfading photos, centered stack ---------- */
  .hero { position: relative; min-height: calc(100svh - var(--chrome-h)); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sys-bg); }
  .hero__bg { position: absolute; inset: 0; z-index: 0; }
  .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease-in-out, transform 8s linear; }
  .hero__bg img.is-active { opacity: 1; transform: scale(1); }
  .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(12, 11, 10, 0.6) 0%, rgba(12, 11, 10, 0.35) 40%, rgba(12, 11, 10, 0.75) 100%); }
  .hero__noise { position: absolute; inset: 0; z-index: 2; opacity: 0.18; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; }
  .hero__content { position: relative; z-index: 3; text-align: center; width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; padding-block: var(--space-8) var(--space-9); display: grid; justify-items: center; gap: var(--space-5); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4); }
  .hero__eyebrow { display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sys-fg); opacity: 0.85; }
  .hero__eyebrow span { width: 2.5rem; height: 1px; background: var(--sys-fg-3); }
  .hero__title { font-family: var(--font-display); font-size: var(--text-hero); line-height: 0.98; letter-spacing: 0.06em; }
  .hero__title .line { display: block; }
  .hero__title .line--stroke { color: transparent; -webkit-text-stroke: 2px var(--sys-fg); text-shadow: none; }
  @media (min-width: 48em) { .hero__title { letter-spacing: 0.02em; } .hero__title .line--stroke { -webkit-text-stroke: 3px var(--sys-fg); } }
  .hero__title .line--accent { color: var(--sys-accent); }
  .hero__tagline { font-family: var(--font-body); font-size: var(--text-lg); font-style: italic; color: var(--sys-fg-2); letter-spacing: 0.02em; max-width: 40ch; }
  .hero__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem); }
  .hero__stat { text-align: center; }
  .hero__stat-num { display: block; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
  .hero__stat-label { font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600; color: var(--sys-fg-2); text-transform: uppercase; letter-spacing: 0.12em; }
  .hero__divider { width: 1px; height: 2.5rem; background: var(--sys-outline-strong); }
  .hero__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
  .hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sys-fg-3); text-decoration: none; }
  .hero__scroll span { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, var(--sys-fg-3), transparent); animation: scrollcue 2s var(--ease-in-out) infinite; }
  @keyframes scrollcue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  @media (max-width: 40em) { .hero__scroll { display: none; } }

  /* ---------- page head with faint photo backdrop ---------- */
  .pagehead { position: relative; padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--sys-outline); background: var(--sys-bg); overflow: hidden; }
  .pagehead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 85% 0%, var(--sys-accent-soft), transparent 60%); pointer-events: none; }
  .pagehead__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.22; -webkit-mask-image: linear-gradient(to bottom, black, transparent 95%); mask-image: linear-gradient(to bottom, black, transparent 95%); }
  .pagehead__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); }
  .pagehead > .container { position: relative; z-index: 2; }
  .pagehead h1 { max-width: 18ch; margin-block: var(--space-2) var(--space-4); }
  .pagehead .legend { margin-top: var(--space-5); }
  @media (min-width: 64em) { .pagehead { padding-block: var(--space-9) var(--space-8); } }

  /* ---------- event / meet detail ---------- */
  .ecard-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  .event-hero { position: relative; padding-block: var(--space-7); border-bottom: 1px solid var(--sys-outline); overflow: hidden; }
  .event-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 100% 0%, var(--sys-accent-mist), transparent 60%); pointer-events: none; }
  .event-hero__grid { position: relative; display: grid; gap: var(--space-6); }
  .event-hero__grid .ecard { max-width: 24rem; }
  @media (min-width: 56em) { .event-hero__grid { grid-template-columns: 1fr minmax(16rem, 22rem); gap: var(--space-9); align-items: start; } .event-hero { padding-block: var(--space-9); } }
  .event-cols { display: grid; gap: var(--space-6); }
  @media (min-width: 56em) { .event-cols { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; } }
  .event-aside { position: sticky; top: calc(var(--chrome-h) + var(--space-4)); }

  /* ---------- two-column with aside ---------- */
  .about__wide { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent); mask-image: linear-gradient(to bottom, black 75%, transparent); }
  .about__cols { display: grid; gap: var(--space-7); }
  @media (min-width: 56em) { .about__cols { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: var(--space-9); align-items: start; } .about__aside { position: sticky; top: calc(var(--chrome-h) + var(--space-4)); } }
  .vendor__split { display: grid; gap: var(--space-6); }
  .vendor__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
  @media (min-width: 56em) { .vendor__split { grid-template-columns: minmax(16rem, 1fr) 1.3fr; gap: var(--space-8); align-items: start; } .vendor__img { position: sticky; top: calc(var(--chrome-h) + var(--space-4)); } }
  .contact__cols { display: grid; gap: var(--space-7); }
  @media (min-width: 56em) { .contact__cols { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); align-items: start; } }
  .what { display: grid; gap: var(--space-7); }
  @media (min-width: 56em) { .what { grid-template-columns: 1.1fr 1fr; gap: var(--space-9); align-items: start; } }
  .next { display: grid; gap: var(--space-6); }
  @media (min-width: 56em) { .next { grid-template-columns: minmax(18rem, 26rem) 1fr; gap: var(--space-8); align-items: start; } }

  .offer--light { background: rgba(26, 24, 22, 0.05); border-color: rgba(26, 24, 22, 0.12); color: var(--sys-on-light); }
  .offer--light .offer__terms, .offer--light .offer__disclosure { color: rgba(26, 24, 22, 0.6); }
  .offer--light .offer__disclosure { border-color: rgba(26, 24, 22, 0.12); }
  .section--light .section-head h2 { color: var(--sys-on-light); }

  @media print {
    .header, .ticker, .dock, .menu, .footer, .btn, form, .lightbox { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .ecard { box-shadow: none; }
    a { text-decoration: none; color: inherit; }
  }
}