/*
  michaelchristophermd.com — inner pages

  Loaded after styles.css on the gap, the hunter, the numbers and the legal
  pages. It only adds the layouts those pages need and reuses the colours,
  type and components from the main stylesheet.

  Contents
    1. Page heroes (dark with a photo mosaic, dark with a portrait, light)
    2. Prose, pull quotes and footnotes
    3. The gap: essay with a chapter list, the "look for yourself" interactive,
       the three "what needs to change" panels, the 60,000 figure, publications
    4. The hunter: portrait and chapters, the quote card, the outlet list
    5. The numbers: figures table, source reports, how it's counted, references
    6. Legal pages
    7. Photos of Dr. Christopher
*/

.narrow { max-width: calc(760px + var(--gutter) * 2); }
.nav__links a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .12); }


/* ==========================================================================
   1. Page heroes
   ========================================================================== */

.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(150px, 15vw, 210px) clamp(72px, 8vw, 112px); }
.page-hero__in { position: relative; display: grid; justify-items: center; gap: 24px; text-align: center; }
.page-hero .display { font-size: clamp(48px, 7.4vw, 108px); line-height: .92; letter-spacing: -.03em; max-width: 14ch; }
.page-hero .lede { max-width: 34em; }

/* "Home / The gap" breadcrumb */
.crumbs { display: flex; gap: 10px; justify-content: center; color: var(--muted); }
.crumbs a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease, color .2s ease; }
.crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }

.page-hero--dark { background: var(--night); color: var(--ash); }
.page-hero--dark .display { color: var(--cloud); }
.page-hero--dark .lede { color: #c9c9cb; }
.page-hero--dark .crumbs { color: var(--fog); }
.page-hero--dark .crumbs a:hover { color: #fff; }
.page-hero--dark .pill { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .15); color: #fafafa; }
.page-hero--dark :focus-visible { outline-color: #fff; }

.page-hero--light { background: var(--stone); }
.page-hero--legal .page-hero__in { justify-items: start; text-align: left; }
.page-hero--legal .crumbs { justify-content: flex-start; }
.page-hero--legal .display { font-size: clamp(44px, 6vw, 80px); }

/* The gap: a field of dermoscopy circles, faded out in the middle where the type sits */
.page-hero--mosaic { min-height: min(88svh, 860px); display: flex; align-items: center; }
.page-hero--mosaic .page-hero__in { width: 100%; }
.page-hero__mosaic {
  position: absolute; inset: -4% -6%; z-index: -1;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(10px, 1.6vw, 22px); align-content: center;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 0%, transparent 30%, rgba(0, 0, 0, .18) 55%, #000 90%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 0%, transparent 30%, rgba(0, 0, 0, .18) 55%, #000 90%);
}
.page-hero__mosaic i { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.page-hero__mosaic i:nth-child(odd) { transform: translateY(34%); }
.page-hero__mosaic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }

/* The hunter: the desert portrait, with the type on the left and his face kept clear on the right */
.page-hero--photo { min-height: min(88svh, 820px); display: flex; align-items: flex-end; }
.page-hero--photo .page-hero__in { justify-items: start; text-align: left; width: 100%; }
.page-hero--photo .crumbs { justify-content: flex-start; }
.page-hero--photo .display { max-width: 9ch; }
.page-hero--photo .lede { max-width: 30em; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 10, 11, .86) 0%, rgba(9, 10, 11, .62) 34%, rgba(9, 10, 11, .12) 62%, rgba(9, 10, 11, 0) 100%),
    linear-gradient(180deg, rgba(9, 10, 11, .5) 0%, rgba(9, 10, 11, 0) 30%, rgba(9, 10, 11, 0) 64%, rgba(9, 10, 11, .72) 100%);
}


/* ==========================================================================
   2. Prose, pull quotes and footnotes
   ========================================================================== */

.prose { color: var(--body); }
.prose p { font-size: 18px; line-height: 1.68; max-width: 36em; }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue-light); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--ink); }

