/* Stoke Tiles redesign: content pages (design coverage round, client5).

   The generic page and the templates that share its parts. No design of
   their own: the head and help line follow the FAQ page, the breadcrumb is
   the product page's light one, and the prose uses the design's type scale.
   Every colour is a token; the only literal colours are inside the SVG data
   URIs, as with the select chevron in st-components.css. */

/* ------------------------------------------------------------------ Page */

.st-page { background: var(--st-ivory); padding: 24px 0 104px; overflow-wrap: break-word; }
.st-page__crumbs { min-height: var(--st-tap-min); display: flex; align-items: center; margin-bottom: 20px; }
/* The light breadcrumb, as st-product.css draws it (that sheet is product only). */
.st-page__crumbs .st-crumbs--light a { color: var(--st-taupe); }
.st-page__crumbs .st-crumbs--light a:hover { color: var(--st-espresso); }
.st-page__crumbs .st-crumbs--light li[aria-hidden] { color: var(--st-taupe); }
.st-page__crumbs .st-crumbs--light [aria-current] { color: var(--st-espresso); }
.st-page__head { margin-bottom: 40px; }
.st-page__heading { max-width: 880px; }
.st-page__title { color: var(--st-espresso); }
.st-page__intro { margin: 8px 0 0; font-size: var(--st-body-l); line-height: 1.6; font-weight: 300; color: var(--st-taupe); }

.st-page__hero { margin: 0 0 56px; background: var(--st-stone); }
.st-page__hero img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }

.st-page__products { margin-top: 72px; display: flex; flex-direction: column; gap: 32px; }

.st-page__help {
  max-width: 880px;
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--st-divider);
  font-size: var(--st-body);
  line-height: 1.6;
  color: var(--st-espresso);
}
.st-page__help a { color: var(--st-bronze); text-decoration: underline; text-underline-offset: 3px; }
.st-page__help a:hover { color: var(--st-espresso); }

/* ----------------------------------------------------------------- Prose

   Text the client writes in the editor. The column is about 70 characters
   of Jost at the design's large body size. Headings in the copy are mostly
   h3/h4 used as section titles, so they are all Cormorant, one step apart. */

.st-article {
  max-width: 760px;
  font-size: var(--st-body-l);
  line-height: 1.7;
  font-weight: 300;
  color: var(--st-espresso);
}
.st-article > :first-child { margin-top: 0; }
.st-article > :last-child { margin-bottom: 0; }
.st-article p { margin: 0 0 1.1em; }
.st-article :where(h1, h2, h3, h4) {
  font-family: var(--st-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--st-espresso);
  margin: 1.6em 0 0.5em;
}
.st-article :where(h1, h2) { font-size: 36px; }
.st-article h3 { font-size: 30px; }
.st-article h4 { font-size: 26px; }
.st-article :where(h5, h6) {
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  color: var(--st-bronze);
  margin: 1.8em 0 0.6em;
}
/* A heading wrapped round a bold run reads the same without the extra weight. */
.st-article :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
.st-article :where(strong, b) { font-weight: 500; }
.st-article em { font-style: italic; }

.st-article a { color: var(--st-bronze); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.st-article a:hover { color: var(--st-espresso); }

.st-article :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.3em; }
.st-article ul > li { list-style: disc outside; }
.st-article ol > li { list-style: decimal outside; }
.st-article li { margin: 0 0 0.45em; padding-left: 0.2em; }
.st-article li > p { margin: 0; }
.st-article li::marker { color: var(--st-bronze); }

.st-article blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 28px;
  font-family: var(--st-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 400;
}
.st-article blockquote p:last-child { margin-bottom: 0; }

.st-article hr { height: 1px; border: 0; background: var(--st-divider); margin: 2em 0; }

/* Tables scroll on their own rather than pushing the page sideways. */
.st-article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: var(--st-body);
  line-height: 1.5;
}
.st-article :where(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--st-linen); text-align: left; vertical-align: top; }
.st-article th { font-weight: 500; background: var(--st-panel); }

