/* Lenses of Happy — Ghost theme (ported from visual-system.md / brand book v2, layout v3) */

:root{
  --cream:#FDFBF7; --ink:#2E3A38; --coral:#F08A7E; --coral-press:#E0786B;
  --green:#6FAE7C; --green-deep:#356B49;
  --surface:#F5EFE6; --hairline:#E7E0D4; --muted:#6F7975;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --wrap:42rem; --wide:46rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--body);
  font-weight:400; font-size:1.0625rem; line-height:1.85;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s3); }
.wrap--wide{ max-width:var(--wide); }

/* typography */
h1,h2,h3{ font-family:var(--display); font-weight:300; line-height:1.12; letter-spacing:-0.02em; color:var(--ink); margin:0; }
h1{ font-size:clamp(2.6rem, 8vw, 4.6rem); }
h2{ font-size:clamp(2rem, 5vw, 2.9rem); }
h3{ font-size:clamp(1.5rem, 4vw, 1.9rem); }
.em{ font-style:italic; color:var(--coral); }
p{ margin:0 0 1.15em; }
.lede{ font-size:1.1875rem; }

.eyebrow{ font-family:var(--body); font-weight:500; text-transform:uppercase; font-size:clamp(1.15rem, 3.4vw, 1.35rem); letter-spacing:0.1em; color:var(--green); margin:0 0 var(--s3); display:block; }

