/* ==========================================================================
   Cutting Bench — the blog's visual world
   Seed 00b6d296 · direction contract in .impeccable/surfaces/
   Scoped to body.cb so the incumbent header and footer stay untouched.
   ========================================================================== */

@font-face {
  font-display: swap;
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/anton-v27-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/libre-franklin-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/libre-franklin-v20-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/libre-franklin-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/libre-franklin-v20-latin-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens. Dark is the base: the reading scene is a phone in the evening.
   Light is the second rendition (the bench under daylight), print the third
   (the contact sheet).
   -------------------------------------------------------------------------- */

body.cb {
  /* pre-compensated base: the screen-blended grain lifts this back onto
     the world's INK BLACK. Derived the same way as --cb-orange-grained. */
  --cb-bench:        #000000;
  --cb-bench-raised: #131313;
  --cb-window:       #202124;
  --cb-text:         #e9e6e1;
  --cb-text-2:       #a7a29b;
  --cb-rule:         #34322f;
  --cb-rule-strong:  #4a4744;
  --cb-orange:       #ff5a1f;
  /* pre-compensated base: overlay-blended grain lifts this back to --cb-orange */
  --cb-orange-grained: #ff4919;
  --cb-orange-text:  #ff7a45;
  --cb-on-orange:    #0a0a0a;
  --cb-grease:       #f2f2f2;

  --cb-display: 'Anton', 'Libre Franklin', system-ui, sans-serif;
  --cb-text-face: 'Libre Franklin', system-ui, sans-serif;

  /* One pitch governs the rail, the frames and the vertical rhythm. */
  --cb-pitch: 2.75rem;
  --cb-perf: 0.5rem;
  --cb-measure: 38rem;   /* ~66ch at the body size below */
  --cb-gutter: clamp(1rem, 4vw, 3rem);
}

@media (prefers-color-scheme: light) {
  body.cb {
    --cb-bench:        #e2e3e4;
    --cb-bench-raised: #d5d6d8;
    --cb-window:       #fbfbfc;
    --cb-text:         #14161a;
    --cb-text-2:       #55585e;
    --cb-rule:         #bcbec1;
    --cb-rule-strong:  #8e9195;
    --cb-orange-text:  #c43c0a;
    --cb-on-orange:    #0a0a0a;
    --cb-grease:       #14161a;
  }
}

/* --------------------------------------------------------------------------
   Browser surfaces. The parts we did not draw still carry the design.
   -------------------------------------------------------------------------- */

body.cb ::selection {
  background: var(--cb-orange);
  color: var(--cb-on-orange);
}
body.cb .cb-post {
  caret-color: var(--cb-orange);
  scrollbar-color: var(--cb-rule-strong) transparent;
  scrollbar-width: thin;
}
body.cb .cb-post ::-webkit-scrollbar { height: 0.5rem; width: 0.5rem; }
body.cb .cb-post ::-webkit-scrollbar-track { background: transparent; }
body.cb .cb-post ::-webkit-scrollbar-thumb {
  background: var(--cb-rule-strong);
  border-radius: 0;
}
body.cb .cb-post ::-webkit-scrollbar-thumb:hover { background: var(--cb-orange); }

body.cb .cb-post :focus-visible {
  outline: 0.1875rem solid var(--cb-orange);
  outline-offset: 0.1875rem;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   The bench
   -------------------------------------------------------------------------- */

.cb-post {
  position: relative;
  isolation: isolate;
  background: var(--cb-bench);
  color: var(--cb-text);
  font-family: var(--cb-text-face);
  /* px on purpose: the incumbent theme clamps the root to 14px on a phone,
     and 14px is not a reading size for 2,900 words of German. */
  font-size: clamp(16.5px, 15.5px + 0.28vw, 19px);
  line-height: 1.62;
  padding-bottom: 0;
  /* the bench runs edge to edge inside the incumbent .innerbody */
  margin: 0;
}

/* Coarse film grain, authored rather than gradient-faked. */
.cb-grain {
  position: relative;
  isolation: isolate;
}
.cb-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.55'/></svg>");
  background-size: 140px 140px;
}

.cb-post::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.115;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23b)'/></svg>");
  background-size: 160px 160px;
}
.cb-post > * { position: relative; z-index: 1; }
@media (prefers-color-scheme: light) {
  /* On a light bench, screen would wash it out; overlay keeps the tooth. */
  .cb-post::before { mix-blend-mode: overlay; opacity: 0.5; }
}

