/* The Atlas: the theme pages (docs/design/atlas.md). Shared plate
   furniture; each plate's own drawing is in bb_atlas_<plate>.css. The root
   carries the page's colours from the theme's signature colours
   (ThemeAtlas::Palette), so nothing below names a colour of its own. */

.bb-atlas {
  --bb-t-paper: var(--bb-paper);
  --bb-t-ink: var(--bb-ink);
  --bb-t-ink-2: var(--bb-ink-2);
  --bb-t-accent: var(--bb-signal);
  --bb-t-accent-ink: var(--bb-signal-ink);
  --bb-t-rule: color-mix(in oklab, var(--bb-t-ink) 22%, var(--bb-t-paper));
  --bb-t-turn: 0;

  background: var(--bb-t-paper);
  color: var(--bb-t-ink);
}

.bb-t-plate svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Layout. The stage holds the plate and the reading column; the sections
   below run across the page in the theme's paper. */

.bb-t-wrap,
.bb-t-stage {
  width: min(var(--bb-max), calc(100% - (2 * var(--bb-margin))));
  margin-inline: auto;
}

.bb-t-stage {
  padding-block: clamp(16px, 3vh, 40px) clamp(48px, 8vh, 96px);
}

/* A page whose plate failed to draw keeps one column at every width. */
.bb-t-stage.bb-t-stage--bare {
  display: block;
}

.bb-t-stage__plate {
  margin-bottom: clamp(24px, 5vh, 56px);
}

.bb-t-stage__text {
  display: grid;
  gap: clamp(56px, 10vh, 120px);
  max-width: 680px;
}

.bb-t-h2 {
  margin: 0 0 var(--bb-space-6);
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: var(--bb-fs-h2);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.05;
}

.bb-t-h3 {
  margin: var(--bb-space-8) 0 var(--bb-space-4);
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bb-atlas a {
  color: inherit;
}

/* The cartouche. */

.bb-t-folio .bb-folio__list,
.bb-t-folio a,
.bb-t-folio span {
  color: var(--bb-t-ink-2);
}

.bb-t-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: var(--bb-space-6) 0 var(--bb-space-4);
  color: var(--bb-t-accent-ink);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* After the part, not before the next, so a wrapped line ends on the
   separator instead of opening with it. */
.bb-t-kicker span:not(:last-child)::after {
  margin-inline: .7em;
  content: "·";
}

.bb-t-title {
  margin: 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: var(--bb-fs-display);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: .98;
  text-wrap: balance;
}

.bb-t-standfirst {
  max-width: 54ch;
  margin: var(--bb-space-6) 0 0;
  color: var(--bb-t-ink-2);
  font-size: var(--bb-fs-lead);
  line-height: 1.5;
}

.bb-t-tagline {
  margin: var(--bb-space-4) 0 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 1.25rem;
  font-style: italic;
}

.bb-t-note {
  margin: var(--bb-space-4) 0 0;
  color: var(--bb-t-ink-2);
  font-size: var(--bb-fs-small);
}

.bb-t-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-5) var(--bb-space-8);
  margin: var(--bb-space-8) 0 0;
  padding-top: var(--bb-space-5);
  border-top: 1px solid var(--bb-t-rule);
}

.bb-t-figures dt {
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bb-t-figures dd {
  margin: 4px 0 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-mono);
  font-size: 1.5rem;
  font-weight: 500;
}

/* The legend. */

.bb-t-key {
  display: grid;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 0;
  counter-reset: bb-t-key;
  list-style: none;
}

.bb-t-key li {
  position: relative;
  padding-left: 48px;
  color: var(--bb-t-ink);
  counter-increment: bb-t-key;
  line-height: 1.55;
}

.bb-t-key li::before {
  position: absolute;
  top: -.15em;
  left: 0;
  color: transparent;
  content: counter(bb-t-key);
  font-family: var(--bb-font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  -webkit-text-stroke: 1.2px var(--bb-t-accent);
}

.bb-t-swatches__intro {
  margin: var(--bb-space-8) 0 var(--bb-space-4);
  color: var(--bb-t-ink-2);
}

.bb-t-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-4) var(--bb-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-swatch {
  display: grid;
  grid-template-columns: 40px auto;
  column-gap: 12px;
  align-items: center;
}

.bb-t-swatch__chip {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bb-t-rule);
  border-radius: 50%;
  background: var(--chip);
}

.bb-t-swatch__chip--trans {
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7), transparent 42%), var(--chip);
  opacity: .82;
}

.bb-t-swatch__name {
  color: var(--bb-t-ink);
  font-weight: 600;
}

.bb-t-swatch__lift {
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .08em;
}

/* The voyage. */

.bb-t-stops {
  display: grid;
  gap: clamp(48px, 9vh, 112px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-stop {
  scroll-margin-top: 96px;
}

.bb-t-stop__still {
  margin-bottom: var(--bb-space-5);
}

.bb-t-still {
  display: block;
  width: 100%;
  height: auto;
}

.bb-t-still--gear {
  max-width: 240px;
}

.bb-t-stop__number {
  margin: 0;
  color: var(--bb-t-accent-ink);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bb-t-stop__name {
  margin: 6px 0 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: var(--bb-fs-h3);
  font-weight: 600;
  line-height: 1.1;
}

.bb-t-stop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 8px 0 0;
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
}

.bb-t-stop__meta a {
  color: var(--bb-t-accent-ink);
}

.bb-t-stop__sets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-4);
  margin: var(--bb-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.bb-t-stop__set {
  display: grid;
  gap: 8px;
  color: var(--bb-t-ink);
  font-size: var(--bb-fs-small);
  line-height: 1.3;
  text-decoration: none;
}

/* height: auto, or the img's height attribute beats aspect-ratio. */
.bb-t-stop__set img,
.bb-t-landmark__mat img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  mix-blend-mode: normal;
}

.bb-t-stop__set img {
  box-sizing: border-box;
  padding: 6%;
  border: 1px solid var(--bb-t-rule);
  background: #fff;
}

.bb-t-stop__set:hover span,
.bb-t-stop__set:focus-visible span {
  text-decoration: underline;
}

/* Landmarks. */

.bb-t-landmarks,
.bb-t-notes {
  padding-block: clamp(56px, 10vh, 120px);
  border-top: 1px solid var(--bb-t-rule);
}

.bb-t-story {
  max-width: 68ch;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.bb-t-story p {
  margin: 0 0 1em;
}

.bb-t-landmarks__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-space-8);
}

/* min-width: 0, or the phone shelf widens the grid track it sits in. */
.bb-t-landmarks__main {
  min-width: 0;
}

/* As many columns as prints, from the template: --bb-t-prints on a wide
   screen, --bb-t-prints-narrow below it (two by two rather than three and
   one). */
