/* ==========================================================================
   WordBred — Cloud Dancer
   1  Fonts            8  Footer                  15 Comments
   2  Tokens           9  Bands & page intro      16 Studio & form
   3  Base            10  Home                    17 Search, empty, 404
   4  Utilities       11  Listings                18 Pages / Elementor
   5  Atoms           12  Filter & pagination     19 Responsive
   6  Wordmark        13  Article                 20 Motion
   7  Header & nav    14  Entry content (blocks)
   ========================================================================== */

/* 1 · Fonts — self-hosted (SIL OFL 1.1, licences in assets/fonts) ---------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Three families, three jobs. Nothing else renders as text (the wordmark is
   artwork, not a font).

   --wb-font-display  Headings from 28px up: h1, h2, article titles, section
                      heads, the home statement. Source Serif 4 at its display
                      optical size (the variable font's opsz axis runs 8–60, and
                      font-optical-sizing: auto picks it at these sizes). The
                      wordmark's lettering exists only as artwork with no font
                      file, so headings use the serif's display cut; a licensed
                      display face would be swapped in here and nowhere else.
   --wb-font-text     Reading: post content, decks, pull quotes, poetry, leads,
                      small headings, and what visitors type into form fields.
   --wb-font-ui       Interface only: nav, kickers, labels, metadata, buttons.

   Instrument Sans is CAPPED AT 15px. It is a quiet interface face; set larger,
   it starts competing with the headlines, which is how the home statement ended
   up as a third display face above the serif headlines. So --wb-font-ui is only
   ever paired with --wb-size-micro (11px), --wb-size-meta (13px) or
   --wb-size-ui (15px). Every larger size token (lead, deck, body, intro,
   feature, display) and any larger one-off size resolves to --wb-font-display
   or --wb-font-text, and a rule that sets a size above 15px must also set one of
   those two families, because body text inherits the interface face. The test
   suite fails if anything rendered in Instrument Sans computes above 15px. */
:root {
  --wb-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wb-font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wb-font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

/* 2 · Tokens — palette is mandatory (BUILD_BRIEF §3) ---------------------- */

:root {
  color-scheme: light;

  --wb-background: #f0eee9; /* Cloud Dancer — rgb(240, 238, 233) */
  --wb-foreground: #20211e;
  --wb-muted: #555d5d;
  --wb-rule: #a7aba8;
  --wb-accent: #af4b2f;
  --wb-accent-foreground: #ffffff;
  --wb-accent-strong: #983f26; /* pressed/hover state of the filled accent only */

  /* Type sizes. micro, meta and ui (11/13/15px) are the only sizes the
     interface face may use; the rest are serif sizes (see section 1). */
  --wb-size-micro: 0.6875rem;
  --wb-size-meta: 0.8125rem;
  --wb-size-ui: 0.9375rem;
  --wb-size-lead: 1.125rem;
  --wb-size-deck: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  --wb-size-body: clamp(1.1875rem, 1.1rem + 0.25vw, 1.3125rem);
  --wb-size-intro: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem);
  --wb-size-feature: clamp(2.25rem, 1.5rem + 2.4vw, 3.625rem);
  --wb-size-display: clamp(2.375rem, 1.4rem + 3.1vw, 4.25rem);

  --wb-track-label: 0.16em;
  --wb-track-display: -0.045em;

  --wb-space-1: 0.25rem;
  --wb-space-2: 0.5rem;
  --wb-space-3: 0.75rem;
  --wb-space-4: 1rem;
  --wb-space-5: 1.5rem;
  --wb-space-6: 2rem;
  --wb-space-7: 3rem;
  --wb-space-8: 4rem;

  --wb-max: 1248px;
  --wb-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --wb-gap: clamp(1rem, 0.6rem + 1.1vw, 1.75rem);
  --wb-index: clamp(10.25rem, 15.5%, 14rem);
  --wb-measure: 40rem;
  --wb-hairline: 1px;
  --wb-target: 2.75rem;
  /* The content line: a column hairline, then one gutter, then text (the approved
     layout's rhythm). Sections without a hairline still start their text here.
     Both collapse to 0 below 900px, where the index column and hairlines go. */
  --wb-inset: calc(var(--wb-hairline) + var(--wb-gap));
  --wb-content-start: calc(var(--wb-index) + var(--wb-gap) + var(--wb-inset));
  /* Tallest a lead image may be, so it never outgrows the screen. */
  --wb-media-h: min(78svh, 42rem);

  --wb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wb-ease-press: cubic-bezier(0.3, 0, 0.2, 1);
  --wb-dur-fast: 140ms;
  --wb-dur: 180ms;
  --wb-dur-slow: 220ms;

  /* Linked headlines: the pop (a share of the headline's own size, so a 58px
     lead and a 22px row title lift in proportion) and the accent underline. */
  --wb-title-lift: -0.06em;
  --wb-title-rule: max(1.5px, 0.055em);
  --wb-title-rule-gap: 0.12em;

  /* Blocksy/Gutenberg palette slots used inside post content, remapped to the
     brand palette (slot 1 is peach in the previous design; ~860 paragraphs use it). */
  --wp--preset--color--palette-color-1: var(--wb-foreground);
  --wp--preset--color--palette-color-2: var(--wb-accent);
  --wp--preset--color--palette-color-3: var(--wb-foreground);
  --wp--preset--color--palette-color-4: var(--wb-foreground);
  --wp--preset--color--palette-color-5: var(--wb-rule);
  --wp--preset--color--palette-color-6: var(--wb-background);
  --wp--preset--color--palette-color-7: var(--wb-background);
  --wp--preset--color--palette-color-8: var(--wb-background);
  --theme-palette-color-1: var(--wb-foreground);
  --theme-palette-color-2: var(--wb-accent);
  --theme-palette-color-3: var(--wb-foreground);
  --theme-palette-color-4: var(--wb-foreground);
  --theme-palette-color-5: var(--wb-rule);
  --theme-palette-color-6: var(--wb-background);
  --theme-palette-color-7: var(--wb-background);
  --theme-palette-color-8: var(--wb-background);

  /* Elementor kit globals (About, Meet the Team) follow the same system. */
  --e-global-color-primary: var(--wb-foreground);
  --e-global-color-secondary: var(--wb-muted);
  --e-global-color-text: var(--wb-foreground);
  --e-global-color-accent: var(--wb-accent);
  --e-global-typography-primary-font-family: var(--wb-font-display);
  --e-global-typography-secondary-font-family: var(--wb-font-text);
  --e-global-typography-text-font-family: var(--wb-font-text);
  --e-global-typography-accent-font-family: var(--wb-font-ui);
}

/* 3 · Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
html body.wordbred {
  background-color: var(--wb-background);
  color: var(--wb-foreground);
}

/* Elementor saves a per-page body background (the home page has a dark gradient on
   body.elementor-page-N:not(…)); the canvas stays Cloud Dancer on every page. */
html body.wordbred[class*="elementor-page-"] {
  background: var(--wb-background) !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--wb-space-6);
}

body.wordbred {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-ui);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Every major surface carries the canvas colour explicitly. */
.wordbred header,
.wordbred main,
.wordbred footer,
.wordbred nav,
.wordbred section,
.wordbred form,
.wordbred input,
.wordbred textarea,
.wordbred select {
  background-color: var(--wb-background);
}

.wb-main {
  flex: 1 0 auto;
}

.wb-main:focus {
  outline: none;
}

.wordbred :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

/* Long single words ("Instagrammification") break instead of spilling out of
   narrow columns; phones also hyphenate (see the 599px query). */
.wordbred :where(h1, h2, h3, h4) {
  overflow-wrap: break-word;
}

