/*
Theme Name:   Breath and Words
Description:  Child theme for Breath and Words. Brand tokens, typography and article styles.
Author:       Neil Milligan
Template:     flatsome
Version:      1.1.0
*/

/* ==========================================================================
   1. TOKENS
   Palette locked on the Brand Spec tab. Contrast checked 11 August 2026.
   --bw-orange is the brand colour: logo, headings, large text, accents.
   --bw-orange-text is for small text and links, because the brand orange
   only reaches 4.27:1 on the off-white and AA body text needs 4.5:1.
   ========================================================================== */

:root {
  --bw-ink:          #1F2328;
  --bw-orange:       #C0562B;
  --bw-orange-text:  #B7532A;
  --bw-paper:        #FAF7F2;
  --bw-grey:         #6B6F73;
  --bw-rule:         #E4DDD3;

  --bw-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --bw-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --bw-measure: 68ch;

  /* Flatsome overrides */
  --primary-color:        var(--bw-orange);
  --fs-color-primary:     var(--bw-orange);
  --fs-color-secondary:   var(--bw-ink);
  --fs-color-base:        var(--bw-ink);
  --fs-experimental-link-color:       var(--bw-orange-text);
  --fs-experimental-link-color-hover: var(--bw-ink);
}

/* ==========================================================================
   2. FOUNDATION
   ========================================================================== */

body {
  background-color: var(--bw-paper);
  color: var(--bw-ink);
  font-family: var(--bw-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.banner h1, .banner h2 {
  font-family: var(--bw-serif);
  font-weight: 400;
  color: var(--bw-ink);
  letter-spacing: -0.005em;
  line-height: 1.18;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
h4 { font-size: 1.25rem; }

a { color: var(--bw-orange-text); text-decoration: none; }
a:hover, a:focus { color: var(--bw-ink); text-decoration: underline; }

/* Visible focus. Keyboard users and screen-reader users both rely on it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--bw-orange);
  outline-offset: 2px;
}

/* The strapline lockup. Inter, wide tracking, matching the logo spec. */
.bw-strapline {
  font-family: var(--bw-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bw-orange-text);
}

/* ==========================================================================
   3. ARTICLE BODY
   ========================================================================== */

.entry-content { font-size: 1.125rem; line-height: 1.72; }
.entry-content > * { max-width: var(--bw-measure); }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure { max-width: none; }

.entry-content p { margin-bottom: 1.4em; }

.entry-content h2 { margin-top: 2.4em; margin-bottom: 0.6em; }
.entry-content h3 { margin-top: 1.9em; margin-bottom: 0.5em; }

.entry-content blockquote {
  border-left: 3px solid var(--bw-orange);
  padding-left: 1.4rem;
  margin: 2.2em 0;
  font-family: var(--bw-serif);
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--bw-ink);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content ul, .entry-content ol { margin-bottom: 1.4em; padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.5em; }

.entry-content hr,
.is-divider { background-color: var(--bw-rule); height: 1px; margin: 2.6em 0; }

/* Standfirst. Add class bw-standfirst to the opening paragraph. */
.bw-standfirst {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--bw-grey);
  margin-bottom: 1.8em;
}

/* ==========================================================================
   4. META AND CONTENT LABELS
   Evidence / Practice / Lived Experience / Tradition.
   ========================================================================== */

.entry-meta,
.entry-header .entry-category {
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
}

.bw-label {
  display: inline-block;
  font-family: var(--bw-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.32em 0.7em;
  border: 1px solid var(--bw-rule);
  border-radius: 2px;
  color: var(--bw-grey);
  background: transparent;
}
.bw-label--evidence  { border-color: var(--bw-orange); color: var(--bw-orange-text); }
.bw-label--method    { border-color: var(--bw-ink);    color: var(--bw-ink); }
.bw-label--lived     { border-color: var(--bw-grey);   color: var(--bw-grey); }
.bw-label--tradition { border-color: var(--bw-grey);   color: var(--bw-grey); font-style: italic; }

/* The standard GP line. Wording is task 51 and still open. */
.bw-disclaimer {
  max-width: var(--bw-measure);
  margin: 2.6em 0 1em;
  padding: 1.1rem 1.3rem;
  background: #FFFFFF;
  border-left: 3px solid var(--bw-grey);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--bw-grey);
}

/* ==========================================================================
   5. AUTHOR CARD
   The product. This is what a contributor is being offered.
   ========================================================================== */

.bw-author-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.4rem;
  align-items: start;
  max-width: var(--bw-measure);
  margin: 3rem 0;
  padding: 1.6rem;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
}
.bw-author-card__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bw-paper);
}
.bw-author-card__name {
  font-family: var(--bw-serif);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.2rem;
}
.bw-author-card__credential {
  font-size: 0.85rem;
  color: var(--bw-grey);
  margin: 0 0 0.7rem;
}
.bw-author-card__bio { font-size: 0.98rem; margin: 0 0 0.8rem; }
.bw-author-card__link { font-weight: 500; }

@media (max-width: 549px) {
  .bw-author-card { grid-template-columns: 1fr; gap: 1rem; }
  .bw-author-card__photo { width: 80px; height: 80px; }
}

/* ==========================================================================
   6. BUTTONS
   Ink on paper, not orange on paper. Off-white text on the brand orange is
   4.27:1, which fails AA at button label sizes.
   ========================================================================== */

