/* ===========================================================================
   Snow Drop — the game's stylesheet.
   Built from the approved interface boards (Visuals/UI/redesign: snowdrop.css and
   ornaments.css), made responsive for real pages of any length. Every colour is an
   art-bible anchor or a value derived from one; no Darklands interface asset is used.
   The page's security policy allows no inline styles, so nothing here expects one.
   =========================================================================== */

:root{
  --cream:#F2E7CD; --ink:#292820; --forest:#36513C; --blue:#566D80;
  --vermilion:#B84736; --plum:#533548; --gold:#AD8544;

  --rail:#251A28; --rail-deep:#1A1119; --rail-lit:#2C1F30;
  --gold-lit:#D2AC70; --gold-dim:rgba(173,133,68,.38);
  --parch:#E7D6B2; --blue-lit:#8FAAC0; --blue-deep:#3E5F79; --rose:#E2937F;

  --ink-62:rgba(41,40,32,.62); --ink-56:rgba(41,40,32,.56);
  --rule:rgba(86,58,40,.34); --rule-faint:rgba(86,58,40,.16);
  --cr-78:rgba(242,231,205,.78); --cr-62:rgba(242,231,205,.62);
  --cr-48:rgba(242,231,205,.48); --cr-38:rgba(242,231,205,.38);

  --prose:19.5px;
  --page-x:80px; --page-top:56px; --page-bottom:44px;
}
.text-large{--prose:21.5px}
.text-larger{--prose:23.5px}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#15100F;-webkit-text-size-adjust:100%}
body{background:#15100F;color:var(--ink);font-family:'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased;min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
ul,ol{list-style:none}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--cream);color:var(--ink);padding:8px 14px;font-family:'IM Fell English SC',serif;letter-spacing:.12em}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}

/* ---------- grain on cloth; painted fibre on paper ---------- */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.14;
}
.paper-grain{position:absolute;inset:6px;z-index:4;pointer-events:none}
.frame:not(.night) .paper-grain{mix-blend-mode:soft-light;opacity:.7}
.frame:not(.night) .paper-grain::after{
  background-image:url("/assets/ornaments/paper-texture.webp");background-size:512px 512px;background-repeat:repeat;
  mix-blend-mode:normal;opacity:1;
}

/* ===================== DARK FIELD: rail and phone chrome ===================== */
.dark{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(120,84,120,.22) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,var(--rail-lit) 0%, var(--rail) 38%, var(--rail-deep) 100%);
}
.wordmark{
  font-family:'UnifrakturMaguntia',serif;color:var(--gold-lit);text-align:center;line-height:.98;
  letter-spacing:.5px;text-shadow:0 1px 0 rgba(0,0,0,.65);font-size:39px;
}
.wordmark .sub{display:block;font-family:'IM Fell English SC',serif;font-size:10.5px;letter-spacing:.30em;color:var(--cr-38);margin-top:9px;text-indent:.30em}

/* the painted divider */
.orn{height:24px;margin:22px 0 24px;background:url("/assets/ornaments/divider.webp") center/auto 100% no-repeat}
.hrule{height:34px;margin:22px 0 30px;background:url("/assets/ornaments/divider.webp") center/auto 100% no-repeat}
.ornp{height:30px;margin:14px 0 18px;background:url("/assets/ornaments/divider.webp") center/auto 100% no-repeat}

/* portrait plate: a book plate, not an avatar */
.plate{
  position:relative;padding:5px;width:174px;height:215px;margin:0 auto;
  background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.55);
}
.plate .crop{width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:var(--cream);filter:saturate(.94) contrast(1.02)}
.plate i{position:absolute;width:7px;height:7px;background:var(--gold);opacity:.85;transform:rotate(45deg);z-index:2}
.plate i:nth-child(1){top:-4px;left:-4px}.plate i:nth-child(2){top:-4px;right:-4px}
.plate i:nth-child(3){bottom:-4px;left:-4px}.plate i:nth-child(4){bottom:-4px;right:-4px}

.who{text-align:center;margin-top:20px}
.who .n{font-family:'IM Fell English',serif;font-size:27px;color:var(--cream);line-height:1}
.who .d{font-family:'IM Fell English',serif;font-style:italic;font-size:14.5px;color:var(--cr-48);margin-top:9px}
.who .aka{margin-top:4px;font-size:13.5px}

.state{margin-top:22px}
.row{margin-bottom:18px}
.row .lab,.tr{display:flex;align-items:baseline;gap:6px}
.row .lab{font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:.13em;color:rgba(242,231,205,.58)}
.row .lab i,.tr i{flex:1;height:0;border-bottom:1px dotted rgba(173,133,68,.30);transform:translateY(-3px)}
.row .lab b{font-family:'IM Fell English',serif;font-weight:400;letter-spacing:0;font-size:14.5px;color:var(--cream)}

