/* Journal — long-form reading, on the same black. */

.article-page .site-header { position: sticky; top: 0; }
main.article { padding: var(--space-5) 0 var(--space-6); }
main.article .wrap { max-width: 780px; }

main.article h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.15;
  margin: 0 0 12px; color: var(--ivory);
}
.article-date {
  color: var(--muted-dk); font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-3);
}
.article-hero {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: var(--space-4);
}

/* Body copy — generous measure and rhythm for reading. */
.article-body { font-size: 1.06rem; line-height: 1.75; color: var(--ivory-dim); }
.article-body p { margin: 0 0 1.3em; max-width: none; color: var(--ivory-dim); }
.article-body h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: 1.6rem; line-height: 1.25; margin: var(--space-4) 0 12px;
}
.article-body h3 { font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: 1.3rem; margin: var(--space-3) 0 10px; }
.article-body ul, .article-body ol { padding-left: 1.2em; margin: 0 0 1.3em; }
.article-body li { margin-bottom: .5em; color: var(--ivory-dim); }
.article-body strong { color: var(--ivory); }
.article-body blockquote {
  margin: var(--space-3) 0; padding-left: var(--space-3);
  border-left: 2px solid var(--champagne);
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ivory);
}

.article-cta {
  margin-top: var(--space-5); padding: var(--space-4);
  border: 1px solid rgba(247,243,236,.14); text-align: center;
}
.article-cta p { margin: 0 0 var(--space-3); color: var(--ivory); max-width: none; }

.article-nav {
  display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr;
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid rgba(247,243,236,.12);
}
.article-nav a { color: var(--muted-dk); text-decoration: none; font-size: .93rem; line-height: 1.45; }
.article-nav a:hover { color: var(--champagne); }
.article-nav a:last-child:nth-child(2) { text-align: right; }
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } }

/* Journal index */
.j-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
main.article .wrap:has(.j-grid) { max-width: var(--wrap); }
.j-card { display: flex; flex-direction: column; }
.j-thumb { display: block; overflow: hidden; }
.j-thumb img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s var(--ease);
}
.j-card:hover .j-thumb img { transform: scale(1.04); }
.j-date {
  margin: 14px 0 6px; color: var(--muted-dk);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.j-card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; }
.j-card h2 a { color: var(--ivory); text-decoration: none; }
.j-card h2 a:hover { color: var(--champagne); }
.j-excerpt { color: var(--muted-dk); font-size: .93rem; line-height: 1.55; margin: 0; }

/* Films page */
.films-page .wrap { max-width: var(--wrap); }
.film-grid {
  display: grid; gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.film-card { margin: 0; }
.film-card video {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: #000; cursor: pointer;
}
.film-card figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.film-couple { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--champagne); }
.film-kind { font-size: .85rem; color: var(--muted-dk); }
@media (max-width: 560px) { .film-grid { grid-template-columns: 1fr; } }

.films-more { margin-top: var(--space-4); text-align: center; }

/* About page uses the full grid, not the reading measure. */
.about-page .wrap { max-width: var(--wrap); }
.about-page .about-lead { margin-top: var(--space-3); }

/* Sub-pages carry no reveal script — make sure nothing inherits a hidden state. */
.article-page .section-head .eyebrow,
.article-page .section-head h2,
.article-page .section-head > p,
.article-page .gallery figure,
.article-page .films figure,
.article-page .card { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.article-page .section-head .rule::after { transform: scaleX(1) !important; }
.article-page .section-head .rule i { transform: rotate(45deg) scale(1) !important; }
.article-page h2 .ch { opacity: 1 !important; transform: none !important; }

/* ── About page ───────────────────────────────────────────
   Large opening statement, portrait against the copy, credentials
   stated plainly, then the two plates. */

.about-hero { padding: var(--space-6) 0 var(--space-4); }
.about-hero .wrap { max-width: var(--wrap); }
.about-hero h1 {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05;
  letter-spacing: -.015em; margin: 0 0 var(--space-3);
}
.about-standfirst {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5;
  color: var(--ivory-dim); max-width: 62ch; margin: 0;
}

.about-body { padding: var(--space-4) 0 var(--space-5); }
.about-body .wrap { max-width: var(--wrap); }
.about-body .about-lead {
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: start;
}
.about-body .about-portrait img {
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.06);
  border: 1px solid rgba(195, 162, 100, .28);
}
.about-copy p { color: var(--ivory-dim); max-width: 52ch; line-height: 1.75; }
.about-first { font-size: 1.12rem; color: var(--ivory) !important; }

