/* VIVUM · Journal — light-default with OS-aware dark mode */
:root{
  --night:#F2EBDC;--dusk:#E9DFC9;--dusk-warm:#DECFAF;
  --porcelain:#241B0E;--porcelain-dim:#6E6350;
  --amber:#B8801F;--amber-bright:#D89A35;--amber-deep:#8A5E12;
  --line:rgba(36,27,14,.16);
  --font-display:'Fraunces',serif;--font-body:'Instrument Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);--pad-x:clamp(20px,6vw,88px);
}
/* Auto-flip to dark if user's OS is dark, only if no explicit theme set */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --night:#0D0B08;--dusk:#1A150D;--dusk-warm:#2E2414;
    --porcelain:#EFE7D8;--porcelain-dim:#9B937F;
    --amber:#E0A44A;--amber-bright:#F6CC85;--amber-deep:#9C6A18;
    --line:rgba(239,231,216,.12);
  }
}
/* Explicit user overrides via toggle */
html[data-theme="dark"]{
  --night:#0D0B08;--dusk:#1A150D;--dusk-warm:#2E2414;
  --porcelain:#EFE7D8;--porcelain-dim:#9B937F;
  --amber:#E0A44A;--amber-bright:#F6CC85;--amber-deep:#9C6A18;
  --line:rgba(239,231,216,.12);
}
html[data-theme="light"]{
  --night:#F2EBDC;--dusk:#E9DFC9;--dusk-warm:#DECFAF;
  --porcelain:#241B0E;--porcelain-dim:#6E6350;
  --amber:#B8801F;--amber-bright:#D89A35;--amber-deep:#8A5E12;
  --line:rgba(36,27,14,.16);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--night);color-scheme:light dark}
body{font-family:var(--font-body);background:var(--night);color:var(--porcelain);line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none;transition:color .2s}
a:hover{color:var(--amber-bright)}

/* Header */
.nav{position:fixed;inset:0 0 auto 0;z-index:95;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad-x);background:linear-gradient(180deg,var(--night) 0%,rgba(13,11,8,.85) 60%,transparent 100%);pointer-events:none}
.nav>*{pointer-events:auto}
.nav .logo{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.32em;color:var(--porcelain);text-decoration:none}
.nav .back{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--porcelain-dim);display:inline-flex;align-items:center;gap:8px}
.nav .back:hover{color:var(--amber-bright)}

/* Article */
main{max-width:720px;margin:0 auto;padding:clamp(120px,18vh,180px) var(--pad-x) clamp(80px,10vw,140px)}
.eyebrow{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin-bottom:22px;display:block}
h1{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;margin:0 0 clamp(24px,3vw,36px);text-wrap:balance}
.lead{font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5;color:var(--porcelain);margin-bottom:clamp(40px,6vw,64px);max-width:34em;text-wrap:balance;font-weight:300}
.meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--porcelain-dim);margin-bottom:clamp(56px,8vw,96px);padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap}
.meta b{color:var(--amber);font-weight:500;letter-spacing:.24em}

article p{margin:0 0 1.4em;font-size:1.05rem;color:var(--porcelain)}
article h2{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin:2.4em 0 .8em;color:var(--porcelain);text-wrap:balance}
article h3{font-family:var(--font-display);font-weight:300;font-size:clamp(1.2rem,1.8vw,1.5rem);margin:1.8em 0 .6em;color:var(--porcelain);text-wrap:balance}
article ul,article ol{margin:0 0 1.6em;padding-left:1.4em}
article li{margin-bottom:.5em;color:var(--porcelain)}
article strong{color:var(--porcelain);font-weight:500}
article em{font-style:italic;color:var(--amber-bright)}
article blockquote{margin:2em 0;padding:24px 28px;border-left:2px solid var(--amber);background:rgba(224,164,74,.05);font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--porcelain)}

.pullquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.35;color:var(--amber-bright);margin:2.4em 0;padding:0 clamp(20px,4vw,60px);text-align:center;text-wrap:balance}

.divider{height:1px;background:var(--line);margin:clamp(48px,6vw,80px) 0;border:0}
.divider-amber{height:1px;width:80px;background:var(--amber);margin:clamp(48px,6vw,72px) auto;border:0}

/* CTA in article */
.article-cta{margin:clamp(56px,8vw,96px) 0 0;padding:clamp(32px,4vw,48px);border:1px solid var(--amber);background:rgba(224,164,74,.06);border-radius:14px;text-align:center}
.article-cta .cta-eyebrow{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;display:block}
.article-cta h3{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 12px;color:var(--porcelain)}
.article-cta p{color:var(--porcelain-dim);font-size:.96rem;margin:0 0 24px;max-width:32em;margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;border:1px solid var(--amber);color:var(--amber);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s;border-radius:2px}
.btn:hover{background:var(--amber);color:var(--night)}
.btn::after{content:"→";transition:transform .3s}
.btn:hover::after{transform:translateX(4px)}

/* Related articles */
.related{margin:clamp(80px,10vw,140px) 0 0;padding-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
.related .r-title{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin-bottom:24px}
.related .r-links{display:grid;gap:16px}
.related .r-link{padding:20px 0;border-bottom:1px solid var(--line);color:var(--porcelain);font-family:var(--font-display);font-style:italic;font-size:1.15rem;transition:color .3s;display:flex;justify-content:space-between;align-items:center;gap:20px}
.related .r-link:hover{color:var(--amber-bright)}
.related .r-link:last-child{border-bottom:0}
.related .r-link::after{content:"→";font-family:var(--font-mono);font-style:normal;color:var(--amber);opacity:.6;transition:opacity .3s,transform .3s}
.related .r-link:hover::after{opacity:1;transform:translateX(4px)}

/* Footer */
footer{padding:40px var(--pad-x) 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--porcelain-dim)}
footer a{color:var(--porcelain-dim)}
footer a:hover{color:var(--amber)}
footer .foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* Journal index */
.journal-index{max-width:920px;margin:0 auto;padding:clamp(120px,18vh,180px) var(--pad-x) clamp(80px,10vw,140px)}
.journal-index .ji-header{margin-bottom:clamp(56px,8vw,96px)}
.journal-index h1{font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:20px}
.journal-index .ji-sub{font-family:var(--font-display);font-style:italic;color:var(--porcelain-dim);font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:36em;line-height:1.5}
.ji-list{display:grid;gap:clamp(28px,4vw,44px)}
.ji-card{display:block;padding:clamp(28px,4vw,40px);border:1px solid var(--line);border-radius:14px;transition:border-color .3s,transform .3s,background .3s;background:rgba(239,231,216,.02)}
.ji-card:hover{border-color:var(--amber);background:rgba(224,164,74,.04);transform:translateY(-3px)}
.ji-card .ji-eyebrow{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;display:block}
.ji-card h2{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--porcelain);margin:0 0 14px;line-height:1.15;text-wrap:balance}
.ji-card p{color:var(--porcelain-dim);font-size:1rem;margin:0 0 18px;max-width:34em}
.ji-card .ji-more{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:10px}
.ji-card .ji-more::after{content:"→";transition:transform .3s}
.ji-card:hover .ji-more::after{transform:translateX(4px)}

@media(max-width:640px){
  .nav{padding:18px 20px}
  main,.journal-index{padding-top:100px}
  article p,article li{font-size:.98rem}
}
</content>