/* CRANKWORKS wiki — the game's own language, on a screen that has more than
   two colours to work with.

   Two zones and no third: DARK CHROME around, PAPER inside. Every picture in
   this site is 1-bit art drawn for a black-on-white console, so the reading
   column is light on purpose — the screenshots and the icons then sit in it
   as themselves, with no filter, no inversion and no halo. The dark frame is
   what makes the yellow read as Playdate yellow rather than as a highlighter.

   Nothing loads from outside: no CDN, no web font, no tracker. Pixel art is
   never interpolated (image-rendering: pixelated), which is the whole reason
   the art still looks drawn rather than melted. */

:root {
  --ink: #17150f;
  --ink-soft: #514b3c;
  --paper: #fbf8f0;
  --paper-edge: #e6dfcc;
  --chrome: #15130f;
  --chrome-2: #211e17;
  --chrome-line: #38332a;
  --chrome-ink: #f4efdf;
  --chrome-dim: #a49b85;
  --yellow: #ffc500;
  --yellow-deep: #d9a600;
  --rule: 2px solid var(--ink);
  --shadow: 0 2px 0 var(--paper-edge);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--chrome);
  color: var(--ink);
  font: 16px/1.62 var(--sans);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

.pixel, .shot img, .icon, .brand-mark, .sprite, .machine-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a { color: #7a5c00; text-underline-offset: 2px; }
a:hover { color: var(--ink); background: var(--yellow); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--yellow);
  color: var(--ink); padding: .6rem 1rem; z-index: 20; font-weight: 700;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- top bar -- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1.1rem;
  background: var(--chrome);
  border-bottom: 3px solid var(--yellow);
}

.brand { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; }
.brand:hover { background: none; }
.brand-mark { height: 26px; width: auto; filter: invert(1); }
.brand-sub {
  color: var(--yellow); font: 700 11px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
}

.topsearch { margin-left: auto; }
.topsearch input {
  background: var(--chrome-2); border: 1px solid var(--chrome-line);
  color: var(--chrome-ink); padding: .4rem .7rem; border-radius: 0;
  font: 13px/1.2 var(--sans); width: 190px;
}
.topsearch input:focus { outline: 2px solid var(--yellow); border-color: var(--yellow); }

.langs { display: flex; gap: .3rem; flex-wrap: wrap; }
.langs a {
  color: var(--chrome-dim); text-decoration: none;
  font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .45rem; border: 1px solid transparent;
}
.langs a:hover { color: var(--ink); background: var(--yellow); }
.langs a[aria-current="true"] {
  color: var(--yellow); border-color: var(--chrome-line); background: var(--chrome-2);
}

/* --------------------------------------------------------------- shell -- */

.shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  max-width: 1180px; margin: 0 auto; gap: 0;
}

.sidenav {
  background: var(--chrome); border-right: 1px solid var(--chrome-line);
  padding: 1.4rem .6rem 3rem;
  position: sticky; top: 53px; align-self: start; max-height: calc(100vh - 53px);
  overflow-y: auto;
}
.navtoggle { display: none; }
.sidenav ol { list-style: none; margin: 0; padding: 0; counter-reset: nav; }
.sidenav li { counter-increment: nav; }
.sidenav a {
  display: flex; align-items: center; gap: .5rem;
  color: var(--chrome-dim); text-decoration: none;
  padding: .34rem .5rem; font-size: 13.5px; border-left: 3px solid transparent;
}
.sidenav a::before {
  content: counter(nav, decimal-leading-zero);
  font: 700 10px/1 var(--mono); color: var(--chrome-line); flex: none;
}
.sidenav a:hover { color: var(--chrome-ink); background: var(--chrome-2); }
.sidenav a[aria-current="page"] {
  color: var(--yellow); border-left-color: var(--yellow); background: var(--chrome-2);
}
.sidenav a[aria-current="page"]::before { color: var(--yellow-deep); }
.sidenav .navgroup {
  color: var(--chrome-line); font: 700 10px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; padding: 1.2rem .5rem .4rem;
}

/* ---------------------------------------------------------------- page -- */

main { min-width: 0; background: var(--paper); }

/* The MEASURE is on the prose, not on the page: a 78-character line is right
   for a paragraph and wrong for a nine-column table. Tables and figures get
   the full column, so nothing important sits off the right edge by default. */
