/* The resume as a printed A4 sheet (design/resume-page.md). Every size is in millimetres on the
   page through --mm (CSS px per mm), so the whole sheet scales together; --pt is a print point. */
.resume {
  position: fixed; inset: 0; z-index: 10; overflow: hidden auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.resume.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }

.resume-bar { position: fixed; top: var(--space-4); left: var(--gutter); z-index: 2; }
.resume-back {
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-raised); color: var(--ink); font: 500 var(--text-small) / 1 var(--font-body); cursor: pointer;
  box-shadow: var(--shadow-1);
}

/* Quiet macOS-style controls beside the sheet's top right, outside the paper and clear of the pen
   at its bottom right (resume/index.js sets --ctrl-x and --ctrl-top): a two-way segmented switch
   (Whole page / Reading size) on a soft track, and Print below it. */
.resume-controls {
  position: fixed; left: var(--ctrl-x, auto); right: auto; top: var(--ctrl-top, var(--space-4)); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
}
.resume-controls button {
  min-height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ink);
  font: 500 13px / 1 var(--font-body); white-space: nowrap; cursor: pointer;
}
.resume-switch, .resume-print { background: rgba(252, 250, 245, 0.9); box-shadow: 0 0 0 0.5px rgba(42, 33, 28, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25); }
.resume-switch { display: flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: 8px; }
.resume-switch button { width: 100%; text-align: left; color: var(--ink-soft); }
.resume-switch [aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 0.5px rgba(42, 33, 28, 0.15), 0 1px 2px rgba(0, 0, 0, 0.12); }
.resume-controls button.resume-print { border-radius: 8px; background: rgba(252, 250, 245, 0.9); }
.resume-controls button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* The sheet. Placed by resume/index.js: --page-x, --page-y and --mm. */
.resume-page {
  --mm: 3px; --pt: calc(var(--mm) * 0.3528);
  position: relative; box-sizing: border-box; width: calc(210 * var(--mm)); min-height: calc(297 * var(--mm));
  padding: calc(18 * var(--mm)) calc(18 * var(--mm)) calc(16 * var(--mm));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 45%, rgba(42, 33, 28, 0.04)),
    var(--paper-raised);
  box-shadow: inset 0 0 0 0.5px rgba(42, 33, 28, 0.06), var(--shadow-2),
    calc(-4 * var(--mm)) calc(3 * var(--mm)) calc(6 * var(--mm)) calc(-3 * var(--mm)) rgba(74, 42, 24, 0.18),
    calc(4 * var(--mm)) calc(3 * var(--mm)) calc(6 * var(--mm)) calc(-3 * var(--mm)) rgba(74, 42, 24, 0.18);
  /* Body 9 pt, not 9.5: the spec's step when 9.5 pt overflows one page (8% over on 8 Nov 2026). */
  color: var(--ink); font: 400 calc(9 * var(--pt)) / calc(12.5 * var(--pt)) var(--font-body);
  text-align: left; user-select: text; cursor: auto;
}
/* The CC0 paper fibre at about 35%, multiplied into the paper. */
.resume-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
  background: url("../../public/assets/scene/paper.webp") 0 0 / calc(170 * var(--mm)) auto repeat;
}
.resume-page > * { position: relative; mix-blend-mode: multiply; } /* ink sits in the fibre */
.resume-page ::selection { background: var(--peach); }
.resume-page :is(h2, h3, h4, p, ul) { margin: 0; }

.resume-header h2 { font: 600 calc(24 * var(--pt)) / 1.15 var(--font-display); letter-spacing: -0.01em; } /* 1.15, not 1.0: the "y" kept off the title */
/* The optical size of the printed 24 pt at every zoom (not the screen size): the same letterforms
   whole, at reading size and in print, and on the painted 3D sheet (resume/painter.js). */
.resume-header h2 { font-variation-settings: "opsz" 32; }
.resume-header h2:focus { outline: none; box-shadow: none; } /* focused only to start the reading position */
.resume-title { margin-top: calc(1.5 * var(--mm)); font: 500 calc(10.5 * var(--pt)) / 1.3 var(--font-body); color: var(--ink-soft); }
.resume-meta, .resume-focus { margin-top: calc(1.2 * var(--mm)); font-size: calc(9 * var(--pt)); line-height: 1.35; }
.resume-focus { color: var(--ink-soft); }
/* Each item keeps its leading separator: a line may start with "·", never end with one. */
.resume-item { white-space: nowrap; }
.resume-header { padding-bottom: calc(4 * var(--mm)); border-bottom: calc(0.18 * var(--mm)) solid rgba(42, 33, 28, 0.35); } /* 0.5 pt in print, scaled with the sheet */

/* Links look printed: plain ink; an underline only on hover or keyboard focus. */
.resume-page a { color: inherit; text-decoration: none; }
.resume-page a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 0.5pt; box-shadow: none; outline: none; }

