/* Captain & Company docs. Parchment and Kenney's frames, taken from the
   game's own skin: the panel and button borders below are the same base64
   SVG nine-slices the UI mock uses (ui-redesign/kit/kenney.css), so the docs
   and the game are wearing one set of art rather than two that drift.

   No external requests: every asset here is inline. The site is a folder of
   static HTML and this one stylesheet. */

:root {
  --ink:#2b1d0e;
  --ink-soft:#6b5636;
  --parch:#fff1d2;
  --parch-hi:#fff8ea;
  --wood:#6d4b27;
  --sea:#16242b;
  --sea-hi:#1d2f38;
  --brass:#a8762a;
  --red:#8e3f38;
  --frame-panel:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxkZWZzLz4KICA8Zz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzZENEIyNyIgZD0iTTIgNSBMMiA1OSBRMiA2MiA1IDYyIEw1OSA2MiBRNjIgNjIgNjIgNTkgTDYyIDUgUTYyIDIgNTkgMiBMNSAyIFEyIDIgMiA1IE01IDAgTDU5IDAgUTY0IDAgNjQgNSBMNjQgNTkgUTY0IDY0IDU5IDY0IEw1IDY0IFEwIDY0IDAgNTkgTDAgNSBRMCAwIDUgMCIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSIjQjQ3QjQxIiBkPSJNMiA1IFEyIDIgNSAyIEw1OSAyIFE2MiAyIDYyIDUgTDYyIDU5IFE2MiA2MiA1OSA2MiBMNSA2MiBRMiA2MiAyIDU5IEwyIDUgTTYgNTggTDU4IDU4IDU4IDYgNiA2IDYgNTgiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0EzNzAzQSIgZD0iTTYgNTggTDYgNiA1OCA2IDU4IDU4IDYgNTggTTggOCBMOCA1NiA1NiA1NiA1NiA4IDggOCIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSIjRkZGMUQyIiBkPSJNOCA4IEw1NiA4IDU2IDU2IDggNTYgOCA4Ii8+CiAgPC9nPgo8L3N2Zz4=);
  --frame-btn:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxkZWZzLz4KICA8Zz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzZENEIyNyIgZD0iTTM2IDIwIEwzOCAyMiA0MyAyMiBRNDUuODUgMjIgNDYgMTkuMzUgTDQ2IDE5IDQ2IDUgUTQ2IDIgNDMgMiBMMTQgMiAxMiA0IDEwIDIgNSAyIFEyIDIgMiA1IEwyIDE5IDIgMTkuMzUgUTIuMTUgMjIgNSAyMiBMMzQgMjIgMzYgMjAgTTAgMTkuMzUgTDAgMTkgMCA1IFEwIDAgNSAwIEwxMCAwIFExMC44NSAwIDExLjQ1IDAuNiBMMTIgMS4xNSAxMi42IDAuNiBRMTMuMTUgMCAxNCAwIEw0MyAwIFE0OCAwIDQ4IDUgTDQ4IDE5IDQ4IDE5LjM1IDQ4IDE5LjUgUTQ3LjggMjQgNDMgMjQgTDM4IDI0IFEzNy4xNSAyNCAzNi42IDIzLjQ1IEwzNiAyMi44NSAzNS40NSAyMy40NSBRMzQuODUgMjQgMzQgMjQgTDUgMjQgUTAuMiAyNCAwIDE5LjUgTDAgMTkuMzUiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0I0N0I0MSIgZD0iTTM2IDIwIEw0My4wNSAyMCBRNDQgMTkuOTUgNDQgMTkgTDQ0IDUgUTQ0IDQgNDMgNCBMMTIgNCAxNCAyIDQzIDIgUTQ2IDIgNDYgNSBMNDYgMTkgNDYgMTkuMzUgUTQ1Ljg1IDIyIDQzIDIyIEwzOCAyMiAzNiAyMCAzNCAyMiA1IDIyIFEyLjE1IDIyIDIgMTkuMzUgTDIgMTkgMiA1IFEyIDIgNSAyIEwxMCAyIDEyIDQgNSA0IFE0IDQgNCA1IEw0IDE5IFE0IDE5Ljk1IDQuOTUgMjAgTDM2IDIwIi8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9IiNGRkYxRDIiIGQ9Ik0zNiAyMCBMNC45NSAyMCBRNCAxOS45NSA0IDE5IEw0IDUgUTQgNCA1IDQgTDEyIDQgNDMgNCBRNDQgNCA0NCA1IEw0NCAxOSBRNDQgMTkuOTUgNDMuMDUgMjAgTDM2IDIwIi8+CiAgPC9nPgo8L3N2Zz4=);
  --frame-main:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxkZWZzLz4KICA8Zz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzhFM0YzOCIgZD0iTTUgMCBMNDMgMCBRNDggMCA0OCA1IEw0OCAxOSBRNDggMjQgNDMgMjQgTDUgMjQgUTAgMjQgMCAxOSBMMCA1IFEwIDAgNSAwIE0yIDUgTDIgMTkgMiAxOS4zNSBRMi4xNSAyMiA1IDIyIEw0MyAyMiBRNDUuODUgMjIgNDYgMTkuMzUgTDQ2IDE5IDQ2IDUgUTQ2IDIgNDMgMiBMNSAyIFEyIDIgMiA1Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9IiNFQzZBNUYiIGQ9Ik0yIDUgUTIgMiA1IDIgTDQzIDIgUTQ2IDIgNDYgNSBMNDYgMTkgNDYgMTkuMzUgUTQ1Ljg1IDIyIDQzIDIyIEw1IDIyIFEyLjE1IDIyIDIgMTkuMzUgTDIgMTkgMiA1IE00IDUgTDQgMTkgUTQgMTkuOTUgNC45NSAyMCBMNDMuMDUgMjAgUTQ0IDE5Ljk1IDQ0IDE5IEw0NCA1IFE0NCA0IDQzIDQgTDUgNCBRNCA0IDQgNSIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSIjQ0Y1RTUzIiBkPSJNNCA1IFE0IDQgNSA0IEw0MyA0IFE0NCA0IDQ0IDUgTDQ0IDE5IFE0NCAxOS45NSA0My4wNSAyMCBMNC45NSAyMCBRNCAxOS45NSA0IDE5IEw0IDUiLz4KICA8L2c+Cjwvc3ZnPg==);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--sea);
  color:var(--parch);
  font:16px/1.65 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

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