.wordbred :where(ol, ul):where([class^="wb-"], [class*=" wb-"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wordbred img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wordbred a {
  color: inherit;
  text-decoration: none;
}

.wordbred :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.wordbred button {
  cursor: pointer;
}

::selection {
  background-color: var(--wb-foreground);
  color: var(--wb-background);
}

:focus-visible {
  outline: 2px solid var(--wb-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

mark {
  background-color: transparent;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--wb-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* 4 · Utilities ------------------------------------------------------------ */

.wb-container {
  width: 100%;
  max-width: calc(var(--wb-max) + 2 * var(--wb-gutter));
  margin-inline: auto;
  padding-inline: var(--wb-gutter);
}

.wb-visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wb-skip-link {
  position: absolute;
  top: var(--wb-space-3);
  left: var(--wb-space-3);
  z-index: 100;
  padding: var(--wb-space-3) var(--wb-space-4);
  background-color: var(--wb-foreground);
  color: var(--wb-background) !important;
  font-size: var(--wb-size-ui);
  transform: translateY(calc(-100% - var(--wb-space-6)));
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-skip-link:focus-visible {
  transform: none;
}

/* 5 · Atoms ---------------------------------------------------------------- */

.wb-icon {
  flex-shrink: 0;
}

/* Arrow link: a 1px accent rule that firms to 2px; the arrow travels 2px. */
.wb-arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  width: max-content;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.3em 0;
  color: var(--wb-foreground);
  line-height: 1.3;
}

.wb-arrow-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background-color: var(--wb-accent);
  transform: scaleY(0.5);
  transform-origin: bottom;
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-arrow-link__arrow {
  width: 1em;
  height: 1em;
  color: var(--wb-accent);
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-arrow-link:hover::after,
.wb-arrow-link:focus-visible::after {
  transform: scaleY(1);
}

.wb-arrow-link:hover .wb-arrow-link__arrow,
.wb-arrow-link:focus-visible .wb-arrow-link__arrow {
  transform: translate(2px, -2px);
}

.wb-arrow-link:hover .wb-arrow-link__arrow--arrow-down,
.wb-arrow-link:focus-visible .wb-arrow-link__arrow--arrow-down,
.wb-button:hover .wb-button__arrow.wb-button__arrow--down,
.wb-button:focus-visible .wb-button__arrow.wb-button__arrow--down {
  transform: translateY(2px);
}

.wb-arrow-link--sm {
  font-size: var(--wb-size-meta);
}

.wb-arrow-link--md {
  font-size: var(--wb-size-ui);
}

.wb-arrow-link--lg {
  font-size: var(--wb-size-ui);
}

@media (pointer: coarse) {
  .wb-arrow-link {
    min-height: var(--wb-target);
  }
}

/* Filled button: the only white-on-orange element. */
.wb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.35rem;
  border: 0;
  background-color: var(--wb-accent);
  color: var(--wb-accent-foreground) !important;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-ui);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background-color var(--wb-dur) var(--wb-ease),
    transform var(--wb-dur-fast) var(--wb-ease-press);
}

.wb-button:hover {
  background-color: var(--wb-accent-strong);
}

/* <input type="submit" class="wb-button"> (e.g. the comment form) must outrank
   the rule that gives every input the canvas colour. */
.wordbred input.wb-button {
  background-color: var(--wb-accent);
  border-radius: 0;
  cursor: pointer;
}

.wordbred input.wb-button:hover {
  background-color: var(--wb-accent-strong);
}

.wb-button:active {
  transform: scale(0.98);
}

.wb-button[aria-disabled="true"] {
  cursor: progress;
  background-color: var(--wb-accent-strong);
}

.wb-button__arrow {
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-button:hover .wb-button__arrow,
.wb-button:focus-visible .wb-button__arrow {
  transform: translate(2px, -2px);
}

.wb-button--block {
  width: 100%;
}

/* Labels */
.wb-index,
.wb-kicker,
.wb-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.75em;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-micro);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-index {
  flex-wrap: nowrap;
  align-self: start;
}

.wb-index__number {
  color: var(--wb-accent);
  font-size: 1.32em;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.wb-index__slash,
.wb-kicker__slash {
  color: var(--wb-muted);
  font-weight: 400;
}

.wb-kicker {
  column-gap: 0.7em;
}

.wb-kicker__category {
  color: var(--wb-accent);
  font-weight: 600;
}

.wb-kicker__category a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.wb-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--wb-space-4);
  row-gap: var(--wb-space-1);
  font-size: var(--wb-size-meta);
  line-height: 1.5;
}

.wb-byline a {
  text-decoration-line: underline;
  text-decoration-color: var(--wb-rule);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--wb-dur) var(--wb-ease);
}

.wb-byline a:hover {
  text-decoration-color: var(--wb-accent);
}

/* Linked headlines — every title that opens an article. At rest: clean type.
   On hover or keyboard focus the headline lifts a fraction of its size while an
   accent underline rises into place beneath the words, skipping descenders and
   following every line of a wrapped title. The whole story answers as one:
   hovering its image does the same. A press settles the lift.
   (.wordbred prefix: the base `.wordbred a { text-decoration: none }` must not
   switch the underline off.) */
.wordbred .wb-title-link {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.02em;
  text-decoration-skip-ink: auto;
  text-underline-offset: calc(var(--wb-title-rule-gap) * 3);
  transition:
    text-decoration-color var(--wb-dur-slow) var(--wb-ease-out),
    text-decoration-thickness var(--wb-dur-slow) var(--wb-ease-out),
    text-underline-offset var(--wb-dur-slow) var(--wb-ease-out);
}

:is(h2, h3):has(> .wb-title-link) {
  transition: transform var(--wb-dur-slow) var(--wb-ease-out);
}

.wb-title-link:focus-visible,
.wb-title-link:active {
  text-decoration-color: var(--wb-accent);
  text-decoration-thickness: var(--wb-title-rule);
  text-underline-offset: var(--wb-title-rule-gap);
}

:is(h2, h3):has(> .wb-title-link:focus-visible) {
  transform: translateY(var(--wb-title-lift));
}

@media (hover: hover) {
  .wb-title-link:hover,
  :is(.wb-feature, .wb-secondary, .wb-row):has(.wb-media:hover) .wb-title-link {
    text-decoration-color: var(--wb-accent);
    text-decoration-thickness: var(--wb-title-rule);
    text-underline-offset: var(--wb-title-rule-gap);
  }

  :is(h2, h3):has(> .wb-title-link:hover),
  :is(.wb-feature, .wb-secondary, .wb-row):has(.wb-media:hover) :is(h2, h3):has(> .wb-title-link) {
    transform: translateY(var(--wb-title-lift));
  }
}

/* Press: the headline settles back under the pointer, quickly. */
:is(h2, h3):has(> .wb-title-link:active) {
  transform: none;
  transition-duration: var(--wb-dur-fast);
  transition-timing-function: var(--wb-ease-press);
}

/* Margin note: a short editorial aside in the reading face, with pen strokes.
   One size everywhere; placements only position it. */
.wb-note {
  display: inline-block;
  color: var(--wb-muted);
  font-family: var(--wb-font-text);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
}

.wb-note__text {
  display: block;
}

/* One block per line of the aside, each balanced: in a narrow column, "The
   things / we make." rather than an orphaned "make.". */
.wb-note__line {
  display: block;
  text-wrap: balance;
}

.wb-note__stroke {
  display: block;
  width: 2.6em;
  height: auto;
  overflow: visible;
}

.wb-note__stroke--above {
  margin: 0 0 0.45em -0.2em;
}

.wb-note__stroke--below {
  margin: 0.4em 0 0 1em;
}

/* Media frames */
.wb-media {
  display: block;
  overflow: hidden;
  background-color: var(--wb-background);
}

.wb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wb-dur-slow) var(--wb-ease);
}

.wb-media:hover img,
:is(.wb-feature, .wb-secondary, .wb-row):has(.wb-title-link:hover) .wb-media img {
  transform: scale(1.02);
}

/* Typed text uses the reading face at 17px: under 16px, iOS Safari zooms the
   page on focus, and the interface face may not go above 15px. */
.wb-input {
  font-family: var(--wb-font-text);
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: var(--wb-hairline) solid var(--wb-muted);
  border-radius: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  appearance: none;
  transition: border-color var(--wb-dur) var(--wb-ease);
}

.wb-input:hover {
  border-color: var(--wb-foreground);
}

.wb-input:focus-visible {
  border-color: var(--wb-foreground);
  outline-offset: 0;
}

.wb-input::placeholder {
  color: var(--wb-muted);
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.5rem;
  background-color: var(--wb-muted);
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 3.5 9 9m0-9-9 9' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 3.5 9 9m0-9-9 9' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 6 · Wordmark — the supplied lettering, composed from its eight letters ----- */

.wb-wordmark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2058 / 331;
}

