/* Nous Within Kenoma: one theme for every page.
   Dark burnt-amber ground, light burnt-amber text, Cascadia Code ExtraLight throughout.
   Black hairline strings and screen cracks are drawn behind the page by site.js. */
@font-face{font-family:"Cascadia Code";font-style:normal;font-weight:200;font-display:swap;
  src:url(cascadia-code-latin-200-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cascadia Code";font-style:normal;font-weight:200;font-display:swap;
  src:url(cascadia-code-latin-ext-200-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cascadia Code";font-style:italic;font-weight:200;font-display:swap;
  src:url(cascadia-code-latin-200-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cascadia Code";font-style:italic;font-weight:200;font-display:swap;
  src:url(cascadia-code-latin-ext-200-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ground:#1b120b;   /* page: dark burnt amber */
  --well:#24180f;     /* raised panels */
  --deep:#140d08;     /* sunk panels */
  --text:#f3d6a6;     /* light burnt amber, the reading text */
  --dim:#c9a274;      /* secondary text */
  --amber:#e9a157;    /* accent */
  --amber-hi:#ffc98a; /* hover */
  --rule:#4d331f;     /* hairlines */
  --string:#000;      /* background strings and cracks */
  --mono:"Cascadia Code","Cascadia Mono",Consolas,"Courier New",monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);color:var(--text)}
body{margin:0;background:transparent;font-family:var(--mono);font-weight:200;font-size:17px;line-height:1.745;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 64px}
svg.strings{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
svg.strings g{stroke:var(--string)}svg.strings rect{fill:var(--string)}
html.th-office button.static-toggle{background:#e6e7ead9;color:var(--dim)}
a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover,a:focus-visible{color:var(--amber-hi);border-color:var(--amber-hi);outline:none}
b,strong{font-weight:400;color:var(--amber-hi)}
.wrap{max-width:78ch;margin:0 auto}
.wide{max-width:1240px;margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:34px}
h1,h2,h3,h4{font-weight:200;letter-spacing:.02em;text-wrap:balance}
h1{color:var(--amber);font-size:clamp(22px,4vw,30px);line-height:1.3;margin:0 0 6px}
.num{display:block;font-size:13px;color:var(--dim);letter-spacing:.24em;margin-bottom:6px;text-transform:uppercase}
.label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
/* reading */
.chapter{margin-top:30px;--lh:1.745;--ind:2em}
.chapter p{margin:0;white-space:pre-wrap;line-height:var(--lh);hyphens:none;overflow-wrap:break-word}
.chapter p.para{text-indent:var(--ind);text-align:justify}
.chapter p.center{text-align:center}
.chapter p.right{text-align:right}
.chapter p.left{text-align:left}
.chapter p.quote{margin:0 7%;text-align:justify}
.chapter p.blank{height:calc(var(--lh) * 1em)}
.chapter em{font-style:italic}
.chapter figure.inline-art{float:left;width:min(44%,330px);margin:8px 24px 14px 0;shape-margin:12px}
.chapter figure.inline-art img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.chapter figure.inline-art figcaption{font-size:12px;color:var(--dim);margin-top:5px;letter-spacing:.04em}
.chapter::after{content:"";display:block;clear:both}
@media (max-width:620px){.chapter figure.inline-art{float:none;width:100%;margin:0 0 18px}}
@font-face{font-family:"Grenze Gotisch";font-style:normal;font-weight:500;font-display:swap;src:url(grenze-gotisch-latin-500-normal.woff2) format("woff2")}
.blackletter h1,.chapter.blackletter{font-family:"Grenze Gotisch","Old English Text MT",serif;font-weight:500}
.blackletter h1{font-size:clamp(28px,5vw,40px);letter-spacing:.02em}
.chapter.blackletter{font-size:21px;letter-spacing:.015em}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px}
.pick{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pick{max-width:100%;min-width:0}.pick select{min-width:0;max-width:100%;text-overflow:ellipsis}   /* a long chapter title must not widen the page on a phone */
.pick label{color:var(--dim);font-size:14px}
select,input[type=search]{font-family:var(--mono);font-weight:200;font-size:15px;background:var(--well);color:var(--text);border:1px solid var(--rule);padding:7px 10px;border-radius:0;max-width:100%}
select:focus-visible,input:focus-visible{outline:1px solid var(--amber)}
.notice{margin:22px 0 30px;padding:4px 0 4px 18px;border-left:1px solid var(--amber);font-size:15.5px;color:var(--dim);position:relative}
.notice p{margin:0 0 10px;position:relative}.notice p:last-child{margin:0}
ol.toc{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
ol.toc a{display:grid;grid-template-columns:4ch minmax(0,1fr);gap:12px;padding:9px 6px;border:0;border-bottom:1px solid #000;color:var(--text)}
ol.toc a:hover,ol.toc a:focus-visible{background:var(--well);color:var(--amber-hi)}
ol.toc .n{color:var(--amber);text-align:right}
/* compact cards, split by black hairlines */
/* v52: every box keeps its whole outline (the group rules above and below were cutting it) */
.cards{display:grid;gap:0}
a.card{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;justify-content:space-between;padding:9px 14px;margin:5px 0;background:var(--well);border:1px solid var(--rule);color:var(--text);font-size:16px;line-height:1.4}
a.card span{color:var(--dim);font-size:13px}
a.card:hover,a.card:focus-visible{border-color:var(--amber);color:var(--amber-hi);outline:none}
a.card>*{position:relative}
.bar,a.card>i.bar{position:absolute;background:#000;pointer-events:none;z-index:1}
/* psychonaut-wiki style index tables */
.ix{border:1px solid var(--rule);background:var(--deep);margin:0 0 22px;position:relative;overflow:hidden}
.ix>h2{margin:0;padding:6px 12px;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-hi);background:var(--well);border-bottom:1px solid #000;text-align:center}
.ix table{width:100%;border-collapse:collapse;position:relative}
.ix th,.ix td{padding:6px 12px;border-top:1px solid #000;vertical-align:top;text-align:left;font-weight:200}
.ix tr:first-child th,.ix tr:first-child td{border-top:0}
.ix th{width:13em;color:var(--dim);font-size:14px;line-height:1.45;letter-spacing:.04em;background:#00000022;border-right:1px solid #000}
.ix td{font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.ix td a{border:0;white-space:nowrap}
.ix td .sep{color:var(--rule);margin:0 .1em 0 .45em}
@media (max-width:640px){.ix th{width:auto;display:block;border-right:0;padding-bottom:2px}.ix td{display:block;border-top:0;padding-top:2px}.ix td a{display:inline-block;white-space:normal;max-width:100%}}
/* the character boxes pack into columns (each box only as tall as its list), so no box stands half empty */
.boxes{columns:250px;column-gap:14px}
.boxes .ix{margin:0 0 14px;break-inside:avoid;display:inline-block;width:100%;vertical-align:top}
.boxes .ix ul{list-style:none;margin:0;padding:4px 12px 6px;position:relative}
.boxes .ix li{padding:2px 0;border-bottom:1px solid #00000066;font-size:15px}
.boxes .ix li:last-child{border-bottom:0}
.boxes .ix li a{border:0}
/* codex entries */
article.entry{border-top:1px solid #000;padding:34px 0 26px;scroll-margin-top:12px}
article.entry:first-of-type{border-top:0}
article.entry h2{font-size:clamp(23px,3.2vw,30px);color:var(--amber);margin:0 0 4px}
.infobox{float:right;width:min(300px,42%);margin:4px 0 16px 24px;border:1px solid var(--rule);background:var(--deep);font-size:13.5px;line-height:1.5;position:relative;overflow:hidden}
.infobox .ib-h{background:var(--well);color:var(--amber-hi);padding:7px 12px;border-bottom:1px solid #000;text-align:center;letter-spacing:.06em}
.infobox table{width:100%;border-collapse:collapse;position:relative}
.infobox th,.infobox td{padding:6px 10px;border-top:1px solid #000;vertical-align:top;text-align:left;font-weight:200}
.infobox tr:first-child th,.infobox tr:first-child td{border-top:0}
.infobox th{color:var(--dim);width:7.5em}
.infobox td a{border:0}
@media (max-width:700px){.infobox{width:48%;margin:4px 0 12px 14px;font-size:11.5px}.infobox th,.infobox td{display:block;padding:4px 8px}.infobox td{border-top:0;padding-top:0}.infobox th{width:auto}}
.lead{color:var(--text);margin:8px 0 14px}
.contents{display:inline-block;border:1px solid var(--rule);background:var(--deep);padding:8px 16px 10px;margin:4px 0 14px;font-size:14px}
.contents b{display:block;color:var(--dim);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2px}
.contents ol{margin:0;padding-left:2.4em}
.contents a{border:0}
article.entry h3{font-size:18px;color:var(--amber-hi);margin:22px 0 6px;padding-bottom:3px;border-bottom:1px solid #000;scroll-margin-top:12px}
article.entry h3 .ch{font-size:12.5px;color:var(--dim);margin-left:10px;letter-spacing:.04em}
article.entry p{margin:0 0 12px;text-align:justify}
article.entry .note{border-left:1px dotted var(--amber);padding-left:12px;color:var(--amber);font-style:italic}
article.entry::after{content:"";display:block;clear:both}
.back-ix{font-size:13px}
/* art */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 22px;align-items:start}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--deep)}
.gallery a{border:0}
.gallery figcaption{font-size:13.5px;margin-top:7px;color:var(--text)}
.gallery figcaption span{display:block;color:var(--dim);font-size:12.5px}
section.art-sec{scroll-margin-top:12px;margin-top:36px}
section.art-sec>h2{font-size:20px;color:var(--amber);border-bottom:1px solid #000;padding-bottom:6px;margin:0 0 18px}
p.intro{max-width:68ch}
@media (max-width:520px){body{font-size:15px}.chapter p.para{text-align:left}article.entry p{text-align:left}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
a.back{font-size:14px}
h2.label{font-weight:200}

/* codex entry pages */
.entry-page h1{margin-bottom:10px}
.entry-page h3{overflow:hidden}
.entry-page h3,.entry-page .kinds{font-weight:200}
.kinds{clear:both;margin-top:30px;border-top:1px solid #000;padding-top:14px}
.kinds h2{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.kinds ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kinds li a{display:inline-block;padding:5px 12px;border:1px solid var(--rule);background:var(--well);font-size:14px}
.kinds li a:hover{border-color:var(--amber)}
a.more-art{font-size:16px;letter-spacing:.04em}
/* static, scanlines, flicker */
canvas.static{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;filter:blur(.6px)}
.scan{position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px,rgba(0,0,0,0) 4px)}
.roll{position:fixed;left:0;right:0;height:22vh;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,240,220,.035),rgba(255,255,255,0));top:-30vh}
.flash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;background:#fff7ea}
.flash.dark{background:#000}
button.static-toggle{position:fixed;right:max(10px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:50;font-family:var(--mono);font-weight:200;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(0,0,0,.55);border:1px solid var(--rule);padding:4px 8px;cursor:pointer}
button.static-toggle:hover,button.static-toggle:focus-visible{color:var(--amber-hi);border-color:var(--amber);outline:none}
/* chapter themes */
html.th-indigo{--ground:#0b0a1a;--well:#121027;--deep:#08071a;--text:#eeeef4;--dim:#a9a8c2;--amber:#d6d6ea;--amber-hi:#ffffff;--rule:#26244a}
html.th-indigo.th-blue{--text:#eceff8}
html.th-crimson{--ground:#2a0507;--well:#36090c;--deep:#1d0304;--text:#f4cfcc;--dim:#c9918d;--amber:#ff8f86;--amber-hi:#ffc2bc;--rule:#5e1a1c}
html.th-black{--ground:#000;--well:#0b0b0b;--deep:#000;--text:#f2f2f2;--dim:#b8b8b8;--amber:#ffffff;--amber-hi:#ffffff;--rule:#3a3a3a}
html.th-black ol.toc a,html.th-black .pager{border-color:#3a3a3a}
/* Kenoma (dull): the burnt amber gone quiet, the orange drained and a faint yellow left in it */
html.th-dull{--ground:#18150f;--well:#201c14;--deep:#110f0a;--text:#e4dabd;--dim:#b2a785;--amber:#c8b273;--amber-hi:#e6d49a;--rule:#3d3524}
/* Office Dark: the same ribbon in charcoal */
html.th-officedark{--ground:#1b1c1f;--well:#26282c;--deep:#151619;--text:#e3e5e8;--dim:#a0a4ab;--amber:#5b9bf0;--amber-hi:#8ab8ff;--rule:#3a3d43;--string:#000}
/* Earth: a night druid's grove: dark soil and moss, pale bone text, lichen-gold light */
html.th-earth{--ground:#0e130d;--well:#151c13;--deep:#0a0e09;--text:#dcd8c0;--dim:#9fa486;--amber:#9bbf5e;--amber-hi:#cfe08c;--rule:#2e3b25;--string:#030502;
  background:radial-gradient(ellipse 120% 70% at 50% -10%,#1d2c18,#0e130d 62%) fixed}
/* Dark Fantasy: an old dungeon behind everything; grey and crimson panels, gold and silver */
html.th-darkfantasy{--ground:#0d0a0e;--well:#1b161cea;--deep:#100c11ee;--text:#dcd9df;--dim:#a49ba6;--amber:#c9a24a;--amber-hi:#efd583;--rule:#5b2830;--string:#000;
  background:linear-gradient(#0a070bb3,#0a070bcc),url(dark-fantasy.png) center/cover fixed;image-rendering:pixelated}
html.th-darkfantasy body{image-rendering:auto}
/* Office: white paper, light grey panels, a blue ribbon accent; inspired by an office suite, not a copy of one */
html.th-office{--ground:#d9dadd;--well:#e6e7ea;--deep:#cfd1d5;--text:#232427;--dim:#575b61;--amber:#2b579a;--amber-hi:#1a3f78;--rule:#b3b6bb;--string:#b3b6bb;color-scheme:light}
.crumbs .arrows a{margin:0 2px}
.crumbs .arrows{color:var(--dim)}
/* rules pages */
.rules h2{font-size:20px;color:var(--amber);margin:34px 0 10px;border-bottom:1px solid #000;padding-bottom:6px}
.rules h3{font-size:16px;color:var(--amber-hi);margin:20px 0 6px}
.rules ul,.rules ol{margin:0 0 12px;padding-left:1.4em}
.rules li{margin:3px 0}
.rules table{border-collapse:collapse;margin:8px 0 14px;font-size:14px;width:100%}
.rules th,.rules td{border-top:1px solid #000;padding:6px 10px;text-align:left;font-weight:200;vertical-align:top}
.rules th{color:var(--dim)}
.rules .formula{display:inline-block;background:var(--deep);border:1px solid var(--rule);padding:4px 10px;margin:4px 0}
.rules .flow{letter-spacing:.06em;color:var(--amber-hi)}

/* v43: the Ether's Crossroads theme on the landing and rules pages too */
html.th-darkfantasy.ecpage main h1{font-family:"Grenze Gotisch","Old English Text MT",serif;font-weight:500;letter-spacing:.02em;color:#d33a46;text-shadow:0 0 12px #8e162280}
html.th-darkfantasy.ecpage .rules h2{color:var(--amber-hi);border-bottom-color:#5b2830}
html.th-darkfantasy.ecpage .rules h3{color:#c4c2cc}
html.th-darkfantasy.ecpage a.card{background:#1a1419e0;border-color:#8a7442;box-shadow:inset 0 0 24px #00000060}
html.th-darkfantasy.ecpage a.card:hover{border-color:var(--amber-hi)}
html.th-darkfantasy.ecpage .rules main,html.th-darkfantasy.ecpage main.rules{background:#0d0a0eb8;padding-left:18px;padding-right:18px;box-shadow:0 0 0 1px #5b283055}
/* v43: the music control on the landing and rules pages */
#ecmusic{position:fixed;left:max(10px,env(safe-area-inset-left,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:rgba(0,0,0,.6);border:1px solid var(--rule);padding:3px 6px}
#ecmusic[hidden]{display:none}
#ecmusic button{font:inherit;color:var(--amber-hi);background:transparent;border:1px solid var(--rule);padding:2px 7px;cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
#ecmusic b{font-weight:400;min-width:3.4em;text-align:center;color:var(--text)}