/* ============================================================
   LeafscapeJournal — stylesheet
   Own build. Palette, type, layout tokens are LeafscapeJournal's
   own (prefix: lj-). Not shared with any sibling magazine.
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; background-color: transparent; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: 'LJ Serif';
  src: url('../fonts/lj-fraunces.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LJ Sans';
  src: url('../fonts/lj-worksans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens ---------- */
:root {
  --lj-ink: #241f1a;
  --lj-ink-soft: #4a433a;
  --lj-clay: #b5573a;
  --lj-clay-dark: #8c4029;
  --lj-gold: #c98a35;
  --lj-paper: #faf6ee;
  --lj-paper-alt: #f2ead9;
  --lj-card: #ffffff;
  --lj-line: #e3d9c4;
  --lj-muted: #8c8171;
  --lj-muted-hover: #6a5f4f;
  --lj-white: #ffffff;
  --lj-dark: #211b15;
  --lj-dark-line: #4a3f30;
  --lj-footer-bg: #efe6d3;
  --lj-shadow: 0 20px 44px -22px rgba(36, 31, 26, .35);
  --lj-radius-pill: 13px;
  --lj-serif: 'LJ Serif', Georgia, 'Times New Roman', serif;
  --lj-sans: 'LJ Sans', Arial, Helvetica, sans-serif;
}

body {
  background-color: var(--lj-paper);
  color: var(--lj-ink);
  font-family: var(--lj-sans);
  font-size: 16px;
  line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lj-serif);
  font-weight: 600;
  color: var(--lj-ink);
}
p { margin-bottom: 10px; }
a { transition: color .2s; }