/* Footnote numbers link to the references on The numbers page */
sup { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup a { font-family: var(--sans); font-weight: 500; color: var(--blue); padding: 2px 3px; border-radius: 4px; text-decoration: none; }
sup a:hover { background: var(--blue-wash); color: var(--ink); }

.pull {
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.18; letter-spacing: -.015em; color: var(--ink);
  border-left: 2px solid var(--blue-light); padding-left: clamp(18px, 2vw, 28px); margin: 40px 0; max-width: 24em;
}
.pull em { font-style: italic; }
.prose .pull { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; max-width: 22em; }


/* ==========================================================================
   3. The gap
   ========================================================================== */

/* Sticky chapter list on the left, the essay on the right */
.essay { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.essay__aside { position: sticky; top: 112px; display: grid; gap: 18px; }
.essay__aside > .caps { color: var(--ink); }
.essay__aside ol { display: grid; border-top: 1px solid var(--hairline); }
.essay__aside a {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline;
  padding: 11px 0 11px 12px; border-bottom: 1px solid var(--hairline); border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--body); transition: color .2s ease, border-color .3s ease, background-color .3s ease;
}
.essay__aside a .caps { font-size: 10px; color: var(--muted); }
.essay__aside a:hover { color: var(--ink); }
.essay__aside a.is-active { color: var(--ink); border-left-color: var(--blue); background: linear-gradient(90deg, rgba(15, 117, 222, .08), transparent); }   /* the chapter in view, set by pages.js */
.essay__body { min-width: 0; }
.chapter { scroll-margin-top: 110px; padding-bottom: clamp(64px, 8vw, 112px); }
.chapter + .chapter { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); }
.chapter__num { color: var(--blue); }
.chapter__h { font-size: clamp(38px, 4.4vw, 64px); line-height: .98; letter-spacing: -.025em; margin: 14px 0 30px; max-width: 16ch; }
.chapter > .btn { margin-top: 8px; }

/* "Look for yourself": a patient's back with three numbered rings. Choosing one
   zooms into that spot; the reveal shows spot 1 through the dermatoscope with a
   slider against the naked-eye view. */