/* Images: the editor's alignment classes, and captions. */
.st-article img { max-width: 100%; height: auto; }
.st-article :where(iframe, video, embed, object) { max-width: 100%; }
.st-article .aligncenter { display: block; margin: 1.6em auto; }
.st-article .alignleft { float: left; margin: 0.4em 28px 16px 0; }
.st-article .alignright { float: right; margin: 0.4em 0 16px 28px; }
.st-article .wp-caption { max-width: 100%; margin-bottom: 1.4em; }
.st-article :where(.wp-caption-text, figcaption) { margin-top: 8px; font-size: var(--st-small); line-height: 1.5; color: var(--st-taupe); }
.st-article::after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------- Content rows

   The ACF `content_blocks` rows (st_render_content_blocks()). */

.st-blocks { display: flex; flex-direction: column; }
.st-blocks > .st-block + .st-block { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--st-divider); }

.st-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.st-feature--media-right .st-feature__media { order: 2; }
.st-feature--text-only { grid-template-columns: minmax(0, 1fr); }
.st-feature__title {
  margin: 0 0 20px;
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--st-espresso);
}
.st-feature__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--st-stone); }

/* Image grid: squares, two across; with an odd count the first runs the full
   width so the grid has no hole. */
.st-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-gallery-grid__item { display: block; overflow: hidden; background: var(--st-stone); aspect-ratio: 1 / 1; }
.st-gallery-grid--odd .st-gallery-grid__item:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.st-gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.st-gallery-grid__item:hover img { transform: scale(1.03); }
.st-gallery-grid__item:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }

/* The ACF gallery row, still drawn by parts/content/gallery.php (its Slick
   carousel is not loaded on rebuilt pages): a grid of squares. */
.st-block--gallery .page-gallery .container { max-width: none; width: auto; padding: 0; }
.st-block--gallery :is(.gallery-slider, .gallery-slider-auto) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.st-block--gallery a.img { display: flex; flex-direction: column; gap: 8px; color: var(--st-taupe); }
.st-block--gallery a.img figure { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; background: var(--st-stone); }
.st-block--gallery a.img img { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; transition: transform 600ms ease; } /* live Additional CSS caps .single-post .page-gallery img at 380px */
.st-block--gallery a.img:hover img { transform: scale(1.03); }
.st-block--gallery a.img figcaption { font-size: var(--st-small); line-height: 1.4; }
.st-block--gallery a.img figcaption:empty { display: none; }

/* custom_tiles row: picture cards. */
.st-tilecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.st-tilecard { display: flex; flex-direction: column; gap: 16px; }
.st-tilecard__media { display: block; overflow: hidden; background: var(--st-stone); aspect-ratio: 4 / 3; }
.st-tilecard__media img { width: 100%; height: 100%; object-fit: cover; }
.st-tilecard__text { font-size: var(--st-body); }
.st-tilecard .st-link { align-self: flex-start; }

/* Old parts with no rebuilt version: kept readable, never wider than the page. */
.st-block--legacy { max-width: 100%; overflow: hidden; }
.st-block--legacy img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------- Lightbox */

