/* wrathofreckoning.com, "The Herald" (Web/DESIGN.md). SPDX-License-Identifier: GPL-3.0-or-later
   Ported from Web/design/reference/template.html (the mockup Jeremy picked), with the fixes of
   DESIGN.md section 12 and the inner-page components of section 7. One theme, no transitions on
   hover, no rounded corners except rivets, nails and lamps. */

@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-latin.9a1423cc6a56.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cinzel Decorative";src:url("../fonts/cinzel-decorative-900-wor.0b33d2650335.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../fonts/im-fell-english-latin.089cd29526f2.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";font-style:italic;src:url("../fonts/im-fell-english-italic-latin.36e90acea7f1.woff2") format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English SC";src:url("../fonts/im-fell-english-sc-latin.ac4f8e88ad1d.woff2") format("woff2");font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url("../fonts/unifraktur-maguntia-latin.37d1625a00ca.woff2") format("woff2");font-display:swap}
@font-face{font-family:"DejaVu Sans";src:local("DejaVu Sans"),local("DejaVuSans"),url("../fonts/dejavu-sans-latin.dd6db32162c1.woff2") format("woff2");font-display:swap}

:root{
 --pitch:#0d0a08; --leather:#140f0c; --widget:#15110e; --panel:#1a1714; --iron:#1e1c1a; --footer:#0a0807;
 --strip:rgba(5,4,3,.72); --iron-hi:#8a8276; --iron-plate-hi:#7d756a; --iron-lo:#0b0a09; --ring:#2b2723;
 --blood:#7a1410; --wax:#9e1b14; --ember:rgba(200,70,30,.55);
 --gold:#a8843a; --brass:#c9a24e; --gilt:#ecd08a;
 --bone:#e6dcc3; --parch:#dccaa0; --ink:#2a1c12; --headline:#5e120c; --sepia:#6b5236; --oxblood:#8a1a10;
 --tex-iron:url("../img/tex/iron.8906cf0b1b5d.jpg"); --tex-parch:url("../img/tex/parchment.113175d7c909.jpg"); --tex-leather:url("../img/tex/leather.725ad232408a.jpg");
 --tex-pitch:url("../img/tex/pitch.cf680fb418ab.jpg");
}
*{box-sizing:border-box}
html{background:#0d0a08}
body{margin:0;color:var(--bone);font:12px/1.6 Verdana,Tahoma,"DejaVu Sans",sans-serif;
 background:url(/media/i/backdrop.jpg?v=2) center top no-repeat,#0d0a08 var(--tex-pitch) center top repeat}
a{color:var(--gilt);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:1px dotted var(--gilt);outline-offset:1px}
img{border:0}

#page{width:980px;margin:0 auto;position:relative}

/* ---------- utility strip */
#topbar{height:27px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;
 font-size:10px;color:#b9ab8c;background:rgba(5,4,3,.72);border:1px solid #2e2419;border-top:0}
#topbar a{color:#d7c9a6}
#topbar .sep{color:#5a4a36;padding:0 6px}
#topbar .lamp{width:9px;height:9px;margin:0 6px -1px 0}
#topbar b{color:var(--gilt);font-weight:bold}
#topbar b.off{color:#e2513f}
#topbar b.unk{color:#a89a7c}

/* ---------- header: the painting shows through */
#header{height:226px;position:relative}
#header .wordmark{position:absolute;left:14px;top:14px;display:block}
#header .wordmark img{display:block}
#header .tag{position:absolute;left:18px;top:181px;width:400px;height:30px;padding:0 20px;box-sizing:border-box;white-space:nowrap;overflow:hidden;
 background:url("../img/orn/ribbon.be5bc374ad45.svg") 0 0/100% 100% no-repeat;text-align:center;
 font:700 10.5px/27px Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gilt);text-shadow:0 1px 0 #2a0402}
.notice{position:absolute;right:26px;top:26px;width:262px;padding:18px 18px 14px;color:var(--ink);
 background:#dccaa0 var(--tex-parch);transform:rotate(1.8deg);
 box-shadow:inset 0 0 26px rgba(92,52,14,.6),4px 5px 0 rgba(0,0,0,.55);border:1px solid #6b4a22}
.notice h4{margin:0 0 4px;font:400 25px/1 UnifrakturMaguntia,"IM Fell English",serif;color:#5e120c}
.notice p{margin:0 0 6px;font-size:10.5px;line-height:1.5}
.notice .sig{font:italic 12px "IM Fell English",Georgia,serif;color:var(--sepia);margin:0}
.notice .seal{position:absolute;right:-10px;bottom:-14px;transform:rotate(-14deg)}
.notice.inset{position:relative;right:auto;top:auto;width:auto;margin:2px 8px 20px;transform:rotate(-.6deg)}
.notice.inset p{font-size:11px}
.nail{position:absolute;width:11px;height:11px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#d8cdb6 0,#8a8072 22%,#3b3631 55%,#0d0b09 100%);
 box-shadow:1px 2px 0 rgba(0,0,0,.6)}
.notice .nail.a{left:9px;top:7px}.notice .nail.b{right:9px;top:7px}

/* ---------- main menu: bevelled iron plates */
#nav{display:flex;height:50px;margin:0;padding:0 26px;list-style:none;position:relative;z-index:10;
 background:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.35)),var(--tex-iron);
 border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
 box-shadow:0 -1px 0 #000,0 1px 0 #000,inset 0 1px 0 #000,inset 0 -1px 0 #000}
#nav>li{flex:1 1 auto;position:relative}
#nav>li>a{display:block;margin:7px 2px 0;height:32px;line-height:30px;text-align:center;
 font:700 12px/30px Cinzel,Georgia,serif;letter-spacing:.09em;text-transform:uppercase;color:var(--bone);
 text-shadow:0 1px 0 #000,0 0 5px #000;
 background:linear-gradient(rgba(255,255,255,.17),rgba(255,255,255,.03) 46%,rgba(0,0,0,.28) 54%,rgba(0,0,0,.5)),var(--tex-iron);
 border:1px solid;border-color:#8a8276 #0b0a09 #0b0a09 #8a8276;outline:1px solid #000}
#nav>li>a:hover,#nav>li>a:focus-visible{color:var(--gilt);text-decoration:none;outline:1px solid #000;
 background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0) 46%,rgba(200,70,30,.25) 54%,rgba(200,70,30,.55)),var(--tex-iron)}
