@charset "utf-8";
/* ════════════════════════════════════════════════════════════════════════════

   doc.css — the résumé and the press kit.

   Both are documents rather than pages: read top to bottom, printed as often
   as scrolled. They borrow the case pages' editorial grid and add a print
   stylesheet that is a real deliverable, not an afterthought — "PRINT / SAVE
   AS PDF" is the download link for the résumé.

   ════════════════════════════════════════════════════════════════════════════ */

.doc { padding: 0 var(--gutter) clamp(60px, 10vh, 120px); }

.doc__head, .doc__block {
  display: grid;
  grid-template-columns: minmax(0, 22%) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 44px);
  padding-top: clamp(46px, 7vh, 92px);
}
@media (max-width: 900px) {
  .doc__head, .doc__block { grid-template-columns: 1fr; }
}

.doc__head { padding-top: clamp(140px, 22vh, 220px); }
.doc__eyebrow {
  grid-column: 1; align-self: start; padding-top: .7em;
  font: 700 var(--label)/1.22 Montserrat, sans-serif; text-transform: uppercase;
  color: var(--mute);
}
.doc__title {
  grid-column: 2;
  font-weight: 700; line-height: .92; letter-spacing: -0.04em;
  font-size: clamp(60px, 13vw, 190px);
}
.doc__lede {
  grid-column: 2; max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 24px); line-height: 1.42;
  margin-top: clamp(22px, 3vw, 40px);
}
.doc__meta {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: clamp(20px, 2.6vw, 34px);
  font: 700 var(--label)/1.22 Montserrat, sans-serif; text-transform: uppercase;
}
.doc__meta a { border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.doc__meta a:hover { border-color: currentColor; }
.doc__actions { grid-column: 2; margin-top: clamp(24px, 3vw, 40px); }
.doc__actions .pill { cursor: pointer; }

.doc__col { grid-column: 2; max-width: 68ch; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6; }
.doc__col p + p { margin-top: .8em; }
.doc__note {
  grid-column: 2; margin-top: 18px;
  font-size: 13px; color: var(--mute);
}

/* ── Roles ─────────────────────────────────────────────────────────────── */
.roles { grid-column: 2; border-top: 1px solid var(--rule); }
.role {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 6px clamp(16px, 2vw, 34px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 700px) { .role { grid-template-columns: 1fr; } }

.role__when {
  grid-row: 1 / span 3;
  font: 700 var(--label)/1.6 Montserrat, sans-serif; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) { .role__when { grid-row: auto; } }
.role__what {
  font-size: clamp(19px, 1.7vw, 28px); font-weight: 700; line-height: 1.18;
  letter-spacing: -0.018em;
}
.role__where { font-size: 14px; line-height: 1.5; color: var(--mute); font-weight: 500; }
.role__hits { margin-top: 10px; display: grid; gap: 7px; }
.role__hits li {
  position: relative; padding-left: 20px;
  font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.55;
}
/* The bullet is the bolt, at text size. */
.role__hits li::before,
.bolts li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 6px; height: 13px;
  background: currentColor;
  clip-path: polygon(59.4% 45%, 100% 45%, 22.7% 100%, 40.5% 54.6%, 0 54.6%, 77.3% 0);
}

/* ── Bolt lists ────────────────────────────────────────────────────────── */
.bolts { grid-column: 2; max-width: 76ch; display: grid; gap: 12px; }
.bolts--tight { gap: 7px; }
.bolts li {
  position: relative; padding-left: 22px;
  font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55;
}

/* ── Press kit ─────────────────────────────────────────────────────────── */
.kit { grid-column: 2; display: grid; gap: 1px; background: var(--rule);
       border: 1px solid var(--rule); }
@media (min-width: 900px) { .kit { grid-template-columns: 1fr 1fr; } }
.kit__item {
  background: var(--paper); padding: clamp(20px, 2vw, 30px);
  display: grid; gap: 12px; align-content: start;
}
.kit__item h3 { font-size: clamp(15px, 1.15vw, 19px); font-weight: 700; }
.kit__item p { font-size: 14px; line-height: 1.55; color: #2b2b2b; }
.kit__preview {
  display: grid; place-items: center;
  min-height: 128px; background: var(--panel); border: 1px solid var(--rule);
  padding: 20px;
}
.kit__preview svg { fill: var(--ink); }
.kit__preview img { max-height: 120px; width: auto; }
.kit__preview--dark { background: var(--ink); }
.kit__preview--dark svg { fill: var(--paper); }
.kit__links { display: flex; flex-wrap: wrap; gap: 10px; }

.swatch { display: flex; gap: 0; width: 100%; height: 74px; border: 1px solid var(--rule); }
.swatch span { flex: 1; display: grid; align-items: end; padding: 6px;
               font: 700 9px/1.2 Montserrat, sans-serif; }

/* ════ PRINT ══════════════════════════════════════════════════════════════
   The résumé is meant to be printed. Everything that is chrome goes; the
   grid collapses to a single column; nothing is allowed to break mid-role. */
@media print {
  @page { margin: 14mm 13mm; }

  .masthead, .footer, .doc__actions, .case__next, .skiplink { display: none !important; }
  .doc { padding: 0; }
  .doc__head, .doc__block { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .doc__head { padding-top: 0; }

  body { font-size: 10pt; }
  .doc__title { font-size: 30pt; line-height: 1; margin-bottom: 4mm; }
  .doc__title br { display: none; }
  .doc__lede { font-size: 10.5pt; max-width: none; margin-top: 0; }
  .doc__meta { margin-top: 3mm; font-size: 8pt; }
  .doc__eyebrow { display: none; }

  .case__h {
    position: static; padding: 0;
    margin: 7mm 0 2.5mm; font-size: 8.5pt;
    border-bottom: .4pt solid #000; padding-bottom: 1.5mm;
  }

  .calls { display: block; background: none; border: 0; }
  .call { padding: 0 0 3mm; break-inside: avoid; }
  .call h3 { font-size: 10pt; }
  .call p { font-size: 9.5pt; color: #000; }

  .roles { border-top: 0; }
  .role {
    break-inside: avoid;
    grid-template-columns: 34mm 1fr; gap: 1mm 5mm;
    padding: 0 0 4mm; border-bottom: 0;
  }
  .role__when { font-size: 8pt; color: #000; }
  .role__what { font-size: 11pt; }
  .role__where { font-size: 9pt; color: #000; }
  .role__hits li { font-size: 9.5pt; padding-left: 4mm; }
  .role__hits li::before, .bolts li::before { width: 2mm; height: 3.4mm; top: .3em; }
  .bolts li { font-size: 9.5pt; padding-left: 4.5mm; }

  /* Reveal-on-scroll must never withhold ink from a printer. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: #000; }
}