/* ---------- structural framework helpers (lj-w-*) ---------- */
.lj-w-container {
  width: 100%;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
  position: relative;
}
.lj-w-container.lj-post-page { max-width: 1100px; }
.lj-w-row { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.lj-w-col { padding-left: 10px; padding-right: 10px; width: 100%; position: relative; }
.lj-w-col-3 { width: 25%; }
.lj-w-inline-block { display: inline-block; }
.lj-w-nav { position: fixed; inset: 0 0 auto; z-index: 50; width: 100%; }
.lj-w-nav-menu { display: flex; }
.lj-w-nav-button { display: none; cursor: pointer; user-select: none; }
.lj-w-nav-button .lj-icon-bar { display: block; width: 22px; height: 2px; background: var(--lj-ink); border-radius: 2px; margin: 5px 0; transition: transform .25s, opacity .25s; }
.lj-w-nav-button.lj-w--open .lj-icon-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lj-w-nav-button.lj-w--open .lj-icon-bar:nth-child(2) { opacity: 0; }
.lj-w-nav-button.lj-w--open .lj-icon-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- reveal-on-load / scroll animation ---------- */
.lj-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .6s ease, transform .6s ease;
}
.lj-reveal.lj-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.lj-noanim .lj-reveal { opacity: 1; transform: none; transition: none; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.lj-navigation { position: fixed; inset: 0 0 auto; z-index: 60; width: 100%; }
.lj-navbar {
  border-bottom: 1px solid var(--lj-line);
  position: relative;
  /* background lives on ::before (not on .lj-navbar itself) so that
     backdrop-filter does not create a new containing block here - if it
     did, the fixed-position .lj-nav-menu mobile panel nested inside would
     size itself against this ~68px-tall bar instead of the viewport. */
}
.lj-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(250, 246, 238, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lj-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.lj-brand { display: flex; align-items: center; height: 68px; transition: opacity .2s, transform .2s; }
.lj-brand:hover { opacity: .85; transform: scale(1.02); }
.lj-brand img { height: 26px; width: auto; }

.lj-nav-menu { align-items: center; justify-content: space-between; flex: 1; margin-left: 24px; min-width: 0; }
.lj-nav-left { display: flex; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
.lj-navlink {
  height: 68px;
  display: flex;
  align-items: center;
  color: var(--lj-ink);
  margin-right: 10px;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.lj-navlink:hover { color: var(--lj-clay); border-bottom-color: var(--lj-clay); }

.lj-nav-center { display: flex; align-items: center; flex-wrap: nowrap; }
.lj-cat-dropdown { position: relative; height: 68px; display: flex; align-items: center; flex-shrink: 0; }
.lj-cat-toggle {
  display: flex; align-items: center; gap: 4px; height: 68px; padding: 0 10px;
  font-size: 13px; font-weight: 600; color: var(--lj-ink); cursor: default; white-space: nowrap;
}
.lj-cat-toggle svg { width: 9px; transition: transform .2s; }
.lj-cat-dropdown:hover .lj-cat-toggle svg { transform: rotate(180deg); }
.lj-dropdown-panel {
  position: absolute; top: 100%; left: 0; width: 520px;
  background: var(--lj-card); border: 1px solid var(--lj-line); border-radius: 4px;
  box-shadow: var(--lj-shadow); padding: 26px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 20;
}
.lj-cat-dropdown:hover .lj-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.lj-dropdown-flex { display: flex; gap: 26px; }
.lj-dropdown-left { width: 30%; border-right: 1px solid var(--lj-line); padding-right: 20px; }
.lj-dropdown-label { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--lj-muted); margin-bottom: 6px; }
.lj-dropdown-cat-link { font-family: var(--lj-serif); font-size: 21px; font-weight: 600; color: var(--lj-ink); }
.lj-dropdown-cat-link:hover { color: var(--lj-clay); }
.lj-dropdown-right { flex: 1; display: flex; gap: 16px; }
.lj-dropdown-item { flex: 1; min-width: 0; }
.lj-dropdown-thumb { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; margin-bottom: 8px; background: var(--lj-paper-alt); }
.lj-dropdown-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lj-dropdown-item:hover .lj-dropdown-thumb img { transform: scale(1.06); }
.lj-dropdown-item-title { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--lj-ink); }
.lj-dropdown-item-title:hover { color: var(--lj-clay); }
.lj-dropdown-viewall { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--lj-clay); }
.lj-dropdown-viewall svg { width: 12px; transition: transform .2s; }
.lj-dropdown-viewall:hover svg { transform: translateX(3px); }

.lj-nav-right { display: flex; align-items: center; flex-shrink: 0; }
.lj-subscribe-btn {
  height: 38px; display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--lj-ink); border-radius: 19px;
  padding: 0 18px; margin-left: 8px; font-size: 13px; font-weight: 600;
  transition: color .2s, background-color .2s;
}
.lj-subscribe-btn:hover { background-color: var(--lj-ink); color: var(--lj-white); }
.lj-search-toggle { width: 40px; height: 68px; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.lj-search-toggle:hover { opacity: .7; }
.lj-search-toggle svg { width: 16px; }

/* mobile nav */
@media screen and (max-width: 991px) {
  .lj-nav-menu {
    position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    margin-left: 0; flex-direction: column; align-items: stretch;
    background: var(--lj-paper); padding: 20px 25px 100px; overflow-y: auto;
    display: none;
  }
  .lj-nav-menu.lj-w--open { display: flex; }
  .lj-nav-left { flex-direction: column; }
  .lj-navlink { height: auto; padding: 14px 0; border-bottom: 1px solid var(--lj-line); margin-right: 0; }
  .lj-nav-center { flex-direction: column; align-items: stretch; width: 100%; }
  .lj-cat-dropdown { height: auto; flex-direction: column; align-items: stretch; }
  .lj-cat-toggle { height: 50px; justify-content: space-between; border-bottom: 1px solid var(--lj-line); }
  .lj-dropdown-panel {
    position: static; width: 100%; box-shadow: none; border: 0; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; display: none; padding: 16px 0;
    transition: none;
  }
  .lj-cat-dropdown.lj-w--open .lj-dropdown-panel { display: block; }
  .lj-dropdown-flex { flex-direction: column; gap: 16px; }
  .lj-dropdown-left { width: 100%; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--lj-line); padding-bottom: 12px; }
  .lj-dropdown-right { flex-wrap: wrap; }
  .lj-dropdown-item { width: 100%; display: flex; gap: 12px; align-items: center; }
  .lj-dropdown-thumb { width: 70px; aspect-ratio: 1/1; flex-shrink: 0; margin-bottom: 0; }
  .lj-nav-right { margin-top: 16px; }
  .lj-subscribe-btn { margin-left: 0; }
  .lj-w-nav-button { display: flex; flex-direction: column; }
}

.lj-navbar-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--lj-line); }

/* ============================================================
   SHARED LAYOUT
   ============================================================ */
.lj-content-section { background-color: var(--lj-paper); padding-top: 60px; position: relative; overflow: hidden; }
.lj-content-section.lj-visible-overflow { overflow: visible; }
.lj-content-section.lj-double { padding-bottom: 60px; }
.lj-content-section.lj-dark { background-color: var(--lj-dark); padding-bottom: 60px; color: var(--lj-white); }
.lj-content-section.lj-end { padding: 35px 0; }
.lj-content-section.lj-subscribe-section { background-color: var(--lj-dark); padding: 80px 0; }
.lj-content-section.lj-inner { padding-top: 60px; padding-bottom: 60px; }
@media screen and (max-width: 991px) {
  .lj-content-section { padding-top: 50px; }
  .lj-content-section.lj-double, .lj-content-section.lj-dark { padding-bottom: 50px; }
  .lj-content-section.lj-subscribe-section { padding: 70px 0; }
  .lj-content-section.lj-inner { padding: 50px 0; }
}
@media screen and (max-width: 767px) {
  .lj-content-section { padding-top: 50px; }
  .lj-content-section.lj-subscribe-section { padding: 60px 0; }
  .lj-content-section.lj-inner { padding: 39px 0; }
}
@media screen and (max-width: 479px) {
  .lj-content-section { padding-top: 40px; }
  .lj-content-section.lj-double, .lj-content-section.lj-dark { padding-bottom: 40px; }
  .lj-content-section.lj-subscribe-section { padding: 50px 0; }
}

