/* The finder's looks (2026-09-19). Every look is a set of custom properties on [data-theme]; the components below read
   only those, so a look set on any element (the page's <html>, or one of the demos at the foot) holds for everything
   inside it. Words that change with the look: .v-clean/.v-paper/.v-comic/.v-quest show in that look only, .v-std in all
   but the quest board, .v-plain in Clean and Newspaper, .v-rest in all but the Newspaper (beside a .v-paper, for the
   paper's own word: "The firms" where the others say "Companies"). The newspaper look borrows the paper's own inks and
   faces. The firms' files and the pay table (firms.py) are set from the same properties: see the foot of this file. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

[data-theme] {
  --show-clean: none; --show-paper: none; --show-comic: none; --show-quest: none; --show-std: contents; --show-plain: none;
  --show-rest: contents;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #F5F6F8; --fg: #15181D; --muted: #5A6371; --line: #E2E5EA; --accent: #2F5BEA; --accent-fg: #fff;
  --font-body: var(--sans); --font-head: var(--sans); --font-ui: var(--sans);
  --body-size: 16px; --body-weight: 400; --ink: none;
  --head-weight: 800; --head-track: -.02em; --head-case: none;
  --hero-size: clamp(34px, 6vw, 56px); --hero-fg: var(--fg); --hero-muted: var(--muted); --hero-stroke: 0 transparent;
  --hero-text-shadow: none; --hero-bg: transparent; --hero-border: 0 solid transparent; --hero-top: var(--hero-border);
  --hero-bottom: var(--hero-border); --hero-shadow: none; --hero-pad: 14px 0 6px; --hero-align: left; --hero-inline: 0;
  --kicker-case: none; --kicker-track: 0;
  --radius: 14px; --radius-lg: 20px;
  --input-border: 1px solid #D0D6DE; --input-bg: #fff; --input-fg: var(--fg);
  --btn-font: 700 15px/1 var(--sans); --btn-case: none; --btn-track: 0; --btn-bg: var(--accent); --btn-fg: #fff;
  --btn-border: 0 solid transparent; --btn-radius: 10px; --btn-shadow: none;
  --chip-font: 600 14px/1.2 var(--sans); --chip-case: none; --chip-track: 0; --chip-bg: #fff; --chip-fg: var(--fg);
  --chip-border: 1px solid var(--line); --chip-radius: 999px; --chip-on-bg: var(--fg); --chip-on-fg: #fff;
  --gap: 14px; --card-pad: 16px 16px 14px; --card-bg: #fff; --card-fg: var(--fg); --card-muted: var(--muted);
  --card-border: 1px solid var(--line); --card-shadow: 0 1px 2px rgba(16, 24, 40, .05); --tilt: 0deg; --tilt-alt: 0deg;
  --pin: none; --here-edge: inset 3px 0 0 var(--accent);
  --tag-font: 600 12px/1 var(--sans); --tag-case: none; --tag-track: 0; --tag-bg: #EEF2FF; --tag-fg: #3346A8;
  --tag-border: 0 solid transparent; --tag-radius: 6px; --tag-pad: 5px 8px;
  --flag-bg: #E6F6EC; --flag-fg: #12703E; --flag-border: 0 solid transparent;
  --title-font: var(--font-head); --title-weight: 700; --title-size: 18px; --title-track: -.01em; --title-case: none;
  --pay-font: 700 14px/1.2 var(--sans); --pay-bg: #E6F6EC; --pay-fg: #0F6B3B; --pay-border: 0 solid transparent;
  --pay-radius: 6px; --pay-pad: 4px 8px; --pay-below: 0; --tail: none; --coin: none;
  --kind-font: 600 13px/1.2 var(--sans); --kind-bg: #F1F3F6; --kind-fg: #3E4652; --kind-border: 0 solid transparent; --kind-pad: 4px 8px;
  --foot-rule: 1px solid var(--line); --section-rule: 1px solid var(--line);
  --mark-radius: 9px; --mark-border: 0 solid transparent; --mark-font: 800 13px/1 var(--sans); --brand-font: 800 17px/1 var(--sans);
  --warn-bg: #FFF4E0; --warn-fg: #6B3D00; --warn-border: 1px solid #F1CF96;
}
[data-theme="clean"] { --show-clean: contents; --show-plain: contents; }

/* Newspaper: the paper's cream, its grain, its faces (paper.css) */
[data-theme="paper"] {
  --show-paper: contents; --show-plain: contents; --show-rest: none;
  --bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(90deg, #E2D8C0 0%, #EAE1CB 22%, #EFE7D4 55%, #E6DCC5 100%);
  --fg: #241F1B; --muted: #4A4238; --line: rgba(36, 31, 27, .5); --accent: #B3261E; --accent-fg: #F6F0E1;
  --font-body: Tinos, "Times New Roman", Times, serif; --font-head: "Old Standard TT", "Times New Roman", Times, serif;
  --font-ui: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --body-size: 16.5px; --ink: 0 0 .35px rgba(36, 31, 27, .55);
  --head-weight: 700; --head-track: 0;
  --hero-size: clamp(44px, 10vw, 96px); --hero-top: 1px solid var(--fg); --hero-bottom: 4px double var(--fg);
  --hero-pad: 10px 0 14px; --hero-align: center; --hero-inline: auto;
  --kicker-case: uppercase; --kicker-track: .14em;
  --radius: 0; --radius-lg: 0;
  --input-border: 1px solid var(--fg); --input-bg: rgba(255, 252, 242, .6);
  --btn-font: 900 13px/1 var(--font-ui); --btn-case: uppercase; --btn-track: .1em; --btn-bg: var(--fg); --btn-fg: #F3ECDC;
  --btn-border: 1px solid var(--fg); --btn-radius: 0;
  --chip-font: 700 12px/1.2 var(--font-ui); --chip-case: uppercase; --chip-track: .08em; --chip-bg: transparent;
  --chip-border: 1px solid var(--line); --chip-radius: 0; --chip-on-bg: var(--fg); --chip-on-fg: #F3ECDC;
  --gap: 12px; --card-pad: 12px 14px 10px; --card-bg: rgba(255, 252, 242, .3); --card-border: 1px solid var(--fg);
  --card-shadow: none; --here-edge: inset 0 0 0 3px rgba(255, 252, 242, .5), inset 0 0 0 4px var(--fg);
  --tag-font: 700 11px/1 var(--font-ui); --tag-case: uppercase; --tag-track: .14em; --tag-bg: transparent; --tag-fg: var(--accent);
  --tag-radius: 0; --tag-pad: 0;
  --flag-bg: var(--accent); --flag-fg: #F6F0E1;
  --title-weight: 700; --title-size: 19px; --title-track: .02em; --title-case: uppercase;
  --pay-font: 700 15.5px/1.2 var(--font-body); --pay-bg: transparent; --pay-fg: var(--fg); --pay-pad: 0;
  --kind-font: italic 400 15px/1.2 var(--font-body); --kind-bg: transparent; --kind-fg: var(--muted); --kind-pad: 0 2px;
  --foot-rule: 1px solid var(--line); --section-rule: 4px double var(--fg);
  --warn-bg: transparent; --warn-fg: var(--fg); --warn-border: 1.5px solid var(--accent);
  --mark-radius: 0; --mark-border: 1px solid var(--fg); --mark-font: 700 14px/1 var(--font-head); --brand-font: 700 21px/1 var(--font-head);
}

/* Comic: panels in heavy ink, halftone dots, a caption box and a speech bubble */
[data-theme="comic"] {
  --show-comic: contents; --show-std: contents;
  --bg: radial-gradient(rgba(214, 40, 57, .17) 1.6px, transparent 2.1px) 0 0 / 13px 13px, #FFF3C4;
  --fg: #111; --muted: #333; --line: #111; --accent: #E63946; --accent-fg: #fff;
  --font-body: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive; --font-head: Bangers, Impact, "Arial Black", sans-serif;
  --font-ui: var(--font-body); --body-size: 16.5px; --body-weight: 700;
  --head-weight: 400; --head-track: .03em; --head-case: uppercase;
  --hero-size: clamp(46px, 10vw, 100px); --hero-fg: #FFD60A; --hero-muted: #fff; --hero-stroke: 2.5px #111;
  --hero-text-shadow: 4px 4px 0 #111;
  --hero-bg: radial-gradient(rgba(255, 255, 255, .16) 1.6px, transparent 2.1px) 0 0 / 12px 12px, #2563EB;
  --hero-border: 3px solid #111; --hero-top: var(--hero-border); --hero-bottom: var(--hero-border);
  --hero-shadow: 7px 7px 0 #111; --hero-pad: 22px 20px 24px;
  --radius: 6px; --radius-lg: 8px;
  --input-border: 3px solid #111; --input-bg: #fff;
  --btn-font: 400 21px/1 var(--font-head); --btn-track: .05em; --btn-bg: #E63946; --btn-fg: #fff; --btn-border: 3px solid #111;
  --btn-radius: 6px; --btn-shadow: 3px 3px 0 #111;
  --chip-font: 700 14px/1.2 var(--font-body); --chip-bg: #fff; --chip-fg: #111; --chip-border: 2.5px solid #111;
  --chip-on-bg: #111; --chip-on-fg: #FFD60A;
  --gap: 24px 22px; --card-pad: 16px 16px 14px; --card-bg: #fff; --card-border: 3px solid #111; --card-shadow: 6px 6px 0 #111;
  --tilt: -.6deg; --tilt-alt: .5deg; --here-edge: inset 0 -6px 0 #FFD60A;
  --tag-font: 400 16px/1 var(--font-head); --tag-case: uppercase; --tag-track: .05em; --tag-bg: #FFD60A; --tag-fg: #111;
  --tag-border: 2px solid #111; --tag-radius: 0; --tag-pad: 5px 8px 3px;
  --flag-bg: #E63946; --flag-fg: #fff; --flag-border: 2px solid #111;
  --title-weight: 400; --title-size: 26px; --title-track: .03em; --title-case: uppercase;
  --pay-font: 700 15px/1.2 var(--font-body); --pay-bg: #fff; --pay-fg: #111; --pay-border: 2.5px solid #111;
  --pay-radius: 20px; --pay-pad: 6px 13px; --pay-below: 10px; --tail: block;
  --kind-font: 700 13px/1.2 var(--font-body); --kind-bg: #D9F0FF; --kind-fg: #111; --kind-border: 2px solid #111;
  --foot-rule: 2px dashed #111; --section-rule: 4px solid #111;
  --warn-bg: #FFD60A; --warn-fg: #111; --warn-border: 2.5px solid #111;
  --mark-radius: 50%; --mark-border: 2.5px solid #111; --mark-font: 400 15px/1 var(--font-head); --brand-font: 400 26px/1 var(--font-head);
}

/* Quest board: parchment notices pinned to planks, the pay in gold */
[data-theme="quest"] {
  --show-quest: contents; --show-std: none;
  --bg: repeating-linear-gradient(90deg, transparent 0 176px, rgba(0, 0, 0, .28) 176px 179px, rgba(255, 220, 160, .05) 179px 181px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, .05) 2px 5px),
        linear-gradient(180deg, #5C3B1E, #452A12);
  --fg: #F4E4C1; --muted: #DCC79E; --line: rgba(244, 228, 193, .35); --accent: #C8962E; --accent-fg: #2A1707;
  --font-body: Alegreya, Georgia, "Times New Roman", serif; --font-head: Cinzel, "Trajan Pro", Georgia, serif;
  --font-ui: var(--font-body); --body-size: 17px;
  --head-weight: 700; --head-track: .04em;
  --hero-size: clamp(32px, 6.4vw, 64px); --hero-fg: #F6D58B;
  --hero-text-shadow: 0 2px 0 #2A1707, 0 0 18px rgba(246, 213, 139, .25);
  --hero-bg: linear-gradient(180deg, #3B2412, #2C190B); --hero-border: 3px solid #1E1107; --hero-top: var(--hero-border);
  --hero-bottom: var(--hero-border); --hero-shadow: inset 0 0 0 2px rgba(200, 150, 46, .45), 0 10px 24px rgba(0, 0, 0, .45);
  --hero-pad: 22px 20px; --hero-align: center; --hero-inline: auto;
  --kicker-case: uppercase; --kicker-track: .18em;
  --radius: 3px; --radius-lg: 6px;
  --input-border: 2px solid #2A1707; --input-bg: #F3E3BF; --input-fg: #2A1707;
  --btn-font: 700 15px/1 var(--font-head); --btn-track: .04em; --btn-bg: linear-gradient(#94301F, #6B1D14); --btn-fg: #F8E7C3;
  --btn-border: 2px solid #3A0F09; --btn-radius: 4px; --btn-shadow: 0 2px 0 #2A0B06;
  --chip-font: 700 13px/1.2 var(--font-head); --chip-bg: rgba(243, 227, 191, .93); --chip-fg: #3B2A17;
  --chip-border: 1px solid #2A1707; --chip-radius: 3px; --chip-on-bg: #C8962E; --chip-on-fg: #2A1707;
  --gap: 30px 22px; --card-pad: 22px 18px 16px;
  --card-bg: radial-gradient(ellipse at 50% 40%, #F8EBCB 55%, #E7D09D 100%); --card-fg: #3A2914; --card-muted: #6B5433;
  --card-border: 1px solid #B58E52; --card-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 0 22px rgba(120, 80, 30, .2);
  --tilt: -.8deg; --tilt-alt: .7deg; --pin: block; --here-edge: inset 0 0 0 2px #C8962E;
  --tag-font: 700 11.5px/1 var(--font-head); --tag-case: uppercase; --tag-track: .14em; --tag-bg: transparent; --tag-fg: #7A1F14;
  --tag-pad: 0;
  --flag-bg: #7A1F14; --flag-fg: #F8E7C3;
  --title-weight: 700; --title-size: 19px; --title-track: .02em;
  --pay-font: 700 16.5px/1.2 var(--font-body); --pay-bg: transparent; --pay-fg: #7A4B0B; --pay-pad: 0; --coin: inline-block;
  --kind-font: italic 400 15.5px/1.2 var(--font-body); --kind-bg: transparent; --kind-fg: #6B5433; --kind-pad: 0 2px;
  --foot-rule: 1px dashed rgba(90, 60, 20, .45); --section-rule: 3px solid rgba(0, 0, 0, .35);
  --warn-bg: rgba(122, 31, 20, .1); --warn-fg: #5A150D; --warn-border: 1px solid #7A1F14;
  --mark-radius: 50%; --mark-border: 2px solid #2A1707; --mark-font: 700 13px/1 var(--font-head); --brand-font: 700 19px/1 var(--font-head);
}

/* Clean goes dark with the phone */
@media (prefers-color-scheme: dark) {
  [data-theme="clean"] {
    --bg: #0E1116; --fg: #E8EBF0; --muted: #9AA3B2; --line: #262C36; --accent: #7C9BFF; --accent-fg: #0E1116;
    --input-bg: #161A21; --input-border: 1px solid #2C3440; --btn-fg: #0E1116; --chip-bg: #161A21; --chip-on-bg: #E8EBF0;
    --chip-on-fg: #0E1116; --card-bg: #161A21; --card-shadow: none; --tag-bg: #1E2542; --tag-fg: #B3C2FF;
    --flag-bg: #12301F; --flag-fg: #86E3AC; --pay-bg: #12301F; --pay-fg: #8BE7B0; --kind-bg: #1E232C; --kind-fg: #C5CCD6;
    --warn-bg: #2E230F; --warn-fg: #FFD9A0; --warn-border: 1px solid #5A4520;
  }
}

.v-clean { display: var(--show-clean); }  .v-paper { display: var(--show-paper); }  .v-comic { display: var(--show-comic); }
.v-quest { display: var(--show-quest); }  .v-std { display: var(--show-std); }  .v-plain { display: var(--show-plain); }
.v-rest { display: var(--show-rest); }

body {
  background: var(--bg); background-attachment: fixed; color: var(--fg);
  font: var(--body-weight) var(--body-size)/1.5 var(--font-body); text-shadow: var(--ink); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 9; padding: 8px 12px; background: var(--card-bg); color: var(--card-fg); }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the bar */
.bar { max-width: 1180px; margin: 0 auto; padding: 14px 16px 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: var(--brand-font); letter-spacing: var(--head-track); }
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--mark-radius);
        border: var(--mark-border); background: var(--accent); color: var(--accent-fg); font: var(--mark-font); letter-spacing: .02em; }
.city { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border: var(--chip-border); border-radius: var(--chip-radius);
        background: var(--chip-bg); color: var(--chip-fg); font: var(--chip-font); text-decoration: none; }
.chg { font-size: .78em; opacity: .7; text-decoration: underline; }
.tabs { display: flex; gap: 6px; }
.tabs a { padding: 7px 12px; text-align: center; text-decoration: none; white-space: nowrap; font: var(--chip-font);
          text-transform: var(--chip-case); letter-spacing: var(--chip-track); text-shadow: none; background: var(--chip-bg);
          color: var(--chip-fg); border: var(--chip-border); border-radius: var(--chip-radius); }
.tabs a.on { background: var(--chip-on-bg); color: var(--chip-on-fg); }
.bar-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 14px/1.3 var(--font-ui); }
.bar-links a { text-decoration: none; }
.bar-links a:hover { text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px; overflow-x: clip; }

/* the hero: what this page is, and the search */
.hero { margin: 6px 0 16px; padding: var(--hero-pad); background: var(--hero-bg); border: var(--hero-border); border-top: var(--hero-top);
        border-bottom: var(--hero-bottom); border-radius: var(--radius-lg); box-shadow: var(--hero-shadow); text-align: var(--hero-align); }
.kicker { margin: 0 0 6px; font: 600 13px/1.3 var(--font-ui); color: var(--hero-muted); text-transform: var(--kicker-case); letter-spacing: var(--kicker-track); }
.hero-h { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--hero-size); line-height: 1.02;
          letter-spacing: var(--head-track); text-transform: var(--head-case); color: var(--hero-fg); -webkit-text-stroke: var(--hero-stroke);
          text-shadow: var(--hero-text-shadow); overflow-wrap: break-word; }
