/* Lighthouse Journal issue pages.
   Everything is scoped under .lj-issue so nothing here can reach another page.
   Colour spend: navy type and rules, gold hairlines, sky as a quiet wash. */

.lj-issue{
  --lj-read:720px;
  --lj-media:640px;
  --lj-r:4px;
  display:block;
  background:linear-gradient(180deg,var(--sky-light,#E6F2F8) 0,var(--beige,#FAF6EE) 520px);
  padding:0 0 88px;
  overflow-x:clip;
}
.lj-issue .lj-wrap{max-width:var(--lj-read);margin:0 auto;padding:0 24px}

/* Back link */
.lj-issue .lj-back{margin:0;padding:36px 0 8px}
.lj-issue .lj-back a{display:inline-flex;align-items:center;gap:.55em;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);text-decoration:none}
.lj-issue .lj-back a::before{content:"\2190";font-size:1.05rem;letter-spacing:0;transition:transform .2s}
.lj-issue .lj-back a:hover::before{transform:translateX(-3px)}
.lj-issue .lj-back a:hover{color:var(--blue)}

/* Header */
.lj-issue .lj-head{text-align:center;padding:28px 0 36px}
.lj-issue .lj-mark{width:112px;height:150px;margin:0 auto 26px;border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r);overflow:hidden;background:var(--blue-deep);box-shadow:0 0 0 5px var(--beige,#FAF6EE),0 0 0 6px rgba(209,170,63,.55)}
.lj-issue .lj-mark img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.lj-issue .lj-badge{display:inline-flex;align-items:center;gap:14px;margin:0 0 16px;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep)}
.lj-issue .lj-badge::before,.lj-issue .lj-badge::after{content:"";width:32px;height:1px;background:var(--gold,#D1AA3F)}
.lj-issue .lj-title{font-size:clamp(2.3rem,5.2vw,3.5rem);font-weight:600;font-style:italic;margin:0 0 .2em;line-height:1.08}
.lj-issue .lj-edition{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600;color:var(--blue);margin:0 0 .35em}
.lj-issue .lj-sub{margin:0;color:var(--muted);font-size:1rem;letter-spacing:.02em}

/* Read / Watch toggle */
.lj-issue .lj-toggle{display:flex;justify-content:center;gap:10px;margin:0 auto 44px}
.lj-issue .lj-tab{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:136px;padding:12px 22px;font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--blue-deep);background:transparent;border:1.5px solid var(--blue-deep);border-radius:var(--lj-r);cursor:pointer;transition:background .2s,color .2s}
.lj-issue .lj-tab svg{width:19px;height:19px;flex:none}
.lj-issue .lj-tab:hover{background:var(--sky-light,#E6F2F8)}
.lj-issue .lj-tab[aria-selected="true"]{background:var(--blue-deep);color:#fff}
.lj-issue .lj-tab:focus-visible{outline:2px solid var(--gold,#D1AA3F);outline-offset:3px}

/* Panels */
.lj-issue .lj-panel{padding:0 24px}
.lj-issue .lj-panel[hidden]{display:none}
.lj-issue .lj-panel:focus{outline:none}
.lj-issue .lj-panel:focus-visible{outline:2px solid var(--gold,#D1AA3F);outline-offset:8px}

/* Watch: thumbnail first, the player only on click */
.lj-issue .lj-watch{max-width:880px;margin:0 auto 56px}
.lj-issue .lj-video{position:relative;aspect-ratio:16/9;background:var(--blue-deep);border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r);overflow:hidden}
.lj-issue .lj-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .3s}
.lj-issue .lj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lj-issue .lj-video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:linear-gradient(180deg,rgba(27,58,92,0) 40%,rgba(27,58,92,.35) 100%);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lj-issue .lj-video-btn{width:76px;height:76px;border-radius:50%;border:1.5px solid #fff;background:rgba(27,58,92,.72);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.lj-issue .lj-video-btn svg{width:26px;height:26px;margin-left:4px}
.lj-issue .lj-video-play:hover .lj-video-btn{background:var(--blue-deep);transform:scale(1.05)}
.lj-issue .lj-video-play:hover ~ img,.lj-issue .lj-video:hover img{opacity:1}
.lj-issue .lj-video-play:focus-visible{outline:2px solid var(--gold,#D1AA3F);outline-offset:-6px}
.lj-issue .lj-video-note{text-align:center;margin:18px 0 0;font-size:.98rem;font-style:italic;color:var(--muted)}

/* Read: featured image, gold divider, the essay */
.lj-issue .lj-featured{max-width:var(--lj-media);margin:0 auto 48px;border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r);overflow:hidden;background:var(--blue-deep)}
.lj-issue .lj-featured img,.lj-issue .lj-figure img{width:100%;height:auto;display:block}
.lj-issue .lj-divider{max-width:420px;height:1px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--gold,#D1AA3F),transparent)}
.lj-issue .lj-content{max-width:var(--lj-read);margin:0 auto;padding:52px 0 8px}
.lj-issue .lj-content h2{font-size:clamp(1.75rem,3.2vw,2.25rem);margin:1.9em 0 .7em;line-height:1.15}
.lj-issue .lj-content > h2:first-child{margin-top:0}
.lj-issue .lj-content p{font-size:1.1875rem;line-height:1.85;color:var(--text);margin:0 0 1.35em}
.lj-issue .lj-content strong{color:var(--blue-deep)}
.lj-issue .lj-content a{color:var(--blue-deep);text-decoration:underline;text-decoration-color:var(--gold,#D1AA3F);text-decoration-thickness:1px;text-underline-offset:4px}
.lj-issue .lj-content a:hover{color:var(--blue)}
.lj-issue .lj-figure{max-width:var(--lj-media);margin:44px auto;border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r);overflow:hidden;background:var(--blue-deep)}

/* Pull quote */
.lj-issue .lj-content .lj-pull{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);font-style:italic;font-weight:600;line-height:1.3;text-align:center;color:var(--blue-deep);margin:48px 0;padding:30px 12px;border-top:1px solid var(--gold,#D1AA3F);border-bottom:1px solid var(--gold,#D1AA3F)}

/* Interview intro */
.lj-issue .lj-intro{background:var(--card-bg,#FFFCF6);border:1px solid var(--navy-line,rgba(27,58,92,.38));border-left:2px solid var(--gold,#D1AA3F);border-radius:var(--lj-r);padding:28px 32px;margin:0 0 48px}
.lj-issue .lj-intro p{font-family:var(--serif);font-size:1.4rem;line-height:1.5;font-style:italic;color:var(--blue-deep);margin:0 0 .8em}
.lj-issue .lj-intro p:last-child{margin-bottom:0}

/* Signature */
.lj-issue .lj-signature{margin:48px 0 0;padding:28px 0 0;border-top:1px solid var(--line,#E3D9C8)}
.lj-issue .lj-signature p{margin:0 0 .3em}
.lj-issue .lj-content .lj-name{font-family:var(--serif);font-size:1.6rem;font-weight:600;font-style:italic;color:var(--blue-deep)}

/* Reflections and the poem (issue 2) */
.lj-issue .lj-reflections{max-width:var(--lj-read);margin:64px auto 0}
.lj-issue .lj-refl-head{text-align:center;margin:0 0 32px}
.lj-issue .lj-stars{color:var(--gold,#D1AA3F);letter-spacing:.7em;font-size:.95rem;margin:0 0 10px;padding-left:.7em}
.lj-issue .lj-refl-head h2{font-size:1rem;font-family:var(--sans);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-deep);margin:0}
.lj-issue .lj-poem{background:var(--card-bg,#FFFCF6);border:1px solid var(--navy-line,rgba(27,58,92,.38));border-top:2px solid var(--gold,#D1AA3F);border-radius:var(--lj-r);padding:48px 40px}
.lj-issue .lj-poem h3{text-align:center;font-size:clamp(1.8rem,3.2vw,2.2rem);font-style:italic;margin:0 0 .25em}
.lj-issue .lj-poem-by{text-align:center;font-size:.9rem;color:var(--muted);margin:0 0 36px}
.lj-issue .lj-stanza{text-align:center;font-family:var(--serif);font-size:1.35rem;line-height:1.6;font-style:italic;font-weight:500;color:var(--text);margin:0 0 1.4em}
.lj-issue .lj-stanza:last-child{margin-bottom:0}
.lj-issue .lj-chorus{color:var(--blue-deep);font-weight:600;padding:22px 0;border-top:1px solid rgba(209,170,63,.55);border-bottom:1px solid rgba(209,170,63,.55)}
.lj-issue .lj-collab{text-align:center;margin:28px 0 0}
.lj-issue .lj-collab p{font-size:.98rem;font-style:italic;color:var(--muted);margin:0}
.lj-issue .lj-collab a{color:var(--blue-deep);text-decoration-color:var(--gold,#D1AA3F)}

/* Issue navigation */
.lj-issue .lj-nav{display:flex;gap:14px;align-items:stretch;margin:72px 0 0;padding:36px 0 0;border-top:1px solid var(--navy-line,rgba(27,58,92,.38))}
.lj-issue .lj-nav-link{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r);text-decoration:none;color:var(--blue-deep);transition:background .2s,border-color .2s}
.lj-issue a.lj-nav-link:hover{background:var(--card-bg,#FFFCF6);border-color:var(--blue-deep)}
.lj-issue .lj-nav-empty{display:none}
.lj-issue .lj-nav-k{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lj-issue .lj-nav-t{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.2}
.lj-issue .lj-nav-prev .lj-nav-t::before{content:"\2190\00a0"}
.lj-issue .lj-nav-next{text-align:right}
.lj-issue .lj-nav-next .lj-nav-t::after{content:"\00a0\2192"}
.lj-issue .lj-nav-all{flex:0 0 auto;text-align:center;justify-content:center}

/* Subscribe */
.lj-issue .lj-subscribe{margin:48px 0 0;padding:40px 36px;text-align:center;background:var(--blue-deep);color:#DCE8F2;border-top:2px solid var(--gold,#D1AA3F);border-radius:var(--lj-r)}
.lj-issue .lj-subscribe h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.3rem);margin:0 0 .35em}
.lj-issue .lj-subscribe p{color:#C9D9E7;margin:0 auto 24px;max-width:480px}
.lj-issue .lj-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1;color:var(--blue-deep);background:#fff;border:1.5px solid #fff;border-radius:var(--lj-r);text-decoration:none;transition:background .2s,color .2s}
.lj-issue .lj-btn:hover{background:var(--sky-light,#E6F2F8);border-color:var(--sky-light,#E6F2F8);color:var(--blue-deep)}
.lj-issue .lj-btn:focus-visible{outline:2px solid var(--gold,#D1AA3F);outline-offset:3px}
.lj-issue .lj-disclaimer{margin:28px auto 0;max-width:560px;text-align:center;font-size:.92rem;font-style:italic;color:var(--muted)}

@media (max-width:640px){
  .lj-issue{padding-bottom:64px}
  .lj-issue .lj-wrap,.lj-issue .lj-panel{padding-left:16px;padding-right:16px}
  .lj-issue .lj-back{padding-top:24px}
  .lj-issue .lj-head{padding:20px 0 28px}
  .lj-issue .lj-mark{width:92px;height:124px;margin-bottom:22px}
  .lj-issue .lj-badge{gap:10px;font-size:.74rem;letter-spacing:.14em}
  .lj-issue .lj-badge::before,.lj-issue .lj-badge::after{width:20px}
  .lj-issue .lj-toggle{margin-bottom:32px}
  .lj-issue .lj-tab{flex:1;min-width:0;max-width:170px;padding:13px 14px}
  .lj-issue .lj-featured{margin-bottom:36px}
  .lj-issue .lj-content{padding-top:40px}
  .lj-issue .lj-content p{font-size:1.09rem;line-height:1.8}
  .lj-issue .lj-figure{margin:32px auto}
  .lj-issue .lj-intro{padding:22px 20px}
  .lj-issue .lj-intro p{font-size:1.22rem}
  .lj-issue .lj-poem{padding:32px 18px}
  .lj-issue .lj-stanza{font-size:1.18rem}
  .lj-issue .lj-video-btn{width:62px;height:62px}
  .lj-issue .lj-nav{flex-direction:column;gap:10px;margin-top:56px}
  .lj-issue .lj-nav-empty{display:none}
  .lj-issue .lj-nav-next,.lj-issue .lj-nav-all{text-align:left}
  .lj-issue .lj-subscribe{padding:32px 20px}
  .lj-issue .lj-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .lj-issue *{transition:none !important}
}

/* Landing page signup: a light panel, because the GHL form paints its own
   light styling and would look pasted on over navy. */
/* Round seven (J-1, J-2): bolder subscribe box; layered border reads black, gold, black from the outside in */
.lj-signup{position:relative;background:var(--blue-deep,#1B3A5C);color:#fff;border:2px solid #111;box-shadow:0 0 0 6px var(--gold,#D1AA3F),0 0 0 8px #111;border-radius:6px;padding:48px 48px 36px;margin:10px;text-align:center}
.lj-signup .lj-signup-eyebrow{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#D1AA3F);margin:0 0 .6em;display:flex;align-items:center;justify-content:center;gap:12px}
.lj-signup .lj-signup-eyebrow img{width:34px;height:auto}
.lj-signup h2{color:#fff;font-size:clamp(2.4rem,4.4vw,3.2rem);margin:0 0 .2em}
.lj-signup > p{color:#DCE8F2;font-size:1.15rem;max-width:540px;margin:0 auto 26px}
.lj-signup-form{background:#fff;border-radius:6px;padding:4px 0 0;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lj-signup-form iframe{display:block;margin:0 auto;zoom:1.12}
@media (max-width:640px){.lj-signup{padding:32px 16px 20px;margin:10px 6px}.lj-signup-form iframe{zoom:1.06}}
#subscribe{scroll-margin-top:80px}
.issue-grid .issue-card img{aspect-ratio:4/3}

/* Insights articles (round four): same reading layout as the journal issues */
.lj-article .lj-title{font-style:normal}
.lj-article .lj-hl{color:var(--gold-text,#8A6A14);font-style:italic}
.lj-issue .lj-content ul{margin:0 0 1.35em;padding-left:1.3em}
.lj-issue .lj-content li{font-size:1.1875rem;line-height:1.8;color:var(--text);margin:0 0 .5em}
.lj-issue .lj-author{display:flex;align-items:center;gap:22px;margin:40px 0 0;padding:24px 26px;border:1px solid var(--navy-line,rgba(27,58,92,.38));border-radius:var(--lj-r)}
.lj-issue .lj-author img{width:96px;height:96px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--sky-light,#E6F2F8)}
.lj-issue .lj-author p{margin:0;color:var(--text);line-height:1.6}
.lj-issue .lj-author .lj-author-name{font-family:var(--serif,'Cormorant Garamond',serif);font-size:1.45rem;font-weight:600;color:var(--blue-deep);margin:0 0 4px}
@media (max-width:640px){
  .lj-issue .lj-content li{font-size:1.09rem}
  .lj-issue .lj-author{flex-direction:column;text-align:center;padding:22px 18px}
}
/* round eight: lighthouse icon + title centered above Subscribe */
.lj-signup .lj-signup-eyebrow{flex-direction:column;gap:10px}
.lj-signup .lj-signup-eyebrow span{margin-right:-.2em}
.lj-signup .lj-signup-eyebrow img{width:40px}