/* =========================================================
   Lantern & Vine Journal
   Long-form article layout
   ========================================================= */


/* ---------------------------------------------------------
   Page
   --------------------------------------------------------- */

.journal-post {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.journal-article {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
}


/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */

.post-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  max-width: 70rem;
  margin: 0 auto var(--space-04);

  color: var(--lv-green-dark);

  font-size: var(--fs-01);
  font-weight: 600;

  text-decoration: none;
}

.post-breadcrumb span {
  transition: transform var(--transition);
}

.post-breadcrumb:hover span {
  transform: translateX(-3px);
}


/* ---------------------------------------------------------
   Masthead
   --------------------------------------------------------- */

.journal-masthead {
  overflow: hidden;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-03);

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(198, 146, 46, 0.15),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      rgba(15, 81, 61, 0.075),
      rgba(255, 255, 255, 0.3) 45%
    ),
    var(--layer-01);

  box-shadow:
    0 24px 55px rgba(15, 81, 61, 0.07);
}

.journal-masthead-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(16rem, 0.5fr);

  align-items: stretch;
}

.journal-masthead-title {
  min-width: 0;

  padding:
    clamp(2rem, 5vw, 4rem)
    clamp(2rem, 5vw, 4.5rem);
}

.journal-masthead-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-width: 0;

  padding:
    clamp(2rem, 5vw, 4rem)
    clamp(2rem, 4vw, 3rem);

  border-left: 1px solid var(--divider);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.06)
    );
}


/* ---------------------------------------------------------
   Title
   --------------------------------------------------------- */

.post-title {
  max-width: 18ch;

  margin:
    var(--space-05)
    0
    0;

  font-family: var(--font-serif);

  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  font-weight: 600;

  line-height: 1;
  letter-spacing: -0.03em;

  color: var(--lv-green-dark);

  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.post-deck {
  margin: 0 0 var(--space-06);

  color: var(--text-secondary);

  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}

.post-date {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;

  padding-top: var(--space-04);

  border-top: 1px solid var(--divider);

  font-size: var(--fs-02);
}

.post-date-label {
  color: var(--text-secondary);

  font-size: var(--fs-01);
  font-weight: 600;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Optional featured image
   --------------------------------------------------------- */

.journal-featured {
  display: block;

  overflow: hidden;

  border-top: 1px solid var(--divider);

  background: var(--layer-02);
}

.journal-featured-img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 7;

  object-fit: cover;
  object-position: center;
}


/* ---------------------------------------------------------
   Main reading layout
   --------------------------------------------------------- */

.journal-reading-grid {
  display: grid;

  grid-template-columns:
    11rem
    minmax(0, 49rem);

  justify-content: center;
  align-items: start;

  gap: clamp(2rem, 5vw, 4rem);

  margin-top: clamp(2.5rem, 6vw, 5rem);
}


/* ---------------------------------------------------------
   Journal side rail
   --------------------------------------------------------- */

.post-rail {
  min-width: 0;
}

.post-rail-inner {
  position: sticky;
  top: 7rem;
}

.post-rail-rule {
  display: block;

  width: 2.75rem;
  height: 3px;

  margin-bottom: var(--space-04);

  background: var(--accent);
}

.post-rail-label {
  margin: 0 0 var(--space-03);

  color: var(--lv-green-dark);

  font-family: var(--font-serif);
  font-size: var(--fs-04);
  font-weight: 600;

  line-height: 1.2;
}

.post-rail-copy {
  margin-bottom: var(--space-04);

  color: var(--text-secondary);

  font-size: var(--fs-01);
  line-height: 1.65;
}


/* ---------------------------------------------------------
   Reading surface
   --------------------------------------------------------- */

.post-content {
  width: 100%;
  max-width: none;

  padding:
    clamp(1.75rem, 4vw, 3rem)
    clamp(1.5rem, 5vw, 3.75rem);

  border: 1px solid rgba(15, 81, 61, 0.14);
  border-radius: var(--radius-03);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.48)
    );

  box-shadow:
    0 18px 45px rgba(15, 81, 61, 0.045);

  color: var(--text-primary);

  font-size: 1.0625rem;
  line-height: 1.78;
}


