/* ——— Workshop layout (frontmatter `layout: "workshop"`, WorkshopPost.tsx) ———
   The toy-workshop post as a drawing board: a green cutting mat with a 24 px
   grid and rulers, sheets of squared paper on it, prints taped down. One colour
   key runs through every diagram and is printed in the hero's title block:
     blue ink  = drawn by the agents
     red pen   = a check (the fresh agent's counts, the jury)
     yellow    = my call
   Every rule is scoped under .ws, so no other page changes. */

/* Fonts of this layout only, self-hosted from public/fonts (IBM Plex Sans,
   IBM Plex Mono and Caveat, SIL OFL 1.1; how the files were cut is in
   public/fonts/README.txt). This stylesheet is linked by WorkshopPost only, so
   no other page sees these faces. Quotes use the site's Newsreader italic,
   which the root layout loads on every page anyway.

   Fallbacks: local faces scaled with size-adjust until a line of this post's
   text is as wide as in the web font (measured per style in Chromium), so the
   swap keeps every line break and nothing below moves. The condensed Plex of
   the headings gets Arial Narrow Bold, or Arial Bold scaled down where Arial
   Narrow is missing; Plex Mono gets Courier New, which has the same advance
   width (0.6 em). */
@font-face{font-family:"WS Plex Sans";font-style:normal;font-weight:100 700;font-stretch:75% 100%;font-display:swap;src:url(/fonts/plex-sans-czech.woff2)format("woff2");unicode-range:U+10C-10F,U+11A-11B,U+147-148,U+158-159,U+160-161,U+164-165,U+16E-16F,U+17D-17E}
@font-face{font-family:"WS Plex Sans";font-style:normal;font-weight:100 700;font-stretch:75% 100%;font-display:swap;src:url(/fonts/plex-sans-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WS Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"WS Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WS Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"WS Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WS Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/caveat-600.woff2)format("woff2");unicode-range:U+20-7E,U+A0,U+B0,U+B7,U+D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026}
@font-face{font-family:"WS Plex Sans Fallback";font-weight:100 549;src:local("Arial"),local("ArialMT");ascent-override:101.49%;descent-override:27.23%;line-gap-override:0%;size-adjust:101.0%}
@font-face{font-family:"WS Plex Sans Fallback";font-weight:550 900;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:106.00%;descent-override:28.44%;line-gap-override:0%;size-adjust:96.7%}
@font-face{font-family:"WS Plex Cond75 Fallback";font-weight:100 900;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");ascent-override:94.38%;descent-override:25.32%;line-gap-override:0%;size-adjust:108.6%}
@font-face{font-family:"WS Plex Cond75 Fallback Arial";font-weight:100 900;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:115.69%;descent-override:31.04%;line-gap-override:0%;size-adjust:88.6%}
@font-face{font-family:"WS Plex Cond80 Fallback";font-weight:100 900;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");ascent-override:93.69%;descent-override:25.14%;line-gap-override:0%;size-adjust:109.4%}
@font-face{font-family:"WS Plex Cond80 Fallback Arial";font-weight:100 900;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:114.14%;descent-override:30.62%;line-gap-override:0%;size-adjust:89.8%}
@font-face{font-family:"WS Plex Cond85 Fallback";font-weight:100 900;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");ascent-override:91.93%;descent-override:24.66%;line-gap-override:0%;size-adjust:111.5%}
@font-face{font-family:"WS Plex Cond85 Fallback Arial";font-weight:100 900;src:local("Arial Bold"),local("Arial-BoldMT");ascent-override:110.81%;descent-override:29.73%;line-gap-override:0%;size-adjust:92.5%}
@font-face{font-family:"WS Plex Mono Fallback";font-weight:100 549;src:local("Courier New"),local("CourierNewPSMT");ascent-override:102.50%;descent-override:27.50%;line-gap-override:0%;size-adjust:100.0%}
@font-face{font-family:"WS Plex Mono Fallback";font-weight:550 900;src:local("Courier New Bold"),local("CourierNewPS-BoldMT");ascent-override:102.50%;descent-override:27.50%;line-gap-override:0%;size-adjust:100.0%}
@font-face{font-family:"WS Plex Mono Fallback Arial";font-weight:100 900;src:local("Arial"),local("ArialMT");ascent-override:83.33%;descent-override:22.36%;line-gap-override:0%;size-adjust:123.0%}
@font-face{font-family:"WS Caveat Fallback";font-weight:100 900;src:local("Arial"),local("ArialMT");ascent-override:125.65%;descent-override:39.27%;line-gap-override:0%;size-adjust:76.4%}

body:has(.ws) {
  background: #173f33;
}

.ws {
  --ws-mat: #1c4a3c;
  --ws-mat-line: rgba(228, 240, 214, 0.07);
  --ws-mat-line-2: rgba(228, 240, 214, 0.14);
  --ws-mat-ink: #f1f0e4;
  --ws-mat-dim: #b8cbb9;
  --ws-ruler: #e8dc98;
  --ws-paper: #f7f7f2;
  --ws-paper-2: #eef1ea;
  --ws-paper-line: rgba(43, 98, 168, 0.075);
  --ws-white: #ffffff;
  --ws-ink: #17212b;
  --ws-ink-2: #4a5866;
  --ws-ink-3: #5b6975;
  --ws-rule: rgba(23, 33, 43, 0.18);
  --ws-blue: #2b62a8;
  --ws-blue-2: #1f5796;
  --ws-blue-soft: rgba(43, 98, 168, 0.14);
  --ws-red: #c42b1f;
  --ws-red-soft: rgba(196, 43, 31, 0.07);
  --ws-yellow: #ffe25a;
  --ws-wood: #9a7446;
  --ws-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 18px 36px -16px rgba(0, 0, 0, 0.55);
  --ws-sans: "WS Plex Sans", "WS Plex Sans Fallback", system-ui, sans-serif;
  --ws-cond75: "WS Plex Sans", "WS Plex Cond75 Fallback", "WS Plex Cond75 Fallback Arial", sans-serif;
  --ws-cond80: "WS Plex Sans", "WS Plex Cond80 Fallback", "WS Plex Cond80 Fallback Arial", sans-serif;
  --ws-cond85: "WS Plex Sans", "WS Plex Cond85 Fallback", "WS Plex Cond85 Fallback Arial", sans-serif;
  --ws-mono: "WS Plex Mono", "WS Plex Mono Fallback", "WS Plex Mono Fallback Arial", ui-monospace, monospace;
  --ws-quote: var(--font-newsreader), Georgia, serif;
  --ws-hand: "WS Caveat", "WS Caveat Fallback", cursive;
  --ws-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  display: block;
  min-height: 100vh;
  /* clip, not hidden: no scroll container, so sticky still works, and
     nothing wider than the viewport can ever scroll the page sideways */
  overflow-x: clip;
  padding-bottom: 4rem;
  color: var(--ws-ink);
  background-color: var(--ws-mat);
  background-image:
    linear-gradient(var(--ws-mat-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--ws-mat-line-2) 1px, transparent 1px),
    linear-gradient(var(--ws-mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ws-mat-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
  font-family: var(--ws-sans);
  font-size: 1rem;
  line-height: 1.6;
}

/* side rulers of the mat, desktop only */
@media (min-width: 1200px) {
  .ws::before,
  .ws::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(to bottom, rgba(232, 220, 152, 0.55) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, rgba(232, 220, 152, 0.4) 0 1px, transparent 1px 24px);
    background-size: 18px 100%, 9px 100%;
    background-repeat: no-repeat;
  }

  .ws::before {
    left: 0;
    background-position: left top, left top;
  }

  .ws::after {
    right: 0;
    background-position: right top, right top;
  }
}

.ws :focus-visible {
  outline: 3px solid var(--ws-blue-2);
  outline-offset: 3px;
  border-radius: 3px;
}

/* on the mat, the blue ring would vanish */
.ws .ws-nav :focus-visible,
.ws .ws-hero :focus-visible,
.ws .ws-rules :focus-visible,
.ws .ws-demos :focus-visible,
.ws .ws-footer :focus-visible,
.ws .ws-cap--mat :focus-visible {
  outline-color: var(--ws-yellow);
}

.ws ::selection {
  background: rgba(255, 226, 90, 0.6);
  color: var(--ws-ink);
}

.ws .ws-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— ruler along the top edge ——— */

.ws .ws-ruler {
  position: relative;
  left: 50%;
  display: flex;
  width: calc(31 * 120px);
  height: 28px;
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(232, 220, 152, 0.55);
  background-image:
    repeating-linear-gradient(90deg, rgba(232, 220, 152, 0.7) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(232, 220, 152, 0.45) 0 1px, transparent 1px 24px);
  background-size: 100% 14px, 100% 7px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

.ws .ws-ruler span {
  flex: 0 0 120px;
  padding: 3px 0 0 4px;
  font-family: var(--ws-mono);
  font-size: 10px;
  line-height: 1;
  color: rgba(232, 220, 152, 0.75);
}

/* ——— nav and footer (the blog's shell, in mat colours) ——— */

.ws .ws-nav {
  width: min(72rem, 100% - 2rem);
  margin: 1.4rem auto 0;
}

.ws .ws-nav a {
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-mat-dim);
  text-decoration: none;
  transition: color 150ms var(--ws-ease);
}

.ws .ws-nav a:hover {
  color: var(--ws-ruler);
}

.ws .ws-footer {
  width: min(46rem, 100% - 2rem);
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(232, 220, 152, 0.35);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ws-mat-dim);
}

.ws .ws-footer a {
  color: var(--ws-mat-ink);
  text-decoration: underline;
  text-decoration-color: rgba(232, 220, 152, 0.5);
  text-underline-offset: 4px;
}

.ws .ws-footer a:hover {
  text-decoration-color: var(--ws-ruler);
}

/* ——— shared bits ——— */

.ws .ws-fig-title {
  font-family: var(--ws-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-ink);
}

.ws .ws-fig-title--mat {
  margin-bottom: 1.1rem;
  color: var(--ws-mat-ink);
}

.ws .ws-cap {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ws-ink-2);
}

.ws .ws-cap--mat {
  color: var(--ws-mat-dim);
}

.ws .ws-cap--mat a {
  color: var(--ws-ruler);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws .ws-key {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 2px;
  vertical-align: middle;
}

.ws .ws-key--blue {
  background: var(--ws-blue);
}

.ws .ws-key--red {
  background: var(--ws-red);
}

.ws .ws-key--yellow {
  background: var(--ws-yellow);
}

.ws .ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  font-family: var(--ws-mono);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ws-ink);
  background: var(--ws-white);
  border: 1.5px solid var(--ws-ink);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 150ms var(--ws-ease),
    color 150ms var(--ws-ease);
}

.ws .ws-btn:hover {
  background: var(--ws-paper-2);
}

.ws .ws-btn--solid {
  color: var(--ws-white);
  background: var(--ws-ink);
}

.ws .ws-btn--solid:hover {
  background: var(--ws-blue-2);
}

/* a sheet of squared paper */
.ws .ws-sheet {
  background-color: var(--ws-paper);
  background-image:
    linear-gradient(var(--ws-paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ws-paper-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  box-shadow: var(--ws-shadow);
}

.ws .ws-wide {
  width: min(72rem, 100% - 1.5rem);
  margin: 3.5rem auto;
}

/* ——— hero ——— */

.ws .ws-hero {
  display: grid;
  grid-template-areas: "head" "lede" "photo" "block";
  gap: 2rem;
  width: min(72rem, 100% - 2rem);
  margin: 2.5rem auto 0;
}

@media (min-width: 960px) {
  .ws .ws-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head photo" "lede photo" "block block";
    column-gap: 3.5rem;
    row-gap: 2.25rem;
    margin-top: 3.5rem;
  }
}

.ws .ws-hero-head {
  grid-area: head;
}

/* the cutting mat's 30/45/60° guides, behind the photo on wide screens */
@media (min-width: 960px) {
  .ws .ws-hero {
    position: relative;
  }

  .ws .ws-hero::before {
    content: "";
    position: absolute;
    right: -3rem;
    top: -4.5rem;
    width: 640px;
    height: 640px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23e8dc98' stroke-opacity='.32' stroke-width='1'%3E%3Cpath d='M0 480 L480 0 M0 480 L480 203 M0 480 L277 0'/%3E%3Cpath d='M0 240 A240 240 0 0 1 240 480' stroke-dasharray='3 5'/%3E%3Cpath d='M0 120 A360 360 0 0 1 360 480'/%3E%3C/g%3E%3Cg fill='%23e8dc98' fill-opacity='.55' font-family='monospace' font-size='12'%3E%3Ctext x='300' y='176'%3E45%C2%B0%3C/text%3E%3Ctext x='330' y='292'%3E30%C2%B0%3C/text%3E%3Ctext x='196' y='96'%3E60%C2%B0%3C/text%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }

  .ws .ws-hero > * {
    position: relative;
  }
}

.ws .ws-hero-meta {
  font-family: var(--ws-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ws-mat-dim);
}

.ws .ws-hero-title {
  margin-top: 0.9rem;
  font-size: clamp(2.45rem, 1.3rem + 4.4vw, 4.5rem);
  font-weight: 700;
  font-family: var(--ws-cond75);
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--ws-mat-ink);
  text-wrap: balance;
}

.ws .ws-hero-num {
  color: var(--ws-ruler);
}

.ws .ws-hero-desc {
  max-width: 36rem;
  margin-top: 1.2rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ws-mat-dim);
}

.ws .ws-hero-lede {
  grid-area: lede;
  position: relative;
  max-width: 40rem;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--ws-paper);
  box-shadow: var(--ws-shadow);
  transform: rotate(-0.4deg);
}

