/* ==========================================================================
   The Heirloom Muse — brand layer
   Loads after tokens.css, on top of Astra.

   Rules of this file:
   1. No reset, no element-level defaults. Astra's Customizer owns body type,
      heading type, colors, and container widths.
   2. Nothing sets display:grid or display:flex on .entry-content. Journey's
      in-content ad insertion needs that container in normal block flow.
   3. Astra's own class names are confined to section 9 so there is one place
      to look if a future Astra release renames something.

   Sections:
     1  Editorial body — the post measure and its type
     2  Gutenberg block styles — the callouts
     3  Brand marks — branch, seal
     4  Core — eyebrow, button, tag, rule
     5  Cards and grids
     6  Single post furniture
     7  Archive
     8  Home
     9  Astra surfaces — header, footer, containers
    10  Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Editorial body
   Type rules only. Never layout. See rule 2 at the top of this file.
   -------------------------------------------------------------------------- */
.entry-content {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-body);
}

.entry-content p {
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

/* The calligraphic italic carries emphasis. Italic replaces bold everywhere. */
.entry-content em,
.entry-content strong,
.entry-content b {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.06em;
}

.entry-content h2 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  margin: var(--space-8) 0 var(--space-5);
}

/* The small letterspaced label used inside article bodies. Excludes block
   post titles, which are also h3 and also live inside .entry-content on any
   page carrying a Query Loop. */
.entry-content h3:not(.wp-block-post-title) {
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin: var(--space-7) 0 var(--space-4);
}

.entry-content li {
  font-weight: var(--weight-light);
  line-height: var(--type-body-line);
  margin-bottom: var(--space-2);
}

.entry-content a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--hm-sea-glass);
  transition: color var(--duration-quiet) var(--ease-quiet),
              border-color var(--duration-quiet) var(--ease-quiet);
}

.entry-content a:hover {
  color: var(--text-link-hover);
  border-bottom-color: var(--hm-ochre);
}

/* Drop cap on the opening paragraph. Lands correctly even when a post opens
   with an image or heading block. A float on ::first-letter does not change the
   container's block flow, so this is safe for ad insertion. */
/* Plugins that prepend an affiliate disclaimer put their paragraph first, so
   the cap would land on the disclaimer. The disclaimer is a paragraph whose
   only child is an <em>; skip it and cap the paragraph after it instead. */
.single-post .entry-content > p:first-of-type:not(:has(> em:only-child))::first-letter,
.single-post .entry-content > p:first-of-type:has(> em:only-child) + p::first-letter,
.entry-content > p.has-drop-cap::first-letter {
  float: left;
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-style: normal;
  font-size: 68px;
  line-height: 0.76;
  color: var(--text-heading);
  padding: 8px 10px 0 0;
  -webkit-initial-letter: unset;
}

/* Images and captions inside posts. */
.entry-content .wp-block-image { margin: var(--space-7) 0; }

.entry-content .wp-block-image img {
  display: block;
  width: 100%;
  background: var(--surface-plate);
}

.entry-content figcaption,
.entry-content .wp-block-image figcaption {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-caption);
  margin-top: 14px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. Gutenberg block styles — the callouts
   Each of these is a core block wearing a registered Style, so the writer picks
   it from the editor sidebar and the markup stays ordinary.
   -------------------------------------------------------------------------- */

/* Eyebrow — a paragraph used as a label. */
.is-style-eyebrow {
  font-family: var(--font-text) !important;
  font-weight: var(--weight-regular);
  font-size: var(--type-eyebrow-size) !important;
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

/* Teach-the-eye note — core/group. The brand's signature module. */
.wp-block-group.is-style-teach-the-eye {
  background: var(--surface-plate);
  padding: var(--space-7);
  margin: var(--space-8) 0;
  border-left: 1px solid var(--hm-sea-glass);
}

.wp-block-group.is-style-teach-the-eye p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-body);
}

.wp-block-group.is-style-teach-the-eye p:last-child { margin-bottom: 0; }

.wp-block-group.is-style-teach-the-eye .is-style-eyebrow {
  margin-bottom: var(--space-4);
}

/* Pull quote — core/pullquote. The ochre branch is drawn by CSS so the block
   markup stays a stock pullquote with nothing unusual in it. */
