/* Lens & Moments Journal article — compact editorial r3, 21 Sep 2026 */
.lmj9 {
  --paper: #faf5eb;
  --paper-2: #fffaf1;
  --ink: #244f55;
  --ink-soft: #557375;
  --blue: #3659a4;
  --sage: #aac8b5;
  --gold: #d8a33a;
  --clay: #b96d4c;
  --line: rgba(36,79,85,.17);
  --glass: rgba(255,250,241,.72);
  position: relative;
  overflow: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 3%, rgba(186,221,227,.18), transparent 29rem),
    radial-gradient(circle at 1% 34%, rgba(216,163,58,.07), transparent 26rem),
    linear-gradient(180deg, #fcf8f0 0, var(--paper) 100%);
  font-family: "Manrope", system-ui, sans-serif;
}
.lmj9::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image: repeating-linear-gradient(128deg, rgba(54,89,164,.12) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(to bottom, transparent 0, #fff 8rem, rgba(255,255,255,.4) 35rem, transparent 66rem);
}
.lmj9 *, .lmj9 *::before, .lmj9 *::after { box-sizing: border-box; }

/* Blog articles are reading pages. Do not let the site header occupy the viewport while reading. */
.lmj9-body .lmx3-header { position: relative; top: auto; }

.lmj9-progress { position: fixed; inset: 0 0 auto; z-index: 10020; height: 3px; pointer-events: none; }
.lmj9-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--clay), var(--blue)); }

.lmj9-shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; position: relative; z-index: 1; }
.lmj9-utility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lmj9-utility > *:not(:last-child)::after { content: "·"; margin-left: 12px; color: var(--gold); }
.lmj9-utility a { color: var(--ink); text-decoration: none; }
.lmj9-utility a:hover { color: var(--blue); }
.lmj9-back { font-weight: 700; }
.lmj9-view-count { color: var(--blue); }

/* Compact article masthead: the story title is important, not a full-screen billboard. */
.lmj9-story-head { padding: clamp(28px, 3.2vw, 44px) 0 clamp(30px, 3.5vw, 48px); }
.lmj9-kicker {
  display: inline-flex;
  margin: 0 0 12px;
  color: var(--clay);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.lmj9-kicker:hover { color: var(--blue); }
.lmj9-story-head h1 {
  max-width: 1120px;
  margin: 0;
  color: var(--blue);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 2.75vw, 50px);
  font-weight: 650;
  line-height: 1.035;
  letter-spacing: -.039em;
  text-wrap: balance;
}
.lmj9-deck {
  max-width: 790px;
  margin: 17px 0 0;
  padding-left: 17px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.62;
}

/* Wide photograph, deliberately capped so the article begins within the first screen-and-a-bit. */
.lmj9-hero {
  width: min(1280px, calc(100vw - 44px));
  height: clamp(285px, 26vw, 420px);
  margin: 0 auto clamp(46px, 5vw, 70px);
  overflow: hidden;
  border: 1px solid rgba(54,89,164,.16);
  border-radius: 10px 24px 10px 24px;
  background: #ede3cf;
  box-shadow: 6px 7px 0 rgba(169,200,181,.18), 0 22px 54px rgba(36,79,85,.07);
}
.lmj9-hero-button, .lmj9-photo-button { display: block; width: 100%; height: 100%; margin: 0; padding: 0; appearance: none; border: 0; background: transparent; cursor: zoom-in; }
.lmj9-hero img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.05s cubic-bezier(.2,.7,.2,1); }
.lmj9-hero:hover img { scale: 1.008; }