.button, .button.primary, input[type="submit"], .wp-element-button {
  font-family: var(--bw-sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 2px;
  background-color: var(--bw-ink);
  border-color: var(--bw-ink);
  color: var(--bw-paper);
}
.button:hover, .button.primary:hover, input[type="submit"]:hover, .wp-element-button:hover {
  background-color: var(--bw-orange);
  border-color: var(--bw-orange);
  color: #FFFFFF;
}
.button.is-outline {
  background: transparent;
  color: var(--bw-ink);
  border: 1px solid var(--bw-ink);
}
.button.is-outline:hover { background: var(--bw-ink); color: var(--bw-paper); }

/* The Write with us button in the header.

   Flatsome's header builder does not offer a colour setting that reaches this
   button, so it is set here instead.

   Orange for text rather than the brand orange. Off-white on #C0562B is
   4.27:1 and fails AA once a label is this small. #B7532A is 4.59:1 and
   passes both as text on paper and as paper on the filled hover state. */

.header-button .button.is-outline {
  font-size: 0.76rem;
  line-height: 1.15;
  min-height: 0;
  height: auto;
  padding: 0.62em 1.45em;
  margin: 0;
  border-width: 1px;
  border-color: var(--bw-orange-text);
  background: transparent;
  color: var(--bw-orange-text);
}
.header-button .button.is-outline:hover,
.header-button .button.is-outline:focus {
  background: var(--bw-orange-text);
  border-color: var(--bw-orange-text);
  color: var(--bw-paper);
}
.header-button .button.is-outline span { line-height: inherit; }

/* ==========================================================================
   7. HEADER, FOOTER, ARCHIVE
   ========================================================================== */

.header-main { background-color: var(--bw-paper); }
.header-bottom { background-color: var(--bw-paper); }
.header-nav a { font-family: var(--bw-sans); font-weight: 500; letter-spacing: 0.02em; }

.footer-wrapper, .absolute-footer { background-color: var(--bw-ink); color: var(--bw-paper); }
.absolute-footer a, .footer-wrapper a { color: var(--bw-paper); }
.absolute-footer a:hover, .footer-wrapper a:hover { color: var(--bw-orange); }

.post-item .entry-title { font-family: var(--bw-serif); font-weight: 400; }
.post-item .from_the_blog_excerpt { color: var(--bw-grey); }

/* Skip link, kept visible on focus */
.skip-link:focus {
  background: var(--bw-ink);
  color: var(--bw-paper);
  padding: 0.8rem 1.2rem;
}

/* ==========================================================================
   8. AUTHOR PROFILE PAGE
   The product. What the sixteen founding invitations are offering, and
   what a practitioner sends a client or a venue to. Task 31.
   Distinct from .bw-author-card in section 5, which is the small byline
   card at the foot of an article.
   ========================================================================== */

.bw-profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.6rem;
  align-items: start;
  margin: 2.5rem 0 3.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--bw-rule);
}

.bw-profile__photo-wrap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bw-profile__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown when there is no photo yet. A plain initial, not a stock silhouette,
   and no Gravatar call, so nothing leaves the server. */
.bw-profile__monogram {
  font-family: var(--bw-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--bw-rule);
}

.bw-profile__circle { margin: 0 0 0.7rem; }

.bw-profile__name {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  margin: 0 0 0.4rem;
}

.bw-profile__credential {
  font-family: var(--bw-sans);
  font-size: 0.95rem;
  color: var(--bw-grey);
  margin: 0 0 1.3rem;
}

.bw-profile__bio {
  max-width: var(--bw-measure);
  font-size: 1.06rem;
  line-height: 1.68;
}
.bw-profile__bio p:last-child { margin-bottom: 0; }

.bw-profile__links {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.bw-profile__link {
  font-family: var(--bw-sans);
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid var(--bw-rule);
  padding-bottom: 2px;
}
.bw-profile__link:hover { border-bottom-color: var(--bw-orange); text-decoration: none; }

/* --- The work list --- */

.bw-profile-work { margin-bottom: 4rem; }

.bw-profile-work__title {
  font-size: 1.05rem;
  font-family: var(--bw-sans);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0 0 1.8rem;
}

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

.bw-worklist__item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--bw-rule);
  max-width: var(--bw-measure);
}
.bw-worklist__item:first-child { padding-top: 0; }

.bw-worklist__title {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  margin: 0 0 0.5rem;
}
.bw-worklist__title a { color: var(--bw-ink); }
.bw-worklist__title a:hover { color: var(--bw-orange-text); text-decoration: none; }

.bw-worklist__meta {
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.bw-worklist__excerpt {
  margin: 0.7rem 0 0;
  color: var(--bw-grey);
  font-size: 0.98rem;
}

.bw-profile-work__empty { color: var(--bw-grey); }

@media (max-width: 849px) {
  .bw-profile { grid-template-columns: 150px 1fr; gap: 2rem; }
  .bw-profile__photo-wrap { width: 150px; height: 150px; }
  .bw-profile__monogram { font-size: 3.6rem; }
}

@media (max-width: 549px) {
  .bw-profile {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: left;
  }
  .bw-profile__photo-wrap { width: 120px; height: 120px; }
  .bw-profile__monogram { font-size: 3rem; }
}

/* ==========================================================================
   9. ARTICLE PAGE
   Task 33. The author card in section 5 is styled already; what is added
   here is the header, the lead image and the contributor invitation.
   ========================================================================== */

.bw-article { margin: 2.5rem 0 0; }

.bw-article__header { max-width: var(--bw-measure); margin-bottom: 2rem; }

.bw-article__section {
  font-family: var(--bw-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.bw-article__section a { color: var(--bw-orange-text); }

.bw-article__title { margin: 0 0 1.1rem; }

.bw-article__byline {
  font-family: var(--bw-sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.bw-article__by a { color: var(--bw-ink); font-weight: 600; }
.bw-article__by a:hover { color: var(--bw-orange-text); text-decoration: none; }

.bw-article__credential {
  font-family: var(--bw-sans);
  font-size: 0.9rem;
  color: var(--bw-grey);
  margin: 0.7rem 0 0;
}

.bw-article__lead { margin: 0 0 2.4rem; }
.bw-article__lead img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  display: block;
  margin-inline: auto;
}

.bw-article__review {
  max-width: var(--bw-measure);
  font-family: var(--bw-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 2rem 0 0;
}

/* Fallback when a contributor has no photo yet. Matches the profile page. */
.bw-author-card__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--bw-rule);
  font-family: var(--bw-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bw-rule);
}

.bw-author-card__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* --- Contributor invitation --- */

.bw-cta {
  max-width: var(--bw-measure);
  margin: 0 0 4rem;
  padding: 2.2rem 2rem;
  background: var(--bw-ink);
  text-align: center;
}
.bw-cta__line {
  font-family: var(--bw-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.3;
  color: var(--bw-paper);
  margin: 0 0 1.4rem;
}
.bw-cta .button {
  background-color: var(--bw-paper);
  border-color: var(--bw-paper);
  color: var(--bw-ink);
  margin: 0;
}
.bw-cta .button:hover {
  background-color: var(--bw-orange);
  border-color: var(--bw-orange);
  color: #FFFFFF;
}

@media (max-width: 549px) {
  .bw-author-card__monogram { width: 80px; height: 80px; font-size: 2rem; }
  .bw-cta { padding: 1.8rem 1.3rem; }
}

/* ==========================================================================
   10. SECTION ARCHIVE AND ARTICLE CARDS
   One card shape, used by section archives now and the homepage later.
   Task 36.
   ========================================================================== */

.bw-archive__header {
  max-width: var(--bw-measure);
  margin: 2.5rem 0 2.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--bw-rule);
}

.bw-archive__title { margin: 0 0 0.7rem; }

.bw-archive__standfirst {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--bw-grey);
}
.bw-archive__standfirst p:last-child { margin-bottom: 0; }

.bw-archive__empty {
  color: var(--bw-grey);
  padding: 2rem 0 4rem;
}

/* --- The card --- */

.bw-cardlist { margin-bottom: 3rem; }

.bw-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--bw-rule);
}
.bw-card:first-child { padding-top: 0; }

