/* Article-specific styles, loaded only on /notes/<slug>/ pages. */

.note-hero {
  padding-top: calc(var(--space-10) + var(--space-8));
  padding-bottom: var(--space-7);
}
/* Override the default narrow container in the hero so big titles flow on
   1-2 editorial lines instead of wrapping at every word. */
.note-hero > .container--narrow {
  max-width: 880px;
}
.note-hero .back-link {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-5);
  letter-spacing: var(--tracking-wide);
}
.note-hero .back-link:hover { color: var(--color-accent); }

.note-hero h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  margin: var(--space-3) 0 var(--space-4);
  max-width: 30ch;
}
@media (min-width: 1024px) {
  .note-hero h1 {
    font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3.0rem);
    max-width: 38ch;
  }
}
.note-hero .reading-time {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink-subtle);
  letter-spacing: var(--tracking-wide);
}
.note-hero picture {
  display: block;
  margin-top: var(--space-7);
  max-width: var(--maxw-content);
  margin-inline: auto;
}
.note-hero picture img {
  width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  display: block;
}
@media (max-width: 720px) {
  .note-hero picture img { max-height: 40vh; }
}

.note-body {
  padding-top: var(--space-7);
}
.note-body .container--narrow > * + * { margin-top: 1em; }
.note-body .article-layout__body > * + * { margin-top: 1em; }
.note-body h2 {
  font-size: var(--fs-2xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.note-body h3 {
  font-size: var(--fs-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.note-body p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.note-body em { font-style: italic; color: var(--color-ink); }
.note-body strong { color: var(--color-ink); font-weight: 600; }
.note-body blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-5);
  border-left: 2px solid var(--color-accent-soft);
  color: var(--color-ink-muted);
  font-style: italic;
}
.note-body ul, .note-body ol {
  padding-left: var(--space-5);
  margin-block: var(--space-4);
}
.note-body ul { list-style: disc; }
.note-body ol { list-style: decimal; }
.note-body li { margin-block: var(--space-2); }
.note-body li::marker { color: var(--color-accent-soft); }
.note-body img {
  border-radius: var(--radius-xs);
  margin-block: var(--space-6);
}
.note-body figure figcaption {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-ink-subtle);
  margin-top: var(--space-2);
}
.note-body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 3px;
}
.note-body a:hover { text-decoration-color: var(--color-accent); }

.note-cta {
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-border);
}

/* Related notes block: links a reader from one note to the next, plus
   any service page that the note's topic supports. Lives between the
   article body and the booking CTA. */
.note-related {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.note-related .eyebrow { display: block; text-align: center; margin-bottom: var(--space-5); }
.note-related ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  display: grid;
  gap: var(--space-5);
  max-width: var(--maxw-content);
  margin-inline: auto;
}
.note-related li a {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.note-related li a:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
}
.note-related li a strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--color-charcoal);
}
.note-related li a span {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

/* Article signature sign-off */

/* ---------------------------------------------------------------------- */
/* Editorial article layout: main body + sticky sidebar on desktop.        */
/* On mobile, sidebar drops below the body. Hero + related blocks remain  */
/* full-width above and below this grid.                                   */
/* ---------------------------------------------------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: var(--maxw-content);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-9);
    align-items: start;
  }
}
.article-layout__body {
  max-width: 720px;
  width: 100%;
}
@media (min-width: 1024px) {
  .article-layout__body {
    max-width: none;
  }
}

/* Larger lead paragraph for the first paragraph after the article opens */
.article-layout__body > p:first-of-type {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
}

/* Pull-quote treatment: blockquotes inside the body get more presence and
   on desktop break slightly outside the body column for editorial feel. */
.article-layout__body blockquote {
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-charcoal);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-6);
  margin-block: var(--space-7);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
@media (min-width: 1024px) {
  .article-layout__body blockquote {
    margin-inline-start: calc(-1 * var(--space-6));
  }
}

/* Sidebar */
.article-sidebar {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .article-sidebar {
    position: sticky;
    top: var(--space-7);
    align-self: start;
  }
}
.article-sidebar__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.article-sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-sidebar nav li {
  border-top: 1px solid var(--color-border);
}
.article-sidebar nav li:first-child { border-top: none; }
.article-sidebar nav a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease-out);
}
.article-sidebar nav a:hover { color: var(--color-accent); }

/* Sidebar booking CTA card */
.article-sidebar__cta {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.article-sidebar__cta h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  margin: 0 0 var(--space-3) 0;
  color: var(--color-charcoal);
  line-height: var(--lh-snug);
}
.article-sidebar__cta p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-ink-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}
.article-sidebar__cta .btn {
  width: 100%;
  text-align: center;
}

/* Author mini-card in the sidebar (uses the headshot) */
.article-sidebar__author {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.article-sidebar__author picture {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.article-sidebar__author picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-sidebar__author .name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-charcoal);
  line-height: var(--lh-snug);
}
.article-sidebar__author .meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}
.article-sidebar__author a {
  color: inherit;
  text-decoration: none;
  display: contents;
}

/* Related-block tweak when used inside the new layout: 2-column grid on
   desktop so cards sit side-by-side and don't waste vertical space. */
@media (min-width: 720px) {
  .note-related ul { grid-template-columns: 1fr 1fr; max-width: var(--maxw-content); }
}
@media (min-width: 1024px) {
  .note-related ul { grid-template-columns: repeat(3, 1fr); }
}