/* ============================================================
   EFN — Everything from Nothing  |  Global Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* The site is dark-only. Declaring the scheme makes the browser paint a
   dark default canvas (and dark form controls/scrollbars) from the very
   first frame — killing the white flash that otherwise appears between
   page loads before this stylesheet is applied. The matching
   <meta name="color-scheme" content="dark"> in each page head ensures it
   takes effect even before this file downloads. */
:root { color-scheme: dark; }

:root {
  --gold:      #c9a84c;
  --gold-lt:   #e8c97a;
  --white:     #f5f2ee;
  --dim:       rgba(245,242,238,0.65);
  --bg:        #0a0c12;
  --surface:   #111420;
  --border:    rgba(201,168,76,0.18);
  --text:      #ccc8c0;
  --radius:    2px;
  --max-w:     1200px;
}

/* Reserve the scrollbar gutter always, so the viewport width is identical
   whether or not a page scrolls. Without this, pages that grow taller than
   the viewport after their JS injects content gain a scrollbar on load,
   which narrows the viewport and shifts the fixed, right-aligned nav links
   inward — read as the menu "sliding in" from the upper-right each load. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; font-weight:300; color:var(--white); line-height:1.15; }
h1 { font-size:clamp(2.4rem,6vw,5rem); }
/* Article hero titles: kept a constant 1.25x the h2 body-heading size
   (h2 is clamp(1.8rem,4vw,3rem)) so the title always reads larger than
   the section headings, without touching h2/h3. The hero title area is
   allowed to run wider than the 740px article body so long titles have
   room; text-wrap:balance evens the line breaks. Authors can force a
   specific break with `||` in the .mdp title. */
.article-hero h1 { font-size:clamp(2.25rem,5vw,3.75rem); text-wrap:balance; line-height:1.2; }
.article-hero .article-hero__content { max-width:1040px; }
h2 { font-size:clamp(1.8rem,4vw,3rem); }
h3 { font-size:clamp(1.3rem,2.5vw,1.9rem); }
h4 { font-size:1.2rem; }
p  { margin-bottom:1.2rem; }
a  { color:var(--gold); text-decoration:none; transition:color .25s; }
a:hover { color:var(--gold-lt); }
em { font-style:italic; color:var(--gold-lt); }
strong { color:var(--white); font-weight:600; }

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 2rem; }
.section    { padding:6rem 0; }
.section--sm { padding:3rem 0; }

/* ── SHARED NAV ─────────────────────────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 4rem;
  background:rgba(10,12,18,0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:padding .3s;
}
.site-nav.scrolled { padding:.9rem 4rem; }
.nav-logo {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:1.15rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.nav-links { display:flex; gap:2.2rem; list-style:none; }
.nav-links a {
  font-size:.7rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); text-decoration:none; transition:color .25s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold-lt); }

/* Mobile menu toggle (hamburger) — hidden on desktop, revealed < 768px.
   The three bars morph into an X when .site-nav is .open. */
.nav-toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span {
  display:block; width:22px; height:1.5px; background:var(--gold);
  transition:transform .3s ease, opacity .2s ease;
}
.site-nav.open .nav-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2) { opacity:0; }
.site-nav.open .nav-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:.8rem 2.2rem;
  font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius); transition:all .3s; cursor:pointer; border:none;
}
.btn--primary { background:var(--gold); color:#0a0c12; border:1px solid var(--gold); }
.btn--primary:hover { background:var(--gold-lt); border-color:var(--gold-lt); transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,.35); color:#0a0c12; }
.btn--ghost { background:transparent; color:var(--white); border:1px solid rgba(245,242,238,.35); }
.btn--ghost:hover { border-color:var(--gold); color:var(--gold-lt); transform:translateY(-2px); }

/* ── SECTION LABEL ──────────────────────────────────────── */
.section-label {
  font-size:.65rem; font-weight:500; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1rem;
}
.section-rule {
  width:48px; height:1px; background:var(--gold); margin:0 auto 1.4rem;
}
.section-rule--left { margin:0 0 1.4rem; }

/* Shared hero tagline — the uppercase, letter-spaced kicker used on the
   landing hero ("A personal journal …") and the topic-page heroes. Size
   and placement are set by the caller; this is just the typography. */
.hero-tagline {
  font-weight:300; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim);
}