/* No image, no empty column. */
.bw-card:not(:has(.bw-card__image)) { grid-template-columns: 1fr; }

.bw-card__image { display: block; }
.bw-card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.bw-card__body { max-width: var(--bw-measure); }

.bw-card__section {
  font-family: var(--bw-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.bw-card__section a { color: var(--bw-orange-text); }

.bw-card__title {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  margin: 0 0 0.6rem;
}
.bw-card__title a { color: var(--bw-ink); }
.bw-card__title a:hover { color: var(--bw-orange-text); text-decoration: none; }

.bw-card__meta {
  font-family: var(--bw-sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.bw-card__by { font-weight: 600; color: var(--bw-ink); }

.bw-card__excerpt {
  margin: 0;
  color: var(--bw-grey);
  font-size: 0.99rem;
  line-height: 1.6;
}

/* --- Pagination --- */

.navigation.pagination { margin: 0 0 4rem; }
.nav-links {
  display: flex;
  gap: 0.5rem;
  font-family: var(--bw-sans);
  font-size: 0.9rem;
}
.nav-links .page-numbers {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--bw-rule);
  color: var(--bw-ink);
}
.nav-links .page-numbers:hover { border-color: var(--bw-ink); text-decoration: none; }
.nav-links .page-numbers.current {
  background: var(--bw-ink);
  border-color: var(--bw-ink);
  color: var(--bw-paper);
}

@media (max-width: 849px) {
  .bw-card { grid-template-columns: 200px 1fr; gap: 1.4rem; }
}

@media (max-width: 549px) {
  .bw-card { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   11. SUBMISSION FORM
   The only form on the site that matters. Every step between "I'd like to
   contribute" and contributing costs a contributor. Task 41.
   ========================================================================== */

.bw-form {
  max-width: var(--bw-measure);
  margin: 0 0 4rem;
}

.bw-form__note {
  font-family: var(--bw-sans);
  font-size: 0.95rem;
  color: var(--bw-grey);
  margin: 0 0 2rem;
}

.bw-form__group {
  border: 0;
  border-top: 1px solid var(--bw-rule);
  margin: 0 0 2.2rem;
  padding: 1.6rem 0 0;
}

.bw-form__group legend {
  font-family: var(--bw-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bw-grey);
  padding: 0;
  margin: 0 0 1.4rem;
}

.bw-form label {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--bw-ink);
  text-transform: none;
  letter-spacing: 0;
}

.bw-req {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin-left: 0.4rem;
}

.bw-form__help {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--bw-grey);
  margin-top: 0.4rem;
}

.bw-form input[type="text"],
.bw-form input[type="email"],
.bw-form input[type="url"],
.bw-form textarea {
  width: 100%;
  font-family: var(--bw-sans);
  font-size: 1rem;
  color: var(--bw-ink);
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
  box-shadow: none;
  margin-bottom: 0;
}
.bw-form input:focus,
.bw-form textarea:focus { border-color: var(--bw-ink); }

.bw-form textarea { line-height: 1.6; resize: vertical; }

.bw-form input[type="file"] {
  font-family: var(--bw-sans);
  font-size: 0.9rem;
  color: var(--bw-grey);
}

.bw-form .wpcf7-form-control-wrap { display: block; }
.bw-form p { margin-bottom: 1.5rem; }

/* Radio and checkbox: bigger targets, and the label wraps rather than
   sitting on one line and truncating on a phone. */
.bw-form .wpcf7-radio .wpcf7-list-item,
.bw-form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0 0 0.7rem;
}
.bw-form .wpcf7-list-item-label { font-weight: 400; }
.bw-form .wpcf7-radio label,
.bw-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  cursor: pointer;
}
.bw-form input[type="radio"],
.bw-form input[type="checkbox"] {
  margin: 0.25rem 0 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--bw-orange);
}

.bw-form__consent { background: transparent; }

.bw-form__submit { margin: 2rem 0 1.2rem; }
.bw-form input[type="submit"] {
  font-size: 1rem;
  padding: 0.85rem 2rem;
  width: auto;
}

.bw-form__privacy {
  font-family: var(--bw-sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--bw-grey);
  margin: 0;
}

/* --- Validation and response messages --- */

