/* =========================================================
   The Stardust Journal Press
   A celestial, reading-first theme for Ghost
   ========================================================= */

:root{
    --paper:#ece9e2;
    --paper-2:#e4e0d6;
    --ink:#16140f;
    --ink-soft:#46423a;
    --muted:#7d786b;
    --rule:#c8c2b3;
    --dusk:#33405b;
    --dusk-deep:#26314a;
    --gilt:#9b7c40;
    --night:#13151d;
    --star:#e9e4d6;

    --accent:var(--dusk);

    --serif:var(--gh-font-body, 'Spectral', Georgia, 'Times New Roman', serif);
    --display:var(--gh-font-heading, 'Cormorant Garamond', Georgia, serif);

    --col:660px;
    --measure:34rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:400;
    font-size:19px;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.site{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}

.wrap{max-width:var(--col);margin:0 auto;padding:0 26px}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
    font-family:var(--serif);
    text-transform:uppercase;
    letter-spacing:.28em;
    font-size:.66rem;
    font-weight:500;
    color:var(--muted);
}
.eyebrow-accent{color:var(--gilt)}

/* ---------- celestial divider (signature) ---------- */
.cdiv{display:block;margin:46px auto;width:230px;height:22px;opacity:.95}
.cdiv line{stroke:var(--rule);stroke-width:1}
.cdiv .dot{fill:var(--rule)}
.cdiv .star{fill:var(--ink)}
@media (prefers-reduced-motion:no-preference){
    .cdiv .star{animation:twinkle 5.5s ease-in-out infinite}
}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}

/* ============ MASTHEAD ============ */
.masthead{padding:54px 0 8px;text-align:center}
.emblem-link{display:inline-block}
.emblem{
    width:148px;height:148px;margin:0 auto 22px;border-radius:50%;
    opacity:0;transform:translateY(8px);animation:rise .9s ease .05s forwards;
}
.wordmark{
    font-family:var(--display);font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;line-height:1.1;
    font-size:2.5rem;margin:0;
    opacity:0;transform:translateY(8px);animation:rise .9s ease .18s forwards;
}
.wordmark a{color:var(--ink)}
.tagline{
    font-family:var(--display);font-style:italic;font-size:1.28rem;color:var(--ink-soft);
    margin:18px auto 0;max-width:30rem;
    opacity:0;transform:translateY(8px);animation:rise .9s ease .3s forwards;
}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
    .emblem,.wordmark,.tagline{animation:none;opacity:1;transform:none}
}

.primary{
    margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:15px 0;
}
.primary a{
    font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;
    font-size:.66rem;color:var(--ink-soft);padding-bottom:2px;
    border-bottom:1px solid transparent;transition:border-color .25s,color .25s;
}
.primary a:hover,.primary a:focus-visible,.primary a[aria-current="page"]{color:var(--ink);border-color:var(--gilt)}

/* ============ LEAD ESSAY ============ */
.lead{text-align:center;padding:50px 0 6px}
.lead-title{
    font-family:var(--display);font-weight:500;font-size:3rem;line-height:1.06;
    letter-spacing:.005em;margin:.5rem 0 .4rem;
}
.lead-title a{color:var(--ink);transition:color .2s}
.lead-title a:hover{color:var(--accent)}
.lead-dek{font-size:1.12rem;color:var(--ink-soft);max-width:30rem;margin:0 auto 1.1rem}
.meta{font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;color:var(--muted)}
.meta b{font-weight:500;color:var(--ink-soft)}
.begin{
    display:inline-block;margin-top:1.5rem;
    font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--accent);
    border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .25s,color .25s;
}
.begin:hover,.begin:focus-visible{color:var(--ink);border-color:var(--gilt)}

