/* ============================================================
   Résumé engine — shared core
   A "paper" is a fixed 768px sheet (≈ Letter at print scale),
   scaled to fit by JS. Templates layer scoped looks on top of this
   core (see resume-templates.css). All sections are data-driven and
   reorderable, so the core must read well in ANY order.
   Body type: Manrope · display: Bricolage · serif: Instrument · mono: Space Mono
   ============================================================ */

.paper {
  width: 768px;
  min-height: 1000px;
  background: #fff;
  color: #1a1a1f;
  font-family: var(--font-ui), system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  overflow: hidden;
  line-height: 1.5;
  --pa: #6d5cff;
  --pa2: #ff5ca8;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
.paper * { box-sizing: border-box; }
.paper h1, .paper h2, .paper h3 { font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.when, .rjob-w, .redu-w { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== layout regions ===== */
.rhead { padding: 46px 54px 0; }
.rbody { padding: 26px 54px 50px; display: flex; flex-direction: column; gap: 22px; }
.rcols.arch-stack { padding: 26px 54px 50px; display: grid; grid-template-columns: 1.62fr 1fr; gap: 42px; }
.rcols.arch-stack .rmain, .rcols.arch-stack .rside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.rcols.arch-sidebar { display: grid; grid-template-columns: 280px 1fr; align-items: stretch; }
.rcols.arch-sidebar .rside {
  padding: 44px 28px; display: flex; flex-direction: column; gap: 24px; position: relative; overflow: hidden;
}
.rcols.arch-sidebar .rmain { padding: 46px 40px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.paper.rail-color .rcols.arch-sidebar .rside { background: var(--pa); color: #fff; }
.paper.rail-light .rcols.arch-sidebar .rside { background: #fbfbfa; color: #1c1c20; border-right: 1px solid #ececea; }

/* ===== identity ===== */
.rid-top { display: flex; flex-direction: column; }
.rid-top .rname { font-family: var(--font-display); font-size: 36px; line-height: 1.02; }
.rid-top .rtitle { font-size: 14.5px; font-weight: 700; color: var(--pa); margin-top: 8px; }
.rid-top .rcontact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 12px; color: #55555f; }
.rid-top .rcontact-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rid-top .rcontact-i svg { opacity: 0.75; flex-shrink: 0; }

.rid-side { display: flex; flex-direction: column; }
.rid-side .rphoto-id { width: 86px; height: 86px; margin-bottom: 18px; font-size: 28px; }
.rid-side .rname { font-family: var(--font-display); font-size: 25px; line-height: 1.08; }
.rid-side .rtitle { font-size: 12.5px; font-weight: 600; margin-top: 7px; opacity: 0.94; }
.rid-side .rcontact { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; font-size: 11.5px; }
.rid-side .rcontact-i { display: flex; align-items: center; gap: 9px; width: 100%; }
.rid-side .rcontact-i svg { flex-shrink: 0; opacity: 0.8; }
.rid-side .rcontact-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ===== section heading ===== */
.rsec-t {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800;
  color: var(--pa); margin-bottom: 12px;
}

/* ===== section bodies ===== */
.rsum { font-size: 13px; line-height: 1.62; color: #44444c; text-wrap: pretty; }
.rjobs, .redus, .rprojs, .rnamed, .rlangs, .rpubs, .rrefs { display: flex; flex-direction: column; gap: 15px; }
.rjob-h, .redu-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.rjob-r { font-size: 14.5px; font-weight: 800; color: #1a1a20; line-height: 1.25; flex: 1; min-width: 0; }
.rjob-w { font-size: 11.5px; font-weight: 700; color: #8a8a92; flex-shrink: 0; }
.rjob-c { font-size: 12.5px; font-weight: 700; color: var(--pa); margin: 3px 0 9px; }

.r-bullets { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; font-size: 12.5px; color: #44444c; }
.r-bullets li { position: relative; padding-left: 16px; line-height: 1.5; text-wrap: pretty; }
.r-bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 1.5px; background: var(--pa); transform: rotate(45deg); }

.redu-h b { font-size: 13.5px; font-weight: 800; color: #1a1a20; flex: 1; min-width: 0; }
.redu-w { flex-shrink: 0; }
.redu-d { font-size: 12.5px; color: #5a5a62; margin-top: 1px; }

.rproj { font-size: 12.5px; line-height: 1.5; color: #44444c; }
.rproj b { font-weight: 800; color: #1a1a20; }

.rtags { display: flex; flex-wrap: wrap; gap: 6px; }
.rtags span {
  background: color-mix(in oklab, var(--pa) 10%, #fff); color: var(--pa);
  border: 1px solid color-mix(in oklab, var(--pa) 18%, #fff);
  padding: 5px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.rtags.pills span { border-radius: 999px; }

.rskill-list { font-size: 12.5px; line-height: 1.85; color: #3a3a44; }
.rskill-list span:not(:last-child)::after { content: " · "; color: #c2c2cc; }

.rnamed-i b { display: block; font-size: 12.5px; font-weight: 800; color: #1a1a20; }
.rnamed-m { font-size: 11.5px; color: #7a7a84; }

.rlang { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.rlang-n { font-weight: 700; color: #1a1a20; }
.rlang-l { color: #7a7a84; font-size: 11.5px; }

.rpub { font-size: 12px; line-height: 1.5; color: #3a3a44; }
.rpub i { color: #5a5a62; }

.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchips span { font-size: 11.5px; color: #3a3a44; background: #f0f0f4; padding: 4px 9px; border-radius: 6px; }

.rref b { display: block; font-weight: 800; font-size: 12.5px; color: #1a1a20; }
.rref span { display: block; font-size: 11.5px; color: #7a7a84; }
.rrefs-note { font-size: 12.5px; font-style: italic; color: #7a7a84; }

/* ===== photo ===== */
.rphoto { background-size: cover; background-position: center; flex-shrink: 0; border-radius: 16px; }
.rphoto.circle { border-radius: 50%; }
.rphoto.mono {
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--pa), var(--pa2));
}

/* ===== skill bars ===== */
.rbars { display: flex; flex-direction: column; }
.sbar { margin-bottom: 11px; }
.sbar:last-child { margin-bottom: 0; }
.sbar-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: #1a1a20; }
.sbar-h i { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }
.sbar-track { height: 5px; border-radius: 3px; background: rgba(0,0,0,0.08); overflow: hidden; }
.sbar-fill { height: 100%; border-radius: 3px; background: var(--pa); }

/* ===== skill rings ===== */
.rrings { display: flex; flex-wrap: wrap; gap: 14px; }
.sring { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sring svg { display: block; }
.sring-bg { fill: none; stroke: rgba(0,0,0,0.1); stroke-width: 5; }
.sring-fg { fill: none; stroke: var(--pa); stroke-width: 5; stroke-linecap: round; }
.sring-t { font-size: 13px; font-weight: 800; fill: currentColor; font-variant-numeric: tabular-nums; }
.sring-l { font-size: 11px; font-weight: 600; text-align: center; opacity: 0.85; }

/* ===== proficiency scales (the "vectors") — dots · segments · signal ===== */
.rscale { display: flex; flex-direction: column; gap: 9px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srow-n { font-size: 12px; font-weight: 700; color: #1a1a20; line-height: 1.25; flex: 1; min-width: 0; }
.srow-r { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.srow-w { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: #8a8a92; }

.sdots { display: inline-flex; gap: 4px; align-items: center; }
.sdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.13); }
.sdots i.on { background: var(--pa); }

.sseg { display: inline-flex; gap: 3px; align-items: center; }
.sseg i { width: 13px; height: 6px; border-radius: 2px; background: rgba(0,0,0,0.12); }
.sseg i.on { background: var(--pa); }

.ssig { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 17px; }
.ssig i { width: 4px; border-radius: 1.5px; background: rgba(0,0,0,0.13); }
.ssig i.on { background: var(--pa); }

/* languages rendered with a scale */
.rlangs-scale .rlang { align-items: center; }
.rlang-r { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.rlangs-scale .rlang-l { font-size: 10.5px; }

/* ===== colored sidebar rail: lighten section content ===== */
.paper.rail-color .rcols.arch-sidebar .rside .rsec-t { color: #fff; opacity: 0.78; }
.paper.rail-color .rcols.arch-sidebar .rside .rtags span { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.14); }
.paper.rail-color .rcols.arch-sidebar .rside .rchips span { background: rgba(255,255,255,0.16); color: #fff; }
.paper.rail-color .rcols.arch-sidebar .rside .redu-h b,
.paper.rail-color .rcols.arch-sidebar .rside .rnamed-i b,
.paper.rail-color .rcols.arch-sidebar .rside .rlang-n { color: #fff; }
.paper.rail-color .rcols.arch-sidebar .rside .redu-d,
.paper.rail-color .rcols.arch-sidebar .rside .redu-w,
.paper.rail-color .rcols.arch-sidebar .rside .rnamed-m,
.paper.rail-color .rcols.arch-sidebar .rside .rlang-l { color: rgba(255,255,255,0.72); }
.paper.rail-color .rcols.arch-sidebar .rside .rskill-list { color: rgba(255,255,255,0.92); }
.paper.rail-color .rcols.arch-sidebar .rside .rskill-list span:not(:last-child)::after { color: rgba(255,255,255,0.4); }
.paper.rail-color .rcols.arch-sidebar .rside .sbar-h { color: #fff; }
.paper.rail-color .rcols.arch-sidebar .rside .sbar-track { background: rgba(255,255,255,0.2); }
.paper.rail-color .rcols.arch-sidebar .rside .sbar-fill { background: #fff; }
/* scales on a colored rail */
.paper.rail-color .rcols.arch-sidebar .rside .srow-n,
.paper.rail-color .rcols.arch-sidebar .rside .rlang-n { color: #fff; }
.paper.rail-color .rcols.arch-sidebar .rside .srow-w,
.paper.rail-color .rcols.arch-sidebar .rside .rlang-l { color: rgba(255,255,255,0.72); }
.paper.rail-color .rcols.arch-sidebar .rside .sdots i,
.paper.rail-color .rcols.arch-sidebar .rside .sseg i,
.paper.rail-color .rcols.arch-sidebar .rside .ssig i { background: rgba(255,255,255,0.28); }
.paper.rail-color .rcols.arch-sidebar .rside .sdots i.on,
.paper.rail-color .rcols.arch-sidebar .rside .sseg i.on,
.paper.rail-color .rcols.arch-sidebar .rside .ssig i.on { background: #fff; }
/* light rail: section heading uses accent, bars use accent */
.paper.rail-light .rcols.arch-sidebar .rside .rsec-t { color: #1c1c20; opacity: 1; }
.paper.rail-light .rcols.arch-sidebar .rside .rtags span { background: #f0eee9; color: #2a2a30; border-color: #e4e0d8; }
.paper.rail-light .rcols.arch-sidebar .rside .sbar-track { background: #e7e7e2; }
.paper.rail-light .rcols.arch-sidebar .rside .sdots i,
.paper.rail-light .rcols.arch-sidebar .rside .sseg i,
.paper.rail-light .rcols.arch-sidebar .rside .ssig i { background: #dcd8cf; }

/* ============================================================
   PAGED — slice the résumé into stacked Letter sheets
   ============================================================ */
.paged { width: 768px; position: relative; }
.paged-measure { position: absolute; left: -99999px; top: 0; width: 768px; pointer-events: none; visibility: hidden; }
.paged .paper { box-shadow: none; min-height: 0; }
.pg-sheet { position: relative; width: 768px; background: #fff; border-radius: 3px; box-shadow: 0 30px 80px -28px rgba(0,0,0,0.45), 0 2px 8px -2px rgba(0,0,0,0.18); overflow: hidden; }
.pg-rail { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; }
.pg-clip { position: relative; z-index: 1; width: 768px; overflow: hidden; }
.pg-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.pg-foot-in { display: flex; align-items: center; justify-content: space-between; height: 42px; border-top: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.62; }
.pg-foot-name { font-weight: 700; }
.pg-foot-num { font-variant-numeric: tabular-nums; }