.bw-form .wpcf7-not-valid-tip {
  font-family: var(--bw-sans);
  font-size: 0.86rem;
  color: #A3301A;
  margin-top: 0.35rem;
}
.bw-form input.wpcf7-not-valid,
.bw-form textarea.wpcf7-not-valid { border-color: #A3301A; }

.bw-form .wpcf7-response-output {
  font-family: var(--bw-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-grey);
  background: #FFFFFF;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0 0;
}
.bw-form form.sent .wpcf7-response-output { border-left-color: var(--bw-orange); }
.bw-form form.invalid .wpcf7-response-output,
.bw-form form.failed .wpcf7-response-output { border-left-color: #A3301A; }

/* ==========================================================================
   12. HEADER AND FOOTER
   Task 46. Section 7 already sets the base colours; this is the navigation,
   the mobile menu and the footer content.
   ========================================================================== */

.header-main { border-bottom: 1px solid var(--bw-rule); }

.header-nav a {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--bw-ink);
}
.header-nav a:hover { color: var(--bw-orange-text); text-decoration: none; }

/* The current section, marked. Small thing, but it tells a reader where
   they are without them having to work it out from the heading. */
.header-nav li.current-menu-item > a,
.header-nav li.current-category-ancestor > a {
  color: var(--bw-orange-text);
  box-shadow: inset 0 -2px 0 var(--bw-orange);
}

/* Write With Us reads as the invitation it is, not another section.
   Add the class bw-nav-invite to that menu item in Appearance > Menus. */
.header-nav li.bw-nav-invite > a {
  color: var(--bw-orange-text);
  font-weight: 600;
}

.nav-dropdown { border: 1px solid var(--bw-rule); box-shadow: none; }

/* Mobile menu */
.mfp-content .sidebar-menu { background: var(--bw-paper); }
.off-canvas .sidebar-menu a { font-family: var(--bw-sans); color: var(--bw-ink); }

/* --- Footer --- */

.footer-wrapper .widget .widget-title { color: var(--bw-paper); }

.absolute-footer {
  font-family: var(--bw-sans);
  font-size: 0.86rem;
  line-height: 1.7;
  padding: 2.2rem 0;
}
.absolute-footer .copyright-footer { color: var(--bw-paper); opacity: 0.85; }

/* The one affiliation statement Decision 3 allows. Plain, unlinked,
   deliberately quiet. */
.bw-affiliation {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--bw-paper);
  opacity: 0.65;
  margin: 0.8rem 0 0;
  max-width: 60ch;
}

.absolute-footer ul.links li { margin-right: 1.2rem; }
.absolute-footer ul.links a { opacity: 0.85; }
.absolute-footer ul.links a:hover { opacity: 1; color: var(--bw-orange); }

/* ==========================================================================
   13. EVENTS
   Tasks 37 and 38. Cards reuse section 10; this is what is specific to an
   event: the date line, the booking link and the past-event notice.
   ========================================================================== */

.bw-card--event .bw-card__section { color: var(--bw-ink); letter-spacing: 0.06em; }

.bw-card__book { margin: 0.9rem 0 0; }
.bw-card__book a {
  font-family: var(--bw-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--bw-rule);
  padding-bottom: 2px;
}
.bw-card__book a:hover { border-bottom-color: var(--bw-orange); text-decoration: none; }

.bw-event__when {
  font-family: var(--bw-sans);
  font-size: 1.05rem;
  color: var(--bw-ink);
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.bw-event__past {
  display: inline-block;
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bw-grey);
  border: 1px solid var(--bw-rule);
  padding: 0.35em 0.75em;
  margin: 0 0 1.1rem;
}

.bw-event__book { margin: 2.2rem 0 0; }

/* We list events, we do not run them. Worth saying once, plainly, on
   every listing rather than in a policy nobody opens. */
.bw-event__note {
  max-width: var(--bw-measure);
  margin: 2.6rem 0 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bw-rule);
  font-family: var(--bw-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--bw-grey);
}

/* --- Absolute footer layout ---
   Flatsome floats two blocks side by side: footer-primary (menu and
   copyright) left, footer-secondary (the secondary text) right. At this
   line length they collide. Stack them instead, in reading order: links,
   then what the magazine is, then who publishes it. */

.absolute-footer .container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.absolute-footer .footer-primary,
.absolute-footer .footer-secondary {
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.absolute-footer .footer-primary { order: 1; }
.absolute-footer .footer-secondary { order: 2; }

/* The affiliation line. Decision 3 asks for one plain statement, so it
   reads quieter than the tagline above it and carries no link. */
.absolute-footer .footer-text {
  display: block;
  font-size: 0.8rem;
  line-height: 1.7;
  max-width: 70ch;
  opacity: 0.55;
}

.absolute-footer .footer-nav {
  margin: 0 0 0.9rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid rgba(250, 247, 242, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.absolute-footer .footer-nav li { margin: 0; padding: 0; }
.absolute-footer .footer-nav a {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.absolute-footer .footer-nav a:hover { opacity: 1; color: var(--bw-orange); }

.absolute-footer .copyright-footer {
  font-size: 0.84rem;
  line-height: 1.7;
  max-width: 70ch;
  opacity: 0.7;
  padding: 0;
}

/* ==========================================================================
   14. CORRECTIONS
   The Corrections page promises a visible note on the piece itself. A
   promise with no mechanism is the thing that quietly stops happening,
   so here is the mechanism. Add a paragraph at the foot of the article
   body with the class bw-correction. Task 49.
   ========================================================================== */

.bw-correction {
  max-width: var(--bw-measure);
  margin: 2.4em 0 0;
  padding: 1.1rem 1.3rem;
  background: #FFFFFF;
  border-left: 3px solid var(--bw-orange);
  font-family: var(--bw-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--bw-ink);
}
.bw-correction strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw-orange-text);
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   15. THE WRITERS CIRCLE
   The contributors roll, and the social proof for the next invitation.
   A grid earns its place here: seventeen faces read as a body of people,
   which a list of names does not. Task 40.
   ========================================================================== */

.bw-circle {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2.4rem 1.8rem;
}

.bw-circle__item { margin: 0; }

.bw-circle__link {
  display: block;
  text-align: center;
  color: var(--bw-ink);
}
.bw-circle__link:hover { text-decoration: none; }

.bw-circle__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
}
.bw-circle__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bw-circle__monogram {
  font-family: var(--bw-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--bw-rule);
}
.bw-circle__link:hover .bw-circle__photo-wrap { border-color: var(--bw-orange); }

.bw-circle__name {
  display: block;
  font-family: var(--bw-serif);
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}
.bw-circle__link:hover .bw-circle__name { color: var(--bw-orange-text); }

.bw-circle__credential {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--bw-grey);
  margin-bottom: 0.4rem;
}

.bw-circle__count {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bw-grey);
}

@media (max-width: 549px) {
  .bw-circle { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.2rem; }
  .bw-circle__photo-wrap { width: 110px; height: 110px; }
  .bw-circle__monogram { font-size: 2.4rem; }
  .bw-circle__name { font-size: 1.05rem; }
}

