/* khiar — refined palette, global polish, motion and the site-wide widgets
   (expanding search, progress line, shortcuts sheet, toasts, recents).
   Loads after style.css and overrides design tokens only, so every page picks
   the new look up without editing its own file. */

:root{
  --bg:#FCFAF6; --surface:#FFFFFF; --surface-2:#F7F4EF;
  --line:#EAE3D9; --line-2:#DED6C9;
  --ink:#211F2B; --ink-2:#3B3847; --muted:#6B6779;
  --accent:#3F4DAE; --accent-d:#2F3B8E; --accent-l:#EDF0FC;
  --lav:#ECEEFB; --blush:#FBEDE7; --sage:#E6F0EA; --butter:#FFF4DC; --sky:#E9F1F8;
  --gold:#B0842B;
  --shadow:0 1px 2px rgba(33,31,43,.04),0 8px 24px rgba(33,31,43,.06);
  --shadow-2:0 2px 4px rgba(33,31,43,.05),0 18px 44px rgba(33,31,43,.10);
  --shadow-3:0 30px 80px rgba(33,31,43,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pop:cubic-bezier(.34,1.4,.64,1);
  --bar-h:72px;
}

body{background:var(--bg);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(60vw 40vh at 12% -6%,rgba(236,238,251,.85),transparent 60%),
    radial-gradient(52vw 38vh at 92% 4%,rgba(251,237,231,.75),transparent 62%),
    radial-gradient(60vw 44vh at 74% 96%,rgba(230,240,234,.65),transparent 60%);
}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent)}
:focus-visible{outline-color:var(--accent)}