.lj-flex { display: flex; flex-wrap: wrap; }
.lj-flex.lj-space-between { justify-content: space-between; }
.lj-heading-box { margin-bottom: 30px; }
.lj-heading-box.lj-less { margin-bottom: 20px; }
.lj-heading-spaced { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
@media screen and (max-width: 479px) { .lj-heading-spaced { flex-direction: column; align-items: flex-start; } }

.lj-h1 { font-size: 50px; line-height: 60px; }
.lj-h1.lj-inner-title { font-size: 46px; line-height: 50px; margin-top: 30px; }
.lj-h1.lj-inner-sub { font-size: 62px; line-height: 62px; margin-top: 10px; color: var(--lj-ink); }
.lj-h2 { font-size: 46px; line-height: 54px; font-weight: 600; }
.lj-h3-title { font-size: 42px; line-height: 46px; font-weight: 600; margin-top: 0; }
.lj-h3 { font-size: 30px; line-height: 36px; font-weight: 600; }
.lj-h3.lj-white { color: var(--lj-white); }
.lj-no-top { margin-top: 0; }
.lj-text-muted { color: var(--lj-muted); }
@media screen and (max-width: 991px) {
  .lj-h3-title { font-size: 40px; line-height: 44px; }
  .lj-h3.lj-white { font-size: 26px; line-height: 32px; }
}
@media screen and (max-width: 767px) { .lj-h3-title { font-size: 38px; line-height: 42px; } }
@media screen and (max-width: 479px) { .lj-h2 { font-size: 45px; line-height: 52px; } }

.lj-subtitle { font-size: 25.5px; font-weight: 300; line-height: 40px; margin: 25px 0 15px; }
.lj-subtitle.lj-white { color: var(--lj-white); line-height: 37px; }
@media screen and (max-width: 991px) { .lj-subtitle { font-size: 24.5px; line-height: 38px; } }
@media screen and (max-width: 767px) { .lj-subtitle { font-size: 20px; line-height: 34px; } }
@media screen and (max-width: 479px) { .lj-subtitle { font-size: 18px; line-height: 30px; } }

.lj-divider { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--lj-ink); }
.lj-divider.lj-white { background-color: rgba(255,255,255,.25); }
.lj-divider.lj-muted-line { background-color: var(--lj-line); }

/* category pill + title link + card chrome shared across cards */
.lj-cat-pill {
  display: inline-block; border: 1px solid var(--lj-ink); border-radius: var(--lj-radius-pill);
  padding: 1px 11px 0; font-size: 11px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase;
  color: var(--lj-ink); line-height: 16px; margin-top: 10px; transition: background-color .2s, color .2s;
}
.lj-cat-pill:hover { background-color: var(--lj-ink); color: var(--lj-white); }
.lj-cat-pill.lj-large { font-size: 13px; line-height: 20px; }
.lj-cat-pill.lj-white { color: var(--lj-white); border-color: rgba(255,255,255,.6); }
.lj-cat-pill.lj-white:hover { background-color: var(--lj-white); color: var(--lj-ink); }