/* a strip of tape holding the note down */
.ws .ws-hero-lede::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 22px;
  margin-left: -48px;
  background: rgba(236, 228, 196, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  transform: rotate(-2deg);
}

.ws .ws-hero-lede p {
  font-size: 1.15rem;
  line-height: 1.62;
  color: var(--ws-ink);
}

@media (min-width: 640px) {
  .ws .ws-hero-lede {
    padding: 1.9rem 2rem 1.7rem;
  }

  .ws .ws-hero-lede p {
    font-size: 1.25rem;
  }
}

.ws .ws-hero-lede a,
.ws .ws-sheet a {
  color: var(--ws-blue-2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(31, 87, 150, 0.45);
  text-underline-offset: 3px;
}

.ws .ws-hero-lede a:hover,
.ws .ws-sheet a:hover {
  text-decoration-color: var(--ws-blue-2);
}

.ws .ws-hero-photo {
  grid-area: photo;
  align-self: center;
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}

.ws .ws-tblock {
  grid-area: block;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1.5px solid rgba(241, 240, 228, 0.55);
}

/* three fields: on a phone the third takes the whole second row */
.ws .ws-tblock > div:nth-child(3) {
  grid-column: 1 / -1;
}

@media (min-width: 760px) {
  .ws .ws-tblock {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ws .ws-tblock > div:nth-child(3) {
    grid-column: auto;
  }
}

.ws .ws-tblock > div {
  padding: 0.7rem 0.85rem 0.8rem;
  border-right: 1.5px solid rgba(241, 240, 228, 0.55);
  border-bottom: 1.5px solid rgba(241, 240, 228, 0.55);
  margin: 0 -1.5px -1.5px 0;
}

.ws .ws-tblock dt {
  font-family: var(--ws-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-mat-dim);
}

.ws .ws-tblock dd {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--ws-cond85);
  font-stretch: 85%;
  font-variation-settings: "wdth" 85;
  line-height: 1.25;
  color: var(--ws-mat-ink);
}

.ws .ws-tblock .ws-key {
  box-shadow: 0 0 0 1.5px rgba(241, 240, 228, 0.75);
}

/* ——— a taped print of a toy tile ——— */

.ws a.ws-photo {
  display: block;
  color: var(--ws-ink);
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 300ms var(--ws-ease);
}

.ws a.ws-photo:hover {
  transform: rotate(0deg) translateY(-3px);
}

.ws .ws-photo-print {
  position: relative;
  display: block;
  padding: 9px 9px 0;
  background: var(--ws-white);
  box-shadow: var(--ws-shadow);
}

.ws .ws-photo-print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ws-paper-2);
}

