/* ==========================================================================
   THE AFTER · résumé page supplement
   Version 3.7

   Loaded only by resume.html, after assets/site.css. It adds nothing to the
   token system and redefines nothing in it. Square corners, one-pixel rules,
   no shadows, in keeping with the rest of the site.

   ON THE GREEN: site.css documents four resting marks on the homepage. This
   page adds exactly one of its own, the dashed spine under the timeline that
   stands for The After. Hover states on the reading tabs add a second, which
   is acceptable because it is not there when the page is still. If you add a
   further resting mark here, take this one away first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The chooser, and the doors inside the "by your problem" reading
   -------------------------------------------------------------------------- */

.cv-ways {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
  .cv-ways { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.cv-way {
  display: block;
  text-align: left;
  font-family: inherit;
  color: var(--graphite);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 1.3rem 1.6rem;
  cursor: pointer;
  transition: background .2s ease;
}
.cv-way:hover { background: var(--paper-sunk); }
.cv-way[aria-pressed='true'] { background: var(--paper-sunk); }

.cv-way__n { display: block; margin-bottom: .7rem; }
.cv-way__t {
  display: block;
  font-family: Newsreader, 'Iowan Old Style', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--ink);
  margin-bottom: .35rem;
}
.cv-way__s { display: block; font-size: .8125rem; line-height: 1.5; color: var(--slate); }

/* --------------------------------------------------------------------------
   2. The reading switcher
   -------------------------------------------------------------------------- */

.cv-switcher {
  position: sticky;
  top: 4.5rem;               /* clears the masthead, which is 4.5rem tall */
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.cv-switcher__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.4rem; padding-block: .75rem;
}
.cv-tabs { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.cv-tab {
  font-family: inherit; font-size: .8125rem; font-weight: 450;
  color: var(--graphite); background: none; border: 0;
  border-bottom: 1px solid transparent;
  padding: .3rem 0; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.cv-tab:hover { color: var(--ink); border-bottom-color: var(--green); }
.cv-tab[aria-pressed='true'] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

.cv-viewhead { margin-bottom: 2.8rem; }
.cv-viewhead .title { margin-bottom: .7rem; }

/* --------------------------------------------------------------------------
   3. Square toggles, following .btn rather than inventing a pill
   -------------------------------------------------------------------------- */

.cv-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule);
}
.cv-filter {
  font-family: inherit; font-size: .8125rem; font-weight: 450;
  padding: .45rem 1rem; cursor: pointer;
  background: transparent; color: var(--graphite);
  border: 1px solid var(--rule-strong);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cv-filter:hover { border-color: var(--ink); color: var(--ink); }
.cv-filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* --------------------------------------------------------------------------
   4. Reading one: the timeline
   -------------------------------------------------------------------------- */

.cv-chart { margin-top: 1.8rem; }
.cv-grid  { --gut: 10.5rem; }
@media (max-width: 46rem) { .cv-grid { --gut: 6.4rem; } }

.cv-line { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); align-items: center; min-height: 2.1rem; }
.cv-line__org {
  font-size: .8125rem; color: var(--slate); text-align: right; padding-right: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-line--spine .cv-line__org { color: var(--ink); }

.cv-track { position: relative; height: 2.1rem; }
.cv-bar {
  position: absolute; top: .5rem; height: 1.1rem;
  display: block; padding: 0; border: 0; cursor: pointer;
  background: var(--rule-strong);
  transition: opacity .2s ease, box-shadow .15s ease;
}
.cv-bar[data-track='enterprise'] { background: var(--slate); }
.cv-bar[data-track='ventures']   { background: var(--crimson); }
.cv-bar:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cv-bar[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.cv-bar.is-dim { opacity: .18; }

/* The one resting green mark on this page. */
.cv-spine {
  position: absolute; top: .78rem; height: .55rem;
  background: repeating-linear-gradient(90deg, var(--green) 0 .4rem, transparent .4rem .75rem);
}

.cv-axis { position: relative; height: 1.4rem; margin-left: var(--gut); border-bottom: 1px solid var(--rule); }
.cv-axis span { position: absolute; top: .1rem; transform: translateX(-50%); }

.cv-key { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: 1.5rem; }
.cv-key span { display: inline-flex; align-items: center; gap: .55rem; }
.cv-key i { flex: none; width: 1.3rem; height: .5rem; }

.cv-detail { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-strong); min-height: 11rem; }
.cv-detail ul { margin: 0; padding-left: 1.15rem; max-width: var(--measure); }
.cv-detail li { margin-bottom: .5rem; }
.cv-detail li::marker { color: var(--rule-strong); }
.cv-role { font-size: .8125rem; color: var(--slate); margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   5. Reading two: the dial
   -------------------------------------------------------------------------- */

.cv-dial {
  position: sticky; top: 7.6rem; z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding-block: 1rem 1.1rem; margin-bottom: 2.2rem;
}
.cv-dial__ends { display: flex; justify-content: space-between; margin-bottom: .55rem; }
.cv-dial input {
  width: 100%; margin: 0; height: 1.6rem; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.cv-dial input::-webkit-slider-runnable-track { height: 2px; background: var(--rule-strong); }
.cv-dial input::-moz-range-track            { height: 2px; background: var(--rule-strong); }
.cv-dial input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: -.44rem;
  background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink);
}
.cv-dial input::-moz-range-thumb {
  width: 1rem; height: 1rem;
  background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink);
}
.cv-dial__read { text-align: center; margin-top: .6rem; }

.cv-statement { min-height: 4.4rem; margin-bottom: 2.4rem; }
.cv-entry { padding-block: 1.6rem; border-bottom: 1px solid var(--rule); }
.cv-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin-bottom: .55rem; }
.cv-entry__head h3 {
  font-family: Newsreader, 'Iowan Old Style', Georgia, serif;
  font-size: 1.3rem; font-weight: 400; letter-spacing: -.014em; color: var(--ink);
}
.cv-swap[hidden] { display: none; }
.cv-swap--alt { color: var(--slate); margin-top: .7rem; }