.lj-card-title {
  display: block; margin-top: 8px; font-weight: 600; line-height: 22px; color: var(--lj-ink);
  transition: color .2s;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.lj-card-title:hover { color: var(--lj-clay); }
.lj-card-title.lj-lg { font-family: var(--lj-serif); margin-top: 10px; font-size: 32px; font-weight: 600; line-height: 41px; -webkit-line-clamp: 3; }
.lj-card-title.lj-md { font-family: var(--lj-serif); margin-top: 0; font-size: 24px; font-weight: 600; line-height: 32px; -webkit-line-clamp: 2; }
.lj-card-title.lj-sm { font-family: var(--lj-serif); font-size: 20px; font-weight: 600; line-height: 26px; -webkit-line-clamp: 2; }
.lj-card-title.lj-white { color: var(--lj-white); }
.lj-card-title.lj-white:hover { color: var(--lj-paper-alt); }
@media screen and (max-width: 991px) {
  .lj-card-title.lj-lg { font-size: 30px; line-height: 39px; }
  .lj-card-title.lj-md { font-size: 20px; line-height: 26px; }
}
@media screen and (max-width: 767px) {
  .lj-card-title.lj-lg { font-size: 28px; line-height: 37px; }
  .lj-card-title.lj-md, .lj-card-title.lj-sm { font-size: 18px; line-height: 24px; }
}

.lj-card-photo { position: relative; overflow: hidden; border-radius: 4px; background-color: var(--lj-paper-alt); display: block; }
.lj-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lj-card-photo:hover img { transform: scale(1.05); }
.lj-featured-badge {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 4px;
  background: rgba(36,31,26,.82); color: var(--lj-white); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; padding: 4px 8px; border-radius: 3px;
}
.lj-featured-badge svg { width: 10px; height: 10px; }

.lj-writtenby { margin-top: 5px; font-size: 13px; color: var(--lj-muted); display: flex; align-items: center; gap: 4px; }
.lj-writtenby.lj-white { color: rgba(255,255,255,.7); }
.lj-writtenby a { font-weight: 600; color: var(--lj-ink); transition: color .2s; }
.lj-writtenby.lj-white a { color: var(--lj-white); }
.lj-writtenby a:hover { color: var(--lj-clay); }

/* ============================================================
   HERO (home)
   ============================================================ */
.lj-hero { width: 100%; margin-top: 68px; position: relative; overflow: hidden; }
.lj-hero.lj-visible { overflow: visible; }
@media screen and (max-width: 991px) { .lj-hero { min-height: 300px; } }
@media screen and (max-width: 479px) { .lj-hero { min-height: 270px; } }

.lj-hero-intro { padding-top: 55px; }
.lj-hero-intro .lj-h1 { position: relative; display: inline-block; padding-bottom: 18px; }
.lj-hero-intro .lj-h1 .lj-underline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lj-ink); }
.lj-text-clay { color: var(--lj-clay); font-style: italic; }

.lj-hero-row { display: flex; flex-wrap: wrap; gap: 40px 20px; margin-top: 40px; }
.lj-hero-post { width: calc(25% - 15px); padding-bottom: 4%; position: relative; overflow: hidden; }
.lj-hero-post .lj-card-photo { aspect-ratio: 4/5; }
.lj-hero-feature { width: 100%; display: flex; gap: 30px; margin-bottom: 40px; align-items: flex-end; }
.lj-hero-feature .lj-card-photo { flex: 1; aspect-ratio: 16/9; }
.lj-hero-feature-text { width: 40%; flex-shrink: 0; padding-bottom: 4%; position: relative; }
.lj-hero-row-2 { width: 100%; display: flex; flex-wrap: wrap; gap: 40px 20px; }

@media screen and (max-width: 991px) {
  .lj-hero-post { width: calc(50% - 10px); }
  .lj-hero-feature { flex-direction: column; }
  .lj-hero-feature-text { width: 100%; }
}
@media screen and (max-width: 767px) {
  .lj-hero-post { width: calc(50% - 10px); }
}
@media screen and (max-width: 479px) {
  .lj-hero-post { width: 100%; }
}

/* ============================================================
   CATEGORY GRID (Explore topics)
   ============================================================ */
.lj-topic-grid { display: flex; flex-wrap: wrap; gap: 0; }
.lj-topic-card { flex: 1; width: 23.1%; margin-right: 2.3%; }
.lj-topic-card:last-child { margin-right: 0; }
.lj-topic-card .lj-card-photo { aspect-ratio: 1/1.15; margin-bottom: 16px; }
.lj-topic-name { font-family: var(--lj-serif); font-size: 15px; }
.lj-topic-desc { color: var(--lj-muted); font-size: 14px; line-height: 22px; margin: 10px 0 12px; }
.lj-topic-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--lj-ink); }
.lj-topic-more svg { width: 8px; transition: transform .2s; }
.lj-topic-more:hover svg { transform: translateX(3px); }
@media screen and (max-width: 479px) {
  .lj-topic-card { flex: 0 auto; width: 90%; margin: 0 auto 40px; }
}

/* ============================================================
   EDITORS' CHOICE (dark parallax section)
   ============================================================ */
.lj-parallax { position: absolute; inset: 0; background-size: cover; background-position: 50%; }
.lj-parallax-overlay { position: absolute; inset: 0; background-color: rgba(20, 16, 12, .68); }
.lj-editors-row { display: flex; flex-wrap: wrap; gap: 0; position: relative; z-index: 1; }
.lj-editors-item { width: 23.5%; margin-right: 2%; padding-bottom: 2%; overflow: hidden; }
.lj-editors-item:last-child { margin-right: 0; }
.lj-editors-item .lj-card-photo { aspect-ratio: 4/5; margin-bottom: 14px; }
@media screen and (max-width: 767px) { .lj-editors-item { padding-bottom: 3%; } }
@media screen and (max-width: 479px) {
  .lj-editors-item { width: 100%; margin: 0 0 10%; }
}