.wb-wordmark__glyph {
  position: absolute;
  display: block;
  background-image: var(--wb-sprite);
  background-repeat: no-repeat;
  transform-origin: 50% 85%;
  transition: transform 260ms var(--wb-ease-out);
  transition-delay: calc(var(--i) * 22ms);
}

.wb-wordmark__text {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  font-family: var(--wb-font-display);
}

/* Windows High Contrast drops background images: show the name as text. */
@media (forced-colors: active) {
  .wb-wordmark__glyph {
    display: none;
  }

  .wb-wordmark__text {
    position: static;
    opacity: 1;
    font-size: 2rem;
  }

  .wb-wordmark {
    aspect-ratio: auto;
  }
}

/* 7 · Header & navigation ---------------------------------------------------- */

.wb-header {
  padding-top: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
}

.wb-header__topline {
  font-size: var(--wb-size-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
}

.wb-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 14%) auto;
  align-items: center;
  column-gap: var(--wb-gap);
  padding-block: clamp(1.5rem, 0.8rem + 2.2vw, 2.9rem) clamp(1.25rem, 0.8rem + 1.5vw, 2.2rem);
}

.wb-masthead__logo {
  display: block;
  min-width: 0;
}

.wb-masthead__lockup {
  font-family: var(--wb-font-text);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding: 0.35em 0 0.35em clamp(1rem, 0.6rem + 0.8vw, 1.4rem);
  font-size: clamp(1rem, 0.75rem + 0.6vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.wb-masthead__note {
  justify-self: end;
  align-self: start;
  margin-top: -0.2rem;
  white-space: nowrap;
}

.wb-header[data-size="compact"] .wb-masthead {
  grid-template-columns: minmax(0, 23.75rem) auto;
  justify-content: start;
  padding-block: clamp(1rem, 0.7rem + 1vw, 1.5rem) clamp(1rem, 0.7rem + 1vw, 1.4rem);
}

.wb-header[data-size="compact"] .wb-masthead__lockup {
  font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.0625rem);
}

.wb-nav-wrap {
  border-top: var(--wb-hairline) solid var(--wb-foreground);
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
}

.wb-nav {
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
  min-height: 3.25rem;
  padding-inline: 0.125rem;
}

.wb-nav__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.25rem, 0.6rem + 2vw, 2.75rem);
}

.wb-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--wb-target);
  font-size: var(--wb-size-ui);
  letter-spacing: -0.005em;
}

.wb-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 1px;
  background-color: var(--wb-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-nav__links a:hover::after {
  transform: scaleX(1);
}

.wb-nav__links a[aria-current]::after {
  height: 2px;
  transform: scaleX(1);
}

.wb-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  min-height: var(--wb-target);
  padding: 0 0.125rem;
  border: 0;
  background-color: transparent;
  font-size: var(--wb-size-ui);
  transition: color var(--wb-dur) var(--wb-ease);
}

.wb-nav__search:hover {
  color: var(--wb-accent);
}

.wb-nav__search-icon {
  display: inline-flex;
  transition:
    transform var(--wb-dur) var(--wb-ease),
    opacity var(--wb-dur) var(--wb-ease);
}

.wb-nav__search-icon--close,
.wb-nav__search[aria-expanded="true"] .wb-nav__search-icon--open {
  display: none;
}

.wb-nav__search[aria-expanded="true"] .wb-nav__search-icon--close {
  display: inline-flex;
}

/* The search panel opens by animating its row from 0fr to 1fr. */
.wb-search-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--wb-dur-slow) var(--wb-ease-out),
    opacity var(--wb-dur-slow) var(--wb-ease);
}

.wb-search-panel[hidden] {
  display: none;
}

.wb-search-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.wb-search-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.wb-search-panel .wb-search-form {
  border-top: var(--wb-hairline) solid var(--wb-rule);
  padding-block: var(--wb-space-4) var(--wb-space-5);
}

.wb-search-form {
  display: grid;
  gap: var(--wb-space-2);
  max-width: 44rem;
}

.wb-search-form__field {
  position: relative;
  display: flex;
  gap: var(--wb-space-2);
}

/* Centred on the input itself (half its 3.25rem height), so it stays put when the
   button wraps underneath on phones. */
.wb-search-form__icon {
  position: absolute;
  left: 0.85rem;
  top: 1.625rem;
  transform: translateY(-50%);
  color: var(--wb-muted);
  pointer-events: none;
}

.wb-search-form__input {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  padding-left: 2.6rem;
}

.wb-search-form__submit {
  min-height: 3.25rem;
  min-width: 7.5rem;
}

.wb-search-form__hint {
  min-height: 1.5em;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-search-form__hint[data-tone="error"] {
  color: var(--wb-accent);
  font-weight: 500;
}

/* 8 · Footer ----------------------------------------------------------------- */

.wb-footer {
  margin-top: auto;
}

.wb-footer__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  row-gap: var(--wb-space-2);
  border-top: var(--wb-hairline) solid var(--wb-foreground);
  padding-block: var(--wb-space-4) var(--wb-space-3);
}

.wb-footer__logo {
  display: block;
  width: 8.5rem;
  flex-shrink: 0;
  /* A taller tap target than the 22px mark, without moving it. */
  padding-block: var(--wb-space-2);
  margin-block: calc(-1 * var(--wb-space-2));
  transition: opacity var(--wb-dur) var(--wb-ease);
}

.wb-footer__logo:hover {
  opacity: 0.78;
}

.wb-footer__links,
.wb-footer__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wb-footer__links li {
  display: inline-flex;
  align-items: center;
}

.wb-footer__slash {
  padding-inline: 0.7rem;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-footer a:not(.wb-footer__logo) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wb-target);
  font-size: var(--wb-size-meta);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--wb-dur) var(--wb-ease);
}

.wb-footer a:not(.wb-footer__logo):hover {
  text-decoration-color: var(--wb-accent);
}

.wb-footer__social {
  margin-left: auto;
  column-gap: var(--wb-space-4);
}

/* Short labels ("X") get a wider tap target; the text does not move, and
   neighbouring targets meet in the gap without overlapping. */
.wb-footer__social a {
  padding-inline: var(--wb-space-2);
  margin-inline: calc(-1 * var(--wb-space-2));
}

.wb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-3);
  padding-bottom: var(--wb-space-5);
  color: var(--wb-muted);
  font-size: var(--wb-size-micro);
}

.wb-footer__dash {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background-color: var(--wb-muted);
}

/* 9 · Bands & page intro ---------------------------------------------------- */

.wb-band {
  position: relative;
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
}

.wb-page-intro {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr) minmax(15rem, 20%);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
}

.wb-page-intro[data-aside="false"] {
  grid-template-columns: var(--wb-index) minmax(0, 1fr);
}

.wb-page-intro > .wb-index {
  padding-top: 0.6rem;
}

.wb-page-intro__copy {
  min-width: 0;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-page-intro__title {
  max-width: 22ch;
  text-wrap: balance;
}

/* "sans" is the template's historical name for the statement-sized title (the
   page-intro default); since 1.2.0 both styles are set in the display serif. */
.wb-page-intro__title[data-style="sans"] {
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-intro);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: var(--wb-track-display);
}

.wb-page-intro__title[data-style="serif"] {
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: var(--wb-track-display);
}

.wb-page-intro__lead {
  font-family: var(--wb-font-text);
  max-width: 38rem;
  margin-top: var(--wb-space-4);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.wb-page-intro__lead > * + * {
  margin-top: var(--wb-space-3);
}

.wb-page-intro__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--wb-space-4);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

/* 10 · Home ------------------------------------------------------------------ */

.wb-intro {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr) minmax(15rem, 20%);
  column-gap: var(--wb-gap);
  align-items: center;
  padding-block: clamp(1.5rem, 1rem + 1.2vw, 2rem) clamp(1.6rem, 1rem + 1.4vw, 2.2rem);
}

.wb-intro > .wb-index {
  padding-top: 0.6rem;
}

.wb-intro__copy {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-intro__title {
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-intro);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: var(--wb-track-display);
}

.wb-intro__title span {
  display: block;
}

.wb-intro__actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wb-space-4);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-edition {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) clamp(1.5rem, 1rem + 1.2vw, 2rem);
}

.wb-edition__index {
  min-width: 0;
}