.wrap { display:flex; align-items:flex-start; gap:22px; max-width:1240px;
        margin:0 auto; padding:22px 18px 64px; }

.masthead { background:var(--sea-hi); border-bottom:3px solid var(--wood); }
.masthead-in { max-width:1240px; margin:0 auto; padding:14px 18px;
                display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-size:20px;
          font-weight:800; letter-spacing:.04em; color:var(--parch-hi);
          text-decoration:none; }
/* The app icon is a dark navy tile with the wheel on it, a shade darker than
   the bar behind it. Rounding it reads as a mark rather than as a patch. */
.brandmark { width:34px; height:34px; flex:none; border-radius:7px;
             display:block; }
.brand b { color:var(--brass); font-weight:800; }
.masthead nav { margin-left:auto; display:flex; gap:14px; flex-wrap:wrap; }
.masthead nav a { color:var(--parch); text-decoration:none; font-size:14px;
                   letter-spacing:.03em; }
.masthead nav a:hover { color:var(--brass); }

/* ---- parchment panel ---- */

.panel {
  border:16px solid transparent;
  border-image:var(--frame-panel) 8 fill stretch;
  padding:18px 22px;
  color:var(--ink);
  background:none;
}

/* ---- sidebar ---- */

.side { width:262px; flex:none; position:sticky; top:16px; }
/* The nav is a <details> so it can collapse on a phone. On a wide screen the
   summary is not a control anyone needs, so it is hidden and the element
   stays open. */
.side > summary { display:none; }
.side .panel { padding:14px 16px; }
.side h2 { font-size:12px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--ink-soft); margin:14px 0 6px; }
.side h2:first-child { margin-top:0; }
.side ul { list-style:none; margin:0 0 4px; padding:0; }
.side li { margin:0; }
.side a { display:block; padding:3px 6px; color:var(--ink); text-decoration:none;
           font-size:14.5px; border-left:3px solid transparent; }