/*
  Older posts may contain their own H1.
  The layout already prints the article title.
*/

.post-content > h1:first-child {
  display: none;
}


/* ---------------------------------------------------------
   Article paragraphs
   --------------------------------------------------------- */

.post-content p {
  margin: 0 0 1.45rem;

  color: var(--text-primary);

  line-height: 1.78;
}

.post-content > p:first-of-type:not(.post-series) {
  font-size: 1.12rem;
  line-height: 1.72;
}


/* Optional article series label */

.post-series {
  display: inline-block;

  margin: 0 0 var(--space-06);

  color: var(--accent-strong);

  font-size: var(--fs-01);
  font-weight: 600;

  letter-spacing: 0.055em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

.post-content h2 {
  position: relative;

  clear: both;

  margin:
    clamp(3.5rem, 7vw, 5rem)
    0
    1.6rem;

  padding-top: 1.65rem;

  border-top: 1px solid var(--divider);

  color: var(--lv-green-dark);

  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 600;

  line-height: 1.17;
  letter-spacing: -0.015em;

  text-wrap: balance;
}

.post-content h2::before {
  content: "";

  position: absolute;
  top: -2px;
  left: 0;

  width: 3.25rem;
  height: 3px;

  background: var(--accent);
}

.post-content h3 {
  margin: 1.9rem 0 0.85rem;

  color: var(--lv-green-dark);

  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 600;

  line-height: 1.28;
}


/* ---------------------------------------------------------
   Book covers / figures
   --------------------------------------------------------- */

.post-content figure {
  float: left;

  width: min(38%, 17rem);

  margin:
    0.35rem
    2rem
    1.5rem
    0;

  padding: 0.7rem;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-03);

  background: var(--layer-02);

  box-shadow:
    0 14px 30px rgba(15, 81, 61, 0.08);

  text-align: center;
}

.post-content figure img {
  display: block;

  width: 100% !important;
  max-width: 100% !important;
  height: auto;

  max-height: 29rem;

  margin: 0 !important;

  object-fit: contain;

  border: 0;
  border-radius: calc(var(--radius-03) - 2px);

  box-shadow: none !important;
}

.post-content figcaption {
  margin: 0.75rem 0 0;

  color: var(--text-secondary);

  font-size: var(--fs-01);
  line-height: 1.45;
}


/* Images written directly in Markdown */

.post-content > img {
  display: block;

  width: auto !important;
  max-width: min(100%, 36rem) !important;
  max-height: 32rem;

  margin: 2.5rem auto !important;

  object-fit: contain;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-03);

  box-shadow:
    0 16px 34px rgba(15, 81, 61, 0.08);
}


/* ---------------------------------------------------------
   Recommendation callouts
   --------------------------------------------------------- */

.post-content blockquote {
  overflow: hidden;

  margin: 2rem 0 2.25rem;

  padding:
    1.4rem
    1.5rem
    1.4rem
    1.65rem;

  border:
    1px
    solid
    rgba(198, 146, 46, 0.25);

  border-left:
    4px
    solid
    var(--accent);

  border-radius: var(--radius-03);

  background:
    linear-gradient(
      135deg,
      rgba(198, 146, 46, 0.11),
      rgba(15, 81, 61, 0.025) 70%
    );

  color: var(--text-primary);
}

.post-content blockquote p {
  margin: 0;
}

.post-content blockquote p + p {
  margin-top: 0.6rem;
}

.post-content blockquote strong {
  color: var(--lv-green-dark);
}


/* ---------------------------------------------------------
   Section separators
   --------------------------------------------------------- */