.wb-edition__title {
  margin: 0.5rem 0 1.25rem;
  font-family: var(--wb-font-text);
  font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.wb-edition__link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: var(--wb-target);
  padding-block: 0.55rem;
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
  font-size: var(--wb-size-ui);
  letter-spacing: -0.01em;
  transition: color var(--wb-dur) var(--wb-ease);
}

.wb-edition__list li:last-child .wb-edition__link {
  border-bottom: 0;
}

.wb-edition__name {
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-edition__link:hover {
  color: var(--wb-accent);
}

.wb-edition__link:hover .wb-edition__name {
  transform: translateX(3px);
}

.wb-edition__number {
  color: var(--wb-accent);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Wraps inside the index column: at 22px the aside is wider than the column. */
.wb-edition__note {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* The lead story's hairline sits on the column line, like the intro above it. */
.wb-feature {
  min-width: 0;
  border-inline: var(--wb-hairline) solid var(--wb-rule);
  padding-inline: var(--wb-gap);
}

.wb-feature__title {
  margin: 0.65rem 0 0.9rem;
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-feature);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: var(--wb-track-display);
  text-wrap: balance;
}

.wb-feature__deck {
  margin: 0.75rem 0 1.1rem;
  font-family: var(--wb-font-text);
  font-size: var(--wb-size-deck);
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.wb-feature__figure {
  margin: 0;
}

.wb-media--feature {
  aspect-ratio: 484 / 366;
}

.wb-caption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-3);
  margin-top: 0.65rem;
}

.wb-caption {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
  line-height: 1.45;
}

.wb-edition__aside {
  min-width: 0;
}

.wb-secondary__figure {
  position: relative;
  margin: 0;
}

.wb-media--secondary {
  aspect-ratio: 298 / 287;
}


.wb-secondary .wb-kicker {
  margin-top: 1.1rem;
}

.wb-secondary__title {
  margin: 0.35rem 0 0.6rem;
  font-family: var(--wb-font-display);
  font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.5rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.wb-secondary__link {
  margin-top: 0.5rem;
}

.wb-poem {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-poem__title {
  margin: 0.3rem 0 0.6rem;
  font-family: var(--wb-font-display);
  font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.125rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.wb-poem__lines {
  margin-bottom: 0.6rem;
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.38;
}

.wb-poem__lines span {
  display: block;
}

.wb-further {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) clamp(1.5rem, 1rem + 1.2vw, 2rem);
}

.wb-further[data-placement="end"] {
  margin-top: var(--wb-space-8);
  border-top: var(--wb-hairline) solid var(--wb-foreground);
  border-bottom: 0;
}

.wb-further__label {
  padding-top: 0.15rem;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-micro);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-further__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-further__item {
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-inline: var(--wb-gap);
}

.wb-further__item:last-child {
  padding-right: 0;
}

.wb-further__title {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--wb-font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.wb-further__deck {
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  line-height: 1.42;
  text-wrap: pretty;
}

.wb-further__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--wb-space-4);
  margin-top: 0.85rem;
  color: var(--wb-muted);
  font-size: var(--wb-size-micro);
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-studio-band {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr) minmax(15rem, 20%);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.4rem, 1rem + 1vw, 1.9rem) clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}

.wb-studio-band > .wb-index {
  padding-top: 0.2rem;
}

.wb-studio-band__copy {
  min-width: 0;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-studio-band__title {
  margin: 0.4rem 0 0.7rem;
  font-family: var(--wb-font-display);
  font-size: clamp(2.125rem, 1.3rem + 2.3vw, 3.4rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.03;
  letter-spacing: var(--wb-track-display);
}

.wb-studio-band__lead {
  font-family: var(--wb-font-text);
  margin-bottom: 0.75rem;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.wb-services {
  max-width: 41rem;
  font-size: var(--wb-size-meta);
}

.wb-services__row {
  position: relative;
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  column-gap: var(--wb-space-4);
  padding-block: 0.3rem;
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-services__row:last-child {
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
}

.wb-services__row dd {
  color: var(--wb-muted);
}

.wb-services__row dt a {
  text-decoration-line: underline;
  text-decoration-color: var(--wb-rule);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}

.wb-services__row dt a:hover {
  color: var(--wb-accent);
  text-decoration-color: var(--wb-accent);
}

/* The whole row is the link's target (and hovering it lights the link). */
.wb-services__row dt a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wb-studio-band__commission {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--wb-space-6);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) 0 0 var(--wb-gap);
}

.wb-studio-band__note {
  margin-left: 0.5rem;
}

@media (max-width: 1199px) {
  .wb-studio-band__commission .wb-button {
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }
}

/* 11 · Listings ------------------------------------------------------------- */

.wb-listing__count {
  padding-top: var(--wb-space-4);
  color: var(--wb-muted);
  font-size: var(--wb-size-micro);
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-listing__more {
  padding-block: var(--wb-space-5) var(--wb-space-7);
}

.wb-row {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr) minmax(0, 0.42fr);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
}

.wb-row__number {
  padding-top: 0.15rem;
  color: var(--wb-accent);
  font-size: var(--wb-size-ui);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.wb-row__body {
  min-width: 0;
  max-width: calc(44rem + var(--wb-inset));
  padding-left: var(--wb-inset);
}

.wb-row__title {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--wb-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.625rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.wb-row__summary {
  font-family: var(--wb-font-text);
  margin-bottom: 0.85rem;
  color: var(--wb-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.wb-row__media {
  align-self: start;
  aspect-ratio: 4 / 3;
}

/* 12 · Filter & pagination ------------------------------------------------- */

.wb-filter {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr);
  column-gap: var(--wb-gap);
  align-items: center;
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
}

.wb-filter__label {
  font-size: var(--wb-size-micro);
  font-weight: 500;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-filter__options {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.1rem, 0.7rem + 1.2vw, 2.25rem);
  padding-left: var(--wb-inset);
}

.wb-filter__option {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 3.25rem;
  padding-top: 0.95rem;
  font-size: var(--wb-size-ui);
  transition: color var(--wb-dur) var(--wb-ease);
}

.wb-filter__option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--wb-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-filter__option:hover {
  color: var(--wb-accent);
}

.wb-filter__option[aria-current="page"] {
  font-weight: 500;
}

.wb-filter__option[aria-current="page"]::after {
  transform: scaleX(1);
}

.wb-filter__count {
  color: var(--wb-muted);
  font-size: var(--wb-size-micro);
  font-variant-numeric: tabular-nums;
}

.wb-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wb-space-4);
  padding-block: var(--wb-space-5) var(--wb-space-7);
}

.wb-pagination__step {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: var(--wb-target);
  min-height: var(--wb-target);
  font-size: var(--wb-size-ui);
}

/* On phones the label hides and the arrow alone stays on the page edge. */
.wb-pagination__step:last-child {
  justify-self: end;
  justify-content: flex-end;
}

.wb-pagination__step .wb-icon {
  color: var(--wb-accent);
  transition: transform var(--wb-dur) var(--wb-ease);
}

.wb-pagination__step[rel="prev"]:hover .wb-icon {
  transform: translateX(-2px);
}

.wb-pagination__step[rel="next"]:hover .wb-icon {
  transform: translateX(2px);
}

.wb-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1);
}

.wb-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wb-target);
  min-height: var(--wb-target);
  border-bottom: 2px solid transparent;
  font-size: var(--wb-size-ui);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--wb-dur) var(--wb-ease);
}

.wb-pagination__page:hover {
  border-bottom-color: var(--wb-rule);
}

.wb-pagination__page[aria-current="page"] {
  border-bottom-color: var(--wb-accent);
  font-weight: 500;
}

.wb-pagination__gap {
  color: var(--wb-muted);
}

/* 13 · Article -------------------------------------------------------------- */

.wb-article {
  --wb-article-cols: var(--wb-index) minmax(0, calc(var(--wb-measure) + var(--wb-inset))) minmax(0, 1fr);
}

