/* Shared essay page styles — This Is Canada essay series */

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

@media (min-width: 861px) {
  ctb-nav { position: sticky; top: 0; z-index: 60; }
  .essay-ticker { position: sticky; top: var(--masthead-h, 63px); z-index: 59; }
}

.essay-ticker {
  background: var(--maple);
  color: oklch(0.98 0.005 27);
}

/* Breadcrumb */
.essay-back {
  padding: 10px clamp(20px, 5vw, 72px);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-neutral-200);
}
.essay-back a {
  color: var(--color-accent-700);
  text-decoration: none;
}
.essay-back a:hover { text-decoration: underline; }

/* Hero */
.essay-hero {
  padding: 80px 0 56px;
}
.essay-kicker {
  padding: 5px 12px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  transform: rotate(-1.5deg);
  margin: 0 0 28px;
}
.essay-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.essay-subtitle {
  font-size: 19px;
  line-height: 30px;
  margin: 21px 0 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  font-style: italic;
}
.essay-dateline {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 28px 0 0;
}

/* Body */
.essay-body {
  padding: 0 0 56px;
}
.essay-body h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 56px 0 21px;
}
.essay-body h2:first-child { margin-top: 0; }

.essay-body p {
  font-size: 16.5px;
  line-height: 30px;
  margin: 0 0 21px;
}

.essay-body p:last-child { margin-bottom: 0; }

/* Pull quote */
.essay-pull {
  border-left: 4px solid var(--maple);
  padding: 0 0 0 24px;
  margin: 42px 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  color: var(--maple-deep);
}

/* Sidebar note */
.essay-aside {
  background: var(--maple-tint);
  border: 1.5px solid color-mix(in srgb, var(--maple) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 21px 24px;
  margin: 42px 0;
  font-size: 14.5px;
  line-height: 25px;
}
.essay-aside-title {
  font-family: var(--scrawl);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maple-deep);
  margin: 0 0 8px;
}
.essay-aside p { font-size: 14.5px; line-height: 25px; }

/* Endnote / sign-off */
.essay-sign {
  border-top: 2px solid var(--color-text);
  padding: 28px 0 0;
  margin: 56px 0 0;
  font-size: 14px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-style: italic;
}

/* Related essays */
.essay-related {
  padding: 56px 0 84px;
}
.essay-related-head {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 21px;
}
.essay-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 21px clamp(21px, 3vw, 42px);
}
.essay-related-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  text-decoration: none;
  color: var(--color-text);
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-neutral-200);
  transition: color 0.15s ease;
}
.essay-related-link:hover { color: var(--maple); }
.essay-related-link small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: 4px;
}

/* See also — cross-section links */
.essay-see-also {
  padding: 0 0 56px;
}
.essay-see-also-head {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 12px;
}
.essay-see-also-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.essay-see-also-links .tag {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.essay-see-also-links .tag:hover {
  background: var(--maple-tint);
  color: var(--maple-deep);
  border-color: var(--maple);
}

/* Responsive */
@media (max-width: 860px) {
  .essay-title { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .essay-related-link { transition: none; }
}