/* character — scenic-wallpaper grisaille (Zuber / de Gournay): paper ground, slate ink, two drapes of colour, teal and coral.
   day (the wallpaper) is the default; the dot gives the slate night. every grey is a color-mix of --fg. */
:root{
  --bg:#ecebe8;--fg:#2a3036;--teal:#1f5d61;--coral:#d8734e;--on:#ecebe8;
  --serif:'Cormorant Garamond',Georgia,serif;
  --mute:color-mix(in srgb,var(--fg) 45%,transparent);
  --line:color-mix(in srgb,var(--fg) 12%,transparent);
  --card:color-mix(in srgb,var(--fg) 3.5%,transparent);
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:48rem;--side:26rem;color-scheme:light;
}
.dark{--bg:#0c0d0e;--fg:#e6e3dc;--teal:#5fa5a9;--coral:#e08a68;--on:#0c0d0e;color-scheme:dark}
*{box-sizing:border-box}html{overflow-x:clip;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:600 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:underline;text-underline-offset:3px}
b,strong{font-weight:700}h1,h2,h3{font-size:inherit;font-weight:700;margin:0}p,ul{margin:0}ul{padding:0;list-style:none}
.wrap{padding:16px 20px 80px}
@media(min-width:768px){.wrap{padding:12px 64px 80px 24px}}
.side{display:flex;flex-direction:column;gap:2rem}
@media(min-width:768px){.side{display:grid;grid-template-columns:var(--side) 1fr;column-gap:2rem;align-items:start}}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:1.25rem}
.mute{color:var(--mute)}.small{font-size:13px;line-height:1.6}
.label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kv span:first-child{color:var(--mute)}
.pills{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dot{width:16px;height:16px;border-radius:50%;border:1px solid currentColor;background:currentColor;cursor:pointer;padding:0}
.toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);margin-left:6px}
.toggle .dot{color:var(--fg)}
.hr{border:0;border-top:1px solid var(--line);margin:0}
/* engravings: alpha masks painted in --fg, so they invert with the theme */
.em{display:block;background:var(--m) center/contain no-repeat}
.portrait{position:relative;width:100%}
.portrait .em{position:absolute;inset:0}
.portrait .twin{transform:scaleX(-1);opacity:.14;mix-blend-mode:multiply}          /* the anima's mirror */
.group{margin-top:2.5rem}
.prep li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
q{font-style:italic}
/* reading and chat pages */
.doc h2,.doc .title{font-size:inherit;font-weight:700;padding-top:1.25rem}
.doc .lede,.doc .label{font-size:13px;color:var(--mute);text-transform:none;letter-spacing:0}
.doc .part{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);padding-top:1.5rem}
.doc ul{padding-left:0}.doc li{padding:6px 0;border-bottom:1px solid var(--line);font-size:15px;overflow-wrap:anywhere}
.doc .small{font-size:13px}.hist li{padding:10px 0}.doc>p+p{margin-top:.8em}.doc p{overflow-wrap:anywhere}
/* home: filter chips, sortable list of characters */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:6px}
.chips .k{font-size:13px;color:var(--mute);min-width:5.5rem}
.chip{all:unset;cursor:pointer;font-size:13px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.chip{transition:background .2s,color .2s}.chip:hover{color:var(--fg);border-color:var(--mute)}.chip.on{color:var(--on);background:var(--fg);border-color:var(--fg)}
.chips[data-dim=type] .chip.on:not([data-v=""]){background:var(--teal);border-color:var(--teal)}.chips[data-dim=access] .chip.on:not([data-v=""]){background:var(--coral);border-color:var(--coral)}
.ch{display:grid;grid-template-columns:40px minmax(0,1fr) 10rem 3rem;column-gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ch .em{width:40px;height:40px;transition:transform .25s cubic-bezier(.3,1.6,.6,1),filter .25s}.ch:hover .em{transform:translateY(-3px) rotate(-2deg) scale(1.12);filter:drop-shadow(0 4px 4px color-mix(in srgb,var(--fg) 25%,transparent))}
.ch b,.serif,header b,.doc .title{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.005em}header b{font-size:24px;font-style:italic}
.frieze{height:var(--fh,128px);margin:14px -64px 0 -24px;background:url(/emblems/frieze.webp) repeat-x 0 0/auto 100%;border-block:3px double color-mix(in srgb,var(--fg) 45%,transparent);animation:drift 180s linear infinite}
@keyframes drift{to{background-position:calc(var(--fh,128px) * -1704 / 260) 0}}
@media(prefers-reduced-motion:reduce){.frieze{animation:none}}
.dark .frieze,.dark .em,.dark .portrait{filter:brightness(.85)}
.sprig{display:flex;align-items:center;gap:12px;color:var(--fg);margin:1.5rem 0}.sprig::before,.sprig::after{content:"";flex:1;border-top:1px solid var(--line)}
.ch .ln{font-size:14px;color:var(--mute);font-weight:500;display:block;margin-top:1px}
.ch .bm,.ch .yr{font-size:13px;color:var(--mute)}.ch .yr{text-align:right}.ch .sub{display:none}
@media(max-width:640px){.ch{grid-template-columns:40px minmax(0,1fr)}.ch .bm,.ch .yr{display:none}.ch .sub{display:block;font-size:12px;color:var(--mute);margin-top:2px}}
.count{font-size:13px;color:var(--mute)}
.plate{position:relative;width:100%;aspect-ratio:1;max-width:22rem}.plate .em{position:absolute;inset:0}
.facts p{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}.facts span.k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
details summary{cursor:pointer}
/* search: straight to a character */
.top{flex-wrap:nowrap}.search{position:relative;flex:1;max-width:22rem;margin:0 16px}
.search input{all:unset;box-sizing:border-box;width:100%;font:500 14px var(--sans);padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.search input:focus{border-color:var(--teal)}
.qr{position:absolute;z-index:9;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px color-mix(in srgb,var(--fg) 15%,transparent);padding:4px;font-size:14px}
.qr a{display:block;padding:6px 10px;border-radius:6px;text-decoration:none}.qr a span{color:var(--mute);font-size:12px}.qr a:hover,.qr a.first{background:color-mix(in srgb,var(--teal) 14%,transparent)}.qr p{padding:6px 10px;color:var(--mute)}
/* home: filters in the sidebar, sticky; one toggle on the phone */
.home aside{position:sticky;top:16px;align-self:start}.cp aside{position:static}
.filters summary{display:none;list-style:none}.filters summary::-webkit-details-marker{display:none}
.filters .chips{gap:5px;margin-top:16px}.filters .chips .k{flex-basis:100%;margin-bottom:0}.chip[hidden]{display:none}
.rd{border-bottom:1px solid var(--line)}.rd summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:10px 0;cursor:pointer}.rd summary::-webkit-details-marker{display:none}
.rd .tt b{font:700 19px/1.25 var(--serif)}.rd .by{display:block;font-size:13px;color:var(--mute);font-weight:500}.rd summary:hover b{text-decoration:underline;text-underline-offset:3px}
.rd[open] summary .tag{background:var(--teal);color:var(--on);border-color:var(--teal)}.rd>p{padding:0 0 14px 22px;font-size:15px;max-width:40rem}
.pp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.pp b{font:700 19px var(--serif)}.pp .aff{font-size:13px;color:var(--mute)}.pp .ln{display:block;font-size:14px;font-weight:500;color:color-mix(in srgb,var(--fg) 75%,transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp .lk{font-size:12px;text-align:right}.pp .lk a{color:var(--mute)}.pp .lk a:hover{color:var(--teal)}
.foot{margin-top:.5rem}.foot p{font-size:12px}.foot details{margin-bottom:10px}.foot ul{padding-left:1rem;list-style:disc;margin-top:6px}
/* character page: a portrait */
.wide{max-width:72rem;margin-top:1rem}.crumbs a{text-decoration:none}
.hero h1{font-size:60px;line-height:1}.hero{margin-top:.25rem}.aka{color:var(--mute);margin-top:6px}.lede{font:600 23px/1.35 var(--serif);margin-top:14px;max-width:34rem}
.meet{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-block;padding:4px 14px;border:1px solid var(--fg);border-radius:999px;font-size:14px;text-decoration:none;transition:background .2s,color .2s}.btn:hover{background:var(--fg);color:var(--bg)}
.story{margin-top:2rem}.intro{font-size:18px;line-height:1.6;font-weight:500}
.voice{margin:0;padding:2px 0 2px 18px;border-left:1px solid var(--fg);font:600 20px/1.45 var(--serif)}.voice p+p{margin-top:8px}
.voice .who{display:block;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}.voice cite{display:block;font:500 13px var(--sans);margin-top:10px;color:var(--mute)}
.steps{counter-reset:s;padding:0;list-style:none}.steps li{counter-increment:s;position:relative;padding:8px 0 8px 32px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s, lower-roman) ".";position:absolute;left:0;top:6px;font:italic 700 19px var(--serif);color:var(--mute)}
.card{margin-top:4px}
.card p{padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.card p:last-child{border:0}.card .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--mute);white-space:nowrap;display:inline-block}
.nearby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.chips:not(.all) .chip.x:not(.on){display:none}.chip.more{border-style:dashed}
.na{color:var(--mute);font-size:15px;font-weight:500;font-style:italic;max-width:34rem}.home aside .card{margin-top:4px}
.site{margin-top:3rem;font-size:12px;color:var(--mute)}
.near{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;padding:12px;border:1px solid var(--line);border-radius:6px}
.near .em{width:48px;height:48px;transition:transform .25s cubic-bezier(.3,1.6,.6,1)}.near:hover .em{transform:translateY(-3px) rotate(-2deg) scale(1.1)}
.near b{font:700 19px var(--serif)}.near .ln{display:block;font-size:13px;color:var(--mute);font-weight:500}
@media(max-width:767px){.rd summary{grid-template-columns:auto minmax(0,1fr)}.rd summary .tag{grid-column:2;justify-self:start}.pp{grid-template-columns:1fr}.pp .lk{text-align:left}.wrap{padding-left:16px;padding-right:16px}.top{flex-wrap:wrap;gap:0 8px}.top nav{font-size:min(13px,3.3vw);gap:5px;flex-wrap:nowrap;white-space:nowrap}.top nav .toggle{margin-left:2px}.top b{font-size:min(19px,4.7vw);white-space:nowrap}#filters{display:none}.filters .chips{max-width:calc(100vw - 40px)}.search{order:3;flex-basis:100%;max-width:none;margin:10px 0 0}.side>*{min-width:0}
.home aside{position:static;align-self:stretch}.filters summary{display:inline-block;color:var(--fg);border-color:var(--fg);margin-top:4px}.filters summary::after{content:" ▾"}.filters[open] summary::after{content:" ▴"}
.filters .chips{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;align-items:baseline;margin-top:10px}
.hero h1{font-size:44px}.lede{font-size:20px}.nearby{grid-template-columns:1fr}}
@media(max-width:767px){.frieze{--fh:120px;margin:12px -16px 0}}
@media(max-width:767px){.cp .side>aside{display:contents}.cp .portrait{order:-1}.cp aside .card{order:2}}
@media(max-width:640px){.portrait{max-width:12rem;margin-left:auto;margin-right:auto}.home .side{gap:.75rem;margin-top:1rem!important}.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.chips .k{min-width:4.5rem;flex:none}.chip{flex:none}}
.ev{font-size:11px;color:var(--mute);margin-right:4px;cursor:help;vertical-align:1px}
.doc li .mute{font-size:13px}.doc li p{margin-top:2px}