.st-zoom {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--st-white);
}
.st-zoom::backdrop { background: rgba(31, 28, 25, 0.92); }
.st-zoom[open] { display: flex; align-items: center; justify-content: center; }
.st-zoom__img { max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; }
.st-zoom__btn {
  position: absolute;
  width: var(--st-control-h);
  height: var(--st-control-h);
  border-radius: 50%;
  border: 1px solid var(--st-white);
  background: transparent;
  color: var(--st-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.st-zoom__btn:hover { background: var(--st-white); color: var(--st-espresso); }
.st-zoom__btn:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-zoom__close { top: 20px; right: 20px; }
.st-zoom__prev { left: 20px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.st-zoom__next { right: 20px; top: 50%; transform: translateY(-50%); }
.st-zoom__btn[hidden] { display: none; }
.st-zoom__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: var(--st-small); color: var(--st-on-dark-muted); }

/* ------------------------------------------------------------ CF7 forms

   Contact Form 7 forms inside a rebuilt page (the contact form on the tile
   fitting page and the contact page) are drawn like the Porcelanosa request
   form (.st-request--cf7): a white panel, the design's 52px fields, inline
   errors and a sage submit. The forms keep their own markup; only CF7's and
   the editor's wrappers are reset. */

.st-page .wpcf7 {
  max-width: 640px;
  margin: 32px 0;
  padding: 28px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  font-size: var(--st-body);
  font-weight: 400;
  line-height: 1.5;
}
.st-page .wpcf7-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.st-page .wpcf7-form p { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; color: inherit; } /* live Additional CSS sets .wpcf7-form p to 11pt grey */
.st-page .wpcf7-form br { display: none; }
.st-page .wpcf7-form > div[style] { margin: 0 !important; }
.st-page .wpcf7 .hidden-fields-container { display: none; }
.st-page .wpcf7-form-control-wrap { display: block; position: relative; }

.st-page .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea) {
  display: block;
  width: 100%;
  height: var(--st-control-h);
  margin: 0;
  padding: 0 16px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  font-family: var(--st-sans);
  font-size: var(--st-body);
  font-weight: 400;
  color: var(--st-espresso);
  box-sizing: border-box;
  box-shadow: none;
}
.st-page .wpcf7 :is(textarea, textarea.wpcf7-form-control) { height: 168px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
/* The honeypot's own paragraph would otherwise leave a double gap in the flex column. */
.st-page .wpcf7-form p:has(> .cf7apps-honeypot-wrap) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); margin: -1px; }
.st-page .wpcf7 :is(input, textarea)::placeholder { color: var(--st-taupe); opacity: 1; }
.st-page .wpcf7 :is(input, select, textarea):focus { outline: 3px solid var(--st-focus); outline-offset: 0; border-color: var(--st-espresso); }
.st-page .wpcf7 .wpcf7-not-valid { border-color: var(--st-alert); }

.st-page .wpcf7 .wpcf7-quiz-label { display: block; margin-bottom: 8px; font-size: var(--st-small); font-weight: 500; }
.st-page .wpcf7 .wpcf7-list-item { display: block; margin: 0; }
.st-page .wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--st-small); line-height: 1.5; color: var(--st-taupe); }
.st-page .wpcf7 input[type="checkbox"],
.st-page .wpcf7 input[type="radio"] { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--st-sage); }

.st-page .wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--st-alert); }

.st-page .wpcf7 form .wpcf7-response-output {
  order: -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--st-linen);
  background: var(--st-white);
  font-size: 15px;
  line-height: 1.5;
  color: var(--st-espresso);
}
.st-page .wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--st-alert); color: var(--st-alert); }
.st-page .wpcf7 form.sent .wpcf7-response-output { border-color: var(--st-success); color: var(--st-success); }
.st-page .wpcf7 form.init .wpcf7-response-output:empty { display: none; }

/* The submit: CF7 draws an <input>, so the button is restated here. */
.st-page .wpcf7 p:has(> .wpcf7-submit) { position: relative; }
.st-page .wpcf7 .wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--st-control-h);
  padding: 0 32px;
  border: 0;
  border-radius: var(--st-radius);
  background: var(--st-sage);
  color: var(--st-white);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}
.st-page .wpcf7 .wpcf7-submit:hover { background: var(--st-sage-dark); }
.st-page .wpcf7 .wpcf7-submit:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-page .wpcf7 .wpcf7-submit:disabled { opacity: 0.6; cursor: wait; }
.st-page .wpcf7 .wpcf7-spinner { position: absolute; top: 14px; right: 16px; margin: 0; }

/* ---------------------------------------------------- Site Reviews form

   The [site_reviews_form] on Write a review. The plugin's settings are left
   alone; its CSS custom properties are pointed at the design's tokens, and
   its stars at the design's star (gold, linen when empty). */