.hunt { background: var(--stone); border-radius: var(--r-tile); padding: clamp(18px, 2.6vw, 32px); }
.hunt__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; color: var(--ink); }
.hunt__steps { display: flex; gap: 6px; }
.hunt__steps span { width: 28px; height: 3px; border-radius: 3px; background: rgba(29, 23, 25, .12); transition: background-color .4s ease; }
.hunt__steps span.is-on { background: var(--blue); }
.hunt__stage {
  position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: min(100%, calc(76svh * .75)); margin: 0 auto;
  border-radius: var(--r-card); overflow: hidden; background: var(--ink);
  box-shadow: 0 40px 90px -55px var(--glow-light);
}
.hunt__view { position: absolute; inset: 0; transition: opacity .6s ease, transform .9s var(--ease-out); }
/* the back photo zooms in place; pages.js sets its transform-origin to the chosen spot */
.hunt__view--back { will-change: transform; }
.hunt__stage.is-zoomed .spot { opacity: 0; pointer-events: none; }
.hunt__view[hidden] { display: block; opacity: 0; pointer-events: none; transform: scale(1.04); }
.hunt__view > img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 9999px; white-space: nowrap;
  background: rgba(255, 255, 255, .86); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
}
.spot { position: absolute; aspect-ratio: 1; border: 1.5px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(0, 0); transition: transform .3s ease, background-color .3s ease, opacity .3s ease; }
.spot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); animation: spot-ping 2.4s var(--ease-out) infinite; }
.spot:hover { transform: scale(1.12); background: rgba(255, 255, 255, .14); }
.spot b { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 4px 9px; border-radius: 9999px; background: rgba(255, 255, 255, .9); color: var(--ink); }
@keyframes spot-ping { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.compare { position: absolute; inset: 0; cursor: ew-resize; touch-action: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__top { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid #fff; background: rgba(29, 23, 25, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.compare input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: ew-resize; margin: 0; }
.compare input:focus-visible ~ .compare__handle::after, .compare:focus-within .compare__handle::after { box-shadow: 0 0 0 3px var(--blue-light); }
.hunt__view .tag { position: absolute; top: 14px; z-index: 2; }
.hunt__view .tag-l { left: 14px; }
.hunt__view .tag-r { right: 14px; }
.hunt__cap { margin: 22px 0 0; color: var(--body); font-size: 17px; line-height: 1.6; min-height: 3.2em; max-width: 40em; }
.hunt__actions { margin-top: 16px; }
.hunt .chip { --c: #fff; cursor: pointer; }
.hunt .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* What needs to change: three panels */
.change { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.change .tile { display: flex; flex-direction: column; gap: 40px; padding: 26px; min-height: 260px; }
.change__n { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: .8; letter-spacing: -.04em; }
.change p { font-size: 16px; line-height: 1.5; margin-top: auto; }
.change + .btn { margin-top: 28px; }   /* breathing room between the three tiles and the Dermatology Times button */

/* The 60,000 figure */
.bigfigure { display: grid; gap: 14px; margin: 6px 0 36px; }
.bigfigure b { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(88px, 13vw, 176px); line-height: .82; letter-spacing: -.045em; color: var(--ink); }
.bigfigure p { font-size: 20px; line-height: 1.45; color: var(--ink); max-width: 30em; }

/* Published papers, as cards that link out */
.pubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.pub {
  display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.8vw, 36px); min-height: 230px;
  background: #fff; border-radius: var(--r-tile); box-shadow: 0 0 0 1px var(--hairline);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.pub:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hairline), 0 30px 60px -40px var(--glow-light); }
.pub__journal { color: var(--blue); }
.pub__title { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.pub__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); margin-top: auto; }
.pub__meta svg { width: 12px; height: 12px; color: var(--ink); }


/* ==========================================================================
   4. The hunter
   ========================================================================== */

/* Portrait pinned on the left, five short chapters on the right */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.story__photo { position: sticky; top: 104px; }
.portrait { position: relative; margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-tile); box-shadow: 0 50px 100px -60px rgba(14, 33, 56, .35); }
.portrait figcaption { display: grid; gap: 4px; margin-top: 18px; }
.portrait__name { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; color: var(--ink); }
.portrait figcaption .caps { color: var(--muted); }
.story__chapters .chapter:last-child { padding-bottom: 0; }

/* Large quote on a pale tile */
.quote-sec { padding-top: 0 !important; }
.quote { margin: 0; text-align: center; padding: clamp(48px, 8vw, 112px) clamp(24px, 6vw, 96px); display: grid; justify-items: center; gap: 28px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.quote blockquote em { font-style: italic; }
.quote figcaption { color: var(--ink); }

/* "As seen in": outlet names in a row, separated by dots */
.outlets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 980px; margin: 0 auto; }
.outlets li { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
.outlets li + li::before { content: "·"; color: var(--blue); margin: 0 .55em; }
.outlets__more { text-align: center; margin-top: 40px; }


/* ==========================================================================
   5. The numbers
   ========================================================================== */

/* The figures table, year by year */
.figures-sec { padding-top: clamp(56px, 6vw, 88px) !important; padding-bottom: 0 !important; }
/* The record on film, at the top of The numbers: a 16:9 player with its poster */
.record-film { padding-bottom: 0 !important; }
.record-film__frame { aspect-ratio: 16 / 9; border-radius: var(--r-tile); overflow: hidden; background: var(--ink); box-shadow: 0 40px 90px -55px var(--glow-light); }
.record-film__frame video { width: 100%; height: 100%; object-fit: cover; }
.figures { margin: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.figures table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.figures th:first-child { width: 16%; }
.figures th, .figures td { text-align: right; padding: 18px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.figures thead th { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.figures th:first-child, .figures td:first-child { text-align: left; padding-left: 0; }
.figures tbody th { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.figures td.num { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.figures td.hi { color: var(--blue); }
.figures tr.is-pending td { color: var(--muted); }         /* the year the state hasn't published yet */
.figures tr.is-pending td.hi { color: var(--blue-light); }
.figures tbody tr:last-child th, .figures tbody tr:last-child td { border-bottom: 0; }
.figures__note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* Headline on the left, content on the right; used for the source reports and "how it's counted" */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.split__head { display: grid; gap: 22px; justify-items: start; }
.split__h { font-size: clamp(38px, 4.4vw, 64px); line-height: .98; letter-spacing: -.025em; max-width: 12ch; }
.split-sec + .split-sec { padding-top: 0 !important; }
.split__head .essay-fig { width: 100%; margin: 6px 0 0; }
.split__head .essay-fig .frame { aspect-ratio: 4 / 3; }

.sources { border-top: 1px solid var(--hairline); }
.sources li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.sources__yr { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.sources__txt { display: grid; gap: 6px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.sources__txt a { text-decoration: underline; text-decoration-color: var(--blue-light); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.sources__txt a:hover { text-decoration-color: var(--ink); }
.sources__txt .pending { color: var(--body); }
.sources__txt .caps { color: var(--muted); }

/* "How it's counted" sits on a pale tile */
.counted { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 5vw, 72px); }
.counted .caps { color: var(--ink); margin-bottom: 20px; }
.counted .prose, .counted .prose strong { color: var(--ink); }

/* Numbered references; a reference lights up when its footnote is followed */
.refs { display: grid; margin-top: 28px; border-top: 1px solid var(--hairline); }
.refs li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.55; color: var(--body); scroll-margin-top: 120px; transition: background-color .6s ease; }
.refs li:target { background: var(--blue-wash); border-radius: 12px; padding-left: 12px; }
.refs__n { color: var(--blue); padding-top: 3px; }
.refs em { font-style: normal; color: var(--ink); }
.refs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue-light); text-underline-offset: 3px; word-break: break-word; }


/* ==========================================================================
   6. Legal pages
   ========================================================================== */

.legal-sec { padding-top: clamp(56px, 6vw, 88px) !important; }
.legal section { padding-block: 28px; border-top: 1px solid var(--hairline); }
.legal section:first-child { border-top: 0; padding-top: 0; }
.legal h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: 0 0 14px; }
.legal p { font-size: 17px; }
.legal__see { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.legal__see .caps { color: var(--muted); }
.legal__see .chip { --c: #fff; padding: 7px 14px; }


/* ==========================================================================
   7. Photos of Dr. Christopher
   ========================================================================== */

/* Small round headshot beside the byline on the gap page */
.byline { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
/* Framed photo inside an essay or chapter */
.essay-fig { margin: 36px 0 40px; }
.essay-fig .frame { aspect-ratio: 3 / 2; border-radius: var(--r-card); overflow: hidden; background: var(--stone-2); box-shadow: 0 40px 90px -55px var(--glow-light); }
.essay-fig img { width: 100%; height: 100%; object-fit: cover; }
.essay-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* A film inside an essay: 16:9 with the player controls */
.essay-fig--film .frame { aspect-ratio: 16 / 9; background: var(--ink); }
.essay-fig--film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.essay-fig--scope img { object-position: 50% 58%; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .essay { grid-template-columns: 1fr; }
  .essay__aside { position: static; }
  .essay__aside ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 960px) {
  .story, .split, .counted { grid-template-columns: 1fr; }
  .story__photo { position: static; max-width: 520px; }
  .change { grid-template-columns: 1fr; }
  .change .tile { min-height: 0; gap: 24px; }
  .pubs { grid-template-columns: 1fr; }
  .page-hero__mosaic { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 600px) {
  .page-hero { padding-top: 128px; }
  .page-hero .display { font-size: clamp(42px, 12vw, 60px); }
  .page-hero--photo { min-height: 0; padding-top: 400px; }
  .page-hero__media { bottom: auto; height: 470px; }
  .page-hero__media img { object-position: 64% 18%; }
  .page-hero__veil { background: linear-gradient(180deg, rgba(9, 10, 11, .45) 0px, rgba(9, 10, 11, 0) 120px, rgba(9, 10, 11, 0) 300px, var(--night) 470px); }
  .essay__aside ol { grid-template-columns: 1fr; }
  .prose p { font-size: 17px; }
  .sources li { grid-template-columns: 1fr; gap: 8px; }
  .refs li { grid-template-columns: 34px 1fr; }
  .spot b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spot::after { animation: none; }
}