.cb-wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: var(--cb-gutter);
}

/* --------------------------------------------------------------------------
   The rail. A perforated strip crossing every sheet at a fixed height.
   Sprocket holes are punched out of the orange with the bench colour.
   -------------------------------------------------------------------------- */

.cb-rail {
  /* The rail's own ::before/::after are the sprocket holes, so its grain
     rides as a blended background layer rather than a fourth pseudo-element. */
  background-color: var(--cb-orange-grained);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23r)'/></svg>");
  background-size: 160px 160px;
  background-blend-mode: overlay;
  position: relative;
  padding-block: var(--cb-perf);
}
.cb-rail::before,
.cb-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--cb-perf);
  background-image: repeating-linear-gradient(
    to right,
    var(--cb-bench) 0 0.6rem,
    transparent 0.6rem 1.5rem
  );
  background-position: 0.45rem 0;
}
.cb-rail::before { top: 0; }
.cb-rail::after  { bottom: 0; }

.cb-rail-inner {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  min-height: 2.25rem;
  color: var(--cb-on-orange);
  font-family: var(--cb-text-face);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.cb-rail-inner { justify-content: space-between; flex-wrap: nowrap; }
.cb-rail-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cb-rail-count { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }

/* The numeral ruler runs the full band, one numbered mark per frame. */
.cb-rail-ruler {
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding-top: 0.35rem;
  color: var(--cb-on-orange);
  font-variant-numeric: tabular-nums;
}
.cb-rail-ruler .cb-tick {
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--cb-on-orange);
  padding: 0 0 0 0.3rem;
  height: 1.1rem;
  display: flex;
  align-items: flex-end;
}
.cb-rail-ruler .cb-tick:last-child { border-right: 1px solid var(--cb-on-orange); }
.cb-rail-ruler b {
  font-family: var(--cb-display);
  font-weight: 400;
  font-size: max(11px, 0.6875rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
@media (max-width: 34rem) {
  .cb-rail-ruler .cb-tick b { display: none; }
  .cb-rail-ruler .cb-tick { height: 0.55rem; }
}

.cb-rail a { color: inherit; }

/* --------------------------------------------------------------------------
   Head block
   -------------------------------------------------------------------------- */

.cb-head {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .cb-head {
    grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.85fr);
    align-items: end;
  }
}

.cb-title {
  font-family: var(--cb-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
  color: var(--cb-text);
}

.cb-byline {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.cb-byline b { color: var(--cb-text); font-weight: 700; }

/* Beleglage — the evidence weight of this article, as a strip of frames.
   Widths derive from the source counts themselves. */
.cb-gauge {
  border-top: 1px solid var(--cb-rule);
  padding-top: 0.85rem;
}
.cb-gauge-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-gauge-label b {
  font-family: var(--cb-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cb-orange-text);
}
.cb-gauge-bar {
  display: flex;
  height: 0.85rem;
  margin-top: 0.6rem;
  gap: 2px;
  background: var(--cb-bench-raised);
}
.cb-gauge-bar span { display: block; min-width: 2px; }
.cb-gauge-bar .k-record { background: var(--cb-orange); }
.cb-gauge-bar .k-law    { background: var(--cb-rule-strong); }
.cb-gauge-bar .k-city   { background: var(--cb-text-2); }
.cb-gauge-bar .k-press  { background: var(--cb-rule); }
.cb-gauge-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.6rem;
  font-size: max(11px, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-gauge-key i {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  vertical-align: 0;
}

/* --------------------------------------------------------------------------
   The strip. One frame per section; scrub snaps to pitch, never between
   frames. Narrow screens drop frame count, not size.
   -------------------------------------------------------------------------- */

.cb-strip {
  position: relative;
  border-block: 1px solid var(--cb-rule);
  background: var(--cb-bench-raised);
}
.cb-strip-scroll {
  --cb-frame-w: 13.5rem;
  --cb-frame-gap: 2px;
  display: flex;
  gap: var(--cb-frame-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--cb-gutter);
  padding: 0.9rem var(--cb-gutter);
  overscroll-behavior-x: contain;
}
.cb-frame {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: var(--cb-frame-w);
  min-height: calc(var(--cb-pitch) * 1.6);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: var(--cb-window);
  border: 1px solid var(--cb-rule);
  color: var(--cb-text);
  text-decoration: none;
}
.cb-frame-no {
  font-family: var(--cb-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cb-orange-text);
  font-variant-numeric: tabular-nums;
}
.cb-frame-title {
  font-size: 0.8125rem;
  line-height: 1.32;
  font-weight: 600;
  color: var(--cb-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb-frame:hover .cb-frame-title,
.cb-frame:focus-visible .cb-frame-title { color: var(--cb-orange-text); }

/* Where you are: a folded tape flag over the perforation. */
.cb-frame[aria-current="true"] {
  border-color: var(--cb-orange);
  background: var(--cb-window);
}
.cb-frame[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 0.75rem;
  width: 1.15rem;
  height: 1.5rem;
  background: var(--cb-orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

/* The strip always ends on a designed half-frame peek, never on an accidental
   slice: N whole frames plus one half fit the band exactly at every width, so
   the cut is the filmstrip continuing rather than a title chopped mid-word.
   Narrow screens drop frame count, not size. */
.cb-strip-scroll {
  --cb-frames-visible: 5;
  /* 100% is already the scroller's content box, so only the gaps come off. */
  --cb-frame-w: calc(
    (100% - (var(--cb-frames-visible) * var(--cb-frame-gap)))
    / (var(--cb-frames-visible) + 0.5)
  );
}
@media (max-width: 75rem) { .cb-strip-scroll { --cb-frames-visible: 4; } }
@media (max-width: 56rem) { .cb-strip-scroll { --cb-frames-visible: 3; } }
@media (max-width: 40rem) { .cb-strip-scroll { --cb-frames-visible: 2; } }
.cb-frame { min-width: 0; }

/* --------------------------------------------------------------------------
   The punch. Sprocket columns run down both edges of anything the world calls
   a frame or a window: it is what makes "punched" geometry rather than a name.
   -------------------------------------------------------------------------- */

.cb-punched { position: relative; }
.cb-punched::before,
.cb-punched::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--cb-bench) 0 0.5rem,
    transparent 0.5rem 1.25rem
  );
  background-position: 0 0.45rem;
}
.cb-punched::before { left: 0; }
.cb-punched::after  { right: 0; }

/* --------------------------------------------------------------------------
   The punched window. Running copy lives only here.
   -------------------------------------------------------------------------- */

.cb-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
@media (min-width: 72rem) {
  .cb-main {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: 0 2.5rem;
  }
  .cb-main .cb-bin {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-top: 0;
    padding-block: clamp(1.75rem, 4vw, 3rem) 1rem;
  }
  .cb-main .cb-pins { grid-template-columns: minmax(0, 1fr); }
}

.cb-window {
  position: relative;
  background: var(--cb-window);
  border: 1px solid var(--cb-rule);
  padding: clamp(1.5rem, 5vw, 3.25rem) clamp(1.6rem, 5vw, 3.5rem);
  margin-block: clamp(1.75rem, 4vw, 3rem);
  max-width: 100%;
}

.cb-body { max-width: var(--cb-measure); }

.cb-body > * { margin-top: 0; margin-bottom: 0; }
.cb-body > * + * { margin-top: 1.35em; }
.cb-body p { color: var(--cb-text); }

/* The lead. The stylesheet enlarges the first paragraph, as it always has. */
.cb-body > p:first-child {
  font-size: 1.25em;
  line-height: 1.44;
  font-weight: 400;
  color: var(--cb-text);
}

.cb-body h2 {
  font-family: var(--cb-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--cb-text);
  margin-top: 2.6em;
  margin-bottom: 0.55em;
  padding-top: 0.85rem;
  border-top: 2px solid var(--cb-orange);
  scroll-margin-top: 6rem;
}
.cb-body h2:first-child { margin-top: 0; }

.cb-body h3 {
  font-size: 1.14em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--cb-text);
  margin-top: 2em;
  margin-bottom: 0.5em;
  scroll-margin-top: 6rem;
}
.cb-body h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  margin-top: 1.9em;
  margin-bottom: 0.4em;
}

.cb-body strong { font-weight: 700; color: var(--cb-text); }
.cb-body em { font-style: italic; }

.cb-body ul,
.cb-body ol { padding-left: 1.35rem; }
.cb-body li + li { margin-top: 0.5em; }
.cb-body li::marker { color: var(--cb-orange-text); }

.cb-body blockquote {
  margin-inline: 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 1px solid var(--cb-orange);
  color: var(--cb-text-2);
  font-size: 0.95em;
}

.cb-body hr {
  border: 0;
  height: var(--cb-perf);
  background-image: repeating-linear-gradient(
    to right,
    var(--cb-rule-strong) 0 0.6rem,
    transparent 0.6rem 1.5rem
  );
  margin-block: 2.5em;
}

/* Links into the record. The mark, not a colour, does the work. */
.cb-body a {
  color: var(--cb-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--cb-orange);
}
.cb-body a:hover,
.cb-body a:focus-visible {
  color: var(--cb-orange-text);
  text-decoration-thickness: 2px;
}
/* A claim that walks into the mirrored record carries a tape band. */
.cb-body a[data-src="record"] {
  background: color-mix(in srgb, var(--cb-orange) 14%, transparent);
  box-shadow: 0 0.1em 0 0 color-mix(in srgb, var(--cb-orange) 14%, transparent),
              0 -0.05em 0 0 color-mix(in srgb, var(--cb-orange) 14%, transparent);
}

/* --------------------------------------------------------------------------
   Evidence: tables, code, figures. Each gets its own window and scrolls
   inside it. The page body never scrolls sideways.
   -------------------------------------------------------------------------- */

.cb-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--cb-rule);
  background: var(--cb-bench-raised);
  margin-block: 1.8em;
  max-width: 100%;
}
.cb-body .cb-tablewrap { margin-top: 1.8em; }

.cb-tablewrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.875rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.cb-tablewrap th {
  text-align: left;
  vertical-align: bottom;
  font-size: max(11px, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-on-orange);
  background: var(--cb-orange);
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
}
.cb-tablewrap td {
  padding: 0.7rem 0.85rem;
  vertical-align: top;
  color: var(--cb-text);
  border-top: 1px solid var(--cb-rule);
}
.cb-tablewrap tbody tr:nth-child(even) td { background: var(--cb-window); }
.cb-tablewrap caption {
  caption-side: top;
  text-align: left;
  padding: 0.7rem 0.85rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-2);
}

