/* ============================================================
   Résumé templates — batch 3 (distinct layout systems)
   Split · Blueprint · GradRail · Bento · Gazette · Crest · Outline · Carbon
   All token-driven (--pa / --pa2). Each head is a unique structure.
   ============================================================ */

/* ===================== SPLIT — vertical two-tone header ===================== */
.paper.head-split { background: #fff; color: #1d1d22; }
.head-split .rhead { padding: 0; }
.head-split .rid-top { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 172px; }
.head-split .rid-top .rid-txt { background: var(--pa); padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.head-split .rid-top .rname { color: #fff; font-family: var(--font-display); font-size: 40px; line-height: 0.98; }
.head-split .rid-top .rname-2 { color: color-mix(in oklab, #fff 72%, var(--pa2)); }
.head-split .rid-top .rtitle { color: rgba(255,255,255,0.92); font-weight: 700; margin-top: 10px; }
.head-split .rid-top .rcontact {
  grid-column: 2; align-self: center; padding: 40px 44px; margin-top: 0;
  flex-direction: column; align-items: flex-start; gap: 9px;
}
.head-split .rid-top .rcontact-i { color: #4a4a52; font-weight: 600; }
.head-split .rid-top .rcontact-i svg { color: var(--pa); }
/* place rid-txt in col 1 and contacts in col 2 even though contacts is nested under rid-txt */
.head-split .rid-top { position: relative; }
.head-split .rid-top .rid-txt { grid-column: 1; }
.head-split .rid-top .rid-txt .rcontact {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%; box-sizing: border-box;
  padding: 36px 44px; justify-content: center;
}
.head-split .rcols.arch-stack, .head-split .rbody { padding-top: 26px; }
.head-split .rsec-t { color: var(--pa); border-left: 3px solid var(--pa2); padding-left: 10px; }
.head-split .rjob-c { color: var(--pa); }
.head-split .r-bullets li::before { background: var(--pa2); }
.head-split .rside > .rsec { background: color-mix(in oklab, var(--pa) 5%, #fff); border-radius: 12px; padding: 16px 18px; }
.head-split .sseg i.on, .head-split .sdots i.on { background: var(--pa); }
.head-split .sbar-fill { background: var(--pa); }

/* ===================== BLUEPRINT — technical grid + ticks ===================== */
.paper.head-blueprint { background: #f3f6fb; color: #1a2230; }
.head-blueprint .rhead {
  padding: 40px 46px 28px; position: relative; background:
    linear-gradient(0deg, rgba(31,77,255,0.05), rgba(31,77,255,0.05)),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--pa) 12%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--pa) 12%, transparent) 23px 24px);
  border-bottom: 1.5px solid var(--pa);
}
.head-blueprint .rid-top .rname { font-family: var(--font-mono), monospace; font-weight: 700; font-size: 38px; letter-spacing: -0.01em; color: #14233f; }
.head-blueprint .rid-top .rname-2 { color: var(--pa); }
.head-blueprint .rid-top .rtitle { font-family: var(--font-mono), monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pa); margin-top: 11px; }
.head-blueprint .rid-top .rcontact { margin-top: 12px; font-family: var(--font-mono), monospace; font-size: 11px; color: #43506a; }
.head-blueprint .rid-top .rcontact-i svg { color: var(--pa); }
.head-blueprint .rcols.arch-stack, .head-blueprint .rbody { padding-top: 24px; }
.head-blueprint .rsec-t { font-family: var(--font-mono), monospace; color: var(--pa); letter-spacing: 0.1em; border-bottom: 1px dashed color-mix(in oklab, var(--pa) 45%, transparent); padding-bottom: 6px; }
.head-blueprint .rsec-t::before { content: "[ "; } .head-blueprint .rsec-t::after { content: " ]"; }
.head-blueprint .rjob-c { color: var(--pa); }
.head-blueprint .r-bullets li::before { content: "+"; background: none; color: var(--pa); width: auto; height: auto; border-radius: 0; top: 0; left: 0; transform: none; }
.head-blueprint .r-bullets li { padding-left: 16px; }
.head-blueprint .rside > .rsec { border: 1px solid color-mix(in oklab, var(--pa) 30%, transparent); background: rgba(255,255,255,0.6); padding: 15px 17px; }
.head-blueprint .rtags span { border: 1px solid color-mix(in oklab, var(--pa) 35%, transparent); border-radius: 0; background: #fff; font-family: var(--font-mono), monospace; font-size: 11px; }
.head-blueprint .sseg i, .head-blueprint .sdots i { border-radius: 0; }
.head-blueprint .sseg i.on, .head-blueprint .sdots i.on { background: var(--pa); }

/* ===================== GRADRAIL — vertical gradient sidebar ===================== */
.paper.head-gradrail .rcols.arch-sidebar { grid-template-columns: 264px 1fr; }
.paper.head-gradrail .rcols.arch-sidebar .rside { background: linear-gradient(170deg, var(--pa), var(--pa2)); color: #fff; }
.head-gradrail .rid-side { align-items: flex-start; }
.head-gradrail .rid-side .rphoto-id { width: 96px; height: 96px; border-radius: 18px; margin-bottom: 18px; border: 3px solid rgba(255,255,255,0.6); font-size: 32px; }
.head-gradrail .rid-side .rname { font-family: var(--font-display); font-size: 30px; line-height: 1.0; color: #fff; }
.head-gradrail .rid-side .rname-2 { opacity: 0.82; }
.head-gradrail .rid-side .rtitle { color: rgba(255,255,255,0.92); font-weight: 600; margin-top: 7px; }
.head-gradrail .rid-side .rcontact { color: rgba(255,255,255,0.92); margin-top: 14px; }
.head-gradrail .rside .rsec-t { color: #fff; letter-spacing: 0.16em; opacity: 0.95; }
.head-gradrail .rside .rtags span { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); color: #fff; }
.head-gradrail .rside .sdots i, .head-gradrail .rside .sseg i { background: rgba(255,255,255,0.3); }
.head-gradrail .rside .sdots i.on, .head-gradrail .rside .sseg i.on { background: #fff; }
.head-gradrail .rmain { padding: 44px 42px; }
.head-gradrail .rmain .rsec-t { color: var(--pa); position: relative; padding-bottom: 8px; }
.head-gradrail .rmain .rsec-t::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pa), var(--pa2)); }
.head-gradrail .rmain .rjob-c { color: var(--pa); }
.head-gradrail .rmain .r-bullets li::before { background: var(--pa2); }

/* ===================== BENTO — modular block masthead ===================== */
.paper.head-bento { background: #f2f2f0; color: #1b1b1f; }
.head-bento .rhead { padding: 26px; }
.head-bento .rid-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: stretch; }
.head-bento .rid-top .rid-txt { background: var(--pa); color: #fff; border-radius: 20px; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.head-bento .rid-top .rname { font-family: var(--font-display); font-size: 40px; line-height: 0.96; color: #fff; }
.head-bento .rid-top .rname-2 { color: color-mix(in oklab, #fff 70%, var(--pa2)); }
.head-bento .rid-top .rtitle { color: rgba(255,255,255,0.92); font-weight: 700; margin-top: 9px; }
.head-bento .rid-top .rcontact { margin-top: 0; align-self: center; flex-direction: column; align-items: flex-start; gap: 9px; background: var(--pa2); color: #1b1b1f; border-radius: 20px; padding: 24px 24px; height: 100%; box-sizing: border-box; justify-content: center; }
.head-bento .rid-top .rcontact-i { color: #1b1b1f; font-weight: 600; }
.head-bento .rid-top .rcontact-i svg { color: #1b1b1f; }
.head-bento .rcols.arch-stack { padding: 4px 26px 0; }
.head-bento .rbody { padding: 4px 26px 0; }
.head-bento .rsec-t { color: var(--pa); }
.head-bento .rjob-c { color: var(--pa); }
.head-bento .r-bullets li::before { background: var(--pa2); }
.head-bento .rside > .rsec { background: #fff; border-radius: 18px; padding: 18px 20px; }
.head-bento .rtags span { background: #fff; border-color: color-mix(in oklab, var(--pa) 22%, #fff); border-radius: 999px; }
.head-bento .sseg i.on, .head-bento .sdots i.on { background: var(--pa); }

/* ===================== GAZETTE — newspaper masthead ===================== */
.paper.head-gazette { background: #fbfaf6; color: #1a1a17; }
.head-gazette .rhead { padding: 34px 48px 18px; border-bottom: 3px double #1a1a17; text-align: center; }
.head-gazette .rid-top { flex-direction: column; align-items: center; }
.head-gazette .rid-top .rname { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 58px; line-height: 0.96; letter-spacing: -0.01em; text-align: center; }
.head-gazette .rid-top .rname-2 { color: var(--pa); }
.head-gazette .rid-top .rtitle { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pa); margin-top: 12px; padding-top: 10px; border-top: 1px solid #cfc9b8; width: 100%; max-width: 360px; text-align: center; }
.head-gazette .rid-top .rcontact { margin-top: 11px; justify-content: center; gap: 6px 14px; font-size: 11px; color: #5a5648; font-family: var(--font-ui); }
.head-gazette .rid-top .rcontact-i svg { color: var(--pa); }
.head-gazette .rcols.arch-stack { padding-top: 24px; column-gap: 30px; }
.head-gazette .rbody { padding-top: 24px; }
.head-gazette .rmain { columns: auto; }
.head-gazette .rsec-t { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 17px; letter-spacing: 0; color: #1a1a17; border-bottom: 1px solid #d8d2c0; padding-bottom: 5px; text-transform: none; }
.head-gazette .rsum { font-family: var(--font-serif), Georgia, serif; font-size: 16px; line-height: 1.5; }
.head-gazette .rjob-r { font-family: var(--font-serif), Georgia, serif; font-weight: 700; }
.head-gazette .rjob-c { color: var(--pa); font-style: italic; }
.head-gazette .r-bullets li::before { background: var(--pa); }
.head-gazette .rtags span { background: transparent; border: 1px solid #cfc9b8; border-radius: 0; }
.head-gazette .sseg i.on, .head-gazette .sdots i.on { background: var(--pa); }

/* ===================== CREST — centered monogram badge ===================== */
.paper.head-crest { background: #fff; color: #20242b; }
.head-crest .rhead { padding: 40px 48px 26px; text-align: center; }
.head-crest .rid-top { flex-direction: column; align-items: center; }
.head-crest .rid-top .rphoto-id { width: 84px; height: 84px; margin: 0 auto 16px; border: 3px solid var(--pa); }
.head-crest .rid-top .rname { font-family: var(--font-serif), Georgia, serif; font-weight: 600; font-size: 42px; line-height: 1.0; text-align: center; }
.head-crest .rid-top .rname-2 { color: var(--pa); }
.head-crest .rid-top .rtitle { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pa); margin-top: 12px; }
.head-crest .rid-top .rtitle::before, .head-crest .rid-top .rtitle::after { content: "—"; color: color-mix(in oklab, var(--pa) 55%, #fff); margin: 0 10px; }
.head-crest .rid-top .rcontact { justify-content: center; margin-top: 13px; gap: 6px 16px; color: #5a606b; }
.head-crest .rid-top .rcontact-i svg { color: var(--pa); }
.head-crest .rcols.arch-stack, .head-crest .rbody { padding-top: 24px; }
.head-crest .rsec-t { text-align: center; color: var(--pa); letter-spacing: 0.18em; }
.head-crest .rsec-t::after { content: ""; display: block; width: 22px; height: 2px; background: var(--pa); margin: 7px auto 0; }
.head-crest .rjob-c { color: var(--pa); }
.head-crest .r-bullets li::before { background: var(--pa); }
.head-crest .rtags span { background: color-mix(in oklab, var(--pa) 8%, #fff); border-color: color-mix(in oklab, var(--pa) 20%, #fff); }
.head-crest .sseg i.on, .head-crest .sdots i.on { background: var(--pa); }

/* ===================== OUTLINE — hollow display name ===================== */
.paper.head-outline { background: #15151a; color: #e6e6ec; }
.head-outline .rhead { padding: 48px 48px 28px; }
.head-outline .rid-top .rname {
  font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 0.9;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 1.5px #fff;
}
.head-outline .rid-top .rname-2 { -webkit-text-stroke: 1.5px var(--pa); color: transparent; }
.head-outline .rid-top .rtitle { color: var(--pa); font-weight: 700; letter-spacing: 0.04em; margin-top: 14px; }
.head-outline .rid-top .rcontact { margin-top: 12px; color: #9a9aa6; gap: 6px 14px; }
.head-outline .rid-top .rcontact-i svg { color: var(--pa); }
.head-outline .rcols.arch-stack, .head-outline .rbody { padding-top: 26px; }
.head-outline .rsec-t { color: var(--pa); letter-spacing: 0.16em; }
.head-outline .rjob-r, .head-outline .redu-h b, .head-outline .rproj b, .head-outline .rnamed-i b, .head-outline .rlang-n, .head-outline .rref b { color: #fff; }
.head-outline .rsum, .head-outline .r-bullets, .head-outline .rproj { color: #a4a4b0; }
.head-outline .rjob-w, .head-outline .redu-w { color: #74747e; }
.head-outline .redu-d, .head-outline .rnamed-m, .head-outline .rlang-l { color: #9a9aa6; }
.head-outline .rjob-c { color: var(--pa); }
.head-outline .r-bullets li::before { background: var(--pa); }
.head-outline .rside > .rsec { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 16px 18px; }
.head-outline .rtags span { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #d6d6de; }
.head-outline .sseg i, .head-outline .sdots i { background: rgba(255,255,255,0.16); }
.head-outline .sseg i.on, .head-outline .sdots i.on { background: var(--pa); }

/* ===================== CARBON — dark tech, hex-grid feel ===================== */
.paper.head-carbon { background: #111418; color: #c8ced6; }
.head-carbon .rhead {
  padding: 42px 46px 26px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in oklab, var(--pa) 22%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 6px, transparent 6px 12px);
}
.head-carbon .rid-top { display: flex; align-items: center; gap: 22px; }
.head-carbon .rid-top .rphoto-id { width: 92px; height: 92px; border-radius: 14px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.16); }
.head-carbon .rid-top .rname { font-family: var(--font-display); font-weight: 700; font-size: 42px; line-height: 0.96; color: #fff; }
.head-carbon .rid-top .rname-2 { color: var(--pa); }
.head-carbon .rid-top .rtitle { color: var(--pa2); font-family: var(--font-mono), monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 9px; }
.head-carbon .rid-top .rcontact { margin-top: 12px; color: #818996; font-family: var(--font-mono), monospace; font-size: 11px; }
.head-carbon .rid-top .rcontact-i svg { color: var(--pa); }
.head-carbon .rcols.arch-stack, .head-carbon .rbody { padding-top: 26px; }
.head-carbon .rsec-t { color: var(--pa2); letter-spacing: 0.14em; display: flex; align-items: center; gap: 8px; }
.head-carbon .rsec-t::before { content: ""; width: 8px; height: 8px; background: var(--pa); transform: rotate(45deg); }
.head-carbon .rjob-r, .head-carbon .redu-h b, .head-carbon .rproj b, .head-carbon .rnamed-i b, .head-carbon .rlang-n, .head-carbon .rref b { color: #fff; }
.head-carbon .rsum, .head-carbon .r-bullets, .head-carbon .rproj { color: #99a1ad; }
.head-carbon .rjob-w, .head-carbon .redu-w { color: #6c747f; }
.head-carbon .redu-d, .head-carbon .rnamed-m, .head-carbon .rlang-l { color: #818996; }
.head-carbon .rjob-c { color: var(--pa2); }
.head-carbon .r-bullets li::before { background: var(--pa); }
.head-carbon .rside > .rsec { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px 18px; }
.head-carbon .rtags span { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: #c8ced6; }
.head-carbon .sseg i, .head-carbon .sdots i { background: rgba(255,255,255,0.14); }
.head-carbon .sseg i.on, .head-carbon .sdots i.on { background: var(--pa); }
.head-carbon .sbar-track { background: rgba(255,255,255,0.1); }
.head-carbon .sbar-fill { background: linear-gradient(90deg, var(--pa), var(--pa2)); }
.head-carbon .sring-bg { stroke: rgba(255,255,255,0.12); } .head-carbon .sring-fg { stroke: var(--pa); } .head-carbon .sring-t { fill: #fff; }