/* ============================================================
   POPULAR (home split: popular list + category sidebar)
   ============================================================ */
.lj-split { display: flex; flex-wrap: wrap; gap: 0; }
.lj-split-left { width: 74%; padding-right: 3%; }
.lj-split-right { width: 26%; }
.lj-sticky { position: sticky; top: 90px; }
@media screen and (max-width: 991px) { .lj-split-left { width: 60%; } .lj-split-right { width: 40%; } }
@media screen and (max-width: 767px) { .lj-split-left { width: 60%; } .lj-split-right { width: 40%; } }
@media screen and (max-width: 479px) { .lj-split-left, .lj-split-right { width: 100%; padding-right: 0; } }

.lj-popular-row {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 5%; padding-bottom: 4%;
  position: relative; border-bottom: 1px solid var(--lj-line);
}
.lj-popular-row:last-child { margin-bottom: 0; border-bottom: 0; }
.lj-popular-num { font-family: var(--lj-serif); font-size: 34px; color: var(--lj-line); width: 50px; text-align: center; flex-shrink: 0; }
.lj-popular-thumb { width: 130px; flex-shrink: 0; aspect-ratio: 4/3; }
.lj-popular-title { flex: 1; }
@media screen and (max-width: 767px) { .lj-popular-row { flex-wrap: wrap; } .lj-popular-thumb { width: 110px; } }

.lj-side-list-item {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6%; padding-bottom: 5%;
  border-bottom: 1px solid var(--lj-line); position: relative;
}
.lj-side-list-item:last-child { margin-bottom: 0; border-bottom: 0; }
.lj-side-list-item .lj-card-photo { width: 100px; flex-shrink: 0; aspect-ratio: 4/3; }

/* ============================================================
   TRENDING (3-col, dark, background crossfade)
   ============================================================ */
.lj-trending-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: 50%; opacity: 0; transition: opacity .6s ease; }
.lj-trending-bg-layer.lj-active { opacity: 1; }
.lj-trending-row { display: flex; flex-wrap: wrap; position: relative; z-index: 1; }
.lj-trending-col {
  flex: 1; min-width: 260px; padding: 45px 3% 60px; border-right: 1px solid rgba(255,255,255,.2);
  cursor: default; transition: background-color .3s;
}
.lj-trending-col:last-child { border-right: 0; }
.lj-trending-col:hover { background-color: rgba(255,255,255,.06); }
.lj-trending-title { font-family: var(--lj-serif); font-size: 22px; line-height: 29px; font-weight: 600; color: var(--lj-white); margin: 10px 0 12px; display: block; }
.lj-trending-title:hover { color: var(--lj-paper-alt); }
.lj-trending-summary { color: rgba(255,255,255,.75); font-size: 15px; line-height: 24px; }
.lj-trending-by { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.7); }
.lj-trending-by img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.lj-trending-by a { color: var(--lj-white); font-weight: 600; }
@media screen and (max-width: 767px) {
  .lj-trending-col { flex: 0 auto; width: 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); padding: 30px 2.8%; }
  .lj-trending-col:last-child { border-bottom: 0; }
}

/* ============================================================
   LATEST POSTS + AUTHORS SIDEBAR
   ============================================================ */
.lj-latest-item { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 4%; padding-bottom: 3%; border-bottom: 1px solid var(--lj-line); position: relative; }
.lj-latest-item:last-child { margin-bottom: 0; border-bottom: 0; }
.lj-latest-item .lj-card-photo { width: 42%; flex-shrink: 0; aspect-ratio: 5/4; }
.lj-latest-item-text { flex: 1; }
@media screen and (max-width: 767px) { .lj-latest-item { flex-direction: column; } .lj-latest-item .lj-card-photo { width: 100%; } }

.lj-author-card { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; padding-bottom: 10px; }
.lj-author-card:last-child { margin-bottom: 0; }
.lj-author-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; transition: opacity .2s; }
.lj-author-photo:hover { opacity: .85; }
.lj-author-name { font-weight: 600; font-size: 15px; color: var(--lj-ink); }
.lj-author-name:hover { color: var(--lj-clay); }
.lj-author-role { font-size: 13px; color: var(--lj-muted); margin-top: 2px; }
.lj-social-row { display: flex; gap: 8px; margin-top: 10px; }
.lj-social-row a { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--lj-line); display: flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s; }
.lj-social-row a:hover { background-color: var(--lj-ink); border-color: var(--lj-ink); }
.lj-social-row a svg { width: 12px; height: 12px; fill: var(--lj-ink); transition: fill .2s; }
.lj-social-row a:hover svg { fill: var(--lj-white); }