.st-page .glsr {
  --glsr-text-base: var(--st-body);
  --glsr-text-sm: var(--st-small);
  --glsr-form-row-gap: 20px;
  --glsr-form-star: 32px;
  --glsr-form-error: var(--st-alert);
  --glsr-form-success: var(--st-success);
  --glsr-input-bg: var(--st-white);
  --glsr-input-border-color: var(--st-linen);
  --glsr-input-color: var(--st-espresso);
  --glsr-input-radius: var(--st-radius);
  --glsr-input-pt: 0;
  --glsr-input-pb: 0;
  --glsr-input-pl: 16px;
  --glsr-input-pr: 16px;
  --glsr-label-text: var(--st-small);
  --glsr-label-weight: 500;
  --glsr-toggle-bg: var(--st-linen);
  --glsr-toggle-opacity: 1;
  --glsr-toggled-bg: var(--st-sage);
  --glsr-star-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B08D57' d='M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z'/%3E%3C/svg%3E");
  --glsr-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23B08D57' stroke-width='1.2' d='M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z'/%3E%3C/svg%3E");
  --glsr-star-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%239B2C1F' stroke-width='1.2' d='M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z'/%3E%3C/svg%3E");
  max-width: 640px;
  font-family: var(--st-sans);
  font-size: var(--st-body);
  font-weight: 400;
  color: var(--st-espresso);
}
.st-page .glsr-form-wrap { padding: 28px; background: var(--st-white); border: 1px solid var(--st-linen); }
.st-page form.glsr-form .glsr-label { display: block; margin-bottom: 8px; font-size: var(--st-small); font-weight: 500; color: var(--st-espresso); }
.st-page form.glsr-form :is(input.glsr-input, select.glsr-select) { height: var(--st-control-h); font-family: var(--st-sans); font-size: var(--st-body); }
.st-page form.glsr-form textarea.glsr-textarea { min-height: 168px; padding: 14px 16px; font-family: var(--st-sans); font-size: var(--st-body); line-height: 1.6; }
.st-page form.glsr-form :is(input, textarea)::placeholder { color: var(--st-taupe); opacity: 1; }
.st-page form.glsr-form :is(input.glsr-input, textarea.glsr-textarea, select.glsr-select):focus { outline: 3px solid var(--st-focus); outline-offset: 0; border-color: var(--st-espresso); box-shadow: none; }
.st-page form.glsr-form .glsr-field-toggle label { font-size: var(--st-small); line-height: 1.5; color: var(--st-taupe); }
.st-page form.glsr-form .glsr-field-error { font-size: 13px; color: var(--st-alert); }
.st-page form.glsr-form .glsr-star-rating--stars > span { margin-right: 4px; }
.st-page form.glsr-form .wp-block-buttons { display: block; margin: 8px 0 0; }
.st-page form.glsr-form .wp-block-button { display: block; margin: 0; }
.st-page form.glsr-form .glsr-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--st-control-h);
  padding: 0 32px;
  border: 0;
  border-radius: var(--st-radius);
  background: var(--st-sage);
  color: var(--st-white);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}
.st-page form.glsr-form .glsr-button:hover { background: var(--st-sage-dark); color: var(--st-white); }
.st-page form.glsr-form .glsr-button:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-page .glsr-form-message { font-size: 15px; line-height: 1.5; }
.st-page .glsr-form-message:not(:empty) { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--st-linen); }

/* --------------------------------------------------------------- Contact */

.st-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.st-contact__grid--no-form { grid-template-columns: minmax(0, 1fr); }
.st-contact__list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--st-linen); }
.st-contact__item { padding: 24px 0; border-bottom: 1px solid var(--st-linen); display: flex; flex-direction: column; gap: 10px; }
.st-contact__item dd { margin: 0; }
.st-contact__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--st-eyebrow);
  font-weight: 400;
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
  color: var(--st-bronze);
}
.st-contact__label svg { color: var(--st-espresso); flex-shrink: 0; }
.st-contact__value { font-family: var(--st-serif); font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--st-espresso); text-decoration: none; }
.st-contact__value:hover { color: var(--st-bronze); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.st-contact__text { font-size: var(--st-body-l); font-weight: 300; line-height: 1.6; color: var(--st-espresso); }
.st-contact__text address { font-style: normal; margin: 0 0 12px; }
.st-contact__form { min-width: 0; }
.st-contact__form-title { margin: 0 0 20px; font-family: var(--st-serif); font-weight: 500; font-size: 36px; line-height: 1.1; }
.st-contact .st-contact__form .wpcf7 { max-width: none; margin: 0; }
.st-contact__map { margin-top: 64px; background: var(--st-stone); }
.st-contact__map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ------------------------------------------------------------------ Blog

   Cards follow the product card (.st-card): picture over a white panel,
   Cormorant name. The title link stretches over the whole card. */

.st-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.st-postcard { position: relative; display: flex; flex-direction: column; background: var(--st-white); }
.st-postcard__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--st-stone); }
.st-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.st-postcard:hover .st-postcard__media img { transform: scale(1.04); }
.st-postcard__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--st-linen); }
.st-postcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.st-postcard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.st-postcard__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--st-espresso); }
.st-postcard__title a { color: inherit; text-decoration: none; }
.st-postcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-postcard:hover .st-postcard__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.st-postcard__title a:focus-visible { outline: none; }
.st-postcard:has(.st-postcard__title a:focus-visible) { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.st-postcard__summary { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--st-taupe); }
.st-postcard__more { align-self: flex-start; margin-top: auto; padding-top: 8px; }