.hero-sub { margin: 10px var(--hero-inline) 16px; max-width: 62ch; color: var(--hero-muted); }
.search { display: flex; gap: 8px; max-width: 640px; margin: 0 var(--hero-inline); }
.search input { flex: 1; min-width: 0; padding: 12px 14px; font: 400 16px/1.2 var(--font-body); color: var(--input-fg);
                background: var(--input-bg); border: var(--input-border); border-radius: var(--radius); text-shadow: none; }
.search button, .apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 11px 18px; cursor: pointer; white-space: nowrap;
  font: var(--btn-font); text-transform: var(--btn-case); letter-spacing: var(--btn-track); text-decoration: none; text-shadow: none;
  background: var(--btn-bg); color: var(--btn-fg); border: var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow);
}
.search button:active, .apply:active { transform: translate(1px, 1px); }

/* the filters: a row that scrolls sideways on a phone, wraps on a wide screen */
.chips { display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; text-decoration: none; white-space: nowrap;
        font: var(--chip-font); text-transform: var(--chip-case); letter-spacing: var(--chip-track); text-shadow: none;
        background: var(--chip-bg); color: var(--chip-fg); border: var(--chip-border); border-radius: var(--chip-radius); }
.chip .n { font-size: .86em; opacity: .62; }
.chip.on { background: var(--chip-on-bg); color: var(--chip-on-fg); }
.chips.small .chip { padding: 5px 10px; font-size: 13px; }
.gap { flex: none; width: 1px; margin: 3px 2px; background: var(--line); }
@media (min-width: 760px) { .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0 8px; } }
.meta { margin: 8px 0 14px; font: 400 14px/1.4 var(--font-ui); color: var(--muted); }

