/* _dev/pixel_concepts.py */
/* Concepts 01, 02 and 07. Pixel language throughout: 2px ink, a SOLID offset
   shadow and never a blur; Bricolage for the headings, IBM Plex Mono for the
   small caps labels, and Fraunces reserved for figures. */
.tsmeta{border:2px solid #16211B;border-radius:12px;box-shadow:3px 3px 0 #16211B;
  background:#FBF9F3;padding:13px 15px 12px;margin:18px 0 0;max-width:none}
/* The foot block is inserted as a bare sibling of the up-link and the footer,
   so it has no container to inherit a gutter from. Match the up-link's. */
.tsfoot{max-width:1120px;margin:30px auto 0;padding:0 26px;box-sizing:border-box}
@media (min-width:1500px){.tsfoot{max-width:1320px}}
@media (min-width:1900px){.tsfoot{max-width:1560px}}
@media (max-width:560px){.tsfoot{padding:0 18px}}
.tsmeta .tsrow{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}
.tsk{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.4px;
  letter-spacing:.13em;text-transform:uppercase;color:#6C6555;margin-right:-12px}
.tsv{font-size:13px;font-weight:600;color:#16211B}
.tsall{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:#2C6350;margin-left:auto}
/* The vintage is a SEPARATE clock and has to look like one, so it sits under a
   rule rather than inline with the check date. */
.tsvint{margin:11px 0 0;padding:10px 0 0;border-top:2px dashed #D9D0BA}
.tsvint b{display:block;font-family:Fraunces,Georgia,serif;font-size:14.5px;
  font-weight:600;color:#16211B;margin:2px 0 3px}
.tsvint i{display:block;font-style:normal;font-size:12.2px;line-height:1.5;
  color:#5A5647;max-width:62ch}
/* 02 - the badge, inside the meta card so it can never inherit a dark band */
/* On its own it carries its own background: this text is a fixed colour and
   the band behind it is not. Testing POSITION (:first-child) was the previous
   attempt and it failed the moment a standfirst appeared above it. */
.tsdepth{margin:14px 0 0;background:#FBF9F3;border:2px solid #16211B;
  border-radius:12px;box-shadow:3px 3px 0 #16211B;padding:12px 15px}
/* Inside the meta card it is a section of that card, not a card of its own. */
.tsmeta .tsdepth{margin:11px 0 0;padding:10px 0 0;background:transparent;
  border:none;border-radius:0;box-shadow:none;border-top:2px dashed #D9D0BA}
.tsbadge{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.4px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border:2px solid #16211B;border-radius:999px;padding:6px 13px 5px;
  box-shadow:2px 2px 0 #16211B;text-decoration:none}
.tsbadge.full{background:#2C6350;color:#F4F0E6}
.tsbadge.part{background:#F6C560;color:#16211B}
.tsbadge.thin{background:#F0EADA;color:#3A3529}
.tsbadge.gap{background:#fff;color:#B5483F;margin-left:7px}
.tsbadge:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #16211B}
.tswhat{margin:8px 0 0;font-size:12.4px;line-height:1.55;color:#5A5647;
  max-width:64ch}
/* The rail numbers were #9A8F76 on paper: 3.04:1, under the 4.5:1 floor for
   text this small. Measured, not eyeballed. */
/* 07 - in short */
.tsshort{border:2px solid #16211B;border-radius:12px;box-shadow:4px 4px 0 #F6C560;
  background:#fff;padding:15px 17px 14px;margin:20px 0 0}
.tsshort>p.tsk{margin:0 0 8px}
.tsshort q{display:block;font-family:'Bricolage Grotesque','Archivo',Inter,
  system-ui,sans-serif;font-weight:800;letter-spacing:-.028em;font-size:18px;
  line-height:1.2;color:#16211B;quotes:none;margin:0 0 7px}
.tsshort p.tsa{margin:0;font-size:14px;line-height:1.6;color:#3A3529;max-width:64ch}
.tsshort .tsfig{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:21px;color:#2C6350;margin:9px 0 0;letter-spacing:-.01em}
/* 01 - the dated update list */
.tsupd{margin:14px 0 0;border:2px solid #16211B;border-radius:12px;
  background:#F4F0E6;box-shadow:2px 2px 0 #16211B;overflow:hidden}
.tsupd>summary{cursor:pointer;list-style:none;padding:10px 15px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.4px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#16211B}
.tsupd>summary::-webkit-details-marker{display:none}
.tsupd>summary::after{content:"+";float:right;font-weight:700}
.tsupd[open]>summary::after{content:"\2212"}
.tsupd dl{margin:0;padding:0 15px 13px}
.tsupd dl>div{padding:10px 0;border-top:2px dashed #D9D0BA}
.tsupd dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.2px;
  letter-spacing:.08em;text-transform:uppercase;color:#6C6555;margin:0 0 3px}
.tsupd dd{margin:0;font-size:13.2px;line-height:1.55;color:#3A3529;max-width:66ch}
.tsupd dd a{color:#2C6350}
/* 07 - the numbered rail */
.artnav a,.scnav a,.drnav a,.pxnav a{position:relative}
.tsn{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.6px;
  font-weight:700;color:#6C6555;margin-right:8px;font-style:normal;
  display:inline-block;min-width:1.4em}
a.on .tsn,a[aria-current] .tsn{color:#2C6350}
@media (max-width:620px){
  .tsmeta .tsrow{gap:4px 14px}
  .tsshort q{font-size:16.5px}
  .tsbadge{font-size:9.6px}
}