.ws .ws-photo-print::before,
.ws .ws-photo-print::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 64px;
  height: 20px;
  background: rgba(236, 228, 196, 0.82);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.ws .ws-photo-print::before {
  left: 12%;
  transform: rotate(-5deg);
}

.ws .ws-photo-print::after {
  right: 12%;
  transform: rotate(4deg);
}

.ws .ws-photo-cap {
  display: block;
  padding: 0.7rem 0.9rem 0.85rem;
  background: var(--ws-white);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.55);
}

.ws .ws-photo-name {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--ws-cond80);
  font-stretch: 80%;
  font-variation-settings: "wdth" 80;
  line-height: 1.15;
}

.ws .ws-photo-hook {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ws-ink-2);
}

/* the age and the link, no separator: in a narrow card the link wraps whole
   onto its own line, with no dot left hanging */
.ws .ws-photo-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.9rem;
  margin-top: 0.45rem;
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  color: var(--ws-ink-2);
}

.ws .ws-photo-go {
  color: var(--ws-blue-2);
  font-weight: 600;
}

.ws .ws-photo-meta > span {
  white-space: nowrap;
}

.ws a.ws-photo:hover .ws-photo-name {
  color: var(--ws-blue-2);
}

.ws .ws-photo--small .ws-photo-print {
  padding: 6px 6px 0;
}