/* the jobs */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.job { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--card-pad);
       background: var(--card-bg); color: var(--card-fg); border: var(--card-border); border-radius: var(--radius);
       box-shadow: var(--card-shadow); transform: rotate(var(--tilt)); }
.jobs .job:nth-child(even) { transform: rotate(var(--tilt-alt)); }
.job.here { box-shadow: var(--here-edge), var(--card-shadow); }
.job::before { content: ""; display: var(--pin); position: absolute; top: -8px; left: 50%; width: 17px; height: 17px; margin-left: -8px;
               border-radius: 50%; background: radial-gradient(circle at 35% 32%, #F6D27A, #A06A18 58%, #3A2406); box-shadow: 0 3px 4px rgba(0, 0, 0, .55); }
.job-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag { font: var(--tag-font); text-transform: var(--tag-case); letter-spacing: var(--tag-track); background: var(--tag-bg); color: var(--tag-fg);
       border: var(--tag-border); border-radius: var(--tag-radius); padding: var(--tag-pad); text-shadow: none; }
.flag { font: 700 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; background: var(--flag-bg);
        color: var(--flag-fg); border: var(--flag-border); border-radius: var(--tag-radius); text-shadow: none; }
.job-title { margin: 2px 0 0; font-family: var(--title-font); font-weight: var(--title-weight); font-size: var(--title-size); line-height: 1.18;
             letter-spacing: var(--title-track); text-transform: var(--title-case); overflow-wrap: anywhere; }
.job-title a { text-decoration: none; }
.job-title a:hover { text-decoration: underline; }
.job-who { margin: 0; color: var(--card-muted); font-size: .95em; overflow-wrap: anywhere; }
.job-facts { margin: 2px 0 var(--pay-below); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pay { position: relative; font: var(--pay-font); background: var(--pay-bg); color: var(--pay-fg); border: var(--pay-border);
       border-radius: var(--pay-radius); padding: var(--pay-pad); text-shadow: none; }
.pay::after { content: ""; display: var(--tail); position: absolute; left: 16px; bottom: -7px; width: 11px; height: 11px;
              background: var(--pay-bg); border-right: var(--pay-border); border-bottom: var(--pay-border); transform: rotate(45deg) skew(12deg, 12deg); }
.coin { display: var(--coin); width: .95em; height: .95em; margin-right: 6px; vertical-align: -.12em; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #FFF1A8, #E0A526 55%, #8A5A0B); box-shadow: inset 0 0 0 1px rgba(90, 50, 0, .5); }
.kind { font: var(--kind-font); background: var(--kind-bg); color: var(--kind-fg); border: var(--kind-border); border-radius: var(--tag-radius);
        padding: var(--kind-pad); text-shadow: none; }
.job-sum { margin: 2px 0 0; color: var(--card-muted); font-size: .92em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-foot { margin-top: auto; padding-top: 10px; border-top: var(--foot-rule); display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: 8px 10px; }
.src { font: 400 13px/1.3 var(--font-ui); color: var(--card-muted); }
/* Adzuna's terms: its adverts labelled "Adzuna", the label at least 116 x 23 px and a link to its local site (feeds.Adzuna) */
.by-adzuna { display: inline-block; box-sizing: border-box; min-width: 116px; min-height: 23px; padding: 0 8px; margin-left: 2px; font-weight: 700;
  line-height: 21px; text-align: center; vertical-align: middle; color: inherit; text-decoration: none; border: 1px solid currentColor; border-radius: 4px; }
.apply { padding: 9px 15px; }
.ext { font-size: .9em; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 8px; font: 600 14px var(--font-ui); }
.empty { padding: 26px 20px; text-align: center; background: var(--card-bg); color: var(--card-fg); border: var(--card-border);
         border-radius: var(--radius); box-shadow: var(--card-shadow); }
.empty-h { margin: 0 0 6px; font: var(--head-weight) 24px/1.2 var(--font-head); letter-spacing: var(--head-track); text-transform: var(--head-case); }
.empty p { margin: 6px 0; color: var(--card-muted); }
.empty-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px !important; }

/* the paper's own counters */
.paper { display: grid; gap: 12px; margin: 38px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.tile { display: block; padding: 14px 16px; font-size: 14.5px; line-height: 1.4; text-decoration: none; background: var(--card-bg);
        color: var(--card-muted); border: var(--card-border); border-radius: var(--radius); }
.tile strong { display: block; margin-bottom: 3px; color: var(--card-fg); font: var(--title-weight) 17px/1.2 var(--title-font);
               letter-spacing: var(--title-track); text-transform: var(--title-case); }
.tile:hover strong { text-decoration: underline; }

/* the looks, each set in itself */
.looks { margin: 44px 0 10px; padding-top: 24px; border-top: var(--section-rule); }
.looks-h { margin: 0; font: var(--head-weight) clamp(24px, 4vw, 34px)/1.1 var(--font-head); letter-spacing: var(--head-track); text-transform: var(--head-case); }
.looks-sub { margin: 6px 0 18px; color: var(--muted); }
.looks-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.look { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 14px 16px; text-decoration: none; color: var(--fg);
        background: var(--bg); font: var(--body-weight) var(--body-size)/1.5 var(--font-body); text-shadow: var(--ink);
        border: 2px solid rgba(128, 128, 128, .4); border-radius: 16px; }
.look.in-use { outline: 3px solid var(--accent); outline-offset: 2px; }
.look-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.look-name { font: var(--head-weight) 21px/1.1 var(--font-head); letter-spacing: var(--head-track); text-transform: var(--head-case); }
.look-use { padding: 4px 9px; font: 700 12px/1.2 var(--sans); text-shadow: none; white-space: nowrap; background: var(--chip-bg);
            color: var(--chip-fg); border: var(--chip-border); border-radius: var(--chip-radius); }
.look.in-use .look-use { background: var(--chip-on-bg); color: var(--chip-on-fg); }
.use-on, .look.in-use .use-off { display: none; }
.look.in-use .use-on { display: inline; }
.look .job { margin: 6px 4px 4px; }
.look .job-foot .apply { padding: 7px 12px; }
.look-blurb { font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.look:hover .look-use { text-decoration: underline; }

.foot { max-width: 1180px; margin: 0 auto; padding: 18px 16px 44px; font: 400 14px/1.6 var(--font-ui); color: var(--muted); }
.foot p { margin: 4px 0; }

/* The firms' files and the pay table (firms.html, firm.html, pay.html, pay_trade.html; 2026-10-08). Only the looks'
   properties, so all four hold. Everything read at length sits on a card (.rows, .panel, .payrow): a look whose page
   is dark (the quest board's planks) keeps its ink on parchment. */
.page-h { font-size: clamp(28px, 5.2vw, 46px); paint-order: stroke fill; }   /* a name set small: the comic's outline goes behind the letters */
.kicker a { text-decoration: none; }
.kicker a::before { content: "\2190\00a0"; }
.kicker a:hover { text-decoration: underline; }
.facts { margin: 10px var(--hero-inline) 2px; color: var(--hero-muted); font: var(--body-weight) 16px/1.45 var(--font-body); }
.facts strong { color: var(--hero-fg); font-weight: 700; }
.sec { margin: 26px 0 0; min-width: 0; }
.sec-h { margin: 0 0 10px; font: var(--head-weight) 20px/1.2 var(--font-head); letter-spacing: var(--head-track); text-transform: var(--head-case); }
.sub-h { margin: 14px 0 8px; font: 600 13px/1.3 var(--font-ui); color: var(--muted); text-transform: var(--kicker-case); letter-spacing: var(--kicker-track); }
.cols2 { display: grid; gap: 0 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.rows, .panel, .payrow { background: var(--card-bg); color: var(--card-fg); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: var(--foot-rule); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 12px 14px; text-decoration: none; }
.row-main { font-family: var(--title-font); font-weight: var(--title-weight); font-size: 17px; line-height: 1.25; letter-spacing: var(--title-track); overflow-wrap: anywhere; }
.row-sub { grid-column: 1 / -1; margin: 0; color: var(--card-muted); font: var(--body-weight) 14.5px/1.45 var(--font-body); overflow-wrap: anywhere; }
a.row:hover .row-main { text-decoration: underline; }
.mini { font: 600 13.5px/1.2 var(--font-ui); white-space: nowrap; }
.panel { margin: 0; padding: 14px; }
.panel > * + * { margin-top: 10px; }
.none, .few { margin: 0; color: var(--card-muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; }
.pills .kind b { margin-left: 3px; font-weight: 700; }
.pill-l { align-self: center; margin-right: 2px; color: var(--card-muted); font: 600 12px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
.more { margin: 8px 2px 0; color: var(--muted); font: var(--body-weight) 14.5px/1.4 var(--font-body); }
/* the pay mark (a job against its trade's table, firms.pay_mark) and the warning labels (firms.WARNINGS) on a card */
.paymark { font: var(--kind-font); font-weight: 700; background: var(--kind-bg); color: var(--kind-fg); border: var(--kind-border);
        border-radius: var(--tag-radius); padding: var(--kind-pad); text-shadow: none; white-space: nowrap;
        text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.warns { list-style: none; margin: 4px 0 0; padding: 8px 10px; background: var(--warn-bg); color: var(--warn-fg); border: var(--warn-border);
         border-radius: var(--tag-radius); font: var(--body-weight) 14px/1.4 var(--font-body); text-shadow: none; }
.warns li + li { margin-top: 5px; }
.warns li::before { content: "\26A0\FE0E\00a0"; font-weight: 700; }
.share { margin: 12px var(--hero-inline) 0; cursor: pointer; }
.share[hidden] { display: none; }
.job-who a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }   /* the way to the firm's file */
.paytable { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.payrow { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--card-pad); }
.payrow-h { margin: 0; font-family: var(--title-font); font-weight: var(--title-weight); font-size: var(--title-size); line-height: 1.18;
            letter-spacing: var(--title-track); text-transform: var(--title-case); }
.payrow-h a { text-decoration: none; }
.payrow-h a:hover { text-decoration: underline; }
.payrow-foot { margin: auto 0 0; padding-top: 10px; border-top: var(--foot-rule); color: var(--card-muted); font: var(--body-weight) 14px/1.4 var(--font-body); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.figs dt { color: var(--card-muted); font: 600 12px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
.figs dd { margin: 3px 0 0; font: 700 20px/1.15 var(--font-body); color: var(--pay-fg); overflow-wrap: anywhere; text-shadow: none; }
.figs-n { margin: 0; color: var(--card-muted); font: var(--body-weight) 14.5px/1.4 var(--font-body); }
.panel .figs-n { margin-top: 8px; }
.paytable + .meta { margin-top: 18px; }
.hero-h + .search { margin-top: 14px; }
@media (min-width: 760px) {   /* the firms: one joined list on a phone, a card each on a wide screen */
  .rows.firms { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); background: none; border: 0; box-shadow: none; }
  .rows.firms > li, .rows.firms > li + li { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
  .rows.firms .row { height: 100%; align-content: start; }
}

@media (max-width: 520px) {
  .tabs { width: 100%; }
  .tabs a { flex: 1; }
  .bar-links { margin-left: 0; width: 100%; }
  .search button { padding: 11px 14px; }
}

/* ---- For employers (employers.html): prose on a card, the list of the feeds read for this city ---- */
.prose p, .prose li { font: var(--body-weight) 15.5px/1.55 var(--font-body); overflow-wrap: anywhere; }
.prose h2 { margin: 0; font: var(--head-weight) 19px/1.25 var(--font-head); letter-spacing: var(--head-track); text-transform: var(--head-case); }
.prose ul { margin: 0; padding-left: 20px; }
.prose + .prose { margin-top: var(--gap, 14px); }
.prose a { color: inherit; }
.feeds-read { columns: 2 220px; list-style: none; padding-left: 0 !important; }
.feeds-read li { break-inside: avoid; padding: 2px 0; }