/* Essay-specific styles. Loaded after fastlane.css. */

.essay-hero{
  padding: 64px 0 56px 0;
  border-bottom: 1px solid var(--rule);
}
.essay-crumb{
  display:flex; gap: 12px; align-items: center; padding-bottom: 24px;
  font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.essay-crumb a{ color: var(--ink); transition: color 200ms;}
.essay-crumb a:hover{ color: var(--orange);}
.essay-crumb .sep{ color: var(--rule);}
.essay-crumb .cat{ color: var(--orange);}

.essay-title{
  font-size: 84px; line-height: 0.98; letter-spacing:-0.03em; font-weight: 900; margin: 0;
  max-width: 1100px;
}
.essay-title em{ font-style: normal; color: var(--orange);}

.essay-lede{
  margin: 32px 0 0 0;
  font-size: 26px; line-height: 1.4; max-width: 880px; color: var(--ink-soft); font-weight: 400; letter-spacing: -0.005em;
}

.essay-byline{
  display:flex; flex-wrap: wrap; gap: 24px; margin-top: 40px;
  padding-top: 24px; border-top: 1px solid var(--rule);
  font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  align-items: center;
}
.essay-byline a{ color: var(--ink); border-bottom: 1px solid currentColor;}
.essay-byline a:hover{ color: var(--orange);}
.essay-byline .author{ font-weight: 600; color: var(--ink);}
.essay-byline .meta{ color: var(--muted);}

.essay-body{
  padding: 80px 0 100px 0;
  display: grid; grid-template-columns: 1fr 760px 1fr;
}
.essay-body > article{
  grid-column: 2;
}
.essay-body p{
  font-size: 20px; line-height: 1.7; color: var(--ink); margin: 0 0 28px 0; letter-spacing: -0.005em;
}
.essay-body p:first-child::first-letter{
  font-size: 84px; line-height: 0.9; font-weight: 900; float: left; padding: 6px 14px 0 0;
  color: var(--orange);
}
.essay-body h2{
  margin: 56px 0 24px 0; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800;
}
.essay-body h2 em{ font-style: normal; color: var(--orange);}
.essay-body h3{
  margin: 40px 0 18px 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700;
}
.essay-body blockquote{
  margin: 40px 0; padding: 0 0 0 32px; border-left: 4px solid var(--orange);
  font-size: 26px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; color: var(--ink);
}
.essay-body ul, .essay-body ol{
  margin: 0 0 28px 0; padding-left: 22px;
}
.essay-body li{
  font-size: 20px; line-height: 1.65; color: var(--ink); margin-bottom: 10px;
}
.essay-body strong{ color: var(--ink); font-weight: 700;}
.essay-body a{ color: var(--orange); border-bottom: 1px solid currentColor;}
.essay-body a:hover{ color: var(--ink);}
.essay-body hr{
  margin: 48px 0; border: 0; height: 1px; background: var(--rule);
}

.callout{
  margin: 40px 0; padding: 28px 32px; background: var(--paper-2); border-left: 4px solid var(--ink);
}
.callout p{ margin: 0; font-size: 18px; line-height: 1.55;}

/* Inline newsletter signup */
.essay-signup{
  margin: 56px 0; padding: 40px; background: var(--ink); color: #fff;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.essay-signup .es-l h4{ margin: 0 0 6px 0; font-size: 26px; letter-spacing: -0.015em; font-weight: 800;}
.essay-signup .es-l p{ margin: 0; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5;}
.essay-signup form{ display: flex; gap: 8px;}
.essay-signup input{ flex: 1; padding: 14px 16px; background: transparent; border: 1px solid rgba(255,255,255,0.25); color:#fff; font-size: 14px; font-family: inherit; min-width: 240px;}
.essay-signup button{ border: 0; padding: 14px 20px; background: var(--orange); color:#fff; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;}
.essay-signup button:hover{ background: var(--orange-deep);}

.essay-foot{
  padding: 80px 0 40px 0;
  border-top: 1px solid var(--rule-strong);
}
.essay-foot h5{
  margin: 0 0 24px 0; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.related-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.related{
  background: #fff; border: 1px solid var(--rule); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms;
}
.related:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);}
.related .r-date{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--orange);}
.related h6{ margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;}
.related .r-foot{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display:flex; justify-content: space-between;}

@media (max-width: 1024px){
  .essay-title{ font-size: 56px;}
  .essay-lede{ font-size: 22px;}
  .essay-body{ grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px;}
  .essay-body > article{ max-width: 760px; margin: 0 auto;}
  .related-grid{ grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px){
  .essay-hero{ padding: 32px 24px 36px 24px;}
  .essay-title{ font-size: 36px; line-height: 1.02;}
  .essay-lede{ font-size: 18px;}
  .essay-byline{ flex-direction: column; gap: 12px; align-items: flex-start;}
  .essay-body{ padding: 48px 20px 64px 20px;}
  .essay-body p{ font-size: 17px;}
  .essay-body p:first-child::first-letter{ font-size: 56px;}
  .essay-body h2{ font-size: 28px; margin: 40px 0 18px 0;}
  .essay-body h3{ font-size: 20px;}
  .essay-body blockquote{ font-size: 20px; padding-left: 18px;}
  .essay-body li{ font-size: 17px;}
  .essay-signup{ grid-template-columns: 1fr; padding: 28px;}
  .essay-signup form{ flex-direction: column;}
  .essay-signup input{ min-width: 0;}
  .related-grid{ grid-template-columns: 1fr;}
}