/* ===================================================================
   LIVE JOURNAL POST — the look for a single story.
   Now server-rendered by the portal (api/journal-page.js) and proxied
   onto /journal/<slug>; this stylesheet is linked from that document and
   from the couple-preview iframe in the Journal Console, so the console
   preview and the public page share one source of truth.
   =================================================================== */
section,header,article{position:relative;z-index:2}

.jp-wait{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:0 var(--pad)}
.jp-wait .mark{font-family:var(--display);font-style:italic;font-size:clamp(30px,4vw,52px);color:var(--paper);text-wrap:balance;max-width:22ch}
.jp-wait .mark .gold{color:var(--gold-light)}
.jp-wait .pulse{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:jpPulse 1.4s ease-in-out infinite}
@keyframes jpPulse{0%,100%{opacity:.25;transform:scaleX(.6)}50%{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.jp-wait .pulse{animation:none}}
.jp-wait a{color:var(--gold-light);font-family:var(--serif);font-style:italic;font-size:19px}

.rc-hero{padding:140px 0 0}
.rc-hero .meta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint)}
.rc-hero .meta-row .cat{color:var(--gold)}
.rc-hero h1{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(42px,6.6vw,112px);line-height:.95;color:var(--paper);letter-spacing:-.015em;margin:16px 0 0;max-width:20ch}
.rc-hero h1 .gold{color:var(--gold-light)}
.back{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-faint)}
.back:hover{color:var(--gold-light)}

.rc-filmhero{margin-top:clamp(34px,5vh,60px)}
.rc-filmhero .wrap{max-width:1180px}
.rc-filmhero .vid{aspect-ratio:16/9;width:100%;box-shadow:0 0 120px -28px rgba(211,172,51,.26),0 50px 100px -44px rgba(0,0,0,.9);border:1px solid var(--line)}
.rc-filmhero .vid .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-filmhero .cap-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
.rc-filmhero .cap-row .now{color:var(--gold)}

.ms-mark{text-align:center;padding:clamp(56px,8vh,100px) 0 0}
.ms-mark .num{font-family:var(--display);font-style:italic;font-size:clamp(80px,12vw,170px);line-height:.82;color:var(--gold-light);letter-spacing:-.02em}
.ms-mark .num sup{font-size:.3em;vertical-align:super;color:var(--paper)}
.ms-mark .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-top:8px}

.rc-body{max-width:760px;margin:0 auto;padding:clamp(40px,6vh,72px) var(--pad) 0}
.rc-body .lede-p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.3vw,30px);line-height:1.45;color:var(--paper);margin-bottom:30px;text-align:center}
.rc-body p{font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);line-height:1.75;color:var(--paper-dim);margin-bottom:24px}
.rc-body p em{font-style:italic;color:var(--paper)}
.rc-body h3{font-family:var(--display);font-style:italic;font-size:clamp(28px,3vw,42px);color:var(--paper);margin:14px 0 16px;line-height:1.04}

.rc-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:clamp(40px,6vh,72px) auto}
.rc-duo .shot{aspect-ratio:4/5;width:100%;overflow:hidden;background:var(--ink-3)}
.rc-duo .shot img,.rc-wide .shot img,.rc-tall .shot img,.rc-full img{width:100%;height:100%;object-fit:cover;display:block}
.rc-wide{margin:clamp(40px,6vh,72px) auto}
.rc-wide .shot{aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--ink-3)}
.rc-tall{max-width:640px;margin:clamp(40px,6vh,72px) auto;padding:0 var(--pad)}
.rc-tall .shot{aspect-ratio:4/5;width:100%;overflow:hidden;background:var(--ink-3)}
.rc-full{margin:clamp(40px,6vh,72px) 0}
.rc-full img{height:auto}
.rc-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-faint);margin-top:12px;text-align:center}

.rc-quote{max-width:880px;margin:clamp(44px,7vh,90px) auto;text-align:center;padding:0 var(--pad)}
.rc-quote blockquote{font-family:var(--display);font-style:italic;font-size:clamp(28px,3.6vw,52px);line-height:1.12;color:var(--paper);margin:0}
.rc-quote blockquote .gold{color:var(--gold-light)}
.rc-quote .src{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);margin-top:22px}

/* A full testimonial, not a pull-quote. The display-italic treatment above is
   sized for one line; a few hundred words that size is a wall. This is a
   contained panel instead: small serif, wide box, and two columns once
   there's room, so a long review reads as a quiet aside rather than
   swallowing the page. */