/* ============================================================
   FORMS / BUTTONS
   ============================================================ */
.lj-field {
  width: 100%; height: 48px; border: 1px solid var(--lj-line); border-radius: 4px;
  padding: 0 16px; margin-bottom: 10px; background: var(--lj-white); font-size: 14px;
  transition: border-color .2s;
}
.lj-field:hover, .lj-field:focus { border-color: var(--lj-clay); outline: none; }
.lj-field::placeholder { color: var(--lj-muted); font-size: 13px; }
.lj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 25px; background-color: var(--lj-ink);
  color: var(--lj-white); font-size: 13px; font-weight: 600; letter-spacing: .2px;
  transition: background-color .3s;
}
.lj-btn:hover { background-color: var(--lj-clay-dark); }
.lj-btn.lj-btn-outline { background: transparent; border: 1px solid var(--lj-white); color: var(--lj-white); }
.lj-btn.lj-btn-outline:hover { background: var(--lj-white); color: var(--lj-ink); }

.lj-newsletter-row { display: flex; gap: 0; max-width: 460px; }
.lj-newsletter-row .lj-field { border-radius: 90px 0 0 90px; margin-bottom: 0; }
.lj-newsletter-row .lj-btn { border-radius: 0 90px 90px 0; flex-shrink: 0; }
@media screen and (max-width: 479px) { .lj-newsletter-row { flex-direction: column; max-width: 300px; } .lj-newsletter-row .lj-field, .lj-newsletter-row .lj-btn { border-radius: 6px; } }

/* ============================================================
   SUBSCRIBE CTA + INSTAGRAM STRIP
   ============================================================ */
.lj-subscribe-inner { max-width: 585px; margin: 0 auto; text-align: center; color: var(--lj-white); }
.lj-subscribe-inner img { margin: 0 auto 20px; height: 30px; }
.lj-subscribe-inner h3 { color: var(--lj-white); font-size: 50px; line-height: 56px; font-weight: 600; }
.lj-subscribe-inner .lj-subtitle { color: rgba(255,255,255,.8); }
.lj-subscribe-inner .lj-newsletter-row { margin: 30px auto 0; }
@media screen and (max-width: 991px) { .lj-subscribe-inner h3 { font-size: 48px; line-height: 54px; } }
@media screen and (max-width: 767px) { .lj-subscribe-inner h3 { font-size: 42px; line-height: 48px; } }
@media screen and (max-width: 479px) { .lj-subscribe-inner h3 { font-size: 36px; line-height: 42px; } }

.lj-insta-link { font-family: var(--lj-serif); font-size: 25px; color: var(--lj-ink); transition: color .2s; }
.lj-insta-link:hover { color: var(--lj-muted); }
.lj-insta-grid { display: flex; flex-wrap: wrap; }
.lj-insta-tile { width: 25%; position: relative; overflow: hidden; aspect-ratio: 1/1; }
.lj-insta-tile img { width: 100%; height: 100%; object-fit: cover; }
.lj-insta-hover {
  position: absolute; inset: 0; background: rgba(250,246,238,.82);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s;
}
.lj-insta-tile:hover .lj-insta-hover { opacity: 1; }
.lj-insta-hover svg { width: 30px; height: 30px; }
@media screen and (max-width: 479px) { .lj-insta-tile { width: 50%; } }