.bb-t-prints {
  display: grid;
  grid-template-columns: repeat(var(--bb-t-prints, 4), minmax(0, 1fr));
  gap: var(--bb-space-8) var(--bb-space-6);
  margin: var(--bb-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.bb-t-landmarks__margin .bb-t-h3 {
  margin-top: 0;
}

.bb-t-landmarks__margin .bb-t-milestones li {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

@media (min-width: 1100px) {
  .bb-t-landmarks__layout--margin {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 22rem);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }

  .bb-t-landmarks__layout--margin .bb-t-landmarks__margin {
    position: sticky;
    top: 100px;
    padding-left: clamp(24px, 2.5vw, 40px);
    border-left: 1px solid var(--bb-t-rule);
  }
}

@media (max-width: 1099px) {
  .bb-t-prints {
    grid-template-columns: repeat(var(--bb-t-prints-narrow, 2), minmax(0, 1fr));
  }
}

/* On a phone the prints, and the partners' accessories, are a shelf that
   scrolls sideways. The partners' grid is declared further down, hence the
   second class. */
@media (max-width: 699px) {
  .bb-t-prints,
  .bb-t-partners .bb-t-partners__prints {
    display: flex;
    gap: var(--bb-space-5);
    margin-inline: calc(-1 * var(--bb-margin));
    padding: 0 var(--bb-margin) var(--bb-space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--bb-margin);
    scroll-snap-type: x mandatory;
  }

  .bb-t-prints > .bb-t-landmark,
  .bb-t-partners__prints > .bb-t-partner {
    flex: 0 0 min(72%, 280px);
    scroll-snap-align: start;
  }
}

.bb-t-landmark__link {
  display: grid;
  gap: 8px;
  text-decoration: none;
}

.bb-t-landmark__mat {
  display: block;
  padding: 8%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 22px 30px -22px rgba(0, 0, 0, .55);
}

.bb-t-landmark__badge {
  margin-top: 8px;
  color: var(--bb-t-accent-ink);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bb-t-landmark__name {
  margin: 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
}

.bb-t-landmark__facts {
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
}

.bb-t-landmark__reason {
  margin: 8px 0 0;
  color: var(--bb-t-ink-2);
}

.bb-t-milestones {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-milestones li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--bb-t-rule);
  color: var(--bb-t-ink);
}

.bb-t-milestones__year {
  color: var(--bb-t-accent-ink);
  font-family: var(--bb-font-mono);
  font-weight: 500;
}

/* Now and the catalog, in the theme's paper. They reuse the Archive's
   cards, filter drawer, sort and pager, whose colours all run through its
   --bb-a-* tokens; those are pointed at the theme's own. Prints and store
   buttons keep a light mat on every paper: set photographs are shot on
   white, and the store's wordmark is drawn for a light ground. */

.bb-atlas .bb-t-now,
.bb-atlas .bb-t-catalog {
  --bb-a-ink: var(--bb-t-ink);
  --bb-a-ink-2: var(--bb-t-ink-2);
  --bb-a-muted: var(--bb-t-ink-2);
  --bb-a-rubric: var(--bb-t-accent-ink);
  --bb-a-rule: var(--bb-t-rule);
  padding-block: clamp(56px, 10vh, 120px);
  border-top: 1px solid var(--bb-t-rule);
  background: none;
  color: var(--bb-t-ink);
}

.bb-atlas--night :is(.bb-t-now, .bb-t-catalog) {
  color-scheme: dark;
}

.bb-atlas .bb-a-specimen__print {
  background: #FFFDF8;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bb-t-ink) 14%, transparent);
}

.bb-atlas .bb-a-specimen__store {
  color: #1B2129;
  background: #FFFDF8;
  border-color: color-mix(in oklab, #1B2129 70%, var(--bb-t-paper));
}

.bb-atlas .filters-sidebar {
  background: color-mix(in oklab, var(--bb-t-ink) 4%, var(--bb-t-paper));
}

.bb-atlas .filter-header:hover {
  background: color-mix(in oklab, var(--bb-t-ink) 7%, transparent);
}

.bb-atlas .modern-select {
  background-color: var(--bb-t-paper);
}

.bb-atlas .bb-t-catalog.bb-a-list .page-link.active {
  color: var(--bb-t-paper);
}

/* The partners' accessories, fetched per visitor: prints like the sets'. */

.bb-t-partners {
  padding-block: clamp(56px, 10vh, 120px);
  border-top: 1px solid var(--bb-t-rule);
}

/* Two classes: the global .section-subtitle, kept as a test hook, centres it. */
.bb-atlas .bb-t-partners__lede {
  max-width: 68ch;
  margin: 0 0 var(--bb-space-7);
  color: var(--bb-t-ink-2);
  font-size: var(--bb-fs-body);
  text-align: left;
}

.bb-t-partners__prints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--bb-space-8) var(--bb-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-partner {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  border-top: 1px solid var(--bb-t-rule);
}

.bb-t-partner__mat {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 6%;
  background: #FFFDF8;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bb-t-ink) 14%, transparent);
}

.bb-t-partner__mat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-t-partner__name {
  margin: 12px 0 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
}

.bb-t-partner__for {
  margin: 6px 0 0;
  color: var(--bb-t-ink-2);
  font-size: var(--bb-fs-small);
}

.bb-t-partner__for a {
  color: var(--bb-t-accent-ink);
}

.bb-t-partner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 6px 0 14px;
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
}

/* Two classes, or .bb-atlas a gives the button its paper-coloured ink. */
.bb-atlas .bb-t-partner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 0 10px;
  border: 1.5px solid color-mix(in oklab, #1B2129 70%, var(--bb-t-paper));
  border-radius: var(--bb-radius-sm);
  background: #FFFDF8;
  color: #1B2129;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.bb-atlas .bb-t-partner__cta:hover {
  box-shadow: 0 3px 0 0 var(--bb-t-accent);
}

.bb-t-partner__note,
.bb-t-partners__disclosure {
  margin: 10px 0 0;
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.bb-t-partners__disclosure {
  max-width: 80ch;
  margin-top: var(--bb-space-7);
}

.bb-t-shelf {
  margin-bottom: var(--bb-space-6);
}

.bb-t-leaving__date,
.bb-t-shelf__note {
  margin: 8px 0 0;
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
}

.bb-t-shelf__note {
  margin: 0 0 var(--bb-space-4);
}

/* Each leaving card spans two of the shelf's rows, card then note, so a
   row's cards and notes take its tallest, and every button lines up. */
.bb-t-shelf--noted .bb-t-leaving {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 8px;
}

.bb-t-shelf--noted .bb-t-leaving__date {
  margin: 0;
}

.bb-t-catalog .section-subtitle {
  margin: 0 0 var(--bb-space-6);
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
  text-align: left;
}

/* Field notes. */

.bb-t-notes__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--bb-space-8);
  margin-top: var(--bb-space-8);
}

/* The grid's gap spaces the groups; a heading's own margin would double
   it wherever the groups stack. */
.bb-t-notes__group .bb-t-h3 {
  margin-top: 0;
}

.bb-t-notes__group--index,
.bb-t-notes__group--wide { grid-column: 1 / -1; }
.bb-t-notes__group--index .bb-t-ruled { columns: 4 200px; column-gap: var(--bb-space-7); }
.bb-t-notes__group--wide .bb-t-ruled { columns: 2 320px; column-gap: var(--bb-space-8); }
.bb-t-notes__group--wide .bb-t-ruled li { break-inside: avoid; }

.bb-t-notes__group--index .bb-t-ruled li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  break-inside: avoid;
}

.bb-t-ruled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-ruled li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--bb-t-rule);
  color: var(--bb-t-ink);
}

.bb-t-ruled__meta {
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .06em;
}

/* The last leaf: this plate's colophon beside the next plate's opening
   page. The page is painted in the next theme's own roles, set on the link
   itself, so the rule here is worked out again from its own ink and paper;
   --bb-t-here keeps this plate's paper for the corner that lifts. */

.bb-t-next {
  --bb-t-here: var(--bb-t-paper);
  padding-block: clamp(48px, 9vh, 112px);
  border-top: 1px solid var(--bb-t-rule);
}

