/* =====================================================================
   HermitMonster - couture.css   (persona reskin, loads last)
   Two worlds, one site:
     HERMIT  = "Devil Wears Prada" luxe editorial. Ivory, ink, champagne
               gold. Fraunces serif kept. Quiet, expensive, generous.
     MONSTER = Cyberpunk goth. Abyss black, acid green, magenta, cyan.
               Sharp, electric, dangerous. Mono accents.
   Content untouched. Reversible (remove the link). Tokens drive everything.
   ===================================================================== */

/* ---------- HERMIT: Devil Wears Prada ------------------------------- */
:root, :root[data-theme="light"], :root[data-mode="hermit"] {
  --paper:        #fdf6f0;   /* warm pastel cream */
  --paper-2:      #fffdfb;   /* raised near-white */
  --paper-3:      #f3e9f5;   /* sunken lilac wash */
  --ink:          #2f2545;   /* deep grape (legible, soft) */
  --ink-2:        #7a6f8e;   /* muted lilac-grey */
  --line:         rgba(47,37,69,.12);
  --line-strong:  rgba(47,37,69,.24);
  --accent:       #ff6f91;   /* crayon coral-pink */
  --accent-2:     #7c83ff;   /* crayon periwinkle */
  --accent-ink:   #2f2545;
  --spark:        #ffb13d;   /* crayon tangerine */
  --spark-text:   #a8500f;   /* legible amber for words */
  --glow-cyan:    #4fd0c8;   /* mint */
  --glow-violet:  #b07cff;   /* lilac */
  --panel-bg:     #2f2545;
  --panel-ink:    #fdf6f0;
  --cta-bg:       #2f2545;
  --cta-ink:      #fff7f1;
  --aurora-base:  #fdf6f0;
  --fx-neon:#ff6f91; --fx-neon-2:#7c83ff; --fx-cy:#4fd0c8;
}

/* ---------- MONSTER: Cyberpunk Goth --------------------------------- */
:root[data-theme="dark"], :root[data-mode="monster"] {
  --paper:        #060a1a;   /* near-black navy night */
  --paper-2:      #0c1430;
  --paper-3:      #142048;
  --ink:          #eaf1ff;   /* cool white (neon-lit) */
  --ink-2:        #9fb4e6;   /* light blue-grey */
  --line:         rgba(46,197,224,.20);
  --line-strong:  rgba(46,197,224,.40);
  --accent:       #f25fd8;   /* orchid neon pink */
  --accent-2:     #8e2de2;   /* electric purple */
  --accent-ink:   #11001f;
  --spark:        #2ec5e0;   /* neon cyan */
  --spark-text:   #6fe0f2;
  --glow-cyan:    #2ec5e0;   /* cyan */
  --glow-violet:  #8e2de2;
  --panel-bg:     #0c1430;
  --cta-bg:       #142048;
  --aurora-base:  #060a1a;
  --fx-neon:#f25fd8; --fx-neon-2:#8e2de2; --fx-cy:#2ec5e0;
}