.lj-endmark { text-align: center; padding: 20px 0 0; }
.lj-endmark img { height: 26px; margin: 0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.lj-footer { background-color: var(--lj-footer-bg); padding: 60px 0 20px; position: relative; overflow: hidden; }
.lj-footer-grid { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 50px; }
.lj-footer-col { width: 30%; margin-right: 2%; }
.lj-footer-col.lj-footer-menu { width: 20%; }
.lj-footer-col.lj-footer-contact { width: 22%; }
.lj-footer-col.lj-footer-news { width: 22%; margin-right: 0; }
.lj-footer-title { font-family: var(--lj-serif); font-size: 15px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 18px; }
.lj-footer-text { color: var(--lj-muted); font-size: 14px; line-height: 22px; margin-bottom: 18px; }
.lj-footer-link { display: block; padding: 7px 0; font-size: 14px; color: var(--lj-ink-soft); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.lj-footer-link:hover { color: var(--lj-clay); border-color: var(--lj-clay); }
.lj-footer-contact-text { font-size: 14px; line-height: 22px; color: var(--lj-ink-soft); margin-bottom: 16px; }
.lj-footer-contact-text a { color: var(--lj-clay); font-weight: 600; }
.lj-footer-notice { border-top: 1px solid var(--lj-line); padding-top: 20px; font-size: 12px; color: var(--lj-muted); text-align: center; }
.lj-footer-notice a { color: var(--lj-ink-soft); font-weight: 600; }
.lj-footer-notice a:hover { color: var(--lj-clay); }
@media screen and (max-width: 991px) {
  .lj-footer-col { width: 46%; margin-bottom: 30px; }
  .lj-footer-col.lj-footer-menu, .lj-footer-col.lj-footer-contact, .lj-footer-col.lj-footer-news { width: 46%; }
}
@media screen and (max-width: 479px) {
  .lj-footer-col, .lj-footer-col.lj-footer-menu, .lj-footer-col.lj-footer-contact, .lj-footer-col.lj-footer-news { width: 100%; margin-right: 0; }
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.lj-cat-hero { padding-top: 55px; padding-bottom: 40px; }
.lj-cat-hero-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--lj-ink); margin-bottom: 40px; }
.lj-cat-hero-desc { max-width: 38%; text-align: right; color: var(--lj-muted); font-size: 15px; line-height: 24px; }
@media screen and (max-width: 767px) { .lj-cat-hero-desc { max-width: 100%; text-align: left; } }

.lj-cat-main { display: flex; flex-wrap: wrap; gap: 0; }
.lj-cat-main-left { width: 60%; padding-right: 3%; }
.lj-cat-main-right { width: 40%; }
.lj-cat-pair { display: flex; flex-wrap: wrap; gap: 20px; }
.lj-cat-pair-item { width: calc(50% - 10px); }
.lj-cat-pair-item .lj-card-photo { aspect-ratio: 4/3; margin-bottom: 14px; }
@media screen and (max-width: 991px) { .lj-cat-main-left, .lj-cat-main-right { width: 100%; } .lj-cat-main-right { margin-top: 40px; } }
@media screen and (max-width: 767px) { .lj-cat-pair-item { width: 100%; } }

.lj-featured-list-item { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.lj-featured-list-item:last-child { margin-bottom: 0; }
.lj-featured-num { font-family: var(--lj-serif); font-size: 26px; color: var(--lj-line); width: 34px; text-align: center; flex-shrink: 0; }
.lj-featured-list-item .lj-card-photo { width: 90px; height: 70px; flex-shrink: 0; }
.lj-featured-list-item .lj-card-title { margin-top: 0; }

.lj-tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 30px; }
.lj-tag { display: inline-block; padding: 5px 13px; border: 1px solid var(--lj-line); border-radius: 14px; font-size: 12px; font-weight: 500; color: var(--lj-ink-soft); transition: color .2s, border-color .2s; }
.lj-tag:hover { color: var(--lj-clay); border-color: var(--lj-clay); }
.lj-tags-label { font-size: 13px; font-weight: 600; color: var(--lj-muted); margin-right: 4px; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.lj-post-hero { margin-top: 108px; padding-bottom: 60px; }
@media screen and (max-width: 767px) { .lj-post-hero { margin-top: 98px; } }
@media screen and (max-width: 479px) { .lj-post-hero { margin-top: 88px; } }

.lj-post-hero-photo { width: 100%; aspect-ratio: 16/8; border-radius: 6px; overflow: hidden; margin-bottom: 40px; position: relative; }
.lj-post-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 767px) { .lj-post-hero-photo { aspect-ratio: 4/3; } }

.lj-post-layout { display: flex; flex-wrap: wrap; gap: 5%; }
.lj-post-main { width: 69%; }
.lj-post-side { width: 23%; }
@media screen and (max-width: 991px), (max-width: 767px) { .lj-post-main, .lj-post-side { width: 100%; } .lj-post-side { margin-top: 50px; } }

.lj-post-meta-box { padding-bottom: 24px; border-bottom: 1px solid var(--lj-ink); margin-bottom: 34px; position: relative; }
.lj-post-title { font-size: 44px; line-height: 52px; margin: 14px 0 16px; }
@media screen and (max-width: 767px) { .lj-post-title { font-size: 34px; line-height: 42px; } }
.lj-minutes { font-size: 13px; font-weight: 600; color: var(--lj-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 14px; }

.lj-richtext { font-size: 17px; line-height: 30px; color: var(--lj-ink-soft); }
.lj-richtext h1, .lj-richtext h2, .lj-richtext h3, .lj-richtext h4 { color: var(--lj-ink); margin-top: 36px; margin-bottom: 14px; }
.lj-richtext h2 { font-size: 30px; line-height: 38px; }
.lj-richtext h3 { font-size: 24px; line-height: 32px; }
.lj-richtext p { margin-bottom: 18px; }
.lj-richtext blockquote { border-left: 3px solid var(--lj-clay); padding-left: 22px; margin: 30px 0; font-family: var(--lj-serif); font-size: 22px; line-height: 32px; font-style: italic; color: var(--lj-ink); }
.lj-richtext a { color: var(--lj-clay); text-decoration: underline; }
.lj-richtext ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.lj-richtext li { margin-bottom: 8px; }

.lj-side-heading { font-family: var(--lj-serif); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--lj-muted); margin-bottom: 20px; }
.lj-side-post-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--lj-line); }
.lj-side-post-item:last-child { margin-bottom: 0; border-bottom: 0; }
.lj-side-post-item .lj-card-photo { width: 90px; flex-shrink: 0; aspect-ratio: 4/3; }