/* ---------- header ---------- */
header.site{transition:box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
header.site.scrolled{background:rgba(252,250,246,.82);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(33,31,43,.06)}
.bar{transition:height .3s var(--ease);gap:12px}
header.site.scrolled .bar{height:64px}
.logo{transition:transform .3s var(--ease)}
.logo:hover{transform:translateY(-1px)}
.links a{transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.links a:hover{transform:translateY(-1px)}
.links a.cta{background:linear-gradient(180deg,#4757BC,var(--accent));box-shadow:0 6px 18px rgba(63,77,174,.24);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.links a.cta:hover{background:linear-gradient(180deg,var(--accent),var(--accent-d));box-shadow:0 12px 28px rgba(63,77,174,.3);transform:translateY(-1px)}
@media (max-width:860px){
  .links{opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease);display:flex;visibility:hidden}
  .links.open{opacity:1;transform:none;visibility:visible}
}

/* ---------- the search that expands out of the header ---------- */
.searchwrap{position:relative;display:flex;align-items:center;order:2}
.searchbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-family:inherit;font-size:14px;border-radius:999px;padding:9px 14px;cursor:pointer;
  transition:box-shadow .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
.searchbtn:hover{color:var(--ink);box-shadow:var(--shadow);transform:translateY(-1px)}
.searchbtn .sic{font-size:15px;line-height:1}
.searchbtn .skey{font-family:inherit;font-size:11.5px;background:var(--surface-2);border-radius:6px;padding:2px 6px;box-shadow:0 0 0 1px var(--line)}
.keysbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:box-shadow .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.keysbtn:hover{color:var(--ink);box-shadow:var(--shadow);transform:translateY(-1px)}
.sheet-note{font-size:13.5px;color:var(--muted)}
/* the footer carries the same affordance as a quiet link */
.fcol-hint .keysbtn{width:auto;height:auto;border:none;background:none;padding:0;margin-left:6px;font-family:inherit;
  font-size:13.5px;color:var(--accent);border-radius:0;text-decoration:underline}
.fcol-hint .keysbtn:hover{box-shadow:none;transform:none;color:var(--accent-d)}
.searchwrap.open .searchbtn{opacity:0;pointer-events:none;transform:scale(.96)}
.searchbox{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .3s var(--ease)}
.searchwrap.open .searchbox{opacity:1;pointer-events:auto}
.searchrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 8px 9px 16px;box-shadow:var(--shadow-2);width:0;opacity:0;
  transition:width .38s var(--ease),opacity .28s var(--ease),box-shadow .3s var(--ease)}
.searchwrap.open .searchrow{width:340px;opacity:1}
.searchrow .sic{color:var(--muted);font-size:15px}
.searchfield{flex:1 1 auto;min-width:0;border:none;background:transparent;font-family:inherit;font-size:15.5px;color:var(--ink);padding:6px 0}
.searchfield:focus{outline:none}
.searchclose{border:none;background:var(--surface-2);color:var(--muted);width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:13px;line-height:1;flex:0 0 32px;transition:background .2s var(--ease),color .2s var(--ease)}
.searchclose:hover{background:var(--blush);color:var(--ink)}
.searchpanel{position:absolute;top:calc(100% + 12px);right:0;width:min(520px,92vw);max-height:min(62vh,520px);overflow-y:auto;
  background:var(--surface);border-radius:20px;box-shadow:var(--shadow-3);padding:8px;transform-origin:top right;
  animation:panelIn .3s var(--pop) both}
.searchwrap.collapsing .searchpanel{animation:panelOut .18s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes panelOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}
.searchsec{margin:8px 12px 6px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.searchhit{display:flex;align-items:baseline;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--ink);
  cursor:pointer;transition:background .16s var(--ease),transform .16s var(--ease)}
.searchhit:hover,.searchhit.on{background:var(--accent-l)}
.searchhit.on{transform:translateX(2px)}
.searchhit b{font-family:'Fraunces',Georgia,serif;font-size:16.5px;font-weight:600}
.searchhit span{font-size:13.5px;color:var(--muted);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56%}
.searchhit em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.searchempty{padding:18px 14px 10px;font-size:15px;color:var(--muted);line-height:1.6}
.searchacts{display:flex;align-items:center;gap:8px;margin:6px 6px 2px;padding:10px 8px 6px;border-top:1px solid var(--line)}
.searchacts .grow{flex:1 1 auto}
.searchacts button{border:none;background:var(--surface-2);color:var(--ink-2);font-family:inherit;font-size:13.5px;font-weight:500;
  padding:9px 13px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.searchacts button:hover{background:var(--accent-l);transform:translateY(-1px)}
.searchacts .hintk{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)}
kbd{font-family:inherit;font-size:11.5px;background:var(--surface-2);border-radius:6px;padding:2px 6px;box-shadow:0 0 0 1px var(--line)}

/* on a phone the expanded search takes the whole header row and hides the rest */
@media (max-width:860px){
  .searchbtn{padding:9px 12px}
  .searchbtn .sbt,.searchbtn .skey{display:none}
  .searchwrap.open .searchbox{position:fixed;left:8px;right:8px;top:8px;transform:none;z-index:120}
  .searchwrap.open .searchrow{width:auto}
  .searchpanel{width:100%;left:0;right:0}
}

/* ---------- buttons and cards, smoothed ---------- */
.btn{transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease)}
.btn.primary{background:linear-gradient(180deg,#4757BC,var(--accent));box-shadow:0 6px 18px rgba(63,77,174,.24),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:hover{background:linear-gradient(180deg,var(--accent),var(--accent-d));box-shadow:0 12px 28px rgba(63,77,174,.3);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost:hover{box-shadow:0 0 0 1px var(--line-2),var(--shadow);transform:translateY(-2px)}
.btn.light:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(33,31,43,.14)}
.card,.term,.tip,.step,.era,.work,.feat,.reach .item,.hub-card,.person,.book,.place,.lesson,.tl-row,.side{transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)}
.card:hover,.term:hover,.tip:hover,.step:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.era:hover,.work:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.card .ico,.feat .num{transition:transform .3s var(--pop)}
.card:hover .ico{transform:rotate(-4deg) scale(1.06)}
.tab,.filter{transition:background .22s var(--ease),color .22s var(--ease),transform .2s var(--ease),box-shadow .22s var(--ease)}
.tab:hover,.filter:hover{transform:translateY(-1px)}
.band{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ctaband{background:linear-gradient(135deg,#4554B8,var(--accent-d) 78%);box-shadow:0 24px 60px rgba(47,59,142,.24)}
.ctaband .price{font-family:'Fraunces',Georgia,serif;font-size:16px;color:#DDE1FA;margin-top:10px}

/* in-body links underline on hover instead of only changing colour */
.prose a,.fine a,.faq a,.term a,footer.site a{background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .28s var(--ease)}
.prose a:hover,.fine a:hover,.faq a:hover,.term a:hover{background-size:100% 1px}

/* ---------- smooth FAQ ---------- */
details{transition:box-shadow .28s var(--ease),background .28s var(--ease)}
details[open]{box-shadow:0 0 0 1px var(--line),var(--shadow)}
details>p,details>.dbody{overflow:hidden}
details .dbody{transition:height .34s var(--ease),opacity .34s var(--ease);opacity:0}
details[open] .dbody{opacity:1}
summary{transition:color .2s var(--ease)}
summary:hover{color:var(--accent-d)}
summary::after{transition:transform .3s var(--pop),color .2s var(--ease)}
details[open] summary::after{transform:scale(1.2)}

/* ---------- entrance motion ---------- */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .pop{opacity:0;transform:translateY(12px) scale(.985)}
.js .pop.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--pop);transition-delay:var(--d,0ms)}
header.site{animation:barDrop .55s var(--ease) both}
@keyframes barDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.pagehead .wrap,.hero-text{animation:riseIn .7s var(--ease) both}
.pagehead .crumbs,.hero .art{animation:riseIn .8s var(--ease) .08s both}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- reading progress ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:150;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.progress.on{opacity:1}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),#7C89E0);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}

/* ---------- back to top, toast ---------- */
.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;z-index:120;
  background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow-2);font-size:18px;line-height:1;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent-l);transform:translateY(-3px)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:220;background:var(--ink);color:#fff;
  font-size:14.5px;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-3);opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);max-width:min(92vw,560px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.toast{bottom:16px;font-size:13.5px}}