.wp-block-pullquote.is-style-heirloom {
  margin: var(--space-8) 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

.wp-block-pullquote.is-style-heirloom::before {
  content: "";
  display: block;
  width: 200px;
  height: 20px;
  margin: 0 auto var(--space-5);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' fill='none' stroke='%23C08A3E' stroke-width='0.9' stroke-linecap='round'><path d='M6 11 C 40 10.8, 68 9.8, 88 7.6'/><path d='M194 11 C 160 10.8, 132 9.8, 112 7.6'/><path d='M100 17.6 C 99.6 13, 99.4 9.6, 99.8 4'/><path d='M99.6 10.4 C 95.4 9.2, 93.2 6.2, 93.2 2.4 C 97.4 3.8, 99.2 6.6, 99.8 10.2'/><path d='M100.2 10.6 C 104.4 9.2, 106.6 6.2, 106.8 2.4 C 102.4 4, 100.6 6.8, 100.1 10.4'/><circle cx='4.4' cy='11.1' r='1.1' fill='%23C08A3E' stroke='none'/><circle cx='195.6' cy='11.1' r='1.1' fill='%23C08A3E' stroke='none'/></svg>") no-repeat center / contain;
}

.wp-block-pullquote.is-style-heirloom blockquote {
  border: 0;
  margin: 0;
  padding: 0;
}

.wp-block-pullquote.is-style-heirloom blockquote p {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 34px;
  line-height: 1.34;
  color: var(--text-heading);
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.wp-block-pullquote.is-style-heirloom cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-text);
  font-style: normal;
  font-weight: var(--weight-regular);
  font-size: 10px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-caption);
}

/* Sourced strip — core/columns. The price reveal as a designed moment. */
.wp-block-columns.is-style-sourced {
  margin: var(--space-8) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  gap: 0;
}

.wp-block-columns.is-style-sourced .wp-block-column {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

.wp-block-columns.is-style-sourced .wp-block-column + .wp-block-column {
  border-left: var(--hairline-soft);
  padding-left: var(--space-5);
}

.wp-block-columns.is-style-sourced .is-style-eyebrow {
  font-size: 9px !important;
  letter-spacing: var(--track-micro);
  color: var(--text-caption);
  margin-bottom: var(--space-3);
}

/* The value line: the last paragraph in each column. */
.wp-block-columns.is-style-sourced .wp-block-column > p:last-child {
  font-family: var(--font-editorial);
  font-size: 21px;
  line-height: 1.35;
  color: var(--text-heading);
  margin: 0;
}

/* Ranked list — core/list with italic numerals. */
.wp-block-list.is-style-ranked {
  list-style: none;
  margin: var(--space-7) 0;
  padding: 0;
  counter-reset: hm-rank;
}

.wp-block-list.is-style-ranked li {
  counter-increment: hm-rank;
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--hairline-soft);
  margin: 0;
}

.wp-block-list.is-style-ranked li::before {
  content: counter(hm-rank, lower-roman);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 20px;
  color: var(--text-caption);
  min-width: 2ch;
}

/* Pillar row on pages. */
.wp-block-columns.hm-pillars { text-align: center; gap: var(--space-8); }
.wp-block-columns.hm-pillars h3,
.entry-content .wp-block-columns.hm-pillars h3 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.wp-block-columns.hm-pillars p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   3. Brand marks
   -------------------------------------------------------------------------- */
.hm-branch { display: block; height: auto; max-width: 100%; }
.hm-branch--center { margin-left: auto; margin-right: auto; }
.hm-branch--olive { color: var(--mark-default); }
.hm-branch--ochre { color: var(--mark-accent); }
.hm-branch--ivory { color: var(--mark-inverse); }