.ws .ws-photo--small .ws-photo-print::before,
.ws .ws-photo--small .ws-photo-print::after {
  width: 40px;
  height: 14px;
  top: -7px;
}

.ws .ws-photo--small .ws-photo-cap {
  padding: 0.5rem 0.6rem 0.65rem;
}

.ws .ws-photo--small .ws-photo-name {
  font-size: 1rem;
}

.ws .ws-photo--small .ws-photo-hook {
  font-size: 0.8rem;
}

.ws .ws-photo--hero .ws-photo-name {
  font-size: 1.4rem;
}

.ws .ws-photo--float {
  max-width: 22rem;
  margin: 2rem auto;
}

@media (min-width: 720px) {
  .ws .ws-photo--float {
    float: right;
    width: 44%;
    margin: 0.4rem 0 1.25rem 2rem;
  }
}

/* ——— sheets: the post's prose ——— */

.ws .ws-sheet {
  position: relative;
  width: min(46rem, 100% - 1.5rem);
  margin: 3.5rem auto;
  padding: 1.6rem 1.25rem 2rem;
  font-size: 1.0625rem;
  line-height: 1.68;
}

@media (min-width: 640px) {
  .ws .ws-sheet {
    padding: 3rem 3.25rem 3.1rem;
    font-size: 1.125rem;
    line-height: 1.7;
  }
}