.bb-t-next__spread {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.bb-t-next__colophon {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-bottom: 6px;
}

.bb-t-next__end,
.bb-t-next__kicker,
.bb-t-next__meta,
.bb-t-next__cue {
  margin: 0;
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bb-t-next__here {
  max-width: 22ch;
  margin: 0;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.15;
}

/* A printer's colour bar: the inks the plate was printed in. */
.bb-t-next__inks {
  display: flex;
  width: min(100%, 300px);
  height: 14px;
  border: 1px solid var(--bb-t-rule);
}

.bb-t-next__inks > span { flex: 1; background: var(--chip); }

.bb-t-next__contents {
  color: var(--bb-t-ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bb-t-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bb-t-next__contents:hover { text-decoration-color: currentColor; }

.bb-t-next__link {
  --bb-t-rule: color-mix(in oklab, var(--bb-t-ink) 22%, var(--bb-t-paper));
  position: relative;
  display: grid;
  grid-template-columns: clamp(132px, 17vw, 240px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 3vw, 44px);
  color: var(--bb-t-ink);
  background: var(--bb-t-paper);
  border: 1px solid var(--bb-t-rule);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .55);
  text-decoration: none;
}

/* The corner that lifts: this plate's paper behind it, the next page's
   back on the fold. */
.bb-t-next__link::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 46px;
  height: 46px;
  background: linear-gradient(225deg, var(--bb-t-here) 50%, color-mix(in oklab, var(--bb-t-paper) 84%, #000) 50%);
  box-shadow: -3px 3px 7px rgba(0, 0, 0, .16);
  transition: width var(--bb-dur-2) var(--bb-ease-out), height var(--bb-dur-2) var(--bb-ease-out);
}

.bb-t-next__link:is(:hover, :focus-visible)::after { width: 72px; height: 72px; }

/* The next plate's miniature, mounted as a print: on its own page's paper
   a bordered box of that paper reads as an empty frame. */
.bb-t-next__mini {
  display: block;
  grid-row: span 2;
  aspect-ratio: 1;
  padding: 8px;
  background: #FBF8F1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 24px 34px -24px rgba(0, 0, 0, .65);
}

.bb-t-next__mini svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bb-t-next__text {
  display: grid;
  gap: 8px;
  align-content: center;
}

.bb-t-next__name {
  color: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: var(--bb-fs-h2);
  font-weight: 600;
  line-height: 1;
}

.bb-t-next__link:is(:hover, :focus-visible) .bb-t-next__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.bb-t-next__standfirst {
  max-width: 52ch;
  margin-top: 6px;
  color: var(--bb-t-ink-2);
  font-size: 1rem;
  line-height: 1.5;
}

.bb-t-next__prints {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.bb-t-next__print {
  width: clamp(72px, 8vw, 112px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 5px;
  background: #FBF8F1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 16px -12px rgba(0, 0, 0, .55);
}

.bb-t-next__print img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bb-t-next__cue { grid-column: 2; justify-self: start; color: var(--bb-t-ink); }

@media (max-width: 1099px) {
  .bb-t-next__spread { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 599px) {
  .bb-t-next__link { grid-template-columns: 96px minmax(0, 1fr); padding: 20px 18px 22px; }
  .bb-t-next__mini { grid-row: auto; }
  .bb-t-next__prints, .bb-t-next__cue, .bb-t-next__standfirst { grid-column: 1 / -1; }
  .bb-t-next__name { font-size: 1.75rem; }
}

/* Miniature plates: each theme's own paper, ink and accent where its card
   sets them, each kind's own colours otherwise. */

.bb-t-mini { display: block; width: 100%; height: auto; }
.bb-t-mini--celestial { border-radius: 50%; background: var(--mini-paper, #0E1726); }
.bb-t-mini__rim, .bb-t-mini__ring { fill: none; stroke: var(--mini-ink, #E9E2D0); stroke-width: 10; }
.bb-t-mini__ring { stroke-width: 5; stroke-opacity: .5; }
.bb-t-mini__stars { fill: none; stroke: var(--mini-ink, #E9E2D0); stroke-linecap: round; stroke-width: 22; }
.bb-t-mini__sea { fill: var(--mini-paper, #EADFC5); }
.bb-t-mini__land { fill: color-mix(in oklab, var(--mini-paper, #EADFC5) 45%, #fff); stroke: var(--mini-accent, #2C2A25); stroke-width: 12; stroke-linejoin: round; }
.bb-t-mini__water { fill: none; stroke: var(--mini-accent, #2C2A25); stroke-linejoin: round; stroke-opacity: .16; stroke-width: 70; }
.bb-t-mini__water--far { stroke-opacity: .08; stroke-width: 150; }
.bb-t-mini__rose { fill: var(--mini-ink, #2C2A25); fill-opacity: .7; }
.bb-t-mini__grid { fill: none; stroke: var(--mini-ink, #EAF2F8); stroke-opacity: .14; stroke-width: 3; }
.bb-t-mini__axle { fill: var(--mini-paper, #16406E); stroke: var(--mini-ink, #EAF2F8); stroke-width: 6; }
.bb-t-mini__gear { fill: color-mix(in oklab, var(--mini-paper, #16406E) 78%, var(--mini-ink, #EAF2F8)); stroke: var(--mini-ink, #EAF2F8); stroke-opacity: .9; }
.bb-t-mini__street { fill: color-mix(in oklab, var(--mini-accent, #C9A46A) 40%, #EFE8D8); stroke: color-mix(in oklab, var(--mini-ink, #1F2730) 45%, transparent); stroke-width: 3; }
.bb-t-mini--night .bb-t-mini__street { fill: color-mix(in oklab, var(--mini-accent, #C9A46A) 30%, #1D2436); }
.bb-t-mini__win { fill: color-mix(in oklab, var(--mini-ink, #1F2730) 40%, transparent); }
.bb-t-mini--night .bb-t-mini__win { fill: #FFD58A; }
.bb-t-mini__sun { fill: #FFE7B0; stroke: #E8B26A; stroke-width: 4; }
.bb-t-mini__moon { fill: #F1ECE0; opacity: .9; }
.bb-t-mini__road { fill: #3A3F4A; }
.bb-t-mini__lane { stroke: #F1ECE0; stroke-dasharray: 40 30; stroke-opacity: .7; stroke-width: 8; }
.bb-t-mini__wall { fill: var(--mini-paper, #2E3340); }
.bb-t-mini__year { fill: none; stroke: var(--mini-ink, #F3EEE3); stroke-opacity: .24; stroke-width: 7; font-family: var(--bb-font-display); font-size: 400px; font-weight: 800; font-stretch: 75%; text-anchor: middle; }
.bb-t-mini__frame { fill: #FBF8F1; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .45)); }
.bb-t-mini__p1 { fill: var(--mini-sig-1, var(--mini-accent, #9A8F7A)); }
.bb-t-mini__p2 { fill: var(--mini-sig-2, var(--mini-sig-1, var(--mini-accent, #9A8F7A))); }
.bb-t-mini__p3 { fill: var(--mini-sig-3, var(--mini-sig-1, var(--mini-accent, #9A8F7A))); }
.bb-t-mini__brick { fill: rgba(255, 255, 255, .28); stroke: rgba(0, 0, 0, .35); stroke-width: 3; }
.bb-t-mini__lamp { fill: #C9A253; }
.bb-t-mini__label { fill: #F6F2EA; }
.bb-t-mini__route { fill: none; stroke: var(--mini-ink, #2C2A25); stroke-dasharray: 2 26; stroke-linecap: round; stroke-width: 12; }
.bb-t-mini__skirting { stroke: var(--mini-ink, #E9E2D0); stroke-width: 8; }
.bb-t-mini--armorial .bb-t-shield-line { stroke: #2B2119; stroke-width: 5; }

/* The stage on a wide screen: the reading column on the left, the plate
   held in view on the right while the voyage scrolls past it. Below that
   width, or without the script, the plate leads and every stop shows its
   own still. */

.bb-t-stage__plate {
  overflow: hidden;
}

.bb-t-plate {
  transform-origin: 0 0;
}

@media (min-width: 1100px) {
  .bb-t-stage {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .bb-t-stage__text {
    grid-column: 1;
    grid-row: 1;
    padding-top: clamp(24px, 6vh, 72px);
  }

  .bb-t-stage__plate {
    position: sticky;
    top: 76px;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    height: calc(100vh - 96px);
    margin: 0;
    place-items: center;
  }

  .bb-t-plate {
    width: 100%;
  }

  .bb-atlas--celestial .bb-t-plate {
    width: min(100%, calc(100vh - 120px));
  }

  .bb-atlas[data-motion] .bb-t-stop__still {
    display: none;
  }

  .bb-atlas[data-motion="live"] .bb-t-plate {
    transition: transform var(--bb-dur-4) var(--bb-ease-out);
  }

  .bb-atlas[data-motion="live"] .bb-t-planisphere__disc {
    transition: rotate 1.4s var(--bb-ease-out);
  }
}

/* The gallery stays in one column at every width: its bays are photographs,
   hung across the page in each stop. */
@media (min-width: 1100px) {
  .bb-atlas--gallery .bb-t-stage {
    display: block;
  }

  .bb-atlas--gallery .bb-t-stage__plate {
    position: static;
    height: auto;
  }

  .bb-atlas--gallery .bb-t-stage__text {
    max-width: none;
  }

  .bb-atlas--gallery[data-motion] .bb-t-stop__still {
    display: block;
  }
}

.bb-atlas--gallery .bb-t-stage__text > * {
  max-width: 680px;
}

.bb-atlas--gallery .bb-t-voyage,
.bb-atlas--gallery .bb-t-stops {
  max-width: none;
}

/* In the gallery the cartouche is the wall text above the hall. */
.bb-atlas--gallery .bb-t-stage {
  display: flex;
  flex-direction: column;
}

.bb-atlas--gallery .bb-t-stage__text {
  display: contents;
}

.bb-atlas--gallery .bb-t-front { order: 1; }
.bb-atlas--gallery .bb-t-stage__plate { order: 2; margin-bottom: 0; }
.bb-atlas--gallery .bb-t-legend { order: 3; margin-top: clamp(48px, 8vh, 96px); }
.bb-atlas--gallery .bb-t-voyage { order: 4; margin-top: clamp(56px, 10vh, 120px); }

.bb-atlas--gallery .bb-t-front {
  max-width: 760px;
}

.bb-atlas--gallery .bb-t-figures {
  margin-top: var(--bb-space-6);
}

/* Shared fixes for the folio line inside the Atlas. */
.bb-t-folio {
  margin: 0;
  padding: 0;
}

.bb-t-folio .bb-folio__list {
  margin: 0;
  padding: 0;
}

.bb-t-folio [aria-current] {
  color: var(--bb-t-ink);
  opacity: 1;
}

@media (min-width: 1100px) {
  .bb-atlas--gallery .bb-t-stage {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }

  .bb-atlas--gallery .bb-t-front { grid-column: 1; grid-row: 1; }
  .bb-atlas--gallery .bb-t-stage__plate { grid-column: 2; grid-row: 1; width: 100%; }
  .bb-atlas--gallery .bb-t-legend,
  .bb-atlas--gallery .bb-t-voyage { grid-column: 1 / -1; }

  .bb-atlas--gallery .bb-t-stage__plate .bb-t-print--large .bb-t-print__mat { width: clamp(170px, 16vw, 300px); }
  .bb-atlas--gallery .bb-t-stage__plate .bb-t-print--medium .bb-t-print__mat { width: clamp(140px, 12.5vw, 240px); }
  .bb-atlas--gallery .bb-t-stage__plate .bb-t-print--small .bb-t-print__mat { width: clamp(110px, 10vw, 190px); }
}

/* While the camera is zoomed in, the frame fades to paper at its edges, so
   what it cuts reads as the rest of the plate, not a clipped drawing. */
@property --bb-t-edge {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@media (min-width: 1100px) {
  .bb-t-stage__plate {
    --bb-t-edge: 0%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bb-t-edge), #000 calc(100% - var(--bb-t-edge)), transparent),
                        linear-gradient(180deg, transparent, #000 var(--bb-t-edge), #000 calc(100% - var(--bb-t-edge)), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 var(--bb-t-edge), #000 calc(100% - var(--bb-t-edge)), transparent),
                linear-gradient(180deg, transparent, #000 var(--bb-t-edge), #000 calc(100% - var(--bb-t-edge)), transparent);
    mask-composite: intersect;
    transition: --bb-t-edge .6s var(--bb-ease-out);
  }

  .bb-atlas[data-focused] .bb-t-stage__plate {
    --bb-t-edge: 8%;
  }
}

/* The page turn: the plate on the followed link grows into the next page's
   plate (atlas_controller#turnPage). */
.bb-t-stage .bb-t-plate {
  view-transition-name: bb-t-plate;
}

::view-transition-group(bb-t-plate) {
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .bb-t-next__link::after { transition: none; }
}

@keyframes bb-t-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bb-t-draw {
  to { stroke-dashoffset: 0; }
}

.bb-t-still--celestial {
  max-width: 320px;
}

/* A short era's street is a narrow crop, so at full width it would stand
   taller than the screen. The frame takes the crop's own proportions under
   the cap: a wider frame would letterbox the crop and paint the
   neighbouring eras beside it. */
.bb-t-still--civic {
  width: auto;
  max-width: 100%;
  max-height: min(62vh, 520px);
  margin-inline: auto;
}

/* On a tablet the sky and the gear sit beside their era's caption, as a
   plate beside its key, rather than alone above it in half the column. */
@media (min-width: 640px) and (max-width: 1099px) {
  .bb-atlas--celestial .bb-t-stop,
  .bb-atlas--mechanical .bb-t-stop {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-content: start;
    column-gap: var(--bb-space-6);
  }

  .bb-atlas--celestial .bb-t-stop > *,
  .bb-atlas--mechanical .bb-t-stop > * {
    grid-column: 2;
  }

  .bb-atlas--celestial .bb-t-stop__still,
  .bb-atlas--mechanical .bb-t-stop__still {
    grid-row: 1 / span 4;
    grid-column: 1;
    margin-bottom: 0;
  }
}

/* Below the wide stage the plate leads the page, so a tall plate shows
   its head under a fade (each stop shows its own part) and the star chart
   shrinks to fit rather than push the h1 below the first screen. */
@media (max-width: 1099px) {
  .bb-atlas--armorial .bb-t-stage__plate {
    max-height: min(60vh, 560px);
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }

  .bb-atlas--celestial .bb-t-plate {
    width: min(100%, 62vh);
    margin-inline: auto;
  }
}
/* The star chart: a planisphere whose disc turns under a fixed pointer. */

.bb-t-planisphere {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}

.bb-t-planisphere__disc,
.bb-t-planisphere__holder {
  position: absolute;
  inset: 0;
}

.bb-t-planisphere__disc {
  rotate: calc(var(--bb-t-turn) * 1deg);
}

.bb-t-planisphere svg {
  width: 100%;
  height: 100%;
}

.bb-t-graticule {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .14;
  stroke-width: .75;
  stroke-dasharray: 1.5 5;
}

.bb-t-rim {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .7;
  stroke-width: 1.4;
}

.bb-t-rim--inner {
  stroke-width: .6;
}

.bb-t-ticks {
  stroke: var(--bb-t-ink);
  stroke-opacity: .6;
  stroke-width: .9;
}

.bb-t-year {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-anchor: middle;
}

.bb-t-stars {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-linecap: round;
}

.bb-t-stars--m3 { stroke-opacity: .78; }
.bb-t-stars--m4 { stroke-opacity: .55; }

.bb-t-rays {
  stroke: var(--bb-t-ink);
  stroke-width: .6;
  stroke-linecap: round;
  stroke-opacity: .7;
}

.bb-t-figure {
  fill: none;
  stroke-width: 1.1;
  stroke-opacity: .8;
  stroke-linejoin: round;
}

.bb-t-era-name {
  font-family: var(--bb-font-serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
}

.bb-t-pointer {
  fill: var(--bb-t-accent);
}

.bb-t-bezel {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .35;
  stroke-width: .75;
}

.bb-t-stars--field {
  stroke-opacity: .32;
}

/* A stop's still draws its own era's figure bright over the shared sky. */
.bb-t-still__figure {
  fill: none;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

.bb-t-era-name.is-hidden {
  display: none;
}

/* Arrival: the brightest stars first, then the constellations draw
   themselves and the eras are named. */
@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-stage .bb-t-stars { animation: bb-t-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .bb-atlas .bb-t-stage .bb-t-stars--m1 { animation-delay: .15s; }
  .bb-atlas .bb-t-stage .bb-t-stars--m2 { animation-delay: .3s; }
  .bb-atlas .bb-t-stage .bb-t-stars--m3 { animation-delay: .45s; }
  .bb-atlas .bb-t-stage .bb-t-stars--m4 { animation-delay: .6s; }
  .bb-atlas .bb-t-stage .bb-t-figure {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: bb-t-draw 1.1s .7s cubic-bezier(.2, .8, .2, 1) forwards;
  }
  .bb-atlas .bb-t-stage .bb-t-era-name { animation: bb-t-rise .7s 1.2s both; }
}
/* The roll of arms: painted shields on vellum, names in Garamond capitals,
   blazons in italic, the gold catching a light. */

.bb-atlas--armorial {
  --bb-t-gold: #B08A3E;
  --bb-t-rubric: #8C2B1D;
}

.bb-t-roll svg {
  display: block;
  width: 100%;
  height: auto;
}

.bb-t-shield-line {
  stroke: var(--bb-t-ink);
  stroke-width: 2.2;
}

.bb-t-sheen {
  pointer-events: none;
}

.bb-t-charge {
  stroke: var(--bb-t-ink);
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.bb-t-arms__shield ~ .bb-t-shield-line {
  stroke-width: 1.6;
}

.bb-t-arms-name {
  fill: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .14em;
  text-anchor: middle;
  text-transform: uppercase;
}

.bb-t-arms-years {
  fill: var(--bb-t-rubric);
  font-family: var(--bb-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-anchor: middle;
}

.bb-t-blazon {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-serif);
  font-size: 15px;
  font-style: italic;
  text-anchor: middle;
}

.bb-t-roll-rule {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .25;
  stroke-width: .8;
}

/* Arrival: the theme's arms, then the roll's shields in order. */
@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-stage .bb-t-arms { animation: bb-t-rise .7s both; }
  .bb-atlas .bb-t-stage .bb-t-era-arms { animation: bb-t-rise .6s backwards; animation-delay: calc(.2s + (var(--i, 0) * 60ms)); }
}

/* While the camera is on one era, the other shields step back (backwards
   fill on the entrance, or its end state would hold them at full). */
.bb-atlas--armorial .bb-t-stage .bb-t-era-arms {
  transition: opacity .6s var(--bb-ease-out);
}

.bb-atlas--armorial[data-focused] .bb-t-stage .bb-t-era-arms:not(.is-current) {
  opacity: .3;
}
/* The sea chart: a portolan on chart paper, coasts washed in each era's
   colour, rhumb lines from two compass roses, a ship on the route. */

.bb-atlas--marine {
  --bb-t-rhumb: #9B3A2C;
  --bb-t-land: color-mix(in oklab, var(--bb-t-paper) 55%, #fff);
}

.bb-t-chart__sheet svg {
  display: block;
  width: 100%;
  height: auto;
}

.bb-t-rhumb {
  fill: none;
  stroke: var(--bb-t-rhumb);
  stroke-opacity: .32;
  stroke-width: .6;
}

.bb-t-rose-ring {
  fill: var(--bb-t-paper);
  stroke: var(--bb-t-ink);
  stroke-width: .8;
}

.bb-t-rose {
  fill: var(--bb-t-paper);
  stroke: var(--bb-t-ink);
  stroke-width: .7;
}

.bb-t-rose--main {
  fill: var(--bb-t-ink);
}

.bb-t-waterlines {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .22;
  stroke-width: .6;
}

.bb-t-land {
  fill: var(--bb-t-land);
  stroke-linejoin: round;
  stroke-opacity: .6;
  stroke-width: 5;
}

.bb-t-towns {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-linecap: round;
  stroke-opacity: .8;
}

.bb-t-route {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-dasharray: 1 9;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.bb-t-sounding {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-serif);
  font-size: 15px;
  font-style: italic;
  text-anchor: middle;
}

.bb-t-island-name {
  fill: var(--bb-t-ink);
  font-family: var(--bb-font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .16em;
  text-anchor: middle;
  text-transform: uppercase;
}

.bb-t-island-years {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-anchor: middle;
}

.bb-t-ship__hull,
.bb-t-ship__flag {
  fill: var(--bb-t-ink);
}

.bb-t-ship__rig {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-width: 1;
}

.bb-t-ship__sail {
  fill: var(--bb-t-land);
  stroke: var(--bb-t-ink);
  stroke-width: 1;
}

.bb-t-neat {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-width: 1.6;
}

.bb-t-neat--inner {
  stroke-width: .6;
}

/* Arrival: the islands surface, then the route and the soundings. */
@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-stage :is(.bb-t-land, .bb-t-waterlines, .bb-t-towns) { animation: bb-t-rise .9s .1s both; }
  .bb-atlas .bb-t-stage :is(.bb-t-route, .bb-t-soundings, .bb-t-names) { animation: bb-t-rise .9s .7s both; }
}

.bb-t-ship {
  transition: transform .25s linear;
}
/* The blueprint: a cyanotype gear train on a stud-pitch grid. Each gear
   turns at its own ratio as --bb-t-drive goes from 0 to 1. */

@property --bb-t-intro {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.bb-atlas--mechanical {
  --bb-t-drive: 0;
}

.bb-t-blueprint {
  position: relative;
  aspect-ratio: 1600 / 1000;
  background-image:
    linear-gradient(color-mix(in oklab, var(--bb-t-ink) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--bb-t-ink) 9%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklab, var(--bb-t-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--bb-t-ink) 4%, transparent) 1px, transparent 1px);
  background-size: 5% 8%, 5% 8%, 1.25% 2%, 1.25% 2%;
}

.bb-t-blueprint__sheet,
.bb-t-blueprint__notes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bb-t-gear {
  position: absolute;
  aspect-ratio: 1;
  rotate: calc((var(--phase) + ((var(--bb-t-drive) + var(--bb-t-intro)) * var(--spin))) * 1deg);
}

.bb-t-gear svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bb-t-gear__teeth {
  fill: color-mix(in oklab, var(--bb-t-paper) 88%, var(--bb-t-ink));
  stroke: var(--bb-t-ink);
  stroke-linejoin: round;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.bb-t-gear__pitch {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-dasharray: 12 4 2 4;
  stroke-opacity: .45;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

.bb-t-gear__axle,
.bb-t-gear__hole {
  fill: var(--bb-t-paper);
  stroke: var(--bb-t-ink);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.bb-t-centre {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-dasharray: 18 5 3 5;
  stroke-opacity: .4;
  stroke-width: .7;
}

.bb-t-leader {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-opacity: .7;
  stroke-width: .8;
}

/* Notes sit over the gears, haloed in the paper so teeth never cut them. */
.bb-t-label,
.bb-t-ratio {
  paint-order: stroke;
  stroke: var(--bb-t-paper);
  stroke-linejoin: round;
  stroke-width: 5px;
}

.bb-t-label {
  fill: var(--bb-t-ink);
  font-family: var(--bb-font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  text-anchor: middle;
}

.bb-t-label--small {
  fill: var(--bb-t-ink-2);
  font-size: 11px;
}

.bb-t-ratio {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-anchor: middle;
}

.bb-t-block rect,
.bb-t-block path,
.bb-atlas--mechanical .bb-t-neat {
  fill: none;
  stroke: var(--bb-t-ink);
  stroke-width: 1.2;
}

.bb-atlas--mechanical .bb-t-neat--inner {
  stroke-width: .5;
}

.bb-t-block__key {
  fill: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
}

.bb-t-block__value {
  fill: var(--bb-t-ink);
  font-family: var(--bb-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

/* Arrival: the train inks in and makes a short turn into place. */
@keyframes bb-t-gear-in {
  from { --bb-t-intro: -.12; opacity: 0; }
  to { --bb-t-intro: 0; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-stage .bb-t-gear { animation: bb-t-gear-in 1.4s cubic-bezier(.2, .8, .2, 1) both; }
}
/* The street plan: the theme's years as a street in elevation, morning to
   night, a window for every set. */

.bb-t-street__track svg {
  display: block;
  width: 100%;
  height: auto;
}

.bb-t-sun {
  fill: #FFE7B0;
  stroke: #E8B26A;
  stroke-width: 1.5;
}

.bb-t-moon {
  fill: #F1ECE0;
  opacity: .9;
}

.bb-t-road {
  fill: #3A3F4A;
}

.bb-t-kerb {
  fill: none;
  stroke: #C9CED6;
  stroke-width: 1.4;
}

.bb-t-centreline {
  fill: none;
  stroke: #F1ECE0;
  stroke-dasharray: 22 18;
  stroke-opacity: .7;
  stroke-width: 3;
}

.bb-t-building rect,
.bb-t-building path {
  stroke-linejoin: round;
  stroke-width: 1.1;
}

/* Each window is one stroke as wide as the window; this beats the
   building's hairline rule above. */
.bb-t-building path.bb-t-window {
  fill: none;
  stroke: #2B3240;
  stroke-opacity: .7;
  stroke-width: 9px;
}

.bb-t-building path.bb-t-window--lit {
  stroke: #FFD58A;
  stroke-opacity: 1;
}

.bb-t-lot {
  fill: none;
  stroke: #7D8592;
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.bb-t-lamppost {
  fill: none;
  stroke: #5A616D;
  stroke-width: 2;
}

.bb-t-lamp { fill: #C9CED6; }
.bb-t-lamp--lit { fill: #FFD58A; }

.bb-t-signpost {
  fill: none;
  stroke: #5A616D;
  stroke-width: 2.4;
}

.bb-t-sign {
  fill: #F6F2EA;
  stroke: #1F2730;
  stroke-width: 1.2;
}

.bb-t-sign__text {
  fill: #1F2730;
  font-family: var(--bb-font-display);
  font-size: 15px;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: .04em;
}

.bb-t-street-year {
  fill: #C9CED6;
  font-family: var(--bb-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-anchor: middle;
}

.bb-t-courses {
  fill: none;
  stroke-opacity: .18;
  stroke-width: .8;
}

/* Arrival: the street stands, then its windows light. */
@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-stage .bb-t-buildings { animation: bb-t-rise .8s both; }
  .bb-atlas .bb-t-stage .bb-t-building path.bb-t-window--lit { animation: bb-t-rise 1.1s .6s both; }
}
/* The gallery: the Exhibition's hall, painted in the theme's lead colour,
   with matted prints under warm light. */

.bb-atlas--gallery {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--bb-t-paper) 82%, #fff) 0%, transparent 70%),
    var(--bb-t-paper);
}

.bb-t-hall {
  position: relative;
  display: grid;
  min-height: min(60vh, 600px);
  place-items: end center;
  padding-block: clamp(48px, 8vh, 96px) clamp(32px, 6vh, 72px);
  overflow: hidden;
}

.bb-t-hall__year,
.bb-t-bay__year {
  position: absolute;
  inset-inline: 0;
  margin: 0;
  color: transparent;
  font-family: var(--bb-font-display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: .8;
  text-align: center;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--bb-t-ink) 18%, transparent);
  pointer-events: none;
  user-select: none;
}

.bb-t-hall__year {
  bottom: 14%;
  font-size: clamp(9rem, 28vw, 30rem);
}

.bb-t-hall__prints,
.bb-t-bay__prints {
  position: relative;
  display: flex;
  gap: clamp(20px, 4vw, 64px);
  align-items: flex-end;
  justify-content: center;
}

.bb-t-print {
  position: relative;
  display: grid;
  gap: 16px;
  justify-items: center;
  margin: 0;
}

.bb-t-print__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.bb-t-print__link:hover .bb-t-print__name,
.bb-t-print__link:focus-visible .bb-t-print__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bb-t-print__link:focus-visible {
  outline: 2px solid var(--bb-t-accent);
  outline-offset: 6px;
}

.bb-t-print__mat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 34px 42px -24px rgba(0, 0, 0, .75);
}

.bb-t-print--large .bb-t-print__mat { width: clamp(150px, 24vw, 400px); }
.bb-t-print--medium .bb-t-print__mat { width: clamp(120px, 18vw, 300px); }
.bb-t-print--small .bb-t-print__mat { width: clamp(96px, 13vw, 220px); }

/* A phone hangs the wall salon-style: two prints to a row at most, each
   label wrapping to its own print's width. */
@media (max-width: 699px) {
  .bb-t-hall__prints,
  .bb-t-bay__prints {
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .bb-t-print { width: min-content; }
  .bb-t-print--large .bb-t-print__mat { width: 42vw; }
  .bb-t-print--medium .bb-t-print__mat { width: 36vw; }
  .bb-t-print--small .bb-t-print__mat { width: 30vw; }
}

/* Positioned, so a tall photograph cannot stretch its mat (aspect-ratio is
   only a preferred size). */
.bb-t-print__mat img {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* A picture light: a brass bar above the frame and the pool it casts. */
.bb-t-print__light {
  position: absolute;
  inset: -34% -22% 22%;
  background: radial-gradient(closest-side at 50% 42%, rgba(255, 231, 184, .26), rgba(255, 231, 184, 0));
  pointer-events: none;
}

.bb-t-print__light::before {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 34%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(#d9b56a, #8a6a2c);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
  content: "";
  translate: -50% 0;
}

.bb-t-print__label {
  display: grid;
  gap: 2px;
  max-width: 30ch;
  padding: 10px 14px;
  background: #F6F2EA;
  box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .6);
  color: #1B2129;
  text-align: left;
}

.bb-t-print__meta {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bb-t-print__name {
  font-family: var(--bb-font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}

.bb-t-bays {
  display: grid;
  gap: clamp(48px, 10vh, 120px);
}

.bb-t-bay {
  position: relative;
  display: grid;
  gap: 20px;
  padding-block: clamp(48px, 8vh, 96px) 0;
  overflow: hidden;
}

.bb-t-bay__year {
  top: 0;
  font-size: clamp(7rem, 20vw, 22rem);
}

.bb-t-bay__label {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  color: var(--bb-t-ink);
}

.bb-t-bay__name {
  font-family: var(--bb-font-serif);
  font-size: 1.5rem;
  font-style: italic;
}

.bb-t-bay__count {
  color: var(--bb-t-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bb-t-ledger {
  display: block;
  width: 100%;
  height: 44px;
}

.bb-t-ledger__rule,
.bb-t-ledger__ticks {
  fill: none;
  stroke: var(--bb-t-ink);
  vector-effect: non-scaling-stroke;
}

.bb-t-ledger__rule { stroke-opacity: .5; }
.bb-t-ledger__ticks { stroke-opacity: .6; stroke-width: 1.2; }

/* Arrival: the prints are hung in turn and their lights come up. */
@keyframes bb-t-hang {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .bb-atlas .bb-t-hall .bb-t-print { animation: bb-t-hang .8s cubic-bezier(.2, .8, .2, 1) both; }
  .bb-atlas .bb-t-hall .bb-t-print:nth-child(2) { animation-delay: .15s; }
  .bb-atlas .bb-t-hall .bb-t-print:nth-child(3) { animation-delay: .3s; }
  .bb-atlas .bb-t-hall .bb-t-print__light { animation: bb-t-rise 1.1s .5s both; }
}
/* The Atlas's contents: a title page of six plates fanned on the desk,
   the six kinds of plate, LEGO's lineup and the archive as cards. */

.bb-atlas--contents {
  background: var(--bb-paper);
}

.bb-t-title-page {
  padding-block: clamp(32px, 6vh, 72px) clamp(48px, 8vh, 96px);
}

.bb-t-title-page__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 1100px) {
  .bb-t-title-page__grid {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  }
}

.bb-t-title__tagline {
  display: block;
  margin-top: .2em;
  color: var(--bb-t-ink-2);
  font-size: .42em;
  font-style: italic;
  font-weight: 500;
}

/* Six plates lie fanned like prints on a desk; on a phone they become a
   row to swipe. */
.bb-t-fan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-fan__plate {
  rotate: calc((var(--i) - 2.5) * 1.1deg);
  translate: 0 calc(sin(var(--i) * 1.3rad) * 10px);
  transition: rotate var(--bb-dur-3) var(--bb-ease-out), translate var(--bb-dur-3) var(--bb-ease-out);
}

.bb-t-fan__plate:hover,
.bb-t-fan__plate:focus-within {
  rotate: 0deg;
  translate: 0 -6px;
}

@media (max-width: 767px) {
  .bb-t-fan {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--bb-margin));
    padding: 8px var(--bb-margin) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .bb-t-fan__plate {
    flex: 0 0 62%;
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-t-fan__plate { transition: none; }
}

/* A theme's card: its plate in miniature, its plate number and kind, its
   name and its figures. */
.bb-t-card {
  display: grid;
  gap: 6px;
  color: var(--bb-ink);
  text-decoration: none;
}

.bb-t-card__plate {
  display: grid;
  aspect-ratio: 1;
  padding: 7%;
  place-items: center;
  border: 1px solid var(--bb-rule);
  background: var(--mini-paper, var(--bb-paper-2));
  box-shadow: 0 18px 26px -22px rgba(0, 0, 0, .6);
}

.bb-t-card--cover .bb-t-card__plate {
  padding: 9%;
}

.bb-t-card__plate svg {
  max-width: 100%;
  max-height: 100%;
}

.bb-t-card__meta {
  margin-top: 8px;
  color: var(--bb-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bb-t-card__name {
  font-family: var(--bb-font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}

.bb-t-card__count {
  color: var(--bb-ink-2);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
}

.bb-t-card:hover .bb-t-card__name,
.bb-t-card:focus-visible .bb-t-card__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.bb-t-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--bb-space-8) var(--bb-space-6);
  margin: var(--bb-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.bb-t-kinds,
.bb-t-lineup,
.bb-t-archive,
.bb-t-browse {
  padding-block: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--bb-rule);
}

.bb-t-kinds__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--bb-space-6) var(--bb-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-t-kind {
  padding-top: var(--bb-space-4);
  border-top: 2px solid var(--bb-ink);
}

.bb-t-kind__name {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.5rem;
  font-weight: 600;
}

.bb-t-kind__rule {
  margin: 6px 0 0;
  color: var(--bb-ink-2);
}

.bb-t-kind__themes {
  margin: 10px 0 0;
  font-size: var(--bb-fs-small);
  line-height: 1.6;
}

.bb-t-section-note {
  max-width: 62ch;
  margin: 0 0 var(--bb-space-4);
  color: var(--bb-ink-2);
}

.bb-t-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: var(--bb-space-5) 0 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-small);
  letter-spacing: .06em;
}

.bb-t-tabs__label {
  color: var(--bb-ink-2);
}

.bb-t-tab {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  color: var(--bb-ink-2);
  text-decoration: none;
}

.bb-t-tab[aria-current] {
  border-color: var(--bb-signal);
  color: var(--bb-ink);
}

.bb-t-tab__count {
  margin-left: 4px;
  color: var(--bb-ink-2);
}

.bb-t-browse__list {
  max-width: 520px;
}

/* The archive's pager, drawn like the theme catalog's in the Atlas's rule
   and ink. Kaminari nests a .pagination-wrapper inside the template's, and
   the global style gives each a white box. */
.bb-t-archive .pagination-wrapper {
  justify-content: center;
  gap: 4px;
  margin-top: var(--bb-space-8);
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.bb-t-archive .pagination-wrapper .pagination-wrapper {
  margin-top: 0;
}

.bb-t-archive .page-link {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--bb-t-ink);
  font-family: var(--bb-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}

.bb-t-archive .page-link:hover:not(.disabled):not(.active) {
  border-color: var(--bb-t-ink);
  background: none;
  color: var(--bb-t-ink);
}

.bb-t-archive .page-link.active {
  border-color: var(--bb-t-ink);
  background: var(--bb-t-ink);
  color: var(--bb-t-paper);
}

.bb-t-archive .page-link.disabled {
  color: var(--bb-t-ink-2);
  opacity: 0.5;
}
/* Journeys: a theme page walked as painted chapters (docs/design/journeys.md).
   A sticky stage holds the paintings (stills, or the stage's canvas once it
   is live); the chapters scroll over it, each panel on a wash of paper or
   night that the painting fades into. Colours come from the theme's roles
   on .bb-atlas; a chapter's wash decides its ink. */

.bb-j {
  --bb-j-paper: var(--bb-t-paper);
  --bb-j-wash: var(--bb-j-paper);
  --bb-j-panel: min(460px, 34vw);
  --bb-j-front: min(560px, 42vw);
  --bb-j-edge: max(var(--bb-margin), calc((100% - var(--bb-max)) / 2 + var(--bb-margin)));
  position: relative;
  /* clip, not hidden: hidden would make this a scroll container and break
     the sticky stage. */
  overflow-x: clip;
  background: var(--bb-night);
}

.bb-j[data-wash="dark"] { --bb-j-wash: var(--bb-night); }

/* The stage */

.bb-j__stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
}

.bb-j__stills,
.bb-j__still,
.bb-j__still img,
.bb-j__canvas,
.bb-j__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bb-j__still img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  opacity: 0;
  transition: opacity 900ms var(--bb-ease-out);
}

.bb-j__still.is-shown img { opacity: 1; }

@media (orientation: portrait) {
  .bb-j__still img { object-position: var(--px, 50%) var(--fy, 50%); }
}

/* The first painting grows out of the card or cover that opened the page. */
.bb-j__still--first { view-transition-name: bb-t-plate; }

.bb-j__canvas {
  display: block;
  opacity: 0;
  transition: opacity 600ms var(--bb-ease-out);
}

.bb-j.is-live .bb-j__canvas { opacity: 1; }
.bb-j.is-live .bb-j__stills { visibility: hidden; }

/* The wash the painting fades into on the copy's side, and a soft grain and
   vignette that make every painting sit on the same paper. */
.bb-j__wash::before,
.bb-j__wash::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  transition: opacity 800ms var(--bb-ease-out), background 800ms var(--bb-ease-out);
}

.bb-j__wash::before {
  background: linear-gradient(90deg, var(--bb-j-wash) 0%, color-mix(in oklab, var(--bb-j-wash) 86%, transparent) 24%, color-mix(in oklab, var(--bb-j-wash) 40%, transparent) 42%, transparent 60%);
}

.bb-j__wash::after {
  background: linear-gradient(270deg, var(--bb-j-wash) 0%, color-mix(in oklab, var(--bb-j-wash) 86%, transparent) 24%, color-mix(in oklab, var(--bb-j-wash) 40%, transparent) 42%, transparent 60%);
}

.bb-j[data-side="left"] .bb-j__wash::before,
.bb-j[data-side="right"] .bb-j__wash::after { opacity: 1; }

.bb-j__stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(10 12 18 / .28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .5;
}

/* Live, the stage draws its own grain and vignette: a blend mode over a
   canvas that changes every frame would be composited every frame. */
.bb-j.is-live .bb-j__stage::after { display: none; }

/* Progress along the journey, a hairline at the top of the stage. */
.bb-j__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  background: color-mix(in oklab, var(--bb-t-accent) 18%, transparent);
}

.bb-j__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bb-t-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* The chapter rail, on the stage's right edge. */
.bb-j__rail {
  position: absolute;
  top: 50%;
  right: clamp(12px, 2vw, 28px);
  z-index: 3;
  transform: translateY(-50%);
  pointer-events: auto;
}

.bb-j__rail ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-j__rail-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklab, var(--bb-night-text) 60%, transparent);
  background: color-mix(in oklab, var(--bb-night) 35%, transparent);
  color: var(--bb-night-text);
  font-family: var(--bb-font-mono);
  font-size: .6875rem;
  text-decoration: none;
  transition: background var(--bb-dur-2) var(--bb-ease-out), border-color var(--bb-dur-2) var(--bb-ease-out);
}

.bb-j__rail-link[aria-current] {
  border-color: var(--bb-signal);
  background: var(--bb-signal);
  color: #fff;
}

.bb-j__rail-name {
  position: absolute;
  right: calc(100% + 10px);
  padding: 4px 8px;
  background: var(--bb-night);
  color: var(--bb-night-text);
  font-family: var(--bb-font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--bb-dur-2) var(--bb-ease-out), transform var(--bb-dur-2) var(--bb-ease-out);
  pointer-events: none;
}

.bb-j__rail-link:hover .bb-j__rail-name,
.bb-j__rail-link:focus-visible .bb-j__rail-name {
  opacity: 1;
  transform: none;
}

/* The chapters */

.bb-j__chapters {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100lvh;
  pointer-events: none;
}

.bb-j__chapter {
  --bb-j-ink: var(--bb-j-paper-ink, var(--bb-t-ink));
  --bb-j-ink-2: var(--bb-j-paper-ink-2, var(--bb-t-ink-2));
  --bb-j-accent: var(--bb-j-paper-accent, var(--bb-t-accent-ink));
  --bb-j-panel-wash: var(--bb-j-paper);
  display: flex;
  align-items: flex-start;
  min-height: 165vh;
  min-height: 165lvh;
  padding: 0 var(--bb-j-edge);
  color: var(--bb-j-ink);
}

.bb-j__chapter--dark {
  --bb-j-ink: var(--bb-night-text);
  --bb-j-ink-2: var(--bb-night-text-2);
  --bb-j-accent: var(--bb-lamp);
  --bb-j-panel-wash: var(--bb-night);
}

.bb-j__chapter--right {
  justify-content: flex-end;
  padding-right: calc(var(--bb-j-edge) + 48px);
}

.bb-j__panel {
  position: sticky;
  top: clamp(96px, 16vh, 168px);
  width: var(--bb-j-panel);
  margin: 26vh 0 22vh;
  padding: 36px 40px;
  margin-inline: -40px;
  isolation: isolate;
  pointer-events: auto;
}

/* The panel's own wash, so the copy keeps its contrast whatever the stage is
   showing as one chapter gives way to the next. It is solid under every line
   and feathers out beyond the panel's edge: a radial wash faded to nothing at
   the corners, where the kicker sits, and let a bright sky through. One
   blurred layer, not a mask or a box-shadow: either leaves a hairline where
   the panel's edge falls between two pixels. 48px out at a 24px blur leaves
   the copy, inside the panel's padding, under the full 90%. */
.bb-j__panel::before {
  position: absolute;
  inset: -48px;
  z-index: -1;
  background: color-mix(in oklab, var(--bb-j-panel-wash) 90%, transparent);
  filter: blur(24px);
  content: "";
  pointer-events: none;
}

.bb-j__chapter--front {
  min-height: 140vh;
  min-height: 140lvh;
}

.bb-j__chapter--front .bb-j__panel {
  top: clamp(80px, 10vh, 120px);
  width: var(--bb-j-front);
  margin-top: clamp(24px, 6vh, 72px);
}

/* The frontispiece reads in the chapter's ink on a journey. */
.bb-j__chapter .bb-t-front,
.bb-j__chapter .bb-t-title,
.bb-j__chapter .bb-t-tagline,
.bb-j__chapter .bb-t-standfirst,
.bb-j__chapter .bb-t-figures dd { color: var(--bb-j-ink); }

.bb-j__chapter .bb-t-note,
.bb-j__chapter .bb-t-figures dt,
.bb-j__chapter .bb-t-folio .bb-folio__list,
.bb-j__chapter .bb-t-folio a,
.bb-j__chapter .bb-t-folio span { color: var(--bb-j-ink-2); }

.bb-j__chapter .bb-t-kicker { color: var(--bb-j-accent); }
.bb-j__chapter .bb-t-figures { border-top-color: color-mix(in oklab, var(--bb-j-ink) 26%, transparent); }

.bb-j__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 var(--bb-space-4);
  color: var(--bb-j-accent);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bb-j__number {
  color: var(--bb-j-ink-2);
  letter-spacing: .08em;
}

.bb-j__number::after {
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: currentColor;
  content: "";
}

.bb-j__title {
  margin: 0 0 var(--bb-space-6);
  color: var(--bb-j-ink);
  font-family: var(--bb-font-serif);
  font-size: clamp(2.5rem, 4.6vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.bb-j__copy {
  margin: 0 0 var(--bb-space-4);
  color: var(--bb-j-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.bb-j__facts {
  display: grid;
  gap: 6px;
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-4) 0 0;
  border-top: 1px solid color-mix(in oklab, var(--bb-j-ink) 26%, transparent);
  list-style: none;
  color: var(--bb-j-ink-2);
  font-family: var(--bb-font-mono);
  font-size: .75rem;
  line-height: 1.5;
}

.bb-j__fact-year {
  margin-right: 8px;
  color: var(--bb-j-accent);
}

.bb-j__link,
.bb-j__skip {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-j__link a,
.bb-j__skip {
  color: var(--bb-j-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bb-j__skip {
  display: inline-block;
  margin-top: var(--bb-space-6);
}

/* Set prints: the catalog's photographs on white mats, pinned to the page. */
.bb-j__prints {
  display: grid;
  grid-template-columns: repeat(var(--bb-j-prints, 3), minmax(0, 1fr));
  gap: 14px;
  max-width: 100%;
  margin: var(--bb-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.bb-j__print-link {
  display: grid;
  gap: 4px;
  color: var(--bb-j-ink);
  text-decoration: none;
}

.bb-j__mat {
  display: block;
  padding: 8px;
  background: #fbfaf7;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 14px 28px -16px rgb(0 0 0 / .55);
  transition: transform var(--bb-dur-2) var(--bb-ease-click);
}

.bb-j__mat img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.bb-j__print-link:hover .bb-j__mat,
.bb-j__print-link:focus-visible .bb-j__mat { transform: translateY(-3px) rotate(-.6deg); }

.bb-j__badge {
  color: var(--bb-j-accent);
  font-family: var(--bb-font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bb-j__print-name {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.bb-j__print-facts {
  color: var(--bb-j-ink-2);
  font-family: var(--bb-font-mono);
  font-size: .6875rem;
}

/* A filtered or paged view: the frontispiece beside the first painting. */
.bb-j-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  width: min(var(--bb-max), calc(100% - (2 * var(--bb-margin))));
  margin: 0 auto;
  padding-block: clamp(16px, 3vh, 40px) clamp(40px, 6vh, 72px);
}

.bb-j-compact__painting {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / .6);
}

.bb-j-compact__painting .bb-j__still,
.bb-j-compact__painting .bb-j__still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bb-j-compact__painting .bb-j__still img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  opacity: 1;
}

/* The next theme's cover, where it has a journey. */
.bb-t-next__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .bb-j { --bb-j-panel: min(460px, 52vw); --bb-j-front: min(520px, 60vw); }
  .bb-j__rail { display: none; }
  .bb-j__chapter--right { padding-right: var(--bb-j-edge); }
}

/* Phones: the painting holds the screen, and the copy rises over its lower
   half on a sheet of the chapter's wash. */
@media (max-width: 767px) {
  .bb-j { --bb-j-edge: 16px; }

  .bb-j__wash::before,
  .bb-j__wash::after {
    background: linear-gradient(0deg, var(--bb-j-wash) 0%, color-mix(in oklab, var(--bb-j-wash) 70%, transparent) 22%, transparent 46%);
  }

  .bb-j__chapter,
  .bb-j__chapter--right {
    display: block;
    min-height: 150lvh;
    padding: 0;
  }

  .bb-j__panel,
  .bb-j__chapter--front .bb-j__panel {
    position: relative;
    top: auto;
    width: auto;
    margin: 56lvh 0 0;
    padding: 64px 16px 40px;
    background: linear-gradient(180deg, transparent 0, var(--bb-j-panel-wash) 56px);
  }

  .bb-j__panel::before { display: none; }

  .bb-j__chapter--front .bb-j__panel { margin-top: 44lvh; }
  .bb-j__title { font-size: clamp(2.25rem, 10vw, 3rem); }
  .bb-j__copy { font-size: 1rem; }
  .bb-j__prints { gap: 10px; }

  .bb-j-compact { grid-template-columns: 1fr; }
  .bb-j-compact__painting { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-j__still img,
  .bb-j__canvas,
  .bb-j__wash::before,
  .bb-j__wash::after,
  .bb-j__mat { transition: none; }
}

/* The contents: a theme with a journey is shown by a painting, cut to 4:5
   and hung like a print, with a row of studs in its own brick colours. */
.bb-t-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--bb-night);
  box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 22px 30px -22px rgb(0 0 0 / .7);
}

.bb-t-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--bb-ease-out);
}

.bb-t-card--journey:hover .bb-t-card__cover img,
.bb-t-card--journey:focus-visible .bb-t-card__cover img { transform: scale(1.04); }

.bb-t-card__studs {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.bb-t-card__studs span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mini-sig-1, var(--bb-ink-2));
  box-shadow: inset -1px -1px 0 rgb(0 0 0 / .25), inset 1px 1px 0 rgb(255 255 255 / .35);
}

.bb-t-card__studs span:nth-child(2) { background: var(--mini-sig-2, var(--mini-sig-1, var(--bb-ink-2))); }
.bb-t-card__studs span:nth-child(3) { background: var(--mini-sig-3, var(--mini-sig-1, var(--bb-ink-2))); }

@media (prefers-reduced-motion: reduce) {
  .bb-t-card__cover img { transition: none; }
}
/*
 * The Atlas: the theme pages (docs/design/atlas.md). Linked only by those
 * pages, through DesignWorldHelper#design_world, and scoped under
 * .bb-atlas. The catalog's drawer on a theme page takes its look from the
 * Archive, linked beside it.









 */