.st-pager { margin-top: 56px; }
.st-pager ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.st-pager li { list-style: none; }
.st-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--st-tap-min);
  height: var(--st-tap-min);
  padding: 0 12px;
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  background: var(--st-white);
  font-size: var(--st-small);
  color: var(--st-espresso);
  text-decoration: none;
}
.st-pager a.page-numbers:hover { border-color: var(--st-espresso); }
.st-pager .page-numbers.current { background: var(--st-espresso); border-color: var(--st-espresso); color: var(--st-ivory); }
.st-pager .page-numbers.dots { border: 0; background: transparent; min-width: 0; }
.st-pager__prev { display: inline-flex; transform: rotate(180deg); }

/* WordPress's visually hidden class. On these templates nothing else loads it
   once style.css and the block library are dropped (the 404 and blog
   templates showed the header search's label). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.st-page__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 640px; }

.st-post__more { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--st-divider); }
.st-post__more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- 404 */

.st-404 { padding-top: 72px; }
.st-404__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; }
.st-404__text { margin: 0; color: var(--st-taupe); }
.st-404__search { display: flex; gap: 12px; width: 100%; max-width: 640px; margin-top: 12px; }
.st-404__search .st-field { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; }
.st-404__search .st-btn { flex-shrink: 0; }
.st-404__links { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.st-404__links h2 { margin: 0; }
.st-404__links ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.st-404__links li { list-style: none; }
.st-404 .st-page__help { width: 100%; margin-top: 48px; }

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
  .st-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .st-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .st-feature--media-right .st-feature__media { order: 0; }
  .st-tilecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .st-page__hero img { aspect-ratio: 16 / 9; }
  .st-zoom__img { max-width: 100vw; max-height: calc(100vh - 160px); }
  .st-zoom__prev, .st-zoom__next { top: auto; bottom: 16px; transform: none; }
  .st-zoom__prev { transform: rotate(180deg); }
}

@media (max-width: 767px) {
  .st-page { padding: 12px 0 64px; }
  .st-page__crumbs { margin-bottom: 8px; }
  .st-page__head { margin-bottom: 28px; }
  .st-page__hero { margin-bottom: 36px; }
  .st-article { font-size: 17px; }
  .st-article :where(h1, h2) { font-size: 30px; }
  .st-article h3 { font-size: 26px; }
  .st-article h4 { font-size: 23px; }
  .st-article blockquote { padding-left: 16px; font-size: 22px; }
  .st-article :where(.alignleft, .alignright) { float: none; margin: 1.2em 0; }
  .st-blocks > .st-block + .st-block { margin-top: 44px; padding-top: 44px; }
  .st-feature__title { font-size: 30px; margin-bottom: 14px; }
  .st-block--gallery :is(.gallery-slider, .gallery-slider-auto) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-tilecards { grid-template-columns: minmax(0, 1fr); }
  .st-page .wpcf7,
  .st-page .glsr-form-wrap { padding: 20px; }
  .st-page__help { margin-top: 44px; padding-top: 24px; }
  .st-contact__value { font-size: 24px; }
  .st-404 { padding-top: 40px; }
  .st-404__search { flex-direction: column; }
  .st-404__search .st-btn { width: 100%; }
  .st-postgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-postcard__title { font-size: 23px; }
  .st-post__more { margin-top: 64px; padding-top: 44px; }
  .st-contact__form-title { font-size: 30px; }
  .st-contact__map iframe { height: 300px; }
}

/* Inline links in prose and the help line get a 44px hit area on touch, as
   the product prose does (st-product.css). */
@media (pointer: coarse) {
  .st-article a,
  .st-page__help a { position: relative; }
  .st-article a::after,
  .st-page__help a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--st-tap-min);
  }
}