.hm-seal {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-seal);
  border: 1px solid var(--hm-turquoise);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hm-seal__letters {
  font-family: var(--font-logotype);
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: var(--text-heading);
}
.hm-seal__letters em { font-style: italic; }
.hm-seal .hm-branch { margin: 8px 0 6px; }
.hm-seal__name {
  font-family: var(--font-text);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.hm-seal--sm { width: 76px; height: 76px; }
.hm-seal--sm .hm-seal__letters { font-size: 27px; }
.hm-seal--sm .hm-branch { margin: 5px 0 0; }
.hm-seal--sm .hm-seal__name { display: none; }

/* --------------------------------------------------------------------------
   4. Core
   -------------------------------------------------------------------------- */
.hm-eyebrow {
  display: block;
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.hm-eyebrow--link { text-decoration: none; }
.hm-eyebrow--link:hover { color: var(--text-link-hover); }
.hm-eyebrow--ink { color: var(--hm-ink); }
.hm-eyebrow--muted { color: var(--text-caption); }
.hm-eyebrow--brass { color: var(--hm-brass); }

.hm-btn {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  background: var(--hm-turquoise);
  color: var(--text-on-inverse);
  transition: background var(--duration-quiet) var(--ease-quiet),
              color var(--duration-quiet) var(--ease-quiet);
}
.hm-btn:hover { background: var(--hm-ink); color: var(--text-on-inverse); }
.hm-btn--sm { font-size: 10px; padding: 10px 20px; }
.hm-btn--secondary { background: transparent; color: var(--text-heading); border: var(--hairline); }
.hm-btn--secondary:hover { background: var(--hm-linen); color: var(--text-heading); }
.hm-btn--ghost { background: transparent; color: var(--text-link); padding: 0; border: 0; }
.hm-btn--ghost:hover { background: transparent; color: var(--text-link-hover); }
.hm-btn--inverse { background: transparent; color: var(--text-on-inverse); border: var(--hairline-inverse); }
.hm-btn--inverse:hover { background: var(--hm-ivory); color: var(--hm-ink); }

.hm-tag-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-7); }

.hm-tag {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 14px;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--hm-sea-glass);
  color: var(--hm-ink);
  transition: background var(--duration-quiet) var(--ease-quiet);
}
.hm-tag:hover { background: var(--hm-sea-glass); color: var(--hm-ink); }

.hm-rule { height: 1px; width: 100%; background: var(--hairline-color); border: 0; margin: 0; }

.hm-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
.hm-column { max-width: 660px; margin: 0 auto; }
.hm-section { padding-bottom: var(--space-9); }
.hm-section--tall { padding-top: var(--space-9); }
.hm-section__body { margin-top: var(--space-7); }

.hm-grid { display: grid; }
.hm-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.hm-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.hm-grid--split { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; }
.hm-grid--half { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }

.hm-section-heading { padding-top: var(--space-7); }
.hm-section-heading__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: 20px;
}
.hm-section-heading__label { display: flex; align-items: baseline; gap: 18px; }
.hm-section-heading__index {
  font-family: var(--font-editorial);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-accent);
}
.hm-section-heading .hm-eyebrow { color: var(--text-heading); letter-spacing: 0.24em; }
.hm-section-heading__note {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 12px;
  color: var(--text-caption);
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.hm-card { display: block; text-decoration: none; color: inherit; }
.hm-card__frame {
  overflow: hidden;
  background: var(--surface-plate);
  aspect-ratio: 2 / 3;   /* reserves space before the image loads — CLS */
}
.hm-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 900ms var(--ease-quiet);
}
.hm-card:hover .hm-card__frame img { transform: scale(1.03); }
.hm-card .hm-eyebrow { margin-top: var(--space-5); }
.hm-card__title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 26px;
  line-height: 1.2;
  margin: var(--space-3) 0 0;
  color: var(--text-heading);
  transition: color var(--duration-quiet) var(--ease-quiet);
  text-wrap: pretty;
}
.hm-card:hover .hm-card__title { color: var(--text-link-hover); }
.hm-card__standfirst {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
  text-wrap: pretty;
}
.hm-card__meta {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-caption);
  margin-top: 14px;
}
.hm-card--sm .hm-card__title { font-size: 21px; }

/* --------------------------------------------------------------------------
   6. Single post furniture
   -------------------------------------------------------------------------- */
.hm-standfirst {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-line);
  color: var(--text-muted);
  margin: var(--space-5) auto 0;
  max-width: 36ch;
}

.single-post .entry-header .hm-branch { margin: var(--space-6) auto; }

.hm-byline {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-caption);
}

.hm-after-article { padding-top: var(--space-7); }
.hm-after-article__letter { padding-top: var(--space-7); padding-bottom: var(--space-7); }