/* ---------- reading-time chip ---------- */
.meta-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:12px;
  padding:4px 10px;border-radius:999px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line)}
/* ---------- recently viewed rail ---------- */
.recent{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.recent .lbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.recent a{font-size:14px;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:999px;padding:9px 15px;
  box-shadow:0 0 0 1px var(--line);transition:background .2s var(--ease),transform .2s var(--ease)}
.recent a:hover{background:var(--accent-l);transform:translateY(-2px)}
.recent .clr{border:none;background:none;color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;text-decoration:underline}

/* ---------- shortcuts sheet ---------- */
.sheet{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:24px 16px;
  background:rgba(33,31,43,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet.open{display:flex;animation:fadeIn .2s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-panel{width:100%;max-width:520px;max-height:86vh;overflow-y:auto;background:var(--surface);border-radius:24px;
  box-shadow:var(--shadow-3);animation:popIn .3s var(--pop) both}
@keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px 12px}
.sheet-head h3{font-size:24px;font-weight:600}
.sheet-x{border:none;background:var(--surface-2);color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer}
.sheet-x:hover{background:var(--blush);color:var(--ink)}
.sheet-body{padding:4px 24px 8px;display:flex;flex-direction:column}
.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.sheet-row:last-child{border-bottom:none}
.sheet-row span{color:var(--ink-2)}
.sheet-foot{padding:14px 24px 22px;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ---------- footer ---------- */
.fcol-hint{font-size:13.5px;color:var(--muted);margin-top:6px}
.fcol-hint b{font-weight:600;color:var(--ink);background:var(--surface-2);border-radius:6px;padding:1px 6px;box-shadow:0 0 0 1px var(--line)}
.fcol .more{font-weight:600;font-size:14.5px;color:var(--accent);text-decoration:none}
.fcol .more:hover{text-decoration:underline}
.fcol .planline{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
.fcol .planline b{color:var(--ink)}
footer.site{background:linear-gradient(180deg,var(--surface),#FDFBF8)}

@media (max-width:1180px) and (min-width:861px){
  .links a{padding:10px 11px;font-size:14.5px}
  .links a.cta{margin-left:4px;padding:10px 16px}
}

/* ---------- value strip and price cards (home page, gallery) ---------- */
.value-strip{display:flex;flex-wrap:wrap;gap:22px;align-items:center;background:var(--surface);border-radius:26px;
  box-shadow:0 0 0 1px var(--line),var(--shadow);padding:26px 28px}
.value-strip .vs{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px}
.value-strip .vs b{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600}
.value-strip .vs span{font-size:14.5px;line-height:1.6;color:var(--muted)}
.value-strip .btn{flex:0 0 auto}
.price-cards{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.pcard{position:relative;flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px;background:var(--surface);
  border-radius:24px;padding:30px 26px 26px;box-shadow:0 0 0 1px var(--line);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.pcard:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.pcard.featured{background:linear-gradient(152deg,#fff 38%,var(--lav));box-shadow:0 0 0 2px var(--accent),0 16px 40px rgba(63,77,174,.16)}
.pcard .flag{position:absolute;top:-12px;left:26px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;box-shadow:0 8px 18px rgba(63,77,174,.28)}
.pcard .pname{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600}
.pcard .pamount{font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:600;line-height:1;letter-spacing:-.02em}
.pcard .pper{font-size:13.5px;color:var(--muted)}
.pcard .checks{margin:4px 0 8px}
.pcard .checks li{font-size:15px}
.pcard .btn{width:100%;margin-top:auto}
@media (max-width:640px){
  .value-strip{padding:22px 20px;gap:16px}
  .pcard{padding:26px 22px 22px}
}

/* ---------- print ---------- */
@media print{
  header.site,footer.site,.totop,.toast,.sheet,.progress,.searchwrap,.btns,.crumbs,.filterbar,.recent{display:none!important}
  body{background:#fff}
  body::before{display:none}
  .sec{padding:18px 0!important;gap:18px}
  .lesson,.term,.card,.hub-card,.person{box-shadow:none!important;border:1px solid #ddd;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .rv,.js .pop{opacity:1!important;transform:none!important}
}