.page { padding: 2.2rem 2.4rem 3rem; max-width: 100%; }
.page > p, .page > ul, .page > ol, .page > blockquote, .page > .callout,
.page > h2, .page > h3, .page > .toc, .lede { max-width: 78ch; }

.crumb {
  font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .5rem;
}

h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem); line-height: 1.08; margin: 0 0 .7rem;
  letter-spacing: -.02em;
}
h1::after {
  content: ""; display: block; width: 76px; height: 6px;
  background: var(--yellow); margin-top: .7rem;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 1.8rem; }

h2 {
  font-size: 1.42rem; margin: 2.6rem 0 .8rem; padding-top: 1.2rem;
  border-top: var(--rule); letter-spacing: -.01em;
}
h3 { font-size: 1.1rem; margin: 1.9rem 0 .6rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin: .3rem 0; }

strong { font-weight: 700; }
code {
  font: 13px/1.4 var(--mono); background: #efe9d8; padding: .1em .35em;
  border: 1px solid var(--paper-edge);
}

blockquote {
  margin: 1.4rem 0; padding: .9rem 1.1rem; background: #fff;
  border-left: 6px solid var(--yellow); box-shadow: var(--shadow);
}
blockquote p:last-child { margin: 0; }

.callout {
  margin: 1.4rem 0; padding: .95rem 1.1rem; background: #fffdf4;
  border: var(--rule); box-shadow: 4px 4px 0 var(--paper-edge);
}
.callout p:last-child { margin: 0; }
.callout.is-spoiler { background: #1b1917; border-color: #1b1917; color: var(--paper); }
.callout.is-spoiler .tag { background: var(--yellow); color: var(--ink); }
.callout .tag {
  display: inline-block; background: var(--ink); color: var(--yellow);
  font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .5rem; margin-bottom: .55rem;
}

/* --------------------------------------------------------- table of c. -- */

.toc { margin: 0 0 2.2rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--paper-edge); }
.toc p { font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
         color: var(--ink-soft); margin: 0 0 .5rem; }
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; }
.toc li { margin: .18rem 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- tables -- */

/* Wide tables scroll inside their own box. The shadow on the right edge is
   the only cue a reader gets that there is more table off-screen -- without
   it a scrollable table reads as a clipped one. */
.tablewrap {
  overflow-x: auto; margin: 1.2rem 0 1.6rem;
  border: 1px solid var(--paper-edge); background: #fff;
  background-image: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
                    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)),
                    linear-gradient(to right, rgba(23,21,15,.18), rgba(23,21,15,0)),
                    linear-gradient(to left, rgba(23,21,15,.18), rgba(23,21,15,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
caption {
  caption-side: top; text-align: left; padding: .6rem .8rem;
  font: 700 10px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); background: #faf6ea; border-bottom: 1px solid var(--paper-edge);
}
th, td { padding: .46rem .7rem; text-align: left; vertical-align: top;
         border-bottom: 1px solid #eee7d5; }
thead th {
  background: var(--ink); color: var(--paper); font: 700 11px/1.3 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; position: sticky; top: 0;
  white-space: nowrap;
}
tbody tr:nth-child(even) { background: #fcfaf3; }
tbody tr:hover { background: #fff6d8; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 font-family: var(--mono); font-size: 13px; white-space: nowrap; }
td.name { font-weight: 700; }
tbody td:first-child { font-weight: 600; }
.tid { font: 11px/1.3 var(--mono); color: var(--ink-soft); }
.dash { color: #b8b09a; }

/* ------------------------------------------------------------- figures -- */

.shot { margin: 1.4rem 0; }
.shot img { width: 100%; border: var(--rule); background: #fff; display: block; }
.shot figcaption { font-size: 13px; color: var(--ink-soft); margin-top: .45rem; }

.shotgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.shotgrid .shot { margin: 0; }

.machine-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                 gap: .8rem; margin: 1.4rem 0; }
.machine-cell { background: #fff; border: 1px solid var(--paper-edge); padding: .5rem; text-align: center; }
.machine-cell img { width: 100%; }
.machine-cell b { display: block; font: 700 10px/1.4 var(--mono); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; }

/* -------------------------------------------------------- achievements -- */

.achgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
           gap: .8rem; margin: 1.3rem 0; }
.ach {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .7rem;
  background: #fff; border: 1px solid var(--paper-edge); padding: .65rem;
  box-shadow: var(--shadow);
}
.ach img { width: 52px; height: 52px; }
.ach b { display: block; font-size: 14px; line-height: 1.25; }
.ach span { display: block; font-size: 13px; color: var(--ink-soft); }
.ach .prog { font: 700 10px/1.6 var(--mono); color: var(--yellow-deep); letter-spacing: .06em; }
.ach.is-secret { border-style: dashed; }

.icon { width: 22px; height: 22px; vertical-align: -5px; margin-right: .15rem; }

details.spoiler {
  margin: 1.3rem 0; border: var(--rule); background: #fff;
}
details.spoiler > summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 700; background: var(--ink);
  color: var(--yellow); list-style: none;
}
details.spoiler > summary::-webkit-details-marker { display: none; }
details.spoiler > summary::before { content: "▸ "; }
details.spoiler[open] > summary::before { content: "▾ "; }
details.spoiler > div { padding: .9rem; }

/* ---------------------------------------------------------------- misc -- */

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
            gap: .7rem; margin: 1.4rem 0; }
.stat { background: #fff; border: 1px solid var(--paper-edge); padding: .7rem .8rem; }
.stat b { display: block; font: 700 1.5rem/1.1 var(--mono); }
.stat span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: .2rem; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: .9rem; margin: 1.4rem 0; }
.card { background: #fff; border: 1px solid var(--paper-edge); padding: .8rem;
        box-shadow: var(--shadow); }
.card h4 { margin: 0 0 .3rem; font-size: 15px; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.card .meta { font: 700 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
              color: var(--yellow-deep); }

.hero { margin: 0 0 1.8rem; }
.hero img { width: 100%; border: var(--rule); display: block; }

.homegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
            gap: .8rem; margin: 1.6rem 0; }
.homecard {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--paper-edge); padding: .85rem; box-shadow: var(--shadow);
  border-left: 5px solid var(--yellow);
}
.homecard:hover { background: #fffdf0; border-left-color: var(--ink); }
.homecard b { display: block; font-size: 15px; margin-bottom: .2rem; }
.homecard span { font-size: 13px; color: var(--ink-soft); }

.ref { font-weight: 700; white-space: nowrap; }
.pill {
  display: inline-block; white-space: nowrap; background: var(--ink); color: var(--paper);
  font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .45rem; margin-right: .3rem;
}
.pill.good { background: #2f6b2a; }
.pill.bad { background: #8c2b1e; }
.pill.warn { background: var(--yellow-deep); color: var(--ink); }

/* ------------------------------------------------------------- search --- */

.searchbox { width: 100%; padding: .7rem .9rem; font-size: 16px; border: var(--rule);
             background: #fff; }
#results { list-style: none; padding: 0; margin: 1.2rem 0 0; }
#results li { border-bottom: 1px solid var(--paper-edge); padding: .7rem 0; }
#results a { font-weight: 700; text-decoration: none; }
#results p { margin: .2rem 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* -------------------------------------------------------------- footer -- */

.foot {
  background: var(--chrome); color: var(--chrome-dim); padding: 1.6rem 2.4rem 2.4rem;
  font-size: 13px; border-top: 3px solid var(--yellow);
}
.foot p { margin: .2rem 0; }
.foot-studio { height: 11px; filter: invert(1); image-rendering: pixelated;
               margin-bottom: .7rem; opacity: .75; }
.foot-credit { color: var(--chrome-ink); }
.foot img { height: 13px; vertical-align: -2px; margin: 0 .1rem; image-rendering: pixelated;
            filter: invert(1); }
.foot a { color: var(--yellow); }
.foot a:hover { background: var(--yellow); color: var(--ink); }

/* ------------------------------------------------------------ narrow ---- */

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidenav {
    position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--chrome-line); padding: .5rem .6rem;
  }
  .navtoggle {
    display: block; width: 100%; background: var(--chrome-2); color: var(--chrome-ink);
    border: 1px solid var(--chrome-line); padding: .55rem; font: 700 12px/1 var(--mono);
    letter-spacing: .16em; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .sidenav ol { display: none; padding-top: .4rem; }
  .sidenav.open ol { display: block; }
  .page { padding: 1.5rem 1.1rem 2.2rem; }
  .foot { padding: 1.4rem 1.1rem 2rem; }
  .toc ul { columns: 1; }
  .topsearch { order: 3; margin-left: 0; width: 100%; }
  .topsearch input { width: 100%; }
}

@media print {
  .topbar, .sidenav, .foot, .toc { display: none; }
  body { background: #fff; }
  .page { max-width: none; padding: 0; }
}