/* New Creation, Old Habits: shared brand layer (2026-11-13).
   Loaded last on every page, so it refines each page's own styles without rewriting them.
   Idea: morning light on a plaster wall. Warm paper and plaster for reading, a deep espresso band for contrast,
   and gold for every main action (the same gold as the tally mark on the journal cover). Motion is gentle and
   switched off for anyone who asks their device for reduced motion. */
:root{
  --paper:#fbf6ee; --plaster:#efe2cb; --sand:#e4d0ae; --line:#d9c6a5;
  --ink:#1d1a16; --ink2:#3a332b; --muted:#6c5f50;
  --coat:#7a4a24; --coat2:#5e3818;
  --espresso:#22170f; --espresso2:#352419;
  --gold:#c99a43; --gold2:#a9782b; --goldlight:#ecd39c;
  --focus:#c99a43;
  --radius:14px;
  --shadow:0 1px 2px rgba(60,38,18,.06),0 8px 24px rgba(60,38,18,.08);
  --shadow-lift:0 2px 4px rgba(60,38,18,.08),0 16px 36px rgba(60,38,18,.14);
}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(1200px 700px at 88% -120px,rgba(255,244,214,.75),rgba(255,244,214,0) 60%),
  linear-gradient(180deg,var(--plaster) 0%,#f3e8d5 40%,var(--plaster) 100%) !important;
  color:var(--ink)}
::selection{background:var(--goldlight);color:var(--ink)}
a{color:var(--coat);text-decoration-color:rgba(122,74,36,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--coat)}
:focus-visible{outline:3px solid var(--focus) !important;outline-offset:3px}

/* headings: a short gold rule under every section title */
main h2{position:relative;padding-bottom:12px;letter-spacing:-.01em}
main h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.dark h2::after,.band-dark h2::after{background:var(--goldlight)}
.eyebrow{color:var(--coat) !important;letter-spacing:.28em}

/* buttons: gold primary, outline secondary */
.btn{border-radius:12px !important;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;box-shadow:var(--shadow)}
.btn:not(.alt):not(.ghost){background:linear-gradient(180deg,#d6a955,var(--gold) 55%,var(--gold2)) !important;color:#1b130b !important;border:0 !important;text-shadow:0 1px 0 rgba(255,235,190,.35)}
.btn:not(.alt):not(.ghost):hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn.alt,.btn.ghost,.ghost{background:transparent !important;color:var(--coat2) !important;border:1.5px solid rgba(122,74,36,.55) !important;box-shadow:none}
.btn.alt:hover,.ghost:hover{background:rgba(201,154,67,.12) !important}
.dark .btn:not(.alt):not(.ghost){box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* the dark band: espresso with a warm glow and a thin gold edge */
.dark,.band-dark{background:radial-gradient(900px 400px at 85% 0%,rgba(201,154,67,.18),rgba(201,154,67,0) 60%),linear-gradient(180deg,var(--espresso2),var(--espresso)) !important;
  color:#f4ead9 !important;border-radius:20px !important;box-shadow:0 20px 50px rgba(34,23,15,.28),inset 0 0 0 1px rgba(236,211,156,.18)}
.dark a,.band-dark a{color:var(--goldlight)}

/* cards: paper, soft shadow, rounded */
.part,.pack > *,.faq details,.box,.opt,.get li,.prof,.area,.tools > *,.card{border-radius:var(--radius) !important}
.part,.faq details,.box,.prof{background:var(--paper) !important;box-shadow:var(--shadow);border:1px solid rgba(217,198,165,.6) !important}
.parts{gap:14px !important}
.part h3{color:var(--coat)}
.faq details{padding:14px 18px !important;margin:0 0 10px !important}
.faq summary{cursor:pointer}
blockquote{border-left:3px solid var(--gold) !important;background:rgba(255,250,240,.7);border-radius:0 12px 12px 0;padding:14px 18px !important}

/* lists of promises get gold markers */
ul.list li::marker{color:var(--gold2)}
ul.list strong{color:var(--ink)}

/* quiz: options feel tappable, the chosen one glows gold */
.opt{background:var(--paper) !important;border:1.5px solid var(--line) !important;box-shadow:0 1px 2px rgba(60,38,18,.05);transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.opt:hover{border-color:var(--gold) !important;transform:translateY(-1px)}
.opt.sel,.opt.on{background:linear-gradient(180deg,#fff7e6,#f8e8c6) !important;border-color:var(--gold2) !important}
.bar > *,.strack > *{background:linear-gradient(90deg,var(--gold),var(--coat)) !important}

/* section bands on long pages (added by brand.js): alternate paper and plaster, full width */
.band{margin-inline:calc(50% - 50vw);padding:56px calc(50vw - 50%) 48px;position:relative}
.band.alt-bg{background:linear-gradient(180deg,rgba(251,246,238,.85),rgba(251,246,238,.55))}
.band + .band{border-top:1px solid rgba(217,198,165,.5)}
@media (max-width:640px){.band{padding-top:40px;padding-bottom:34px}}

/* gentle reveal on scroll (only when JS adds .rv) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn{transition:none}html{scroll-behavior:auto}}

/* sticky bar matches the brand */
.stickycta{background:rgba(34,23,15,.94) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(236,211,156,.25)}
footer{color:var(--muted)}