/* Below the fold of a phone, the evidence log stacks into frames rather than
   crushing into three columns. */
@media (max-width: 46rem) {
  .cb-tablewrap { border: 0; background: none; overflow-x: visible; }
  .cb-tablewrap table,
  .cb-tablewrap thead,
  .cb-tablewrap tbody,
  .cb-tablewrap tr,
  .cb-tablewrap td { display: block; width: auto; min-width: 0; }
  .cb-tablewrap thead { display: none; }
  .cb-tablewrap tr {
    border: 1px solid var(--cb-rule);
    background: var(--cb-window);
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
  }
  .cb-tablewrap td { border: 0; padding: 0.5rem 0.85rem; }
  .cb-tablewrap td + td { border-top: 1px solid var(--cb-rule); }
  .cb-tablewrap tbody tr:nth-child(even) td { background: transparent; }
  .cb-tablewrap td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cb-orange-text);
  }
  .cb-tablewrap td:empty { display: none; }
}

.cb-body pre {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cb-rule);
  background: var(--cb-bench-raised) !important;
  color: var(--cb-text) !important;
  font-size: 0.8125rem;
  line-height: 1.55;
  border-radius: 0;
}
.cb-body pre code { background: none !important; color: inherit !important; }
.cb-body :not(pre) > code {
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  background: var(--cb-bench-raised);
  border: 1px solid var(--cb-rule);
  color: var(--cb-text);
}