#nav>li.on>a{color:var(--gilt);border-color:#d0584a #2a0504 #2a0504 #d0584a;
 background:linear-gradient(rgba(255,210,180,.22),rgba(255,255,255,0) 46%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.45)),linear-gradient(#a11c14,#6a100b)}
#nav:before,#nav:after{content:"";position:absolute;top:19px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#efe3c8 0,#9a8f80 26%,#3a3631 62%,#0e0c0a 100%);box-shadow:0 1px 0 rgba(0,0,0,.8)}
#nav:before{left:9px}#nav:after{right:9px}
#nav ul{display:none;position:absolute;left:2px;top:41px;width:214px;margin:0;padding:3px 0;list-style:none;z-index:20;
 background:#dccaa0 var(--tex-parch);border:1px solid #000;box-shadow:0 0 0 2px var(--gold),0 0 0 3px #000,5px 6px 0 rgba(0,0,0,.5)}
#nav li:hover ul,#nav li:focus-within ul{display:block}
#nav ul a{display:block;padding:4px 12px 4px 22px;font:15px/1.3 "IM Fell English",Georgia,serif;color:var(--ink);border-bottom:1px dotted #a08660;position:relative}
#nav ul a:before{content:"";position:absolute;left:9px;top:10px;width:5px;height:5px;background:var(--wax);transform:rotate(45deg)}
#nav ul li:last-child a{border-bottom:0}
#nav ul a:hover,#nav ul a:focus-visible{background:var(--blood);color:var(--gilt);text-decoration:none;outline:0}
#nav ul a:hover:before,#nav ul a:focus-visible:before{background:var(--gilt)}

.rv{display:block;width:9px;height:9px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#efe3c8 0,#9a8f80 26%,#3a3631 62%,#0e0c0a 100%);box-shadow:0 1px 0 rgba(0,0,0,.8)}

/* ---------- columns */
#cols{display:flex;align-items:flex-start;gap:20px;padding:16px 10px 22px;background:#140f0c var(--tex-leather);
 border-left:1px solid #000;border-right:1px solid #000;box-shadow:inset 0 0 0 1px #3d3226,inset 0 12px 18px -8px #000}
#main{width:640px;flex:none}
#side{width:300px;flex:none}

/* gilded frame corners */
.framed{position:relative}
.c{position:absolute;width:34px;height:34px;background:url("../img/orn/corner.2fddaea1e99a.svg") 0 0/100% 100% no-repeat;z-index:3;pointer-events:none}
.c.tl{left:-7px;top:-7px}.c.tr{right:-7px;top:-7px;transform:scaleX(-1)}
.c.bl{left:-7px;bottom:-7px;transform:scaleY(-1)}.c.br{right:-7px;bottom:-7px;transform:scale(-1,-1)}

/* ---------- rotator: 4 featured dispatches, 400 ms crossfade (the only motion on the site) */
.rotator{height:292px;padding:6px;margin:4px 4px 26px;border:1px solid #000;
 background:linear-gradient(135deg,#f3dc98,#8a6424 28%,#d9b45e 50%,#6e4813 74%,#c9a24e)}
.rotator .slide{position:relative;height:278px;border:1px solid #000;overflow:hidden;background:#000}
.rotator .pane{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.rotator .pane.on{opacity:1;visibility:visible}
.rotator .slide img{display:block;width:616px;height:276px}
.rotator .cap{position:absolute;left:0;bottom:0;width:420px;padding:10px 16px 11px 16px;
 background:rgba(8,6,4,.84);border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.cap .kick{font:13px "IM Fell English SC",Georgia,serif;color:#e06a58;letter-spacing:.05em}
.cap h2{margin:0 0 3px;font:400 27px/1.05 "IM Fell English",Georgia,serif;color:var(--bone);text-shadow:0 2px 0 #000}
.cap h2 a{color:var(--bone)}
.cap p{margin:0;font-size:11px;line-height:1.5;color:#cbbd9d}
.cap .more{color:var(--gilt);font-weight:bold;white-space:nowrap}
.tabs{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;z-index:2}
.tabs a{display:block;width:25px;height:23px;font:700 12px/21px Cinzel,Georgia,serif;text-align:center;color:var(--bone);
 background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.4)),var(--tex-iron);border:1px solid;border-color:#8a8276 #000 #000 #8a8276;outline:1px solid #000}
.tabs a:hover{text-decoration:none;color:var(--gilt)}
.tabs a.on{color:var(--gilt);background:linear-gradient(#b52a1f,#5a0d09)}
.tabs a.arr{width:21px}
@media (prefers-reduced-motion:reduce){.rotator .pane{transition:none}}

/* ---------- The Herald: parchment broadsheet nailed into an iron frame */
.herald,.sheet{position:relative;margin:4px 4px 26px;padding:20px 26px 16px;color:var(--ink);
 background:#dccaa0 var(--tex-parch);border:1px solid #000;
 box-shadow:0 0 0 4px #2b2723,0 0 0 5px #000,inset 0 0 60px rgba(92,52,14,.6),inset 0 0 10px rgba(60,30,6,.7)}
.herald a:focus-visible,.sheet a:focus-visible,.parch a:focus-visible,.notice a:focus-visible{outline-color:var(--oxblood)}
.herald>.nail.a,.sheet>.nail.a{left:6px;top:6px}.herald>.nail.b,.sheet>.nail.b{right:6px;top:6px}
.herald>.nail.c2,.sheet>.nail.c2{left:6px;bottom:6px}.herald>.nail.d,.sheet>.nail.d{right:6px;bottom:6px}
.herald>.seal,.sheet>.seal{position:absolute;right:16px;top:8px;transform:rotate(-10deg);z-index:2}
.mast{position:relative;text-align:center;border-top:3px double #3b2a1a;padding:6px 0 2px}
.mast h1{margin:0;font:400 58px/1 UnifrakturMaguntia,"IM Fell English",serif;color:#1d130c;text-shadow:0 1px 0 rgba(255,244,210,.55)}
.mast h1 a{color:#1d130c}
.mast.small h1{font-size:40px}
.mast.small .ear{top:6px}
.mast .ear{position:absolute;top:16px;width:150px;font:12px/1.35 "IM Fell English SC",Georgia,serif;color:var(--sepia)}
.mast .ear.l{left:0;text-align:left}
.mast .ear.r{right:84px;text-align:right}
.mast-sub{display:flex;justify-content:space-between;padding:3px 0 3px;margin:0 0 20px;
 border-top:1px solid #3b2a1a;border-bottom:3px double #3b2a1a;font:12.5px "IM Fell English SC",Georgia,serif;color:#3b2a1a}
.item{position:relative;padding:0 0 2px 66px;min-height:96px}
.item .rib{position:absolute;left:0;top:-6px;width:50px;height:78px;padding-top:8px;text-align:center;color:var(--gilt);
 background:linear-gradient(90deg,#4a0805,#a11c14 32%,#8a1810 68%,#4a0805);
 clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
.rib b{display:block;font:700 22px/1 Cinzel,Georgia,serif;text-shadow:0 1px 0 #2a0402}
.rib span{display:block;font:11px/1.3 "IM Fell English SC",Georgia,serif;color:#f3dcb0}
.rib i{display:block;font:normal 9px/1.2 Verdana,Tahoma,"DejaVu Sans",sans-serif;color:#d9a990}
.item h3{margin:0;font:400 24px/1.12 "IM Fell English",Georgia,serif;color:#5e120c}
.item h3 a{color:inherit}
.item .by{margin:2px 0 8px;font:italic 13px "IM Fell English",Georgia,serif;color:var(--sepia)}
.item .by a{color:var(--oxblood)}
.th{padding:2px;background:linear-gradient(135deg,#ecd08a,#8a6424 45%,#c9a24e);border:1px solid #000;cursor:zoom-in}
.th img{display:block;border:1px solid #000}
.th:hover,.th:focus-visible{background:var(--gilt)}
.th:hover img,.th:focus-visible img{filter:brightness(1.18)}
.item .th,.prose .th{float:left;margin:3px 13px 4px 0}
.item .th.r,.prose .th.r{float:right;margin:3px 0 4px 13px}
.item .th img,.prose .th img,.strip .th img{width:140px;height:84px}
.item p{margin:0 0 6px}
.dc:first-letter{float:left;font:52px/.86 UnifrakturMaguntia,"IM Fell English",serif;color:var(--wax);margin:4px 6px 0 0}
.item .more{clear:both;margin:0;font-size:11px}
.item .more a{color:var(--oxblood);font-weight:bold}
.item .more .dim{color:var(--sepia);padding:0 5px}
.rule{height:18px;margin:12px 0 18px;background:url("../img/orn/rule.1a399b3c812f.svg") center/420px 18px no-repeat}
.pager{display:flex;justify-content:space-between;margin:2px 0 0;padding-top:8px;border-top:3px double #3b2a1a;
 font:13px "IM Fell English SC",Georgia,serif;color:var(--sepia)}
.pager a{color:var(--oxblood)}
.pager .off{color:#a08660}
.herald .mast a,.herald .mast-sub a{color:var(--oxblood)}
.herald .empty{font:italic 15px "IM Fell English",Georgia,serif;color:var(--sepia)}
.ledger{width:100%;border-collapse:collapse}
.ledger td{padding:4px 2px 4px 0;border-bottom:1px dotted #a08660;vertical-align:top}
.ledger tr:last-child td{border-bottom:0}
.ledger td.s{text-align:right;white-space:nowrap;font:12.5px "IM Fell English SC",Georgia,serif;color:#3d5a14}
.ledger td.s.wip{color:var(--oxblood)}
.ledger td.s.later{color:var(--sepia)}
.ledger td.m{width:14px}
.ledger td.m i{display:block;width:6px;height:6px;margin:5px 0 0 2px;background:var(--gold);border:1px solid #3b2a1a;transform:rotate(45deg)}
.ledger td.m i.wip{background:var(--wax)}
.ledger td.m i.later{background:none}
.older{margin:0;padding:0;list-style:none}
.older li{padding:5px 0 6px;border-bottom:1px solid #2f271f}
.older li:last-child{border-bottom:0}
.older a{display:block;font:15px/1.2 "IM Fell English",Georgia,serif;color:var(--bone)}
.older span{font-size:9.5px;color:#8d806a}
.older.section li{position:relative;padding-left:13px}
.older.section li:before{content:"";position:absolute;left:1px;top:11px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.older.section li.on a{color:var(--gilt)}
.older.section li.on:before{background:var(--wax)}
.w h6.sub{margin:10px 0 2px;padding-top:6px;border-top:1px solid #2f271f;font:12px "IM Fell English SC",Georgia,serif;color:#a89a7c}

/* the dispatch page */
.herald.single .item.post{min-height:0}
.herald.single>.seal{width:58px;height:58px;right:22px;top:12px}
.herald.single .mast .ear.r{right:70px}
.item.post h1{margin:0;font:400 30px/1.1 "IM Fell English",Georgia,serif;color:#5e120c}
.item.post .prose{margin-top:4px}
.item.post .more{margin-top:10px}

/* ---------- sheets: inner pages (the broadsheet without the masthead) */
.crumbs{margin:0 0 4px;font:12px "IM Fell English SC",Georgia,serif;color:var(--sepia)}
.crumbs a{color:var(--oxblood)}
.sheet>h1,.career-page>h1{margin:0 0 12px;padding:0 90px 6px 0;border-bottom:3px double #3b2a1a;font:400 34px/1.1 "IM Fell English",Georgia,serif;color:#5e120c}
.prose{overflow:hidden}
.prose p{margin:0 0 9px}
.prose h2{clear:both;margin:16px 0 5px;font:400 22px/1.15 "IM Fell English",Georgia,serif;color:#5e120c}
.prose h3{margin:12px 0 4px;font:14px "IM Fell English SC",Georgia,serif;color:var(--sepia)}
.prose a{color:var(--oxblood);font-weight:bold}
.prose b{color:var(--ink)}
.prose .ledger{margin:4px 0 12px}
.sheet .prose h2:first-child{margin-top:4px}
ul.dia{margin:0 0 10px;padding:0;list-style:none}
ul.dia li{position:relative;padding:0 0 4px 15px}
ul.dia li:before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;background:var(--gold);border:1px solid #3b2a1a;transform:rotate(45deg)}
.status{margin:0 0 6px;font:12.5px "IM Fell English SC",Georgia,serif;color:#3d5a14}
.status i{display:inline-block;width:6px;height:6px;margin:0 8px 1px 2px;background:var(--gold);border:1px solid #3b2a1a;transform:rotate(45deg)}
.status i.wip{background:var(--wax)}
.status i.later{background:none}
p.status:has(i.wip){color:var(--oxblood)}
p.status:has(i.later){color:var(--sepia)}
.strip{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 12px}
.strip .th{float:none;margin:0}
.sheet .top{clear:both;margin:10px 0 0;text-align:right;font-size:10px}
.sheet .top a{color:var(--oxblood)}
.sheet h4.bl{margin:2px 0 12px;font:400 40px/1 UnifrakturMaguntia,"IM Fell English",serif;color:#5e120c}
.errpage{min-height:260px}
table.arch{width:100%;border-collapse:collapse;margin:0 0 14px}
table.arch td{padding:4px 6px 4px 0;border-bottom:1px dotted #a08660;vertical-align:top}
table.arch td.dt{width:70px;font:12.5px "IM Fell English SC",Georgia,serif;color:var(--sepia)}
table.arch td a{font:15px/1.25 "IM Fell English",Georgia,serif;color:#5e120c}
table.arch td.ct{text-align:right;white-space:nowrap}
table.arch td.ct a{font:12.5px "IM Fell English SC",Georgia,serif;color:var(--oxblood)}
h2.arch{margin:4px 0 4px;font:400 22px/1.15 "IM Fell English",Georgia,serif}
h2.arch a{color:#5e120c}

/* a career's page */
.career-page .portrait{float:right;margin:2px 0 8px 14px}
.career-page .portrait img{width:92px;height:118px}
.career-page>h1{padding-right:0;border-bottom:0;margin-bottom:0}
.career-page h1 .shield{margin:0 10px -2px 0}
.career-page .role{overflow:hidden;margin:0 0 10px;padding-bottom:6px;border-bottom:3px double #3b2a1a;font:12.5px "IM Fell English SC",Georgia,serif;color:var(--sepia)}
.career-page .role .destruction{color:var(--oxblood)}
table.facts{border-collapse:collapse;margin:0 0 12px}
table.facts th{padding:3px 14px 3px 0;text-align:left;font:12.5px "IM Fell English SC",Georgia,serif;color:var(--sepia);font-weight:normal}
table.facts td{padding:3px 0;border-bottom:1px dotted #a08660}
table.facts a{color:var(--oxblood);font-weight:bold}
.career-page .pager{clear:both;margin-top:12px}

/* ---------- iron panels and widget plates */
.panel{margin:0 4px 20px;background:#1a1714 var(--tex-iron);border:1px solid #000;box-shadow:inset 0 0 0 1px #4a443d}
.plate{position:relative;height:33px;padding:0 28px;font:700 12.5px/32px Cinzel,Georgia,serif;letter-spacing:.11em;text-transform:uppercase;
 color:var(--bone);text-shadow:0 1px 0 #000,0 0 4px #000;
 background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0) 48%,rgba(0,0,0,.42)),var(--tex-iron);
 border-bottom:2px solid var(--gold);box-shadow:0 1px 0 #000,inset 0 1px 0 #7d756a}
.plate .rv{position:absolute;top:12px}.plate .rv.l{left:10px}.plate .rv.r{right:10px}
.plate small{float:right;font:10px/32px Verdana,Tahoma,"DejaVu Sans",sans-serif;letter-spacing:0;text-transform:none;text-shadow:0 1px 0 #000;color:#cbbd9d}
.fronts{display:flex;gap:16px;padding:14px 15px 6px}
.front{width:192px}
.front .th{display:block}
.front .th img{width:186px;height:94px}
.front h4{margin:7px 0 0;font:400 18px/1.1 "IM Fell English",Georgia,serif;color:var(--gilt);text-shadow:0 1px 0 #000}
.front h4 a{color:var(--gilt)}
.front .vs{margin:1px 0 4px;font:12px "IM Fell English SC",Georgia,serif;color:#c6b691}
.front p{margin:0;font-size:10px;line-height:1.55;color:#b5a88c}
.front p b{color:#d9cbaa;font-weight:normal}
.front p b.de{color:#e06a58}
.front p a{color:#b5a88c}
.front p a:hover{color:var(--gilt)}
.panel .foot{margin:6px 15px 0;padding:8px 0 11px;border-top:1px solid #3d362e;font-size:11px;color:#cbbd9d}
.panel .foot a{font-weight:bold}

/* WAR-style tooltips on career names (CSS only) */
.tip{position:relative}
.tip:hover:after,.tip:focus-visible:after{content:attr(data-tip);position:absolute;left:-4px;bottom:100%;margin-bottom:5px;width:210px;padding:5px 8px;
 background:#0a0807;border:1px solid var(--gold);box-shadow:4px 5px 0 rgba(0,0,0,.55);
 font:normal 10px/1.5 Verdana,Tahoma,"DejaVu Sans",sans-serif;color:#d5c9ad;text-align:left;text-transform:none;letter-spacing:0;text-shadow:none;
 white-space:normal;z-index:30;pointer-events:none}

/* the pairings and careers pages */
.pairing .banner{display:block;width:624px;margin:14px auto 0}
.pairing .banner img{width:616px;height:180px}
.sides{display:flex;gap:20px;padding:12px 15px 4px}
.side{flex:1 1 0;position:relative;padding-left:34px}
.side .shield{position:absolute;left:0;top:3px}
.side h4{margin:0;font:400 18px/1.1 "IM Fell English",Georgia,serif;color:var(--gilt);text-shadow:0 1px 0 #000}
.side .vs{margin:1px 0 6px;font:12px "IM Fell English SC",Georgia,serif;color:#c6b691}
.side .vs .order{color:#d9cbaa}
.side .vs .destruction{color:#e06a58}
.crows{margin:0;padding:0;list-style:none}
.crows li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0 5px;border-bottom:1px solid #2f271f}
.crows li:last-child{border-bottom:0}
.crows a{font:15px/1.2 "IM Fell English",Georgia,serif;color:var(--bone)}
.crows span{font:12px "IM Fell English SC",Georgia,serif;color:#c6b691;white-space:nowrap}
/* the roster: every row the same height, a fixed picture lane (an empty iron recess when there is no picture) */
.crows.big li{display:grid;grid-template-columns:84px 1fr;column-gap:12px;height:58px;padding:3px 0;justify-content:stretch}
.crows.big .cn{min-width:0}
.crows.big .nm{display:block;font-size:16px;line-height:1.08}
.crows.big .cn span{display:block;margin-top:2px}
.crows.big .th{display:block;width:84px;height:52px;padding:1px;background:var(--gold)}
.crows.big .th img{display:block;width:82px;height:50px}
.crows.big .th:hover{background:var(--gilt)}
.crows.big .th.none{width:84px;height:52px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.25)),var(--tex-iron);border:1px solid;border-color:#000 #5a544c #5a544c #000;padding:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.panel .blurb{margin:4px 15px 0;font-size:12px;line-height:1.6;color:var(--bone)}
.panel.careers .sides{padding-bottom:12px}

/* the gallery */
.atabs{position:absolute;right:28px;top:5px;display:flex;gap:4px}
.atabs a{display:block;height:22px;padding:0 7px;font:700 10.5px/20px Cinzel,Georgia,serif;letter-spacing:.04em;color:var(--bone);text-shadow:0 1px 0 #000;
 background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.4)),var(--tex-iron);border:1px solid;border-color:#8a8276 #000 #000 #8a8276;outline:1px solid #000}
.atabs a:hover{color:var(--gilt);text-decoration:none}
.atabs a.on{color:var(--gilt);background:linear-gradient(#b52a1f,#5a0d09)}
.gintro{margin:0;padding:11px 15px 0;font-size:11px;color:#cbbd9d}
.grid{display:grid;grid-template-columns:repeat(3,192px);gap:12px;justify-content:space-between;padding:12px 15px 4px}
.g .th{display:block}
.g .th img{width:186px;height:105px}
.g .gc{margin:6px 0 0;font:14px/1.2 "IM Fell English",Georgia,serif;color:var(--gilt)}
.g .gm{margin:2px 0 0;font-size:10px;color:#8d806a}
.g .gm a{color:#a89a7c}
.gpager{display:flex;justify-content:space-between;margin:10px 15px 0;padding:8px 0 0;border-top:1px solid #3d362e;
 font:13px "IM Fell English SC",Georgia,serif;color:#cbbd9d}
.gpager .off{color:#8d806a}
.viewer .vframe{width:614px;margin:18px auto 0;padding:6px;border:1px solid #000;
 background:linear-gradient(135deg,#f3dc98,#8a6424 28%,#d9b45e 50%,#6e4813 74%,#c9a24e)}
.viewer .vframe img{display:block;width:100%;height:auto;border:1px solid #000}
.viewer .vcap{margin:12px 15px 0;font:18px/1.25 "IM Fell English",Georgia,serif;color:var(--bone)}
.viewer .vmeta{margin:2px 15px 0;font-size:10px;color:#a89a7c}
.viewer .gpager{margin-bottom:12px}
.realmbig .pbody{padding:12px 15px 14px}
.realmbig table.realm .rn{font-size:22px}
.realmbig .note{margin:8px 0 0;font-size:10px;color:#8d806a}

/* ---------- sidebar widgets */
.w{margin:0 0 18px;background:#15110e;border:1px solid #000;box-shadow:inset 0 0 0 1px #3d3226}
.w .body{padding:11px 13px 12px;font-size:11px;line-height:1.55;color:#d5c9ad}
.w.parch .body{background:#dccaa0 var(--tex-parch);color:var(--ink);box-shadow:inset 0 0 28px rgba(92,52,14,.55)}
.w .lnk{display:block;margin-top:8px;text-align:right;font-weight:bold}
.w.parch .lnk{color:var(--oxblood)}
.lamp{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:middle;
 background:radial-gradient(circle at 36% 30%,#f2ffd8 0,#9ad65a 22%,#45821c 58%,#11280a 100%);
 box-shadow:0 0 0 2px #2a241c,0 0 0 3px #8a6424,0 0 9px 1px rgba(154,214,90,.5)}
.lamp.offline{background:radial-gradient(circle at 36% 30%,#ffd8d0 0,#e2513f 22%,#8a160d 58%,#2a0402 100%);box-shadow:0 0 0 2px #2a241c,0 0 0 3px #8a6424}
.lamp.unknown{background:radial-gradient(circle at 36% 30%,#d8cdb6 0,#8a8072 22%,#3b3631 58%,#0d0b09 100%);box-shadow:0 0 0 2px #2a241c,0 0 0 3px #8a6424}
table.realm{width:100%;border-collapse:collapse}
table.realm td,table.realm th{padding:5px 6px;border-bottom:1px solid #2f271f;text-align:left;font-weight:normal}
table.realm tr:nth-child(even) td,table.realm tr:nth-child(even) th{background:rgba(255,255,255,.035)}
table.realm td.lc{width:24px}
table.realm .rn{font:400 17px "IM Fell English",Georgia,serif;color:var(--bone)}
table.realm .st{color:#9ad65a;font-weight:bold;text-align:right}
table.realm .st.offline{color:#e2513f}
table.realm .st.unknown{color:#a89a7c;font-weight:normal}
table.realm .k{color:#a89a7c}
table.realm .v{text-align:right;color:var(--bone);font-weight:bold}
table.realm.unknown .v{color:#8d806a;font-weight:normal}
.w .note{margin:8px 0 0;font-size:9.5px;color:#8d806a}
.shots{display:grid;grid-template-columns:repeat(3,86px);gap:7px 9px;justify-content:center}
.shots a{display:block;padding:1px;background:var(--gold);border:1px solid #000;cursor:zoom-in}
.shots a:hover,.shots a:focus-visible{background:var(--gilt)}
.shots a:hover img,.shots a:focus-visible img{filter:brightness(1.18)}
.shots img{display:block;width:82px;height:50px}
.career{overflow:hidden}
.career .th{float:left;margin:0 11px 2px 0}
.career .th img{width:92px;height:118px}
.career h4{margin:0;font:400 21px/1.05 "IM Fell English",Georgia,serif;color:#5e120c}
.career h4 a{color:#5e120c}
.career .role{font:12.5px "IM Fell English SC",Georgia,serif;color:var(--sepia);margin:1px 0 5px}
.council{position:relative;padding-left:66px;min-height:62px}
.council .seal{position:absolute;left:-4px;top:-3px;transform:rotate(-8deg)}
.council h4{margin:0 0 2px;font:400 18px "IM Fell English",Georgia,serif;color:#5e120c}
.btn{display:block;margin:10px 0 0;height:30px;text-align:center;font:700 11.5px/28px Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;
 color:var(--gilt);text-shadow:0 1px 0 #000;border:1px solid;border-color:#d0584a #2a0504 #2a0504 #d0584a;outline:1px solid #000;
 background:linear-gradient(rgba(255,210,180,.2),rgba(255,255,255,0) 46%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.45)),linear-gradient(#a11c14,#6a100b)}
.btn:hover{text-decoration:none;color:#fff3cc}
.march{margin:0;padding:0;list-style:none}
.march li{padding:0 0 5px 14px;position:relative}
.march li:before{content:"";position:absolute;left:1px;top:6px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.w.hide{display:none}

/* ---------- footer */
#footer{background:#0a0807 var(--tex-iron);border:1px solid #000;border-top:2px solid var(--gold);box-shadow:0 -1px 0 #000;
 padding:18px 22px 20px;font-size:10px;line-height:1.6;color:#9d917a}
#footer .cols{display:flex;gap:34px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid #3a3027}
#footer h5{margin:0 0 5px;font:700 11px Cinzel,Georgia,serif;color:var(--brass);letter-spacing:.12em;text-transform:uppercase}
#footer ul{list-style:none;margin:0;padding:0}
#footer li a{color:#c8bb9c}
#footer .fmark{margin-left:auto;text-align:right;font:12px "IM Fell English SC",Georgia,serif;color:#a89a7c}
#footer .fmark strong{display:block;font:900 30px/1 "Cinzel Decorative",Cinzel,Georgia,serif;color:var(--gold);text-shadow:0 1px 0 #000}
#footer .disc{margin:0 0 6px;color:#b0a385}
#footer .small{margin:0;color:#7d715d}
#footer .small a{color:#a89a7c}
#base{margin:0;padding:7px 22px 22px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#5a4a36}

/* ---------- lightbox (herald.js builds it; Lightbox 2 in a gilt frame) */
#lb{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.86);z-index:50}
body.lb-open #lb{display:block}
#lb .frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:7px;border:1px solid #000;
 background:linear-gradient(135deg,#f3dc98,#8a6424 28%,#d9b45e 50%,#6e4813 74%,#c9a24e)}
#lb img{display:block;width:auto;height:auto;max-width:min(860px,calc(100vw - 40px));max-height:min(484px,calc(100vh - 100px));border:1px solid #000;background:#000}
#lb .bar{display:flex;align-items:center;gap:10px;padding:7px 10px;background:#140f0c var(--tex-leather);border:1px solid #000;border-top:0}
#lb .bar .t{flex:1;font:18px "IM Fell English",Georgia,serif;color:var(--bone)}
#lb .bar .n{font-size:10px;color:#a89a7c;white-space:nowrap}
#lb .bar a{display:block;padding:0 9px;height:24px;font:700 11px/22px Cinzel,Georgia,serif;color:var(--bone);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
 background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.4)),var(--tex-iron);border:1px solid;border-color:#8a8276 #000 #000 #8a8276;outline:1px solid #000}
#lb .bar a:hover{text-decoration:none;color:var(--gilt)}
#lb .bar a.x{background:linear-gradient(#a11c14,#5a0d09);color:var(--gilt)}
#lb .c{z-index:51}
body.lb-open{overflow:hidden}

/* ---------- accounts and the download (DESIGN.md 7.9): forms on parchment, iron buttons, message boxes, the roster */
.form{margin:6px 0 10px;border-top:3px double #3b2a1a}
.form .row{display:grid;grid-template-columns:150px 1fr;column-gap:14px;row-gap:2px;align-items:center;padding:7px 0;border-bottom:1px dotted #a08660}
.form label{font:14px "IM Fell English SC",Georgia,serif;color:#3b2a1a}
.form input[type=text],.form input[type=password]{display:block;width:100%;max-width:290px;height:26px;margin:0;padding:2px 7px;
 font:12px Verdana,Tahoma,"DejaVu Sans",sans-serif;color:var(--ink);background:#f0e4c2;border:1px solid;border-color:#3b2a1a #a08660 #a08660 #3b2a1a;
 box-shadow:inset 1px 1px 0 rgba(60,30,6,.25);border-radius:0;outline:0}
.form input:focus-visible{outline:1px dotted var(--oxblood);outline-offset:1px}
.form input[aria-invalid=true]{border-color:var(--oxblood) #a08660 #a08660 var(--oxblood)}
.form .help{grid-column:2;font-size:10.5px;line-height:1.5;color:#3b2a1a}
.form .err{grid-column:2;font-size:11px;font-weight:bold;color:var(--oxblood)}
.form .act{display:flex;align-items:center;gap:14px;padding:12px 0 2px}
.form .act .help{font-size:10.5px}
.form .act a.keep{font-size:11px;font-weight:bold;color:var(--oxblood)}
.form>.msg{margin:12px 0 6px}
.form.inline{border-top:0;margin-top:12px}
.form.inline .act{padding-top:0}
/* the iron button; lit like a menu plate when hovered or focused (7.8), with a dotted ring when focused */
.ibtn{display:inline-block;height:28px;margin:0;padding:0 16px;font:700 11.5px/26px Cinzel,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;
 color:var(--bone);text-shadow:0 1px 0 #000;cursor:pointer;border-radius:0;
 background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.4)),var(--tex-iron);border:1px solid;border-color:#8a8276 #000 #000 #8a8276;outline:1px solid #000}
.ibtn:hover,.ibtn:focus-visible{color:var(--gilt);text-decoration:none;
 background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0) 46%,rgba(200,70,30,.25) 54%,rgba(200,70,30,.55)),var(--tex-iron);
 box-shadow:0 0 8px 1px rgba(200,70,30,.55)}
.ibtn:focus-visible{outline:2px dotted var(--oxblood);outline-offset:3px}
.prose a.ibtn{color:var(--bone);font-weight:700}
.prose a.ibtn:hover,.prose a.ibtn:focus-visible{color:var(--gilt)}
/* red lacquer on parchment, for the one action that cannot be undone (a character's delete) */
.ibtn.danger{color:var(--gilt);text-shadow:0 1px 0 #2a0402;border-color:#d0584a #2a0504 #2a0504 #d0584a;
 background:linear-gradient(rgba(255,210,180,.2),rgba(255,255,255,0) 46%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.45)),linear-gradient(#a11c14,#6a100b)}
.ibtn.danger:hover,.ibtn.danger:focus-visible{color:#fff3cc;
 background:linear-gradient(rgba(255,210,180,.3),rgba(255,255,255,0) 46%,rgba(200,70,30,.25) 54%,rgba(200,70,30,.55)),linear-gradient(#b52a1f,#6a100b)}
.small-note{font-size:10.5px;color:#3b2a1a}
.prose .status{margin:2px 0 10px}
.acct .prose .notice.inset{margin:2px 8px 16px}
.notice.inset.danger{border-left:6px solid var(--wax);padding:24px 44px 14px 20px}
.notice.inset.danger p{font-size:12px}
.notice.inset.danger .seal{right:-8px;bottom:-12px}
/* message boxes: what a form did, next to its fields (bad: refused or locked; done; wip: down or closed) */
.msg{position:relative;margin:4px 0 14px;padding:9px 14px 10px 46px;color:var(--ink);background:#f0e4c2;
 border:1px solid #6b4a22;border-left:6px solid var(--gold);box-shadow:inset 0 0 18px rgba(92,52,14,.35),3px 4px 0 rgba(0,0,0,.3)}
.msg:before{content:"";position:absolute;left:15px;top:14px;width:10px;height:10px;background:var(--gold);border:1px solid #3b2a1a;transform:rotate(45deg)}
.msg h4{margin:0 0 2px;font:400 18px/1.15 "IM Fell English SC",Georgia,serif;color:var(--headline)}
.msg p{margin:0;font-size:12px;line-height:1.5}
.msg.bad{border-left-color:var(--wax)}
.msg.bad:before{left:8px;top:8px;width:30px;height:30px;border:0;background:url("../img/orn/seal-46.457a96434370.svg") 0 0/100% 100% no-repeat;transform:rotate(-10deg)}
.msg.done{border-left-color:#3d5a14}
.msg.done:before{background:#3d5a14}
.msg.done h4{color:#3d5a14}
/* the account's facts, and the roster of its characters with each realm's shield */
table.acct-facts,table.dlfacts{width:100%}
table.acct-facts th,table.dlfacts th{width:120px}
table.roster{width:100%;border-collapse:collapse;margin:2px 0 8px}
table.roster th{padding:3px 8px 3px 0;text-align:left;font:12.5px "IM Fell English SC",Georgia,serif;color:#3b2a1a;font-weight:normal;border-bottom:1px solid #3b2a1a}
table.roster td{padding:5px 8px 5px 0;border-bottom:1px dotted #a08660;vertical-align:middle}
table.roster .sh{width:40px;padding:4px 8px 3px 0}
table.roster td.sh img{display:block;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.45))}
table.roster td.nm{font:17px/1.15 "IM Fell English",Georgia,serif;color:#5e120c}
table.roster td span{display:block;font:12px "IM Fell English SC",Georgia,serif}
table.roster td span.order{color:#3d5a14}
table.roster td span.destruction{color:var(--oxblood)}
table.roster .n{text-align:right;width:44px}
table.roster td.lv{font:17px "IM Fell English",Georgia,serif}
table.roster td.x{text-align:right;font-size:11px;white-space:nowrap}
table.roster td.x a{display:inline-block;padding:3px 0 3px 6px}
table.roster td a{color:var(--oxblood);font-weight:bold}
/* the Download plate: the page's one action, red lacquer in a gold ring; unlit iron with a pasted label until there is a launcher */
.dlwell{margin:0 0 18px;padding:22px 0 14px;text-align:center;border-bottom:3px double #3b2a1a}
.dlplate{position:relative;display:inline-block;min-width:380px;margin:5px;padding:12px 48px 11px;text-align:center;color:var(--gilt);
 text-shadow:0 1px 0 #2a0402,0 0 6px #000;border:1px solid;border-color:#d0584a #2a0504 #2a0504 #d0584a;
 background:linear-gradient(rgba(255,210,180,.24),rgba(255,255,255,0) 46%,rgba(0,0,0,.18) 54%,rgba(0,0,0,.45)),linear-gradient(#a11c14,#6a100b);
 box-shadow:0 0 0 1px #000,0 0 0 4px var(--gold),0 0 0 5px #000,5px 7px 0 4px rgba(0,0,0,.4)}
.dlplate b{display:block;color:inherit;font:700 32px/1.1 Cinzel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase}
.dlplate i{display:block;margin-top:4px;font:italic 13.5px/1.3 "IM Fell English",Georgia,serif;color:#f3dcb0}
.dlplate .rv{position:absolute;top:50%;margin-top:-5px}.dlplate .rv.l{left:16px}.dlplate .rv.r{right:16px}
.prose a.dlplate{color:var(--gilt);font-weight:normal}
.prose a.dlplate:hover,.prose a.dlplate:focus-visible{color:#fff3cc;text-decoration:none;
 background:linear-gradient(rgba(255,210,180,.3),rgba(255,255,255,0) 46%,rgba(200,70,30,.25) 54%,rgba(200,70,30,.55)),linear-gradient(#b52a1f,#6a100b);
 box-shadow:0 0 0 1px #000,0 0 0 4px var(--gilt),0 0 0 5px #000,0 0 22px 8px rgba(200,70,30,.55)}
.prose a.dlplate:focus-visible{outline:2px dotted var(--oxblood);outline-offset:9px}
.dlplate.off{color:#8d806a;text-shadow:0 1px 0 #000;border-color:#8a8276 #0b0a09 #0b0a09 #8a8276;cursor:default;
 background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0) 46%,rgba(0,0,0,.28) 54%,rgba(0,0,0,.5)),var(--tex-iron);
 box-shadow:0 0 0 1px #000,0 0 0 4px var(--sepia),0 0 0 5px #000,5px 7px 0 4px rgba(0,0,0,.4)}
.dlplate.off i{color:#8d806a}
.dlplate .stamp{position:absolute;right:-34px;top:-16px;padding:4px 14px 2px;white-space:nowrap;transform:rotate(9deg);
 font:700 15px/1.1 Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wax);text-shadow:none;
 background:#dccaa0 var(--tex-parch);border:3px double var(--wax);box-shadow:inset 0 0 12px rgba(92,52,14,.5),3px 4px 0 rgba(0,0,0,.5)}
.dlneed{margin:14px 0 0;font:italic 13.5px/1.4 "IM Fell English",Georgia,serif;color:#3b2a1a}
table.dlfacts td.hash{font-size:10px;word-break:break-all;color:var(--ink)}
.dl .notice.inset{margin:2px 8px 16px}
.w.join .hail{margin:0 0 6px;font:15px "IM Fell English",Georgia,serif;color:var(--bone)}
.w.join .hail b{color:var(--gilt);font-weight:normal}
.w.join .march a{font-weight:bold}
.w.join .btn{margin-top:8px}
.realmbig .muster{display:flex;gap:20px;margin-top:6px}
.realmbig .mcol{flex:1 1 0;min-width:0}
.realmbig h6.sub{margin:14px 0 3px;padding-top:7px;border-top:1px solid #2f271f;font:14px "IM Fell English SC",Georgia,serif;color:#cbbd9d}
table.realm.regions .rg{display:block;font:15px/1.2 "IM Fell English",Georgia,serif;color:var(--bone)}
table.realm.regions .pr{display:block;font-size:9.5px;color:#8d806a}

/* ---------- tablets and phones: the same parts in one column (a 2009 desktop site first).
   761 to 999 px: the stacked page centred at 760 px; 760 px and below: the page fills the width. */
@media (max-width:999px){
 body{background-size:1200px auto,auto}
 #page{width:auto;max-width:760px}
 #topbar{height:auto;flex-wrap:wrap;padding:4px 10px;gap:2px}
 #header{height:auto;padding:12px 12px 14px}
 #header .wordmark{position:static}
 #header .wordmark img{width:300px;height:auto}
 #header .tag{position:static;width:300px;margin:4px 0 0;padding:0 16px;font-size:8.5px;letter-spacing:.05em}
 .notice{position:relative;right:auto;top:auto;width:auto;margin:16px 6px 4px;transform:rotate(1deg)}
 #nav{flex-wrap:wrap;height:auto;padding:4px 6px 7px}
 #nav>li{flex:1 1 30%}
 #nav:before,#nav:after{display:none}
 #nav ul{top:39px}
 #cols{flex-direction:column;padding:12px 8px 16px}
 #main,#side{width:auto}
 .rotator{height:auto}
 .rotator .slide{height:auto}
 .rotator .pane{position:relative;display:none}
 .rotator .pane.on{display:block}
 .rotator .slide img{width:100%;height:auto}
 .rotator .cap{position:static;width:auto;border-right:0}
 .tabs{position:static;justify-content:flex-end;padding:6px;background:#0a0807}
 .herald,.sheet{padding:16px 14px 12px}
 .herald>.seal,.sheet>.seal{width:56px;height:56px;right:18px;top:10px}
 .mast h1{font-size:44px}
 .mast .ear{display:none}
 .mast-sub{flex-wrap:wrap;font-size:11px}
 .mast-sub .cats{order:3;width:100%}
 .item{padding-left:0}
 .item .rib{position:relative;float:left;top:0;margin:0 10px 4px 0;height:66px;width:44px}
 .item .th,.item .th.r,.prose .th,.prose .th.r{float:none;display:inline-block;margin:4px 0 8px}
 .item .th img,.prose .th img{width:100%;height:auto;max-width:300px}
 .fronts{flex-direction:column}
 .front{width:auto}
 .front .th img{width:100%;height:auto}
 .sheet>h1{font-size:28px;padding-right:60px}
 .pairing .banner{width:auto;margin:10px 8px 0}
 .pairing .banner img{width:100%;height:auto}
 .sides{flex-direction:column}
 .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .g .th img{width:100%;height:auto}
 .atabs{position:static;flex-wrap:wrap;padding:6px 0 0}
 .gallery .plate{height:auto;padding-bottom:6px}
 .viewer .vframe{width:auto;margin:14px 8px 0}
 .career-page .portrait{margin-right:0}
 .tip:hover:after,.tip:focus-visible:after{display:none}
 #footer .cols{flex-wrap:wrap;gap:18px 28px}
 #footer .fmark{margin-left:0;text-align:left}
 .form .row{grid-template-columns:1fr}
 .form .help,.form .err{grid-column:1}
 /* 16 px fields, so phones do not zoom in on them; buttons and the roster's Delete are thumb-sized */
 .form input[type=text],.form input[type=password]{max-width:none;height:40px;font-size:16px}
 .form .act{flex-wrap:wrap;gap:10px 14px}
 .ibtn{height:42px;padding:0 20px;line-height:40px}
 .form .act a.keep{display:inline-block;padding:10px 0;font-size:12px}
 table.roster .wh{display:none}
 table.roster td.x a{padding:10px 0 10px 8px;font-size:12px}
 .dlplate{display:block;min-width:0;padding:12px 34px 10px}
 .dlplate b{font-size:25px}
 .dlplate .stamp{right:-8px;top:-18px;font-size:13px}
 #topbar a{display:inline-block;padding:3px 0}
 .realmbig .muster{flex-direction:column;gap:0}
}