.resume-section h3 {
  margin: calc(5 * var(--mm)) 0 calc(1.5 * var(--mm));
  font: 600 calc(8.5 * var(--pt)) / 1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-ink);
}
.resume-entry + .resume-entry { margin-top: calc(2.5 * var(--mm)); }
.resume-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(4 * var(--mm)); }
.resume-entry h4 { font: 600 calc(10 * var(--pt)) / 1.3 var(--font-body); }
.resume-dates { flex: none; font-size: calc(9 * var(--pt)); font-variant-numeric: tabular-nums; }
.resume-sub { color: var(--ink-soft); }
.resume-entry ul { margin-top: calc(0.8 * var(--mm)); padding: 0; list-style: none; line-height: calc(12 * var(--pt)); }
.resume-entry li { position: relative; padding-left: calc(3.5 * var(--mm)); }
.resume-entry li + li { margin-top: calc(0.8 * var(--mm)); }
/* A round bullet, drawn: Instrument Sans sets "•" as a small square. */
.resume-entry li::before { content: ""; position: absolute; left: 0.1em; top: 0.55em; width: 0.32em; height: 0.32em; border-radius: 50%; background: currentColor; }
/* Skills and languages: the category in a 30 mm column, the values beside it. */
.resume-entry:not(:has(ul, .resume-sub, .resume-dates)) { display: grid; grid-template-columns: calc(30 * var(--mm)) 1fr; }
.resume-skills .resume-entry + .resume-entry, .resume-education .resume-entry:not(:has(.resume-sub)) { margin-top: calc(0.8 * var(--mm)); }
.resume-entry:not(:has(ul, .resume-sub, .resume-dates)) h4 { font-size: calc(9 * var(--pt)); }
.resume-page-foot { position: absolute; left: 0; right: 0; bottom: calc(7 * var(--mm)); text-align: center; font-size: calc(7.5 * var(--pt)); color: var(--ink-soft); }

/* On the desk: the sheet takes the 3D sheet's exact rectangle; Reading size enlarges it from the top. */
.resume.is-aligned .resume-page { position: absolute; left: var(--page-x); top: var(--page-y); margin-bottom: var(--space-7); }


/* Phone: the same printed design reflowed to the screen width (body 15 px, margins 20 px). */
@media (max-width: 767px), (orientation: portrait) {
  /* A solid bar holds Back and Print; the sheet scrolls below it, on the desk tone, with edges. */
  .resume { background: var(--paper-deep); padding: 72px 8px 24px; }
  .resume-bar { inset: 0 0 auto; height: 64px; padding: 10px var(--gutter); background: var(--paper-deep); border-bottom: 1px solid var(--line); }
  .resume .resume-page, .resume.is-aligned .resume-page {
    --mm: 4.724px; /* body 9 pt at 15 px */ position: relative; left: auto; top: auto; width: auto; min-height: 0; margin: 0;
    padding: 20px 20px 40px; box-shadow: inset 0 0 0 0.5px rgba(42, 33, 28, 0.06), var(--shadow-2);
  }
  .resume-entry-head { flex-direction: column; gap: 0; }
  .resume-switch { display: none; }
  .resume-controls { left: auto; right: var(--gutter); top: 14px; }
  .resume-controls button.resume-print { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-small); } /* in the bar: a full tap target */
  .resume-page a { padding-block: 12px; } /* 44 px tap targets; inline padding does not move the line */
}
html.no-webgl .resume { display: none; }

/* Without 3D the resume is part of the plain page: fluid width and the phone's reading size. */
.profile-resume .resume-page { --mm: 4.724px; width: auto; max-width: 100%; min-height: 0; padding: 20px 20px 40px; }
.profile-resume .resume-entry-head { flex-wrap: wrap; }

/* Print comes after the phone block: an A4 portrait page also matches (orientation: portrait), so the
   print rules must win over it and restore the sheet exactly. */
@media print {
  @page { size: A4; margin: 0; }
  body { overflow: visible; background: none; }
  html:not(.no-webgl) body > :not(#resume, #profile), .resume-bar, .resume-controls { display: none !important; } /* without 3D the plain page prints */
  .resume, .resume.is-aligned { position: static; overflow: visible; opacity: 1; visibility: visible; padding: 0; background: none; }
  /* !important: the desk view sets --mm inline (in pixels) and places the sheet over the 3D one. */
  .resume .resume-page, .resume.is-aligned .resume-page {
    --mm: 1mm !important; position: static; left: auto; top: auto; margin: 0; box-shadow: none;
    width: calc(210 * var(--mm)); min-height: calc(297 * var(--mm)); padding: calc(18 * var(--mm)) calc(18 * var(--mm)) calc(16 * var(--mm));
  }
  .resume-entry-head { flex-direction: row; gap: calc(4 * var(--mm)); }
  .resume-page a { padding-block: 0; }
}

/* The copy the 3D sheet is painted from (resume/painter.js): laid out off screen, never seen, and
   always the A4 desktop layout (the phone rule above stacks dates; this keeps them on the right). */
.resume-source { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; transform: translateX(-200vw); }
.resume-source .resume-entry-head { flex-direction: row; gap: calc(4 * var(--mm)); }