/* Hermit pastel-crayon: soft accents, gentle CTA, no glow */
:root:not([data-mode="monster"]) .hero__canvas { opacity:.16; }
:root:not([data-mode="monster"]) .btn--primary { background: var(--ink); color: var(--cta-ink); box-shadow:none; }
:root:not([data-mode="monster"]) .eyebrow, :root:not([data-mode="monster"]) .hud-label { color: var(--accent); }
:root:not([data-mode="monster"]) .text-grad { background-image: linear-gradient(100deg,#ff6f91,#7c83ff,#ffb13d); }

/* Monster goth: tighter neon edges, electric CTA */
:root[data-mode="monster"] .btn--primary { background: var(--accent); color:#02110a; box-shadow: 0 0 24px -4px var(--accent); }
:root[data-mode="monster"] .hud-label { color: var(--accent); }
:root[data-mode="monster"] .work-card:hover, :root[data-mode="monster"] .tile:hover { box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -28px var(--accent-2); }

/* readable eyebrow on pale pastel */
:root:not([data-mode="monster"]) .eyebrow { color: var(--spark-text); opacity: 1; }
/* HUD labels: legible amber + full opacity (override studio.css .7) on light */
:root:not([data-mode="monster"]) .hud-label { color: var(--spark-text); opacity: 1; }

/* =========================================================
   PERSONALITY LAYOUT SWITCH: two different sites
   Hermit = airy, rounded, calm, centered editorial.
   Monster = dense, sharp, asymmetric, technical.
   ========================================================= */

/* HERMIT: soft + generous */
:root:not([data-mode="monster"]) .section { padding-block: clamp(6rem, 13vw, 12rem); }
:root:not([data-mode="monster"]) .work-card, :root:not([data-mode="monster"]) .tile,
:root:not([data-mode="monster"]) .cap, :root:not([data-mode="monster"]) .quote-card { border-radius: 28px; }
:root:not([data-mode="monster"]) .section-head { text-align: center; margin-inline: auto; max-width: 54ch; }
:root:not([data-mode="monster"]) .btn { border-radius: 100px; }

/* MONSTER: dense, sharp, left-driven, bracketed */
:root[data-mode="monster"] .section { padding-block: clamp(3rem, 7vw, 6rem); }
:root[data-mode="monster"] .work-card, :root[data-mode="monster"] .tile,
:root[data-mode="monster"] .cap, :root[data-mode="monster"] .quote-card { border-radius: 0; }
:root[data-mode="monster"] .btn { border-radius: 0; clip-path: polygon(0 0,100% 0,100% 70%,94% 100%,0 100%); }
:root[data-mode="monster"] .section-head { text-align: left; max-width: none; border-left: 3px solid var(--accent); padding-left: 1.2rem; }
:root[data-mode="monster"] .hud-label::before { content: "▚ "; }
:root[data-mode="monster"] .cap-grid, :root[data-mode="monster"] .tile-grid { gap: 14px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
:root[data-mode="monster"] .hero__title { letter-spacing: -.02em; text-transform: uppercase; }

/* ===== DRASTIC structure divergence ============================== */
/* Monster MIRRORS the hero: copy right, emblem left (only when 2-col) */
@media (min-width: 901px) {
  :root[data-mode="monster"] .hero__grid { grid-template-columns: .8fr 1.5fr; }
  :root[data-mode="monster"] .hero__copy { order: 2; text-align: right; margin-left: auto; }
  :root[data-mode="monster"] .hero__emblem { order: 1; }
  /* body paragraph reads left-aligned (right-rag long copy is hard to read) */
  :root[data-mode="monster"] .hero__copy .lead { text-align: left; margin-left: auto; }
  :root[data-mode="monster"] .actions, :root[data-mode="monster"] .hero__aside { justify-content: flex-end; }
  /* nav slams right, mono, in Monster */
  :root[data-mode="monster"] .nav { margin-left: auto; gap: 2rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; }
  /* stats become a hard vertical rail */
  :root[data-mode="monster"] .stat-grid { grid-template-columns: repeat(4, 1fr); }
  :root[data-mode="monster"] .stat { border-left: 2px solid var(--accent); padding-left: 1rem; }
  /* capabilities: even 3-col tiles, equal height (no tall empty cells) */
  :root[data-mode="monster"] .cap-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-items: stretch; }
  :root[data-mode="monster"] .cap { height: 100%; }
}
/* Hermit: perfectly centered, symmetric, serene */
:root:not([data-mode="monster"]) .hero__copy { text-align: center; margin-inline: auto; }
:root:not([data-mode="monster"]) .actions { justify-content: center; }

/* READABILITY FLOOR: never let either layout starve text */
.section-head, .hero__copy, .cap, .stat, p, li { min-width: 0; }
.hero__title, .section-head h2 { overflow-wrap: anywhere; }
:root[data-mode="monster"] .hero__copy { max-width: 60ch; }
/* contrast fixes: Monster cap body text + Hermit eyebrow legibility */
:root[data-mode="monster"] .cap h3, :root[data-mode="monster"] .cap p, :root[data-mode="monster"] .cap__no { color: #eaf1ff; }
:root[data-mode="monster"] .cap { background: #1e0f3a; background-image: none; }
:root:not([data-mode="monster"]) .eyebrow { color: var(--spark-text); }
:root:not([data-mode="monster"]) .ink-2, :root:not([data-mode="monster"]) .stat__label { color: #6a5f7e; }

/* Pastel surfaces: tiles/cards become clean cream, dark crisp headings */
:root:not([data-mode="monster"]) .tile, :root:not([data-mode="monster"]) .work-card,
:root:not([data-mode="monster"]) .archive-card, :root:not([data-mode="monster"]) .cap,
:root:not([data-mode="monster"]) .quote-card, :root:not([data-mode="monster"]) .glow-card:not(.about__card) {
  background: #fffdfb; border: 1px solid var(--line); box-shadow: 0 14px 40px -26px rgba(47,37,69,.4);
}
:root:not([data-mode="monster"]) .tile h3, :root:not([data-mode="monster"]) .work-card h3,
:root:not([data-mode="monster"]) .cap h3, :root:not([data-mode="monster"]) .section-head h2,
:root:not([data-mode="monster"]) h1, :root:not([data-mode="monster"]) h2, :root:not([data-mode="monster"]) h3 { color: var(--ink); }
/* dark fixed panels (CTA, about card) keep cream ink in BOTH personas */
.cta h2, .cta p, .cta .eyebrow, .about__card h2, .about__card h3 { color: var(--cta-ink) !important; -webkit-text-fill-color: var(--cta-ink); }
/* keep the CTA mascot visible above the scrim/video, never behind */
.cta__mascot { z-index: 2 !important; opacity: .9; }
.cta .actions, .cta h2, .cta p, .cta .eyebrow, .cta .hud-label { position: relative; z-index: 3; }
/* CTA heading must fit; mascot retired (it overlapped the buttons) */
.cta h2 { font-size: clamp(1.8rem, 4vw, 3rem); overflow-wrap: anywhere; }
.cta p { max-width: 60ch; margin-inline: auto; }
.cta__mascot { display: none !important; }
:root:not([data-mode="monster"]) .tile p, :root:not([data-mode="monster"]) .cap p, :root:not([data-mode="monster"]) .archive-card p { color: #5a5170; }
:root:not([data-mode="monster"]) .tile__cta, :root:not([data-mode="monster"]) .tile__badge { color: var(--accent); }
/* force all headings + group titles crisp dark on pastel (no washed grey) */
:root:not([data-mode="monster"]) .index-group__head h2, :root:not([data-mode="monster"]) .count, :root:not([data-mode="monster"]) .h2-sub { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }
:root:not([data-mode="monster"]) .count { opacity: .65; }