.pips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pips u{width:15px;height:15px;text-decoration:none;background:linear-gradient(180deg,#5C8261,#334C39);border:1px solid rgba(173,133,68,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.pips u.out{background:rgba(0,0,0,.42);box-shadow:none}

/* gauges are small SVGs: the fill is a rect, so no inline style is needed */
svg.gauge{width:100%;height:9px;margin-top:6px;border:1px solid rgba(173,133,68,.34);padding:1px;background:rgba(0,0,0,.42)}
svg.gauge .g-bg{fill:transparent}
svg.gauge .g-fill{fill:#B08A4A}

.cond{margin-top:20px;padding:9px 12px;border:1px solid rgba(184,71,54,.45);background:linear-gradient(180deg,rgba(184,71,54,.20),rgba(184,71,54,.07));display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cond .k{font-family:'IM Fell English SC',serif;font-size:11.5px;letter-spacing:.14em;color:rgba(242,231,205,.55)}
.cond .v{font-family:'IM Fell English',serif;font-size:16px;color:var(--rose);text-align:right}
.cond.ok{border-color:rgba(54,81,60,.60);background:linear-gradient(180deg,rgba(54,81,60,.28),rgba(54,81,60,.08))}
.cond.ok .v{color:#9DBCA2}

.remem{margin-top:22px;padding-left:11px;border-left:2px solid rgba(54,81,60,.85)}
.remem .k{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.14em;color:rgba(242,231,205,.42)}
.remem .v{font-size:14.5px;line-height:1.38;color:var(--cr-78);margin-top:5px}

.tab{margin-bottom:22px}
.th{font-family:'IM Fell English SC',serif;font-size:10.5px;letter-spacing:.16em;color:rgba(173,133,68,.80);margin-bottom:5px}
.tr{font-size:15px;color:rgba(242,231,205,.72);padding:3.5px 0}
.tr b{font-family:'IM Fell English',serif;font-weight:400;font-size:15px;color:var(--cream);white-space:nowrap}
.tr b.bad{color:var(--rose)} .tr b.good{color:#8FB894} .tr b.nil{color:var(--cr-38);font-style:italic}
.tr.sub{font-style:italic;font-size:13px;color:var(--cr-38);padding-top:0}

.nav a{display:flex;align-items:baseline;gap:9px;text-decoration:none;font-family:'IM Fell English',serif;font-size:17px;color:var(--cr-62);padding:6.5px 0 6.5px 2px}
.nav a s{text-decoration:none;color:transparent;font-size:11px;transform:translateY(-2px)}
.nav a.on,.nav a.on s{color:var(--gold-lit)}
.nav a:hover{color:var(--cream)}
.railfoot{margin-top:22px;padding-top:14px;border-top:1px solid rgba(173,133,68,.20);display:flex;justify-content:space-between;gap:10px;font-family:'IM Fell English SC',serif;font-size:10.5px;letter-spacing:.12em}
.railfoot a{color:rgba(242,231,205,.40);text-decoration:none}
.railfoot a:hover,.railfoot a.on{color:var(--gold-lit)}

/* ===================== the application frame ===================== */
.app{display:grid;grid-template-columns:302px minmax(0,1fr);min-height:100vh}
/* The rail stays in view; if the window is short, its upper part scrolls and the
   navigation stays at the foot. */
.rail{
  position:sticky;top:0;height:100vh;
  padding:32px 30px 26px;border-right:1px solid rgba(0,0,0,.6);display:flex;flex-direction:column;
}
.rail-body{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(173,133,68,.35) transparent;margin-right:-12px;padding-right:12px}
.rail .nav,.rail .railfoot,.rail .tab.carried{flex:none}
.rail .tab.carried{margin-bottom:0;padding-top:16px}
.rail::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:6px;pointer-events:none;
  background:linear-gradient(90deg,rgba(173,133,68,0) 0%,rgba(173,133,68,.30) 45%,rgba(173,133,68,.62) 50%,rgba(173,133,68,.12) 56%,rgba(0,0,0,.45) 100%);
}
.rail .nav{margin-top:auto;padding-top:14px;border-top:1px solid rgba(173,133,68,.16)}
@media (max-height:1000px) and (min-width:1000px){
  .rail{padding-top:24px}
  .wordmark{font-size:33px}
  .rail .orn{margin:14px 0 16px;height:20px}
  .rail .state + .orn{display:none}
  .rail .state{margin-bottom:20px}
  .plate{width:132px;height:163px}
  .who{margin-top:14px}
  .who .n{font-size:24px}
  .state{margin-top:16px}
  .row{margin-bottom:13px}
  .cond{margin-top:14px}
  .remem{margin-top:16px}
  .tab{margin-bottom:16px}
  .nav a{padding:4px 0 4px 2px;font-size:16px}
  .railfoot{margin-top:14px;padding-top:10px}
}
.mtop,.mnav,.mfoot{display:none}

.field{position:relative;background:linear-gradient(180deg,#1E1517,#120D0E);padding:20px 22px 22px 20px;min-width:0}
.field.single{min-height:100vh}

/* ===================== the paper frame ===================== */
.frame{
  /* A cream page: its radio buttons, pickers and fields stay light even when the device is in dark mode. */
  color-scheme:light;
  position:relative;overflow:hidden;background-color:var(--cream);min-height:calc(100vh - 42px);
  display:flex;flex-direction:column;
  border:1px solid rgba(86,58,40,.70);
  box-shadow:inset 0 0 0 4px var(--cream), inset 0 0 0 5px rgba(173,133,68,.85), inset 0 0 0 6px rgba(173,133,68,.22), 0 10px 34px rgba(0,0,0,.55);
}
.frame > i.c{position:absolute;z-index:8;width:80px;height:87px;background:url("/assets/ornaments/corner.webp") 0 0/100% 100% no-repeat;pointer-events:none}
.c1{top:4px;left:4px}.c2{top:4px;right:4px;transform:scaleX(-1)}
.c3{bottom:4px;left:4px;transform:scaleY(-1)}.c4{bottom:4px;right:4px;transform:scale(-1,-1)}

.page{position:relative;z-index:5;flex:1 0 auto;padding:var(--page-top) var(--page-x) var(--page-bottom);display:flex;flex-direction:column}
.page > .stamp{margin-top:auto;padding-top:34px}
.page.narrow > *{max-width:760px}
/* On a computer screen the reading pages set one column as wide as their text, centred on the paper, so that the running
   head, the title, the ornaments, the text and the choices share one axis with even margins either side (the author,
   5 October 2026: the paper had stood half empty on the right of a wide screen). The wide pages keep the paper's width,
   and the night plates their own composition. */
@media (min-width:1000px){
  .frame:not(.night) > .page:not(.board){width:100%;max-width:calc(34 * var(--prose) + 2 * var(--page-x));margin-left:auto;margin-right:auto}
  .frame > .page.narrow{width:100%;max-width:calc(760px + 2 * var(--page-x));margin-left:auto;margin-right:auto}
}
.frame.art-band .page{padding-bottom:20px}

/* running head, as a printed book carries it */
.rh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:'IM Fell English SC',serif;font-size:11.5px;letter-spacing:.18em;color:var(--ink-62)}
.rh i{flex:1;min-width:24px;height:0;border-bottom:1px solid rgba(86,58,40,.28);transform:translateY(-4px)}
.rh em{font-style:normal;color:rgba(41,40,32,.48)}

h1{font-family:'IM Fell English',serif;font-weight:400;font-size:47px;line-height:1.08;color:var(--ink);margin:24px 0 0;letter-spacing:-.005em;text-wrap:balance}
h1.h2{font-size:34px;margin-top:4px}
.byline{font-style:italic;font-size:16px;color:var(--ink-56);margin-top:11px}
.reader-label{margin-top:26px;font-family:'IM Fell English SC',serif;font-size:11.5px;letter-spacing:.18em;color:rgba(210,172,112,.90)}

/* ---------- prose ---------- */
.prose{font-size:var(--prose);line-height:1.62;color:var(--ink);max-width:34em;hyphens:auto;text-align:justify}
.prose p{margin-bottom:17px;text-indent:1.15em}
.prose p:first-child,.prose p.aside,.prose p.bold,.prose .ph + p{text-indent:0}
/* A first paragraph shorter than the painted initial would leave the next one's first line
   pushed aside by it (C2-20 on a tablet); the next paragraph starts below the initial instead.
   With a longer first paragraph this changes nothing. */
.prose p:first-child + p{clear:left}
.prose p.aside{font-style:italic;color:#3B3428;font-size:.94em}
.prose p.bold{font-weight:600}
.prose a{color:var(--blue-deep)}
.prose::after{content:"";display:table;clear:both}

/* the painted initial, with the letter live in its plum opening */
.dropcap{
  float:left;width:96px;height:99px;margin:4px 20px 6px -4px;
  background:
    url("/assets/ornaments/initial-frame.webp") 0 0/100% 100% no-repeat,
    linear-gradient(160deg,#63415A,var(--plum) 52%,#38222F) 19px 18px/58px 63px no-repeat;
  font-family:'IM Fell English',serif;font-size:50px;line-height:99px;
  color:#EFDFBC;text-align:center;text-indent:0;text-shadow:0 1px 2px rgba(0,0,0,.55);
}
/* The first word as a screen reader hears it: left out of a copy, which takes the word as drawn. */
.dropcap + .vh{-webkit-user-select:none;user-select:none}

/* ---------- choices: ellipsis-led text, never boxes ---------- */
.choices{display:block}
.ask{margin:32px 0 12px;font-family:'IM Fell English SC',serif;font-size:12.5px;letter-spacing:.17em;color:rgba(83,53,72,.85)}
.ch{
  position:relative;display:block;width:100%;text-align:left;text-decoration:none;cursor:pointer;
  background:none;border:0;border-radius:0;
  font-family:'EB Garamond',Georgia,serif;font-size:20px;line-height:1.42;color:#33301F;padding:7px 0 7px 30px;
}
.ch .el{color:rgba(86,58,40,.52)}
.ch .tag{font-style:italic;font-size:16px;color:rgba(83,53,72,.72)}
.ch .sub,.ch .why{display:block;font-style:italic;font-size:15px;line-height:1.4;color:rgba(41,40,32,.55);margin-top:2px}
.ch::before{content:"";position:absolute;left:7px;top:15px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);opacity:0}
.ch:hover,.ch:focus-visible{color:var(--blue-deep)}
.ch:hover::before,.ch:focus-visible::before{opacity:1}
.ch:hover .el,.ch:focus-visible .el{color:rgba(62,95,121,.55)}
.ch:hover .tag,.ch:focus-visible .tag{color:rgba(62,95,121,.75)}
.ch:focus-visible{outline:1px dotted rgba(62,95,121,.6);outline-offset:0}
.ch.off{cursor:default;color:rgba(41,40,32,.40)}
.ch.off::before{display:none}
.ch.off .why{color:rgba(41,40,32,.55)}
.ch.secondary{font-size:17px;color:rgba(83,53,72,.85);margin-top:10px;font-style:italic}
a.ch{display:block}

.note{margin-top:22px;font-style:italic;font-size:15.5px;color:var(--ink-56);max-width:42em}
.ending{margin-top:30px;padding-top:6px}
.notice{margin:18px 0 0;padding:9px 12px;border-left:2px solid rgba(173,133,68,.70);background:rgba(173,133,68,.10);font-style:italic;font-size:16px;color:rgba(41,40,32,.75);max-width:42em}
.notice.bad{border-left-color:rgba(184,71,54,.60);background:rgba(184,71,54,.08)}
.lede{margin-top:18px;font-style:italic;font-size:17px;line-height:1.45;color:rgba(41,40,32,.66);max-width:44em}

.stamp{display:flex;align-items:baseline;gap:10px;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.16em;color:rgba(41,40,32,.52)}
.stamp i{flex:1;height:0;border-bottom:1px solid rgba(86,58,40,.22);transform:translateY(-4px)}

/* ---------- headings inside the paper ---------- */
.ph{font-family:'IM Fell English SC',serif;font-weight:400;font-size:12px;letter-spacing:.17em;color:rgba(83,53,72,.85);margin-bottom:13px;display:flex;align-items:baseline;gap:9px}
.ph i{flex:1;height:0;border-bottom:1px solid rgba(86,58,40,.26);transform:translateY(-4px)}
.ph em{font-style:normal;color:rgba(41,40,32,.48)}

/* ===================== the result of the last choice (board 04) ===================== */
.result{margin-top:28px;max-width:42em}
.chosen{font-size:20px;line-height:1.42;color:#33301F;margin-bottom:8px}
.chosen .el{color:rgba(86,58,40,.52)}
.result > .byline{margin-top:4px;margin-bottom:14px}
.throw{margin:4px 0 2px;overflow:hidden}
.die{
  float:left;width:66px;height:66px;margin:2px 16px 6px 0;
  background:linear-gradient(160deg,#63415A,var(--plum) 52%,#38222F);border:1px solid rgba(210,172,112,.80);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.40), inset 0 0 16px rgba(0,0,0,.38);
  font-family:'IM Fell English',serif;font-size:44px;line-height:64px;color:#EFDFBC;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.sum{overflow:hidden;max-width:420px}
.sr{display:flex;align-items:baseline;gap:8px;font-size:17px;color:var(--ink);padding:2.5px 0}
.sr i{flex:1;height:0;border-bottom:1px dotted rgba(86,58,40,.32);transform:translateY(-4px)}
.sr b{font-family:'IM Fell English',serif;font-weight:400;font-size:18px;min-width:30px;text-align:right}
.sr.tot{margin-top:5px;padding-top:7px;border-top:1px solid rgba(86,58,40,.42);font-family:'IM Fell English',serif;font-size:19px}
.sr.tot b{font-size:22px}
.verdict{clear:both;margin-top:13px;padding:9px 12px;max-width:520px;border:1px solid rgba(184,71,54,.45);background:rgba(184,71,54,.10);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.verdict .k{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.15em;color:rgba(41,40,32,.56)}
.verdict .v{font-family:'IM Fell English',serif;font-size:21px;color:#8E3B2C;text-align:right}
.verdict.ok{border-color:rgba(54,81,60,.55);background:rgba(54,81,60,.10)}
.verdict.ok .v{color:var(--forest)}
.learn{margin-top:12px;padding-left:12px;border-left:2px solid rgba(54,81,60,.70);font-size:16px;line-height:1.42;color:rgba(41,40,32,.70);max-width:520px}
.learn b{font-family:'IM Fell English',serif;font-weight:400;color:var(--forest)}
.spent{margin-top:18px;padding-top:14px;border-top:1px solid rgba(86,58,40,.22)}
.result > .spent:first-child{margin-top:0;padding-top:0;border-top:0}
.panel .ph ~ .ph{margin-top:30px}
.onceonly{margin-top:12px;font-style:italic;font-size:14.5px;line-height:1.45;color:rgba(41,40,32,.55);max-width:520px}
/* a new player's hint (Planning/30): once, under the thing it explains */
.hint{margin-top:12px;padding-left:12px;border-left:2px solid rgba(173,133,68,.75);font-size:15.5px;line-height:1.42;color:rgba(41,40,32,.72);max-width:560px}
.gains{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:'IM Fell English',serif;font-size:15.5px;color:rgba(41,40,32,.66)}
.gains li{position:relative;padding-left:14px}
.gains li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.gains .g-xp{color:#6E5427}
.gains .g-condition,.gains .g-hp{color:#8E3B2C}
.gains .g-recovered,.gains .g-level,.gains .g-learn,.gains .g-growth{color:var(--forest)}
.gains a{color:var(--blue-deep)}

/* ===================== pictures ===================== */
/* The scene sits at the foot of the page, its top feathered into the paper: the text
   always has plain paper under it, and the illustration keeps its own colour. */
.band{position:relative;z-index:3;margin:0 6px 6px;flex:none}
/* Each crop is composed for its purpose (Planning/09), so it is shown whole: only a picture
   taller than the window is trimmed, from the foot. */
.band img{width:100%;height:auto;max-height:88vh;object-fit:cover;object-position:50% 20%;filter:saturate(1.08) contrast(1.06)}
.band.feather-soft img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.band.feather-light img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%);mask-image:linear-gradient(180deg,transparent 0,#000 11%)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,20,20,0) 70%,rgba(18,20,20,.30) 88%,rgba(18,20,20,.62) 100%)}
.band .stamp{position:absolute;z-index:2;left:var(--page-x);right:var(--page-x);bottom:30px;color:var(--cr-78);text-shadow:0 0 7px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.85)}
.band .stamp i{border-bottom-color:rgba(242,231,205,.22)}

/* a small or square detail, framed like a plate in a book */
.inset{margin:34px auto 6px;max-width:560px;padding:6px;background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55);box-shadow:0 6px 18px rgba(0,0,0,.30)}
.inset img{width:100%;height:auto;filter:saturate(1.05) contrast(1.04)}

/* ===================== NIGHT PLATE (board 07) =====================
   The scene fills the panel and the prose turns to light on dark; the frame, the initial
   and the choices are unchanged. The text keeps to the side away from the subject. */
.frame.night{
  background-color:#120C13;border-color:rgba(0,0,0,.85);
  box-shadow:inset 0 0 0 4px #120C13, inset 0 0 0 5px rgba(173,133,68,.80), inset 0 0 0 6px rgba(173,133,68,.20), 0 10px 34px rgba(0,0,0,.65);
}
.nightart{position:absolute;top:6px;right:6px;width:64%;height:min(calc(100% - 12px),calc(100vh - 54px));z-index:1;overflow:hidden}
.subject-left .nightart{right:auto;left:6px}
.nightart picture,.nightart img{width:100%;height:100%}
/* The picture keeps to the first screen and to the side away from the text; its inner edge
   and its foot fade into the dark plate. */
.nightart img{
  object-fit:cover;object-position:70% 50%;filter:saturate(.9) brightness(.92);
  -webkit-mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);
  mask-composite:intersect;
}
.subject-left .nightart img{
  object-position:22% 20%;
  -webkit-mask-image:linear-gradient(to right,#000 58%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,#000 58%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);
}
.nightart::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,7,10,.72) 0%, rgba(10,7,10,.40) 30%, rgba(10,7,10,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 22%);
}
.subject-left .nightart::after{
  background:
    linear-gradient(270deg, rgba(10,7,10,.72) 0%, rgba(10,7,10,.40) 30%, rgba(10,7,10,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 22%);
}
.frame.night .page > *{max-width:600px}
.frame.night.subject-left .page{align-items:flex-end}
.frame.night.subject-left .page > *{width:100%}
.night .rh{color:rgba(239,227,198,.62)}
.night .rh i{border-bottom-color:rgba(173,133,68,.34)}
.night .rh em{color:rgba(239,227,198,.42)}
.night h1{color:#F0E4C7;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.night .byline{color:rgba(239,227,198,.58)}
.night .prose{color:#EDE1C4;text-shadow:0 1px 6px rgba(0,0,0,.60)}
.night .prose p.aside{color:rgba(237,225,196,.80)}
.night .dropcap{background:url("/assets/ornaments/initial-frame.webp") 0 0/100% 100% no-repeat, linear-gradient(160deg,#6B4761,#4A2F42 52%,#2A1A26) 19px 18px/58px 63px no-repeat;color:#F4E7C6}
.night .ask{color:rgba(210,172,112,.90)}
.night .ch{color:rgba(237,225,196,.86);text-shadow:0 1px 6px rgba(0,0,0,.60)}
.night .ch .el{color:rgba(237,225,196,.46)}
.night .ch .tag,.night .ch .sub,.night .ch.off .why{color:rgba(210,172,112,.70)}
.night .ch.off{color:rgba(237,225,196,.46)}
.night .ch:hover,.night .ch:focus-visible{color:#A8C3DA}
.night .note,.night .gains{color:rgba(239,227,198,.58);text-shadow:0 1px 6px rgba(0,0,0,.60)}
.night .stamp{color:rgba(239,227,198,.52)}
.night .stamp i{border-bottom-color:rgba(239,227,198,.18)}
.night .ph{color:rgba(210,172,112,.85)}
.night .ph i{border-bottom-color:rgba(173,133,68,.30)}
.night .chosen,.night .sr{color:#EDE1C4}
/* a throw's verdict and learning on the dark plate (C2-11: the hands, known) */
.night .verdict{background:rgba(184,71,54,.16)}
.night .verdict .k{color:rgba(239,227,198,.55)}
.night .verdict .v{color:var(--rose)}
.night .verdict.ok{border-color:rgba(157,188,162,.45);background:rgba(54,81,60,.24)}
.night .verdict.ok .v{color:#9DBCA2}
.night .learn{color:rgba(237,225,196,.72);border-left-color:rgba(157,188,162,.60)}
.night .learn b{color:#9DBCA2}
.night .onceonly{color:rgba(239,227,198,.58)}
.night .hint{color:rgba(239,227,198,.74);border-left-color:rgba(210,172,112,.70)}
.night .gains .g-xp{color:var(--gold-lit)}
.night .gains .g-condition,.night .gains .g-hp{color:var(--rose)}
.night .gains .g-recovered,.night .gains .g-level,.night .gains .g-learn,.night .gains .g-growth{color:#9DBCA2}
.night .sr i{border-bottom-color:rgba(173,133,68,.30)}
.night .sr.tot{border-top-color:rgba(173,133,68,.42)}

/* ===================== panels inside a passage ===================== */
.panel{margin-top:30px;max-width:42em}
.panel-note{margin:4px 0 12px;font-style:italic;font-size:15.5px;line-height:1.45;color:rgba(41,40,32,.62)}
.panel-note.warn{padding-left:12px;border-left:2px solid rgba(184,71,54,.55)}
.alloc{margin:10px 0 6px}
.alloc .pr{align-items:center}
.alloc select,.move select{
  border:0;border-bottom:1px solid rgba(86,58,40,.50);background:transparent;padding:3px 4px;font-size:16px;min-width:9.5em;
  font-family:'EB Garamond',Georgia,serif;color:var(--ink);cursor:pointer;
}
.goods{width:100%;border-collapse:collapse;margin:4px 0 10px;font-size:17px}
.goods th,.goods td{padding:8px 8px 8px 0;border-bottom:1px dotted rgba(86,58,40,.30);text-align:left;vertical-align:middle;font-weight:400}
.goods thead th{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.15em;color:rgba(41,40,32,.52);border-bottom:1px solid rgba(86,58,40,.34)}
.goods tbody th{font-family:'IM Fell English',serif;font-size:18px}
.goods td{color:rgba(41,40,32,.72);font-size:15.5px}
.goods .num{font-family:'IM Fell English',serif;font-size:19px;text-align:right;color:var(--ink)}
.icon{width:40px;height:40px;object-fit:contain}
.goods .icon{width:48px;height:48px}

/* ===================== tabulated boards: character, inventory, journal ===================== */
.board{padding-top:50px}
.sheet-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,330px) minmax(0,1fr);gap:48px;margin-top:28px;align-items:start}
.inv-cols,.two-cols,.save-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;margin-top:26px;align-items:start}
.save-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.pblock{margin-bottom:34px;border:0}
.pr{display:flex;align-items:baseline;gap:8px;font-size:18px;color:var(--ink);padding:5px 0}
.pr i{flex:1;min-width:12px;height:0;border-bottom:1px dotted rgba(86,58,40,.30);transform:translateY(-4px)}
.pr b{font-family:'IM Fell English',serif;font-weight:400;font-size:19px;min-width:34px;text-align:right;white-space:nowrap}
.pr em{font-style:normal;font-family:'IM Fell English',serif;font-size:15px;color:rgba(41,40,32,.52);min-width:34px;text-align:right;white-space:nowrap}
.pr.dim,.pr.dim b{color:rgba(41,40,32,.48)}
.pr .bad,.pr b.bad{color:#8E3B2C}
.pr b.good{color:var(--forest)}
.pr .nil{font-style:italic;color:rgba(41,40,32,.42);font-size:16px}
.pr.sub{font-style:italic;font-size:14.5px;color:rgba(41,40,32,.48);padding:0 0 9px}
.pr.tot{margin-top:5px;padding-top:7px;border-top:1px solid rgba(86,58,40,.42)}
.pr.depth-1{padding-left:18px}.pr.depth-2{padding-left:36px}
.attr .pr b{font-size:22px}
.standing .pr span:first-child{flex:none}
.standing .pr b{white-space:normal;font-size:17px;max-width:62%}
.figure-col{display:flex;flex-direction:column;align-items:center;position:sticky;top:24px}
.figure{width:100%;max-width:330px;height:auto;background:#F8EED6}
.figcap{text-align:center;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.16em;color:rgba(41,40,32,.50);padding-top:8px}
svg.capbar{width:100%;height:11px;margin:5px 0 3px;border:1px solid rgba(86,58,40,.38);padding:1px;background:rgba(86,58,40,.12)}
svg.capbar .g-bg{fill:transparent}
svg.capbar .g-fill{fill:#58764F}
svg.capbar.vol .g-fill{fill:#617E95}
.capnote{font-style:italic;font-size:14.5px;color:rgba(41,40,32,.50);margin-bottom:12px}
.absent{margin-top:16px;padding:9px 12px;border-left:2px solid rgba(184,71,54,.55);background:rgba(184,71,54,.06);font-style:italic;font-size:15.5px;color:rgba(41,40,32,.62)}
.footline{margin-top:auto;padding-top:14px;border-top:1px solid rgba(86,58,40,.26);display:flex;align-items:baseline;gap:10px;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.16em;color:rgba(41,40,32,.52)}
.footline i{flex:1;height:0;border-bottom:1px solid rgba(86,58,40,.18);transform:translateY(-4px)}
.footline a{text-decoration:none;color:var(--blue-deep)}
.more{margin-top:4px;font-style:italic;font-size:16px}
.more a{color:var(--blue-deep);text-decoration:none}

/* belongings */
.item{display:flex;gap:14px;align-items:flex-start;padding:8px 0;border-bottom:1px dotted rgba(86,58,40,.22)}
.item.depth-1{padding-left:26px}.item.depth-2{padding-left:52px}
.item .icon{flex:none;margin-top:2px;opacity:.9}
.item .what{flex:1;min-width:0}
.item .pr{padding:2px 0}
.where{font-style:italic;font-size:14.5px;color:rgba(41,40,32,.52)}
.move{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.btn{
  cursor:pointer;background:rgba(173,133,68,.12);border:1px solid rgba(86,58,40,.40);padding:3px 14px;
  font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:.14em;color:rgba(41,40,32,.80);
}
.btn:hover,.btn:focus-visible{background:rgba(62,95,121,.12);color:var(--blue-deep)}

/* journal */
.passages li{display:flex;gap:12px;font-size:17.5px;padding:3.5px 0;border-bottom:1px dotted rgba(86,58,40,.18)}
.passages .no{flex:none;width:4.2em;font-family:'IM Fell English SC',serif;font-size:12.5px;letter-spacing:.1em;color:rgba(41,40,32,.50);padding-top:3px}
.chapter-no{margin:16px 0 4px;font-family:'IM Fell English SC',serif;font-weight:400;font-size:12.5px;letter-spacing:.16em;color:rgba(86,58,40,.72)}
.chapter-no:first-of-type{margin-top:4px}
.heard{margin:0 0 14px;padding:10px 14px;border-left:2px solid rgba(173,133,68,.65);background:linear-gradient(90deg,rgba(173,133,68,.10),rgba(173,133,68,.02))}
.heard p{font-size:18px;line-height:1.45}
.heard footer{margin-top:5px;font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.13em;color:rgba(41,40,32,.52)}
.quiet{font-style:italic;font-size:16px;color:rgba(41,40,32,.52);margin-bottom:10px}

/* company */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px 40px;margin-top:26px}
.person{display:flex;gap:18px;padding:16px 18px;background:rgba(231,214,178,.42);border:1px solid rgba(86,58,40,.26);box-shadow:inset 0 0 0 3px rgba(242,231,205,.50)}
.person .thumb{flex:none;width:96px;height:120px;padding:3px;background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55)}
.person .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.monogram{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(160deg,#63415A,var(--plum) 52%,#38222F);font-family:'IM Fell English',serif;font-size:44px;color:#EFDFBC}
.person .meta{flex:1;min-width:0}
.person .nm{font-family:'IM Fell English',serif;font-weight:400;font-size:24px;line-height:1.05}
.person .ag{font-style:italic;font-size:15px;color:var(--ink-56);margin-top:4px}
/* a name or a place too long for the card, such as the priest of Kleinrückerswalde's, breaks rather than overflows */
.person .nm,.person .ag{overflow-wrap:anywhere;hyphens:auto}
.person .desc{font-size:16.5px;margin-top:8px;line-height:1.4}
/* a name in the story, leading to that person's page: the prose keeps its own ink */
.prose a.pn,.card a.pn,a.pn{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(86,58,40,.45)}
.pn:hover{border-bottom-style:solid;border-bottom-color:var(--vermilion)}
.night .prose a.pn,.night .card a.pn,.night a.pn{border-bottom-color:rgba(214,178,110,.55)}
.night .prose a.pn:hover,.night .card a.pn:hover,.night a.pn:hover{border-bottom-color:var(--gold-lit)}

.grievance{margin-top:6px;font-style:italic;font-size:15px;color:#8E3B2C}
.memories{margin-top:8px}
.memories li{position:relative;padding-left:14px;font-size:15.5px;line-height:1.4;color:rgba(41,40,32,.75)}
.memories li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--forest);transform:rotate(45deg)}
.person .nm a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(86,58,40,.28)}
.person .nm a:hover{border-bottom-color:var(--vermilion)}
.ph.spoken{margin-top:30px}

/* one person's page (Planning/21) */
.personhead{display:flex;gap:18px;align-items:flex-start;margin-top:4px}
.personhead .pp{flex:none;width:96px;height:120px;padding:3px;background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55);object-fit:cover;object-position:50% 25%}
.personhead span.pp{display:flex;align-items:center;justify-content:center;font-family:'IM Fell English',serif;font-size:44px;color:#EFDFBC}
.personhead > div{min-width:0}
.personhead h1{margin:0;overflow-wrap:break-word;hyphens:auto}
.personhead .ag{font-style:italic;font-size:16px;color:var(--ink-56);margin-top:6px}

/* glossary (board 05) */
.entryline{margin-top:11px;display:flex;align-items:center;gap:10px}
.label{display:inline-flex;align-items:baseline;gap:7px;font-family:'IM Fell English SC',serif;font-size:10.5px;letter-spacing:.16em;padding:3px 9px;border:1px solid rgba(86,58,40,.45);color:rgba(41,40,32,.70);background:rgba(231,214,178,.60)}
.label::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:currentColor}
.label.history{border-color:rgba(86,109,128,.65);background:rgba(86,109,128,.14);color:#3E5F79}
.label.adaptation{border-color:rgba(83,53,72,.60);background:rgba(83,53,72,.13);color:#5C3B53}
.label.folklore{border-color:rgba(54,81,60,.60);background:rgba(54,81,60,.13);color:#37513D}
.entryno{font-family:'IM Fell English',serif;font-size:15px;color:rgba(41,40,32,.50);letter-spacing:.06em}
.page.narrow .prose .ph{margin-top:22px;text-indent:0}
/* An entry's picture keeps to the column its text is set in (centred, it stood out to the right of the text on a wide
   screen), where the text would begin under the ornament, and the text follows it at that same distance */
.page.narrow > .inset{margin:0 0 30px}
.source{margin-top:20px;padding:14px 15px;background:rgba(231,214,178,.52);border:1px solid rgba(86,58,40,.26);box-shadow:inset 0 0 0 3px rgba(242,231,205,.50)}
.source .sh{display:flex;align-items:baseline;gap:8px;font-family:'IM Fell English SC',serif;font-size:10.5px;letter-spacing:.16em;color:rgba(83,53,72,.85);margin-bottom:8px}
.source .sh i{flex:1;height:0;border-bottom:1px solid rgba(86,58,40,.24);transform:translateY(-4px)}
.source p{font-size:16px;line-height:1.46;color:rgba(41,40,32,.80)}
.source a{color:var(--blue-deep);text-decoration:none;border-bottom:1px solid rgba(62,95,121,.42)}
.seealso{margin-top:24px}
.sa{display:flex;align-items:baseline;gap:8px;text-decoration:none;font-size:18px;color:var(--ink);padding:6px 0}
.sa i{flex:1;min-width:12px;height:0;border-bottom:1px dotted rgba(86,58,40,.30);transform:translateY(-4px)}
.sa em{font-style:normal;font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.14em;color:rgba(41,40,32,.48);text-align:right}
a.sa:hover,a.sa:focus-visible{color:var(--blue-deep)}
.sa.locked{color:rgba(41,40,32,.38)}
.sa.locked em{color:rgba(41,40,32,.30)}
.backto{margin-top:24px;padding-top:14px;border-top:1px solid rgba(86,58,40,.22)}

/* save and resume (board 06) */
.head{text-align:center}
.head .mark{font-family:'UnifrakturMaguntia',serif;font-weight:400;font-size:56px;line-height:1;color:var(--plum);text-shadow:0 1px 0 rgba(255,255,255,.35);margin:0}
.head .sub{font-style:italic;font-size:17px;color:var(--ink-56);margin-top:9px}

/* ===================== TITLE SCREEN =====================
   The key picture on a wide screen and the poster on a tall one, each shown whole on the dark
   plate and lettered where its titled version has the title (Visuals/Promo). Lengths inside the
   picture are container units, so the lettering keeps its place on the picture at every size.
   Stacked by default: the name over the picture, the line and the menu below it. */
.title-screen{justify-content:center}
.ts{position:relative;z-index:5;width:calc(100% - 12px);margin:6px auto;container-type:inline-size}
.ts-pic{position:relative;overflow:hidden;aspect-ratio:16/9;background:#1E1517}
.ts-pic picture,.ts-pic img{display:block;width:100%;height:100%}
.ts-pic img{object-fit:cover}
/* a light haze in the evening sky behind the name, as a thin cloud would lie there */
.ts-haze{position:absolute;left:62%;top:.78cqw;width:38.5%;height:13.5cqw;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(242,231,205,.55) 0%,rgba(242,231,205,.32) 45%,rgba(242,231,205,0) 72%);filter:blur(.26cqw)}
/* .title-screen before .ts-name: the dark plate's h1 rule would otherwise turn the name cream */
.title-screen .ts-name{position:absolute;z-index:2;left:62.5%;width:37.5%;top:2.08cqw;margin:0;text-align:center;
  font-family:'UnifrakturMaguntia',serif;font-weight:400;font-size:6.51cqw;line-height:1;color:var(--plum);
  text-shadow:0 0 .57cqw rgba(242,231,205,.95),0 0 .18cqw rgba(242,231,205,.9),0 .08cqw 0 rgba(255,255,255,.35)}
.ts-sub{margin:16px auto 0;max-width:34em;padding:0 16px;text-align:center;font-style:italic;font-size:16px;line-height:1.4;color:rgba(239,227,198,.66);text-wrap:balance}
.ts-orn{height:26px;margin:10px auto 0;background:url("/assets/ornaments/divider.webp") center/auto 100% no-repeat}
.ts-menu{max-width:720px;margin:14px auto 0;padding:0 16px 14px}
.ts-menu .ask{margin:0 0 8px}
.ts-note{margin-top:12px;font-style:italic;font-size:14.5px;line-height:1.45;color:rgba(239,227,198,.50);max-width:40em}
@media (orientation:portrait){
  /* the poster, whole, and no taller than about two thirds of the screen */
  .ts{width:min(calc(100% - 12px),50vh);width:min(calc(100% - 12px),50svh)}
  .ts-pic{aspect-ratio:4/5}
  .ts-haze{left:6.25%;width:87.5%;top:94.9cqw;height:14.8cqw}
  .title-screen .ts-name{left:0;width:100%;top:96.5cqw;font-size:10.94cqw}
}
@media (orientation:landscape){
  .ts{width:min(calc(100% - 12px),calc((100vh - 54px) * 16 / 9))}
}
/* a wide screen of some height: the whole title in the sky, the menu across the foot */
@media (orientation:landscape) and (min-width:900px) and (min-height:600px){
  .ts{width:min(calc(100% - 12px),calc((100vh - 54px) * 16 / 9));margin:auto}
  .ts-title{position:absolute;z-index:2;left:62.5%;top:2.08cqw;width:37.5%;text-align:center}
  .title-screen .ts-name{position:static;width:auto}
  .ts-sub{margin:.42cqw 0 0;padding:0;max-width:none;font-size:max(13px,1.3cqw);line-height:1;color:rgba(41,40,32,.86);
    text-shadow:0 0 .31cqw rgba(242,231,205,.95),0 0 .1cqw rgba(242,231,205,.9)}
  .ts-orn{height:1.28cqw;margin:.31cqw auto 0}
  .ts-menu{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:none;margin:0;
    padding:5.2cqw max(84px,3.2cqw) 1.7cqw;
    background:linear-gradient(180deg,rgba(12,8,12,0) 0,rgba(12,8,12,.55) 34%,rgba(12,8,12,.86) 100%)}
  .ts-menu .choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4cqw;row-gap:.9cqw}
  .ts-menu .ask{margin:0 0 .5cqw;font-size:clamp(11px,.9cqw,15px)}
  .ts-menu .ch{font-size:clamp(17px,1.55cqw,26px)}
  .ts-menu .ch .sub{font-size:clamp(14px,1.05cqw,18px)}
  .ts-note{margin-top:.8cqw;font-size:clamp(12.5px,.9cqw,15px)}
}
.saved{display:flex;gap:22px;align-items:flex-start;padding:20px 22px;background:rgba(231,214,178,.50);border:1px solid rgba(86,58,40,.30);box-shadow:inset 0 0 0 3px rgba(242,231,205,.55)}
.saved .thumb{flex:none;width:92px;height:115px;padding:4px;background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55)}
.saved .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.saved .meta{flex:1;min-width:0}
.saved .nm{font-family:'IM Fell English',serif;font-size:25px;line-height:1}
.saved .ag{font-style:italic;font-size:15px;color:var(--ink-56);margin-top:6px;margin-bottom:5px}
.sr2{display:flex;align-items:baseline;gap:7px;font-size:16px;padding:3px 0;margin-top:3px}
.sr2 i{flex:1;height:0;border-bottom:1px dotted rgba(86,58,40,.30);transform:translateY(-4px)}
.sr2 b{font-family:'IM Fell English',serif;font-weight:400;font-size:16.5px}
.sr2 .weary{color:#8E3B2C}
.ppips{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 5px}
.ppips u{width:11px;height:11px;text-decoration:none;background:linear-gradient(180deg,#5C8261,#44603F);border:1px solid rgba(86,58,40,.40)}
.ppips u.out{background:rgba(41,40,32,.18)}
.blk{margin-top:40px}
.body{font-size:18px;line-height:1.5;color:var(--ink);margin-top:2px;max-width:40em}
.ask-line{display:flex;align-items:baseline;gap:12px;margin-top:16px;border-bottom:1px solid rgba(86,58,40,.50);padding-bottom:5px;max-width:40em}
.ask-line label{font-family:'IM Fell English SC',serif;font-size:11.5px;letter-spacing:.15em;color:rgba(83,53,72,.80);white-space:nowrap}
.ask-line input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:19px;color:var(--ink)}
.ask-line input::placeholder{color:rgba(41,40,32,.34);font-style:italic}
.ask-line:focus-within{border-bottom-color:var(--blue-deep)}
.warn{margin-top:14px;padding-left:12px;border-left:2px solid rgba(173,133,68,.70);font-style:italic;font-size:15.5px;line-height:1.45;color:rgba(41,40,32,.60);max-width:40em}
/* the e-mail forms' notice and the box for news, and the privacy page's list (Planning/49) */
.fine{margin-top:10px;font-size:15.5px;line-height:1.45;color:rgba(41,40,32,.72);max-width:40em}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:8px;font-size:16.5px;line-height:1.4;color:var(--ink);cursor:pointer;max-width:40em}
.consent input{flex:none;accent-color:var(--plum);width:17px;height:17px;margin-top:2px}
.warn a,.body a,.kept a,.fine a{color:var(--blue-deep)}
.ts-note a{color:rgba(239,227,198,.80)}
.kept{margin-top:4px;max-width:40em}
.kept li{position:relative;padding-left:18px;font-size:18px;line-height:1.5;margin-top:8px}
.kept li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--forest);transform:rotate(45deg)}
.confirm{margin:18px 0 6px;padding:18px 20px;border:1px solid rgba(184,71,54,.40);background:rgba(184,71,54,.06);max-width:760px}
.page > .footline{margin-top:auto}
.save-cols + .footline{margin-top:40px}
fieldset{border:0}
legend.ph{width:100%}
.radio{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:18px}
.radio.size-large{font-size:20px}.radio.size-larger{font-size:22px}
.radio input{accent-color:var(--plum);width:17px;height:17px}

/* ===================== up to 1279 px: a narrower desk ===================== */
@media (max-width:1279px){
  :root{--page-x:56px;--page-top:48px}
  .nightart{width:50%}
  .frame.night .page > *{max-width:500px}
  .sheet-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .sheet-cols .figure-col{grid-column:2;grid-row:1 / span 2;position:static}
  .save-cols{gap:48px}
}

/* ===================== below 1000 px: the phone shell (board 02) ===================== */
@media (max-width:999px){
  :root{--page-x:28px;--page-top:34px;--page-bottom:36px;--prose:19px}
  .text-large{--prose:21px} .text-larger{--prose:23px}
  .app{display:block}
  .rail{display:none}
  .mtop{display:block;position:relative;z-index:10}
  .mhead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px 10px;border-bottom:1px solid rgba(173,133,68,.30)}
  .mhead .mk{font-family:'UnifrakturMaguntia',serif;font-size:22px;color:var(--gold-lit);line-height:1}
  .mhead .rt{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.16em;color:var(--cr-48)}
  .mstate{position:relative;display:flex;gap:14px;align-items:center;padding:16px 18px 17px}
  .mthumb{position:relative;width:52px;height:63px;flex:none;padding:3px;background:linear-gradient(180deg,#3A2A3C,#1E141F);border:1px solid rgba(173,133,68,.55)}
  .mthumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .mstate .mi{flex:1;min-width:0}
  .mstate .nm{font-family:'IM Fell English',serif;font-size:19px;color:var(--cream);line-height:1}
  .mstate .ag{font-style:italic;font-size:13px;color:var(--cr-48);margin-top:2px}
  .mrow{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
  .mpips{display:flex;gap:3px;flex-wrap:wrap}
  .mpips u{width:9px;height:9px;text-decoration:none;background:linear-gradient(180deg,#5C8261,#334C39);border:1px solid rgba(173,133,68,.40)}
  .mpips u.out{background:rgba(0,0,0,.42)}
  .mnum{font-family:'IM Fell English',serif;font-size:13px;color:var(--cr-78)}
  .mtag{font-family:'IM Fell English SC',serif;font-size:9.5px;letter-spacing:.13em;color:var(--rose);border:1px solid rgba(184,71,54,.50);background:rgba(184,71,54,.16);padding:2px 6px}
  svg.mxp{flex:1;min-width:60px;height:6px;border:1px solid rgba(173,133,68,.34);padding:1px;background:rgba(0,0,0,.42)}
  svg.mxp .g-bg{fill:transparent} svg.mxp .g-fill{fill:#B08A4A}

  .field{padding:10px 10px 12px}
  .frame{min-height:0}
  .frame > i.c{width:64px;height:70px}
  .mnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;justify-items:center;padding:18px 16px 14px;border-top:1px solid rgba(173,133,68,.24)}
  .mnav a{text-decoration:none;font-family:'IM Fell English',serif;font-size:15.5px;color:var(--cr-62);padding:4px 6px}
  .mnav a.on{color:var(--gold-lit)}
  .mfoot{display:flex;justify-content:space-between;padding:6px 16px 18px;background:var(--rail-deep);font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.13em}
  .mfoot a{color:rgba(242,231,205,.40);text-decoration:none;padding:6px 0}

  h1{font-size:34px;margin-top:14px}
  h1.h2{font-size:29px}
  .rh{font-size:10px;letter-spacing:.15em;row-gap:5px}
  .rh em{flex-basis:100%}
  .rh i{display:none}
  .byline{font-size:14.5px;margin-top:9px}
  .hrule{height:26px;margin:16px 0 22px}
  .page.narrow > .inset{margin-bottom:22px}
  .prose{text-align:left;hyphens:manual;line-height:1.64}
  .prose p{margin-bottom:15px}
  .dropcap{width:72px;height:74px;margin:4px 14px 4px -3px;font-size:38px;line-height:74px;
    background:url("/assets/ornaments/initial-frame.webp") 0 0/100% 100% no-repeat, linear-gradient(160deg,#63415A,var(--plum) 52%,#38222F) 14px 14px/44px 47px no-repeat}
  .night .dropcap{background:url("/assets/ornaments/initial-frame.webp") 0 0/100% 100% no-repeat, linear-gradient(160deg,#6B4761,#4A2F42 52%,#2A1A26) 14px 14px/44px 47px no-repeat}
  .ask{margin:28px 0 10px;font-size:11.5px}
  .ch{font-size:19px;padding:9px 0 9px 26px}
  .ch::before{top:18px;left:6px}
  .note{font-size:14.5px;margin-top:17px}

  /* the stamp sits on paper above the picture, in ink */
  .band .stamp{position:static;margin:0 var(--page-x) 14px;color:rgba(41,40,32,.52);text-shadow:none}
  .band .stamp i{border-bottom-color:rgba(86,58,40,.22)}
  .band{display:flex;flex-direction:column-reverse}
  .band::after{background:linear-gradient(180deg,rgba(18,20,20,0) 80%,rgba(18,20,20,.40) 100%)}
  .band img{max-height:none}

  .board{padding-top:34px}
  .sheet-cols,.inv-cols,.two-cols,.save-cols{grid-template-columns:minmax(0,1fr);gap:10px}
  .sheet-cols .figure-col{grid-column:auto;grid-row:auto;order:-1;margin-bottom:10px}
  .figure{max-width:220px}
  .people{grid-template-columns:minmax(0,1fr)}
  .head .mark{font-size:44px}
  .saved{padding:14px}
}

/* below 480 px the phone header already shows her portrait: the saved card gives its width to the facts */
@media (max-width:479px){
  .saved .thumb{display:none}
  /* the glossary index: each label under its title, rather than squeezing the title */
  .sa{flex-wrap:wrap;row-gap:1px}
  .sa i{display:none}
  .sa em{flex-basis:100%;text-align:left}
  /* development points: each choice on its own line under its attribute */
  .alloc .pr{flex-wrap:wrap}
  .alloc select{flex-basis:100%;margin-top:4px}
}

/* below 760 px: the night plate becomes a band at the foot, on dark */
@media (max-width:759px){
  .nightart,.subject-left .nightart{position:relative;inset:auto;order:3;margin:0 6px 6px;width:auto;height:auto;z-index:1}
  .nightart picture,.nightart img{height:auto}
  .nightart img,.subject-left .nightart img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%);-webkit-mask-composite:source-over;mask-composite:add}
  .nightart::after,.subject-left .nightart::after{background:linear-gradient(180deg,rgba(10,7,10,0) 70%,rgba(10,7,10,.5) 100%)}
  .frame.night.subject-left .page{align-items:stretch}
  .inset{margin-top:26px}
}

@media (max-width:420px){
  :root{--page-x:22px}
  .frame > i.c{width:52px;height:57px}
  .mnav a{font-size:15px}
  /* a person's page: room for a long name such as the Bergmeister beside the portrait */
  .personhead{gap:14px}
  .personhead .pp{width:80px;height:100px}
  .personhead h1{font-size:28px}
  /* and on the company list, the same room for each card's name */
  .person{gap:14px;padding:14px}
  .person .thumb{width:80px;height:100px}
  .person .nm{font-size:22px}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{
  .rail,.mtop,.mnav,.mfoot,.band,.nightart,.choices{display:none!important}
  .app{display:block}.field{padding:0;background:none}.frame{box-shadow:none;border:0}
}