.hm-author {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--hairline);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.hm-author p {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

.hm-related { padding-bottom: var(--space-9); }
.hm-related .hm-grid { margin-top: var(--space-6); }

/* The Letter. The form itself is a Flodesk embed in the widget area. */
.hm-signup {
  background: var(--surface-plate);
  padding: 70px var(--page-pad);
  text-align: center;
}
.hm-signup .hm-branch { margin: 0 auto 26px; }
.hm-signup h2 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 40px;
  line-height: 1.2;
  margin: var(--space-4) 0 0;
}
.hm-signup p {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.9;
  max-width: 44ch;
  margin: 18px auto 0;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hm-signup__embed { max-width: 520px; margin: var(--space-7) auto 0; }

.hm-signup--turquoise { background: var(--surface-inverse-alt); }
.hm-signup--turquoise h2 { color: var(--text-on-inverse); }
.hm-signup--turquoise p { color: rgba(251, 248, 242, 0.82); }

/* --------------------------------------------------------------------------
   7. Archive
   -------------------------------------------------------------------------- */
.hm-archive-head { text-align: center; padding: 70px 0 var(--space-7); }
.hm-archive-head__title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  margin: var(--space-5) 0 0;
}
.hm-archive-head .hm-branch { margin: var(--space-6) auto; }
.hm-archive-head__intro {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-line);
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 46ch;
}
.hm-archive-head__intro p { margin: 0; }

.hm-subnav {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-6);
}
.hm-subnav a {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-caption);
  transition: color var(--duration-quiet) var(--ease-quiet);
}
.hm-subnav a:hover { color: var(--text-heading); }

/* ---- The archive post list ------------------------------------------------
   Astra renders archives with its own blog layout: one <article
   class="ast-article-post"> per post inside <main class="site-main">. Rather
   than override Astra's template, the list is laid out as the design's card
   grid here, in CSS.

   Grid on .site-main is safe: it is the archive listing container, not
   .entry-content, so it has no bearing on in-content ad insertion.

   Set Customizer → Blog → Blog Archive → Meta to "Category" only. The excerpt
   and read-more link are hidden below in case they are left switched on.
   -------------------------------------------------------------------------- */
/* Astra wraps the loop in <div class="ast-row"> inside <main class="site-main">
   and lays the posts out with flex widths. The grid goes on .ast-row, and the
   article's own width is neutralised so the grid controls the columns. */
.archive .site-main .ast-row,
.blog .site-main .ast-row,
.search-results .site-main .ast-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-6);
  align-items: start;
  margin: 0;
}

.archive .site-main .ast-row > *,
.blog .site-main .ast-row > *,
.search-results .site-main .ast-row > * {
  width: 100%;
  max-width: none;
  flex: none;
  padding: 0;
}

.archive .ast-article-post,
.blog .ast-article-post,
.search-results .ast-article-post {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.archive .ast-article-post .blog-layout-1,
.blog .ast-article-post .blog-layout-1 { padding: 0; }

/* The photograph is the card. 2:3, cropped, with the quiet hover scale. */
.archive .ast-blog-featured-section,
.blog .ast-blog-featured-section {
  margin: 0 0 var(--space-5);
  overflow: hidden;
  background: var(--surface-plate);
  aspect-ratio: 2 / 3;
}

.archive .ast-blog-featured-section img,
.blog .ast-blog-featured-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 900ms var(--ease-quiet);
}

.archive .ast-article-post:hover .ast-blog-featured-section img,
.blog .ast-article-post:hover .ast-blog-featured-section img { transform: scale(1.03); }

/* Category line, from Astra's post meta. */
.archive .ast-taxonomy-container,
.blog .ast-taxonomy-container {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.archive .ast-taxonomy-container a,
.blog .ast-taxonomy-container a {
  color: var(--text-eyebrow);
  text-decoration: none;
}
.archive .ast-taxonomy-container a:hover,
.blog .ast-taxonomy-container a:hover { color: var(--text-link-hover); }

.archive .ast-article-post .entry-title,
.blog .ast-article-post .entry-title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 21px;
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}

.archive .ast-article-post .entry-title a,
.blog .ast-article-post .entry-title a {
  color: var(--text-heading);
  text-decoration: none;
  transition: color var(--duration-quiet) var(--ease-quiet);
}

.archive .ast-article-post:hover .entry-title a,
.blog .ast-article-post:hover .entry-title a { color: var(--text-link-hover); }

/* The design's cards carry no excerpt and no read-more link. */
.archive .ast-article-post .ast-excerpt-container,
.blog .ast-article-post .ast-excerpt-container,
.archive .ast-article-post .entry-content,
.blog .ast-article-post .entry-content,
.archive .ast-article-post .read-more,
.blog .ast-article-post .read-more { display: none; }