.lj-related-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.lj-related-item { width: calc(33.33% - 16px); }
.lj-related-item .lj-card-photo { aspect-ratio: 16/10; margin-bottom: 14px; }
@media screen and (max-width: 767px) { .lj-related-item { width: 100%; } }

/* ============================================================
   AUTHOR PAGE / ABOUT / CONTACT / FAQ / LEGAL / 404
   ============================================================ */
.lj-author-hero { padding-top: 60px; padding-bottom: 40px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.lj-author-hero-photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lj-author-hero-bio { color: var(--lj-muted); font-size: 16px; line-height: 26px; max-width: 640px; margin-top: 10px; }

.lj-team-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.lj-team-card { width: calc(33.33% - 20px); text-align: center; }
.lj-team-card img { width: 100%; aspect-ratio: 1/1; border-radius: 6px; object-fit: cover; margin-bottom: 16px; }
@media screen and (max-width: 767px) { .lj-team-card { width: calc(50% - 15px); } }
@media screen and (max-width: 479px) { .lj-team-card { width: 100%; } }

.lj-faq-item { border-bottom: 1px solid var(--lj-line); padding: 22px 0; }
.lj-faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--lj-serif); font-size: 19px; font-weight: 600; gap: 16px; }
.lj-faq-q svg { width: 14px; flex-shrink: 0; transition: transform .25s; }
.lj-faq-item.lj-open .lj-faq-q svg { transform: rotate(45deg); }
.lj-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--lj-muted); font-size: 15px; line-height: 24px; }
.lj-faq-a-inner { padding-top: 14px; }
.lj-faq-item.lj-open .lj-faq-a { max-height: 600px; }

.lj-contact-grid { display: flex; flex-wrap: wrap; gap: 60px; }
.lj-contact-info { width: 34%; }
.lj-contact-form-col { width: calc(66% - 60px); }
.lj-contact-row { margin-bottom: 22px; }
.lj-contact-row-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--lj-muted); margin-bottom: 6px; }
@media screen and (max-width: 767px) { .lj-contact-info, .lj-contact-form-col { width: 100%; } }

.lj-legal-content { max-width: 780px; }
.lj-legal-content h2 { font-size: 26px; margin: 34px 0 12px; }
.lj-legal-content p, .lj-legal-content li { color: var(--lj-ink-soft); font-size: 16px; line-height: 27px; margin-bottom: 14px; }
.lj-legal-content ul { list-style: disc; padding-left: 22px; }
.lj-legal-updated { color: var(--lj-muted); font-size: 14px; margin-bottom: 30px; }

.lj-404-wrap { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 25px 100px; }
.lj-404-num { font-family: var(--lj-serif); font-size: 120px; line-height: 1; color: var(--lj-clay); }
.lj-404-wrap p { color: var(--lj-muted); max-width: 420px; margin: 16px 0 26px; }

/* ============================================================
   NEWSLETTER MODAL + SEARCH OVERLAY (own JS-driven)
   ============================================================ */
.lj-overlay-scrim { position: fixed; inset: 0; background: rgba(20,16,12,.55); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.lj-overlay-scrim.lj-open { opacity: 1; visibility: visible; }
.lj-modal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: 92%; max-width: 480px; background: var(--lj-paper); border-radius: 8px; padding: 44px 36px;
  text-align: center; box-shadow: var(--lj-shadow);
}
.lj-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .2s; }
.lj-modal-close:hover { background-color: var(--lj-paper-alt); }
.lj-modal-close svg { width: 14px; }

.lj-search-overlay { position: fixed; inset: 0; background: rgba(250,246,238,.98); z-index: 95; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.lj-search-overlay.lj-open { opacity: 1; visibility: visible; }
.lj-search-inner { width: 90%; max-width: 560px; text-align: center; position: relative; }
.lj-search-inner input { width: 100%; height: 56px; border: none; border-bottom: 2px solid var(--lj-ink); background: transparent; font-family: var(--lj-serif); font-size: 26px; text-align: center; }
.lj-search-inner input:focus { outline: none; }
.lj-search-close { position: absolute; top: -60px; right: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.lj-search-close svg { width: 16px; }

/* utility */
.lj-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lj-mt-0 { margin-top: 0 !important; }