/* clearfix for a floated print (ToyPhoto's `float`) */
.ws .ws-sheet::after {
  content: "";
  display: table;
  clear: both;
}

.ws .ws-sheet > * + * {
  margin-top: 1.2em;
}

.ws .ws-sheet-when {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-blue-2);
  border: 1.5px solid var(--ws-blue-2);
  border-radius: 3px;
  transform: rotate(-1.5deg);
}

@media (min-width: 640px) {
  .ws .ws-sheet-when {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
  }

  .ws .ws-sheet-when + * {
    margin-top: 0;
  }
}

.ws .ws-sheet h2 {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.55rem);
  font-weight: 700;
  font-family: var(--ws-cond75);
  font-stretch: 76%;
  font-variation-settings: "wdth" 76;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ws-ink);
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .ws .ws-sheet h2 {
    padding-right: 6.5rem;
  }
}

.ws .ws-sheet h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 0.8rem;
  background: var(--ws-ink);
}

.ws .ws-sheet h2 + * {
  margin-top: 1.1rem;
}

.ws .ws-sheet p,
.ws .ws-sheet li {
  color: var(--ws-ink);
}

.ws .ws-sheet ul {
  padding: 0;
  list-style: none;
}

.ws .ws-sheet ul > li {
  position: relative;
  padding-left: 1.45rem;
}

