/* The outlaws page: the rules page's paper, with a gallery of all 2,222 on it. */
.note { font: 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin: 0 0 6px; max-width: 60em; }
.note:empty { display: none; }

/* filters and search, pinned under the header */
.bar { position: sticky; top: 66px; z-index: 4; background: var(--paper); border-bottom: 1px solid var(--ink);
  max-width: 1180px; margin: 0 auto; padding: 12px clamp(22px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bar button, .d-nav button { font: 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  padding: 8px 11px; border: 1px solid var(--ink); border-radius: 99px; background: none; cursor: pointer; }
.bar button span { opacity: .6; }
.bar button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.bar button:hover:not([aria-pressed="true"]) { color: var(--accent); border-color: var(--accent); }
.bar button[hidden], .filters[hidden] { display: none; }
#n-q { font: 13px/1 var(--mono); color: var(--ink); background: #fff8ec; border: 1px solid var(--ink); border-radius: 99px; padding: 9px 14px; width: min(240px, 100%); }
#n-q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the cards */
.grid { max-width: 1180px; margin: 0 auto; padding: 22px clamp(22px, 5vw, 64px) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.card { display: block; width: 100%; padding: 0; text-align: left; color: var(--ink); background: #fff8ec; border: 1px solid var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; font: inherit; }
.card:hover, .card:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); outline: none; }
.card .art { aspect-ratio: 1; background: #efe2c4; border-bottom: 1px solid var(--ink); }
.card .art svg, .d-art svg { display: block; width: 100%; height: 100%; }
.card b { display: block; padding: 9px 10px 0; font: 500 17px/1.25 var(--head); font-style: italic; }
.card small { display: block; padding: 4px 10px 10px; font: 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.card.r1 small { opacity: 1; color: #1f6fd1; } .card.r2 small { opacity: 1; color: #8a35d6; } .card.r3 small { opacity: 1; color: #a87400; }
.empty { text-align: center; font: 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 40px 0; }

/* one outlaw, large */
dialog { width: min(860px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink); display: none; }
dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
dialog::backdrop { background: rgb(14 8 6 / .7); }
.d-art { aspect-ratio: 1; border-right: 1px solid var(--ink); background: #efe2c4; }
.d-info { padding: 22px 24px 10px; min-width: 0; }
.d-info .kicker { margin-bottom: 10px; }
.d-info h2 { font: 500 clamp(26px, 3vw, 36px)/1.12 var(--head); font-style: italic; margin: 0 0 14px; }
.d-info table { font-size: 15px; margin: 0 0 12px; }
.d-info td:first-child { font: 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; width: 42%; }
.d-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.d-links a:hover { color: var(--accent); }
.d-nav { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--ink); }
.d-nav button:hover { background: var(--ink); color: var(--bone); }
footer a { text-decoration: none; }

@media (max-width: 700px) {
  dialog[open] { grid-template-columns: 1fr; overflow-y: auto; }
  .d-art { border-right: 0; border-bottom: 1px solid var(--ink); max-width: 420px; width: 100%; justify-self: center; }
  .d-info { padding: 16px 18px 6px; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card b { font-size: 15px; padding: 7px 8px 0; }
  .card small { padding: 3px 8px 8px; font-size: 9.5px; }
  .bar { position: static; }
  #n-q { width: 100%; }
}