.lmj9-reading-shell { padding-bottom: clamp(48px, 5vw, 76px); }
.lmj9-reading-grid {
  display: grid;
  grid-template-columns: 175px minmax(0, 820px);
  gap: clamp(42px, 5.3vw, 74px);
  justify-content: center;
  align-items: start;
}
.lmj9-toc { position: sticky; top: 24px; min-height: 1px; }
.lmj9-toc-inner { padding-top: 7px; }
.lmj9-toc-inner > span {
  display: block;
  margin-bottom: 14px;
  color: var(--clay);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lmj9-toc nav { display: grid; gap: 10px; }
.lmj9-toc nav:empty::after { content: "A visual journal story"; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.lmj9-toc nav a { position: relative; padding-left: 14px; color: var(--ink-soft); font-size: 12px; line-height: 1.46; text-decoration: none; transition: color .18s ease, translate .18s ease; }
.lmj9-toc nav a::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.lmj9-toc nav a.is-sub { padding-left: 23px; font-size: 11px; }
.lmj9-toc nav a.is-active { color: var(--blue); font-weight: 800; translate: 2px 0; }
.lmj9-toc nav a.is-active::before { background: var(--gold); }

.lmj9-reading-column { min-width: 0; }
.lmj9-prose {
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: clamp(16px, 1.02vw, 17px);
  line-height: 1.84;
}
.lmj9-prose > p:first-of-type { font-size: clamp(17px, 1.18vw, 19px); line-height: 1.76; color: #315d61; }
.lmj9-prose p { margin: 0 0 1.38em; }
.lmj9-prose h2, .lmj9-prose h3, .lmj9-prose h4 {
  color: var(--blue);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 650;
  letter-spacing: -.03em;
  scroll-margin-top: 28px;
}
.lmj9-prose h2 { margin: 1.95em 0 .58em; font-size: clamp(32px, 2.65vw, 42px); line-height: 1.07; }
.lmj9-prose h2::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 12px; border-radius: 99px; background: var(--gold); }
.lmj9-prose h3 { margin: 1.9em 0 .55em; font-size: clamp(25px, 2.2vw, 33px); line-height: 1.12; }
.lmj9-prose h4 { margin: 1.7em 0 .52em; font-size: 21px; }
.lmj9-prose strong { color: #2a5960; font-weight: 850; }
.lmj9-prose em { color: #667c72; }
.lmj9-prose a { color: var(--blue); text-decoration-color: rgba(216,163,58,.7); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lmj9-prose blockquote { margin: 2.2em 0; padding: 17px 0 17px 22px; border-left: 4px solid var(--gold); color: #496a69; font-family: "Playfair Display", Georgia, serif; font-size: 1.28em; line-height: 1.52; }
.lmj9-prose ul, .lmj9-prose ol { margin: 1.4em 0; padding-left: 1.35em; }
.lmj9-prose li { margin: .52em 0; }
.lmj9-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.lmj9-prose iframe, .lmj9-embed iframe { max-width: 100%; border: 0; }

/* Linked gallery photographs remain expressive, but never turn the article into another full-screen hero. */
.lmj9-moment { position: relative; width: min(1040px, calc(100vw - 44px)); margin: clamp(48px, 5.5vw, 72px) 50%; translate: -50% 0; }
.lmj9-moment-solo { width: min(940px, calc(100vw - 44px)); }
.lmj9-moment-solo.is-offset-left { translate: calc(-50% - min(2.2vw, 28px)) 0; }
.lmj9-moment-solo.is-offset-right { translate: calc(-50% + min(2.2vw, 28px)) 0; }
.lmj9-moment-solo.is-full { width: min(1120px, calc(100vw - 38px)); translate: -50% 0; }
.lmj9-moment-pair { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(12px, 1.8vw, 22px); align-items: start; }
.lmj9-moment-pair .pair-b { margin-top: clamp(30px, 4vw, 56px); }
.lmj9-moment-mosaic { display: grid; grid-template-columns: 1.18fr .82fr; grid-template-rows: repeat(2, minmax(160px, 1fr)); gap: clamp(10px, 1.3vw, 16px); }
.lmj9-moment-mosaic .mosaic-a { grid-row: 1 / span 2; }
.lmj9-photo { margin: 0; min-width: 0; }
.lmj9-photo-button { overflow: hidden; min-height: 280px; border: 1px solid rgba(54,89,164,.15); border-radius: 8px 20px 8px 20px; background: #ece1cb; box-shadow: 4px 5px 0 rgba(169,200,181,.20); }
.lmj9-photo.landscape .lmj9-photo-button { aspect-ratio: 4 / 3; }
.lmj9-photo.wide .lmj9-photo-button { aspect-ratio: 16 / 9; }
.lmj9-photo.portrait .lmj9-photo-button { aspect-ratio: 4 / 5; }
.lmj9-moment-solo .lmj9-photo-button { max-height: 620px; }
.lmj9-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .65s cubic-bezier(.2,.7,.2,1); }
.lmj9-photo:hover img { scale: 1.014; }
.lmj9-photo figcaption { max-width: 650px; margin-top: 9px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }

.lmj9-embed { margin: 52px 0; padding: 22px; border: 1px solid rgba(54,89,164,.14); border-radius: 18px; background: var(--glass); overflow: hidden; }
.lmj9-embed > * { max-width: 100%; }

.lmj9-story-end {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-top: clamp(46px, 5vw, 66px);
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.lmj9-story-end-links { display: flex; flex-wrap: wrap; gap: 8px 17px; }
.lmj9-story-end a { color: var(--blue); text-decoration: none; font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.lmj9-story-end-links a { color: var(--ink-soft); }
.lmj9-story-end a:hover { color: var(--clay); }
.lmj9-story-end-back span { font-size: 15px; vertical-align: -.05em; }

.lmj9-gallery-section, .lmj9-related { margin-top: clamp(58px, 6vw, 84px); }
.lmj9-section-head { display: flex; justify-content: space-between; align-items: end; gap: 22px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.lmj9-section-head p { margin: 0 0 7px; color: var(--clay); font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.lmj9-section-head h2 { margin: 0; color: var(--blue); font-family: "Playfair Display", Georgia, serif; font-size: clamp(31px, 3.1vw, 45px); line-height: 1; letter-spacing: -.035em; }
.lmj9-section-head > span { color: var(--ink-soft); font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.lmj9-gallery-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lmj9-gallery-link { position: relative; min-height: 360px; overflow: hidden; border-radius: 22px 8px 22px 8px; border: 1px solid rgba(54,89,164,.17); background: #e8ddc7; box-shadow: 5px 6px 0 rgba(216,163,58,.13); text-decoration: none; }
.lmj9-gallery-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .75s cubic-bezier(.2,.7,.2,1); }
.lmj9-gallery-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,79,85,.03) 30%, rgba(36,79,85,.78)); }
.lmj9-gallery-link > span { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 4px; color: #fffdf5; }
.lmj9-gallery-link small { font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.lmj9-gallery-link strong { font-family: "Playfair Display", Georgia, serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; }
.lmj9-gallery-link em { font-style: normal; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lmj9-gallery-link:hover img { scale: 1.022; }
.lmj9-gallery-link.without-image::after { background: linear-gradient(135deg, rgba(186,221,227,.35), rgba(216,163,58,.22)); }
.lmj9-gallery-link.without-image > span { color: var(--blue); }

.lmj9-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(17px, 1.8vw, 24px); }
.lmj9-related-card { min-width: 0; }
.lmj9-related-media { display: block; height: clamp(205px, 16.5vw, 260px); overflow: hidden; border-radius: 8px 18px 8px 18px; background: #e8ddc7; box-shadow: 4px 5px 0 rgba(169,200,181,.16); }
.lmj9-related-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .65s ease; }
.lmj9-related-card:hover .lmj9-related-media img { scale: 1.02; }
.lmj9-related-card > div { padding-top: 14px; }
.lmj9-related-card > div > span { color: var(--clay); font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.lmj9-related-card h3 { margin: 7px 0 11px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -.024em; }
.lmj9-related-card h3 a { color: var(--blue); text-decoration: none; }
.lmj9-related-card > div > a { color: var(--ink); font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.lmj9-related-card.without-image { padding: 22px; border-top: 4px solid var(--gold); background: rgba(255,250,241,.56); border-radius: 0 0 16px 16px; }

.lmj9-lightbox[hidden] { display: none; }
.lmj9-lightbox { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 34px; background: rgba(36,79,85,.94); backdrop-filter: blur(10px); }
.lmj9-lightbox img { max-width: min(1500px, 94vw); max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 70px rgba(20,61,67,.44); }
.lmj9-lightbox-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border: 1px solid rgba(255,253,245,.5); border-radius: 50%; background: rgba(255,250,241,.12); color: #fffdf5; font-size: 30px; line-height: 1; cursor: pointer; }
body.lmj-lightbox-open { overflow: hidden; }

.lmj9.is-motion-ready [data-lmj-reveal] { opacity: 0; translate: 0 13px; transition: opacity .58s ease, translate .65s cubic-bezier(.2,.7,.2,1); }
.lmj9.is-motion-ready [data-lmj-reveal].is-visible { opacity: 1; translate: 0 0; }
.lmj9 [data-lmj-tilt] { will-change: transform; transition: transform .2s ease-out; }

@media (max-width: 1080px) {
  .lmj9-shell { width: min(100% - 40px, 1040px); }
  .lmj9-story-head h1 { font-size: clamp(36px, 4.15vw, 46px); }
  .lmj9-reading-grid { grid-template-columns: 155px minmax(0, 740px); gap: 42px; }
  .lmj9-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lmj9-moment-solo.is-offset-left, .lmj9-moment-solo.is-offset-right { translate: -50% 0; }
}

@media (max-width: 800px) {
  .lmj9-shell { width: calc(100% - 28px); }
  .lmj9-utility { min-height: auto; padding: 10px 0; gap: 5px 8px; font-size: 8.8px; line-height: 1.35; }
  .lmj9-utility > *:not(:last-child)::after { margin-left: 8px; }
  .lmj9-story-head { padding: 28px 0 30px; }
  .lmj9-story-head h1 { max-width: none; font-size: clamp(32px, 7.1vw, 40px); line-height: 1.02; }
  .lmj9-deck { max-width: 680px; margin-top: 15px; font-size: 14.5px; line-height: 1.58; }
  .lmj9-hero { width: calc(100vw - 18px); height: clamp(225px, 49vw, 320px); margin-bottom: 42px; border-radius: 8px 18px 8px 18px; box-shadow: 4px 5px 0 rgba(169,200,181,.18); }
  .lmj9-reading-grid { display: block; }
  .lmj9-toc { display: none; }
  .lmj9-prose { font-size: 15.8px; line-height: 1.8; }
  .lmj9-prose > p:first-of-type { font-size: 17px; }
  .lmj9-prose h2 { font-size: clamp(30px, 7vw, 37px); }
  .lmj9-moment { width: calc(100vw - 20px); margin-top: 44px; margin-bottom: 44px; }
  .lmj9-moment-pair { gap: 9px; }
  .lmj9-moment-mosaic { gap: 8px; }
  .lmj9-photo-button { min-height: 210px; border-radius: 6px 16px 6px 16px; }
  .lmj9-gallery-links { grid-template-columns: 1fr; }
  .lmj9-gallery-link { min-height: min(88vw, 420px); }
  .lmj9-related-grid { grid-template-columns: 1fr; }
  .lmj9-related-media { height: min(61vw, 350px); }
}

@media (max-width: 520px) {
  .lmj9-shell { width: calc(100% - 22px); }
  .lmj9-utility { font-size: 8.4px; letter-spacing: .085em; }
  .lmj9-story-head h1 { font-size: clamp(29px, 8.2vw, 36px); }
  .lmj9-deck { padding-left: 13px; border-left-width: 2px; font-size: 14px; }
  .lmj9-hero { height: clamp(205px, 53vw, 275px); }
  .lmj9-prose h2 { font-size: 31px; }
  .lmj9-moment-pair { grid-template-columns: 1fr 1fr; align-items: end; }
  .lmj9-moment-pair .pair-b { margin-top: 28px; }
  .lmj9-moment-mosaic { grid-template-columns: 1.12fr .88fr; grid-template-rows: 1fr 1fr; }
  .lmj9-moment-mosaic .lmj9-photo-button { min-height: 150px; }
  .lmj9-photo-button { min-height: 178px; }
  .lmj9-story-end { align-items: flex-start; flex-direction: column; gap: 14px; }
  .lmj9-section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .lmj9-section-head h2 { font-size: 34px; }
  .lmj9-lightbox { padding: 14px; }
  .lmj9-lightbox-close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lmj9 *, .lmj9 *::before, .lmj9 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .lmj9.is-motion-ready [data-lmj-reveal] { opacity: 1; translate: none; }
  .lmj9 [data-lmj-tilt] { transform: none !important; }
}