/* diedetap.com — essay page */

.essay-hero {
  margin: 22px 52px 0;
  aspect-ratio: 2.2 / 1;
  clip-path: url(#se-hero);
  background: var(--olive);
  overflow: hidden;
}
.essay-hero.placeholder {
  background: repeating-linear-gradient(135deg, #E3DCC8 0 8px, #EDE7D6 8px 16px);
}
.essay-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.essay { padding: 0 52px; }

.measure {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

.opener {
  position: relative;
  margin: -104px -72px 0;
  padding: 56px 72px 52px;
  clip-path: url(#se-card);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.opener h1 {
  margin: 0;
  max-width: 18ch;
  overflow-wrap: break-word;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
.lead {
  margin: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  text-wrap: pretty;
}

.opener-rule {
  align-self: stretch;
  margin-top: 20px;
  height: 1px;
  background: var(--line);
}

.body-grid { position: relative; }

.toc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -216px;
  width: 168px;
}
.toc-inner {
  position: sticky;
  top: 40px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.toc-title {
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--ink-60);
  margin-bottom: 3px;
}
.toc a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-60);
}
.toc a:hover,
.toc .active { color: var(--coral); }

.essay-body {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.essay-body p {
  margin: 0;
  font-size: 19px;
  line-height: 1.68;
  text-wrap: pretty;
}
.essay-body h2 {
  margin: 22px 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.28;
  letter-spacing: 0.002em;
}
.pull {
  margin: 12px 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0.002em;
  color: var(--olive);
  text-wrap: pretty;
}

.end-rule { margin-top: 44px; }

.essay-links {
  padding: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 34px;
}
.essay-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--olive);
}
.essay-links a:hover { color: var(--coral); }

@media (max-width: 1240px) {
  .essay-hero { margin: 18px 34px 0; }
  .essay { padding: 0 34px; }
  .opener h1 { font-size: 44px; }
  .toc { left: -190px; width: 152px; }
}
@media (max-width: 1120px) {
  .toc { display: none; }
  .opener {
    margin: 30px 0 0;
    padding: 0 0 34px;
    clip-path: none;
  }
}
@media (max-width: 640px) {
  .essay-hero { margin: 14px 22px 0; aspect-ratio: 16 / 9; }
  .essay { padding: 0 22px; }
  .opener { margin-top: 24px; padding-bottom: 30px; }
  .opener h1 { font-size: 34px; }
  .lead { font-size: 20px; }
  .essay-body p { font-size: 17px; }
  .pull { font-size: 22px; }
}

/* Content blocks */
.callout {
  margin: 30px 0;
  padding: 22px 26px 24px;
  background: var(--paper);
  border-left: 2px solid var(--coral);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.pull-by {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.essay-figure {
  margin: 34px 0;
}
.essay-figure img,
.figure-placeholder {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.figure-placeholder {
  background: repeating-linear-gradient(135deg, #E3DCC8 0 8px, #EDE7D6 8px 16px);
}
.essay-figure figcaption {
  margin-top: 10px;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-60);
}

/* Lists inside authored copy */
.essay-body ul,
.essay-body ol {
  margin: 22px 0;
  padding-left: 24px;
}
.essay-body li {
  margin-bottom: 8px;
  line-height: 1.62;
  text-wrap: pretty;
}
.essay-body a,
.callout a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

/* Video embeds */
.embed {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--olive);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Jumping to a section from the contents list */
.essay-body h2 { scroll-margin-top: 32px; }

/* The essay itself heads the contents list */
.toc-home {
  color: var(--ink);
  padding-bottom: 3px;
}
.toc-home.active { color: var(--coral); }
.essay-hero { scroll-margin-top: 0; }

/* .toc sets display, so the hidden attribute has to win explicitly. */
.toc[hidden] { display: none; }

/* Appendix under the essay: further reading on this site, and the sources
   behind it. Either section can stand alone, so the rule belongs to the
   wrapper rather than to each section. Suggestions, not citations, so
   nothing in the body text points at them. */
.essay-appendix {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.essay-reading + .essay-reading { margin-top: 32px; }

.reading-title {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.essay-reading ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.essay-reading li {
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}
/* Inline, not flex: the arrow has to follow the last word of a wrapped
   description rather than hang off the end of the first line. */
.essay-reading a {
  color: var(--ink-75);
  text-decoration: none;
}
.essay-reading .s-label {
  /* A bare URL used as the label has nowhere to break on its own. */
  overflow-wrap: break-word;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.essay-reading a:hover { color: var(--coral); }
.essay-reading a:hover .s-label { text-decoration-color: currentColor; }
.essay-reading .ext {
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-35);
}
.essay-reading a:hover .ext { color: var(--coral); }

/* Announced by screen readers, invisible on screen. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .essay-reading li { font-size: 16px; }
}