/* Alternate full designs (own fonts, colors, layout). Applied with <html data-design="studio|aurora">. */

/* ====================== STUDIO: neo-brutalist, bold, flat ====================== */
[data-design="studio"] {
  --ink: #0a0a0a; --ink-soft: #1f1f1f; --paper: #eef2f7; --paper-2: #ffffff; --line: #0a0a0a;
  --coral: #ff2e93; --coral-deep: #0a0a0a; --leaf: #12d6df; --sun: #ff2e93; --muted: #3a3a3a;
  --surface: #ffffff; --ink-deep: #0a0a0a; --hl: #12d6df; --radius: 0px;
  --shadow: 6px 6px 0 #0a0a0a;
  --on-sun: #0a0a0a; --on-sun-soft: #0a0a0a; --sun-em: #ffffff; --sun-shadow: #0a0a0a;
  --contact-bg: #0a0a0a; --contact-ink: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
}
[data-design="studio"] body { font-family: 'Space Grotesk', system-ui, sans-serif; background: var(--paper); }
[data-design="studio"] h1, [data-design="studio"] h2, [data-design="studio"] h3, [data-design="studio"] blockquote {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.045em; line-height: .98;
}
[data-design="studio"] h1 { font-size: clamp(52px, 8vw, 110px); text-transform: uppercase; }
[data-design="studio"] h2 { font-size: clamp(34px, 5vw, 66px); text-transform: uppercase; }
[data-design="studio"] em { font-style: normal; background: var(--coral); color: #0a0a0a; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-design="studio"] .kicker, [data-design="studio"] .eyebrow, [data-design="studio"] .mono,
[data-design="studio"] .card-no, [data-design="studio"] footer, [data-design="studio"] .hero-photo figcaption, [data-design="studio"] .steps span {
  font-family: 'Space Mono', monospace; font-weight: 700;
}
[data-design="studio"] .kicker { display: inline-block; background: #0a0a0a; color: #fff; padding: 5px 10px; }

/* header */
[data-design="studio"] .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 3px solid #0a0a0a; }
[data-design="studio"] .site-header.scrolled { box-shadow: none; border-bottom-color: #0a0a0a; }
[data-design="studio"] .wordmark { letter-spacing: -.07em; }
[data-design="studio"] nav a { color: #0a0a0a; text-transform: uppercase; font-size: 13px; font-family: 'Space Mono', monospace; font-weight: 700; }
[data-design="studio"] nav a:hover { background: var(--leaf); }
[data-design="studio"] nav .nav-cta { background: var(--leaf); color: #0a0a0a; border: 3px solid #0a0a0a; border-radius: 0; padding: 7px 14px; box-shadow: 4px 4px 0 #0a0a0a; }
[data-design="studio"] nav .nav-cta:hover { background: var(--coral); }

/* buttons */
[data-design="studio"] .button { background: var(--coral); color: #0a0a0a; border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 6px 6px 0 #0a0a0a; text-transform: uppercase; font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: .02em; }
[data-design="studio"] .button:hover { background: var(--leaf); transform: translate(3px, 3px); box-shadow: 3px 3px 0 #0a0a0a; }
[data-design="studio"] .button.light { background: var(--leaf); color: #0a0a0a; border-color: #fff; box-shadow: 6px 6px 0 #fff; }
[data-design="studio"] .button.light:hover { background: var(--coral); box-shadow: 3px 3px 0 #fff; }
[data-design="studio"] .text-link { border-bottom: 3px solid #0a0a0a; text-transform: uppercase; font-family: 'Space Mono', monospace; }
[data-design="studio"] .text-link:hover { background: var(--leaf); color: #0a0a0a; }

/* hero: photo left, copy right */
[data-design="studio"] .hero { grid-template-columns: .8fr 1.2fr; gap: 64px; }
[data-design="studio"] .hero-photo { order: -1; justify-self: start; max-width: 440px; }
[data-design="studio"] .hero-photo::before { inset: 0; transform: translate(16px, 16px); background: var(--leaf); border: 3px solid #0a0a0a; border-radius: 0; }
[data-design="studio"] .hero-photo img { border: 3px solid #0a0a0a; border-radius: 0; box-shadow: none; }
[data-design="studio"] .hero-photo figcaption { background: var(--coral); color: #0a0a0a; border: 3px solid #0a0a0a; border-radius: 0; transform: rotate(-3deg); left: -14px; box-shadow: 4px 4px 0 #0a0a0a; }
[data-design="studio"] .eyebrow { background: #fff; border: 3px solid #0a0a0a; border-radius: 0; color: #0a0a0a; font-weight: 700; }
[data-design="studio"] .lede { color: #1f1f1f; font-size: 20px; font-weight: 500; }
[data-design="studio"] .facts { border-top: 0; padding: 0; gap: 14px; }
[data-design="studio"] .facts li { border: 3px solid #0a0a0a; background: #fff; padding: 10px 16px; box-shadow: 4px 4px 0 #0a0a0a; }
[data-design="studio"] .facts strong { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; }
[data-design="studio"] .facts span { color: #3a3a3a; }

/* about: copy left, photo right */
[data-design="studio"] .about { grid-template-columns: 1.2fr .8fr; border-top: 3px solid #0a0a0a; }
[data-design="studio"] .about-photo { order: 2; }
[data-design="studio"] .about-photo img { border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 12px 12px 0 var(--coral); }
[data-design="studio"] .about-copy p:not(.kicker) { color: #1f1f1f; font-weight: 500; }
[data-design="studio"] .tags li { border: 2px solid #0a0a0a; border-radius: 0; background: #fff; font-weight: 700; font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; }
[data-design="studio"] .tags li:nth-child(odd) { background: var(--leaf); }

/* cards */
[data-design="studio"] .card { background: #fff; border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 8px 8px 0 #0a0a0a; }
[data-design="studio"] .card:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 #0a0a0a; }
[data-design="studio"] .card.accent { background: var(--coral); border-color: #0a0a0a; }
[data-design="studio"] .card:nth-child(3) { background: var(--leaf); }
[data-design="studio"] .card h3 { text-transform: uppercase; font-size: 28px; }
[data-design="studio"] .card p:not(.card-no) { color: #0a0a0a; font-weight: 500; }
[data-design="studio"] .card ul { border-top: 3px solid #0a0a0a; font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: 11px; }
[data-design="studio"] .card-no, [data-design="studio"] .card.accent .card-no { color: #0a0a0a; }

/* workspace */
[data-design="studio"] .workspace { background: var(--leaf); color: #0a0a0a; border-block: 3px solid #0a0a0a; }
[data-design="studio"] .workspace .kicker { background: #0a0a0a; color: #fff; }
[data-design="studio"] .workspace .sub { color: #0a0a0a; font-weight: 500; }
[data-design="studio"] .workspace em { color: #0a0a0a; background: #fff; }
[data-design="studio"] .bento figure { border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 8px 8px 0 #0a0a0a; background: #fff; }
[data-design="studio"] .bento figcaption { left: 0; right: 0; bottom: 0; border-radius: 0; background: #fff; color: #0a0a0a; border-top: 3px solid #0a0a0a; -webkit-backdrop-filter: none; backdrop-filter: none; font-weight: 500; }
[data-design="studio"] .bento figcaption strong { color: #0a0a0a; background: var(--coral); padding: 0 4px; }

/* steps */
[data-design="studio"] .steps li { background: #fff; border: 3px solid #0a0a0a; padding: 20px; box-shadow: 6px 6px 0 #0a0a0a; }
[data-design="studio"] .steps li:nth-child(even) { background: var(--coral); }
[data-design="studio"] .steps span { color: #0a0a0a; font-size: 14px; }
[data-design="studio"] .steps h3 { text-transform: uppercase; font-size: 22px; }
[data-design="studio"] .steps p { color: #0a0a0a; font-weight: 500; }

/* sunny */
[data-design="studio"] .sunny { background: var(--coral); border-bottom: 3px solid #0a0a0a; }
[data-design="studio"] .sunny-photo img { border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 12px 12px 0 #0a0a0a; }
[data-design="studio"] .sunny .kicker { background: #0a0a0a; color: #fff; }
[data-design="studio"] .sunny em { background: #fff; color: #0a0a0a; }
[data-design="studio"] .sunny blockquote { font-style: normal; text-transform: uppercase; font-size: clamp(20px, 2.4vw, 28px); border-left: 8px solid #0a0a0a; }
[data-design="studio"] .sunny-copy p:not(.kicker):not(.mono) { font-weight: 500; }

/* beyond + contact + footer */
[data-design="studio"] .beyond-card { background: #fff; border: 3px solid #0a0a0a; border-radius: 0; box-shadow: 12px 12px 0 #0a0a0a; }
[data-design="studio"] .beyond-card img { border: 3px solid #0a0a0a; border-radius: 0; }
[data-design="studio"] .beyond-card p:not(.kicker) { color: #0a0a0a; font-weight: 500; }
[data-design="studio"] .contact .kicker { background: var(--coral); color: #0a0a0a; opacity: 1; }
[data-design="studio"] .contact h2 { font-size: clamp(44px, 8vw, 104px); max-width: 1000px; }
[data-design="studio"] footer { border-top: 3px solid #0a0a0a; color: #0a0a0a; margin-top: 0; padding: 20px 0; }

/* ====================== AURORA: dark, glass, centered ====================== */
[data-design="aurora"] {
  --ink: #e9edfb; --ink-soft: #aab3d0; --paper: #060914; --paper-2: rgba(255,255,255,.06); --line: rgba(255,255,255,.12);
  --coral: #22d3ee; --coral-deep: #67e8f9; --leaf: rgba(139,92,246,.2); --sun: #1d1b4b; --muted: #8a94b4;
  --surface: rgba(255,255,255,.045); --ink-deep: #03050c; --hl: #67e8f9; --radius: 22px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.8);
  --on-sun: #ffffff; --on-sun-soft: #c7d2fe; --sun-em: #67e8f9; --sun-shadow: rgba(34,211,238,.55);
  --contact-bg: linear-gradient(120deg, #6d28d9, #0891b2); --contact-ink: #ffffff;
}
[data-design="aurora"] body {
  font-family: 'Inter', system-ui, sans-serif; color: var(--ink);
  background: #060914 radial-gradient(900px 600px at 15% -5%, rgba(109,40,217,.35), transparent 60%), radial-gradient(800px 600px at 90% 8%, rgba(8,145,178,.3), transparent 60%);
  background-attachment: fixed;
}
[data-design="aurora"] h1, [data-design="aurora"] h2, [data-design="aurora"] h3, [data-design="aurora"] blockquote {
  font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: -.04em; line-height: 1.08;
}
[data-design="aurora"] h1 { font-size: clamp(44px, 7.4vw, 96px); }
[data-design="aurora"] em { font-style: normal; font-weight: 600; background: linear-gradient(100deg, #67e8f9, #a78bfa 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-design="aurora"] .kicker, [data-design="aurora"] .eyebrow, [data-design="aurora"] .mono, [data-design="aurora"] .card-no,
[data-design="aurora"] footer, [data-design="aurora"] .hero-photo figcaption, [data-design="aurora"] .steps span {
  font-family: 'JetBrains Mono', monospace;
}
[data-design="aurora"] .kicker { color: #67e8f9; }
[data-design="aurora"] .sub, [data-design="aurora"] .lede { color: var(--ink-soft); }

/* header */
[data-design="aurora"] .site-header { background: rgba(6,9,20,.6); }
[data-design="aurora"] .site-header.scrolled { border-bottom-color: var(--line); }
[data-design="aurora"] nav a { color: var(--ink-soft); }
[data-design="aurora"] nav a:hover { color: #fff; }
[data-design="aurora"] nav .nav-cta { background: linear-gradient(100deg, #22d3ee, #8b5cf6); color: #060914; }
[data-design="aurora"] nav .nav-cta:hover { background: #fff; color: #060914; }
[data-design="aurora"] .button { background: linear-gradient(100deg, #22d3ee, #8b5cf6); color: #060914; box-shadow: 0 10px 30px -10px rgba(34,211,238,.6); }
[data-design="aurora"] .button:hover { background: #fff; color: #060914; }
[data-design="aurora"] .button.light { background: #fff; color: #060914; box-shadow: none; }
[data-design="aurora"] .text-link { border-bottom-color: #22d3ee; }
[data-design="aurora"] .text-link:hover { color: #67e8f9; }

/* hero: centered text, wide photo below */
[data-design="aurora"] .hero { grid-template-columns: 1fr; gap: 56px; text-align: center; padding: 56px 0 90px; }
[data-design="aurora"] .hero-copy { display: flex; flex-direction: column; align-items: center; }
[data-design="aurora"] .eyebrow { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
[data-design="aurora"] .lede { margin-inline: auto; max-width: 600px; }
[data-design="aurora"] .actions { justify-content: center; }
[data-design="aurora"] .facts { justify-content: center; border-top-color: var(--line); width: min(560px, 100%); }
[data-design="aurora"] .facts li { align-items: center; }
[data-design="aurora"] .facts span { color: var(--muted); }
[data-design="aurora"] .hero-photo { justify-self: center; max-width: 980px; }
[data-design="aurora"] .hero-photo::before { inset: 10% 8% -8% 8%; background: linear-gradient(100deg, #22d3ee, #8b5cf6, #f0abfc); filter: blur(60px); opacity: .55; border-radius: 40px; }
[data-design="aurora"] .hero-photo img { aspect-ratio: 16/8; object-position: 50% 24%; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
[data-design="aurora"] .hero-photo figcaption { left: 24px; bottom: 24px; background: rgba(6,9,20,.7); color: #fff; border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: none; }

/* about: arch photo, glass copy panel */
[data-design="aurora"] .about { border-top-color: var(--line); }
[data-design="aurora"] .about-photo { max-width: 400px; justify-self: center; }
[data-design="aurora"] .about-photo img { border-radius: 999px 999px 28px 28px; aspect-ratio: 3/4; border: 1px solid var(--line); box-shadow: 0 0 0 10px rgba(139,92,246,.12), var(--shadow); }
[data-design="aurora"] .about-copy p:not(.kicker) { color: var(--ink-soft); }
[data-design="aurora"] .tags li { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* cards */
[data-design="aurora"] .card { background: var(--surface); border-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
[data-design="aurora"] .card:hover { border-color: rgba(34,211,238,.6); box-shadow: 0 20px 50px -24px rgba(34,211,238,.5); }
[data-design="aurora"] .card.accent { background: linear-gradient(160deg, rgba(139,92,246,.35), rgba(34,211,238,.18)); border-color: rgba(167,139,250,.5); }
[data-design="aurora"] .card p:not(.card-no) { color: var(--ink-soft); }
[data-design="aurora"] .card ul { border-top-color: var(--line); color: var(--ink); }
[data-design="aurora"] .card.accent .card-no { color: var(--ink-soft); }

/* workspace: no band, floating glass tiles */
[data-design="aurora"] .workspace { background: transparent; color: var(--ink); padding: 90px 0; }
[data-design="aurora"] .workspace .kicker { color: #67e8f9; }
[data-design="aurora"] .workspace .sub { color: var(--ink-soft); }
[data-design="aurora"] .bento figure { border: 1px solid var(--line); box-shadow: var(--shadow); }
[data-design="aurora"] .bento figcaption { background: rgba(6,9,20,.7); border: 1px solid var(--line); }

/* steps */
[data-design="aurora"] .steps li { border-top: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
[data-design="aurora"] .steps span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(100deg, #22d3ee, #8b5cf6); color: #060914; font-weight: 700; }
[data-design="aurora"] .steps p { color: var(--ink-soft); }

/* sunny */
[data-design="aurora"] .sunny { background: linear-gradient(120deg, #2e1065, #164e63); }
[data-design="aurora"] .sunny-photo img { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -20px var(--sun-shadow); }
[data-design="aurora"] .sunny blockquote { font-style: normal; border-left-color: #22d3ee; font-weight: 500; }
[data-design="aurora"] .sunny-copy p:not(.kicker):not(.mono) { color: #dbe4ff; }

/* beyond + contact + footer */
[data-design="aurora"] .beyond-card { background: var(--surface); border-color: var(--line); }
[data-design="aurora"] .beyond-card p:not(.kicker) { color: var(--ink-soft); }
[data-design="aurora"] .contact .kicker { color: #fff; }
[data-design="aurora"] .button.light:hover { background: #67e8f9; }
[data-design="aurora"] footer { color: var(--muted); }

/* ====================== Responsive ====================== */
@media (max-width: 960px) {
  [data-design="studio"] .hero, [data-design="studio"] .about { grid-template-columns: 1fr; }
  [data-design="studio"] .about-photo { order: 0; }
  [data-design="studio"] .hero-photo { max-width: 400px; justify-self: center; }
  [data-design="studio"] .hero-photo::before { transform: translate(10px, 10px); inset: 0; }
  [data-design="aurora"] .hero-photo img { aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  [data-design="studio"] h1 { font-size: 44px; }
  [data-design="studio"] .card, [data-design="studio"] .steps li, [data-design="studio"] .bento figure { box-shadow: 5px 5px 0 #0a0a0a; }
  [data-design="aurora"] h1 { font-size: 40px; }
  [data-design="aurora"] .hero-photo img { aspect-ratio: 4/5; object-position: 50% 20%; }
}

[data-design="aurora"] .facts strong { font-family: 'Sora', sans-serif; font-weight: 600; }

/* Theme picker overrides per design */
[data-design="studio"] .theme-picker { border-radius: 0; border: 3px solid #fff; }
[data-design="studio"] .theme-picker button { border-radius: 0; }
[data-design="aurora"] .theme-picker { background: rgba(20,24,44,.9); border: 1px solid var(--line); }