/* ── DIVIDER ────────────────────────────────────────────── */
.divider {
  display:flex; align-items:center; gap:1rem; margin:2.5rem 0;
}
.divider span { display:block; flex:1; height:1px; background:var(--border); }
.divider i { display:block; width:5px; height:5px; border:1px solid var(--gold); transform:rotate(45deg); }

/* ── POST CARD ──────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.5); }
.card__img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.card__body { padding:1.6rem; }
.card__meta { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.card__title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; color:var(--white); margin-bottom:.8rem; line-height:1.25; }
.card__excerpt { font-size:.85rem; color:var(--text); margin-bottom:1.2rem; line-height:1.65; }
.card__link { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.card__link:hover { color:var(--gold-lt); }

/* ── GRID LAYOUTS ───────────────────────────────────────── */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }

/* ── ARTICLE BODY ───────────────────────────────────────── */
.article-body { max-width:740px; margin:0 auto; }
.article-body img { display:block; max-width:100%; max-height:80vh; width:auto; height:auto; margin:2rem auto; border-radius:6px; }
.article-body h2 { margin:2.5rem 0 1rem; }
.article-body h3 { margin:2rem 0 .8rem; }
.article-body p  { font-size:1rem; line-height:1.85; color:var(--text); }
.article-body blockquote {
  border-left:2px solid var(--gold); padding:.8rem 1.5rem;
  margin:2rem 0; color:var(--dim); font-style:italic; font-size:1.05rem;
}
/* mdp renders each source line of a blockquote as its own <p>, which
   otherwise stack with paragraph margins and read as double-spaced.
   Flow them inline so a wrapped quote reflows into one continuous
   paragraph. (Hand-authored single-paragraph blockquotes are unaffected.) */
.article-body blockquote p { display:inline; color:inherit; }
.article-body code {
  background:#1a1e2e; padding:.15rem .4rem; border-radius:3px;
  font-family:monospace; font-size:.88rem; color:#7dd3c8;
}
.article-body pre {
  background:#1a1e2e; padding:1.5rem; border-radius:4px;
  overflow-x:auto; margin:1.5rem 0; border:1px solid var(--border);
}
.article-body pre code { background:none; padding:0; }
.article-body ul, .article-body ol { padding-left:1.5rem; margin-bottom:1.2rem; }
.article-body li { margin-bottom:.4rem; }

/* ── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  position:relative; padding:10rem 0 5rem;
  background:linear-gradient(to bottom, rgba(10,12,18,.95) 0%, rgba(10,12,18,.7) 100%);
  overflow:hidden;
}
.page-hero__bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.35); z-index:-1;
}
.page-hero__content { text-align:center; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  border-top:1px solid var(--border); padding:3rem 0;
  text-align:center; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(245,242,238,.3);
}
.site-footer a { color:rgba(245,242,238,.3); }
.site-footer a:hover { color:var(--gold); }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .9s ease both; }
.delay-1 { animation-delay:.2s; }
.delay-2 { animation-delay:.4s; }
.delay-3 { animation-delay:.6s; }
.delay-4 { animation-delay:.8s; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .site-nav { padding:1.2rem 1.5rem; }
  .site-nav.scrolled { padding:.8rem 1.5rem; }
  .nav-toggle { display:flex; }
  /* Collapse the links into a dropdown anchored to the fixed bar; shown
     only when the hamburger toggles .site-nav.open. */
  .nav-links {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(10,12,18,0.97); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .site-nav.open .nav-links { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a {
    display:block; padding:1.1rem 1.5rem; text-align:right;
    border-top:1px solid var(--border);
  }
  .nav-links a:hover, .nav-links a.active { background:rgba(201,168,76,.06); }
  .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; }
  .container { padding:0 1.2rem; }
  .section { padding:4rem 0; }
}