@font-face {
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-Medium.woff2") format("woff2"),
       url("../fonts/LeagueSpartan-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-Bold.woff2") format("woff2"),
       url("../fonts/LeagueSpartan-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Book Serif";
  src: url("../fonts/BookSerifLF-Regular.woff2") format("woff2"),
       url("../fonts/BookSerifLF-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Brand palette. See the brand book: the mark is only ever ink, paper or
   navy, and orange never touches it. Navy carries emphasis on light grounds
   because orange on paper is 3.77:1 and fails AA for anything but large text.

   Orange is therefore the non-text accent and nothing else: list markers and
   structural rules, never a word, never a border a word sits inside. 3.77:1
   clears the 3:1 that WCAG asks of graphical objects, with nothing to read
   inside it. Every place it appears is listed here, so the rule is checkable:
   the `.proof` top rule under the home hero, and the `.tick-list` markers. */
:root {
  color-scheme: light;

  --ink: #14181D;
  --navy: #032643;
  --orange: #E05808;
  --paper: #ffffff;
  --mist: #F2F4F6;
  --slate: #5C6672;

  /* Interaction states, derived: not brand colours in their own right. */
  --orange-light: #FF9A75;   /* small text on navy, 7.44:1 */
  --navy-line: #1C4463;      /* hairlines inside the navy band */
  --paper-dim: #C3CFD9;      /* secondary text on navy */

  --muted: var(--slate);
  --line: #D9DDE1;
  --accent: var(--navy);     /* emphasis on light grounds */
  --sans: "League Spartan", Arial, sans-serif;
  --serif: "Book Serif", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.55;
}

img,
picture {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 112px;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 38px;
}

.site-header nav {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
}

/* Padding rather than a min-height: the links are flex items, so `padding-block`
   is what actually grows the hit box, to about 47px, past the 24px WCAG 2.2
   target minimum. The header has room for it at both breakpoints. */
.site-header nav a {
  padding-block: 12px;
  font-size: 0.92rem;
  text-decoration: none;
}

.site-header nav a:hover,
.text-link:hover,
.book-card a:hover {
  color: var(--accent);
}

/* The edition switch: two-letter codes, the others linked and the current one
   underlined in orange. Orange text would be 3.8:1 on white, under the 4.5:1
   small text needs, so the orange is the rule and the letters stay ink. Links
   and the current code share one size; the main nav's link size must not reach
   them. It is a nav, so it also opts out of the width the mobile rules give the
   main nav below. */
.site-header nav.lang-switch {
  gap: 12px;
  letter-spacing: 0.04em;
}

.site-header .lang-switch a,
.site-header .lang-switch span {
  padding-block: 12px;
  font-size: 0.8rem;
}

.lang-switch span {
  text-decoration: underline 2px var(--orange);
  text-underline-offset: 5px;
}

/* Text that is read but never drawn: the "opens in a new tab" note, and the
   book title that tells five identical "Read about this book" links apart. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  align-items: center;
  min-height: 630px;
  gap: 48px;
  padding-block: 54px 92px;
}

.eyebrow,
.book-tier {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Every display heading used to carry a hardcoded `<br>`. That fixed the break
   at one viewport and orphaned a word at every other one: the home hero read
   "A good puzzle / has / one way / through." on a phone. The measure below
   decides how many lines a heading takes and `balance` evens them out. */
h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
}

h1 {
  max-width: 700px;
  margin-bottom: 28px;
  font-size: clamp(3.25rem, 6.7vw, 6.15rem);
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.4rem, 4vw, 4rem);
}

h3 {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.hero-intro {
  max-width: 510px;
  margin-bottom: 32px;
  color: var(--slate);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 12px 20px;
  border: 2px solid var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.button-primary {
  background: var(--ink);
  color: white;
}

.button-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.button-secondary:hover {
  background: var(--mist);
}

/* A shop button for a product not on sale yet: the button's shape, no link. */
.button-soon {
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
}

/* The home hero and the book-page hero paint the same photograph treatment in
   different slots, so they share one rule. */
.hero-art img,
.book-hero-art img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 3px solid var(--orange);
  border-bottom: 1px solid var(--ink);
}

.proof article {
  padding: 32px 32px 30px 0;
}

.proof article + article {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}

.proof h2 {
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.proof p {
  max-width: 290px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.how {
  padding-block: 130px;
}

.how-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
}

.how p,
.how li {
  font-size: 1.08rem;
}

.how ol {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

/* Numbered steps. Scoped to `ol` so a .tick-list inside a how section keeps
   its own bullet, and the counter is positioned rather than laid out in a grid
   column: a grid puts every child element and every text run in its own cell,
   so an item holding a bold lead-in plus a sentence came apart. The 50px inset
   is the old 38px column plus its 12px gap, so the numbers sit where they did. */
.how ol li {
  position: relative;
  padding: 17px 0;
  padding-left: 50px;
  border-top: 1px solid var(--line);
  counter-increment: steps;
}

.how ol li::before {
  position: absolute;
  top: 17px;
  left: 0;
  color: var(--accent);
  content: "0" counter(steps);
  font-weight: 700;
}

/* Section header whose body is one lead sentence introducing the figures
   below, rather than the section's content. `.how-layout` would float that
   sentence in a half-empty right-hand column, so it stacks under the heading
   at a readable measure instead. */
.section-stack {
  margin-bottom: 34px;
}

.section-stack h2 {
  margin-bottom: 16px;
}

.section-stack p {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: 1.08rem;
}

.books {
  padding-bottom: 130px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.text-link {
  font-size: 0.9rem;
  font-weight: 700;
}

/* These grids hold anywhere from two to five cards: the home page and the two
   hubs show all five books, a book page shows the other four, and a guide shows
   the other guides. `auto-fit` gave a different wrong answer at every width,
   including five cramped across at 1440, where titles broke to three lines and
   the two-line "Complete collection" label pushed that card off the shared
   baseline. So the template counts its own list and states the answer here via
   `data-cols` (see the `gridCols` filter). Three is the default because both
   three and five divide best by it; five becomes 3+2. */
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.book-grid[data-cols="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.book-grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--line);
}

.book-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
  background: var(--mist);
}

.book-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-height: 230px;
  padding: 24px;
}

.book-card p:not(.book-tier) {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 6px each side takes the 22px line box past the 24px WCAG 2.2 target
   minimum, and is pulled back out of the margin below so the text sits where
   it did. The one visible consequence is around 900px, where the two links on
   a book card wrap and the second line lands 12px lower than it used to. */
.book-card a {
  margin-top: auto;
  margin-bottom: -6px;
  padding-block: 6px;
  font-size: 0.87rem;
  font-weight: 700;
}

/* The card is the link, not the twelve words at the bottom of it. This box
   covers the card, so a click anywhere lands on the book page, which is what
   people try first. Pure CSS: the content pages ship no JavaScript, and
   `default-src 'none'` would block a click handler anyway. The cost is that
   the tier, title and blurb can no longer be selected, which on a card whose
   whole job is to be clicked is a fair trade. */
.card-target::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* The line is the card's own hover state. `.book-card a:hover` further up
   still colours the link text, and the two together are what separates the
   destinations: anywhere on the card lights the card and the primary link,
   while the Etsy link lights the card and itself. */
.book-card:hover {
  border-color: var(--accent);
}

/* The stretched link's own ring would circle the words rather than the surface
   the click lands on, so the card wears it. Both rules repeat `:has()` rather
   than joining `a:focus-visible` above, which would take the whole site's
   focus ring down with them in a browser that does not support it. Kept apart,
   they simply drop and the link keeps its own outline. */
.book-card:has(.card-target:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.book-card:has(.card-target:focus-visible) .card-target:focus-visible {
  outline: none;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: auto;
}

.card-links a {
  margin-top: 0;
  margin-bottom: 0;
}

/* Etsy is the second destination and has to stay reachable, so it is lifted
   clear of the overlay. Order alone would do it today, since both are painted
   in tree order, but then moving the buy link above the other in the markup
   would silently make it unclickable. The z-index says it does not matter. */
.card-links a:not(.card-target) {
  position: relative;
  z-index: 1;
}

/* The one place the site goes dark, so it uses the brand ground. */
.samples {
  padding-block: 92px;
  background: var(--navy);
  color: var(--paper);
}

.samples .eyebrow {
  color: var(--orange-light);
}

.sample-intro {
  max-width: 34rem;
  margin-bottom: 50px;
}

.sample-intro h2 {
  margin-bottom: 12px;
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.sample-intro > p:last-child {
  margin-bottom: 0;
  color: var(--paper-dim);
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--navy-line);
  border-left: 1px solid var(--navy-line);
}

.sample-grid a {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-right: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
  color: white;
  text-decoration: none;
}

.sample-grid a:hover {
  background: var(--ink);
}

.sample-label {
  font-family: var(--serif);
  font-size: 1.6rem;
}

.sample-grid a > span:last-child {
  font-size: 0.86rem;
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 1fr;
  gap: 40px;
  padding-block: 46px 28px;
}

.site-footer .brand {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 1rem;
}

.site-footer .brand img {
  width: auto;
  height: 30px;
}

.site-footer p {
  margin-bottom: 0;
}

.footer-nav h2 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li + li {
  margin-top: 8px;
}

.footer-nav a {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-legal {
  padding-bottom: 34px;
  margin-block: 0;
}

@media (max-width: 900px) {
  .hero,
  .how-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 26px;
  }

  .how-layout {
    gap: 20px;
  }

  /* The stated column count only holds while the container is wide enough for
     it: at 660px a four-up grid gave 138px cards with three-line titles. Here
     the browser picks the count against a floor instead. The attribute selector
     is required, not stylistic, because `[data-cols="4"]` out-specifies a bare
     `.book-grid` no matter which rule comes last. */
  .book-grid[data-cols] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }

  /* An even count still divides cleanly at this width, so it states two columns
     rather than letting auto-fit pick three and strand the fourth card. */
  .book-grid[data-cols="2"],
  .book-grid[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 32px, 1180px);
  }

  .site-header {
    align-items: flex-start;
    min-height: 92px;
    padding-top: 20px;
  }

  .site-header {
    flex-wrap: wrap;
  }

  .site-header nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .site-header nav a {
    font-size: 0.78rem;
  }

  .site-header nav.lang-switch {
    order: 1;
    width: auto;
  }

  .site-header nav:not(.lang-switch) {
    order: 2;
  }

  .hero {
    gap: 26px;
    padding-bottom: 70px;
  }

  h1 {
    font-size: clamp(2.5rem, 12.5vw, 4.4rem);
  }

  .proof,
  .sample-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .proof article,
  .proof article + article {
    padding: 26px 0;
    border-left: 0;
  }

  .proof article + article {
    border-top: 1px solid var(--line);
  }

  .how,
  .books {
    padding-bottom: 88px;
  }

  .how {
    padding-top: 88px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .book-grid[data-cols] {
    grid-template-columns: minmax(0, 1fr);
  }

  .samples {
    padding-block: 72px;
  }

  .footer-top {
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Subpages: breadcrumbs, book pages, article pages ------------------- */

.crumbs {
  padding-top: 26px;
  font-size: 0.78rem;
  font-weight: 700;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.crumbs a {
  color: var(--ink);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs [aria-current] {
  color: var(--muted);
}

.page-hero {
  padding-block: 30px 76px;
}

.page-hero h1 {
  margin-bottom: 24px;
}

.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  align-items: center;
  gap: 48px;
  padding-block: 30px 84px;
}

.book-hero h1 {
  font-size: clamp(2.9rem, 5.2vw, 4.8rem);
}

.book-note {
  margin-top: 22px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.book-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr);
  gap: 56px;
  padding-bottom: 96px;
}

.book-prose p,
.book-for p,
.how p {
  max-width: 62ch;
}

.book-prose p {
  margin-bottom: 20px;
}

.book-facts {
  align-self: start;
  padding: 28px;
  background: var(--mist);
}

.book-facts h2 {
  margin-bottom: 18px;
  font-size: 1.5rem;
}

.book-facts dl {
  margin: 0;
}

.book-facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.book-facts dd {
  margin: 4px 0 16px;
  font-size: 0.92rem;
}

.book-facts dd:last-child {
  margin-bottom: 0;
}

.book-for,
.book-device {
  padding-bottom: 96px;
}

.tick-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
  max-width: 62ch;
}

.tick-list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 1px;
  width: 9px;
  height: 9px;
  background: var(--orange);
}

@media (max-width: 900px) {
  .book-hero,
  .book-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .page-hero,
  .book-hero {
    padding-bottom: 56px;
  }

  .book-body,
  .book-for,
  .book-device {
    padding-bottom: 72px;
  }

  .book-hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* --- Grid-size and format panels, ported from the listing graphics -------- */

.grids,
.formats {
  padding-bottom: 96px;
}

.grid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 30px;
  margin-top: 34px;
}

.gsq {
  margin: 0;
}

.gsq svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.gsq figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.grid-band {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: flex-end;
  padding-block: 22px;
}

.grid-band + .grid-band {
  border-top: 1px solid var(--line);
}

.grid-band p:not(.book-tier) {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.grid-band .grid-row {
  justify-content: flex-end;
  margin-bottom: 0;
}

.grid-bands {
  margin-bottom: 28px;
}

.format-band {
  padding-block: 22px;
}

.format-band + .format-band {
  border-top: 1px solid var(--line);
}

.format-band p:not(.book-tier) {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.format-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.format-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 9px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.format-list li > span:first-child {
  font-weight: 700;
}

.format-list li > span:nth-child(2),
.format-list code {
  color: var(--muted);
  font-size: 0.82rem;
}

.format-list code {
  font-family: var(--sans);
  letter-spacing: 0.02em;
  text-align: right;
}

@media (max-width: 640px) {
  .grids,
  .formats {
    padding-bottom: 72px;
  }

  .grid-band {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .grid-band .grid-row {
    justify-content: flex-start;
  }

  .format-list li {
    grid-template-columns: 1fr auto;
  }

  .format-list code {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  padding-bottom: 96px;
}

.faq-list {
  max-width: 68ch;
}

.faq-item {
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item h2,
.faq-item h3 {
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.faq-item p {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 640px) {
  .faq {
    padding-bottom: 72px;
  }
}

/* --- Solving figures ----------------------------------------------------- */

.fig {
  margin: 0 0 26px;
}

.fig svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.fig figcaption {
  margin-top: 10px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.fig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-block: 34px 40px;
}

.fig-board {
  flex: 0 1 auto;
  max-width: 260px;
}

.fig-board figcaption {
  max-width: 260px;
}