:root{
  --ink:#18140f; --ink-soft:#2d271e; --ink-deep:#0f0c08;
  --paper:#f2f4f1; --amber:#8daba8; --amber-deep:#6e8d89;
  --sage:#3d5e38; --clay:#7a3728; --slate:#2f4a60;
  --rule-light:rgba(246,241,231,.16);
  --ease:cubic-bezier(.65,.05,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:'Literata',Georgia,serif; color:var(--paper); line-height:1.65; font-size:16px;
  background:
    radial-gradient(42% 48% at 18% 22%, rgba(141,171,168,.45), transparent 62%),
    radial-gradient(46% 50% at 82% 86%, rgba(122,55,40,.30), transparent 62%),
    radial-gradient(50% 55% at 30% 78%, rgba(47,74,96,.38), transparent 64%),
    linear-gradient(160deg,#33524f 0%, #2c4456 55%, #2f4a60 100%);
  background-attachment:fixed; min-height:100vh;
}
::selection{ background:var(--amber); color:var(--ink-deep); }
a{ color:inherit; }

/* top bar */
.abar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem min(6vw,3rem); background:rgba(30,46,56,.55); backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(246,241,231,.12); }
.abar .brand{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:1.6rem; letter-spacing:.24em; color:var(--paper); }
.abar .brand b{ font-weight:400; }
.abar .back{ font-family:'DM Mono',monospace; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  border:1px solid var(--rule-light); border-radius:40px; padding:.55rem 1.1rem; transition:.3s var(--ease); text-decoration:none; }
.abar .back:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.read-prog{ position:sticky; top:0; height:3px; width:0; background:var(--amber); z-index:11; }

/* article */
.article{ max-width:740px; margin:0 auto; padding:3.5rem min(6vw,1.5rem) 2rem; }
.article .a-cat{ font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.article h1{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.1rem,5.5vw,3.4rem); line-height:1.08; letter-spacing:-.005em; margin:1rem 0 1.2rem; }
.article .a-meta{ font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.1em; color:rgba(246,241,231,.55); padding-bottom:1.6rem; margin-bottom:2rem; border-bottom:1px solid var(--rule-light); }
.article .a-lead{ font-family:'Cormorant Garamond',serif; font-weight:400; font-style:italic; font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.5; color:rgba(246,241,231,.94); margin-bottom:2rem; }
.article h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.2; margin:2.6rem 0 1rem; }
.article p{ font-size:1.1rem; line-height:1.85; color:rgba(246,241,231,.88); margin-bottom:1.3rem; }
.article ul{ margin:0 0 1.5rem 1.2rem; }
.article li{ font-size:1.08rem; line-height:1.8; color:rgba(246,241,231,.88); margin-bottom:.7rem; }
.article strong{ color:#fff; font-weight:500; }
.article em{ font-style:italic; }
.article blockquote{ margin:2rem 0; padding-left:1.4rem; border-left:2px solid var(--amber); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.4rem; line-height:1.5; color:var(--amber); }
.article .takeaway{ margin:2.4rem 0; padding:1.8rem; border:1px solid var(--rule-light); border-radius:12px; background:rgba(246,241,231,.04); }
.article .takeaway h4{ font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem; }
.article .term{ color:var(--amber); border-bottom:1px dashed rgba(141,171,168,.6); cursor:help; }
.article .term:hover{ color:#fff; }
.term-pop{ position:fixed; z-index:50; width:290px; background:#1a2a33; border:1px solid var(--amber); border-radius:10px;
  padding:1rem 1.1rem; font-size:.92rem; line-height:1.55; color:rgba(246,241,231,.9); box-shadow:0 16px 50px rgba(0,0,0,.4); display:none; }
.term-pop .tp-word{ font-family:'DM Mono',monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:.45rem; }

/* quiz */
.quiz{ margin-top:3.5rem; padding-top:2.4rem; border-top:1px solid var(--rule-light); }
.quiz h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.6rem; }
.quiz .quiz-sub{ color:rgba(246,241,231,.7); margin-bottom:2rem; }
.quiz .q{ margin-bottom:1.8rem; }
.quiz .q-text{ font-size:1.06rem; color:var(--paper); margin-bottom:.9rem; font-weight:500; }
.quiz .opts{ display:flex; flex-wrap:wrap; gap:.55rem; }
.quiz .opt{ font-family:'DM Mono',monospace; font-size:.74rem; padding:.6rem 1rem; border:1px solid var(--rule-light); border-radius:40px;
  background:transparent; color:rgba(246,241,231,.8); cursor:pointer; transition:.25s var(--ease); }
.quiz .opt:hover{ border-color:var(--amber); color:var(--paper); }
.quiz .opt.sel{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.quiz-btn{ margin-top:.6rem; font-family:'DM Mono',monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.8rem; border-radius:46px; border:1px solid var(--amber); background:var(--amber); color:var(--ink-deep); cursor:pointer; transition:.3s var(--ease); }
.quiz-btn:hover{ background:transparent; color:var(--paper); }
.quiz-result{ display:none; margin-top:2rem; }
.quiz-result.revealed{ display:block; }
.quiz-result .band{ display:none; padding:1.8rem; border-radius:12px; background:rgba(141,171,168,.12); border:1px solid var(--rule-light); }
.quiz-result .band.show{ display:block; }
.quiz-result .band h4{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.4rem; color:var(--amber); margin-bottom:.6rem; }
.quiz-result .band p{ margin-bottom:1rem; }
.quiz-result .band .q-cta{ font-family:'DM Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }

/* end CTA + related */
.aend{ max-width:740px; margin:1rem auto 0; padding:0 min(6vw,1.5rem) 4rem; }
.aend .cta-card{ border:1px solid var(--rule-light); border-radius:16px; padding:2.4rem; text-align:center; background:rgba(246,241,231,.04); }
.aend .cta-card h3{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:1.2rem; }
.aend .btn{ display:inline-block; font-family:'DM Mono',monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:46px; border:1px solid var(--amber); background:var(--amber); color:var(--ink-deep); text-decoration:none; transition:.3s var(--ease); }
.aend .btn:hover{ background:transparent; color:var(--paper); }
.aend .more{ margin-top:2.6rem; }
.aend .more .lbl{ font-family:'DM Mono',monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.aend .more ul{ list-style:none; margin-top:1rem; display:grid; gap:.6rem; }
.aend .more a{ color:rgba(246,241,231,.85); text-decoration:none; border-bottom:1px solid transparent; }
.aend .more a:hover{ color:#fff; border-color:var(--amber); }

footer.afoot{ background:rgba(15,24,30,.35); border-top:1px solid var(--rule-light); padding:2.2rem min(6vw,3rem);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,231,.6); }
footer.afoot a{ text-decoration:none; }
footer.afoot a:hover{ color:var(--amber); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

/* journal landing */
.j-hero{ max-width:900px; margin:0 auto; padding:4rem min(6vw,1.5rem) 1rem; text-align:center; }
.j-hero .a-cat{ font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.j-hero h1{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.4rem,6vw,4rem); margin-top:1rem; }
.j-hero p{ max-width:60ch; margin:1.2rem auto 0; color:rgba(246,241,231,.8); }
.j-cat{ max-width:1000px; margin:3rem auto 0; padding:0 min(6vw,1.5rem); }
.j-cat h2{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(1.6rem,3.5vw,2.3rem); text-align:center; padding-bottom:1rem; border-bottom:1px solid var(--rule-light); margin-bottom:1.8rem; }
.j-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.j-card{ border:1px solid var(--rule-light); border-radius:14px; padding:2rem; background:linear-gradient(165deg, rgba(246,241,231,.06), rgba(246,241,231,.02));
  display:flex; flex-direction:column; gap:1rem; text-decoration:none; transition:transform .4s var(--ease), border-color .4s var(--ease); min-height:260px; }
.j-card:hover{ border-color:var(--amber); transform:translateY(-4px); }
.j-card .tag{ font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.j-card h3{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.2; color:var(--paper); }
.j-card p{ color:rgba(246,241,231,.74); font-size:.98rem; line-height:1.6; flex:1; }
.j-card .rd{ font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.12em; color:rgba(246,241,231,.5); }
@media (max-width:900px){ .j-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
@media (max-width:640px){ .aend .more ul{ } }