/* ============ THE RIVER ============ */
.river-head{text-align:center;margin:8px 0 2px}
.entry{padding:30px 0;border-bottom:1px solid var(--rule)}
.entry:last-of-type{border-bottom:none}
.entry .eyebrow{display:block;margin-bottom:.5rem}
.entry-title{font-family:var(--display);font-weight:500;font-size:1.92rem;line-height:1.1;margin:0 0 .35rem}
.entry-title a{color:var(--ink);transition:color .2s}
.entry-title a:hover{color:var(--accent)}
.entry-dek{color:var(--ink-soft);font-size:1.04rem;margin:0 0 .6rem}
.entry .meta{display:block}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:26px;padding:46px 0 8px}
.pagination a,.pagination .page-number{
    font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;color:var(--muted);
    border-bottom:1px solid transparent;padding-bottom:2px;transition:color .25s,border-color .25s;
}
.pagination a:hover{color:var(--ink);border-color:var(--gilt)}

/* ============ NIGHT BAND (newsletter) ============ */
.night{
    position:relative;overflow:hidden;background:var(--night);color:var(--star);
    margin:62px 0 0;padding:64px 26px 70px;text-align:center;
}
.night::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
    background-image:
        radial-gradient(1.1px 1.1px at 12% 22%, #cfd6e6 99%, transparent),
        radial-gradient(1px 1px at 28% 68%, #b9c2d6 99%, transparent),
        radial-gradient(1.3px 1.3px at 47% 30%, #e7ecf6 99%, transparent),
        radial-gradient(1px 1px at 63% 75%, #aab4cc 99%, transparent),
        radial-gradient(1.2px 1.2px at 78% 40%, #d4dbec 99%, transparent),
        radial-gradient(1px 1px at 88% 64%, #b3bdd6 99%, transparent),
        radial-gradient(1px 1px at 38% 86%, #c7cee0 99%, transparent),
        radial-gradient(1px 1px at 70% 14%, #c7cee0 99%, transparent);
}
.night > *{position:relative}
.night .eyebrow{color:#a9b3cc}
.night h3{font-family:var(--display);font-weight:500;font-size:2.3rem;letter-spacing:.01em;margin:.4rem 0 .5rem}
.night p{color:#c2c8d6;max-width:30rem;margin:0 auto 1.6rem;font-size:1.05rem}

.signup{max-width:27rem;margin:0 auto}
.signup-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.signup-email{
    flex:1 1 14rem;min-width:0;background:transparent;border:none;border-bottom:1px solid #4a5269;
    color:var(--star);font-family:var(--serif);font-size:1rem;padding:8px 2px;outline:none;
}
.signup-email::placeholder{color:#7882a0}
.signup-email:focus{border-color:var(--gilt)}
.signup-btn{
    position:relative;font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;
    font-size:.66rem;color:var(--night);background:var(--star);border:none;padding:11px 22px;cursor:pointer;
    transition:background .25s,color .25s;
}
.signup-btn:hover,.signup-btn:focus-visible{background:var(--gilt);color:#fff}
.btn-loader{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
.btn-loader .loader{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* member form states (Ghost toggles .loading / .success / .error on the form) */
.signup .message{display:none;margin:1rem auto 0;font-size:.92rem;max-width:24rem}
.signup .message-success{color:#bfe4c4}
.signup .message-error{color:#e6b4b0}
.signup.loading .btn-label{visibility:hidden}
.signup.loading .btn-loader{display:flex}
.signup.success .message-success{display:block}
.signup.success .signup-row{display:none}
.signup.error .message-error{display:block}

/* ============ FOOTER ============ */
.site-footer{flex-shrink:0;padding:46px 0 60px;text-align:center}
.support{font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--ink-soft);margin:0 0 1.4rem}
.support .gstar{color:var(--gilt);font-style:normal;margin:0 .4em}
.support-link{border-bottom:1px solid var(--rule);transition:border-color .25s,color .25s}
.support-link:hover{color:var(--ink);border-color:var(--gilt)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-bottom:1.4rem}
.foot-nav a{
    font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--muted);
    border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--ink);border-color:var(--gilt)}
.colophon{font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ============ READING VIEW ============ */
.reading{padding:48px 0 0}
.back{
    font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--muted);
    display:inline-block;margin-bottom:34px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.back:hover,.back:focus-visible{color:var(--ink);border-color:var(--gilt)}
.article-head{text-align:center;margin-bottom:8px}
.article-title{font-family:var(--display);font-weight:500;font-size:3.1rem;line-height:1.05;margin:.55rem 0 .5rem}
.article-dek{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--ink-soft);max-width:30rem;margin:0 auto 1rem}
.byline{font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--muted)}

.feature{margin:30px auto 0;max-width:var(--col)}
.feature img{width:100%}
.feature figcaption{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.6rem;font-style:italic}

/* ---- post content (Ghost gh-content) ---- */
.body{max-width:var(--measure);margin:0 auto;padding:14px 0 0}
.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote{margin:0 0 1.35rem}
.gh-content p{margin:0 0 1.35rem}
.dropcap > p:first-of-type::first-letter,
.dropcap .gh-content > p:first-of-type::first-letter{
    font-family:var(--display);font-weight:600;color:var(--ink);
    float:left;font-size:4.4rem;line-height:.72;padding:.06em .12em 0 0;
}
.gh-content a{color:var(--accent);border-bottom:1px solid var(--rule);transition:border-color .2s}
.gh-content a:hover{border-color:var(--accent)}
.gh-content h2,.gh-content h3,.gh-content h4{font-family:var(--display);font-weight:600;line-height:1.15;margin:2.2rem 0 .8rem}
.gh-content h2{font-size:1.9rem}
.gh-content h3{font-size:1.5rem}
.gh-content ul,.gh-content ol{padding-left:1.3rem}
.gh-content li{margin:0 0 .5rem}
.gh-content img,.gh-content .kg-card{margin:2rem auto;border-radius:0}
.gh-content figcaption{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.5rem;font-style:italic}
.gh-content hr{border:none;height:1px;background:var(--rule);margin:2.4rem 0}

/* Koenig editor card widths */
.gh-content .kg-width-wide{
    position:relative;width:75vw;min-width:100%;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    max-width:none;
}
.gh-content .kg-width-wide > img,
.gh-content .kg-width-wide > figure{margin-left:auto;margin-right:auto;max-width:1040px}
.gh-content .kg-width-full{
    position:relative;width:100vw;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    max-width:100vw;
}
.gh-content .kg-width-full > img{width:100%}
.gh-content .kg-card + .kg-card{margin-top:2rem}

/* blockquotes become pull quotes */
.gh-content blockquote{
    font-family:var(--display);font-style:italic;font-weight:500;font-size:1.7rem;line-height:1.3;
    color:var(--accent);text-align:center;max-width:28rem;margin:2.4rem auto;padding:0;border:none;
}
.gh-content blockquote::before,.gh-content blockquote::after{
    content:"";display:block;width:42px;height:1px;background:var(--rule);margin:14px auto;
}
.gh-content blockquote p{margin:0}

.endmark{display:block;margin:40px auto 8px;width:34px;height:34px}
.endmark .moon{fill:var(--ink)}
.endmark .spark{fill:var(--gilt)}

/* related ("constellations") */
.related{margin-top:18px}
.related .eyebrow{display:block;text-align:center;color:var(--muted);margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.rel{border-top:1px solid var(--rule);padding-top:14px}
.rel .eyebrow{display:block;margin-bottom:.3rem;text-align:left}
.rel h4{font-family:var(--display);font-weight:500;font-size:1.32rem;line-height:1.12;margin:0}
.rel h4 a{color:var(--ink);transition:color .2s}
.rel h4 a:hover{color:var(--accent)}

/* ---- members / account pages, errors ---- */
.error-content{text-align:center;padding:80px 0}
.error-code{font-family:var(--display);font-size:5rem;color:var(--rule);line-height:1;margin:0}
.error-message{font-family:var(--display);font-size:1.6rem;color:var(--ink-soft);margin:.5rem 0 1.5rem}

@media (max-width:560px){
    body{font-size:18px}
    .wordmark{font-size:2rem}
    .lead-title{font-size:2.3rem}
    .article-title{font-size:2.3rem}
    .related-grid{grid-template-columns:1fr;gap:18px}
    .primary{gap:6px 18px}
    .night{padding:52px 22px 56px}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}