:root{ --paper:#f1e6cc; --ink:#2a1f16; --brass:#c9a227; --brass2:#6f5615; --wine:#5b1f2b; --panel:rgba(28,22,18,.92); }
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#100c0e;font-family:'Nunito',system-ui,sans-serif;color:var(--ink)}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{overscroll-behavior:none}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}

#loading{position:absolute;inset:0;background:#171216;display:flex;align-items:center;justify-content:center;z-index:50;color:var(--paper)}
.ld-card{text-align:center}
.ld-icon{font-size:48px;line-height:0;color:var(--brass);margin-bottom:6px}
.ld-icon .ico{width:64px;height:64px}
/* the stock cuts (58_icons.js) */
.ico{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.25em;flex:none;overflow:visible}
.ld-title{font-family:'IM Fell English SC',serif;font-size:42px;color:var(--brass);letter-spacing:1px}
.ld-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:20px;margin-bottom:18px}
.ld-bar{width:280px;height:10px;background:#000;border:1px solid var(--brass2);border-radius:6px;margin:0 auto;overflow:hidden}
.ld-fill{height:100%;width:5%;background:linear-gradient(90deg,#c9a227,#f1d675);transition:width .3s}
.ld-msg{margin-top:10px;font-size:14px;opacity:.8}

#hud{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;z-index:5;pointer-events:none;color:var(--paper)}
#hud>*{pointer-events:auto}
.hud-date,.hud-money,.hud-place{background:rgba(20,14,12,.78);border:1px solid rgba(201,162,39,.45);border-radius:20px;padding:5px 12px;font-size:14px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.hud-place{font-family:'IM Fell English',serif;font-style:italic;font-size:15px;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.hud-ico{margin-right:6px;color:var(--brass)}
.hud-ico .ico{width:17px;height:17px;vertical-align:-3px}
.hud-buttons{margin-left:auto;display:flex;gap:5px}
.hud-buttons button{background:rgba(20,14,12,.85);border:1px solid var(--brass2);color:var(--paper);border-radius:8px;padding:4px 9px;font-size:16px}
.hud-buttons button.off{opacity:.45}
.hud-buttons button .ico{width:21px;height:21px;vertical-align:middle;display:block}
.hud-buttons #btn-help{font:800 16px/21px 'Nunito',sans-serif;min-width:37px}
.hud-buttons #btn-menu{display:none;font:800 20px/21px 'Nunito',sans-serif;min-width:42px}
/* the phone's menu: the six HUD buttons folded into one, so the top of the screen is one line */
#menu{position:absolute;right:8px;top:52px;z-index:6;background:var(--panel);border:2px solid var(--brass2);border-radius:12px;padding:6px;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#menu .menu-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:var(--paper);font:600 15px 'Nunito',sans-serif;padding:9px 10px;border-radius:8px;text-align:left}
#menu .menu-item:active,#menu .menu-item:focus-visible{background:rgba(201,162,39,.18);outline:none}
#menu .menu-item .ico{width:22px;height:22px;flex:none}

#tasks{position:absolute;right:12px;top:56px;width:250px;background:var(--panel);border:2px solid var(--brass2);border-radius:12px;padding:8px 12px 10px;color:var(--paper);z-index:4;font-size:13px}
#tasks h3{margin:0 0 6px;font-family:'IM Fell English SC',serif;color:var(--brass);font-size:17px;font-weight:400}
#tasks h3 .ico{width:18px;height:18px;vertical-align:-3px}
.task{padding:5px 0;border-top:1px dashed rgba(201,162,39,.3);display:flex;gap:6px;align-items:flex-start}
.task.done{opacity:.5;text-decoration:line-through}
.task .chk{flex:none}
/* once the story is told the to-do panel says so, and opens the credits */
#tasks.ended{cursor:pointer;text-align:center}
#tasks.ended h3{text-align:center}
.ended-note{font-family:'IM Fell English',serif;font-style:italic;font-size:14px;line-height:1.4;padding:4px 2px 2px}
.ended-note .more{display:block;margin-top:8px;font-family:'IM Fell English SC',serif;font-style:normal;font-size:15px;letter-spacing:.06em;color:var(--brass)}
#tasks.ended:hover .more{text-decoration:underline}
.credits{font-family:'IM Fell English',serif;font-size:1rem;line-height:1.45;color:var(--ink)}
.credits h4{font-family:'IM Fell English SC',serif;font-weight:400;font-size:19px;margin:14px 0 4px;color:var(--wine);border-bottom:1px solid #c9b998}
.credits p{margin:0 0 6px}
.credits .fin{text-align:center;font-family:'IM Fell English SC',serif;font-size:20px;margin-top:16px}

#hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none;z-index:3;color:var(--paper);font-size:13px;font-weight:600;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}
#hint kbd{background:#2d221c;border:1px solid var(--brass2);border-radius:4px;padding:0 5px;font-size:12px}
#toast{position:absolute;left:50%;top:60px;transform:translateX(-50%);background:rgba(20,15,12,.92);color:var(--paper);border:2px solid var(--brass);border-radius:30px;padding:8px 18px;font-weight:800;opacity:0;transition:opacity .3s;pointer-events:none;z-index:40;font-size:15px;max-width:70vw;text-align:center}
#toast.show{opacity:1}
#toast .ico{width:19px;height:19px;margin-right:7px;vertical-align:-4px;color:var(--brass)}

/* dialogue */
#dlg{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:0 12px 18px;pointer-events:none}
.dlg-box{pointer-events:auto;width:min(760px,96vw);display:flex;gap:14px;background:var(--paper);color:var(--ink);border:3px solid #6b5636;border-radius:10px;padding:12px 16px;box-shadow:0 12px 40px rgba(0,0,0,.7),inset 0 0 40px rgba(120,90,40,.15);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 4px);animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.dlg-portrait{width:96px;height:96px;flex:none;image-rendering:pixelated;background:#d8c9a4;border:2px solid #6b5636;border-radius:6px}
.dlg-body{flex:1;min-width:0}
.dlg-name{font-family:'IM Fell English SC',serif;font-size:19px;color:var(--wine)}
.dlg-text{font-family:'IM Fell English',serif;font-size:1.19rem;line-height:1.35;min-height:2.7em}
.dlg-text i{color:#5b3a1f}
.dlg-choices{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.dlg-choices button{font-size:1rem;text-align:left;background:#fff9ea;border:2px solid var(--brass2);border-radius:8px;padding:7px 10px;font:600 15px 'Nunito',sans-serif;color:var(--ink)}
.dlg-choices button:hover,.dlg-choices button.sel{background:#f3dfa5;border-color:var(--brass)}
.dlg-more{text-align:right;font-size:13px;font-weight:700;color:var(--wine);animation:blink 1s infinite}   /* was --brass2 on parchment: 1.7:1 */
@keyframes blink{50%{opacity:.2}}

/* paper & modals */
#paper,#modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:30;backdrop-filter:none}
.sheet{width:min(600px,94vw);max-height:90vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);padding:22px 30px 24px;border:2px solid #6b5636;box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 60px rgba(120,90,40,.2);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.02) 0 2px,transparent 2px 4px);transform:none;animation:drop .35s ease-out;overflow:auto}
@keyframes drop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.masthead{font-family:'IM Fell English SC',serif;font-size:30px;text-align:center;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:6px 0;letter-spacing:1px}
.dateline{text-align:center;font-family:'IM Fell English',serif;font-style:italic;font-size:14px;margin:6px 0 8px}
.headline{font-family:'IM Fell English',serif;font-size:26px;margin:8px 0;line-height:1.15;font-weight:400}
.story{font-family:'IM Fell English',serif;font-size:1.06rem;line-height:1.45}
.story p{margin:0 0 10px}
.sheet .ok{display:block;margin:14px auto 0;flex:none;background:var(--wine);color:var(--paper);border:0;border-radius:24px;padding:9px 26px;font-size:16px;font-weight:800;box-shadow:0 3px 0 #2a0d13}
.sheet .ok:active{transform:translateY(2px);box-shadow:none}
.modal-sheet h2{font-family:'IM Fell English SC',serif;font-weight:400;margin:0 0 8px;color:var(--wine);font-size:26px}
.modal-sheet .row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.modal-sheet button.pick{background:#fff9ea;border:2px solid var(--brass2);border-radius:8px;padding:8px 12px;font:600 .94rem 'Nunito',sans-serif;color:var(--ink)}
.modal-sheet button.pick.on{background:#f3dfa5;border-color:var(--brass)}
.modal-sheet .note{font-family:'IM Fell English',serif;font-style:italic;color:#5b3a1f}
/* the collecting book: two columns, and the difference between them is the whole lesson */
.ledger{max-height:230px;overflow-y:auto;border:1px solid #c9b998;border-radius:4px;background:#fffdf2;margin:8px 0}
.ledger table{width:100%;border-collapse:collapse;font:15px 'Nunito',sans-serif}
.ledger th{font-family:'IM Fell English SC',serif;font-weight:400;font-size:15px;text-align:left;border-bottom:1px solid #c9b998;padding:4px 8px;color:var(--wine)}
.ledger td{padding:3px 8px;border-bottom:1px dotted #d9cdb2}
.ledger .ag-n{text-align:right;white-space:nowrap}
.rum-from{color:#7a5a36;font-size:13px}
.ag-door{background:#fff7e4;border-left:3px solid var(--brass2);padding:6px 10px}
/* a proof sheet: the damp copy the reader marks before the forme goes to press */
.proof-sheet{background:#fffdf2;border:1px solid #c9b998;border-radius:4px;padding:14px 16px;margin:8px 0;box-shadow:inset 0 0 24px rgba(150,120,60,.12)}
.ps-head{font-family:'IM Fell English SC',serif;font-size:22px;text-align:center;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:8px}
.ps-body{font-family:'IM Fell English',serif;font-size:19px;line-height:1.5;color:#221a12}
.ps-w{cursor:pointer;padding:0 1px;border-radius:2px}
.ps-w:hover{background:rgba(201,162,39,.28)}
.ps-found{background:rgba(150,30,40,.14);text-decoration:line-through;text-decoration-color:#8d1f2b}
.ps-turn{display:inline-block;transform:rotate(180deg);margin:0 .04em}
.ps-fount{font-family:'Nunito',sans-serif;font-size:.74em;font-weight:800;letter-spacing:.04em;vertical-align:.06em}
/* the drying line: every sheet pulled hangs up, good or spoiled, so the count is something you can see */
.dry-line{position:relative;display:flex;gap:6px;align-items:flex-start;min-height:46px;padding:10px 6px 0;flex-wrap:wrap}
.dry-cord{position:absolute;left:0;right:0;top:8px;height:2px;background:#b9a889}
.dry-sheet{width:20px;height:26px;border:1px solid #b9a889;background:#fffdf4;box-shadow:0 1px 2px rgba(0,0,0,.25);transform:rotate(-1deg)}
/* the press, worked by hand: the parts light up under the cursor, the platen comes down while the bar is held */
.press-shop{background:#f6efdc;border:2px solid var(--brass2);border-radius:10px;padding:6px;margin:8px 0}
.press-svg{width:100%;height:auto;display:block}
.press-svg .pr-oak{fill:url(#pr-oak);stroke:#3a2716;stroke-width:2}
.press-svg .pr-oak2{fill:url(#pr-oak2);stroke:#3a2716;stroke-width:2}
.press-svg .pr-grain{stroke:#6b4a22;stroke-width:1.5;opacity:.55}
.press-svg .pr-iron{fill:#4c4f57;stroke:#22242a;stroke-width:2}
.press-svg .pr-iron-l{stroke:#4c4f57;stroke-width:7;stroke-linecap:round}
.press-svg .pr-thread{stroke:#2b2d33;stroke-width:2;fill:none}
.press-svg .pr-cord{stroke:#d8c9a4;stroke-width:3}
.press-svg .pr-grip{fill:#8a6535;stroke:#3a2716;stroke-width:2}
.press-svg .pr-platen{fill:#7d5a33;stroke:#2a1c10;stroke-width:2}
.press-svg .pr-bed{fill:#5d431f;stroke:#2a1c10;stroke-width:2}
.press-svg .pr-forme{stroke:#2a1f16;stroke-width:2}
.press-svg .pr-type{stroke:#cfc6b4;stroke-width:2;opacity:.5}
.press-svg .pr-sheet{fill:#fffdf4;stroke:#b9a889;stroke-width:1.5}
.press-svg .pr-tympan{fill:#8b6a3c;stroke:#3a2716;stroke-width:2}
.press-svg .pr-ball{fill:#463b31;stroke:#201914;stroke-width:2}
.press-svg .pr-ball-hi{fill:#6a5a4a;stroke:none;opacity:.7}
.press-svg .pr-label{font:italic 13px 'IM Fell English',serif;fill:#5b3a1f;text-anchor:middle}
.press-svg .pr-label-t{fill:#7a5a33}
.press-svg .pr-rail{fill:#3f2f1c;stroke:#241a10;stroke-width:1}
.press-svg .pr-hit{fill:transparent}
.press-svg .pr-part{cursor:pointer}
.press-svg .pr-next>rect:not(.pr-hit),.press-svg .pr-next>ellipse,.press-svg .pr-next>circle{stroke:#c9a227;stroke-width:3.5}
.press-svg .pr-next .pr-label{fill:#6f5615;font-weight:700}
.press-svg .pr-part:hover>rect:not(.pr-hit),.press-svg .pr-part:hover>ellipse{filter:brightness(1.22)}
.press-svg #pr-bar{transition:transform .12s}
.press-svg #pr-bed{transition:transform .25s}
.press-count{font:800 16px 'Nunito',sans-serif;text-align:center;margin:4px 0}
.pr-last{display:inline-block;width:14px;height:18px;border:1px solid #b9a889;vertical-align:-4px;margin-left:4px}
.pr-good{background:#fffdf4;box-shadow:inset 0 0 0 2px #2a1f16}
.pr-grey{background:#fffdf4;box-shadow:inset 0 0 0 2px #b3aca0}
.pr-blot{background:#2a1f16}
.pr-short{background:linear-gradient(#fffdf4 45%,#2a1f16 45%)}
.pr-say{min-height:1.4em;text-align:center}
.press-bench{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0}
.press-item{background:#fff9ea;border:2px solid var(--brass2);border-radius:10px;padding:8px;text-align:center}
.press-item .big{font-size:34px;line-height:0;margin:2px 0 6px}
.press-item .big .ico{width:48px;height:48px}
.pick .ico{width:22px;height:22px;vertical-align:-6px}
.pick .ico.coin{width:30px;height:30px;vertical-align:middle}
.press-item .qty{font-weight:800;font-size:18px}
.press-item .btns button{min-width:30px;padding:0 4px;height:28px;border-radius:6px;border:1px solid var(--brass2);background:#fff;font-weight:800}
.board{position:relative;background:#6b4a2b;background-image:repeating-linear-gradient(48deg,rgba(0,0,0,.07) 0 2px,transparent 2px 5px),repeating-linear-gradient(-42deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px);border:8px solid #4a331d;border-radius:6px;min-height:340px;padding:10px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.card{background:#fff9ea;border:1px solid #9a7d4a;padding:8px 10px;width:170px;font:600 .84rem 'Nunito',sans-serif;box-shadow:2px 3px 6px rgba(0,0,0,.4);transform:rotate(-1deg);cursor:pointer}
.card.on{outline:3px solid var(--brass)}
.card.cause{background:#e9f3dc}
.card.claim{background:#e3e0d8;font-style:italic;color:#4a4238}
.card.opinion{background:#efe4e6;font-style:italic;color:#5b3a40}
.card .pin{position:absolute;margin:-16px 0 0 60px;font-size:16px;color:#5a4a2e}
.card .pin .ico{width:18px;height:18px}
.modal-sheet h2 .ico{width:.95em;height:.95em;vertical-align:-.1em}
.book p{font-family:'IM Fell English',serif;font-size:1.06rem;margin:0 0 8px}
.book .q{font-style:italic;color:#5b3a1f}
@media (max-width:900px){#tasks{display:none;left:12px;right:12px;top:56px;bottom:auto;width:auto;max-height:34vh;overflow:auto}body.tasks-open #tasks:not([hidden]){display:block}}

/* touch controls (shown on touch screens) */
#touch{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:8;pointer-events:none}
/* On a phone the dialogue box was 339px of an 844px screen and covered the d-pad and the action button, so a child
   could not walk away from a conversation or press on through it. Cap it, and lift the controls clear while it is up. */
@media (max-width:700px){
  .dlg-box{max-height:32vh;overflow:auto}
  .dlg-portrait{width:64px;height:64px}
  body.talking #touch .pad{bottom:calc(32vh + 16px)}
  body.talking #touch .act{bottom:calc(32vh + 28px)}
  /* one line: date, purse and a menu button standing in for the six the desktop shows; the place label has no room */
  #hud{gap:6px;padding:0 8px}
  .hud-buttons button{display:none}
  .hud-buttons #btn-menu{display:inline-block;min-width:42px;min-height:38px}
  .hud-place{display:none}
  #hint{bottom:212px}
  #toast{top:auto;bottom:262px;max-width:88vw;font-size:14px}
  body.tasks-open #menu{top:56px}
}
/* a phone on its side: the hint goes under the HUD, clear of the d-pad */
@media (max-height:520px){#hint{bottom:auto;top:52px}}
/* a touch screen has no d-pad now (tap to walk), so the hint and toasts sit at the bottom, and the HUD keeps off a notch */
body.touch #hint{bottom:14px;top:auto}
body.touch #toast{top:56px;bottom:auto}   /* under the HUD, or under the to-do list when it is open (set as each toast shows); never over the dialogue */
body.touch #hud{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
#touch .pad{position:absolute;left:18px;bottom:18px;width:150px;height:150px;display:grid;grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px;pointer-events:auto}
#touch .pad button{background:rgba(20,14,12,.65);border:1px solid var(--brass2);color:var(--paper);font-size:20px;border-radius:10px;touch-action:none;user-select:none}
#touch .pad button[data-k=arrowup]{grid-column:2;grid-row:1}#touch .pad button[data-k=arrowleft]{grid-column:1;grid-row:2}#touch .pad button[data-k=arrowright]{grid-column:3;grid-row:2}#touch .pad button[data-k=arrowdown]{grid-column:2;grid-row:3}
#touch .act{position:absolute;right:24px;bottom:34px;width:76px;height:76px;border-radius:50%;background:rgba(91,31,43,.85);border:2px solid var(--brass);color:var(--paper);font:800 26px 'Nunito',sans-serif;pointer-events:auto;touch-action:none;user-select:none}

/* the title screen */
.title-screen{text-align:center;padding:4px 6px 2px}
.t-kicker{font-family:'IM Fell English SC',serif;letter-spacing:3px;font-size:14px;color:var(--brass2)}
.t-name{font-family:'IM Fell English SC',serif;font-weight:400;font-size:44px;line-height:1.05;color:var(--wine);margin:4px 0 6px}
.t-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:17px;color:#5b3a1f;margin:0 auto 16px;max-width:440px}
.t-continue{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;background:var(--wine);color:var(--paper);border:0;border-radius:12px;padding:12px 16px;box-shadow:0 4px 0 #2a0d13;margin-bottom:10px}
.t-continue:hover,.t-continue:focus-visible{background:#6d2735;outline:none}
.t-continue:active{transform:translateY(2px);box-shadow:0 2px 0 #2a0d13}
.t-cont-top{font:800 19px 'Nunito',sans-serif}
.t-cont-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:15px;opacity:.9}
.t-saves{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto;margin-bottom:4px}
.t-save{display:flex;gap:6px;align-items:stretch}
.t-save .t-continue{flex:1;margin-bottom:0}
.t-forget{flex:none;background:transparent;border:1px solid #c9b998;border-radius:10px;color:#75552f;font-family:'IM Fell English',serif;font-style:italic;font-size:14px;padding:0 10px;cursor:pointer}
.t-forget:hover,.t-forget:focus-visible{background:#f3dfa5;color:var(--wine);outline:none}
.t-or{font-family:'IM Fell English',serif;font-style:italic;color:#75552f;font-size:14px;margin:4px 0 8px}
.t-label{display:block;font-family:'IM Fell English',serif;font-style:italic;font-size:16px;color:#5b3a1f;margin-bottom:6px}
.t-namerow{display:flex;gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.t-namerow input{font:400 24px 'IM Fell English',serif;padding:6px 12px;border:2px solid var(--brass2);border-radius:10px;background:#fffdf5;text-align:center;width:230px;color:var(--ink)}
.t-namerow input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,39,.3)}
.t-begin{background:var(--wine);color:var(--paper);border:0;border-radius:10px;padding:8px 22px;font:800 17px 'Nunito',sans-serif;box-shadow:0 3px 0 #2a0d13}
.t-begin:hover,.t-begin:focus-visible{background:#6d2735;outline:none}
.t-begin:active{transform:translateY(2px);box-shadow:none}
.t-note{font-family:'IM Fell English',serif;font-style:italic;font-size:13px;color:#7a5a36;margin:6px 0 0}
.t-confirm{margin-top:10px;background:#fff4dc;border:2px solid var(--wine);border-radius:10px;padding:8px 12px}
.t-confirm p{margin:0 0 4px;font-family:'IM Fell English',serif;font-size:16px}
.t-confirm .row{justify-content:center}
@media (max-width:520px){.t-name{font-size:34px}}

/* the title screen owns the whole window: no date, no purse and no buttons over a story that has not begun */
body.at-title #hud,body.at-title #hud-btns,body.at-title #tasks,body.at-title #hint,body.at-title #touch{display:none!important}

/* the board's cards and the proof's words are buttons, so they work from the keyboard and take a focus ring */
/* the board is grouped by the year each card was pinned, so a section is shorter than a whole board */
.board-year{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.62;margin:14px 2px 5px;font-weight:700}   /* the sheet is parchment: a cream label on it is invisible */
.board-year:first-child{margin-top:0}
.board.grouped{min-height:auto}   /* not 0: the sheet is a flex column, and 0 lets the board shrink under its own cards */
/* the board sheet is wider than the others, and its cards stand in two columns: what made things happen, and what happened */
.modal-sheet.wide{width:min(1040px,96vw)}
.board-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.board-cols .board{min-height:90px}
.board-heads{margin:8px 0 2px;font:700 12px 'Nunito',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.62}
.board-heads div{padding:0 2px}
.modal-sheet .note.picked{background:#f3dfa5;border-radius:6px;padding:6px 10px;margin-top:8px}
.modal-sheet .ties{margin:4px 0 0;padding-left:22px;font-style:normal}
.modal-sheet .ties li{margin:3px 0}
@media (max-width:700px){.board-cols{grid-template-columns:1fr}.board-heads div:last-child{display:none}}
.board .card{font:inherit;text-align:left;cursor:pointer;border:0;display:block}
.board .card .kind{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:2px}   /* not .62: this label is the colour-blind reader's only cue */
.proof-sheet .ps-w{font:inherit;background:none;border:0;padding:0 1px;cursor:pointer;color:inherit}
.board .card:focus-visible,.ps-w:focus-visible,.pick:focus-visible,#modal button:focus-visible{outline:3px solid #c9a227;outline-offset:2px}
/* a child who has asked their browser for less movement gets less movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* a 320px screen must still be able to reach Begin */
.t-namerow{flex-wrap:wrap}
.t-namerow #nm{flex:1 1 160px;min-width:0;max-width:100%}