/* ==========================================================================
   16. STANDARD PAGE
   Task 39. Flatsome's own page template renders content and nothing else,
   which left every page except the contributors list with no h1 on it.
   ========================================================================== */

.bw-page { margin: 2.5rem 0 0; }

.bw-page__header {
  max-width: var(--bw-measure);
  margin-bottom: 1.6rem;
}

.bw-page__title { margin: 0; }

/* The standfirst already sits inside entry-content on the built pages, so it
   picks up its own rule from section 3. Nothing to repeat here. */

.bw-page__pagination {
  max-width: var(--bw-measure);
  margin-top: 2rem;
  font-family: var(--bw-sans);
  font-size: 0.9rem;
}

/* Governance pages only. Same treatment as the article review line, because
   it is the same kind of information: quiet, factual, easy to skip. */
.bw-page__updated {
  max-width: var(--bw-measure);
  margin: 3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bw-rule);
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
}

/* ==========================================================================
   17. SCREEN READER TEXT
   BW-102. Off-site links open in a new tab, which is a surprise if you
   cannot see it happen. The hint is in the markup and hidden visually.
   Flatsome may define this class too; defining it here means the child
   theme does not depend on that staying true.
   ========================================================================== */

.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;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   18. HOMEPAGE AND SECTION LAYOUTS
   Task 68, rebuilt 15 September 2026. The homepage now uses the section
   archive parts (bw-feature, bw-grid, bw-tile) plus the blocks below. The
   bw-home__top, __side, __lead, __second, __index and __thumb rules are no
   longer used by front-page.php and can go once no other template needs them.
   ========================================================================== */

.bw-home__kicker { margin: 2.5rem 0 1rem; }

.bw-home__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.6rem;
  align-items: start;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--bw-rule);
}

.bw-home__side {
  border-left: 1px solid var(--bw-rule);
  padding-left: 2.6rem;
  display: grid;
  gap: 1.8rem;
}
.bw-home__second + .bw-home__second { padding-top: 1.8rem; border-top: 1px solid var(--bw-rule); }

.bw-home__image { display: block; margin-bottom: 1rem; }
.bw-home__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.bw-home__section {
  font-family: var(--bw-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.bw-home__section a { color: var(--bw-orange-text); }

.bw-home__lead .bw-home__title { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); margin: 0 0 0.7rem; }
.bw-home__second .bw-home__title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); margin: 0 0 0.5rem; }
.bw-home__title a { color: var(--bw-ink); }
.bw-home__title a:hover { color: var(--bw-orange-text); text-decoration: none; }

.bw-home__standfirst {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--bw-grey);
  margin: 0 0 0.8rem;
}

.bw-home__meta {
  font-family: var(--bw-sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.bw-home__by { font-weight: 600; color: var(--bw-ink); }

/* --- The invitation. The only filled block on the page, deliberately. --- */

.bw-home__invite {
  background: var(--bw-ink);
  padding: 2.2rem 2.2rem;
  margin: 2.6rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.bw-home__invite-line {
  font-family: var(--bw-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.25;
  color: var(--bw-paper);
  margin: 0 0 0.4rem;
}
.bw-home__invite-sub {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bw-paper);
  opacity: 0.7;
  margin: 0;
}
.bw-home__invite .button {
  background: var(--bw-paper);
  border-color: var(--bw-paper);
  color: var(--bw-ink);
  margin: 0;
  white-space: nowrap;
}
.bw-home__invite .button:hover {
  background: var(--bw-orange);
  border-color: var(--bw-orange);
  color: #FFFFFF;
}

/* --- Section blocks on the homepage --- */

.bw-home__block { margin: 0 0 3rem; }

.bw-home__block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--bw-ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
}
.bw-home__block-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin: 0; }
.bw-home__block-title a { color: var(--bw-ink); }
.bw-home__block-title a:hover { color: var(--bw-orange-text); text-decoration: none; }
.bw-home__block-note {
  font-family: var(--bw-sans);
  font-size: 0.82rem;
  color: var(--bw-grey);
  margin: 0;
}

.bw-home__index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.6rem;
}
.bw-home__index li { border-top: 1px solid var(--bw-rule); margin: 0; }
.bw-home__index li:first-child, .bw-home__index li:nth-child(2) { border-top: 0; }
.bw-home__index a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0;
  color: var(--bw-ink);
}
.bw-home__index a:hover { color: var(--bw-orange-text); text-decoration: none; }

/* Small, square, and deliberately subordinate to the images at the top of the
   page. Round faces, square articles, one wide lead: three shapes at three
   sizes is what stops a homepage reading as one long feed. */
.bw-home__thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  background: var(--bw-rule);
  overflow: hidden;
  display: block;
}
.bw-home__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bw-home__index-title { font-size: 1rem; line-height: 1.4; }

.bw-home__faces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.bw-home__faces li { margin: 0; width: 96px; text-align: center; }
.bw-home__faces a { color: var(--bw-ink); }
.bw-home__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
}
.bw-home__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-home__monogram { font-family: var(--bw-serif); font-size: 2rem; color: var(--bw-rule); }
.bw-home__face-name {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--bw-grey);
}
.bw-home__faces a:hover .bw-home__face { border-color: var(--bw-orange); }
.bw-home__faces a:hover .bw-home__face-name { color: var(--bw-orange-text); }

.bw-home__events { list-style: none; margin: 0; padding: 0; }
.bw-home__events li {
  border-top: 1px solid var(--bw-rule);
  padding: 0.85rem 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
}
.bw-home__events li:first-child { border-top: 0; }
.bw-home__events a { font-size: 1.05rem; color: var(--bw-ink); }
.bw-home__events a:hover { color: var(--bw-orange-text); text-decoration: none; }
.bw-home__event-when {
  font-family: var(--bw-sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-orange-text);
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 13rem;
}
.bw-home__event-place {
  font-family: var(--bw-sans);
  font-size: 0.8rem;
  color: var(--bw-grey);
}

@media (max-width: 849px) {
  .bw-home__top { grid-template-columns: 1fr; gap: 2rem; }
  .bw-home__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--bw-rule); padding-top: 1.8rem; }
  .bw-home__invite { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .bw-home__index { grid-template-columns: 1fr; }
  .bw-home__index li:nth-child(2) { border-top: 1px solid var(--bw-rule); }
  .bw-home__event-when { min-width: 0; flex: 1 0 100%; }
}