/* Astra's post meta line, kept small and quiet where it is shown. */
.archive .ast-article-post .entry-meta,
.blog .ast-article-post .entry-meta {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 12px;
  color: var(--text-caption);
  margin-top: 14px;
}
.archive .ast-article-post .entry-meta a,
.blog .ast-article-post .entry-meta a { color: var(--text-caption); text-decoration: none; }

/* Pagination. */
.ast-pagination .page-numbers {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 0;
}
.ast-pagination .page-numbers.current { color: var(--text-accent); }

/* --------------------------------------------------------------------------
   8. Home page blocks

   The home page is an ordinary page built from Query Loop blocks, so every
   section is editable in Gutenberg. These rules style the output of core
   blocks; there is no theme markup involved.
   -------------------------------------------------------------------------- */

/* The branch, as a separator block. Insertable anywhere.

   Core ships `.wp-block-separator:not(.is-style-wide):not(.is-fullwidth)` at
   width 100px, which is one class more specific than a plain style selector.
   Matching that shape is what makes the branch keep its 200px. */
.wp-block-separator.is-style-branch,
.wp-block-separator.is-style-branch:not(.is-style-wide):not(.is-fullwidth) {
  border: 0 !important;   /* core sets border-top/bottom on every separator */
  height: 20px;
  min-height: 20px;
  width: 200px;
  max-width: 200px;
  margin: 26px 0;
  opacity: 1;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' fill='none' stroke='%23C08A3E' stroke-width='0.9' stroke-linecap='round'><path d='M6 11 C 40 10.8, 68 9.8, 88 7.6'/><path d='M194 11 C 160 10.8, 132 9.8, 112 7.6'/><path d='M100 17.6 C 99.6 13, 99.4 9.6, 99.8 4'/><path d='M99.6 10.4 C 95.4 9.2, 93.2 6.2, 93.2 2.4 C 97.4 3.8, 99.2 6.6, 99.8 10.2'/><path d='M100.2 10.6 C 104.4 9.2, 106.6 6.2, 106.8 2.4 C 102.4 4, 100.6 6.8, 100.1 10.4'/><circle cx='4.4' cy='11.1' r='1.1' fill='%23C08A3E' stroke='none'/><circle cx='195.6' cy='11.1' r='1.1' fill='%23C08A3E' stroke='none'/></svg>") no-repeat center / contain;
}

.has-text-align-center > .wp-block-separator.is-style-branch,
.is-style-letter .wp-block-separator.is-style-branch,
.is-style-letter .wp-block-separator.is-style-branch:not(.is-style-wide):not(.is-fullwidth),
.hm-about-head .wp-block-separator.is-style-branch:not(.is-style-wide):not(.is-fullwidth) {
  margin-left: auto;
  margin-right: auto;
}

/* Category line printed by a Query Loop. */
.wp-block-post-terms.is-style-eyebrow,
.wp-block-post-terms.is-style-eyebrow a {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
  text-decoration: none;
  border: 0;
}
.wp-block-post-terms.is-style-eyebrow a:hover { color: var(--text-link-hover); }

/* Read more, styled as the primary button.

   Scoped under .entry-content as well, because the editorial link rule in
   section 1 (`.entry-content a`) is more specific than a lone block class and
   would otherwise paint the button's text turquoise on turquoise. */
.wp-block-read-more,
.entry-content .wp-block-read-more {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  background: var(--hm-turquoise);
  color: var(--text-on-inverse);
  transition: background var(--duration-quiet) var(--ease-quiet);
}
.wp-block-read-more:hover,
.entry-content .wp-block-read-more:hover { background: var(--hm-ink); color: var(--text-on-inverse); }

.entry-content .wp-block-read-more { border-bottom: 1px solid transparent; }

/* Section heading. */
.wp-block-group.is-style-section-heading {
  border-top: var(--hairline);
  padding-top: 20px;
  margin-top: var(--space-9);
  align-items: baseline;
}
.wp-block-group.is-style-section-heading .hm-section-label { gap: 18px; align-items: baseline; }
.wp-block-group.is-style-section-heading .hm-index {
  font-family: var(--font-editorial);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-accent);
  margin: 0;
}
.wp-block-group.is-style-section-heading .is-style-eyebrow {
  color: var(--text-heading);
  letter-spacing: 0.24em;
  margin: 0;
}
.wp-block-group.is-style-section-heading .hm-section-note {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 12px;
  color: var(--text-caption);
  margin: 0;
}

