/* ============================================================
   Résumé templates — FLAMBOYANT family (bold, expressive looks)
   Keyed on the engine's head-<fam> class and driven entirely by the
   accent tokens --pa / --pa2, so every color variant is its own
   correct design. Families: Nova · Luxe · Pop · Mirage
   ============================================================ */

/* ===================== NOVA — full-bleed gradient masthead ===================== */
.paper.head-nova { color: #24212c; background: #fff; }
.head-nova .rhead {
  background: linear-gradient(118deg, var(--pa), var(--pa2));
  padding: 40px 50px 38px; position: relative; overflow: hidden;
}
.head-nova .rhead::before {
  content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px;
  border-radius: 46px; background: rgba(255,255,255,0.13); transform: rotate(32deg);
}
.head-nova .rhead::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(75% 130% at 0% 100%, rgba(255,255,255,0.18), transparent 58%);
}
.head-nova .rid-top { position: relative; z-index: 1; flex-direction: row; align-items: center; gap: 26px; }
.head-nova .rid-top .rphoto-id {
  width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0;
  border: 4px solid rgba(255,255,255,0.85); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4); font-size: 36px;
}
.head-nova .rid-top .rname {
  font-family: var(--font-display); font-size: 44px; line-height: 0.92;
  text-transform: uppercase; letter-spacing: -0.01em; color: #fff;
}
.head-nova .rid-top .rname-2 { font-weight: 400; opacity: 0.82; }
.head-nova .rid-top .rtitle { color: #fff; opacity: 0.95; font-weight: 700; margin-top: 9px; }
.head-nova .rid-top .rcontact { margin-top: 13px; gap: 7px 8px; }
.head-nova .rid-top .rcontact-i {
  background: rgba(255,255,255,0.18); color: #fff; padding: 4px 11px; border-radius: 999px; font-weight: 600;
}
.head-nova .rid-top .rcontact-i svg { color: #fff; opacity: 0.95; }
.head-nova .rcols.arch-stack, .head-nova .rbody { padding-top: 28px; }
.head-nova .rsec-t { color: var(--pa); position: relative; padding-bottom: 9px; }
.head-nova .rsec-t::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--pa), var(--pa2));
}
.head-nova .rjob-c { color: var(--pa); }
.head-nova .r-bullets li::before { background: var(--pa2); }
.head-nova .rside > .rsec {
  background: color-mix(in oklab, var(--pa) 6%, #fff);
  border: 1px solid color-mix(in oklab, var(--pa) 14%, #fff);
  border-radius: 16px; padding: 18px 20px;
}
.head-nova .rside .rsec-t { color: color-mix(in oklab, var(--pa2) 78%, #1a1a1a); }
.head-nova .rtags span { background: color-mix(in oklab, var(--pa) 11%, #fff); border-color: color-mix(in oklab, var(--pa) 20%, #fff); }
.head-nova .sseg i.on { background: var(--pa); }

/* ===================== LUXE — dramatic dark + gradient serif ===================== */
.paper.head-luxe { background: #141019; color: #e7e3ef; }
.head-luxe .rhead { padding: 46px 48px 26px; position: relative; }
.head-luxe .rhead::after {
  content: ""; position: absolute; left: 48px; right: 48px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--pa), var(--pa2), transparent);
}
.head-luxe .rid-top { flex-direction: row; align-items: center; gap: 24px; }
.head-luxe .rid-top .rphoto-id {
  width: 98px; height: 98px; border-radius: 22px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}
.head-luxe .rid-top .rname {
  font-family: var(--font-serif), Georgia, serif; font-weight: 600; font-size: 47px; line-height: 0.98; letter-spacing: 0.005em;
  background: linear-gradient(100deg, var(--pa), var(--pa2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.head-luxe .rid-top .rtitle {
  color: var(--pa2); font-family: var(--font-ui); font-size: 11px;
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 10px;
}
.head-luxe .rid-top .rcontact { color: #9b97ab; margin-top: 13px; }
.head-luxe .rid-top .rcontact-i svg { color: var(--pa2); opacity: 0.9; }
.head-luxe .rcols.arch-stack, .head-luxe .rbody { padding-top: 26px; }
.head-luxe .rsec-t { color: var(--pa2); letter-spacing: 0.18em; display: flex; align-items: center; gap: 9px; }
.head-luxe .rsec-t::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pa), var(--pa2)); }
.head-luxe .rjob-r, .head-luxe .redu-h b, .head-luxe .rnamed-i b, .head-luxe .rproj b, .head-luxe .rlang-n, .head-luxe .rref b { color: #fff; }
.head-luxe .rsum, .head-luxe .r-bullets, .head-luxe .rproj, .head-luxe .rpub { color: #b6b2c4; }
.head-luxe .rjob-w, .head-luxe .redu-w { color: #7e7a90; }
.head-luxe .redu-d, .head-luxe .rnamed-m, .head-luxe .rlang-l, .head-luxe .rpub i { color: #9b97ab; }
.head-luxe .rjob-c { color: var(--pa2); }
.head-luxe .r-bullets li::before { background: var(--pa); }
.head-luxe .rside > .rsec { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px 20px; }
.head-luxe .rtags span { background: rgba(255,255,255,0.06); color: #d8d4e4; border-color: rgba(255,255,255,0.12); }
.head-luxe .sring-bg { stroke: rgba(255,255,255,0.12); }
.head-luxe .sring-fg { stroke: var(--pa2); }
.head-luxe .sring-t { fill: #fff; }
.head-luxe .sdots i, .head-luxe .sseg i, .head-luxe .ssig i { background: rgba(255,255,255,0.16); }
.head-luxe .sdots i.on, .head-luxe .sseg i.on, .head-luxe .ssig i.on { background: var(--pa2); }
.head-luxe .sbar-track { background: rgba(255,255,255,0.12); }
.head-luxe .sbar-fill { background: linear-gradient(90deg, var(--pa), var(--pa2)); }

/* ===================== POP — pop-art color-block tabs ===================== */
.paper.head-pop { background: #fffdf8; color: #1d1b16; }
.head-pop .rhead { padding: 46px 52px 0; }
.head-pop .rid-top .rname {
  font-family: var(--font-display); font-size: 50px; line-height: 0.9;
  text-transform: uppercase; letter-spacing: -0.01em; color: #16140e;
}
.head-pop .rid-top .rname-2 { color: var(--pa); }
.head-pop .rid-top .rtitle {
  display: inline-block; background: var(--pa); color: #fff; padding: 5px 13px;
  border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; margin-top: 13px;
}
.head-pop .rid-top .rcontact { margin-top: 14px; gap: 6px 16px; color: #4a463d; }
.head-pop .rid-top .rcontact-i svg { color: var(--pa); }
.head-pop .rid-top { padding-bottom: 18px; border-bottom: 3px solid var(--pa); }
.head-pop .rcols.arch-stack, .head-pop .rbody { padding-top: 24px; }
.head-pop .rsec-t {
  display: inline-block; background: var(--pa); color: #fff;
  padding: 5px 13px; border-radius: 999px; letter-spacing: 0.1em;
}
.head-pop .rside .rsec-t { background: transparent; color: var(--pa); border: 2px solid var(--pa); padding: 4px 12px; }
.head-pop .rjob-c { color: var(--pa); }
.head-pop .r-bullets li::before { background: var(--pa2); border-radius: 2px; transform: none; width: 6px; height: 6px; top: 0.5em; }
.head-pop .rtags span { background: color-mix(in oklab, var(--pa) 12%, #fff); color: color-mix(in oklab, var(--pa) 60%, #1a1a1a); border-color: color-mix(in oklab, var(--pa) 24%, #fff); border-radius: 999px; }
.head-pop .rside > .rsec { background: #fff; border: 2px solid color-mix(in oklab, var(--pa) 20%, #fff); border-radius: 18px; padding: 18px 20px; }
.head-pop .sseg i.on, .head-pop .sdots i.on { background: var(--pa); }

/* ===================== MIRAGE — holographic mesh rail (sidebar) ===================== */
.paper.head-mirage { color: #1c1b24; }
.head-mirage .rcols.arch-sidebar { grid-template-columns: 286px 1fr; }
.paper.head-mirage .rcols.arch-sidebar .rside { background: #14121f; }
.head-mirage .rcols.arch-sidebar .rside::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(68% 48% at 12% 8%, color-mix(in oklab, var(--pa) 92%, transparent), transparent 62%),
    radial-gradient(62% 44% at 96% 26%, color-mix(in oklab, var(--pa2) 88%, transparent), transparent 60%),
    radial-gradient(85% 52% at 40% 104%, color-mix(in oklab, var(--pa) 70%, transparent), transparent 64%),
    radial-gradient(50% 40% at 85% 88%, color-mix(in oklab, var(--pa2) 60%, transparent), transparent 62%);
  filter: saturate(1.12);
}
.head-mirage .rside > * { position: relative; z-index: 1; }
.head-mirage .rid-side { align-items: center; text-align: center; }
.head-mirage .rid-side .rphoto-id {
  width: 122px; height: 122px; border-radius: 50%; margin-bottom: 18px; font-size: 38px;
  border: 4px solid rgba(255,255,255,0.55); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.45);
}
.head-mirage .rid-side .rname { font-family: var(--font-display); font-size: 29px; line-height: 1.02; color: #fff; }
.head-mirage .rid-side .rname-2 { opacity: 0.85; }
.head-mirage .rid-side .rtitle { color: rgba(255,255,255,0.92); font-weight: 600; }
.head-mirage .rid-side .rcontact { align-items: flex-start; text-align: left; }
.head-mirage .rmain { padding: 46px 42px; }
.head-mirage .rmain .rsec-t { color: var(--pa); display: flex; align-items: center; gap: 9px; }
.head-mirage .rmain .rsec-t::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pa), var(--pa2)); }
.head-mirage .rmain .rjob-r { font-size: 15px; }
.head-mirage .rmain .rjob-c { color: var(--pa); }
.head-mirage .rmain .r-bullets li::before { background: var(--pa2); }