a{ color:var(--green); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--coral-press); }
.more{ font-family:var(--body); font-weight:500; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
.more:hover{ color:var(--coral-press); }
.hand{ font-family:var(--hand); color:var(--green); font-size:1.5rem; line-height:1; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--cream); padding:var(--s2); z-index:50; }
.skip:focus{ left:var(--s2); top:var(--s2); border-radius:6px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

/* header */
.site-head{ border-bottom:1px solid var(--hairline); }
.site-head .bar{ max-width:60rem; margin-inline:auto; padding:var(--s3); display:flex; align-items:center; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; }
.wordmark{ font-family:var(--display); font-weight:500; font-size:1.4rem; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wordmark .em{ font-style:italic; }
.nav{ display:flex; align-items:center; gap:var(--s3); }
.nav a{ font-family:var(--body); font-size:0.9rem; font-weight:400; color:var(--ink); text-decoration:none; }
.nav a:hover{ color:var(--green-deep); }

/* buttons & form */
.btn{ display:inline-block; font-family:var(--body); font-weight:500; font-size:1rem; background:var(--coral); color:var(--ink); border:0; border-radius:999px; padding:0.7em 1.4em; cursor:pointer; text-decoration:none; line-height:1.2; transition:background .18s ease; }
.btn:hover{ background:var(--coral-press); color:var(--ink); }
.signup{ margin-top:var(--s3); }
.signup form{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.signup input[type=email]{ flex:1 1 16rem; min-width:0; font-family:var(--body); font-size:1rem; color:var(--ink); background:var(--cream); border:1px solid var(--hairline); border-radius:999px; padding:0.7em 1.1em; }
.signup input[type=email]::placeholder{ color:var(--muted); }
.signup input[type=email]:focus-visible{ border-color:var(--green-deep); outline:none; }
.fineprint{ display:block; margin-top:var(--s2); font-size:0.85rem; color:var(--muted); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* sections */
section{ padding-block:var(--s5); }
.hero{ padding-block:var(--s6) var(--s6); background:var(--ink); color:var(--cream); }
.hero h1{ margin-bottom:var(--s3); color:var(--cream); max-width:18ch; }
.hero .lede{ color:rgba(253,251,247,0.82); max-width:34ch; }
.hero-kicker{ font-family:var(--hand); color:var(--green); font-size:1.55rem; line-height:1; margin:0 0 var(--s2); }
.hero .em{ color:var(--coral); }
.hero-cta{ margin-top:var(--s4); }
.hero-cta a{ font-family:var(--body); font-weight:500; color:var(--coral); text-decoration:none; border-bottom:1px solid rgba(240,138,126,0.5); padding-bottom:3px; }
.hero-cta a:hover{ color:var(--cream); border-color:var(--cream); }
.rule{ border:0; border-top:1px solid var(--hairline); margin:0; }

/* pillars / contents list */
.pillars{ padding-block:var(--s5); }
.pillar{ padding-block:var(--s4); border-top:1px solid var(--hairline); }
.pillar:first-of-type{ border-top:0; }
.pillar h3{ margin-bottom:var(--s1); }
.pillar p{ margin:0; color:var(--ink); max-width:34rem; }
.pillar .num{ font-family:var(--display); font-style:italic; color:var(--green); font-size:1.1rem; }

/* featured / page-head */
.issue h2{ margin:var(--s1) 0 var(--s3); }
.issue .meta{ font-family:var(--body); font-size:0.95rem; color:var(--muted); margin-bottom:var(--s2); }
.page-head{ padding-block:var(--s6) var(--s6); background:var(--ink); color:var(--cream); }
.page-head h1{ margin-bottom:var(--s3); color:var(--cream); }
.page-head .lede{ max-width:32rem; color:rgba(253,251,247,0.82); }
.page-head .em{ color:var(--coral); }

/* photography */
figure.lens{ margin:var(--s3) 0; }
figure.lens img{ width:100%; height:auto; display:block; border-radius:10px; }
.photo{ aspect-ratio:4/3; width:100%; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); border:1px solid var(--hairline); }
.photo span{ font-size:0.85rem; letter-spacing:0.04em; }
figcaption{ margin-top:var(--s2); font-size:0.9rem; color:var(--muted); }

/* about / reading */
.reading p, .about p{ max-width:34rem; }

/* lenses list (about 'why I write') */
.lens-item{ padding-block:var(--s4); border-top:1px solid var(--hairline); }
.lens-item:first-of-type{ border-top:0; }
.lens-item h3{ margin-bottom:var(--s1); }
.lens-item p{ margin:0; max-width:34rem; }
.lens-item .num{ font-family:var(--display); font-style:italic; color:var(--green); font-size:1.1rem; }

/* subscribe */
.subscribe{ background:var(--surface); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.subscribe h2{ margin-bottom:var(--s2); }
.subscribe p{ max-width:34rem; }

/* post + page body (Ghost content) */
.post-head{ margin-bottom:var(--s3); }
.post-head .meta{ font-family:var(--body); font-size:0.95rem; color:var(--muted); margin-top:var(--s2); }
.gh-content{ }
.gh-content > *{ margin:0 0 1.2em; }
/* H2 in editor content = the brand "eyebrow" section label (matches about-v1.html) */
.gh-content h2{ font-family:var(--body); font-weight:500; text-transform:uppercase; font-size:clamp(1.15rem,3.4vw,1.35rem); letter-spacing:0.1em; color:var(--green); margin:2em 0 0.6em; }
/* H3 stays serif, for a larger title when you want one */
.gh-content h3{ font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,4vw,1.9rem); letter-spacing:-0.02em; margin:1.4em 0 0.3em; }
.gh-content p{ max-width:34rem; }
.gh-content a{ color:var(--green-deep); }
.gh-content blockquote{ margin:1.4em 0; padding-left:var(--s3); border-left:2px solid var(--green); font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--ink); }
.gh-content img, .gh-content .kg-card{ max-width:100%; height:auto; border-radius:10px; }
.gh-content figcaption{ text-align:center; }
.gh-content hr{ border:0; border-top:1px solid var(--hairline); margin:var(--s4) 0; }

/* ===== Koenig editor cards (required widths + cards) ===== */
.gh-content .kg-card, .gh-content img{ max-width:100%; height:auto; }
.kg-width-wide{ position:relative; width:min(100vw, 1100px); left:50%; transform:translateX(-50%); }
.kg-width-full{ position:relative; width:100vw; left:50%; transform:translateX(-50%); }
.kg-width-full img{ border-radius:0; }
.kg-image{ margin:0 auto; display:block; }
figure.kg-image-card img{ width:100%; }
.kg-image-card figcaption, .kg-embed-card figcaption, .kg-gallery-card figcaption, .kg-video-card figcaption{
  text-align:center; font-size:0.9rem; color:var(--muted); margin-top:var(--s2);
}
/* galleries */
.kg-gallery-container{ position:relative; width:min(100vw, 1100px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; }
.kg-gallery-row{ display:flex; flex-direction:row; justify-content:center; gap:12px; }
.kg-gallery-row:not(:first-of-type){ margin-top:12px; }
.kg-gallery-image img{ display:block; width:100%; height:100%; }
/* bookmark card */
.kg-bookmark-card, .kg-bookmark-card *{ box-sizing:border-box; }
.kg-bookmark-card{ width:100%; }
.kg-bookmark-container{ display:flex; min-height:148px; color:var(--ink); text-decoration:none; border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.kg-bookmark-content{ flex:1 1; padding:20px; order:1; }
.kg-bookmark-title{ font-weight:600; }
.kg-bookmark-description{ color:var(--muted); margin-top:6px; }
.kg-bookmark-thumbnail{ position:relative; min-width:33%; max-height:100%; order:2; }
.kg-bookmark-thumbnail img{ width:100%; height:100%; object-fit:cover; }
.kg-bookmark-metadata{ margin-top:12px; font-size:0.85rem; color:var(--muted); }
/* callout / button / toggle cards */
.kg-callout-card{ display:flex; padding:16px 20px; border-radius:6px; background:var(--surface); }
.kg-callout-emoji{ padding-right:12px; }
.kg-button-card{ display:flex; }
.kg-button-card.kg-align-center{ justify-content:center; }
.kg-toggle-card{ border:1px solid var(--hairline); border-radius:6px; padding:16px 20px; }
/* audio card (for narrated issues) */
.kg-audio-card{ display:flex; align-items:center; gap:12px; border:1px solid var(--hairline); border-radius:6px; padding:12px; }

/* archive / tag listings */
.issue-list{ margin-top:var(--s4); }
.issue-card{ padding-block:var(--s4); border-top:1px solid var(--hairline); }
.issue-card:first-child{ border-top:0; }
.issue-card .meta{ font-family:var(--body); font-size:0.9rem; letter-spacing:0.03em; color:var(--muted); margin:0 0 var(--s1); }
.issue-card h3{ margin:0 0 var(--s2); }
.issue-card h3 a{ color:var(--ink); text-decoration:none; }
.issue-card h3 a:hover{ color:var(--coral-press); }
.issue-card p{ margin:0; max-width:38rem; }
.pagination{ margin-top:var(--s5); display:flex; justify-content:space-between; gap:var(--s3); font-size:0.95rem; }

/* footer */
.site-foot{ padding-block:var(--s5); }
.site-foot .foot-wrap{ max-width:60rem; margin-inline:auto; padding-inline:var(--s3); }
.site-foot .tagline{ font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--ink); max-width:30rem; margin:0 0 var(--s4); }
.foot-cols{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5); justify-content:space-between; }
.foot-nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s1); }
.foot-nav a{ color:var(--ink); text-decoration:none; font-size:0.95rem; }
.foot-nav a:hover{ color:var(--green-deep); }
.foot-meta{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--hairline); color:var(--muted); font-size:0.85rem; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); justify-content:space-between; align-items:center; }
.foot-meta a{ color:var(--muted); }

@media (min-width:700px){
  body{ font-size:1.125rem; }
  section{ padding-block:var(--s6); }
  .hero, .page-head{ padding-block:var(--s7) var(--s6); }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* mascot */
.mascot{ position:fixed; z-index:5; right:clamp(8px,2.5vw,32px); bottom:clamp(10px,3vh,28px); left:auto; top:auto; width:clamp(64px,7vw,112px); height:auto; pointer-events:none; filter:drop-shadow(0 8px 16px rgba(46,58,56,0.22)); will-change:transform; transform-origin:50% 100%; }
@media (max-width:899px){ .mascot{ right:8px; bottom:12px; width:64px; } }

/* ambient audio toggle (opt-in, bottom-left so it clears the mascot) */
#bg-audio{ display:none; }
.audio-toggle{ position:fixed; z-index:6; left:clamp(8px,2.5vw,24px); bottom:clamp(10px,3vh,24px); width:40px; height:40px; border-radius:999px; border:1px solid var(--hairline); background:var(--cream); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; transition:color .18s ease, border-color .18s ease; }
.audio-toggle:hover{ color:var(--green-deep); border-color:var(--green); }
.audio-toggle.is-on{ color:var(--green); border-color:var(--green); }