/* Samatva: a quiet letterpress-and-pine look. Paper with a green cast, pine ink, one denim accent for actions. */
:root{--paper:#f5f6f1;--card:#ffffff;--ink:#1f2622;--muted:#5b655e;--line:#d9ddd3;--pine:#2f4a3e;--denim:#2f5d8a;--denim-ink:#fff;--soft:#e8ece4;
--display:"Spectral",Georgia,"Times New Roman",serif;--body:"Source Sans 3",-apple-system,"Segoe UI",system-ui,sans-serif;
--brand:"Playfair Display","Cinzel","Spectral",Georgia,serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#141915;--card:#1b221d;--ink:#e8ece6;--muted:#a3ada5;--line:#2c352f;--pine:#9cc3ad;--denim:#8fb3dd;--denim-ink:#0e1620;--soft:#202a23;color-scheme:dark}}
html[data-theme="dark"]{--paper:#141915;--card:#1b221d;--ink:#e8ece6;--muted:#a3ada5;--line:#2c352f;--pine:#9cc3ad;--denim:#8fb3dd;--denim-ink:#0e1620;--soft:#202a23;color-scheme:dark}
html[data-theme="light"]{--paper:#f5f6f1;--card:#ffffff;--ink:#1f2622;--muted:#5b655e;--line:#d9ddd3;--pine:#2f4a3e;--denim:#2f5d8a;--denim-ink:#fff;--soft:#e8ece4;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--body)}
body,.bar,.card,footer,blockquote{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.in{max-width:980px;margin:0 auto;padding-inline:20px}
a{color:var(--denim)} a:focus-visible,.btn:focus-visible{outline:2px solid var(--denim);outline-offset:3px}
h1,h2,h3{font-family:var(--display);color:var(--pine);line-height:1.2;text-wrap:balance;margin:1.4em 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem)} h2{font-size:1.45rem} h3{font-size:1.2rem;margin:0}
p,li,dd{max-width:68ch}
.bar{border-bottom:1px solid var(--line);background:var(--card)}
.bar .in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:14px}
.logo{font-family:var(--brand);font-weight:700;font-size:1.45rem;color:var(--pine);text-decoration:none;letter-spacing:.02em}
.brand-word{font-family:var(--brand);font-weight:700;text-transform:none;letter-spacing:.02em}
.eyebrow .brand-word{font-size:1.22em;color:var(--pine);letter-spacing:.03em;display:inline-block;vertical-align:baseline;padding:0 2px}
.lede .brand-word{font-size:1.08em;color:var(--pine);font-style:normal;letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:6px 18px} nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem}
nav a[aria-current="page"],nav a:hover{color:var(--pine)}
main{padding-block:12px 56px}
.hero{padding-block:28px 8px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);font-weight:600;margin:0}
.hero h1{margin-top:.2em;font-style:italic}
.lede{font-size:1.15rem;color:var(--muted)}
.btn{display:inline-block;background:var(--denim);color:var(--denim-ink);padding:11px 20px;border-radius:8px;font-weight:600;text-decoration:none}
.link{margin-left:14px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:10px;align-content:start}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.card p{margin:0}
.price{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:.85rem;font-weight:400;color:var(--muted)}
.tag{display:inline-block;background:var(--soft);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600;justify-self:start}
.note{color:var(--muted);font-size:.92rem}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
table{border-collapse:collapse;width:100%;margin-top:22px;display:block;overflow-x:auto;font-size:.95rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px}
.facts dt{font-weight:600;color:var(--muted)} .facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:8px}}
footer{border-top:1px solid var(--line);background:var(--card);padding-block:22px 34px;font-size:.88rem;color:var(--muted)}
footer nav{margin-bottom:10px} footer p{max-width:none}

