/* Aesthetic treatments sit between the base CSS and the user's component controls.
   Colors and fonts always come from the editable theme tokens. */

/* Swiss Grid — architectural rules, generous white space, decisive type. */
.public-page[data-aesthetic="swiss"] .site-rail { border-bottom: 3px solid var(--theme-ink); }
.public-page[data-aesthetic="swiss"] .site-rail__brand { font-weight: 900; letter-spacing: .04em; }
.public-page[data-aesthetic="swiss"] .brand-mark { border-radius: 0; }
.public-page[data-aesthetic="swiss"] .profile { background: transparent; border: 0; box-shadow: var(--theme-shadow); overflow: visible; }
.public-page:not(.preview-surface)[data-aesthetic="swiss"] .profile { min-height: 0; padding: 48px 0 0; }
.public-page[data-aesthetic="swiss"] .profile::before { display: none; }
.public-page[data-aesthetic="swiss"] .profile h1 { text-transform: uppercase; font-weight: 900; letter-spacing: -.075em; line-height: .99; }
.public-page[data-aesthetic="swiss"] .profile__foot { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-top: 2px solid var(--theme-ink); }
.public-page[data-aesthetic="swiss"] .directory { border-top: 3px solid var(--theme-ink); padding-top: 18px; }
.public-page[data-aesthetic="swiss"] .section-heading h2 { text-transform: uppercase; font-weight: 800; letter-spacing: -.07em; }
.public-page[data-aesthetic="swiss"] .link-card__number { font-family: 'Courier New', monospace; font-weight: 800; }
.public-page[data-aesthetic="swiss"] .link-card__arrow { border-radius: 0; }

/* Brutalist — solid ink and deliberate hard shadows. */
.public-page[data-aesthetic="brutalist"] .site-rail { border-bottom: 3px solid var(--theme-ink); }
.public-page[data-aesthetic="brutalist"] .site-rail__brand { font-weight: 900; letter-spacing: -.03em; }
.public-page[data-aesthetic="brutalist"] .brand-mark, .public-page[data-aesthetic="brutalist"] .avatar { border-radius: 0; }
.public-page[data-aesthetic="brutalist"] .profile { border: 3px solid var(--theme-ink); box-shadow: var(--theme-shadow); }
.public-page[data-aesthetic="brutalist"] .profile::before { opacity: .35; }
.public-page[data-aesthetic="brutalist"] .profile h1 { text-transform: uppercase; font-weight: 900; line-height: .98; letter-spacing: -.055em; }
.public-page[data-aesthetic="brutalist"] .profile__foot { border-top: 3px solid var(--theme-ink); }
.public-page[data-aesthetic="brutalist"] .eyebrow { font-weight: 900; letter-spacing: .08em; }
.public-page[data-aesthetic="brutalist"] .link-card { border-color: var(--theme-ink); }
.public-page[data-aesthetic="brutalist"][data-cards="outlined"] .link-card { border: 2px solid var(--theme-ink); box-shadow: var(--theme-card-shadow); }
.public-page[data-aesthetic="brutalist"] .link-card__icon, .public-page[data-aesthetic="brutalist"] .link-card__arrow { border-radius: 0; }
.public-page[data-aesthetic="brutalist"] .public-footer { border-top: 3px solid var(--theme-ink); }