.post-content hr {
  clear: both;

  width: 100%;
  height: 1px;

  margin: 3.5rem 0;

  border: 0;

  background: var(--divider);
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.post-content a {
  color: var(--interactive);

  font-weight: 500;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(15, 81, 61, 0.38);
  text-underline-offset: 4px;
}

.post-content a:hover {
  color: var(--interactive-hover);
  text-decoration-color: currentColor;
}


/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.post-content ul,
.post-content ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

.post-content ul li {
  list-style: disc;
}

.post-content ol li {
  list-style: decimal;
}

.post-content li {
  margin-bottom: 0.55rem;

  line-height: 1.7;
}

.post-content li::marker {
  color: var(--accent-strong);
}


/* ---------------------------------------------------------
   Code
   --------------------------------------------------------- */

.post-content code {
  padding: 0.15em 0.35em;

  border-radius: var(--radius-01);

  background: rgba(15, 81, 61, 0.08);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.92em;
}

.post-content pre {
  clear: both;

  margin: var(--space-05) 0;

  padding: var(--space-05);

  overflow-x: auto;

  border: 1px solid rgba(15, 81, 61, 0.12);
  border-radius: var(--radius-03);

  background: rgba(15, 81, 61, 0.08);
}

.post-content pre code {
  padding: 0;
  background: transparent;
}


/* ---------------------------------------------------------
   Article end-cap
   --------------------------------------------------------- */

.post-endcap {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap: var(--space-06);

  max-width: 60rem;

  margin:
    clamp(3rem, 7vw, 5rem)
    auto
    0;

  padding: var(--space-06);

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-03);

  background:
    linear-gradient(
      135deg,
      rgba(198, 146, 46, 0.11),
      rgba(255, 255, 255, 0) 48%
    ),
    linear-gradient(
      180deg,
      rgba(15, 81, 61, 0.045),
      rgba(255, 255, 255, 0)
    ),
    var(--layer-01);

  box-shadow:
    0 18px 45px rgba(15, 81, 61, 0.055);
}

.post-endcap h2 {
  margin: var(--space-03) 0 var(--space-02);

  color: var(--lv-green-dark);
}

.post-endcap p {
  margin: 0;

  color: var(--text-secondary);
}

.post-endcap-actions {
  display: flex;

  gap: var(--space-03);

  flex-wrap: wrap;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 950px) {

  .journal-masthead-grid {
    grid-template-columns: 1fr;
  }

  .journal-masthead-info {
    border-top: 1px solid var(--divider);
    border-left: 0;
  }

  .post-title {
    max-width: 18ch;
  }

  .journal-reading-grid {
    grid-template-columns: 1fr;

    max-width: 49rem;

    margin-left: auto;
    margin-right: auto;
  }

  .post-rail {
    display: none;
  }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .journal-post {
    padding-top: var(--space-05);
  }

  .journal-masthead-title,
  .journal-masthead-info {
    padding: var(--space-05);
  }

  .post-title {
    max-width: none;

    font-size: clamp(2.25rem, 11vw, 3.25rem);

    line-height: 1.02;
    letter-spacing: -0.025em;
  }

  .post-deck {
    margin-bottom: var(--space-04);
  }

  .journal-featured-img {
    aspect-ratio: 4 / 3;
  }

  .journal-reading-grid {
    margin-top: var(--space-06);
  }

  .post-content {
    padding:
      var(--space-05)
      var(--space-04);

    font-size: 1rem;

    line-height: 1.72;
  }

  .post-content p {
    line-height: 1.72;
  }

  .post-content h2 {
    margin-top: 3.25rem;

    font-size: 1.65rem;
  }

  .post-content h3 {
    font-size: 1.28rem;
  }

  .post-content figure {
    float: none;

    width: min(100%, 18rem);

    margin:
      1.5rem
      auto
      1.75rem;
  }

  .post-content blockquote {
    margin: 1.75rem 0;

    padding:
      1.2rem
      1.2rem
      1.2rem
      1.35rem;
  }

  .post-endcap {
    grid-template-columns: 1fr;

    padding: var(--space-05);
  }

  .post-endcap-actions {
    width: 100%;
  }

  .post-endcap-actions .btn {
    width: 100%;
  }
}


/* ---------------------------------------------------------
   Very small phones
   --------------------------------------------------------- */

@media (max-width: 420px) {

  .journal-masthead-title,
  .journal-masthead-info {
    padding: var(--space-04);
  }

  .post-title {
    font-size: 2.15rem;
  }

  .post-content {
    padding:
      var(--space-05)
      var(--space-04);
  }
}