.ws .ws-sheet ul > li + li {
  margin-top: 0.7em;
}

.ws .ws-sheet ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--ws-blue);
}

.ws .ws-sheet strong {
  font-weight: 700;
}

.ws .ws-sheet em {
  font-style: italic;
}

.ws [id] {
  scroll-margin-top: 1.5rem;
}

/* a figure that sits inside a sheet */
.ws .ws-inset {
  margin: 2rem 0;
  padding: 1.15rem 1.1rem 1.2rem;
  background: var(--ws-white);
  border: 1.5px solid var(--ws-rule);
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .ws .ws-inset {
    padding: 1.4rem 1.5rem 1.4rem;
  }
}

/* ——— Runes and Vault Guardian next to the kids' rules ——— */

.ws .ws-rules-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 860px) {
  .ws .ws-rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
  }
}

.ws .ws-rules-item {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.ws .ws-rules-item .ws-photo {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
}

.ws .ws-wiring {
  position: relative;
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--ws-paper);
  box-shadow: var(--ws-shadow);
  font-size: 0.97rem;
  line-height: 1.5;
}

.ws .ws-wiring-title {
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-blue-2);
}

.ws .ws-wiring-steps {
  margin-top: 0.7rem;
  counter-reset: step;
}

.ws .ws-wiring-steps li {
  position: relative;
  padding: 0 0 0.55rem 2.1rem;
  counter-increment: step;
}

.ws .ws-wiring-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ws-white);
  background: var(--ws-blue);
  border-radius: 50%;
}

.ws .ws-wiring-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.7rem - 1px);
  top: 1.5rem;
  bottom: 0.1rem;
  width: 2px;
  background: var(--ws-blue-soft);
}

.ws .ws-mark {
  background: linear-gradient(transparent 58%, rgba(43, 98, 168, 0.2) 58%);
}

.ws .ws-wiring-svg {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0.7rem auto 0;
}

.ws .ws-wiring-foot {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--ws-rule);
  font-weight: 600;
}

/* ——— the fresh agent's tally ——— */

.ws .ws-tally-rows {
  margin-top: 0.4rem;
}

.ws .ws-sheet .ws-tally-rows > li {
  margin-top: 1rem;
  padding-left: 0;
}

.ws .ws-sheet .ws-tally-rows > li::before {
  display: none;
}

.ws .ws-tally-label {
  font-size: 0.98rem;
  line-height: 1.35;
}

.ws .ws-tally-n {
  font-size: 1.7rem;
  font-weight: 700;
  font-family: var(--ws-cond75);
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  line-height: 1;
  color: var(--ws-red);
}

