/* ============================================================
   ALOHA JACQUELINE — DESIGN SYSTEM  (v1 · July 2026)
   The standard look for alohajacqueline.com, Soul Poetry Cafe
   pages, and all related pages.

   HOW TO USE
   1. Put this file next to your HTML page (or in /css/).
   2. In the page <head>:
        <link rel="stylesheet" href="aloha.css">
        + the two Google Fonts links (see template.html)
   3. Set <html data-theme="forest"> (dark) or "sagelight" (light).
   4. Build pages from the components below — every class here
      matches the homepage concept (Living Landscape v6).

   VOICE RULES BAKED IN
   - Serif (Cormorant Garamond) = soul voice: headings, italics, creed.
   - Sans (Jost, light) = body and UI.
   - Gold = invitation. Green = life. Never red-orange.
   ============================================================ */

/* ---------- THEMES ---------- */
[data-theme="forest"]{           /* Deep Forest — night garden */
  --bg:#0e1712; --bg2:#13201a; --panel:#182720;
  --ink:#eef3ea; --soft:#dce8d8; --dim:#9db3a0;
  --g1:#4e8a63; --g2:#7fb08b; --g3:#a9cbaf;
  --bark:#57493a; --bark2:#3d332a;
  --accent:#d9b36a; --accent2:#e8cb8f; --bloom:#a77e93;
  --sunrise:#e8c05c;
  --line:rgba(127,176,139,.25);
}
[data-theme="sagelight"]{        /* Sage Daylight — morning garden */
  --bg:#eef0e4; --bg2:#e5e9d8; --panel:#f5f6ec;
  --ink:#22331f; --soft:#33472f; --dim:#5f7358;
  --g1:#4c7a4f; --g2:#6f9a6a; --g3:#93b58c;
  --bark:#7a6a52; --bark2:#5d5040;
  --accent:#a4762f; --accent2:#8a6226; --bloom:#7d6b8f;
  --sunrise:#d8b04e;
  --line:rgba(76,122,79,.3);
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;font-weight:300;line-height:1.7;
  overflow-x:hidden;transition:background .8s ease,color .8s ease;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;}
::selection{background:var(--accent);color:var(--bg);}

/* scroll-reveal: add class "reveal"; aloha.js (or the inline
   IntersectionObserver snippet in template.html) adds "on". */
.reveal{opacity:1;transform:none;}   /* visible even without JS */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s ease;}
html.js .reveal.on{opacity:1;transform:none;}
.fadeSwap{animation:fadeSwap .5s ease;}
@keyframes fadeSwap{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* scroll-reveal, directional: same observer, class "reveal-left"/"reveal-right" */
.reveal-left,.reveal-right{opacity:1;transform:none;}
html.js .reveal-left{opacity:0;transform:translateX(-44px);transition:opacity 1s ease,transform 1s ease;}
html.js .reveal-right{opacity:0;transform:translateX(44px);transition:opacity 1s ease,transform 1s ease;}
html.js .reveal-left.on,html.js .reveal-right.on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal-left,html.js .reveal-right{transition:opacity .3s ease;transform:none;}
}

/* ---------- LEAF FIELD (ambient background motion) ---------- */
.leaf-field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.leaf-field svg{position:absolute;bottom:-14%;opacity:0;animation:leafRise linear infinite;}
@keyframes leafRise{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0;}
  8%{opacity:.18;}
  92%{opacity:.18;}
  100%{transform:translateY(-120vh) translateX(46px) rotate(34deg);opacity:0;}
}
@media(prefers-reduced-motion:reduce){.leaf-field{display:none;}}

/* ---------- NAV (fixed) ---------- */
#topnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;background:linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), transparent);}
#topnav .brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--soft);text-decoration:none;letter-spacing:.06em;}
#topnav .right{display:flex;align-items:center;gap:22px;}
#topnav a.navlink{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .3s;}
#topnav a.navlink:hover{color:var(--accent2);}
#modebtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent);
  cursor:pointer;font-size:1.05rem;line-height:1;transition:transform .4s,background .8s;display:flex;align-items:center;justify-content:center;}
#modebtn:hover{transform:rotate(20deg) scale(1.08);}

/* ---------- HERO ---------- */
.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:16vh 24px 14vh;position:relative;z-index:1;overflow:hidden;
  background:
    radial-gradient(1200px 560px at 50% 108%, color-mix(in srgb, var(--sunrise) 28%, transparent), transparent 64%),
    radial-gradient(900px 520px at 50% 112%, color-mix(in srgb, var(--g1) 26%, transparent), transparent 70%),
    radial-gradient(760px 460px at 50% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--bg);}
.hero .kicker{letter-spacing:.42em;text-transform:uppercase;font-size:.72rem;color:var(--accent);font-weight:500;margin-bottom:26px;}
.hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1.06;color:var(--ink);}
.hero h1 em{font-style:italic;color:var(--g2);}
.hero .role{margin-top:22px;font-size:.88rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);}
.hero .role span{color:var(--accent);padding:0 .45em;}
.hero .creed{margin-top:5.5vh;font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2.3vw,1.65rem);font-style:italic;color:var(--soft);}
.hero .creed b{font-weight:500;color:var(--accent2);font-style:italic;}
.scrollcue{margin-top:9vh;color:var(--dim);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;}
.scrollcue::after{content:"";display:block;width:1px;height:40px;background:linear-gradient(var(--sunrise),transparent);margin:10px auto 0;}

