/* Shared styling for /journal/ — the entry template and the index/listing
   page. Previously this was duplicated inline in every hand-authored
   journal page; now it's linked once from site/_includes/base.njk. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.label { font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-size: 11px; }

/* ============================== NAV (journal pages use a solid cream/blur bar, distinct from other sections' transparent-on-scroll nav) ============================== */
nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 40px; display:flex; justify-content:space-between; align-items:center; background:rgba(255,241,230,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(50,16,18,0.06); }
nav a { color:var(--mahogany); }
nav .logo-img { display:block; width:190px; height:auto; }

@media (max-width:900px) {
  nav.site-nav { padding:14px 22px; }
  nav .logo-img { width: 140px; }
}

/* ============================== ARTICLE (entry pages) ============================== */
section.article-head { padding:130px 40px 60px; text-align:center; background:var(--cream); }
.article-head-inner { max-width:720px; margin:0 auto; }
.article-eyebrow { font-family: 'Montserrat', sans-serif; font-size:10px; font-weight:500; letter-spacing:0.30em; text-transform:uppercase; color:var(--wood); margin-bottom:28px; }
h1.article-title { font-family: 'FreightBig', Georgia, serif; font-size:clamp(34px,4vw,56px); font-weight:300; line-height:1.1; letter-spacing:-0.012em; color:var(--mahogany); margin-bottom:28px; }
h1.article-title em { font-family: 'FreightBig', Georgia, serif; font-style:italic; }
.article-byline { font-family: 'Montserrat', sans-serif; font-style:italic; font-size:16px; color:var(--mahogany); opacity:0.7; }

section.article-hero { padding:0 40px 60px; background:var(--cream); }
.article-hero-img { max-width:1080px; margin:0 auto; background-size:cover; background-position:center; }
.article-hero-img.wide { aspect-ratio: 3/2; }
.article-hero-img.classic { aspect-ratio: 4/3; }

section.article-body { padding:0 40px 100px; background:var(--cream); }
.article-body-frame { max-width:980px; margin:0 auto 104px; background:var(--paper); border-radius:6px; padding:88px 180px 96px; position:relative; box-shadow:0 24px 60px -32px rgba(50,16,18,0.28); }

.monogram { text-align:center; margin-bottom:50px; }
.monogram-mark { display:inline-block; padding:0 14px; position:relative; }
.monogram-mark img { display:block; height:20px; width:auto; }
.monogram-mark::before, .monogram-mark::after { content:''; position:absolute; top:50%; width:70px; height:1px; background:rgba(50,16,18,0.35); }
.monogram-mark::before { right:100%; }
.monogram-mark::after { left:100%; }

.letter-body p { font-family: 'Montserrat', sans-serif; font-size:17px; line-height:1.7; color:var(--mahogany); margin-bottom:18px; }
.letter-body p.lead { font-size:19px; line-height:1.6; }
.letter-body p.lead::first-letter { font-family: 'FreightBig', Georgia, serif; font-size:56px; line-height:0.85; float:left; margin:6px 12px 0 0; color:var(--mahogany); font-weight:300; }
.letter-body em { font-style:italic; }
.signature { font-family: 'Montserrat', sans-serif; font-style:italic; color:var(--mahogany); font-size:18px; margin-top:28px; }

.ornament { text-align:center; margin:36px 0; color:var(--wood); font-family: 'Montserrat', sans-serif; font-style:italic; font-size:16px; line-height:1; position:relative; }
.ornament::before, .ornament::after { content:''; position:absolute; top:50%; width:32%; height:1px; background:rgba(186,151,120,0.4); }
.ornament::before { left:5%; }
.ornament::after { right:5%; }

.inline-image { margin:36px 0; }
.inline-image.polaroid { text-align:center; }
.inline-image.polaroid img { display:block; max-width:480px; width:100%; height:auto; margin:0 auto; border-radius:2px; box-shadow:0 12px 30px -14px rgba(50,16,18,0.35); }
.inline-image-caption { font-family: 'Montserrat', sans-serif; font-style:italic; font-size:13px; color:var(--wood); text-align:center; margin-top:12px; opacity:0.85; }

.colophon { text-align:center; margin-top:60px; padding-top:24px; border-top:1px solid rgba(50,16,18,0.15); font-family: 'Montserrat', sans-serif; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--wood); }