.ws .ws-tally-of {
  font-family: var(--ws-mono);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ws-ink-2);
}

.ws .ws-tally-cells {
  display: grid;
  grid-template-columns: repeat(22, minmax(0, 1fr));
  gap: 3px;
  margin-top: 0.45rem;
}

@media (min-width: 520px) {
  .ws .ws-tally-cells {
    grid-template-columns: repeat(43, minmax(0, 1fr));
    gap: 2px;
  }
}

.ws .ws-tally-cells span {
  aspect-ratio: 1 / 1.35;
  border: 1px solid rgba(23, 33, 43, 0.4);
  background: var(--ws-white);
}

.ws .ws-tally-cells span.on {
  background: var(--ws-red);
  border-color: var(--ws-red);
}

/* ——— drawing styles: wires, labels and the red pen (the vault diagram) ——— */

.ws .ws-wire {
  fill: none;
  stroke: var(--ws-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.ws .ws-wire--strong {
  stroke: var(--ws-blue);
  stroke-width: 3.5;
}

.ws .ws-wire--none {
  stroke: var(--ws-ink-3);
  stroke-dasharray: 4 5;
}

.ws .ws-svg-small {
  font-family: var(--ws-mono);
  font-size: 12.5px;
  fill: var(--ws-ink-2);
  paint-order: stroke;
  stroke: var(--ws-paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.ws .ws-svg-label {
  font-family: var(--ws-sans);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ws-ink);
}

.ws .ws-hand-svg {
  font-family: var(--ws-hand);
  font-size: 18px;
  font-weight: 600;
  fill: var(--ws-red);
  paint-order: stroke;
  stroke: var(--ws-paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.ws .ws-red-ink {
  fill: none;
  stroke: var(--ws-red);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws .ws-ink-blue rect {
  fill: var(--ws-white);
  stroke: var(--ws-blue);
  stroke-width: 1.8;
}

/* ——— two toy pages as silent loops, each in a browser frame ——— */

.ws .ws-demos-row {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ws .ws-demos-item {
  margin: 0;
}

/* side by side at one height: each column's share is its video's aspect
   ratio (--ar, set per item by PageDemos) */
@media (min-width: 860px) {
  .ws .ws-demos-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .ws .ws-demos-item {
    flex: var(--ar) 1 0;
    min-width: 0;
  }
}

.ws .ws-demos-frame {
  overflow: hidden;
  background: var(--ws-white);
  border: 1.5px solid var(--ws-ink);
  border-radius: 8px;
  box-shadow: var(--ws-shadow);
}

.ws .ws-demos-bar {
  padding: 0.4rem 0.65rem;
  overflow: hidden;
  font-family: var(--ws-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ws-ink-2);
  background: var(--ws-paper-2);
  border-bottom: 1.5px solid var(--ws-ink);
}

/* the window's three buttons */
.ws .ws-demos-bar::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 30px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--ws-ink-3);
  box-shadow: 11px 0 0 var(--ws-ink-3), 22px 0 0 var(--ws-ink-3);
}

.ws .ws-demos-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  background: var(--ws-ink);
}

.ws .ws-demos-open {
  display: block;
  width: fit-content;
  margin-top: 0.3rem;
  font-weight: 600;
}

/* ——— the replication file ——— */

.ws .ws-doc {
  width: min(64rem, 100% - 1.5rem);
}

.ws .ws-doc-sheet {
  background: var(--ws-white);
  border: 1.5px solid var(--ws-ink);
  box-shadow: var(--ws-shadow);
}

.ws .ws-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  padding: 0.8rem 1rem;
  background: var(--ws-paper-2);
  border-bottom: 1.5px solid var(--ws-ink);
}

.ws .ws-doc-name {
  font-family: var(--ws-mono);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ws .ws-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ws .ws-doc-fail {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--ws-red);
}

.ws .ws-doc-body {
  display: grid;
}

@media (min-width: 900px) {
  .ws .ws-doc-body {
    grid-template-columns: 19rem minmax(0, 1fr);
    /* the TOC column keeps its paper colour below a sticky, shorter TOC */
    background: linear-gradient(90deg, var(--ws-paper) 0 19rem, var(--ws-white) 19rem);
  }

  /* while the whole file is open, the milestones stay in view beside it */
  .ws .ws-doc-toc {
    position: sticky;
    top: 0;
    align-self: start;
  }
}

.ws .ws-doc-toc {
  padding: 1.1rem 1rem 1.2rem;
  background-color: var(--ws-paper);
  border-bottom: 1.5px solid var(--ws-rule);
}

@media (min-width: 900px) {
  .ws .ws-doc-toc {
    padding: 1.4rem 1.3rem;
    border-right: 1.5px solid var(--ws-rule);
    border-bottom: 0;
  }
}

.ws .ws-doc-toc-title {
  font-family: var(--ws-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-ink-2);
}

.ws .ws-doc-toc ol {
  margin-top: 0.6rem;
}

.ws .ws-doc-toc li {
  padding: 0.32rem 0;
  font-size: 0.95rem;
  line-height: 1.35;
  border-bottom: 1px dotted var(--ws-rule);
}

/* each milestone jumps to its heading in the file (opening it if needed) */
.ws .ws-doc-toc a {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

.ws .ws-doc-toc a:hover .ws-doc-ms {
  color: var(--ws-blue-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws .ws-doc-num {
  font-weight: 700;
  font-family: var(--ws-cond75);
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  font-size: 1.15rem;
  color: var(--ws-blue-2);
}

.ws .ws-doc-last .ws-doc-ms {
  justify-self: start;
  font-weight: 700;
  background: linear-gradient(transparent 12%, var(--ws-yellow) 12% 88%, transparent 88%);
  padding: 0 0.2rem;
  margin-left: -0.2rem;
}

.ws .ws-doc-text {
  position: relative;
  min-width: 0;
  padding: 1.1rem 1rem 1.1rem;
}

@media (min-width: 640px) {
  .ws .ws-doc-text {
    padding: 1.4rem 1.5rem 1.2rem;
  }
}

.ws .ws-doc-pre {
  position: relative;
}

.ws .ws-doc-pre pre {
  margin: 0;
  font-family: var(--ws-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ws-ink);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ws .ws-doc-anchor {
  font-weight: 600;
}

.ws .ws-doc-anchor:target {
  background: rgba(255, 226, 90, 0.7);
}

.ws .ws-doc-pre--collapsed {
  max-height: 21rem;
  overflow: hidden;
}

.ws .ws-doc-pre--collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ws-white));
  pointer-events: none;
}

.ws .ws-doc-toggle {
  position: relative;
  bottom: 0.9rem;
  display: flex;
  margin: 0.8rem auto 0.3rem;
  box-shadow: 0 0 0 0.5rem var(--ws-white);
}

/* sticky only while the whole file is open, so "Collapse" is always at hand */
.ws .ws-doc-toggle[aria-expanded="true"] {
  position: sticky;
}

.ws .ws-doc-toggle[aria-expanded="false"] {
  bottom: auto;
}

/* ——— reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  .ws a.ws-photo,
  .ws a.ws-photo:hover,
  .ws .ws-btn {
    transition: none;
  }

  .ws a.ws-photo:hover {
    transform: rotate(var(--tilt, 0deg));
  }
}

/* ——— phones: the same page, a little tighter ——— */

@media (max-width: 639px) {
  .ws .ws-rules-item .ws-photo {
    max-width: 19rem;
  }

  .ws .ws-rules-grid {
    gap: 2.5rem;
  }

  /* drawings shrink below 1:1 on a phone; keep their small labels ≥ 12 px */
  .ws .ws-svg-small {
    font-size: 14px;
  }
}