/* Soriah brand layer for the Clear-Cut Tarot book tools.
   Source of truth: BRAND.md (measured from soriahthetarotreader.co.uk, 6 Oct 2026).
   Loaded last on every tool page, so it sits on top of each page's own styles. */
@font-face{font-family:'Lexend';src:url(/brand/fonts/lexend-latin-300-normal.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url(/brand/fonts/lexend-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lexend';src:url(/brand/fonts/lexend-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- shared tokens ---------- */
html[data-tool]{
 --b-ink:#2d282c; --b-ink2:#5e585c; --b-soft:#8a8389; --b-plum:#512b58; --b-gold:#d4ad3f; --b-golddark:#7a5c1f;
 --b-line:rgba(45,40,44,.14); --b-edge:rgba(212,173,63,.45);
 --b-main:linear-gradient(#2d282c,#4d474b); --b-mainshadow:0 6px 16px rgba(45,40,44,.28);
 --b-lift:0 18px 44px rgba(45,40,44,.22),0 2px 6px rgba(45,40,44,.10);
 --b-lift-sm:0 8px 22px rgba(45,40,44,.14),0 1px 4px rgba(45,40,44,.08);
 --b-panel:#ffffff; --b-text:#5e585c; --b-head:#2d282c; --b-accent:#512b58;
 --b-font:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-tool].dm,html[data-tool].dark{
 --b-panel:#2a2529; --b-text:#d9d3d8; --b-head:#f2eef1; --b-accent:#d6b3dc; --b-line:rgba(255,255,255,.16);
 --b-main:linear-gradient(#f2eef1,#d6d0d5); --b-mainshadow:0 6px 16px rgba(0,0,0,.45);
 --b-lift:0 18px 44px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4); --b-lift-sm:0 8px 22px rgba(0,0,0,.4);
}
html[data-tool] body{font-family:var(--b-font);font-weight:300;color:var(--b-text);-webkit-font-smoothing:antialiased}
html[data-tool] b,html[data-tool] strong{font-weight:500}
html[data-tool] button,html[data-tool] input,html[data-tool] textarea,html[data-tool] select{font-family:var(--b-font)}

/* title block: logo, item title, plum eyebrow with a short gold rule */
html[data-tool] header h1,html[data-tool] .wrap>header h1,html[data-tool="app"] h1{font-family:var(--b-font);font-weight:500;font-size:1.9rem;letter-spacing:0;color:var(--b-head);text-transform:none;line-height:1.2;margin-top:6px}
html[data-tool] header .sub,html[data-tool="app"] .sub,html[data-tool] .kicker{font-family:var(--b-font);font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--b-accent);margin-top:10px}
html[data-tool] header .sub::after,html[data-tool="app"] header .sub::after,html[data-tool] .kicker::after{content:"";display:block;width:44px;height:2px;background:var(--b-gold);margin:10px auto 0;border-radius:2px}
html[data-tool] .stardiv{display:none}
html[data-tool] .intro,html[data-tool] .how{font-size:1.04rem;font-weight:300;color:var(--b-text);line-height:1.65}

/* eyebrow labels everywhere */
html[data-tool] .hist h3,html[data-tool="app"] .box h2,html[data-tool="app"] .gate label,html[data-tool] .rules h3,html[data-tool]:not([data-tool="journal"]) .step,html[data-tool]:not([data-tool="journal"]) .result .l,html[data-tool] .progtxt,html[data-tool] .qbar{font-family:var(--b-font);font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--b-accent)}

/* main and second buttons, one family */
html[data-tool]:not([data-tool="journal"]) .next,html[data-tool="app"] .btn,html[data-tool="qb"] .btn:not(.ghost),html[data-tool] .vtab.on,html[data-tool="qb"] .tab.on,html[data-tool="qb"] .toggles button.on,html[data-tool] .uibtn.on{
 background:var(--b-main);color:#fff;border:1.5px solid transparent;border-radius:12px;box-shadow:var(--b-mainshadow);
 font-family:var(--b-font);font-weight:500;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase}
html[data-tool]:not([data-tool="journal"]).dm .next,html[data-tool].dm[data-tool="app"] .btn,html[data-tool].dm[data-tool="qb"] .btn:not(.ghost),html[data-tool].dm .vtab.on,html[data-tool].dm[data-tool="qb"] .tab.on,html[data-tool].dm[data-tool="qb"] .toggles button.on,html[data-tool].dm .uibtn.on{color:#2d282c}
html[data-tool] .vtab,html[data-tool="qb"] .tab,html[data-tool="qb"] .btn.ghost,html[data-tool] .uibtn,html[data-tool="qb"] .toggles button{
 background:var(--b-panel);color:var(--b-head);border:1.5px solid var(--b-head);border-radius:12px;box-shadow:none;
 font-family:var(--b-font);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
html[data-tool]:not([data-tool="journal"]) .next{padding:15px 30px}
html[data-tool] .vtab{padding:11px 18px}
html[data-tool] .vtab:hover{transform:none}
html[data-tool] .uibtn,html[data-tool="qb"] .toggles button{text-transform:none;letter-spacing:.02em}
html[data-tool] .uibtn{height:38px;padding:0 13px;font-size:.8rem}
@media(max-width:700px){html[data-tool] .uibtn{height:34px;padding:0 11px;font-size:.78rem}}
html[data-tool] .uibtn.on{box-shadow:none}

/* lifted white boxes with a thin gold edge */
html[data-tool] .hist,html[data-tool="app"] .gate,html[data-tool="app"] .box,html[data-tool] .rules,html[data-tool] .qcard,html[data-tool]:not([data-tool="journal"]) .result,html[data-tool="journal"] .card{
 background:var(--b-panel);border:1px solid var(--b-edge);border-radius:18px;box-shadow:var(--b-lift);color:var(--b-text)}
html[data-tool] .hist{padding:20px 20px}
html[data-tool="app"] .box{padding:20px 20px;border-left:1px solid var(--b-edge)}
html[data-tool]:not([data-tool="journal"]) .result{border-left:1px solid var(--b-edge);padding:18px 20px}
html[data-tool]:not([data-tool="journal"]) .result p{font-weight:500;color:var(--b-head)}
html[data-tool]:not([data-tool="journal"]) .why{background:var(--b-panel);border:1px solid var(--b-edge);border-radius:14px;box-shadow:var(--b-lift-sm);padding:14px 16px;color:var(--b-text);font-weight:300}
html[data-tool]:not([data-tool="journal"]) .why b{color:var(--b-head);font-weight:500}

/* answer options, chips and list rows */
html[data-tool]:not([data-tool="journal"]) .opt,html[data-tool]:not([data-tool="journal"]) .chip,html[data-tool]:not([data-tool="journal"]) .stem,html[data-tool] input.blank,html[data-tool] .search,html[data-tool] .journal-item{
 background:var(--b-panel);color:var(--b-head);border:1.5px solid var(--b-line);border-radius:12px;font-family:var(--b-font);font-weight:400}
html[data-tool]:not([data-tool="journal"]) .opt:hover:not(:disabled),html[data-tool]:not([data-tool="journal"]) .chip:hover,html[data-tool]:not([data-tool="journal"]) .stem:hover{border-color:var(--b-head)}
html[data-tool]:not([data-tool="journal"]) .opt.correct{border-color:#4f8a43;background:var(--b-panel);box-shadow:0 0 0 1px #4f8a43 inset;font-weight:500}
html[data-tool]:not([data-tool="journal"]) .opt.wrong{border-color:#b8432f;background:var(--b-panel);box-shadow:0 0 0 1px #b8432f inset}
html[data-tool]:not([data-tool="journal"]) .opt.correct::after{color:#4f8a43}
html[data-tool]:not([data-tool="journal"]) .opt.wrong::after{color:#b8432f}
html[data-tool]:not([data-tool="journal"]) .chip.on,html[data-tool]:not([data-tool="journal"]) .stem.on{background:var(--b-main);color:#fff;border-color:transparent;box-shadow:var(--b-mainshadow);font-weight:500}
html[data-tool]:not([data-tool="journal"]).dm .chip.on,html[data-tool]:not([data-tool="journal"]).dm .stem.on{color:#2d282c}
html[data-tool]:not([data-tool="journal"]) .chip.on small{color:rgba(255,255,255,.8)}
html[data-tool]:not([data-tool="journal"]) .step b{background:var(--b-plum);font-family:var(--b-font);font-weight:500}
html[data-tool]:not([data-tool="journal"]) .q,html[data-tool]:not([data-tool="journal"]) .qq{font-family:var(--b-font);font-weight:500;font-size:1.25rem;color:var(--b-head);line-height:1.4}
html[data-tool] .search:focus,html[data-tool] input.blank:focus{outline:none;border-color:var(--b-plum)}

/* progress and score */
html[data-tool] .prog{height:6px;background:var(--b-line)}
html[data-tool] .prog i{background:var(--b-gold)}
html[data-tool] .score .big{font-family:var(--b-font);font-weight:300;font-size:3.4rem;color:var(--b-accent)}
html[data-tool] .score .msg{font-weight:500;color:var(--b-head)}
html[data-tool] .hist .row b{color:var(--b-accent);font-weight:500}

/* symbol and keyword lists */
html[data-tool] .symcat{font-size:.78rem;font-weight:500;letter-spacing:.2em;color:var(--b-accent)}
html[data-tool] .symcat::after{height:1px;border-radius:0;background:var(--b-line)}
html[data-tool] .symrow b{font-weight:500;color:var(--b-head)}
html[data-tool] .symrow span{color:var(--b-accent);font-weight:400}

/* tools home tiles */
html[data-tool="app"] .tile{background:var(--b-panel);border:1px solid var(--b-edge);border-radius:16px;box-shadow:var(--b-lift-sm);padding:16px 18px;transition:transform .15s,box-shadow .15s}
html[data-tool="app"] .tile:hover,html[data-tool="app"] .tile:focus{border-color:var(--b-gold);transform:translateY(-2px);box-shadow:var(--b-lift)}
html[data-tool="app"] .num{border:1.5px solid var(--b-plum);color:var(--b-accent);font-family:var(--b-font);font-weight:500}
html[data-tool="app"] .tt b{font-family:var(--b-font);font-weight:500;font-size:1.1rem;color:var(--b-head)}
html[data-tool="app"] .tt em{color:var(--b-text);font-weight:300}
html[data-tool="app"] .go{color:var(--b-accent)}
html[data-tool="app"] .gate input{border:1.5px solid var(--b-line);border-radius:12px;font-family:var(--b-font)}
html[data-tool="app"] .gate input:focus{border-color:var(--b-plum)}
html[data-tool="app"] .box h3{color:var(--b-head);font-weight:500}

/* moon */
html[data-tool="moon"] video{border:1px solid var(--b-edge);border-radius:18px;box-shadow:var(--b-lift)}

/* dark mode text colours for the older templates */
html[data-tool].dm body{color:var(--b-text)}
html[data-tool]:not([data-tool="journal"]).dm .opt,html[data-tool].dm .hist,html[data-tool].dm .uibtn,html[data-tool].dm .vtab,html[data-tool].dm .search,html[data-tool].dm[data-tool="app"] .tile,html[data-tool].dm[data-tool="app"] .gate,html[data-tool].dm[data-tool="app"] .gate input,html[data-tool]:not([data-tool="journal"]).dm .chip,html[data-tool]:not([data-tool="journal"]).dm .stem,html[data-tool].dm .qcard,html[data-tool].dm .rules,html[data-tool]:not([data-tool="journal"]).dm .result,html[data-tool]:not([data-tool="journal"]).dm .why{background:var(--b-panel);color:var(--b-head)}
html[data-tool].dm .uibtn,html[data-tool].dm .vtab{border-color:var(--b-head)}
html[data-tool].dm{--paper:#1f1b1e;--ink:#f2eef1;--line:rgba(255,255,255,.16);--muted:#bdb5bb;--tint:#2a2529;--warm:#2a2529}

/* ---------- the journal ---------- */
html[data-tool="journal"]{
 --serif:var(--b-font); --font:var(--b-font);
 --plum:#512b58; --plum-ink:#512b58; --plum-tint:#ffffff; --plum-mid:#d4ad3f; --plum-soft:#ffffff; --plum-deep:#2d282c;
 --line:rgba(45,40,44,.14); --muted:#5e585c;
 --lift:0 8px 22px rgba(45,40,44,.14),0 1px 4px rgba(45,40,44,.08);
 --rose-soft:#ffffff; --rose-mid:#d4ad3f; --rose-deep:#7a5c1f; --rose-ink:#7a5c1f; --rose-tint:#ffffff;
 --teal-soft:#ffffff; --teal-mid:#512b58; --teal-deep:#512b58; --teal-ink:#512b58; --teal-tint:#ffffff;
 --apricot-soft:#ffffff; --apricot-mid:#2d282c; --apricot-deep:#2d282c; --apricot-ink:#2d282c; --apricot-tint:#ffffff;
 --sage-soft:#ffffff; --sage-mid:#8a8389; --sage-deep:#5e585c; --sage-ink:#5e585c; --sage-tint:#ffffff;
}
html[data-tool="journal"].dark{--plum-ink:#d6b3dc;--plum-tint:#2a2529;--rose-tint:#2a2529;--teal-tint:#2a2529;--apricot-tint:#2a2529;--sage-tint:#2a2529;--rose-soft:#2a2529;--teal-soft:#2a2529;--apricot-soft:#2a2529;--sage-soft:#2a2529;--teal-ink:#d6b3dc;--apricot-ink:#f2eef1;--rose-ink:#e6c873}
html[data-tool="journal"] body{font-weight:300;color:var(--b-text)}
html[data-tool="journal"] h1,html[data-tool="journal"] h2{font-family:var(--b-font);font-weight:300;letter-spacing:.16em;color:var(--b-head)}
html[data-tool="journal"] h3{font-weight:500;letter-spacing:.2em;color:var(--b-accent)}
html[data-tool="journal"] .hero h1{font-size:clamp(1.45em,6.6vw,2.1em);letter-spacing:.16em}
html[data-tool="journal"] .hero .sub2{color:var(--b-accent);font-weight:500;letter-spacing:.2em}
html[data-tool="journal"] .hero .sub2::after{content:"";display:block;width:44px;height:2px;background:var(--b-gold);margin:10px auto 0;border-radius:2px}
html[data-tool="journal"] .hero .ed{background:var(--b-plum);color:#fff;font-weight:500;letter-spacing:.16em;padding:7px 16px;line-height:1.5}
html[data-tool="journal"] .card{padding:20px}
html[data-tool="journal"] .btn{border-radius:12px;font-weight:500;letter-spacing:.14em;box-shadow:var(--b-mainshadow)}
html[data-tool="journal"] .btn.ghost{background:var(--b-panel);color:var(--b-head);border:1.5px solid var(--b-head);box-shadow:none}
html[data-tool="journal"] .tab{border:1.5px solid var(--b-line);border-radius:12px;font-weight:500;letter-spacing:.06em;box-shadow:none;background:var(--b-panel);color:var(--b-head)}
html[data-tool="journal"] .tab[aria-current="page"]{background:var(--b-main);color:#fff;border-color:transparent;box-shadow:var(--b-mainshadow);font-weight:500}
html[data-tool="journal"].dark .tab[aria-current="page"]{color:#2d282c}
html[data-tool="journal"] .tc{background:#fff!important;border:1.5px solid #2d282c;box-shadow:var(--b-lift-sm)}
html[data-tool="journal"] .tc:after{border-color:rgba(212,173,63,.55)}
html[data-tool="journal"] .tc .n{color:#2d282c}
html[data-tool="journal"] .pdfbox{border-top:3px solid var(--b-gold)}
html[data-tool="journal"] .sec,html[data-tool="journal"] .type{border-top-width:3px}
html[data-tool="journal"] .pos,html[data-tool="journal"] .next{border-left-width:3px}
html[data-tool="journal"] .pill{border:1.5px solid var(--b-line);font-weight:500}
html[data-tool="journal"] .pill[aria-pressed="true"],html[data-tool="journal"] .el[aria-pressed="true"],html[data-tool="journal"] .pickbtn.set{background:var(--b-main);color:#fff;border-color:transparent}
html[data-tool="journal"].dark .pill[aria-pressed="true"],html[data-tool="journal"].dark .el[aria-pressed="true"],html[data-tool="journal"].dark .pickbtn.set{color:#2d282c}
html[data-tool="journal"] .hint{background:var(--b-panel);border:1px solid var(--b-edge)}
html[data-tool="journal"] .op{background:var(--b-panel);border:1px dashed var(--b-gold);color:var(--b-accent)}
html[data-tool="journal"] .optadd{background:var(--b-panel);border:1.5px dashed var(--b-plum);color:var(--b-accent)}
html[data-tool="journal"] .quote{border-left:3px solid var(--b-gold);color:var(--b-accent)}
html[data-tool="journal"] .num{background:var(--b-plum)}
html[data-tool="journal"] .gear{background:#2d282c;color:#fff;box-shadow:0 0 0 2px var(--b-gold),0 6px 16px rgba(45,40,44,.3)}
html[data-tool="journal"] input[type=text],html[data-tool="journal"] input[type=date],html[data-tool="journal"] textarea,html[data-tool="journal"] select{border:1.5px solid var(--b-line);border-radius:12px}
html[data-tool="journal"] .tile{border:1px solid var(--b-edge);border-radius:14px;box-shadow:var(--b-lift-sm)}
html[data-tool="journal"] .sheet{border-radius:18px 18px 0 0}
@media (min-width:700px){html[data-tool="journal"] .sheet{border-radius:18px}}

@media (max-width:560px){
 html[data-tool] header h1,html[data-tool="app"] h1{font-size:1.6rem}
 html[data-tool]:not([data-tool="journal"]) .q,html[data-tool]:not([data-tool="journal"]) .qq{font-size:1.12rem}
}

/* the Back to tools button on every tool page */
html[data-tool] #cctHome{background:linear-gradient(#2d282c,#4d474b)!important;color:#fff!important;font:500 12px/1 'Lexend',system-ui,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase;border-radius:12px!important;box-shadow:0 6px 16px rgba(45,40,44,.28)!important;padding:0 13px 0 10px!important}
@media (max-width:560px){html[data-tool="qb"] .tab{letter-spacing:.06em;font-size:.74rem}}
html[data-tool].dm .vtab.on,html[data-tool].dm .uibtn.on,html[data-tool].dm[data-tool="qb"] .tab.on,html[data-tool].dm[data-tool="qb"] .toggles button.on{background:var(--b-main);color:#2d282c;border-color:transparent}

/* 13 Oct 2026: the Clear-Cut Tarot logo Andy made sits at the top of every book tool; the School of Tarot logo moves to the foot */
html[data-tool] img.cct{display:block;width:82%;max-width:400px;height:auto;margin:8px auto 6px}
html[data-tool] img.cct-d{display:none}
html[data-tool].dm img.cct-l,html[data-tool].dark img.cct-l{display:none}
html[data-tool].dm img.cct-d,html[data-tool].dark img.cct-d{display:block}
html[data-tool] .cct-wrap{display:block;background:none!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important;padding:0!important}
html[data-tool] img.school-logo{display:block;width:150px;max-width:50%;height:auto;margin:0 auto 12px;border-radius:6px}
@media (max-width:700px){html[data-tool="journal"] .cct-wrap img.cct{margin-top:48px}}
@media (max-width:700px){html[data-tool="qb"] img.cct-l,html[data-tool="qb"] img.cct-d{margin-top:48px}}

/* fix-1950: one tidy header for every tool (14 Oct 2026) */
.cct-topbar{display:flex;justify-content:flex-start;padding:12px 16px 0;max-width:1100px;margin:0 auto;box-sizing:border-box;position:relative;z-index:5}
a.cct-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border-radius:12px;background:linear-gradient(#2d282c,#4d474b);color:#fff!important;font:500 13px/1 var(--b-font,system-ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.2);touch-action:manipulation}
a.cct-back span{font-size:22px;line-height:1;margin-top:-3px}
html[data-tool] .wrap{padding-top:8px!important}
html[data-tool] img.cct{margin-top:10px!important;margin-bottom:20px!important}
html[data-tool] header h1{text-transform:uppercase;letter-spacing:.06em;font-weight:600!important;font-size:clamp(19px,5.4vw,26px)!important;line-height:1.3!important;margin:0 auto 12px!important;padding:0 4px 10px;border-bottom:1px solid var(--b-line);display:inline-block}
html[data-tool] header{text-align:center}
.cct-controls{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px auto 24px!important;position:static!important}
.cct-controls>button{position:static!important;top:auto!important;left:auto!important;right:auto!important;min-height:44px;height:auto!important;padding:0 16px!important;border-radius:22px!important;display:inline-flex!important;align-items:center;gap:7px;font-size:14px!important;margin:0!important;box-shadow:none!important;white-space:nowrap;touch-action:manipulation}
html[data-tool="journal"] .cct-controls>button{background:#fff;border:1px solid var(--b-line);color:var(--b-head);font-family:var(--b-font)}
.cct-controls>button .ico,.cct-controls>button>span:first-child:not(:last-child){display:none!important}
.cct-topbar{justify-content:space-between;align-items:center}
.cct-controls.cct-inbar{margin:0!important}