/*
 * HTML recreation of Michael-Baker-resume.pdf (exported from "resume 5.pages").
 *
 * Every length is in PDF points (1/72 in) multiplied by --u, which is exactly 1pt in
 * print, 110/96pt on wide screens, and shrinks so a page fits a phone screen.
 * Line breaks are hard-coded with <br> to match the PDF, so nothing is allowed to wrap.
 */

/* macOS and iOS ship Charter, the face Pages used; elsewhere, XCharter (same
   Bitstream Charter outlines and advance widths, slightly different kerning).
   The overrides put the baseline where Pages does: 12pt line, descent at the bottom. */
@font-face {
  font-family: "Resume Charter";
  src: local("Charter Roman"), local("Charter-Roman"),
       url("fonts/xcharter-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 95.9766%;
  descent-override: 24.0234%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Resume Charter";
  src: local("Charter Bold"), local("Charter-Bold"),
       url("fonts/xcharter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 95.9766%;
  descent-override: 24.0234%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Resume Charter";
  src: local("Charter Italic"), local("Charter-Italic"),
       url("fonts/xcharter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  ascent-override: 95.9766%;
  descent-override: 24.0234%;
  line-gap-override: 0%;
}

/* On screen a point is drawn at 110px per inch, the resolution Acrobat uses for
   "Actual Size", instead of the browser's 96, so the two read at the same size.
   In narrower windows the page spans the full width of .resume, edge to edge.
   Print resets --u to a true 1pt. */
:root {
  --u: min(calc(1pt * 110 / 96), calc(100cqi / 612));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  background: #e6e6e3;
}

/* Like Acrobat's page view: the first page starts at the top edge, 8px between pages. */
body {
  margin: 0;
  padding: 0 0 24px;
}

/* cqi in --u measures this box, which excludes any scrollbar (100vw would not). */
.resume {
  container-type: inline-size;
}

@media (prefers-color-scheme: dark) {
  html {
    background: #2a2a28;
  }
}

/* One US Letter sheet: 612 x 792pt with 36pt (0.5in) margins. */
.page {
  box-sizing: border-box;
  width: calc(612 * var(--u));
  height: calc(792 * var(--u));
  margin: 0 auto;
  padding: calc(36 * var(--u));
  overflow: hidden;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 8px 24px rgb(0 0 0 / 0.1);
  font-family: "Resume Charter", Charter, serif;
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  font-kerning: normal;
  font-variant-ligatures: none;
  font-synthesis: none;
  white-space: nowrap;
}

.page + .page {
  margin-top: 8px;
}

.page h1,
.page h2,
.page h3,
.page p,
.page ul,
.page li {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Pages adds 0.03pt between paragraphs: lines inside a paragraph sit 12pt apart, 12.03pt across one. */
.page h1,
.page h2,
.page h3,
.page p,
.page li {
  padding-bottom: calc(0.03 * var(--u));
}

.page a {
  color: inherit;
  text-decoration: none;
}

.page a:focus-visible {
  outline: 1px solid #000;
  outline-offset: 1px;
}

.page strong {
  font-weight: 700;
}

.masthead {
  text-align: center;
}

.masthead h1 {
  font-weight: 700;
}

/* A blank 12.03pt paragraph separates sections and entries; two precede the closing lines. */
.masthead + section,
section + section,
.entry + .entry {
  margin-top: calc(12.03 * var(--u));
}

.role-title {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: calc(0.9082 * var(--u));
  text-underline-offset: calc(0.6348 * var(--u));
  text-decoration-skip-ink: none;
}

/* 8pt bullet set 0.48pt below the baseline; text follows at its 4.72pt advance.
   Wrapped lines hang at 5.30pt, or 4.58pt in the lists marked .narrow. */
.bullets {
  --hang: calc(5.3018 * var(--u));
  list-style: none;
}

.bullets.narrow {
  --hang: calc(4.5818 * var(--u));
}

.bullets li {
  padding-left: var(--hang);
  text-indent: calc(-1 * var(--hang));
}

.bullets li::before {
  content: "•";
  content: "•" / "";
  font-size: calc(8 * var(--u));
  line-height: 0;
  vertical-align: calc(-0.4804 * var(--u));
}

/* Wrapped skill lines sit 0.72pt in from the label line. */
p.skill {
  padding-left: calc(0.72 * var(--u));
  text-indent: calc(-0.72 * var(--u));
}

.closing {
  margin-top: calc(24.06 * var(--u));
  font-style: italic;
}

/* Highlighter colors: yellow for text you select, pink for text a link scrolls to
   (URL text fragments, #:~:text=...). */
.page ::selection {
  background: #ffef00;
  color: #000;
}

.page ::target-text {
  background: #ff5cc8;
  color: #000;
}

/* Bitcoin & Lightning skills. Each term is a popover button: a click or tap opens its
   tooltip and keeps Bitcoin orange behind the term. The browser keeps one tooltip open
   at a time and closes it on a click anywhere else, with no script. With a mouse,
   hovering highlights too. Background only, so nothing moves. */
.skill-item {
  transition: background-color 0.12s;
  anchor-name: var(--a);
}

.skill-item:has(.tip:popover-open) {
  background-color: #f7931a;
}

@media (hover: hover) {
  .skill-item:hover {
    background-color: #f7931a;
  }
}

.skill-item button {
  all: unset;
  text-indent: 0; /* all: unset would inherit p.skill's hanging indent */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.skill-item button:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

/* Sized in px, not --u, so a tooltip stays readable on a phone-scaled page. */
.tip {
  width: max-content;
  max-width: min(17rem, calc(100vw - 24px));
  padding: 8px 11px 9px;
  border: 0;
  border-top: 3px solid #f7931a;
  border-radius: 6px;
  background: #161616;
  color: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
  font-size: 14px;
  line-height: 1.4;
  text-indent: 0;
  white-space: normal;
  cursor: auto;
  opacity: 0;
  translate: 0 -3px;
  transition: opacity 0.16s, translate 0.16s,
              overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}

.tip:popover-open {
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .tip:popover-open {
    opacity: 0;
    translate: 0 -3px;
  }
}

.tip strong {
  display: block;
  margin-bottom: 2px;
  color: #f7931a;
}

/* Under the term from its left edge, flipping left or above when it would not fit.
   Browsers without anchor positioning center the tooltip in the window instead. */
@supports (position-area: bottom) {
  .tip {
    position-anchor: var(--a);
    position-area: bottom span-right;
    position-try-fallbacks: bottom span-left, top span-right, top span-left;
    inset: auto;
    margin: 6px 0;
  }
}

@page {
  size: letter;
  margin: 0;
}

@media print {
  :root {
    --u: 1pt;
  }

  html {
    background: none;
  }

  body {
    padding: 0;
  }

  .page,
  .page + .page {
    margin: 0;
    box-shadow: none;
    break-after: page;
  }

  .page:last-child {
    break-after: auto;
  }

  .tip {
    display: none;
  }
}