/* --- Section archives --- */

.bw-feature { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--bw-rule); }
.bw-feature__image { display: block; margin-bottom: 1.2rem; }
.bw-feature__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.bw-feature__title { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); margin: 0 0 0.7rem; max-width: var(--bw-measure); }
.bw-feature__title a { color: var(--bw-ink); }
.bw-feature__title a:hover { color: var(--bw-orange-text); text-decoration: none; }
.bw-feature__standfirst {
  max-width: var(--bw-measure);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--bw-grey);
  margin: 0 0 0.9rem;
}

.bw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2.4rem 2rem;
  margin-bottom: 3rem;
}
.bw-tile__image { display: block; margin-bottom: 0.9rem; }
.bw-tile__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.bw-tile__title { font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.5rem; }
.bw-tile__title a { color: var(--bw-ink); }
.bw-tile__title a:hover { color: var(--bw-orange-text); text-decoration: none; }
.bw-tile__meta {
  font-family: var(--bw-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-grey);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.bw-tile__by { font-weight: 600; color: var(--bw-ink); }

/* Start here. The questions page, pinned to the top of Learn and repeated on
   the homepage. It carries no photograph and does not need one: it is the one
   thing on the site a reader is told to read first, so it is marked out by
   treatment rather than by an image. */

.bw-startpanel {
  display: block;
  max-width: var(--bw-measure);
  margin: 0 0 2.6rem;
  padding: 1.6rem 1.8rem;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-orange);
  border-radius: 0;
  color: var(--bw-ink);
}
.bw-startpanel:hover { border-color: var(--bw-ink); border-left-color: var(--bw-orange); text-decoration: none; }

.bw-startpanel__kicker {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bw-orange-text);
  margin-bottom: 0.5rem;
}
.bw-startpanel__title {
  display: block;
  font-family: var(--bw-serif);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.22;
  margin-bottom: 0.35rem;
}
.bw-startpanel:hover .bw-startpanel__title { color: var(--bw-orange-text); }
.bw-startpanel__note {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bw-grey);
}

.bw-startpanel--home { margin-bottom: 1.4rem; }

/* The Circle. These are people, so they get portraits. */

.bw-faces {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2.4rem 1.8rem;
}
.bw-faces__item { margin: 0; }
.bw-faces__link { display: block; text-align: center; color: var(--bw-ink); }
.bw-faces__link:hover { text-decoration: none; }
.bw-faces__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
}
.bw-faces__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-faces__monogram { font-family: var(--bw-serif); font-size: 3.2rem; color: var(--bw-rule); }
.bw-faces__link:hover .bw-faces__photo-wrap { border-color: var(--bw-orange); }
.bw-faces__name {
  display: block;
  font-family: var(--bw-serif);
  font-size: 1.18rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.bw-faces__link:hover .bw-faces__name { color: var(--bw-orange-text); }
.bw-faces__credential {
  display: block;
  font-family: var(--bw-sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bw-grey);
}

@media (max-width: 549px) {
  .bw-faces { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.2rem; }
  .bw-faces__photo-wrap { width: 110px; height: 110px; }
  .bw-faces__monogram { font-size: 2.4rem; }
  .bw-faces__name { font-size: 1.02rem; }
}

/* ==========================================================================
   19. HOMEPAGE REBUILD
   15 September 2026. The homepage is built from the section archive parts,
   so these rules only adjust spacing and the opening statement.
   ========================================================================== */

.bw-home__intro .bw-archive__title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.12;
}

.bw-feature .bw-home__section { margin-top: 0.2rem; }

.bw-home__block { margin: 0 0 3.4rem; }

.bw-home__block-note { white-space: nowrap; }
.bw-home__block-note a { color: var(--bw-orange-text); }
.bw-home__block-note a:hover { color: var(--bw-ink); text-decoration: none; }

.bw-home__grid { margin-bottom: 0; }

.bw-startpanel--home { max-width: none; margin-bottom: 2rem; }

.bw-home__invite { margin: 0 0 3.4rem; }

/* --------------------------------------------------------------------------
   19a. The lead story and the editorial, side by side
   27 September 2026. Two thirds and one third, sharing one rule underneath.
   The editorial carries no image on purpose: two pictures side by side
   compete, and the lead story is the one that should win.
   -------------------------------------------------------------------------- */

.bw-home__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--bw-rule);
}

/* The wrapper carries the rule, so the story inside does not repeat it. */
.bw-home__top .bw-feature {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.bw-editorial {
  padding: 1.6rem 1.8rem;
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-orange);
}

.bw-editorial__kicker { margin: 0 0 0.6rem; }

.bw-editorial__title {
  margin: 0 0 0.7rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
.bw-editorial__title a { color: var(--bw-ink); }
.bw-editorial__title a:hover { color: var(--bw-orange-text); text-decoration: none; }

.bw-editorial__note {
  margin: 0 0 1.2rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--bw-grey);
}

.bw-editorial__by {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0 0 1rem;
}