/* Glasshouse — translucency, light bloom, quiet reflections. */
.public-page[data-aesthetic="glass"] .site-rail { border-color: color-mix(in srgb, var(--theme-border) 50%, transparent); }
.public-page[data-aesthetic="glass"] .profile {
  background: color-mix(in srgb, var(--theme-surface) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-ink) 16%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--theme-shadow);
}
.public-page[data-aesthetic="glass"] .profile::before { background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 38%, transparent), transparent 68%); }
.public-page[data-aesthetic="glass"] .profile h1 { font-weight: 600; letter-spacing: -.065em; }
.public-page[data-aesthetic="glass"] .avatar { box-shadow: 0 0 0 7px color-mix(in srgb, var(--theme-accent) 17%, transparent), 0 15px 40px #0003; }
.public-page[data-aesthetic="glass"] .link-card { background: color-mix(in srgb, var(--theme-surface) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: color-mix(in srgb, var(--theme-ink) 16%, transparent); }
.public-page[data-aesthetic="glass"] .ambient--one { opacity: .85; filter: blur(50px); }
.public-page[data-aesthetic="glass"] .ambient--two { opacity: .9; filter: blur(60px); }

/* After Dark — cinematic serif, double rules, and negative space. */
.public-page[data-aesthetic="noir"] .site-rail { border-bottom: 3px double var(--theme-accent); }
.public-page[data-aesthetic="noir"] .site-rail__brand { font-family: var(--theme-heading); font-size: 14px; letter-spacing: .12em; }
.public-page[data-aesthetic="noir"] .profile { background: transparent; border: 0; border-top: 1px solid var(--theme-border); border-bottom: 1px solid var(--theme-border); box-shadow: var(--theme-shadow); border-radius: 0; }
.public-page:not(.preview-surface)[data-aesthetic="noir"] .profile { padding-top: 54px; }
.public-page[data-aesthetic="noir"] .profile::before { opacity: .18; }
.public-page[data-aesthetic="noir"] .profile h1 { font-style: italic; letter-spacing: -.055em; }
.public-page[data-aesthetic="noir"] .section-heading h2 { font-style: italic; }
.public-page[data-aesthetic="noir"] .link-card__number { color: var(--theme-accent); font-style: italic; }
.public-page[data-aesthetic="noir"] .closing p { letter-spacing: .04em; }

/* Playroom — chunky shapes and lively rhythm. */
.public-page[data-aesthetic="playful"] .brand-mark { border-radius: 10px; transform: rotate(-12deg); }
.public-page[data-aesthetic="playful"][data-shadow="soft"] { --theme-shadow: 0 15px 0 color-mix(in srgb, var(--theme-accent) 28%, var(--theme-page)); }
.public-page[data-aesthetic="playful"] .profile { border: 2px solid var(--theme-accent); box-shadow: var(--theme-shadow); }
.public-page[data-aesthetic="playful"] .profile::before { background: radial-gradient(circle at 65% 40%, color-mix(in srgb, var(--theme-accent) 22%, transparent) 0 35%, transparent 36%); }
.public-page[data-aesthetic="playful"] .profile h1 { font-weight: 800; letter-spacing: -.04em; }
.public-page[data-aesthetic="playful"] .avatar { transform: rotate(-7deg); border: 3px solid var(--theme-surface); }
.public-page[data-aesthetic="playful"] .link-card:nth-child(even) { rotate: .6deg; }
.public-page[data-aesthetic="playful"] .link-card:nth-child(odd) { rotate: -.4deg; }
.public-page[data-aesthetic="playful"] .link-card__arrow { background: var(--theme-accent); color: var(--theme-surface); border: 0; }
.public-page[data-aesthetic="playful"] .closing__ornament { display: inline-block; rotate: -15deg; }

/* Indie Zine — printed paper, odd alignment, imperfect edges. */
.public-page[data-aesthetic="zine"] .site-rail__brand { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.public-page[data-aesthetic="zine"] .brand-mark { border-radius: 0; transform: rotate(12deg); }
.public-page[data-aesthetic="zine"] .profile { border: 2px dashed var(--theme-ink); box-shadow: var(--theme-shadow); rotate: -.6deg; }
.public-page[data-aesthetic="zine"] .profile::before { opacity: .12; }
.public-page[data-aesthetic="zine"] .profile h1 { text-transform: uppercase; font-weight: 800; letter-spacing: -.055em; }
.public-page[data-aesthetic="zine"] .eyebrow { text-decoration: underline; text-underline-offset: 3px; }
.public-page[data-aesthetic="zine"] .link-card { border-style: dashed; }
.public-page[data-aesthetic="zine"][data-cards="outlined"] .link-card { border-style: dashed; box-shadow: var(--theme-card-shadow); }
.public-page[data-aesthetic="zine"] .link-card:nth-child(even) { rotate: .5deg; }
.public-page[data-aesthetic="zine"] .link-card__icon { border: 1px dashed var(--theme-accent); }

/* Terminal — monochrome code cues and deliberate dotted borders. */
.public-page[data-aesthetic="terminal"] .site-rail { border-bottom: 1px dashed var(--theme-accent); }
.public-page[data-aesthetic="terminal"] .site-rail__brand::before { content: '> '; color: var(--theme-accent); }
.public-page[data-aesthetic="terminal"] .brand-mark { border-radius: 0; }
.public-page[data-aesthetic="terminal"] .profile { background: transparent; border: 1px dashed var(--theme-accent); box-shadow: var(--theme-shadow); }
.public-page[data-aesthetic="terminal"] .profile::before { display: none; }
.public-page[data-aesthetic="terminal"] .profile h1 { font-weight: 700; letter-spacing: -.045em; }
.public-page[data-aesthetic="terminal"] .profile__intro::before { content: '$ '; }
.public-page[data-aesthetic="terminal"] .link-card__arrow { border-radius: 0; border-color: var(--theme-accent); }
.public-page[data-aesthetic="terminal"][data-cards="outlined"] .link-card { border-style: dashed; }
.public-page[data-aesthetic="terminal"] .public-footer { border-top: 1px dashed var(--theme-accent); }

/* Pop Poster — an oversized graphic field and punchy labels. */
.public-page[data-aesthetic="poster"] .site-rail { border-bottom: 4px solid var(--theme-accent); }
.public-page[data-aesthetic="poster"] .site-rail__brand { font-size: 13px; letter-spacing: -.02em; }
.public-page[data-aesthetic="poster"] .profile { background: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-surface)); border: 3px solid var(--theme-accent); box-shadow: var(--theme-shadow); }
.public-page[data-aesthetic="poster"] .profile::before { opacity: .45; }
.public-page[data-aesthetic="poster"] .profile::after { color: color-mix(in srgb, var(--theme-accent) 45%, transparent); }
.public-page[data-aesthetic="poster"] .profile h1 { text-transform: uppercase; line-height: .94; font-weight: 900; letter-spacing: -.07em; }
.public-page[data-aesthetic="poster"] .section-heading h2 { text-transform: uppercase; line-height: .96; letter-spacing: -.06em; }
.public-page[data-aesthetic="poster"] .link-card__number { font-weight: 900; }
.public-page[data-aesthetic="poster"] .link-card__arrow { background: var(--theme-accent); color: var(--theme-surface); border: 0; }

/* Museum — fine display serif in a double frame. */
.public-page[data-aesthetic="museum"] .site-rail { border-bottom: 3px double var(--theme-ink); }
.public-page[data-aesthetic="museum"] .site-rail__brand { font-family: var(--theme-heading); font-size: 14px; letter-spacing: .08em; }
.public-page[data-aesthetic="museum"] .profile { border: 5px double var(--theme-border); box-shadow: var(--theme-shadow); }
.public-page[data-aesthetic="museum"] .profile::before { opacity: .22; }
.public-page[data-aesthetic="museum"] .profile h1 { font-style: italic; font-weight: 400; }
.public-page[data-aesthetic="museum"] .section-heading { border-bottom: 1px solid var(--theme-border); padding-bottom: 18px; }
.public-page[data-aesthetic="museum"] .section-heading h2 { font-style: italic; }
.public-page[data-aesthetic="museum"][data-cards="outlined"] .link-card { border: 3px double var(--theme-border); }
.public-page[data-aesthetic="museum"] .link-card__arrow { border: 0; }
.public-page[data-aesthetic="museum"] .public-footer { border-top: 3px double var(--theme-ink); }

/* Keep the full compositions legible in the editor's reduced preview. */
.public-page.preview-surface[data-aesthetic="swiss"] .directory { padding-top: 9px; }
.public-page.preview-surface[data-aesthetic="brutalist"] .profile { border-width: 2px; }
.public-page.preview-surface[data-aesthetic="playful"][data-shadow="soft"] { --theme-shadow: 0 5px 0 color-mix(in srgb, var(--theme-accent) 28%, var(--theme-page)); }
.public-page.preview-surface[data-aesthetic="poster"] .profile { border-width: 2px; }
.public-page.preview-surface[data-aesthetic="museum"] .profile { border-width: 3px; }

@media (max-width: 620px) {
  .public-page:not(.preview-surface)[data-aesthetic="swiss"] .profile { padding-top: 28px; }
  .public-page:not(.preview-surface)[data-aesthetic="noir"] .profile { padding-top: 30px; }
  .public-page[data-aesthetic="zine"] .profile { rotate: 0deg; }
  .public-page[data-aesthetic="zine"] .link-card,
  .public-page[data-aesthetic="playful"] .link-card { rotate: 0deg; }
}