.cb-body img,
.cb-body figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--cb-rule);
}
.cb-body figure { margin-inline: 0; }
.cb-body figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cb-text-2);
}

.cb-body pre.mermaid {
  background: var(--cb-window) !important;
  border-color: var(--cb-rule);
}

/* --------------------------------------------------------------------------
   The bin. What is set aside still hangs on pins below the rail.
   -------------------------------------------------------------------------- */

.cb-bin {
  border-top: 1px solid var(--cb-rule);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  min-width: 0;
}
.cb-bin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-pins {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  border-top: 1px solid var(--cb-orange);
  padding-top: 1.1rem;
}
.cb-pins li { position: relative; padding: 0.55rem 0.75rem 0.55rem 1.35rem; }
.cb-pins li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.95rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--cb-orange);
}
.cb-pins a {
  color: var(--cb-text);
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.cb-pins a:hover,
.cb-pins a:focus-visible { color: var(--cb-orange-text); text-decoration: underline; }
.cb-pins .cb-pin-host {
  display: block;
  font-size: max(11px, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   The way in
   -------------------------------------------------------------------------- */

.cb-wayin {
  border-top: 1px solid var(--cb-rule);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.cb-wayin-title {
  font-family: var(--cb-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.08;
  margin: 0 0 1.5rem;
  color: var(--cb-text);
}
.cb-acts {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.cb-act {
  background: var(--cb-window);
  border: 1px solid var(--cb-rule);
  padding: 1.25rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cb-act-no {
  font-family: var(--cb-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--cb-orange-text);
  font-variant-numeric: tabular-nums;
}
.cb-act h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cb-text);
}
.cb-act p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cb-text-2);
}
.cb-act .cb-when {
  font-size: max(11px, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-act a.cb-go {
  margin-top: auto;
  align-self: flex-start;
  background: var(--cb-orange);
  color: var(--cb-on-orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 0;
}
.cb-act a.cb-go:hover,
.cb-act a.cb-go:focus-visible { background: var(--cb-orange-text); color: var(--cb-on-orange); }

/* --------------------------------------------------------------------------
   The index: the corpus as a strip. Bar length is source count, so an
   investigation and a note look different without a badge.
   -------------------------------------------------------------------------- */

.cb-index { list-style: none; margin: 0; padding: 0; }
.cb-index li { border-top: 1px solid var(--cb-rule); }
.cb-index li:last-child { border-bottom: 1px solid var(--cb-rule); }

.cb-entry {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 1.15rem 0.5rem 1.25rem;
  text-decoration: none;
  color: var(--cb-text);
  align-items: start;
}
.cb-entry:hover,
.cb-entry:focus-visible { background: var(--cb-bench-raised); }
.cb-entry-no {
  font-family: var(--cb-display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--cb-orange-text);
  font-variant-numeric: tabular-nums;
}
.cb-entry-title {
  font-family: var(--cb-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.9rem);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.cb-entry:hover .cb-entry-title { color: var(--cb-orange-text); }
.cb-entry-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-top: 0.55rem;
  font-size: max(11px, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-entry-desc {
  grid-column: 2;
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cb-text-2);
  max-width: var(--cb-measure);
}
/* the evidence bar: width derives from the source count itself */
.cb-entry-bar {
  grid-column: 2;
  margin-top: 0.75rem;
  height: 0.4rem;
  background: var(--cb-bench-raised);
  max-width: 22rem;
}
.cb-entry-bar span {
  display: block;
  height: 100%;
  background: var(--cb-orange);
}
.cb-entry-bar[data-sources="0"] {
  background-image: repeating-linear-gradient(
    to right,
    var(--cb-rule) 0 0.25rem,
    transparent 0.25rem 0.5rem
  );
  background-color: transparent;
}

@media (max-width: 34rem) {
  .cb-entry { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Motion. One authored moment: the strip settling on pitch and the flag
   dropping. Nothing else moves.
   -------------------------------------------------------------------------- */

.cb-strip-scroll { scroll-behavior: smooth; }
.cb-frame[aria-current="true"]::before {
  animation: cb-flag 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: 50% 0;
}
@keyframes cb-flag {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.cb-frame,
.cb-entry,
.cb-act a.cb-go,
.cb-body a { transition: color 120ms ease-out, background-color 120ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .cb-strip-scroll { scroll-behavior: auto; }
  .cb-frame[aria-current="true"]::before { animation: none; }
  body.cb *, body.cb *::before, body.cb *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Print: the contact sheet. Ink on paper, the rail as a printed edge.
   -------------------------------------------------------------------------- */

@media print {
  body.cb .cb-post {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }
  body.cb {
    --cb-window: #fff;
    --cb-bench: #fff;
    --cb-bench-raised: #fff;
    --cb-text: #000;
    --cb-text-2: #333;
    --cb-rule: #999;
    --cb-rule-strong: #666;
    --cb-orange-text: #000;
  }
  .cb-grain::after,
  .cb-strip,
  .cb-rail-ruler { display: none !important; }
  .cb-rail { background: #fff; border-block: 2pt solid #000; }
  .cb-rail::before, .cb-rail::after { display: none; }
  .cb-rail-inner { color: #000; }
  .cb-window { border: 0; padding: 0; margin: 0; max-width: none; }
  .cb-body { max-width: none; }
  .cb-body h2 { border-top: 1pt solid #000; break-after: avoid; }
  .cb-body h3 { break-after: avoid; }
  .cb-tablewrap { overflow: visible; border: 1pt solid #000; break-inside: avoid; }
  .cb-tablewrap th { background: #eee; color: #000; }
  .cb-body pre { break-inside: avoid; }
  /* every claim stays walkable on paper */
  .cb-body a::after {
    content: " [" attr(href) "]";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }
  .cb-body a { text-decoration: underline; color: #000; }
  .cb-act a.cb-go::after { content: " [" attr(href) "]"; }
  .cb-wayin, .cb-bin { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   The seam. The incumbent header, footer and breadcrumbs were drawn for a
   white page; on the bench they need a ground of their own. This is the
   agreed cost of scoping the new world to the blog, kept deliberate rather
   than left to look broken.
   -------------------------------------------------------------------------- */

/* The theme's desktop sub-menu paints with no background; over the bench it
   read as ghost text lying on the sheet. */
body.cb header nav ul ul {
  background: var(--cb-window);
  border: 1px solid var(--cb-rule);
}
body.cb header nav ul ul a { color: var(--cb-text); }
body.cb header nav ul ul a:hover { color: var(--cb-orange-text); }

/* Breadcrumbs sit inside the bench on the index; the incumbent amber fails
   contrast on any ground (2.05:1). */
body.cb .cb-post ul.breadcrumbs { margin: 0 0 1rem; padding: 0; }
body.cb .cb-post ul.breadcrumbs li a {
  color: var(--cb-text-2);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.cb .cb-post ul.breadcrumbs li a:hover { color: var(--cb-orange-text); }
body.cb .cb-post ul.breadcrumbs li::before { color: var(--cb-rule-strong); }

/* --------------------------------------------------------------------------
   The theme styles bare h1/h2/p/a by element, which outranks inheritance.
   Every text surface in this world states its own colour.
   -------------------------------------------------------------------------- */

.cb-index-intro h1 {
  font-family: var(--cb-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--cb-text);
  margin: 0 0 1.25rem;
  padding: 0;
  text-wrap: balance;
}
.cb-index-intro p {
  color: var(--cb-text-2);
  max-width: var(--cb-measure);
  margin: 0 0 0.9em;
  font-size: 1rem;
  line-height: 1.6;
}
.cb-index-intro a { color: var(--cb-text); text-decoration-color: var(--cb-orange); }

.cb-entry .cb-entry-title { color: var(--cb-text); }
.cb-entry:hover .cb-entry-title,
.cb-entry:focus-visible .cb-entry-title { color: var(--cb-orange-text); }
.cb-entry .cb-entry-desc { color: var(--cb-text-2); }
.cb-entry .cb-entry-meta { color: var(--cb-text-2); }
.cb-entry .cb-entry-no { color: var(--cb-orange-text); }

/* The chrome shouts, the titles speak.
   Uppercase belongs to the rail, labels, frame numerals, meta and buttons —
   the tracked-caps voice of the bench. Long German titles carrying umlauts
   are set in Anton at mixed case, where they stay legible and the diaeresis
   has room. This is a rule, not an inherited default. */
.cb-post h1, .cb-post h2, .cb-post h3, .cb-post h4 { text-transform: none; }
.cb-title, .cb-index-intro h1, .cb-entry-title, .cb-wayin-title,
.cb-body h2 { text-transform: none; }

/* Bind the punch to the elements the world punches. */
.cb-window::before, .cb-window::after,
.cb-frame::before,  .cb-frame::after,
.cb-tablewrap::before, .cb-tablewrap::after,
.cb-act::before, .cb-act::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.45rem;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--cb-bench) 0 0.45rem,
    transparent 0.45rem 1.15rem
  );
  background-position: 0 0.4rem;
}
.cb-window::before, .cb-frame::before, .cb-tablewrap::before, .cb-act::before { left: 0; }
.cb-window::after,  .cb-frame::after,  .cb-tablewrap::after,  .cb-act::after  { right: 0; }

/* The tape flag must sit above its frame's punch. */
.cb-frame[aria-current="true"]::before {
  background-image: none;
  background: var(--cb-orange);
  top: -0.9rem;
  bottom: auto;
  left: 1.05rem;
  width: 1.15rem;
  height: 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.cb-tablewrap { position: relative; }
.cb-tablewrap table { margin-inline: 0.45rem; width: calc(100% - 0.9rem); }
.cb-act { position: relative; padding-inline: 1.6rem; }

/* A frame restored from a previous visit is flagged before you scroll. */
.cb-frame.cb-resumed { border-color: var(--cb-orange); }

/* The strip ends on a boundary, not mid-word. */
.cb-strip { position: relative; }
.cb-strip-end { flex: 0 0 var(--cb-gutter); }
.cb-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 5rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--cb-bench-raised) 62%);
}

/* The source rail: one shelf per host, so twenty Ratsinformation links read
   as one shelf rather than twenty repetitions of the same domain. */
.cb-shelf + .cb-shelf { margin-top: 1.1rem; }
.cb-shelf-host {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--cb-orange);
  font-size: max(11px, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cb-bin .cb-pins {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  gap: 0;
}
.cb-bin .cb-pins li { padding: 0.3rem 0 0.3rem 1rem; }
.cb-bin .cb-pins li::before { top: 0.72rem; }
.cb-pin-label {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--cb-text);
  overflow-wrap: anywhere;
}
.cb-pin-ref {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: max(11px, 0.6875rem);
  letter-spacing: 0.06em;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
}
.cb-pins a:hover .cb-pin-label,
.cb-pins a:focus-visible .cb-pin-label { color: var(--cb-orange-text); }

@media print {
  .cb-post::before,
  .cb-window::before, .cb-window::after,
  .cb-frame::before, .cb-frame::after,
  .cb-tablewrap::before, .cb-tablewrap::after,
  .cb-act::before, .cb-act::after,
  .cb-strip::after { display: none !important; }
  .cb-tablewrap table { margin-inline: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Mastodon comments on the bench.

   comments.css is linked by the brick_comments shortcode and was authored
   against the incumbent white sheet: it paints the card with --light and sets
   text in --textMedium, which is dark blue-grey and unreadable on the bench.
   It loads after this file, so these overrides carry body.cb to win on
   specificity rather than on order. Square corners and hairlines, per the
   Flat Bench rule; no punch, because the card already sits inside a punched
   window and nesting the device would read as noise.
   -------------------------------------------------------------------------- */

body.cb #mastodon-comments-list { gap: 2px; }

body.cb .mastodon-comment {
  background: var(--cb-bench-raised);
  border: 1px solid var(--cb-rule);
  border-radius: 0;
  color: var(--cb-text-2);
  padding: 1.15rem 1.35rem;
}
body.cb .mastodon-comment .avatar img {
  border-radius: 0;
  border: 1px solid var(--cb-rule);
}
body.cb .mastodon-comment .author a { color: var(--cb-text); }
body.cb .mastodon-comment .author a span.disabled,
body.cb .mastodon-comment .author a.date { color: var(--cb-text-2); }
body.cb .mastodon-comment .mastodon-comment-content { color: var(--cb-text-2); }
body.cb .mastodon-comment .mastodon-comment-content a {
  color: var(--cb-text);
  text-decoration: underline;
  text-decoration-color: var(--cb-orange);
  text-underline-offset: 0.18em;
}
body.cb .mastodon-comment .mastodon-comment-content a:hover,
body.cb .mastodon-comment .mastodon-comment-content a:focus-visible {
  color: var(--cb-orange-text);
}
body.cb .mastodon-comment .author a:focus-visible {
  outline: 0.1875rem solid var(--cb-orange);
  outline-offset: 0.1875rem;
}