/* /journal — Awaken Journal's own design language (Awaken-Morphism, from the app's tokens.css).
   Every app theme appears once, quietly: hero = Awaken-Blue, features = Awaken-Forest,
   privacy = Awaken-Clay, security = Awaken-Ocean (values = awaken-journal home.css themes).
   Outset = raised surfaces (cards, buttons). Inset = pressed wells (labels, status, key-note). */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter.woff2") format("woff2");}
:root{
  --page:#F8F8FA; --ink:#1c1b22; --muted:#5d6166;
  --neu-shadow:170,172,186;
  --neu-out-lg: 7px 7px 16px rgba(var(--neu-shadow),.38), -7px -7px 16px #fff;
  --neu-out:    5px 5px 12px rgba(var(--neu-shadow),.35), -5px -5px 10px #fff;
  --neu-pill:   4px 4px 8px  rgba(var(--neu-shadow),.30), -4px -4px 8px  #fff;
  --neu-in:     inset 5px 5px 12px rgba(var(--neu-shadow),.40), inset -5px -5px 10px #fff;
  --neu-in-sm:  inset 3px 3px 7px  rgba(var(--neu-shadow),.38), inset -3px -3px 6px  #fff;
  --brand:#4850B2; --bg:var(--page);
}
/* per-theme: brand + that theme's own surface; the deep shade drives the button's cast shadow */
.t-blue  {--brand:#4850B2; --bg:#FAF7FE;}
.t-forest{--brand:#477A61; --bg:#F7FAF7;}
.t-clay  {--brand:#B6633F; --bg:#FCF8F4;}
.t-ocean {--brand:#397B82; --bg:#F5FAFA;}
.t-blue,.t-forest,.t-clay,.t-ocean{--brand-deep:color-mix(in srgb, var(--brand) 70%, #000);}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--page); color:var(--ink); font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
a{color:var(--brand);}

.top{max-width:980px; margin:0 auto; padding:20px 16px; display:flex; justify-content:space-between; gap:12px;}
.top a{padding:9px 18px; border-radius:999px; background:var(--page); box-shadow:var(--neu-pill); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; transition:box-shadow .18s;}
@media (max-width:380px){ .top{padding:16px 12px; gap:8px;} .top a{padding:9px 14px; font-size:13.5px;} } /* both pills stay on one line down to 320px */
.top a:active{box-shadow:var(--neu-in-sm);}

.book{max-width:980px; margin:0 auto; padding:8px 16px 40px; display:grid; grid-template-columns:1fr; gap:26px;}
@media (min-width:760px){ .book{grid-template-columns:1fr 1fr;} .cover,.cta,.wide{grid-column:1 / -1;} }

/* outset: every card is pressed OUT of its own theme surface */
.cover,.page{background:var(--bg); border-radius:24px; padding:28px; box-shadow:var(--neu-out);}
.cover{box-shadow:var(--neu-out-lg); padding:44px 32px; text-align:center;}

/* inset: labels, status, and the privacy/security notes sit IN the surface */
.stamp,.date,.live{display:inline-block; border-radius:999px; box-shadow:var(--neu-in-sm); padding:6px 16px; font-size:13px; font-weight:600; color:var(--brand); letter-spacing:.02em;}
.stamp{letter-spacing:.14em; text-transform:uppercase; font-size:12px;}
.cover h1{font-weight:800; font-size:clamp(34px,6.4vw,60px); line-height:1.08; letter-spacing:-.03em; margin-top:22px; color:var(--brand);}
.cover h1 br{display:none;}
@media (min-width:560px){ .cover h1 br{display:inline;} }
.sub{margin:18px auto 0; max-width:34em; color:var(--muted);}
.live{margin-top:24px; color:var(--muted); font-weight:500;}
.live span{color:#2f9e6c;}

.page h2{font-weight:700; font-size:clamp(21px,3vw,24px); line-height:1.25; letter-spacing:-.015em; margin:16px 0 8px; color:var(--ink);}
.page p:not(.date):not(.links){color:var(--muted);}
.page em{font-style:normal; font-weight:600; color:var(--ink);}

.lock{padding:32px;}
.lock h2{color:var(--brand);}
.lock > p:not(.date):not(.links){margin-top:6px; padding:18px 22px; border-radius:18px; box-shadow:var(--neu-in);}
.links{margin-top:18px; display:flex; flex-wrap:wrap; gap:12px;}
.links a{padding:9px 18px; border-radius:999px; box-shadow:var(--neu-pill); text-decoration:none; font-weight:600; font-size:14px;}
.links a:active{box-shadow:var(--neu-in-sm);}

.cta{text-align:center; padding:10px 0;}
.btn{display:inline-block; padding:15px 30px; border-radius:999px; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; font-size:16px; box-shadow:5px 5px 12px color-mix(in srgb, var(--brand-deep) 45%, transparent), -4px -4px 10px #fff; transition:transform .18s, box-shadow .18s;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:none; box-shadow:inset 3px 3px 7px rgba(0,0,0,.25), inset -3px -3px 6px rgba(255,255,255,.14);}

/* footer — the homepage's footer, restated in this page's morphism: company mark, links, socials */
.jfoot{max-width:980px; margin:12px auto 0; padding:44px 16px 52px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; border-top:1px solid color-mix(in srgb, #4850B2 14%, transparent);}
.jfoot-pre{font-size:13px; color:var(--muted); letter-spacing:.02em;}
.jfoot-mark{font-weight:700; font-size:1.2rem; color:#4850B2; text-decoration:none; letter-spacing:-.01em;}
.jfoot-mark .by{font-weight:500; color:var(--muted);}
.tm{font-size:.55em; position:relative; top:-.55em; color:#6b73c9;}
.jfoot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:6px; font-size:13px;}
.jfoot-links a{color:var(--muted); text-decoration:none;}
.jfoot-links a:hover{color:#4850B2;}
.jfoot .foot-social{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px;}
.jfoot .foot-social a{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--page); box-shadow:var(--neu-pill); color:#4850B2;}
.jfoot .foot-social a:active{box-shadow:var(--neu-in-sm);}
.jfoot .foot-social svg{width:18px; height:18px;}
@media (max-width:400px){ .jfoot .foot-social{gap:6px;} .jfoot .foot-social a{width:34px; height:34px;} } /* all seven icons in one row down to 320px */
.cover .links{justify-content:center; margin-top:20px;}

/* Day View holds the four parts: shown as wells pressed into its card, 2×2 (inset = inside the day) */
.parts{display:grid; gap:16px; margin-top:22px;}
@media (min-width:640px){ .parts{grid-template-columns:1fr 1fr;} }
.part{border-radius:18px; box-shadow:var(--neu-in); padding:20px 22px;}
.part h3{font-size:13px; font-weight:600; color:var(--brand); letter-spacing:.02em;}
.part .part-lead{margin-top:6px; font-weight:700; font-size:17px; line-height:1.3; color:var(--ink) !important;}
.page .part p{margin-top:6px; font-size:15.5px;}

/* Guide contents: chapters side by side, each list a well */
.toc-cols{display:grid; gap:20px; margin-top:20px;}
@media (min-width:640px){ .toc-cols{grid-template-columns:1fr 1fr; grid-template-rows:auto auto; row-gap:0;} .toc-cols>div{display:grid; grid-row:span 2; grid-template-rows:subgrid;} }
.toc-cols .toc-ch{font-size:14px; font-weight:600; margin-bottom:10px;}
.toc-cols .toc-ch a{text-decoration:none;}
.toc-cols .toc{list-style:none; border-radius:18px; box-shadow:var(--neu-in); padding:4px 0;}
.toc-cols .toc li+li{border-top:1px solid color-mix(in srgb, var(--brand) 12%, transparent);}
.toc-cols .toc a{display:block; padding:11px 18px; color:var(--ink); text-decoration:none; font-size:15.5px; line-height:1.4;}
.toc-cols .toc a:hover{color:var(--brand);}

/* legal documents: a plain two-column list, not a row of buttons */
.doclist{list-style:none; display:grid; gap:2px 24px; margin-top:18px;}
@media (min-width:640px){ .doclist{grid-template-columns:1fr 1fr;} }
.doclist a{display:block; padding:8px 0; font-weight:600; font-size:15px; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--brand) 14%, transparent);}
.doclist a:hover{text-decoration:underline;}