.about-credentials {
  margin: var(--space-5) 0 0;
  border-top: 1px solid rgba(247, 243, 236, .14);
}
.about-credentials > div {
  display: grid; grid-template-columns: 190px 1fr; gap: var(--space-3);
  padding: 18px 0; border-bottom: 1px solid rgba(247, 243, 236, .1);
}
.about-credentials dt {
  font: 500 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne);
}
.about-credentials dd { margin: 0; color: var(--ivory-dim); font-size: 1rem; }

.about-plates-band { padding: var(--space-4) 0; }
.about-plates-band .wrap { max-width: var(--wrap); }

.about-close-band { padding: var(--space-4) 0 var(--space-6); text-align: center; }
.about-close-band p { color: var(--ivory); margin: 0 auto var(--space-3); max-width: 44ch; }

@media (max-width: 900px) {
  .about-body .about-lead { grid-template-columns: 1fr; gap: var(--space-4); }
  .about-body .about-portrait img { aspect-ratio: 3 / 2; }
  .about-credentials > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ── Never crop the photographs ───────────────────────────
   The article hero was forced to 3:2 with object-fit:cover, which cut the
   heads off portrait-orientation frames. Show them whole. */

.article-hero {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;
  max-height: 82vh;
  width: auto; max-width: 100%;
  margin-inline: auto;
}

/* Index thumbnails still need a uniform grid, but bias the crop upward so
   faces survive rather than sitting at the centre of the frame. */
.j-thumb img { object-position: 50% 22%; }

/* Contact page */
.contact-main { padding: var(--space-5) 0 var(--space-6); }
.contact-main .wrap { max-width: var(--wrap); }
.contact-page .contact-grid { align-items: start; }
.contact-page .contact-direct h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: var(--space-3);
}

/* ── Film description ───────────────────────────────────────
   The same note under every film — it describes how the films are
   made, not any one wedding. Set narrower than the video and in a
   lighter tone so it reads as a note rather than body copy. */

.film-note {
  margin-top: 14px;
  max-width: 62ch;
}
.film-note p {
  margin: 0 0 .9em;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted-dk, #9A958C);
}
.film-note p:last-child { margin-bottom: 0; }
.film-note p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 1.35em;
  line-height: 1;
  color: var(--champagne);
}

/* ── About: the portrait holds while the copy runs past ─────
   The portrait pins below the header and stays there for as long as
   the text column is still scrolling, then releases and travels out
   with the end of the section. */

.about-body .about-portrait {
  position: sticky;
  top: 104px;                /* clears the sticky header, plus breathing room */
  align-self: start;         /* a stretched grid item cannot stick */
}

@media (max-width: 900px) {
  /* Single column — there is nothing for the portrait to hold against. */
  .about-body .about-portrait { position: static; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .about-body .about-portrait { position: static; top: auto; }
}

/* ── Contact page: packages above the enquiry ───────────────
   The cards are the same component as the homepage; this only
   gives the section its own spacing on this page. */

.contact-packages { padding: var(--space-5) 0 var(--space-4); }
.contact-packages .section-head { margin-bottom: var(--space-4); }
.contact-packages .section-head h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px;
}
.contact-packages .section-head p { color: var(--muted-dk); max-width: 62ch; }
.contact-packages .collections { margin-top: 0; }

/* The two-column enquiry block then starts against a rule. */
.contact-main .contact-grid {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 243, 236, .12);
  scroll-margin-top: 96px;    /* the CTA jumps here; clear the sticky header */
}