/* Elias page: portrait beside the introduction, link-in-bio buttons, sayings as quotes */
.elias-hero{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px;align-items:center;padding-block:28px 8px}
.elias-hero img{width:100%;height:auto;border-radius:14px;display:block}
.elias-intro h1{margin:.15em 0 0;font-size:clamp(2.2rem,5vw,3.2rem)}
.motto{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--ink);margin:.2em 0 .6em}
.ai-note{font-size:.92rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px}
.links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.btn.alt{background:transparent;color:var(--denim);border:1.5px solid var(--denim)}
.sayings{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;font-family:var(--display);font-size:1.15rem;line-height:1.45;color:var(--ink)}
blockquote::before{content:"\201C";display:block;font-size:2.2rem;line-height:.8;color:var(--pine)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 24px;margin:0}
.pillars dt{font-weight:600;color:var(--pine)} .pillars dd{margin:2px 0 0;color:var(--muted)}
@media (max-width:720px){.elias-hero{grid-template-columns:minmax(0,1fr)}.elias-hero img{max-width:340px}}
.card .tag{justify-self:start}
.tag.live{background:var(--pine);color:var(--paper)}
.card h3{margin:0}

/* Theme Switch */
.nav-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.theme-switch{background:transparent;border:none;padding:2px;cursor:pointer;display:inline-flex;align-items:center;border-radius:999px;-webkit-tap-highlight-color:transparent}
.theme-switch:focus-visible{outline:2px solid var(--denim);outline-offset:3px}
.switch-track{position:relative;width:44px;height:24px;background:var(--soft);border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;transition:background .2s ease,border-color .2s ease;box-sizing:border-box}
.theme-switch:hover .switch-track{border-color:var(--pine)}
.switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--card);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.4,0,.2,1),background .2s ease;color:var(--pine)}
.switch-thumb svg{position:absolute;width:11px;height:11px;transition:opacity .2s ease,transform .22s cubic-bezier(.4,0,.2,1)}
.switch-thumb .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
.switch-thumb .icon-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .switch-thumb{transform:translateX(20px)}
  :root:not([data-theme="light"]) .switch-thumb .icon-sun{opacity:0;transform:rotate(90deg) scale(.5)}
  :root:not([data-theme="light"]) .switch-thumb .icon-moon{opacity:1;transform:rotate(0deg) scale(1)}
}
html[data-theme="dark"] .switch-thumb{transform:translateX(20px)}
html[data-theme="dark"] .switch-thumb .icon-sun{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme="dark"] .switch-thumb .icon-moon{opacity:1;transform:rotate(0deg) scale(1)}
html[data-theme="light"] .switch-thumb{transform:translateX(0)}
html[data-theme="light"] .switch-thumb .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
html[data-theme="light"] .switch-thumb .icon-moon{opacity:0;transform:rotate(-90deg) scale(.5)}

/* the brand word in the intro: hover or tap to hear the Samatva sound */
.say-samatva{cursor:pointer;border-bottom:1px dotted currentColor;white-space:nowrap;border-radius:3px;outline-offset:2px}
.say-samatva::after{content:" \266A";font-size:.75em;opacity:.5;transition:opacity .3s}
.say-samatva:hover::after,.say-samatva.playing::after{opacity:1}
.say-samatva:focus-visible{outline:2px solid var(--denim)}
.say-samatva.hint::after{content:" \266A tap to hear";font-size:.7em;opacity:.8}
@media (prefers-reduced-motion:no-preference){.say-samatva.playing{animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{50%{text-shadow:0 0 14px var(--pine)}}}

/* entity cards (characters now, partners later): portrait, name, one line */
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.ent-card{display:grid;grid-template-rows:auto 1fr;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ent-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.ent-body{display:grid;gap:6px;padding:14px 16px 18px}
.ent-body b{font-family:var(--display);font-size:1.25rem;color:var(--pine)}
.ent-line{color:var(--muted);font-size:.95rem}
.ent-card .tag{justify-self:start}
.ent-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.ent-card:focus-visible{outline:2px solid var(--denim);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ent-card,.ent-card:hover{transition:none;transform:none}}
.banner{background:var(--soft);border-radius:10px;padding:10px 14px;font-weight:600;color:var(--muted);margin-top:20px}
.notice{border-left:3px solid var(--denim);padding:10px 14px;background:var(--card);border-radius:0 10px 10px 0;color:var(--ink);font-size:.95rem;max-width:none}