/* The résumé: a plain, print-quality document. One family, dark grey on paper, no colour, no icons. */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s8) var(--s4) var(--s9);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (min-width: 600px) { .doc { padding: var(--s9) var(--s5) var(--s10); } }

/* Header: the name and contact line, with the gate card beside it. */
.head { display: grid; gap: var(--s5); align-items: start; margin-bottom: var(--s7); }
@media (min-width: 760px) { .head { grid-template-columns: 1fr 288px; gap: var(--s7); } }

.name { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.name a { text-decoration: none; }
.name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.contact { display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: 0; margin-top: var(--s2); }
.contact a { color: var(--ink-2); }

/* Sections hang their label on the outer axis, like the home page's metadata. */
.sec { margin-top: var(--s6); }
.sec h2 {
  font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--ink); margin-bottom: var(--s3);
}
@media (min-width: 600px) {
  .sec { display: grid; grid-template-columns: 136px 1fr; column-gap: var(--s5); } /* the home page's outer axis */
  .sec h2 { padding-top: 0.24em; margin-bottom: 0; } /* sits on the first line's cap height */
  .sec > :not(h2) { grid-column: 2; }
}

.entry + .entry { margin-top: var(--s4); }
.entry > header { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s4); align-items: baseline; }
.entry h3 { font-size: inherit; font-weight: 600; line-height: inherit; color: var(--ink); }
.entry h3 .at { font-weight: 400; color: var(--ink-2); }
.when { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note { margin-top: 0; }
.note a { color: inherit; }

.sec ul { margin-top: var(--s1); }
.sec li { position: relative; padding-left: 1.1em; }
.sec li + li { margin-top: 2px; }
.sec li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.sec li b { font-weight: 600; color: var(--ink); }

.skills { display: grid; grid-template-columns: 9.5em 1fr; column-gap: var(--s4); row-gap: 2px; }
.skills dt { font-weight: 600; color: var(--ink); }
.skills dd { margin: 0; }

/* A redaction: an inline box exactly the width of the hidden value, measured at build time in ems.
   The box keeps that width forever, so filling in the value cannot reflow anything. The bar is drawn over it
   from just below the baseline to ascender height. */
.redact {
  display: inline-block;
  width: var(--w);
  position: relative;
  white-space: nowrap;
  text-align: left;
}
.redact::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: calc(50% - 0.44em); height: 0.88em;
  background: var(--ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.is-open .redact::after { opacity: 0; }
.is-open.dissolve .redact::after { transition: opacity var(--state) linear; }

/* The gate. The only explanation on the page. */
.gate {
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: var(--s5);
  color: var(--ink-2);
}
.gate-msg { display: grid; }
.gate-msg > p { grid-area: 1 / 1; transition: opacity var(--state) var(--ease-out); }
.gate-for { opacity: 0; visibility: hidden; }
.is-open .gate-locked { opacity: 0; visibility: hidden; }
.is-open .gate-for { opacity: 1; visibility: visible; }
.gate-row { margin-top: var(--s3); }
.gate-row a { color: var(--ink); }

.gate-actions { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); height: 44px; }
.gate-control { position: relative; height: 44px; display: flex; }
/* The label keeps its own width and its left edge while the button grows around it, so a relabel moves nothing. */
.gate-btn { min-width: 44px; overflow: hidden; justify-content: flex-start; }
.gate-label { flex: none; }
.gate-btn[data-state="done"] { cursor: default; }
.gate-btn[data-state="done"]:hover { border-color: var(--rule-strong); }
.gate-btn[data-state="done"]:active { transform: none; }
.gate-label { display: inline-block; }
.gate-pdf { color: var(--ink-2); font-size: 13.5px; transition: opacity var(--state) var(--ease-out); }
.is-open .gate-pdf { opacity: 0; visibility: hidden; }

.cells { display: flex; gap: var(--s2); }
.cells[hidden] { display: none; }
.cell {
  width: 40px; height: 44px; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: transparent; color: var(--ink);
  font-size: 18px; font-weight: 500; line-height: 1; text-align: center; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
  transition: border-color var(--micro) var(--ease-out), box-shadow var(--micro) var(--ease-out);
}
.cell:not(:placeholder-shown), .cell.filled { border-color: var(--ink); }
.cell:focus, .cell:focus-visible { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cells.rejected .cell { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cells.closing .cell { color: transparent; transition: color 80ms linear; } /* characters go first, then the boxes close */

/* The shards' canvas: one layer over the whole viewport, alive for about a second. */
.shards { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; }

/* One A4 page. */
@media print {
  @page { size: A4; margin: 12mm 15mm; }
  html, body { background: #fff; }
  .doc { max-width: none; padding: 0; font-size: 8.6pt; line-height: 1.36; color: #33302C; }
  .head { display: block; margin-bottom: 5.5mm; }
  .gate { display: none; }
  .name { font-size: 16pt; }
  .contact { margin-top: 1mm; column-gap: 4mm; }
  .contact a { text-decoration: none; }
  .sec { display: grid; grid-template-columns: 31mm 1fr; column-gap: 4mm; margin-top: 3.6mm; }
  .sec h2 { font-size: 7pt; padding-top: 0.3em; margin-bottom: 0; }
  .sec > :not(h2) { grid-column: 2; }
  .entry { break-inside: avoid; }
  .entry + .entry { margin-top: 2.4mm; }
  .sec li + li { margin-top: 0.4mm; }
  .note a { text-decoration: none; }
}