/* The resume as a sheet of paper floating over the page.
   It drifts a little on its own, tilts toward the cursor, sways when you scroll, and its bottom-right corner lifts as the cursor comes near. */
:root { --pink: #ffe8e7; --ink: #181b2e; --orange: #fe5621; --paper: #fffdf8; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(1200px 700px at 50% -10%, #fff4f2, var(--pink) 58%, #f6d3d0); color: var(--ink); font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.rp-skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.rp-skip:focus { left: 12px; }
.rp-top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); max-width: 1100px; margin: 0 auto; }
.rp-back { color: var(--ink); text-decoration: none; font: 500 15px/1 Outfit, sans-serif; padding: 10px 4px; }
.rp-back:hover { color: var(--orange); }
.rp-actions { display: flex; gap: 8px; }
.rp-btn { appearance: none; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 500 14px/1 Outfit, sans-serif; padding: 11px 16px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease; }
.rp-btn:hover { background: var(--ink); color: #fff; }
.rp-btn:active { transform: scale(.97); }
.rp-btn:focus-visible, .rp-back:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.rp-primary { background: var(--ink); color: #fff; }
.rp-primary:hover { background: var(--orange); border-color: var(--orange); }

.rp-stage { display: grid; justify-items: center; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px)); overflow-x: clip; }
.rp-hint { margin: 6px 0 18px; font: 400 13px/1.4 Outfit, sans-serif; opacity: .6; text-align: center; }
.rp-scene { position: relative; width: min(816px, calc(100vw - 32px)); perspective: 1800px; }

/* the sheet moves as one object; the paper, its shadow, the lifted corner and the glare ride along */
.rp-sheet { --c: 0px; --lift: 0; position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; }
.rp-shadow { position: absolute; left: 4%; right: 4%; top: 18px; bottom: -4px; border-radius: 8px; pointer-events: none; background: rgba(24,27,46,calc(.34 + var(--lift) * .12)); filter: blur(calc(22px + var(--lift) * 14px));
  transform: translate3d(calc(var(--sx, 0) * 1px), calc(10px + var(--lift) * 16px + var(--sy, 0) * 1px), -30px); }
.rp-paper { position: relative; background-color: var(--paper); border-radius: 2px; overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(24,27,46,.05); }
/* the turned-up corner: the back of the sheet, with the shadow it casts on the page */
.rp-flap { position: absolute; right: 0; bottom: 0; width: var(--c); height: var(--c); pointer-events: none; transform: translateZ(2px);
  background: linear-gradient(135deg, #e8e2d6 0%, #f6f2e8 55%, #fffdf8 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(-3px -3px 5px rgba(24,27,46,.28)); }
.rp-flap { transform-origin: 100% 100%; }
.rp-glare { position: absolute; inset: 0; pointer-events: none; border-radius: 2px; mix-blend-mode: soft-light; opacity: calc(var(--lift) * .6); background: radial-gradient(55% 45% at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }

/* the resume typography */
.rp-doc { padding: 54px 6.8% 46px; color: #1b1e30; font: 400 11.6px/1.5 Outfit, sans-serif; }
.rp-head h1 { margin: 0 0 6px; font: 600 34px/1 Outfit, sans-serif; letter-spacing: -.02em; }
.rp-contact { margin: 0 0 18px; font: 400 11.4px/1.4 Outfit, sans-serif; color: #4a4e63; }
.rp-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(24,27,46,.3); }
.rp-doc h2 { margin: 18px 0 8px; padding-bottom: 4px; font: 600 11px/1 Outfit, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); border-bottom: 1.5px solid #1b1e30; }
.rp-role { margin: 0 0 12px; }
.rp-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.rp-line h3 { margin: 0; font: 600 12.4px/1.35 Outfit, sans-serif; }
.rp-line h3 span { opacity: .4; font-weight: 400; }
.rp-line time { flex: none; font: 500 11px/1 Outfit, sans-serif; color: #4a4e63; white-space: nowrap; }
.rp-where { margin: 1px 0 4px; font: 400 11px/1.4 Outfit, sans-serif; color: #6a6e82; }
.rp-doc ul { margin: 0; padding-left: 15px; }
.rp-doc li { margin: 0 0 3px; padding-left: 2px; }
.rp-doc li::marker { color: var(--orange); }
.rp-edu { margin: 0 0 8px; }
.rp-edu h3 { margin: 0; font: 600 12.4px/1.35 Outfit, sans-serif; }
.rp-edu p { margin: 0; }
.rp-small { font-size: 11px; color: #5a5e72; }
.rp-skill { margin: 0 0 5px; }
.rp-skill b { font-weight: 600; }

@media (max-width: 520px) { .rp-doc { padding: 30px 7% 28px; font-size: 12px; } .rp-head h1 { font-size: 30px; } .rp-btn { padding: 10px 13px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .rp-btn { transition: none; } .rp-sheet { will-change: auto; } }
@media print {
  body { background: #fff; } .rp-top, .rp-hint, .rp-shadow, .rp-flap, .rp-glare { display: none; }
  .rp-scene { width: auto; perspective: none; } .rp-sheet { transform: none !important; } .rp-paper { clip-path: none; background-image: none; }
}