/* Lead story. */
.wp-block-query.is-style-lead { margin: var(--space-9) 0; }
.wp-block-query.is-style-lead .wp-block-post-title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: normal;
  text-transform: none;
  margin: var(--space-5) 0 0;
}
.wp-block-query.is-style-lead .wp-block-post-title a {
  color: var(--text-heading);
  text-decoration: none;
  border: 0;
}
.wp-block-query.is-style-lead .wp-block-post-title a:hover { color: var(--text-link-hover); }
.wp-block-query.is-style-lead .wp-block-post-excerpt__excerpt {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-standfirst-size);
  line-height: var(--type-standfirst-line);
  color: var(--text-muted);
  max-width: 34ch;
  text-wrap: pretty;
}
.wp-block-query.is-style-lead .wp-block-post-excerpt__more-text { display: none; }
.wp-block-query.is-style-lead .wp-block-post-featured-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.wp-block-query.is-style-lead .wp-block-read-more { margin-top: var(--space-6); }

/* Article cards. */
.wp-block-query.is-style-cards { margin: var(--space-7) 0 var(--space-9); }

.wp-block-query.is-style-cards .wp-block-post-template {
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-query.is-style-cards .wp-block-post-featured-image {
  overflow: hidden;
  background: var(--surface-plate);
  margin: 0;
}
.wp-block-query.is-style-cards .wp-block-post-featured-image img {
  width: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 900ms var(--ease-quiet);
}
.wp-block-query.is-style-cards li:hover .wp-block-post-featured-image img { transform: scale(1.03); }

.wp-block-query.is-style-cards .wp-block-post-terms { margin-top: var(--space-5); display: block; }

.wp-block-query.is-style-cards .wp-block-post-title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  margin: var(--space-3) 0 0;
  text-wrap: pretty;
}
.wp-block-query.is-style-cards .wp-block-post-title a {
  color: var(--text-heading);
  text-decoration: none;
  border: 0;
  transition: color var(--duration-quiet) var(--ease-quiet);
}
.wp-block-query.is-style-cards li:hover .wp-block-post-title a { color: var(--text-link-hover); }

.wp-block-query.is-style-cards .wp-block-post-excerpt__excerpt {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
  text-wrap: pretty;
}
.wp-block-query.is-style-cards .wp-block-post-excerpt__more-text { display: none; }

/* Four across gets the smaller headline. */
.wp-block-query.is-style-cards .wp-block-post-template.columns-4 .wp-block-post-title,
.wp-block-query.is-style-cards .wp-block-post-template[style*="repeat(4"] .wp-block-post-title {
  font-size: 21px;
}

/* The sea glass band. */
.wp-block-group.is-style-band {
  background: var(--surface-tint);
  padding: 70px var(--page-pad);
  margin: 50px 0;
}
.wp-block-group.is-style-band > .wp-block-query {
  max-width: var(--page-max);
  margin: 0 auto;
}
.wp-block-group.is-style-band .wp-block-post-featured-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.wp-block-group.is-style-band .wp-block-post-title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: normal;
  text-transform: none;
  margin: 18px 0 0;
}
.wp-block-group.is-style-band .wp-block-post-title a {
  color: var(--hm-ink);
  text-decoration: none;
  border: 0;
}
.wp-block-group.is-style-band .is-style-eyebrow { color: var(--hm-ink); }
.wp-block-group.is-style-band .wp-block-post-excerpt__excerpt {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.9;
  color: var(--hm-ink);
  opacity: 0.78;
  max-width: 40ch;
}
.wp-block-group.is-style-band .wp-block-post-excerpt__more-text { display: none; }
.wp-block-group.is-style-band .wp-block-read-more,
.entry-content .is-style-band .wp-block-read-more {
  background: transparent;
  color: var(--hm-ink);
  border: 1px solid rgba(46, 44, 40, 0.28);
  margin-top: var(--space-6);
}
.wp-block-group.is-style-band .wp-block-read-more:hover {
  background: var(--hm-linen);
  color: var(--hm-ink);
}

