/* Per-skin layout overrides. themes.css sets colors, type slots, radius
 * scale and decoration; this file rearranges the actual page geometry
 * per skin — container width, section head alignment, hero proportions,
 * icon wrapper shapes, section rhythm. */

/* ============ ATELIER — editorial magazine ============ */
[data-theme="atelier"] h1,
[data-theme="atelier"] h2 { font-style: italic; }
[data-theme="atelier"] .lead:first-of-type::first-letter {
  font-family: var(--ff-theme-display);
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.15em 0 0;
  color: var(--color-primary);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 440;
}
[data-theme="atelier"] .section-head { border-bottom: 1px solid var(--line-mid); padding-bottom: var(--sp-4); }
[data-theme="atelier"] .site-footer { background: var(--surface-0); }
[data-theme="atelier"] .card__icon {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
}

/* ============ HALCYON — HUD narrow ============ */
[data-theme="halcyon"] .container { max-width: 1180px; }
[data-theme="halcyon"] .section-head { text-transform: uppercase; letter-spacing: 0.02em; }
[data-theme="halcyon"] .divider { background: linear-gradient(90deg, transparent, var(--color-accent), transparent); height: 2px; }
[data-theme="halcyon"] .card { background-image: linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), var(--color-accent) 100%); background-size: 24px 1px; background-repeat: no-repeat; background-position: bottom left; }
[data-theme="halcyon"] .card__icon {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
}
[data-theme="halcyon"] .stat__num { font-variant-numeric: slashed-zero tabular-nums; }

/* ============ AURORA NOIR — center-stage, cyan glow ============ */
[data-theme="aurora-noir"] .section.ambient .section-head,
[data-theme="aurora-noir"] .section.ambient > .container > div[data-reveal]:first-child { text-align: center; margin-inline: auto; }
[data-theme="aurora-noir"] .section.ambient h1,
[data-theme="aurora-noir"] .section.ambient > .container > div[data-reveal]:first-child > .lead { margin-inline: auto; }
[data-theme="aurora-noir"] .section.ambient .btn-row { justify-content: center; }
[data-theme="aurora-noir"] h1, [data-theme="aurora-noir"] h2 { text-shadow: 0 0 24px color-mix(in oklab, var(--color-primary) 35%, transparent); }
[data-theme="aurora-noir"] .card__icon {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-primary), 0 0 16px -2px color-mix(in oklab, var(--color-primary) 60%, transparent);
}

/* ============ FIREFLY — full-bleed bold ============ */
[data-theme="firefly"] .blob { opacity: 0.6; filter: blur(38px); }
[data-theme="firefly"] .card { border-width: 2px; }
[data-theme="firefly"] .card__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}
[data-theme="firefly"] .btn--primary,
[data-theme="firefly"] .btn--accent { text-transform: uppercase; letter-spacing: 0.04em; }

/* ============ BIOMORPH — flowing asymmetric ============ */
[data-theme="biomorph"] .card__icon { border-radius: 42% 58% 50% 50%; }
[data-theme="biomorph"] .section-head { padding-left: var(--sp-4); border-left: 2px solid color-mix(in oklab, var(--color-primary) 50%, transparent); }
[data-theme="biomorph"] .blob { filter: blur(60px); opacity: 0.6; }

/* ============ MONOLITH — grid discipline ============ */
[data-theme="monolith"] .section-head { border-bottom: 2px solid var(--line-mid); padding-bottom: var(--sp-4); }
[data-theme="monolith"] .card__icon { border-radius: 4px; border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--line-mid)); background: color-mix(in oklab, var(--color-primary) 8%, var(--surface-2)); }
[data-theme="monolith"] .stat__num { font-variant-numeric: tabular-nums; }

/* ============ Site-wide scroll snap cue on hero → body boundary ============ */
/* Keeps the first ambient section feeling anchored; per-skin treatments
 * above already take care of typography/emphasis within it. */

/* ============ Icon drop-shadow per skin (swaps inside .card__icon i) ============ */
[data-theme="aurora-noir"] .card__icon svg { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--color-primary) 60%, transparent)); }
[data-theme="firefly"]     .card__icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
[data-theme="biomorph"]    .card__icon svg { filter: drop-shadow(0 2px 4px color-mix(in oklab, var(--color-primary) 35%, transparent)); }

/* ============ Watermark intensity per skin — some themes want quieter, some louder ============ */
[data-theme="atelier"]     .watermark { opacity: 0.05; }
[data-theme="atelier"]     .watermark-host:hover .watermark { opacity: 0.10; }
[data-theme="firefly"]     .watermark { opacity: 0.10; }
[data-theme="firefly"]     .watermark-host:hover .watermark { opacity: 0.18; }
[data-theme="aurora-noir"] .watermark { opacity: 0.08; }
[data-theme="aurora-noir"] .watermark svg { filter: drop-shadow(0 0 12px color-mix(in oklab, var(--color-primary) 40%, transparent)); }