/* ============================== "MORE / KEEP READING" (entry pages) ============================== */
section.more { padding:100px 40px; background:var(--cream-light); border-top:1px solid rgba(50,16,18,0.08); }
.more-header { max-width:1280px; margin:0 auto 60px; text-align:center; }
.more-header .label { color:var(--wood); margin-bottom:16px; display:block; }
.more-header h2 { font-family: 'FreightBig', Georgia, serif; font-size:clamp(28px,2.8vw,38px); font-weight:300; color:var(--mahogany); letter-spacing:-0.01em; }
.more-header h2 em { font-family: 'FreightBig', Georgia, serif; font-style:italic; }
.more-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:50px 40px; }
.more-card { text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:opacity 0.3s ease; }
.more-card:hover { opacity:0.85; }
.more-card-image-wrap { aspect-ratio:4/3; overflow:hidden; margin-bottom:22px; }
.more-card-image { width:100%; height:100%; background-size:cover; background-position:center; transition:transform 0.6s ease; }
.more-card:hover .more-card-image { transform:scale(1.02); }
.more-card-cat { font-family: 'Montserrat', sans-serif; font-size:10px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--wood); margin-bottom:10px; }
.more-card h3 { font-family: 'FreightBig', Georgia, serif; font-size:26px; font-weight:300; line-height:1.15; color:var(--mahogany); margin-bottom:8px; }
.more-card h3 em { font-family: 'FreightBig', Georgia, serif; font-style:italic; }
.more-card-excerpt { font-family: 'Montserrat', sans-serif; font-size:14px; line-height:1.7; color:var(--mahogany); opacity:0.8; }
.back-to-journal { text-align:center; margin-top:80px; }
.back-to-journal a { font-family: 'Montserrat', sans-serif; font-size:11px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--mahogany); text-decoration:none; border-bottom:1px solid var(--mahogany); padding-bottom:6px; }

/* ============================== MASTHEAD (index page) ============================== */
section.masthead { padding: 160px 40px 70px; text-align: center; background: var(--cream); border-bottom: 1px solid rgba(50, 16, 18, 0.08); }
.masthead-monogram { margin-bottom: 22px; position: relative; display: inline-block; padding: 0 18px; }
.masthead-monogram img { display: block; height: 18px; width: auto; }
.masthead-monogram::before, .masthead-monogram::after { content: ''; position: absolute; top: 50%; width: 50px; height: 1px; background: rgba(186, 151, 120, 0.5); }
.masthead-monogram::before { right: 100%; }
.masthead-monogram::after { left: 100%; }
.masthead-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--wood); margin-bottom: 22px; }
.masthead-wordmark { font-family: 'FreightBig', Georgia, serif; font-size: clamp(48px, 6vw, 84px); line-height: 1.0; font-weight: 300; letter-spacing: -0.012em; color: var(--mahogany); margin-bottom: 26px; }
.masthead-wordmark em { font-family: 'FreightBig', Georgia, serif; font-style: italic; font-weight: 400; }
.masthead-sub { font-family: 'Montserrat', sans-serif; font-style: italic; font-size: clamp(17px, 1.6vw, 21px); color: var(--mahogany); opacity: 0.78; max-width: 620px; margin: 0 auto; line-height: 1.55; }

/* ============================== FEATURED (index page) ============================== */
section.featured { padding: 100px 40px; background: var(--cream); }
.featured-card { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.featured-image { aspect-ratio: 4 / 5; background-size: cover; background-position: left 60%; }
.featured-copy { padding: 0 20px; }
.featured-copy .label { color: var(--wood); margin-bottom: 22px; display: block; }
.featured-meta { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mahogany); margin-bottom: 18px; }
.featured-copy h2 { font-family: 'FreightBig', Georgia, serif; font-size: clamp(38px, 4vw, 56px); font-weight: 300; line-height: 1.05; margin-bottom: 28px; color: var(--mahogany); letter-spacing: -0.014em; }
.featured-copy h2 em { font-family: 'FreightBig', Georgia, serif; font-style: italic; }
.featured-copy h2 a { color: var(--mahogany); text-decoration: none; transition: opacity 0.2s ease; }
.featured-copy h2 a:hover { opacity: 0.75; }
.featured-excerpt { font-size: 16px; line-height: 1.75; color: var(--mahogany); margin-bottom: 32px; max-width: 500px; }
.featured-cta { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mahogany); text-decoration: none; border-bottom: 1px solid var(--mahogany); padding-bottom: 6px; transition: opacity 0.25s ease; }
.featured-cta:hover { opacity: 0.65; }

