.author-profile {
  --page-edge: clamp(24px, 5.75vw, 130px);
  --reading-ink: #d4dada;
  background: #030b0d;
  color: #f3f2ed;
}
.author-billboard {
  position: relative;
  display: grid;
  grid-template-columns: 37% 1fr minmax(0, 21.5%);
  align-items: center;
  isolation: isolate;
  z-index: 0;
  min-height: clamp(405px, 29.3vw, 670px);
  padding: clamp(28px, 1.86vw, 46px) 3.5vw clamp(36px, 2.5vw, 60px) var(--page-edge);
  background: transparent;
}
.author-visual {
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: -18%;
  left: 38.2%;
  width: 36.6%;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 82%, transparent);
}
.author-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  mask-image: linear-gradient(180deg, #000 77%, transparent 100%);
}
.author-billboard::before, .author-billboard::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.author-billboard::before {
  z-index: -3;
  bottom: -18%;
  mask-image: linear-gradient(180deg, #000 76%, transparent);
  background: radial-gradient(ellipse at 45% 44%, #074351, #042830 24%, transparent 58%),
              radial-gradient(ellipse at 73% 42%, #46161d, #1b0e12 30%, transparent 53%), #020b0e;
}
.author-billboard::after {
  inset: 0 46% 0 3%;
  background: radial-gradient(ellipse at 55% 48%, #0d677125, transparent 68%);
  animation: portrait-light 18s ease-in-out infinite alternate;
}
@keyframes portrait-light {
  from { opacity: .2; transform: translate(-2%, 1%); }
  to { opacity: .86; transform: translate(3%, -1%); }
}
.author-intro { position: relative; grid-column: 1; }
.author-kicker, .bio-index-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 11px/1.4 var(--body);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #96eef0;
}
.author-kicker::before { content: ""; width: clamp(31px, 2.5vw, 47px); height: 2px; background: #35cdd2; }
.author-intro h2 {
  width: min-content;
  margin: clamp(11px, .84vw, 20px) 0 8px -.025em;
  transform: scaleX(1.08);
  transform-origin: left;
  font: 510 clamp(61px, 4.85vw, 108px)/1.055 var(--display);
  letter-spacing: .012em;
  text-transform: uppercase;
}
.author-subtitle { margin: 0; color: #f3f2ed; font: 550 clamp(14px, 1.09vw, 22px)/1.48 var(--body); }
.author-summary {
  max-width: 56ch;
  margin: clamp(12px, .9vw, 20px) 0 0;
  color: #d9dfdf;
  font: 430 clamp(13px, .87vw, 17px)/1.47 var(--body);
}
.author-actions { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 20px); margin-top: clamp(20px, 1.58vw, 34px); }
.author-actions a, .author-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .72vw, 15px);
  min-height: clamp(41px, 2.8vw, 58px);
  padding: .72em 1.35em;
  color: #f9f9f5;
  font: 520 clamp(11px, .82vw, 17px)/1.2 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: border-color .22s, background-color .22s, box-shadow .22s;
}
.author-actions .author-read {
  min-width: clamp(154px, 14.6vw, 285px);
  border: 1px solid #f32e36;
  background: linear-gradient(110deg, #d91622, #920f1c 65%, #430f17);
  box-shadow: 0 0 17px #d119210f;
}
.author-actions .author-read:hover { border-color: #ff7378; box-shadow: 0 0 18px #b528343b; }
.author-play {
  display: inline-block;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: .57em 0 .57em .88em;
  border-left-color: currentColor;
}
.author-favourite {
  min-width: clamp(125px, 10.5vw, 210px);
  border: 1px solid #a9c0c3;
  background: #01101391;
}
.author-favourite:hover, .author-favourite[aria-pressed="true"] { border-color: #8adddf; background: #123338c9; }
.favourite-symbol { width: .88em; font: 300 1.66em/0.9 var(--body); }
.author-quotation { grid-column: 3; margin: 0; padding: 0 0 0 clamp(15px, 1.5vw, 38px); }
.author-quotation blockquote {
  position: relative;
  margin: 0;
  color: #f1efeb;
  font: italic 400 clamp(22px, 1.91vw, 41px)/1.10 "Times New Roman", Georgia, serif;
  text-wrap: pretty;
  text-shadow: 0 2px 14px #0005;
}
.author-quotation blockquote::before {
  content: "";
  position: absolute;
  top: .11em;
  bottom: .03em;
  left: clamp(-30px, -1.65vw, -15px);
  width: 2px;
  background: #eb2531;
  transform: skew(-7deg);
}
.author-quotation figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: clamp(14px, 1.25vw, 28px);
  font: 600 clamp(9px, .66vw, 14px)/1.5 var(--body);
  text-transform: uppercase;
  letter-spacing: .28em;
}
.author-quotation figcaption::before { content: ""; width: 15px; height: 1px; background: currentColor; }
.bio-chapter p[id] { scroll-margin-top: 24px; }
.author-reading {
  width: min(1380px, calc(100% - 2 * var(--page-edge)));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(165px, .62fr) minmax(0, 2fr);
  gap: clamp(42px, 7vw, 130px);
  align-items: stretch;
  padding: clamp(42px, 5vw, 90px) 0 clamp(70px, 8vw, 132px);
}
.bio-index-inner { position: sticky; top: clamp(94px, 8vw, 135px); }
.bio-index-label {
  margin: 0;
  padding: 8px 0 18px;
  border-bottom: 1px solid #2a393c;
  font-size: 10px;
  color: #a8bdbc;
}
.bio-index ol { list-style: none; margin: 15px 0 0; padding: 0; }
.bio-index a { display: flex; align-items: baseline; gap: 13px; padding: 8px 0; color: #b1bdbd; font-size: 13px; line-height: 1.5; }
.bio-index a:hover, .bio-index a:focus-visible, .bio-index a[aria-current] { color: #c3f2f1; }
.bio-index a[aria-current] small { color: #b4edef; }
.bio-index small { font: 10px/1 monospace; letter-spacing: .08em; color: #7fa6a7; }
.author-note { max-width: 70ch; }
.bio-chapter + .bio-chapter { margin-top: clamp(40px, 4vw, 66px); }
.bio-chapter h3 {
  margin: 0 0 .7em;
  scroll-margin-top: clamp(18px, 2vw, 34px);
  color: #f2f0e9;
  font: 400 clamp(30px, 2.6vw, 46px)/1.23 var(--display);
  letter-spacing: .005em;
}
.bio-chapter p {
  margin: .95em 0 0;
  color: var(--reading-ink);
  font: 400 clamp(16px, 1.18vw, 19px)/1.85 var(--body);
}
.bio-chapter:last-child p:last-child {
  border-left: 1px solid #77b1b4;
  padding-left: clamp(19px, 2.5vw, 40px);
  margin: 1.65em 0 0;
  color: #e1eeeb;
  font: 400 clamp(24px, 2.2vw, 36px)/1.44 Georgia, "Times New Roman", serif;
}
.author-coda {
  display: flex;
  align-items: center;
  min-height: clamp(250px, 27vw, 420px);
  padding: 40px var(--page-edge);
  background: linear-gradient(90deg, #060d10 5%, rgba(5, 13, 16, .89) 34%, rgba(4, 13, 15, .23) 76%),
              linear-gradient(180deg, #080e10, transparent 24%),
              url("assets/corridor.webp") right 54% / cover no-repeat;
}
.author-coda-inner { max-width: 65ch; }
.author-coda blockquote { margin: .55em 0 .7em; font: 400 clamp(28px, 3.1vw, 60px)/1.25 var(--display); }

@media (min-width: 741px) and (max-width: 1020px) {
  .author-billboard {
    grid-template-columns: minmax(0, 42%) 1fr minmax(0, 21%);
    padding-inline: 4vw;
  }
  .author-visual { left: 38%; width: 41%; }
  .author-portrait { object-position: 52% top; }
  .author-quotation blockquote { font-size: clamp(17px, 2.1vw, 22px); }
  .author-quotation figcaption { letter-spacing: .12em; }
  .author-summary { font-size: 13px; }
  .author-actions a, .author-actions button { min-width: 0; }
}
@media (max-width: 740px) {
  .author-billboard {
    display: block;
    min-height: 0;
    padding: clamp(185px, 48vw, 330px) var(--page-edge) 25px;
    background: radial-gradient(ellipse at 20% 17%, #0c3239, transparent 55%), #030b0d;
  }
  .author-visual {
    top: 0;
    bottom: auto;
    left: 12%;
    width: 88%;
    height: clamp(310px, 80vw, 540px);
    mask-image: linear-gradient(90deg, transparent, #000 24%);
  }
  .author-portrait {
    object-position: center 28%;
    mask-image: linear-gradient(180deg, #000 44%, transparent 100%);
  }
  .author-billboard::before { z-index: -1; bottom: 0; background: linear-gradient(90deg, #030b0d8f, transparent 43%); }
  .author-billboard::after { inset: 5% 20% 35% 0; }
  .author-intro h2 { margin: 11px 0 8px -.025em; font-size: clamp(55px, 11vw, 78px); text-shadow: 0 2px 15px #0006; }
  .author-subtitle { font-size: 15px; }
  .author-summary { font-size: 14px; max-width: 56ch; margin-top: 11px; }
  .author-actions { margin-top: 19px; }
  .author-actions a, .author-actions button { min-height: 44px; }
  .author-quotation { margin: 28px 0 0; padding-left: 20px; max-width: 45ch; }
  .author-quotation blockquote { font-size: clamp(20px, 4vw, 25px); line-height: 1.3; }
  .author-quotation blockquote::before { left: -16px; transform: none; }
  .author-quotation figcaption { margin-top: 10px; font-size: 9px; }
  .author-reading { display: block; padding-top: 26px; }
  .bio-index-inner { position: static; }
  .bio-index-label { padding: 0 0 10px; }
  .bio-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 9px; }
  .bio-index a { gap: 7px; padding: 9px 0; font-size: 12px; }
  .author-note { margin-top: 34px; }
  .bio-chapter p { line-height: 1.77; }
  .author-coda { background-position: center; }
}
@media (prefers-reduced-motion: reduce) {
  .author-billboard::after { animation: none; opacity: .48; }
}