.bw-editorial__face {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
}
.bw-editorial__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bw-editorial__who {
  display: flex;
  flex-direction: column;
  font-family: var(--bw-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.bw-editorial__name { text-transform: uppercase; font-weight: 600; }
.bw-editorial__who time { color: var(--bw-grey); }

.bw-editorial__more { margin: 0; font-family: var(--bw-sans); font-size: 0.92rem; }
.bw-editorial__more a { color: var(--bw-orange-text); }
.bw-editorial__more a:hover { color: var(--bw-ink); text-decoration: none; }

@media (max-width: 849px) {
  /* The lead story is what a reader came for, so the editorial goes below it. */
  .bw-home__top { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   20. WIDTH
   28 September 2026. Every template wraps its content in large-10
   large-offset-1, which leaves an empty column down the left and costs about
   180px on every page. The reading measure on prose is handled separately by
   --bw-measure, so the empty column was buying nothing.

   The header sat in a full-width container while everything below it sat in a
   1080px row, so the masthead and the content were never on the same measure.
   Both now line up on the same left edge.

   To undo: delete this section. Nothing else depends on it.
   ========================================================================== */

.page-wrapper .large-10.large-offset-1 {
  flex-basis: 100%;
  max-width: 100%;
  margin-left: 0;
}

.header-inner.container { max-width: 1080px; }

/* ==========================================================================
   21. ARTICLE AND PAGE COLUMN
   28 September 2026. Section 20 gave every page the full 1080px. Images took
   it, prose did not, because prose is held at --bw-measure so lines stay
   readable. That left a wide picture above narrow text pinned to the left.

   The text now centres inside the column instead. Same reading width, but it
   sits under the image rather than beside a gap. Images and anything marked
   wide or full are untouched and still fill the column.

   Archives and the homepage are not affected: they have no long prose.
   ========================================================================== */

.single-post .bw-article__header,
.single-post .entry-content > *,
.page .bw-page__header,
.page .entry-content > * {
  margin-left: auto;
  margin-right: auto;
}

/*
 * Everything else held at the reading measure. These sit outside
 * .entry-content, so the rule above missed them and they stayed pinned left
 * while the prose moved: the safety note and the author card below an
 * article, and the rest for the same reason wherever they appear.
 */
.single-post .bw-disclaimer,
.single-post .bw-author-card,
.single-post .bw-article__review,
.single-post .bw-correction,
.single-post .bw-cta,
.page .bw-disclaimer,
.page .bw-cta,
.page .bw-form,
.page .bw-page__pagination,
.page .bw-page__updated {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   22. SHORT PAGES
   A page with little on it, such as Events with one listing, left the footer
   floating mid-screen with dead space below it. The wrapper now fills the
   window and the footer sits at the bottom where there is not enough content
   to push it there.
   ========================================================================== */

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main { flex: 1 0 auto; }

/* ==========================================================================
   23. CONTRIBUTOR FACES
   28 September 2026. Nine faces rather than seven, now the homepage has the
   full width. The row was a wrapping flex list of fixed 96px items, which at
   nine would have fitted only at the widest window and dropped the ninth onto
   a line by itself as soon as it narrowed.

   Fixed column counts rather than auto-fit. Nine divides evenly into nine and
   three and nothing else, so letting the browser choose the count left two
   faces stranded on a second row at tablet widths. Nine across on desktop,
   three across below that, even rows at every size.
   ========================================================================== */

.bw-home__faces {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 1.4rem 0.9rem;
}

/* Capped and centred, so the faces stay grouped in a wide cell. */
.bw-home__faces li {
  width: auto;
  max-width: 120px;
  margin: 0 auto;
}

@media (max-width: 899px) {
  .bw-home__faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The section chip, used where a piece carries no content label. Section 23a. */
.bw-label--section { border-color: var(--bw-rule); color: var(--bw-orange-text); }

/* --------------------------------------------------------------------------
   The safety note, unruled. 28 September 2026. The 3px left rule went, and
   the padding that held space for it. Size and colour mark it out now.
   -------------------------------------------------------------------------- */

.bw-disclaimer {
  border-left: 0;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   Read more, on its own line. 28 September 2026. It is the link back into the
   magazine, and sitting it with their outbound links buried it.
   -------------------------------------------------------------------------- */

.bw-author-card__links .bw-author-card__link:first-child {
  flex: 0 0 100%;
}

/* ==========================================================================
   24. READ NEXT
   28 September 2026. Three pieces at the foot of every article. Measured
   that day: 65 of 70 pieces had nothing linking to them, so every article
   was a cul-de-sac. Uses the section archive tiles, so a reader recognises
   the shape before reading a word of it.
   ========================================================================== */

/*
 * Full column width, not the reading width. Held at the measure it only had
 * room for two tiles, and a row of three that wraps to two and one reads as
 * a mistake rather than a choice.
 */
.bw-related {
  max-width: none;
  margin: 3.2rem 0 0;
  padding-top: 2.4rem;
  border-top: 1px solid var(--bw-rule);
}

/* Three across, always, rather than however many happen to fit. */
.bw-related .bw-grid {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 849px) {
  .bw-related .bw-grid { grid-template-columns: 1fr; }
}

.bw-related__head { margin: 0 0 1.4rem; }

.bw-related__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* ==========================================================================
   25. EVENT IMAGES
   3 October 2026. Event images are posters rather than photographs: square,
   often with the event name set into the artwork. The listing card crops
   every image to 16:9 to keep the rows even, which on a poster cuts the
   title off. Posters are shown whole instead, in their own shape.
   ========================================================================== */

/*
 * The space is reserved on the link, not the image, so the box exists before
 * the picture arrives. Without this a lazily loaded poster has no height
 * until it loads and lands somewhere else on the page entirely, which is
 * what happened from the fourth listing down, where LiteSpeed starts
 * deferring images. Contain rather than cover, so a poster with its name set
 * into the artwork is never cropped.
 */
.bw-card--event .bw-card__image {
  display: block;
  aspect-ratio: 1 / 1;
}

.bw-card--event .bw-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* A square poster on a single event page can take more room than a
   landscape photograph, and still sits inside the measure. */
.single-bw_event .bw-article__lead img { max-height: 560px; }

/* ==========================================================================
   26. EVENT LISTING LAYOUT
   3 October 2026. Two per row, and smaller posters. One event a row was
   right at one listing and wasteful at six: a reader scrolls past three
   screens to see what is on. Scoped to the events archive, so the same card
   elsewhere is untouched.
   ========================================================================== */

.post-type-archive-bw_event .bw-cardlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.6rem;
}

.post-type-archive-bw_event .bw-card {
  grid-template-columns: 150px 1fr;
  gap: 1.4rem;
  padding: 1.8rem 0;
}

/* The first card in each column, not just the first on the page. */
.post-type-archive-bw_event .bw-card:first-child { padding-top: 1.8rem; }
.post-type-archive-bw_event .bw-card:nth-child(-n+2) { padding-top: 0; }

/* Long event names need to sit at reading size rather than headline size. */
.post-type-archive-bw_event .bw-card__title { font-size: 1.25rem; line-height: 1.25; }
.post-type-archive-bw_event .bw-card__body { max-width: none; }

@media (max-width: 849px) {
  .post-type-archive-bw_event .bw-cardlist { grid-template-columns: 1fr; }
  .post-type-archive-bw_event .bw-card:nth-child(-n+2) { padding-top: 1.8rem; }
  .post-type-archive-bw_event .bw-card:first-child { padding-top: 0; }
}

@media (max-width: 549px) {
  .post-type-archive-bw_event .bw-card { grid-template-columns: 110px 1fr; gap: 1rem; }
}

/* ==========================================================================
   27. EVENTS INVITATION WIDTH
   4 October 2026. The invitation band is held to the reading width, which is
   right under an article and wrong under the events listing, where it sat
   off to the left under a full-width two-column list. On that page it takes
   the whole column.
   ========================================================================== */

.post-type-archive-bw_event .bw-cta {
  max-width: none;
  margin-inline: 0;
}

/* ==========================================================================
   28. THE MONTHLY LETTER
   9 October 2026. The signup block, at the foot of every article that is not
   in Practice, and anywhere else the shortcode is placed.

   Quieter than the Write with us band on purpose. That one is a dark panel
   making a large offer to a few people. This one is a small ask of everybody,
   and a second dark slab would read as a site that wants something rather
   than a magazine that publishes something.
   ========================================================================== */

.bw-signup {
  max-width: var(--bw-measure);
  margin: 3.2rem 0 4rem;
  padding: 1.8rem 0 0;
  border-top: 2px solid var(--bw-ink);
}

.bw-signup__words { margin: 0 0 1.1rem; }

.bw-signup__heading {
  font-family: var(--bw-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--bw-ink);
  margin: 0 0 0.3rem;
}

.bw-signup__line {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bw-grey);
  margin: 0;
}

/* Wraps to two rows on a narrow screen rather than squeezing the field. */
.bw-signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

.bw-signup__form input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--bw-sans);
  font-size: 1rem;
  color: var(--bw-ink);
  background: #FFFFFF;
  border: 1px solid var(--bw-rule);
  border-radius: 0;
  box-shadow: none;
  height: auto;
}

.bw-signup__form input[type="email"]:focus {
  border-color: var(--bw-ink);
  outline: 2px solid var(--bw-orange);
  outline-offset: 1px;
}

.bw-signup__form button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--bw-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bw-paper);
  background: var(--bw-ink);
  border: 1px solid var(--bw-ink);
  border-radius: 0;
  cursor: pointer;
  height: auto;
  line-height: 1.3;
}

.bw-signup__form button:hover,
.bw-signup__form button:focus {
  background: var(--bw-orange);
  border-color: var(--bw-orange);
  color: #FFFFFF;
}

.bw-signup__form button[disabled] { opacity: 0.55; cursor: default; }

/*
 * The honeypot. Off-screen rather than display:none, because some robots
 * skip anything that is not rendered, and a few screen readers announce a
 * hidden field anyway. aria-hidden and tabindex keep it away from people.
 */
.bw-signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Holds its space, so the block does not jump when an answer appears. */
.bw-signup__message {
  min-height: 1.4em;
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--bw-grey);
}