/* ============================== GRID (index page) ============================== */
section.grid-section { padding: 80px 40px 150px; background: var(--cream); }
.grid-header { max-width: 1280px; margin: 0 auto 70px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(50, 16, 18, 0.15); padding-bottom: 22px; }
.grid-header .label { color: var(--wood); }
.grid-header-count { font-family: 'Montserrat', sans-serif; font-style: italic; color: var(--mahogany); opacity: 0.6; font-size: 14px; }
.entry-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 40px; }
.entry-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: opacity 0.3s ease; }
.entry-card:hover { opacity: 0.85; }
.entry-card:hover .entry-card-image { transform: scale(1.02); }
.entry-card-image-wrap { overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 24px; background: var(--paper); }
.entry-card-image { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.6s ease; }
.entry-card-cat { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--wood); margin-bottom: 14px; }
.entry-card-title { font-family: 'FreightBig', Georgia, serif; font-size: 28px; font-weight: 300; line-height: 1.15; color: var(--mahogany); margin-bottom: 14px; letter-spacing: -0.008em; }
.entry-card-title em { font-family: 'FreightBig', Georgia, serif; font-style: italic; }
.entry-card-excerpt { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.7; color: var(--mahogany); opacity: 0.85; margin-bottom: 18px; }
.entry-card-author { font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 13px; color: var(--wood); margin-top: auto; }

/* ============================== SUBSCRIBE (index page) ============================== */
section.subscribe { padding: 130px 40px; background: var(--cream); border-top: 1px solid rgba(186, 151, 120, 0.28); color: var(--mahogany); text-align: center; }
.subscribe-inner { max-width: 640px; margin: 0 auto; }
.subscribe-inner .label { color: var(--wood-dark); margin-bottom: 28px; display: block; }
.subscribe-inner h2 { font-family: 'FreightBig', Georgia, serif; font-size: clamp(34px, 3.4vw, 48px); font-weight: 300; line-height: 1.15; margin-bottom: 24px; color: var(--mahogany); letter-spacing: -0.012em; }
.subscribe-inner h2 em { font-family: 'FreightBig', Georgia, serif; font-style: italic; color: var(--wood-dark); font-weight: 400; }
.subscribe-inner p { font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 17px; line-height: 1.65; color: var(--mahogany); opacity: 0.75; margin-bottom: 40px; }
.subscribe-form { display: flex; max-width: 440px; margin: 0 auto; border-bottom: 1px solid var(--mahogany); padding-bottom: 10px; }
.subscribe-form input { flex: 1; background: transparent; border: none; padding: 8px 0; color: var(--mahogany); font-family: 'Montserrat', sans-serif; font-size: 16px; outline: none; }
.subscribe-form input::placeholder { color: var(--wood-dark); opacity: 0.7; }
.subscribe-form button { background: transparent; border: none; color: var(--mahogany); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; padding: 0 0 0 16px; transition: color 0.25s ease; }
.subscribe-form button:hover { color: var(--wood-dark); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================== RESPONSIVE ============================== */
@media (max-width:900px) {
  section.article-head { padding:130px 22px 60px; }
  section.article-hero { padding:0 0 40px; }
  section.article-body { padding:0 16px 60px; }
  .article-body-frame { padding:48px 28px 52px; margin:0 auto 56px; }
  .letter-body p { font-size:16px; }
  .letter-body p.lead { font-size:17px; }
  .letter-body p.lead::first-letter { font-size:42px; }
  section.more { padding:60px 22px; }
  .more-grid { grid-template-columns:1fr; gap:40px; }

  section.masthead { padding: 130px 22px 60px; }
  section.featured { padding: 60px 22px; }
  .featured-card { grid-template-columns: 1fr; gap: 36px; }
  .featured-copy { padding: 0; }
  section.grid-section { padding: 40px 22px 80px; }
  .entry-grid { grid-template-columns: 1fr; gap: 50px; }
  .grid-header { margin-bottom: 30px; }
  section.subscribe { padding: 80px 22px; }
}