/* The notes page: what the drop means for hiring, why ratings drift, the research and the
   methods, as one plain page to read down. The same paper, ink and gold as the drop, the same
   two type roles and the same motion. */

:root {
  --measure: 40rem;
  --header-h: 3rem;
}

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
}
.page-notes {
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (min-width: 720px) {
  .page-notes {
    font-size: 1.1875rem;
  }
}
.page-notes main p,
.page-notes main li {
  color: var(--ink-body);
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The header: back to the drop, and where you are. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--press) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--ink-rule);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.site-back::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.site-where {
  margin: 0;
}

/* The serif role, large: headlines. */
.notes-hero {
  padding-block: 48px 24px;
}
.notes-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
  color: var(--ink);
}
.notes-lede {
  margin: 0 0 24px;
  font-size: 1.15em;
  line-height: 1.45;
}
/* Four parts, closed until a reader opens one. Each header says in one line what is inside. */
.folds {
  padding-bottom: 24px;
}
.fold {
  border-top: 1px solid var(--ink-rule-strong);
}
.fold:last-child {
  border-bottom: 1px solid var(--ink-rule-strong);
}
.fold > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 72px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.fold > summary::-webkit-details-marker {
  display: none;
}
.fold > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--press) var(--ease);
}
.fold[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.fold-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60;
  color: var(--ink);
}
.fold-sum {
  grid-column: 1;
}
@media (hover: hover) and (pointer: fine) {
  .fold > summary:hover .fold-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
    text-decoration-color: var(--ink-rule-strong);
  }
}
.fold-body {
  padding: 4px 0 36px;
}
.fold-body > h3:first-child {
  margin-top: 0.5em;
}
.fold-body h3 {
  margin: 2em 0 0.5em;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fold-body h4 {
  margin: 0 0 0.5em;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fold-body p {
  margin: 0 0 1em;
}
/* The lab's rules and the sources read denser, like methods. */
#lab .fold-body,
#sources .fold-body,
#data .fold-body {
  font-size: 0.9375em;
  line-height: 1.55;
}

.notes-section {
  padding-block: 40px 16px;
}
.notes-section > .wrap > h2,
.notes-section h2 {
  margin: 0 0 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule-strong);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
  color: var(--ink);
}
.notes-section h3 {
  margin: 2em 0 0.5em;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.notes-section h4 {
  margin: 0 0 0.5em;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.notes-section p {
  margin: 0 0 1em;
}

/* The four forces */
.forces,
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
}
.forces > li,
.rules > li {
  padding: 18px 0 6px;
  border-top: 1px solid var(--ink-rule);
}
.forces > li > h3 {
  margin-top: 0;
}
.forces .force-n {
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--ink-label);
}

/* Figures */
.figure {
  margin: 32px 0 40px;
}
.fig-title {
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--ink) !important;
}
.figure figcaption {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-body);
}
.src,
.meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-label);
}
.figure .src {
  display: block;
  margin-top: 6px;
}
.fallback {
  font-size: 0.9375rem;
}
/* Before its script draws a chart, hold the room the chart will take, so the text below does
   not jump when it appears. Each value is the drawn chart's measured height. */
@media (scripting: enabled) {
  #fig-why-now {
    container-type: inline-size;
  }
  #why-now-root {
    min-height: 227px;
  }
  @container (min-width: 480px) {
    #why-now-root {
      min-height: 235px;
    }
  }
  #validity-root {
    min-height: 698px;
  }
  @media (min-width: 720px) {
    #validity-root {
      min-height: 504px;
    }
  }
}

/* Two hidden vouch cards that flip together */
.reveal {
  margin: 20px 0 28px;
}
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  perspective: 900px;
  min-height: 11.75rem;
}
.card-inner {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 11.75rem;
  transform-style: preserve-3d;
  transition: transform var(--move) var(--ease);
}
.reveal.is-open .card-inner {
  transform: rotateY(180deg);
}
.card-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--ink-rule-strong);
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-front {
  justify-content: space-between;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 10px, rgb(var(--ink-rgb) / 0.07) 10px 11px);
}
.card-back {
  transform: rotateY(180deg);
}
.card-face .who {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-label);
}
.card-face .sealed {
  font-size: 1.05rem;
  color: var(--ink-body);
}
.card-face blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.reveal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}

/* Methods: smaller, denser type */
.fold-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 12px 0 20px;
}
.fold-body th,
.fold-body td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--ink-body);
}
.fold-body th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-label);
}
/* The lab's results table names each setting in its first column, in the body face. */
.fold-body tbody th {
  font-family: var(--serif);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.fold-body caption {
  padding-bottom: 6px;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-label);
}
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 479.98px) {
  .fold-body td {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .table-scroll {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
}
/* Touch: a table cell holds at most one link, so the whole cell is that link's hit area. */
.table-scroll td {
  position: relative;
}
.table-scroll td a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fold-body ul {
  padding-left: 1.2em;
}
.fold-body li {
  margin-bottom: 0.5em;
}
.fold-body li strong {
  color: var(--ink);
}

.site-footer {
  margin-top: 56px;
  padding-block: 24px 48px;
  border-top: 1px solid var(--ink-rule-strong);
}
.site-footer p {
  margin: 0 0 0.4em;
}
.site-footer a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

@media (min-width: 720px) {
  :root {
    --header-h: 3.25rem;
  }
  .notes-hero {
    padding-block: 72px 32px;
  }
  .notes-section {
    padding-block: 56px 24px;
  }
}

/* Reduced motion: the cards' answers fade in over the sealed faces instead of turning. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .card-inner,
  .reveal.is-open .card-inner {
    transform: none;
    transform-style: flat;
    transition: none;
  }
  .card-back {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--fade) var(--ease),
      visibility 0s linear var(--fade);
  }
  .reveal.is-open .card-back {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}