/* The Letter plate. */
.wp-block-group.is-style-letter {
  background: var(--surface-plate);
  padding: 70px var(--page-pad);
  margin: var(--space-9) 0;
  text-align: center;
}
.wp-block-group.is-style-letter h2 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: 40px;
  line-height: 1.2;
  margin: var(--space-4) 0 0;
}
.wp-block-group.is-style-letter > p {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.9;
  max-width: 44ch;
  margin: 18px auto 0;
  color: var(--text-muted);
}
.wp-block-group.is-style-letter .wp-block-html,
.wp-block-group.is-style-letter form {
  max-width: 520px;
  margin: var(--space-7) auto 0;
}

/* Pillar row. */
.wp-block-columns.hm-pillars { margin: var(--space-7) 0 var(--space-9); }

/* The ghost link under each pillar. Specific enough to beat the editorial
   link rule in section 1, which would otherwise add the sea glass underline. */
.wp-block-columns.hm-pillars .hm-pillar-link { margin-top: var(--space-4); }

.wp-block-columns.hm-pillars .hm-pillar-link a,
.entry-content .hm-pillars .hm-pillar-link a {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 10px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0;
  color: var(--text-link);
  transition: color var(--duration-quiet) var(--ease-quiet);
}

.wp-block-columns.hm-pillars .hm-pillar-link a:hover,
.entry-content .hm-pillars .hm-pillar-link a:hover {
  color: var(--text-link-hover);
  border-bottom: 0;
}

/* ---- About page -----------------------------------------------------------
   Built from blocks like any other page, so these are the few classes its
   pattern applies.
   -------------------------------------------------------------------------- */
.hm-about-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hm-about-head { text-align: center; margin-top: var(--space-8); }

.hm-about-head h1 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  margin: var(--space-5) 0 0;
}

.hm-about-head .hm-standfirst { margin-left: auto; margin-right: auto; }

.entry-content p.hm-lead-para { font-size: 19px; }

.hm-about-seal {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0;
}

/* --------------------------------------------------------------------------
   9. Astra surfaces
   The only place in this file that depends on Astra's own class names. If a
   future Astra release renames something, the symptom will be here and nowhere
   else. Everything above uses brand or WordPress core classes.
   -------------------------------------------------------------------------- */

/* Header — Astra's Header Builder supplies the structure; this is type only. */
.ast-primary-header-bar,
.ast-below-header-bar {
  border-bottom: var(--hairline);
  background: var(--surface-page);
}

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--text-link-hover);
}

/* Active navigation is marked by a 1px ochre underline, never a background. */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
  box-shadow: inset 0 -1px 0 0 var(--hm-ochre);
}

/* Nothing is fixed or sticky — the header scrolls away with the page. */
.ast-primary-header-bar { position: static !important; }

/* Article header, centered on the 660px measure.

   Astra's dynamic CSS emits `header.entry-header:not(.related-entry-header) *`
   with a specificity of (0,2,1), which colours every child of the header and
   forces left alignment. These selectors mirror that shape one class higher so
   the brand wins on cascade rather than on !important. If Astra ever renames
   .entry-header, this block is the first place to look. */
.single-post header.entry-header:not(.related-entry-header) {
  text-align: center;
  max-width: 660px;
  margin: 0 auto var(--space-7);
}

.single-post header.entry-header:not(.related-entry-header) .entry-title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  color: var(--text-heading);
  margin: var(--space-5) 0 0;
}

.single-post header.entry-header:not(.related-entry-header) .hm-eyebrow { color: var(--text-eyebrow); }
.single-post header.entry-header:not(.related-entry-header) .hm-standfirst { color: var(--text-muted); }
.single-post header.entry-header:not(.related-entry-header) .hm-byline { color: var(--text-caption); }
.single-post header.entry-header:not(.related-entry-header) .hm-branch { color: var(--mark-accent); }

/* Astra spaces header children by 10px; the design uses its own rhythm. */
.single-post header.entry-header:not(.related-entry-header) > *:not(:last-child) { margin-bottom: 0; }

/* ---- Footer masthead ------------------------------------------------------
   The reversed stacked lockup in the above-footer row. Astra's HTML element
   runs its field through kses, which strips inline SVG, so the arched branch
   is a CSS background rather than markup.
   -------------------------------------------------------------------------- */
.hm-footer-masthead {
  text-align: center;
  padding: var(--space-6) 0 var(--space-2);
  font-size: 34px;
}