.bw-signup__message--ok  { color: #1E7B34; }
.bw-signup__message--bad { color: var(--bw-orange-text); }

.bw-signup__small {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--bw-grey);
}

/* In the footer the text is light, so the block inverts. */
.footer-wrapper .bw-signup,
.footer .bw-signup {
  max-width: none;
  border-top-color: rgba(255, 255, 255, 0.25);
}

.footer-wrapper .bw-signup__heading,
.footer .bw-signup__heading { color: inherit; }

.footer-wrapper .bw-signup__line,
.footer-wrapper .bw-signup__small,
.footer-wrapper .bw-signup__message,
.footer .bw-signup__line,
.footer .bw-signup__small,
.footer .bw-signup__message { color: inherit; opacity: 0.8; }

.footer-wrapper .bw-signup__form button,
.footer .bw-signup__form button {
  background: var(--bw-paper);
  border-color: var(--bw-paper);
  color: var(--bw-ink);
}

@media (max-width: 549px) {
  .bw-signup__form button { flex: 1 1 100%; }
}


/* ==========================================================================
   29. THE MONTHLY LETTER ON THE HOMEPAGE
   10 October 2026. The signup under the editorial box, in the rail beside the
   lead story.

   .bw-home__top is a two column grid. The editorial used to be its second
   child; it is now wrapped in .bw-home__rail together with the signup, so the
   grid still has two children. Putting the signup straight into the grid
   drops it into the left column on a new row, under the lead story, which is
   the one place it was not meant to go.

   The block keeps the ink rule and loses the box. Two bordered cards stacked
   read as a repeated component and the editorial stops looking like the
   editorial.
   ========================================================================== */

.bw-home__rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bw-signup--rail {
  max-width: none;
  margin: 2rem 0 0;
  padding: 1.3rem 0 0;
}

.bw-signup--rail .bw-signup__words { margin-bottom: 0.9rem; }

.bw-signup--rail .bw-signup__heading {
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
}

.bw-signup--rail .bw-signup__line { font-size: 0.92rem; }

/*
 * Stacked, not side by side. The rail is roughly 320px wide on a laptop, so
 * an input and a button on one row leaves the field too narrow to read an
 * address back in.
 */
.bw-signup--rail .bw-signup__form input[type="email"],
.bw-signup--rail .bw-signup__form button {
  flex: 1 1 100%;
  text-align: center;
}

.bw-signup--rail .bw-signup__form input[type="email"] { text-align: left; }

.bw-signup--rail .bw-signup__message { font-size: 0.9rem; }
.bw-signup--rail .bw-signup__small { font-size: 0.8rem; }

/*
 * Below the breakpoint the rail sits under the lead story at full width, so
 * the block goes back to its ordinary shape and the button sits beside the
 * field again.
 */
@media (max-width: 849px) {

  .bw-signup--rail {
    max-width: var(--bw-measure);
    margin-top: 2.4rem;
  }

  .bw-signup--rail .bw-signup__form input[type="email"] { flex: 1 1 15rem; }
  .bw-signup--rail .bw-signup__form button { flex: 0 0 auto; }
}

@media (max-width: 549px) {
  .bw-signup--rail .bw-signup__form button { flex: 1 1 100%; }
}