.rc-quote.long{max-width:1140px;text-align:left}
.rc-quote.long blockquote{position:relative;font-family:var(--serif);font-style:normal;
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.72;color:var(--paper-dim);
  background:rgba(243,236,221,.028);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,44px) clamp(22px,2.6vw,36px);
  border-radius:3px}
.rc-quote.long blockquote::before{content:"\201C";position:absolute;top:-14px;left:clamp(18px,2.6vw,38px);
  font-family:var(--display);font-size:70px;line-height:1;color:var(--gold);opacity:.5}
.rc-quote.long blockquote p{margin:0 0 15px;break-inside:avoid}
.rc-quote.long blockquote p:last-child{margin-bottom:0}
.rc-quote.long .src{text-align:right;margin-top:16px;color:var(--gold-light)}
/* Two columns halve the height on anything desktop-sized. */
@media (min-width:900px){
  .rc-quote.long blockquote{columns:2;column-gap:clamp(30px,3.4vw,52px)}
  .rc-quote.long blockquote p:first-child{margin-top:6px}
}

/* masonry gallery (the fusion: a wedding's starred photos inside the story) */
/* Row-major masonry. CSS multi-column (the old `columns:4`) fills column one
   top-to-bottom before starting column two, so photos 1,2,3 stacked down the
   far left and reading across a row gave a scrambled order. A grid with a
   per-item row span keeps 1,2,3,4 across the top the way they were authored;
   journal-post.js sets --span from each image's intrinsic ratio. */
.jp-mas{max-width:var(--maxw);margin:clamp(40px,6vh,72px) auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:8px;gap:14px}
.jp-mas .ph{margin:0;overflow:hidden;background:var(--ink-3);cursor:zoom-in;grid-row-end:span 30}
.jp-mas .ph img{display:block;width:100%;height:auto;opacity:0;transform:scale(1.015);transition:opacity .7s ease,transform 1.2s ease}
.jp-mas .ph img.ld{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jp-mas .ph img{transition:none;transform:none}}
@media (max-width:1300px){.jp-mas{grid-template-columns:repeat(3,1fr)}}
/* phones keep three across (studio call 2026-08-05) — one column made a
   starred set an endless scroll.
   Row spans round to whole grid rows, and at ~110px wide that rounding is
   worth several percent of a tile's height — enough to show a sliver of
   backing under a photo. A 2px row unit halves the error and the photos
   cover their frames, so the tile height the span picked is the one you
   see, cropped by a pixel or two instead of letterboxed. */
@media (max-width:560px){
  .jp-mas{grid-template-columns:repeat(3,1fr);gap:6px;grid-auto-rows:2px}
  .jp-mas .ph img{height:100%;object-fit:cover}
}

/* scrolling strip */
.jp-scroll{margin:clamp(40px,6vh,72px) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.jp-scroll::-webkit-scrollbar{display:none}
.jp-scroll .row{display:flex;gap:14px;padding:0 var(--pad);width:max-content}
.jp-scroll .cell{flex:none;height:clamp(260px,42vh,420px);overflow:hidden;background:var(--ink-3)}
.jp-scroll .cell img{height:100%;width:auto;display:block}

.rc-cta{text-align:center;padding:clamp(50px,8vh,110px) var(--pad) 0;max-width:760px;margin:0 auto}
.rc-cta h2{font-family:var(--display);font-style:italic;font-size:clamp(34px,5vw,68px);color:var(--paper);line-height:1.02;margin-bottom:20px}
.rc-cta h2 .gold{color:var(--gold-light)}

.jp-end{text-align:center;padding:clamp(50px,8vh,100px) var(--pad) 0}
.jp-end p{font-family:var(--display);font-style:italic;font-size:clamp(24px,3.2vw,44px);line-height:1.15;color:var(--paper);max-width:26ch;margin:0 auto;text-wrap:balance}
.jp-end p .gold{color:var(--gold-light)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,10,8,.96);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.lb .x{position:absolute;top:max(18px,env(safe-area-inset-top));right:22px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--paper-dim);background:none;border:0;cursor:pointer;padding:10px;text-transform:uppercase}
.lb .x:hover,.lb .x:focus-visible{color:var(--gold-light)}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--display);font-style:italic;font-size:34px;color:var(--paper-dim);background:none;border:0;cursor:pointer;padding:18px}
.lb .nav:hover,.lb .nav:focus-visible{color:var(--gold-light)}
.lb .prev{left:6px}.lb .next{right:6px}

@media (max-width:680px){.rc-filmhero .vid{aspect-ratio:16/10}.rc-duo{grid-template-columns:1fr}.rc-hero{padding:118px 0 0}}