/* --------------------------------------------------------------------------
   6. Reading three: the four doors
   -------------------------------------------------------------------------- */

.cv-answer { margin-top: 2.4rem; }
.cv-brings { margin: 0; padding-left: 1.15rem; max-width: var(--measure); }
.cv-brings li { margin-bottom: .6rem; }
.cv-brings li::marker { color: var(--rule-strong); }
.cv-proof { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.cv-proof p { margin-bottom: .9rem; }

/* --------------------------------------------------------------------------
   7. Reading four: skills and evidence
   -------------------------------------------------------------------------- */

.cv-split { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); padding-top: 1.6rem; }
@media (min-width: 60rem) {
  .cv-split { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gutter); align-items: start; }
  .cv-skills { position: sticky; top: 9.4rem; }
}
.cv-skills { display: flex; flex-direction: column; }
.cv-skill {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  font-family: inherit; font-size: .9375rem; color: var(--graphite); text-align: left;
  background: none; border: 0; border-left: 2px solid var(--rule);
  padding: .5rem .8rem; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.cv-skill:hover { color: var(--ink); border-left-color: var(--rule-strong); }
.cv-skill[aria-pressed='true'] { color: var(--ink); font-weight: 500; border-left-color: var(--ink); }

.cv-item { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); transition: opacity .2s ease; }
.cv-item.is-off { opacity: .22; }
.cv-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.cv-item__head h3 {
  font-family: Newsreader, 'Iowan Old Style', Georgia, serif;
  font-size: 1.2rem; font-weight: 400; letter-spacing: -.014em; color: var(--ink);
}
.cv-item__what { color: var(--slate); margin: .3rem 0 0; }
.cv-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.cv-tags li {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .04em; color: var(--slate);
  border: 1px solid var(--rule); padding: .1rem .5rem;
}
.cv-tags li.is-hit { color: var(--ink); border-color: var(--ink); }
.cv-note { min-height: 3.4rem; margin-bottom: 1.4rem; color: var(--slate); }

/* --------------------------------------------------------------------------
   8. Reading five: the plain record
   This one is written into the HTML rather than built by script, so the page
   is complete before any JavaScript runs and complete if none ever does.
   -------------------------------------------------------------------------- */

.cv-plain { max-width: 46rem; }
.cv-plain section + section { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.cv-plain h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.004em;
  color: var(--ink); margin-bottom: 1.1rem;
}
.cv-post { margin-bottom: 1.6rem; }
.cv-post__role { color: var(--ink); font-weight: 600; margin: 0; }
.cv-post__meta { margin: .1rem 0 .5rem; }
.cv-post ul { margin: 0; padding-left: 1.15rem; max-width: var(--measure); }
.cv-post li { margin-bottom: .35rem; }
.cv-post li::marker { color: var(--rule-strong); }

.cv-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: 0; }
@media (min-width: 46rem) { .cv-dl { grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem var(--gutter); } }
.cv-dl dt { padding-top: .2rem; }
.cv-dl dd { margin: 0 0 .7rem; }
@media (min-width: 46rem) { .cv-dl dd { margin-bottom: 0; } }

.cv-list { margin: 0; padding-left: 1.15rem; max-width: var(--measure); }
.cv-list li { margin-bottom: .35rem; }
.cv-list li::marker { color: var(--rule-strong); }

/* --------------------------------------------------------------------------
   9. Print
   The interactive readings do not print usefully. Everything but the record
   itself is dropped, and the record prints from whichever reading is on
   screen; the plain one is the sensible thing to print.
   -------------------------------------------------------------------------- */

@media print {
  .cv-ways, .cv-switcher, .cv-filters, .cv-dial, .cv-key, .cv-skills, .no-print { display: none !important; }
  .cv-split { grid-template-columns: minmax(0, 1fr); border: 0; padding-top: 0; }
  .cv-item.is-off { opacity: 1; }
  .cv-bar, .cv-spine { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}