.hm-footer-masthead::before {
  content: "";
  display: block;
  width: 211px;
  height: 23px;
  margin: 0 auto 22px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 46' fill='none' stroke='%23FBF8F2' stroke-width='1.15' stroke-linecap='round'><path d='M14 40 C 110 6, 310 6, 406 40'/><path d='M82 24 C 70 20.5, 65.5 14, 68 7.5 C 74.5 11.5, 80 17, 82 24'/><path d='M144 17 C 135.5 22, 133.5 28.5, 140 34.5 C 143.5 27.5, 145 21.5, 144 17'/><path d='M210 15 C 203.5 10, 203.5 4, 209 1 C 213.5 5, 213 10.5, 210 15'/><path d='M276 17 C 284.5 22, 286.5 28.5, 280.5 34.5 C 277.5 27.5, 275 21.5, 276 17'/><path d='M338 24 C 350 20.5, 354.5 14, 352 7.5 C 345.5 11.5, 340 17, 338 24'/><circle cx='13.4' cy='40.4' r='1.5' fill='%23FBF8F2' stroke='none'/><circle cx='406.6' cy='40.4' r='1.5' fill='%23FBF8F2' stroke='none'/></svg>") no-repeat center / contain;
}

.hm-footer-masthead .hm-fm-the,
.hm-footer-masthead .hm-fm-line {
  display: block;
  font-family: var(--font-logotype);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  color: var(--text-on-inverse);
}

.hm-footer-masthead .hm-fm-the {
  font-size: 0.41em;
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 8px;
}

.hm-footer-masthead .hm-fm-line {
  font-size: 1em;
  line-height: 1.06;
  letter-spacing: var(--track-masthead);
  text-indent: var(--track-masthead);
}

.hm-footer-masthead .hm-fm-italic { font-style: italic; }

.hm-footer-masthead .hm-fm-tagline {
  display: block;
  margin-top: 18px;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.8);
}

/* The three link columns. */
.hm-footer-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.hm-footer-tagline {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.5);
}

/* Footer on ink. */
.site-footer,
.ast-footer-overlay,
.site-below-footer-wrap,
.site-primary-footer-wrap {
  background: var(--surface-inverse);
  color: rgba(251, 248, 242, 0.78);
}

.site-primary-footer-wrap a,
.site-below-footer-wrap a {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 13px;
  color: rgba(251, 248, 242, 0.78);
  text-decoration: none;
}

.site-primary-footer-wrap a:hover,
.site-below-footer-wrap a:hover { color: var(--hm-brass); }

.site-primary-footer-wrap .widget-title,
.site-primary-footer-wrap .widget .widget-title,
.ast-builder-footer-grid-columns .widget-title {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 9px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--hm-brass);
}

.site-below-footer-wrap {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.5);
  border-top: 1px solid rgba(251, 248, 242, 0.16);
}

/* The home page is an ordinary page in Astra's container, so it needs no
   special treatment. Only the sea glass band breaks out, via alignfull. */
.wp-block-group.alignfull.is-style-band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Elevation does not exist in this system. */
.ast-article-post,
.ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  box-shadow: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --page-pad: 32px; }
  .hm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .archive .site-main .ast-row,
  .blog .site-main .ast-row,
  .search-results .site-main .ast-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --type-h1-size: 40px; --type-h2-size: 32px; --type-standfirst-size: 19px; }
  .hm-grid--3,
  .hm-grid--split,
  .hm-grid--half,
  .hm-pillars { grid-template-columns: 1fr; gap: var(--space-7); }
  .wp-block-columns.is-style-sourced { display: block; }
  .wp-block-columns.is-style-sourced .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: var(--hairline-soft);
    padding-left: 0;
  }
  .wp-block-pullquote.is-style-heirloom blockquote p { font-size: 27px; }
  .hm-signup h2, .hm-band h2 { font-size: 30px; }
  .single-post .entry-content > p:first-of-type::first-letter { font-size: 58px; }
}

@media (max-width: 560px) {
  :root { --page-pad: 20px; }
  .hm-grid--4 { grid-template-columns: 1fr; }
  .archive .site-main .ast-row,
  .blog .site-main .ast-row,
  .search-results .site-main .ast-row { grid-template-columns: 1fr; }
  .hm-author { flex-direction: column; gap: var(--space-5); }
}