/* Foundry Isles - a printed almanac laid over a live diorama. Paper, ink, a little rust. */
:root {
  --paper: #f3ecdd; --paper-2: #ebe2cf; --ink: #23201b; --ink-2: #5b554b; --ink-3: #8a8274; --rule: #cfc3aa;
  --rust: #a4512b; --sea: #4f7f84; --moss: #6c7d4f;
  --display: "Fraunces", Georgia, serif; --text: "Newsreader", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #e7decb; color: var(--ink); font: 400 16px/1.5 var(--text); font-variant-numeric: oldstyle-nums; -webkit-font-smoothing: antialiased; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: oldstyle-nums tabular-nums; }

/* paper: a faint grain and a hairline frame, square corners, a shadow like a card on a table */
.slip {
  position: fixed; z-index: 5; background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -12px rgba(48, 38, 22, .35), 0 2px 6px -2px rgba(48, 38, 22, .2);
  outline: 1px solid rgba(35, 32, 27, .14); outline-offset: -6px;
}

/* the masthead */
.mast { top: 22px; left: 22px; padding: 18px 26px 16px; max-width: 470px; }
.mast h1 { margin: 0; font: 600 44px/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -0.015em; }
.mast .tag { margin: 6px 0 4px; font: italic 400 17px/1.3 var(--text); color: var(--ink-2); }
.mast .what { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.mast .when { margin: 0; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: "smcp"; color: var(--ink-2); }
.mast .when .sep { color: var(--rule); margin: 0 4px; }
.mast #clock { text-transform: none; letter-spacing: 0; color: var(--ink); }

/* the almanac */
.almanac { top: 22px; right: 22px; bottom: 22px; width: 380px; padding: 6px 26px 26px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.tabs { display: none; }
.almanac section { padding-top: 18px; }
.almanac section + section { margin-top: 10px; border-top: 2px solid var(--ink); }
.almanac section + section::before { content: ""; display: block; border-top: 1px solid var(--ink); margin-top: 3px; }
h2 { margin: 0 0 12px; font: 600 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; }
h2 .folio { font: italic 500 15px var(--display); letter-spacing: 0; color: var(--rust); margin-right: 4px; text-transform: none; }
h2 .count { float: right; font: 400 13px var(--mono); color: var(--ink-3); letter-spacing: 0; }

.settlers { list-style: none; margin: 0; padding: 0; }
.settlers li { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dotted var(--rule); cursor: pointer; }
.settlers li:hover .name { color: var(--rust); }
.settlers .dot { width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px rgba(35,32,27,.25); }
.settlers .name { font: italic 500 18px/1.2 var(--display); }
.settlers .trade { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.settlers .doing { grid-column: 2 / 4; font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.settlers .doing.speak { color: var(--ink); font-style: italic; }
.stock { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.stock span:first-child, .works > span:first-child { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.works { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.works i { font-family: var(--display); color: var(--ink); }

.lede { margin: 0 0 12px; font-size: 15.5px; line-height: 1.45; }
.note { margin: 0 0 12px; font: italic 400 15px/1.4 var(--text); color: var(--ink); }
.buildings { list-style: none; margin: 0; padding: 0; }
.buildings li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dotted var(--rule); }
.buildings .name { font: italic 500 17px/1.2 var(--display); }
.buildings .state { font: 400 12px var(--mono); color: var(--ink-3); }
.buildings li.stands .state { color: var(--moss); }
.buildings li.going .state { color: var(--rust); }
.buildings .who { grid-column: 1 / 3; font-size: 13.5px; color: var(--ink-2); }
.buildings .does { grid-column: 1 / 3; font-size: 13.5px; font-style: italic; color: var(--ink-2); }
.buildings li.planned .name { color: var(--ink-2); }
.unsure { color: var(--ink-3); font-style: italic; }
.cite { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.cite.minds { margin: 10px 0 0; }

.chronicle p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.45; }
.chronicle p .d { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); margin-bottom: 1px; }
.chronicle p .t { display: block; }
.chronicle p:first-child .t::first-letter { float: left; font: 600 42px/0.8 var(--display); margin: 5px 7px 0 0; color: var(--ink); }

.moot { list-style: none; margin: 0 0 10px; padding: 0; }
.moot li { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dotted var(--rule); }
.moot .who { font: italic 500 16px/1.2 var(--display); }
.moot .what { font-size: 14.5px; }
.moot .hands { font: 400 12.5px var(--mono); color: var(--ink-3); }
.moot q { grid-column: 1 / 4; font-size: 14px; font-style: italic; color: var(--ink-2); quotes: "“" "”"; }
.moot .why { grid-column: 1 / 4; font-size: 12.5px; color: var(--ink-3); }
.moot li.won .what { color: var(--rust); font-weight: 600; }
.moot li.won .hands { color: var(--rust); }
.moot li.struck .what { text-decoration: line-through; color: var(--ink-3); }
.ledger { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.45 var(--mono); color: var(--ink-2); }
.ledger li { padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.ledger time { color: var(--rust); margin-right: 8px; }
.data { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.colophon { margin: 24px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13.5px; font-style: italic; color: var(--ink-3); }

/* ?photo: the isles alone, for pictures */
body.photo .slip { display: none; }

/* the notebook card */
.card { left: 22px; bottom: 22px; width: 360px; max-height: calc(100vh - 240px); overflow-y: auto; padding: 18px 24px 20px; }
.card[hidden] { display: none; }
.card .close { position: absolute; top: 12px; right: 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card .close:hover { color: var(--rust); }
.card .kicker { margin: 0; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.card h3 { margin: 2px 0 4px; font: italic 600 34px/1.05 var(--display); }
.card .soul { margin: 0 0 12px; font-style: italic; color: var(--ink-2); font-size: 15px; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0 0 14px; font-size: 14.5px; }
.facts dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; }
.facts dd i { font-family: var(--display); }
.card h4 { margin: 0 0 6px; font: 600 12px var(--text); letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--rule); padding-top: 10px; }
.notebook { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.45 var(--mono); color: var(--ink-2); }
.notebook li { padding: 3px 0; }

.hint { left: 50%; bottom: 22px; transform: translateX(-50%); padding: 8px 16px; font-size: 13.5px; font-style: italic; color: var(--ink-2); transition: opacity .8s; }
.hint.gone { opacity: 0; pointer-events: none; }

/* in the diorama: names and words, as paper tags */
.tagname { font: italic 500 13px var(--display); color: var(--ink); background: var(--paper); padding: 1px 7px; box-shadow: 0 2px 6px -2px rgba(30,24,14,.4); white-space: nowrap; transform: translateY(-6px); pointer-events: none; }
.speech { max-width: 210px; font: italic 400 14px/1.3 var(--text); color: var(--ink); background: var(--paper); padding: 6px 10px 7px; box-shadow: 0 3px 10px -3px rgba(30,24,14,.45); transform: translateY(-14px); pointer-events: none; position: relative; animation: rise .35s ease-out; }
.speech::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--paper); }
.speech b { font-style: normal; font-weight: 600; font-family: var(--display); }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(-14px); } }

/* the keeper's page (/keeper): one slip of paper on the table, where the owner sets the model key */
html.keeper-page, html.keeper-page body { height: auto; min-height: 100%; overflow: auto; }
.keeper { position: relative; max-width: 540px; margin: 56px auto; padding: 26px 32px 24px; }
.keeper .kicker { margin: 0; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.keeper h1 { margin: 2px 0 6px; font: italic 600 40px/1.05 var(--display); font-variation-settings: "opsz" 144, "SOFT" 50; }
.keeper .soul { margin: 0 0 16px; font-style: italic; color: var(--ink-2); font-size: 15.5px; }
.keeper .facts { padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.keeper label { display: block; margin: 14px 0 4px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.keeper input { width: 100%; padding: 6px 0; font: 400 15px var(--mono); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none; }
.keeper input:focus { border-bottom-color: var(--rust); }
.keeper .row { display: flex; gap: 18px; align-items: baseline; margin: 16px 0 12px; }
.keeper .go { padding: 6px 16px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: var(--ink); }
.keeper .go:hover { background: var(--rust); }
.keeper .quiet { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.keeper .quiet:hover { color: var(--rust); }
.keeper button:disabled, .keeper input:disabled { opacity: .45; cursor: default; }
.keeper .note:empty { display: none; }
@media (max-width: 600px) { .keeper { margin: 16px; padding: 20px 20px 18px; } .keeper .facts { grid-template-columns: 80px 1fr; } }

/* small screens: the almanac becomes a sheet at the bottom with tabs */
@media (max-width: 900px) {
  .mast { top: 12px; left: 12px; right: 12px; max-width: none; padding: 12px 16px; }
  .mast h1 { font-size: 30px; }
  .mast .tag, .mast #season, .mast .s2 { display: none; }
  .mast .what { font-size: 13px; margin-bottom: 8px; }
  .almanac { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; height: 42vh; padding: 0 18px 18px; }
  .tabs { display: flex; position: sticky; top: 0; z-index: 2; background: var(--paper); margin: 0 -18px; padding: 10px 18px 8px; border-bottom: 1px solid var(--rule); gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: none; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
  .tabs button.on { color: var(--ink); border-bottom: 2px solid var(--rust); }
  .almanac section { display: none; }
  .almanac section.on { display: block; }
  .almanac section + section { border-top: 0; margin-top: 0; }
  .almanac section + section::before { display: none; }
  .card { left: 12px; right: 12px; width: auto; bottom: calc(42vh + 22px); max-height: 40vh; }
  .hint { display: none; }
}