/* ---------- SECTION SHELL ---------- */
section{padding:12vh 24px;position:relative;z-index:1;transition:background .8s;}
.inner{max-width:1080px;margin:0 auto;}
.inner.narrow{max-width:780px;}
.eyebrow{letter-spacing:.4em;text-transform:uppercase;font-size:.7rem;color:var(--accent);font-weight:500;margin-bottom:18px;}
.sectitle{font-size:clamp(1.9rem,4.3vw,3rem);color:var(--ink);line-height:1.16;margin-bottom:18px;}
.sectitle em{font-style:italic;color:var(--g2);}
.lede{max-width:680px;color:var(--dim);font-size:1.02rem;}
.hr{width:64px;height:1px;background:var(--line);margin:44px 0;}
.alt{background:var(--bg2);}
p.body{color:var(--dim);margin-bottom:20px;font-size:1.03rem;}
p.body b{color:var(--soft);font-weight:400;}
.pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.25rem,2.5vw,1.65rem);color:var(--soft);
  border-left:2px solid var(--accent);padding-left:26px;margin:40px 0;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;margin-top:10px;padding:15px 34px;border-radius:60px;border:1px solid var(--accent);
  color:var(--bg);background:var(--accent);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;font-weight:500;transition:background .4s,transform .4s;cursor:pointer;font-family:'Jost',sans-serif;}
.btn:hover{background:var(--accent2);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--accent);}
.btn.ghost:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);}

/* ---------- CARDS & OFFERS ---------- */
.offer{margin-top:56px;border:1px solid var(--line);border-radius:18px;padding:clamp(30px,5vw,58px);
  background:radial-gradient(620px 300px at 10% 0%, color-mix(in srgb, var(--g1) 16%, transparent), transparent 60%), var(--panel);
  display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;transition:background .8s;}
@media(max-width:820px){.offer{grid-template-columns:1fr;}}
.offer h3{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--g2);margin-bottom:14px;}
.offer p{color:var(--dim);margin-bottom:14px;max-width:520px;}
.offer .quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:var(--soft);}
.offermeta{border-left:1px solid var(--line);padding-left:38px;}
@media(max-width:820px){.offermeta{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:26px;}}
.offermeta li{list-style:none;margin-bottom:16px;color:var(--soft);font-size:.95rem;}
.offermeta li b{display:block;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:2px;}

/* simple card grid (praise quotes, rooms, groves...) */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:48px;}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--panel);transition:transform .5s,border-color .5s,background .8s;}
.card:hover{transform:translateY(-6px);border-color:var(--g2);}
.card .tag{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:10px;display:block;}
.card h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ink);margin-bottom:6px;}
.card p{font-size:.88rem;color:var(--dim);}
.card.quiet{opacity:.6;}

/* dashed "seedling" card — for things in the making */
.seedling{border:1px dashed var(--line);border-radius:16px;padding:28px;}
.seedling .tag{color:var(--bloom);}

/* ---------- NUMBERED STEPS ---------- */
.steps{margin-top:36px;position:relative;}
.steps::before{content:"";position:absolute;top:6px;bottom:6px;left:27px;width:1px;background:var(--line);}
.steps .stepfill{position:absolute;top:6px;left:27px;width:1px;height:0;background:var(--accent);transition:height .1s linear;}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;margin-bottom:30px;align-items:start;position:relative;}
.step .n{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  background:var(--bg);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;color:var(--accent);
  transition:border-color .4s,box-shadow .4s;position:relative;z-index:1;}
.step.on .n{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);}
.step h3{font-size:1.3rem;color:var(--soft);margin-bottom:4px;}
.step p{font-size:.95rem;color:var(--dim);}

/* ---------- LEAF LIST (this-is-for-you-if) ---------- */
.forlist{margin-top:30px;}
.forlist .f{display:flex;gap:16px;margin-bottom:18px;align-items:flex-start;color:var(--dim);font-size:.98rem;}
.forlist .f::before{content:"❧";color:var(--g2);flex:none;margin-top:2px;}

/* ---------- SCOPE / NOTE BOX ---------- */
.scope{margin-top:36px;padding:24px 28px;border:1px dashed var(--line);border-radius:14px;font-size:.9rem;color:var(--dim);}

/* ---------- ARCHED DOORWAYS ---------- */
.doorgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:52px;}
.door{aspect-ratio:3/4.6;border:1px solid var(--line);border-radius:150px 150px 10px 10px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:26px 12px;position:relative;overflow:hidden;
  background:linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--panel) 80%, transparent));
  transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .6s, box-shadow .6s;}
.door::before{content:"";position:absolute;inset:8px;border-radius:142px 142px 8px 8px;border:1px solid color-mix(in srgb, var(--accent) 14%, transparent);}
.door .glow{position:absolute;top:18%;left:50%;transform:translateX(-50%);
  width:70px;height:70px;border-radius:50%;filter:blur(26px);opacity:.5;transition:opacity .6s,width .6s,height .6s;}
.door:hover{transform:translateY(-8px);border-color:color-mix(in srgb, var(--accent2) 55%, transparent);
  box-shadow:0 18px 50px -18px color-mix(in srgb, var(--accent2) 30%, transparent);}
.door:hover .glow{opacity:.9;width:96px;height:96px;}
.door .dname{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--ink);}
.door .dsub{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:6px;text-align:center;}

/* ---------- UTILITIES ---------- */
.gold{color:var(--accent) !important;font-weight:500;}

/* ---------- CREED FOOTER ---------- */
footer{padding:12vh 24px 10vh;text-align:center;position:relative;z-index:1;
  background:radial-gradient(800px 420px at 50% 128%, color-mix(in srgb, var(--sunrise) 22%, transparent), transparent 65%), var(--bg);transition:background .8s;}
footer .creedline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.4rem,3vw,2rem);color:var(--soft);}
footer .creedline b{color:var(--accent2);font-weight:500;}
footer .sig{margin-top:30px;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}