.wb-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 2px;
  background-color: var(--wb-accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .wb-reading-progress {
    animation: wb-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes wb-progress {
  to {
    transform: scaleX(1);
  }
}

.wb-article__header {
  display: grid;
  grid-template-columns: var(--wb-article-cols);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
}

.wb-crumbs {
  padding-top: 0.2rem;
}

.wb-crumbs ol {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-crumbs li {
  display: flex;
  align-items: center;
}

.wb-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-size: var(--wb-size-meta);
  text-decoration-line: underline;
  text-decoration-color: var(--wb-rule);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--wb-dur) var(--wb-ease);
}

.wb-crumbs a:hover {
  text-decoration-color: var(--wb-accent);
}

.wb-article__headline {
  grid-column: 2 / -1;
  min-width: 0;
  max-width: 54rem;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-article__title {
  margin: 0.6rem 0 0.9rem;
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: var(--wb-track-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.wb-article__deck {
  max-width: 40rem;
  margin-bottom: var(--wb-space-2);
  font-family: var(--wb-font-text);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.wb-article__meta {
  margin-top: var(--wb-space-4);
  padding-top: var(--wb-space-3);
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-article__figure {
  display: grid;
  grid-template-columns: var(--wb-article-cols);
  column-gap: var(--wb-gap);
  margin: 0 0 clamp(2rem, 1.4rem + 1.6vw, 3rem);
}

/* Lead image: starts on the content line under the headline and is sized by its
   own shape — as wide as the headline allows, never wider than the file, never
   taller than --wb-media-h (single.php sets --wb-media-w and --wb-media-ratio). */
.wb-article__media {
  grid-column: 2 / -1;
  max-width: min(calc(54rem - var(--wb-inset)), var(--wb-media-w, 100%), calc(var(--wb-media-h) * var(--wb-media-ratio, 1.5)));
  margin-left: var(--wb-inset);
  overflow: hidden;
  background-color: var(--wb-background);
}

.wb-article__media img {
  width: 100%;
  height: auto;
}

.wb-article__caption {
  grid-column: 2 / -1;
  margin-top: var(--wb-space-2);
  margin-left: var(--wb-inset);
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-article__body {
  display: grid;
  grid-template-columns: var(--wb-article-cols);
  column-gap: var(--wb-gap);
}

.wb-article__body > * {
  grid-column: 2;
  min-width: 0;
  margin-left: var(--wb-inset);
}

.wb-article__footer {
  display: grid;
  gap: var(--wb-space-4);
  margin-top: var(--wb-space-7);
  padding-top: var(--wb-space-4);
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-article__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-3);
  font-size: var(--wb-size-meta);
}

.wb-article__author > span a {
  text-decoration: underline;
  text-decoration-color: var(--wb-rule);
  text-underline-offset: 0.25em;
}

.wb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-2);
}

.wb-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: var(--wb-hairline) solid var(--wb-rule);
  font-size: var(--wb-size-meta);
  transition: border-color var(--wb-dur) var(--wb-ease);
}

.wb-tags a:hover {
  border-color: var(--wb-accent);
}

/* 14 · Entry content — Gutenberg blocks set in the reading voice ------------ */

.wb-entry {
  font-family: var(--wb-font-text);
  font-size: var(--wb-size-body);
  font-optical-sizing: auto;
  line-height: 1.7;
  letter-spacing: -0.003em;
  overflow-wrap: break-word;
  hanging-punctuation: first;
}

.wb-entry > * {
  margin-block: 0;
}

.wb-entry > * + * {
  margin-top: 1.05em;
}

.wb-entry :where(p) {
  text-wrap: pretty;
}

.wb-entry :where(h2, h3, h4, h5, h6) {
  margin-top: 1.9em;
  margin-bottom: 0.2em;
  font-family: var(--wb-font-text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.wb-entry :where(h2) {
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
}

.wb-entry :where(h3, h4, h5, h6) {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
}

.wb-entry a:not(.wb-arrow-link):not(.wb-button) {
  text-decoration-line: underline;
  text-decoration-color: var(--wb-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--wb-dur) var(--wb-ease);
}

.wb-entry a:not(.wb-arrow-link):not(.wb-button):hover {
  text-decoration-thickness: 2px;
}

.wb-entry :where(ul, ol) {
  padding-left: 1.4em;
}

.wb-entry :where(li) + :where(li) {
  margin-top: 0.4em;
}

.wb-entry :where(blockquote, .wp-block-quote) {
  margin-inline: 0;
  padding-left: var(--wb-space-5);
  border-left: 2px solid var(--wb-accent);
  font-size: 1.1em;
  line-height: 1.5;
}

.wb-entry :where(.wp-block-pullquote) {
  margin-inline: 0;
  padding: var(--wb-space-5) 0;
  border-block: var(--wb-hairline) solid var(--wb-rule);
  font-size: 1.25em;
  line-height: 1.4;
  text-align: left;
}

.wb-entry :where(cite, figcaption, .wp-element-caption) {
  display: block;
  margin-top: var(--wb-space-2);
  color: var(--wb-muted);
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-meta);
  font-style: normal;
  line-height: 1.5;
}

.wb-entry :where(figure, .wp-block-image) {
  margin-inline: 0;
}

.wb-entry :where(img) {
  height: auto;
}

.wb-entry :where(.aligncenter) {
  margin-inline: auto;
}

.wb-entry :where(.aligncenter) img {
  margin-inline: auto;
}

.wb-entry :where(hr, .wp-block-separator) {
  width: 4rem;
  margin: 2.2em 0;
  border: 0;
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-entry :where(sup) {
  font-size: 0.65em;
  line-height: 0;
}

.wb-entry :where(mark) {
  font-weight: inherit;
}

.wb-entry :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-ui);
}

.wb-entry :where(th, td) {
  padding: 0.5rem;
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
  text-align: left;
}

.wb-entry :where(iframe, video, embed) {
  max-width: 100%;
}

/* Colour and size presets inside posts follow the reading system. */
.wb-entry [class*="has-"][class*="-background-color"] {
  background-color: transparent !important;
}

.wb-entry .has-text-color:not(.has-palette-color-2-color) {
  color: var(--wb-foreground) !important;
}

.wb-entry :where(.has-medium-font-size, .has-large-font-size, .has-small-font-size) {
  font-size: inherit !important;
}

/* The Post Grid block's heading inside posts: quiet it to a label. */
.wb-entry :where(.rttpg-block-postgrid) {
  margin-bottom: var(--wb-space-5);
  font-family: var(--wb-font-ui);
}

/* The plugin prints a per-block colour after this stylesheet (an orange that
   fails contrast on Cloud Dancer); labels are muted ink everywhere else. */
.wb-entry :where(.rttpg-block-postgrid) .tpg-widget-heading,
.wb-entry :where(.rttpg-block-postgrid) .tpg-widget-heading a {
  color: var(--wb-muted) !important;
}

.wb-entry :where(.rttpg-block-postgrid) .tpg-widget-heading {
  margin: 0;
  font-size: var(--wb-size-micro);
  font-weight: 500;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-entry :where(.rttpg-block-postgrid) .tpg-widget-heading-line {
  display: none;
}

/* Poems: unhurried leading, line breaks respected */
.wb-entry--poem {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.6;
}

.wb-entry--poem p {
  white-space: normal;
}

.wb-page-links {
  display: flex;
  gap: var(--wb-space-3);
  margin-top: var(--wb-space-6);
  font-family: var(--wb-font-ui);
  font-size: var(--wb-size-ui);
}

/* 15 · Comments ------------------------------------------------------------ */

.wb-comments {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, calc(var(--wb-measure) + var(--wb-inset)));
  column-gap: var(--wb-gap);
  margin-top: var(--wb-space-7);
  padding-top: var(--wb-space-5);
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-comments__body {
  min-width: 0;
  margin-left: var(--wb-inset);
}

.wb-comments__list,
.wb-comments__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-comments__list .children {
  margin-top: var(--wb-space-4);
  padding-left: var(--wb-space-5);
  border-left: var(--wb-hairline) solid var(--wb-rule);
}

.wb-comments__list .comment {
  padding-block: var(--wb-space-4);
}

.wb-comments__list .comment + .comment {
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-comments__list .comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
  font-size: var(--wb-size-meta);
}

.wb-comments__list .comment-author .says {
  display: none;
}

.wb-comments__list .comment-metadata a {
  color: var(--wb-muted);
}

.wb-comments__list .comment-content {
  margin-top: var(--wb-space-2);
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wb-comments__list .reply a {
  font-size: var(--wb-size-meta);
  text-decoration: underline;
  text-decoration-color: var(--wb-accent);
  text-underline-offset: 0.25em;
}

.wb-comments__reply {
  margin: var(--wb-space-6) 0 var(--wb-space-3);
  font-family: var(--wb-font-text);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* With no responses yet, the form's title starts level with the section label,
   like the first line of every other section. */
.wb-comments__body > .comment-respond:first-child .wb-comments__reply {
  margin-top: 0;
}

.wb-comment-form {
  display: grid;
  gap: var(--wb-space-4);
}

.wb-comment-form p {
  display: grid;
  gap: var(--wb-space-2);
}

.wb-comment-form label {
  font-size: var(--wb-size-micro);
  font-weight: 500;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  line-height: 1.45;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: var(--wb-hairline) solid var(--wb-muted);
  border-radius: 0;
}

/* The submit button sizes to its label, like every other button. */
.wb-comment-form .form-submit {
  justify-items: start;
}

/* The checkbox sits inside its label: the whole sentence is the target. */
.wb-comment-form .comment-form-cookies-consent label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding-block: var(--wb-space-1);
  font-size: var(--wb-size-meta);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  cursor: pointer;
}

.wb-comment-form input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.1em 0 0;
  accent-color: var(--wb-accent);
}

.wb-comments__closed {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

/* 16 · Studio & form -------------------------------------------------------- */

/* Studio page: full-width bands on the index grid — margin label on the left,
   content after the column hairline, like the page intro above them. */
.wb-studio [id] {
  scroll-margin-top: var(--wb-space-5);
}

.wb-studio-band-row {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
}

.wb-studio-band-row > .wb-index {
  padding-top: 0.6rem;
}

.wb-studio-band-row__main {
  min-width: 0;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

/* About reuses these bands; its prose keeps the article reading measure. */
.wb-about .wb-studio-band-row__main > .wb-entry {
  max-width: var(--wb-measure);
}

.wb-studio__heading,
.wb-enquiry__title {
  font-family: var(--wb-font-display);
  font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: var(--wb-track-display);
  text-wrap: balance;
}

.wb-studio__intro,
.wb-enquiry__lead {
  font-family: var(--wb-font-text);
  max-width: 34rem;
  margin: var(--wb-space-3) 0 var(--wb-space-5);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.wb-page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-4) var(--wb-space-6);
  margin-top: var(--wb-space-5);
}

/* Three compact previews: one line each of who it is for and what it does. */
.wb-offer-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--wb-space-6);
}

.wb-offer-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wb-space-2);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-inline: var(--wb-gap);
}

.wb-offer-preview:first-child {
  border-left: 0;
  padding-left: 0;
}

.wb-offer-preview:last-child {
  padding-right: 0;
}

.wb-offer-preview__number,
.wb-step__number {
  color: var(--wb-accent);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.wb-offer-preview__name {
  font-family: var(--wb-font-display);
  font-size: clamp(1.5rem, 1.15rem + 0.8vw, 1.875rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.wb-offer-preview__buyer {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-offer-preview__outcome {
  margin-bottom: var(--wb-space-2);
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.wb-offer-preview .wb-arrow-link {
  margin-top: auto;
}

/* An offer in full: one reading column, top to bottom. */
.wb-offer > .wb-index {
  align-self: start;
}

.wb-offer__outcome {
  max-width: 24ch;
  font-family: var(--wb-font-display);
  font-size: clamp(2rem, 1.25rem + 2.1vw, 3.25rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: var(--wb-track-display);
  text-wrap: balance;
}

.wb-offer__description,
.wb-offer__block {
  max-width: var(--wb-measure);
}

.wb-offer__description {
  margin-top: var(--wb-space-5);
  font-family: var(--wb-font-text);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.wb-offer__block {
  font-family: var(--wb-font-text);
  display: grid;
  gap: var(--wb-space-2);
  margin-top: var(--wb-space-6);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.wb-offer__label {
  font-size: var(--wb-size-micro);
  font-weight: 500;
  letter-spacing: var(--wb-track-label);
  text-transform: uppercase;
}

.wb-offer__scope li {
  padding-block: 0.55rem;
  border-top: var(--wb-hairline) solid var(--wb-rule);
  font-family: var(--wb-font-text);
}

.wb-offer__scope li:last-child {
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
}

.wb-offer__note {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-offer__cta {
  margin-top: var(--wb-space-6);
}

/* Editorial evidence: text-led, clearly labelled as Journal work. */
.wb-journal-work__list,
.wb-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-journal-work__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wb-journal-work__item,
.wb-step {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-2);
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-inline: var(--wb-gap);
}

.wb-journal-work__item:first-child,
.wb-step:first-child {
  border-left: 0;
  padding-left: 0;
}

.wb-journal-work__title {
  font-family: var(--wb-font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.wb-steps {
  margin-top: var(--wb-space-6);
}

.wb-step__title {
  font-family: var(--wb-font-text);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.wb-step__text {
  font-family: var(--wb-font-text);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Questions, all visible: nothing essential behind a toggle. */
.wb-faqs-section {
  border-bottom: 0;
}

.wb-faqs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--wb-gap);
}

.wb-faq {
  display: grid;
  gap: var(--wb-space-2);
  align-content: start;
  padding-block: var(--wb-space-4) var(--wb-space-5);
  border-top: var(--wb-hairline) solid var(--wb-rule);
}

.wb-faq:nth-child(-n + 2) {
  border-top: 0;
  padding-top: 0;
}

.wb-faq__question {
  font-family: var(--wb-font-text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.wb-faq__answer {
  font-family: var(--wb-font-text);
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Links in answers (About's contact list) look like the home page's service links. */
.wb-faq__answer a {
  text-decoration-line: underline;
  text-decoration-color: var(--wb-rule);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}

.wb-faq__answer a:hover {
  color: var(--wb-accent);
  text-decoration-color: var(--wb-accent);
}

.wb-enquiry {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 42rem) minmax(0, 1fr);
  column-gap: var(--wb-gap);
  padding-block: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem) clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  border-bottom: var(--wb-hairline) solid var(--wb-foreground);
  scroll-margin-top: var(--wb-space-5);
}

.wb-enquiry__title:focus {
  outline: none;
}

.wb-enquiry__title:focus-visible {
  outline: 2px solid var(--wb-accent);
  outline-offset: 6px;
}

.wb-enquiry > .wb-index {
  padding-top: 0.6rem;
}

.wb-enquiry__main {
  min-width: 0;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-form {
  display: grid;
  gap: var(--wb-space-5);
}

.wb-form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wb-space-5);
}

.wb-field {
  display: grid;
  gap: var(--wb-space-2);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wb-field legend {
  padding: 0;
}

.wb-field__hint,
.wb-field__count {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-field__count {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.wb-field__error {
  color: var(--wb-accent);
  font-size: var(--wb-size-meta);
  font-weight: 500;
  line-height: 1.4;
}

.wb-field[data-invalid] .wb-input {
  border-color: var(--wb-accent);
  border-left-width: 3px;
}

.wb-input--area {
  min-height: 11rem;
  resize: vertical;
  font-family: var(--wb-font-text);
  font-size: 1.125rem;
  line-height: 1.6;
}

.wb-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-2);
}

.wb-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--wb-target);
  padding: 0 1rem 0 0.8rem;
  border: var(--wb-hairline) solid var(--wb-rule);
  font-size: var(--wb-size-ui);
  cursor: pointer;
  transition:
    border-color var(--wb-dur) var(--wb-ease),
    transform var(--wb-dur-fast) var(--wb-ease-press);
}

.wb-choice:hover {
  border-color: var(--wb-foreground);
}

.wb-choice:active {
  transform: scale(0.98);
}

.wb-choice:has(.wb-choice__input:checked) {
  border-color: var(--wb-accent);
  outline: 1px solid var(--wb-accent);
  outline-offset: -2px;
}

.wb-choice:has(.wb-choice__input:focus-visible) {
  outline: 2px solid var(--wb-accent);
  outline-offset: 3px;
}

.wb-field[data-invalid] .wb-choice {
  border-color: var(--wb-accent);
}

.wb-choice__input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--wb-accent);
}

.wb-choice__input:focus-visible {
  outline: none;
}

.wb-form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wb-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-3) var(--wb-space-5);
}

.wb-form__note {
  color: var(--wb-muted);
  font-size: var(--wb-size-meta);
}

.wb-form__summary,
.wb-form__status {
  display: grid;
  gap: var(--wb-space-2);
  padding: var(--wb-space-4) 0 var(--wb-space-4) var(--wb-space-5);
  border-left: 3px solid var(--wb-accent);
  font-size: var(--wb-size-ui);
  line-height: 1.55;
}

.wb-form__summary[hidden] {
  display: none;
}

.wb-form__summary:focus-visible,
.wb-form__status:focus-visible {
  outline-offset: 4px;
}

.wb-form__summary-title {
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  font-weight: 500;
}

.wb-form__summary-list {
  display: grid;
  gap: var(--wb-space-1);
}

.wb-form__summary-list a {
  color: var(--wb-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wb-form__status[data-status="sent"] {
  border-left-color: var(--wb-foreground);
}

.wb-form__status-title {
  font-family: var(--wb-font-text);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* 17 · Search, empty, 404 --------------------------------------------------- */

.wb-search-page .wb-search-form {
  margin-left: var(--wb-content-start);
  padding-block: var(--wb-space-6) var(--wb-space-5);
}

.wb-search-results {
  padding-bottom: var(--wb-space-7);
}

.wb-search-results__status {
  padding-block: var(--wb-space-3);
  padding-left: var(--wb-content-start);
  border-top: var(--wb-hairline) solid var(--wb-foreground);
  border-bottom: var(--wb-hairline) solid var(--wb-rule);
  font-size: var(--wb-size-ui);
}

.wb-search-results__status strong {
  font-weight: 500;
}

.wb-empty {
  font-family: var(--wb-font-text);
  display: grid;
  gap: var(--wb-space-4);
  justify-items: start;
  max-width: 44rem;
  margin-left: var(--wb-content-start);
  padding-block: var(--wb-space-6) var(--wb-space-8);
  font-size: 1rem;
  line-height: 1.6;
}

.wb-empty__title {
  font-family: var(--wb-font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.wb-empty__sections {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--wb-space-6);
  row-gap: var(--wb-space-2);
}

.wb-status {
  display: grid;
  grid-template-columns: var(--wb-index) minmax(0, 1fr) minmax(10rem, 20%);
  column-gap: var(--wb-gap);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) clamp(3rem, 2rem + 3vw, 6rem);
}

.wb-status > .wb-index {
  padding-top: 0.6rem;
}

.wb-status__copy {
  display: grid;
  gap: var(--wb-space-4);
  justify-items: start;
  border-left: var(--wb-hairline) solid var(--wb-rule);
  padding-left: var(--wb-gap);
}

.wb-status__title {
  max-width: 18ch;
  font-family: var(--wb-font-display);
  font-size: var(--wb-size-display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: var(--wb-track-display);
  text-wrap: balance;
}

.wb-status__text {
  font-family: var(--wb-font-text);
  max-width: 34rem;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);
  line-height: 1.5;
}

.wb-status__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--wb-space-6);
  row-gap: var(--wb-space-2);
  margin-top: var(--wb-space-2);
}

.wb-status__note {
  align-self: center;
}

/* 18 · Pages / Elementor ---------------------------------------------------- */

.wb-page {
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 3rem) var(--wb-space-8);
}

.wb-page .wb-entry {
  margin-left: var(--wb-content-start);
}

.wb-page .wb-entry:not(.wb-entry--builder) {
  max-width: var(--wb-measure);
}

/* Elementor's kit defines its globals on .elementor-kit-N, which outranks :root,
   and Blocksy's palette bridge (--e-global-color-blocksy_palette_N) lived in
   Blocksy's own CSS, which this theme no longer loads. Restate both here. */
body.wordbred[class*="elementor-kit-"] {
  --e-global-color-primary: var(--wb-foreground);
  --e-global-color-secondary: var(--wb-muted);
  --e-global-color-text: var(--wb-foreground);
  --e-global-color-accent: var(--wb-accent);
  --e-global-color-blocksy_palette_1: var(--wb-foreground);
  --e-global-color-blocksy_palette_2: var(--wb-accent);
  --e-global-color-blocksy_palette_3: var(--wb-foreground);
  --e-global-color-blocksy_palette_4: var(--wb-foreground);
  --e-global-color-blocksy_palette_5: var(--wb-rule);
  --e-global-color-blocksy_palette_6: var(--wb-background);
  --e-global-color-blocksy_palette_7: var(--wb-background);
  --e-global-color-blocksy_palette_8: var(--wb-background);
  --e-global-typography-primary-font-family: var(--wb-font-display);
  --e-global-typography-secondary-font-family: var(--wb-font-text);
  --e-global-typography-text-font-family: var(--wb-font-text);
  --e-global-typography-accent-font-family: var(--wb-font-ui);
}

/* Inline highlight chips from the old palette (e.g. light text on dark navy)
   become the design's accent underline instead of a dark panel. */
.wb-entry :is(span, mark, strong, em, a, code)[style*="background"] {
  background: transparent !important;
  color: inherit !important;
  text-decoration-line: underline;
  text-decoration-color: var(--wb-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Elementor text blocks read in the journal's voice: upright, regular weight,
   ragged right, at a readable measure (Elementor's per-element CSS needs !important). */
body.wordbred .wb-entry--builder .elementor-widget-text-editor {
  max-width: var(--wb-measure) !important;
}

body.wordbred .wb-entry--builder .elementor-widget-text-editor :is(p, li) {
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.65 !important;
}

/* Builder pages keep their structure; colours, type and surfaces follow the system. */
.wb-entry--builder {
  font-size: 1.125rem;
}

.wb-entry--builder :where(.elementor-section, .elementor-container, .e-con, .elementor-widget-wrap, .elementor-column) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Top-level Elementor boxes are centred and padded on their own grid; pin them to
   the content line instead so builder text aligns with the page title above it. */
.wb-entry--builder > .elementor > :is(.e-con, .elementor-section) {
  padding-inline: 0 !important;
}

.wb-entry--builder > .elementor > .e-con > .e-con-inner,
.wb-entry--builder > .elementor > .elementor-section > .elementor-container {
  max-width: none !important;
  margin-inline: 0 !important;
}

.wb-entry--builder .elementor-widget-text-editor > .elementor-widget-container {
  padding-inline: 0 !important;
}

.wb-entry--builder :where(.elementor-heading-title) {
  font-family: var(--wb-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  color: var(--wb-foreground) !important;
}

.wb-entry--builder :where(.elementor-widget-text-editor) {
  max-width: var(--wb-measure);
}

.wb-entry :where(p + p) {
  margin-top: 1.05em;
}

.wb-entry--builder :where(.elementor-widget-text-editor, .elementor-widget-text-editor p) {
  font-family: var(--wb-font-text) !important;
  color: var(--wb-foreground) !important;
}

.wb-entry--builder :where(.elementor-button) {
  border-radius: 0 !important;
  background-color: var(--wb-accent) !important;
  color: var(--wb-accent-foreground) !important;
  font-family: var(--wb-font-ui) !important;
  font-size: var(--wb-size-ui) !important; /* Elementor's lg/xl buttons run to 20px */
}

.wb-entry--builder :where(img) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 19 · Responsive ----------------------------------------------------------- */

@media (max-width: 899px) {
  :root {
    --wb-inset: 0px;
    --wb-content-start: 0px;
  }

  .wb-masthead {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wb-masthead__note {
    display: none;
  }

  .wb-masthead__lockup {
    font-size: 1rem;
  }

  .wb-intro,
  .wb-studio-band,
  .wb-page-intro {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 32%);
    row-gap: var(--wb-space-4);
  }

  .wb-page-intro[data-aside="false"] {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.wb-intro, .wb-studio-band, .wb-page-intro) > .wb-index {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .wb-intro__copy,
  .wb-studio-band__copy,
  .wb-page-intro__copy {
    border-left: 0;
    padding-left: 0;
  }

  .wb-edition {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    row-gap: var(--wb-space-5);
  }

  .wb-edition__index {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--wb-space-6);
    border-right: 0;
    border-bottom: var(--wb-hairline) solid var(--wb-rule);
    padding: 0 0 var(--wb-space-2);
  }

  .wb-edition__title {
    margin: 0;
    font-size: 1.0625rem;
  }

  .wb-edition__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--wb-space-5);
  }

  .wb-edition__link {
    gap: 0.5rem;
    padding-block: 0;
    border-bottom: 0;
    font-size: var(--wb-size-ui);
  }

  .wb-edition__note {
    display: none;
  }

  .wb-feature {
    border-left: 0;
    padding-left: 0;
  }

  .wb-further,
  .wb-filter,
  .wb-studio-band-row,
  .wb-enquiry,
  .wb-comments,
  .wb-status {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--wb-space-4);
  }

  .wb-filter__label {
    display: none;
  }

  .wb-further__item:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .wb-studio-band__commission {
    padding-top: 0;
  }

  .wb-row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 0.5fr);
  }

  .wb-article {
    --wb-article-cols: 0 minmax(0, 1fr) 0;
  }

  .wb-article__header,
  .wb-article__figure,
  .wb-article__body {
    column-gap: 0;
  }

  .wb-crumbs {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: var(--wb-space-3);
  }

  .wb-crumbs ol {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }

  .wb-article__headline {
    grid-column: 2;
    border-left: 0;
    padding-left: 0;
  }

  .wb-article__media,
  .wb-article__caption {
    grid-column: 2;
  }

  .wb-offer-previews,
  .wb-journal-work__list,
  .wb-steps,
  .wb-faqs {
    grid-template-columns: minmax(0, 1fr);
  }

  .wb-offer-preview,
  .wb-offer-preview:last-child,
  .wb-journal-work__item,
  .wb-step {
    border-left: 0;
    padding: var(--wb-space-5) 0;
    border-top: var(--wb-hairline) solid var(--wb-rule);
  }

  .wb-offer-preview:first-child,
  .wb-journal-work__item:first-child,
  .wb-step:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .wb-faq:nth-child(2) {
    border-top: var(--wb-hairline) solid var(--wb-rule);
    padding-top: var(--wb-space-4);
  }

  .wb-offer-previews,
  .wb-steps {
    margin-top: var(--wb-space-5);
  }

  .wb-studio-band-row__main,
  .wb-enquiry__main,
  .wb-status__copy {
    border-left: 0;
    padding-left: 0;
  }

  .wb-status__note {
    display: none;
  }

  .wb-page .wb-entry:not(.wb-entry--builder) {
    margin-left: 0;
  }
}

@media (max-width: 599px) {
  .wb-masthead,
  .wb-header[data-size="compact"] .wb-masthead {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--wb-space-3);
    padding-block: var(--wb-space-5) var(--wb-space-4);
  }

  .wb-header[data-size="compact"] .wb-masthead__logo {
    max-width: 16rem;
  }

  .wb-masthead__lockup,
  .wb-header[data-size="compact"] .wb-masthead__lockup {
    border-left: 0;
    padding: 0;
    color: var(--wb-muted);
    font-size: var(--wb-size-meta);
  }

  .wb-masthead__break {
    display: none;
  }

  .wb-header__topline {
    letter-spacing: 0.14em;
  }

  .wb-nav__links {
    column-gap: 1.25rem;
  }

  .wb-nav__links a,
  .wb-nav__search {
    font-size: 0.875rem;
  }

  .wb-intro,
  .wb-studio-band,
  .wb-edition,
  .wb-page-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .wb-intro__title {
    letter-spacing: -0.04em;
  }

  .wb-intro__actions,
  .wb-page-intro__aside {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: var(--wb-space-5);
    row-gap: var(--wb-space-2);
    border-left: 0;
    padding-left: 0;
  }

  .wb-edition__index,
  .wb-edition__list {
    column-gap: var(--wb-space-4);
  }

  .wb-feature {
    border-right: 0;
    padding-right: 0;
  }

  .wb-feature__title {
    letter-spacing: -0.04em;
  }

  .wb-edition__aside {
    border-top: var(--wb-hairline) solid var(--wb-rule);
    padding-top: var(--wb-space-5);
  }

  .wb-further__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .wb-further__item,
  .wb-further__item:first-child {
    border-left: 0;
    padding: var(--wb-space-4) 0;
    border-top: var(--wb-hairline) solid var(--wb-rule);
  }

  .wb-further__item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .wb-studio-band__break {
    display: none;
  }

  .wb-studio-band__commission {
    border-left: 0;
    padding-left: 0;
  }

  .wb-studio-band__note {
    display: none;
  }

  .wb-studio-band__commission .wb-button {
    width: auto;
  }

  /* One column at full width; the number shares the kicker's line instead of
     holding a column of its own that squeezes every title. */
  .wb-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--wb-space-4);
  }

  .wb-row__media {
    grid-row: 1;
  }

  .wb-row__number,
  .wb-row__body {
    grid-column: 1;
    grid-row: 2;
  }

  .wb-row[data-has-image="false"] :is(.wb-row__number, .wb-row__body) {
    grid-row: 1;
  }

  .wb-row__number {
    align-self: start;
    padding-top: 0;
    font-size: var(--wb-size-ui);
    line-height: 1.1rem;
  }

  .wb-row__body > .wb-kicker:first-child {
    min-height: 1.1rem;
    padding-left: 2.25rem;
  }

  .wb-row__body > .wb-row__title:first-child {
    text-indent: 2.25rem;
  }

  :where(h1, h2, h3) {
    hyphens: auto;
  }

  .wb-form__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .wb-search-form__field {
    flex-wrap: wrap;
  }

  .wb-search-form__input {
    flex-basis: 100%;
  }

  .wb-search-form__submit {
    flex: 1;
  }

  .wb-pagination__step span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wb-footer__social {
    margin-left: 0;
  }
}

@media (max-width: 359px) {
  .wb-nav__links {
    column-gap: 1rem;
  }
}

/* 20 · Motion — one signature moment plus quiet micro-interactions ---------- */

/* The wordmark writes itself in, letter by letter, once per session. */
@keyframes wb-glyph-in {
  from {
    opacity: 0;
    transform: translateY(22%) rotate(-2deg);
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes wb-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wb-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes wb-rule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.wb-entrance .wb-wordmark__glyph {
  animation: wb-glyph-in 820ms var(--wb-ease-out) backwards;
  animation-delay: calc(120ms + var(--i) * 70ms);
}

.wb-entrance .wb-masthead__lockup,
.wb-entrance .wb-header__topline {
  animation: wb-fade-up 600ms var(--wb-ease-out) backwards;
  animation-delay: 620ms;
}

.wb-entrance .wb-masthead__note {
  animation: wb-fade-up 600ms var(--wb-ease-out) backwards;
  animation-delay: 820ms;
}

/* Pen strokes and the photo arrow draw themselves (pathLength="1"). */
.wb-note__stroke path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.wb-entrance .wb-masthead__note .wb-note__stroke path {
  stroke-dashoffset: 1;
  animation: wb-draw 520ms var(--wb-ease-out) 1150ms forwards;
}

/* Band rules and pen strokes below the fold draw once as they come into
   view. Script arms only elements that start off-screen, so nothing visible
   ever disappears; without script everything is simply drawn. */
[data-draw].is-pending,
[data-draw].is-revealed {
  border-bottom-color: transparent;
}

[data-draw].is-pending::after,
[data-draw].is-revealed::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background-color: var(--wb-foreground);
  transform: scaleX(0);
  transform-origin: left;
}

[data-draw].is-revealed::after {
  animation: wb-rule 900ms var(--wb-ease-out) forwards;
}

.is-pending .wb-note__stroke path {
  stroke-dashoffset: 1;
}

.is-revealed .wb-note__stroke path {
  stroke-dashoffset: 1;
  animation: wb-draw 620ms var(--wb-ease-out) 160ms forwards;
}

/* Hover: the letters lift in a small wave. Without script, a CSS lift; with
   script (.is-wave), wordbred.js moves each letter on a bell curve that follows
   the pointer, so the transitions here step aside. */
@media (hover: hover) {
  .wb-masthead__logo:hover .wb-wordmark:not(.is-wave) .wb-wordmark__glyph,
  .wb-masthead__logo:focus-visible .wb-wordmark:not(.is-wave) .wb-wordmark__glyph {
    transform: translateY(-4%);
  }

  .wb-wordmark.is-wave .wb-wordmark__glyph {
    transition: none;
    will-change: transform;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(h2, h3):has(> .wb-title-link) {
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .wb-reading-progress {
    display: none;
  }
}

@media print {
  .wb-header .wb-nav-wrap,
  .wb-search-panel,
  .wb-footer,
  .wb-reading-progress,
  .wb-comments form {
    display: none !important;
  }
}