.side a:hover { background:rgba(109,75,39,.10); }
.side a.on { border-left-color:var(--red); background:rgba(142,63,56,.10);
              font-weight:700; }

/* ---- article ---- */

.main { flex:1; min-width:0; }
.main .panel > :first-child { margin-top:0; }
.main .panel > :last-child { margin-bottom:0; }

h1 { font-size:31px; line-height:1.2; margin:0 0 4px; letter-spacing:.01em; }
h2 { font-size:22px; margin:30px 0 8px; border-bottom:2px solid rgba(109,75,39,.35);
      padding-bottom:5px; }
h3 { font-size:17.5px; margin:22px 0 6px; }
p, li { color:var(--ink); }
a { color:#8a5a12; }
a:hover { color:var(--red); }
strong { color:#5b3d14; }
hr { border:none; border-top:2px solid rgba(109,75,39,.3); margin:26px 0; }

.lede { font-size:17px; color:var(--ink-soft); margin:0 0 18px; }

ul, ol { padding-left:22px; }
li { margin:3px 0; }

code { background:rgba(109,75,39,.13); padding:1px 5px; font-size:14px;
        font-family:"Consolas", "Menlo", monospace; }
pre { background:rgba(109,75,39,.13); padding:12px 14px; overflow-x:auto; }
pre code { background:none; padding:0; }

blockquote { margin:16px 0; padding:2px 0 2px 14px;
              border-left:4px solid rgba(109,75,39,.4); color:var(--ink-soft); }

/* tables scroll rather than pushing the page sideways */
.tablewrap { overflow-x:auto; margin:16px 0; }
table { border-collapse:collapse; width:100%; min-width:520px; }
th, td { border:1px solid rgba(109,75,39,.35); padding:7px 10px;
          text-align:left; vertical-align:top; font-size:14.5px; color:var(--ink); }
th { background:rgba(109,75,39,.16); font-size:12.5px; letter-spacing:.08em;
      text-transform:uppercase; }

/* ---- callouts ---- */

.note { margin:18px 0; padding:12px 14px; border-left:5px solid var(--brass);
         background:rgba(168,118,42,.12); }
.note.warn { border-left-color:var(--red); background:rgba(142,63,56,.12); }
.note.gone { border-left-color:#6b5636; background:rgba(107,86,54,.12); }
.note > :first-child { margin-top:0; }
.note > :last-child { margin-bottom:0; }
.note .k { display:block; font-size:11.5px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px; }

/* ---- key term, matching the game's orange emphasis ---- */
.term { color:#9a5b12; font-weight:700; }

/* ---- footer nav ----
   Both frames come from the game skin. The plain one is a wood border round
   a cream field, so its label is ink; only the red .main frame is dark
   enough behind cream. */

.pager { display:flex; gap:12px; justify-content:space-between; margin-top:22px; }
.pager a { border:12px solid transparent; border-image:var(--frame-btn) 8 fill stretch;
            padding:6px 14px; color:var(--ink); text-decoration:none;
            font-size:14px; max-width:48%; }
.pager a.next { border-image:var(--frame-main) 8 fill stretch; color:#fff3e0;
                 margin-left:auto; text-align:right; }
.pager a:active { transform:translateY(2px); }

.stamp { margin-top:20px; font-size:12.5px; color:#7f6a4a; text-align:center; }
.stamp a { color:#7f6a4a; }

/* ---- mobile ---- */

.sidetoggle { display:none; }

@media (max-width:900px) {
  .wrap { flex-direction:column; gap:14px; padding:14px 12px 48px; }
  .side { width:100%; position:static; }
  .side > summary { display:block; list-style:none; cursor:pointer;
                    border:12px solid transparent;
                    border-image:var(--frame-btn) 8 fill stretch;
                    padding:6px 14px; color:var(--ink);
                    font-size:14px; font-weight:700; letter-spacing:.06em; }
  .side > summary::-webkit-details-marker { display:none; }
  .side > summary::after { content:" \25BE"; }
  .side[open] > summary::after { content:" \25B4"; }
  .side .panel { margin-top:8px; }
  h1 { font-size:26px; }
  .pager a { max-width:100%; }
}