/* ============================================================
   VerityLoft — LAYER 6: Consistency  (vl-site.css)

   Loaded on every page after vl-base.css and vl-pages.css. The
   article page (Layer 5) set the house language: Cormorant
   Garamond headlines, Cinzel labels, gold hairline frames on
   pictures, linen panels, navy plates with an inset gold frame,
   one gold button. This file brings the rest of the site to it:
   the home page and article index (Layer 4's .vl-page markup),
   the theme's own category archives and About page, and any
   WordPress button anywhere.

   It restyles; it does not relayout. Layer 4 decides where
   things sit, this file decides how they look, so nothing in
   the Site Editor or the home page's block classes changes.

   Section map
     1. Shared: kickers, frames, buttons, section heads
     2. Home page
     3. Article index
     4. Theme archives (category pages, "Latest posts")
     5. Theme pages (About, and any default page title)
     6. Awards: the registry at /verify/ and the nomination form
        (markup comes from vl-awards.php)
     7. Responsive
   ============================================================ */


/* ============================================================
   1. SHARED
   ============================================================ */

/* --- inscriptional labels: every small tracked label in Cinzel --- */
.vl-page .kicker,
.vl-page .tag,
.vl-page .restlabel,
.vl-page .railhead,
.vl-page .pagehead .kicker,
.vl-tag,
.vl-feature .vl-tag {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vl-gold-ink, #7A5F1A);
}
.vl-page .badge,
.vl-badge {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .16em;
  border-radius: 3px;
  padding: 5px 9px 4px;
}

/* --- pictures: the gold hairline frame from the article hero --- */
.vl-page .lead .ph,
.vl-page .card .ph,
.vl-page .feature .thumb,
.vl-page .row .thumb,
.vl-feature__media,
.archive .wp-block-post-featured-image,
.blog .wp-block-post-featured-image {
  box-sizing: border-box;
  padding: 5px !important;
  border: 1px solid rgba(221, 184, 73, .55) !important;
  border-radius: 0 !important;
  background: var(--vl-porcelain, #FAF8F4) !important;
  overflow: hidden;
  position: relative;
}
.vl-page .lead .ph::after,
.vl-page .feature .thumb::after,
.vl-feature__media::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(30, 41, 59, .12);
  pointer-events: none;
}
.vl-page .lead .ph img,
.vl-page .card .ph img,
.vl-page .feature .thumb img,
.vl-page .row .thumb img,
.vl-feature__media img,
.archive .wp-block-post-featured-image img,
.blog .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}
.vl-page .lead .ph {
  height: auto !important;
  aspect-ratio: 1100 / 450;
}

/* --- section heads: hairline plus a short gold rule, aside in Cinzel --- */
.vl-page .sechead {
  border-bottom: 1px solid var(--vl-rule, #D8D3C8);
  padding-bottom: 12px;
  position: relative;
}
.vl-page .sechead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3rem;
  height: 2px;
  background: var(--vl-gold, #DDB849);
}
.vl-page .sechead h2 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.vl-page .sechead .aside {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vl-gold-ink, #7A5F1A);
}

/* --- headlines everywhere carry the article face and weight --- */
.vl-page h1,
.vl-page h2,
.vl-page h3,
.vl-page .card h2,
.vl-page .row h2,
.vl-page .feature h2,
.vl-page .guide h3 {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 600;
  letter-spacing: -.012em;
  font-variant-numeric: lining-nums;
}
.vl-page .lead h1 {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}
.vl-page .pagehead h1 {
  font-size: clamp(2.25rem, 1.35rem + 2.7vw, 3.25rem);
  line-height: 1.06;
  font-weight: 600;
}
.vl-page .card h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}
.vl-page .feature h2 {
  font-size: 2rem;
  line-height: 1.15;
}
.vl-page .row h2 {
  font-size: 1.375rem;
  line-height: 1.22;
}
.vl-page .card a.title:hover h2,
.vl-page .row h2 a:hover,
.vl-page .guide a:hover h3 {
  color: var(--vl-gold-ink, #7A5F1A);
}

/* --- the arrow link ("Read the review →"): navy, gold hairline, arrow nudges --- */
.vl-page .readmore {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--vl-blue, #1E293B);
  border-bottom: 1px solid var(--vl-gold, #DDB849);
  padding-bottom: 3px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.vl-page .readmore:hover {
  color: var(--vl-gold-ink, #7A5F1A);
  border-bottom-color: var(--vl-gold-ink, #7A5F1A);
}

/* --- buttons: the one system, everywhere on the site ---
   Layer 4's .btn, the index's filter pills, and any WordPress
   button block get the gold offer button from the article page. */
.vl-page .btn,
.vl-page .railbtn,
.vl-page .pill.on,
.wp-block-button__link,
.wp-element-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 1.5rem;
  background: var(--vl-gold, #DDB849) !important;
  color: var(--vl-blue, #1E293B) !important;
  border: 1px solid #C9A63E !important;
  border-radius: 4px !important;
  font-family: var(--vl-sans, "Manrope", sans-serif) !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 2px rgba(30, 41, 59, .12);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vl-page .btn:hover,
.vl-page .railbtn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #E6C65E !important;
  color: var(--vl-blue, #1E293B) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 18px -8px rgba(30, 41, 59, .5);
  transform: translateY(-1px);
}
.vl-page .btn:active,
.vl-page .railbtn:active,
.wp-block-button__link:active,
.wp-element-button:active {
  background: #D2AD3F !important;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(30, 41, 59, .18) inset;
}
.vl-page .btn:focus-visible,
.vl-page .railbtn:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--vl-blue, #1E293B);
  outline-offset: 3px;
}
/* filter pills: quiet outline, the active one is the gold button */
.vl-page .pill {
  height: 40px;
  padding: 0 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--vl-rule, #D8D3C8);
  background: transparent;
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: .875rem;
  font-weight: 600;
  color: var(--vl-blue, #1E293B);
  display: inline-flex;
  align-items: center;
}
.vl-page .pill:hover {
  border-color: var(--vl-blue, #1E293B);
}
.vl-page .pill.on {
  height: 40px;
  padding: 0 1.1rem;
  font-size: .875rem !important;
  box-shadow: none;
}

/* --- panels: linen fill, hairline, gold top rule --- */
.vl-page .railcard,
.vl-page .fcard,
.vl-feature__panel {
  background: #F3F0E9;
  border: 1px solid var(--vl-rule, #D8D3C8);
  border-top: 2px solid var(--vl-gold, #DDB849);
  border-radius: 3px;
}
.vl-page .railcard h3 {
  font-size: 1.375rem;
}
.vl-page .railplain .railhead {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--vl-rule, #D8D3C8);
  margin-bottom: .6rem;
}
.vl-page .mostread .n {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .625rem;
  color: var(--vl-gold-ink, #7A5F1A);
}
.vl-page .mostread .t {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vl-blue, #1E293B);
}

/* --- plates: the navy sections get the inset gold frame --- */
.vl-page .trust,
.vl-page .rhero,
.vl-page .ahero {
  outline: 1px solid rgba(221, 184, 73, .45);
  outline-offset: -10px;
}
.vl-page .trust h2 {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 2.125rem;
  font-weight: 600;
  color: #F3EFE6;
}
.vl-page .trust .sub {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vl-gold, #DDB849);
}
.vl-page .titem .h {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: #F3EFE6;
  letter-spacing: -.01em;
}
.vl-page .titem {
  padding-left: 1rem;
  border-left: 1px solid rgba(221, 184, 73, .45);
}

/* --- numbered guides: Cinzel Roman numerals with a short gold rule --- */
.vl-page .guide .num {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--vl-gold-ink, #7A5F1A);
  padding-bottom: .5rem;
  position: relative;
}
.vl-page .guide .num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  height: 1px;
  background: var(--vl-gold, #DDB849);
}

/* --- page numbers --- */
.vl-page .pager a,
.vl-page .pager span {
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: .875rem;
  font-weight: 600;
}
.vl-page .pager .on {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  color: var(--vl-gold-ink, #7A5F1A);
}


/* ============================================================
   2. HOME PAGE
   ============================================================ */
.vl-home .lead {
  padding-top: 44px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--vl-rule, #D8D3C8);
  margin-bottom: 44px;
}
.vl-home .lead .dek,
.vl-home .card .dek,
.vl-home .guide .d {
  color: var(--vl-graphite, #333333);
}
.vl-home .lead .byline {
  font-family: var(--vl-sans, "Manrope", sans-serif);
}
.vl-home .lead .byline span:first-child {
  font-weight: 600;
  color: var(--vl-blue, #1E293B);
}
.vl-home .card .meta,
.vl-home .lead .byline,
.vl-page .row .meta {
  font-size: .8125rem;
  color: var(--vl-muted, #5C6472);
}


/* ============================================================
   3. ARTICLE INDEX
   ============================================================ */
.vl-articles .toolbar {
  border-bottom: 1px solid var(--vl-rule, #D8D3C8);
}
.vl-articles .feature {
  border-bottom: 1px solid var(--vl-rule, #D8D3C8);
}
.vl-articles .feature .thumb {
  height: auto !important;
  aspect-ratio: 1100 / 450;
}
.vl-articles .count {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vl-muted, #5C6472);
}


/* ============================================================
   4. THEME ARCHIVES
   The Hostinger theme lists category archives as a query loop
   under a bare "Latest posts" heading. Dressed as an index page.
   ============================================================ */
.archive main > h1.wp-block-heading,
.blog main > h1.wp-block-heading {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(2.25rem, 1.35rem + 2.7vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--vl-blue, #1E293B);
  text-align: center;
  margin: 2.5rem auto 1.5rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.archive main > h1.wp-block-heading::after,
.blog main > h1.wp-block-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3rem;
  height: 2px;
  background: var(--vl-gold, #DDB849);
  transform: translateX(-50%);
}
/* the query block sits in the theme's 700px reading column;
   let the grid have the wide width the home page uses */
.archive main > .wp-block-query,
.blog main > .wp-block-query {
  max-width: var(--wp--style--global--wide-size, 1100px);
}
.archive .wp-block-post > .wp-block-spacer,
.blog .wp-block-post > .wp-block-spacer {
  display: none;
}
.archive .wp-block-post-template,
.blog .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size, 1100px);
}
.archive .wp-block-post,
.blog .wp-block-post {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
}
.archive .wp-block-post > .wp-block-post-featured-image,
.blog .wp-block-post > .wp-block-post-featured-image {
  order: -1;
  margin: 0 0 .4rem;
  aspect-ratio: 1100 / 450;
}
.archive .wp-block-post-title,
.blog .wp-block-post-title {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
}
.archive .wp-block-post-title a,
.blog .wp-block-post-title a {
  color: var(--vl-blue, #1E293B);
  text-decoration: none;
  background-image: none;
}
.archive .wp-block-post-title a:hover,
.blog .wp-block-post-title a:hover {
  color: var(--vl-gold-ink, #7A5F1A);
}
.archive .wp-block-post-excerpt__excerpt,
.blog .wp-block-post-excerpt__excerpt {
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--vl-graphite, #333333);
  margin: 0;
}
.archive .wp-block-post-excerpt__more-text,
.blog .wp-block-post-excerpt__more-text {
  margin: .25rem 0 0;
}
.archive .wp-block-post-excerpt__more-link,
.blog .wp-block-post-excerpt__more-link {
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: .875rem;
  font-weight: 700;
  color: var(--vl-blue, #1E293B);
  border-bottom: 1px solid var(--vl-gold, #DDB849);
  text-decoration: none;
  background-image: none;
}
.archive .wp-block-post-date,
.archive .wp-block-post-terms,
.archive .wp-block-post-author-name,
.blog .wp-block-post-date,
.blog .wp-block-post-terms,
.blog .wp-block-post-author-name {
  font-family: var(--vl-caps, "Cinzel", Georgia, serif);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vl-gold-ink, #7A5F1A);
}
.archive .wp-block-post-terms a,
.blog .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
  background-image: none;
}


/* ============================================================
   5. THEME PAGES  (About, and any page using the default title)
   ============================================================ */
.page .wp-block-post-title,
.page .hostinger-ai-title,
.page h2.wp-block-heading.hostinger-ai-title {
  font-family: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--vl-blue, #1E293B);
  font-variant-numeric: lining-nums;
}
.page h2.hostinger-ai-title {
  font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.1;
}
/* the builder paints headings near-black with an !important preset;
   the house headline colour is navy */
.page .hostinger-ai-title.has-dark-color {
  color: var(--vl-blue, #1E293B) !important;
}
.page .hostinger-ai-image img,
.page figure.wp-block-image.hostinger-ai-image img {
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid rgba(221, 184, 73, .55);
  background: var(--vl-porcelain, #FAF8F4);
  border-radius: 0 !important;
}
.page .entry-content > .wp-block-group p,
.page .hostinger-ai-about-us-2 p {
  font-family: var(--vl-sans, "Manrope", sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--vl-graphite, #333333);
}
/* the theme fades every group in as it scrolls; on a text page
   that reads as lag, not polish */
.page .hostinger-ai-fade-up {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ============================================================
   6. AWARDS
   Two shortcodes from vl-awards.php: [vl_awards] draws the
   registry (one plate per award, with an embed kit under it) and
   [vl_award_entry] draws the nomination form. Both wrappers carry
   .vl-page.vl-inline so they sit inside the theme's reading
   column, and they set their own tokens because the article
   tokens (--vlp-*) live on body.single-post only.
   ============================================================ */
.vl-awards,
.vl-entry {
  --vla-navy:      var(--vl-blue,      #1E293B);
  --vla-ink:       var(--vl-graphite,  #333333);
  --vla-muted:     var(--vl-muted,     #5C6472);
  --vla-rule:      var(--vl-rule,      #D8D3C8);
  --vla-gold:      var(--vl-gold,      #DDB849);
  --vla-gold-ink:  var(--vl-gold-ink,  #7A5F1A);
  --vla-gold-line: rgba(221, 184, 73, .55);
  --vla-panel:     #F3F0E9;
  --vla-plate-ink: #F3EFE6;
  --vla-plate-dim: rgba(243, 239, 230, .68);
  --vla-serif: var(--vl-serif, "Cormorant Garamond", Georgia, serif);
  --vla-caps:  var(--vl-caps,  "Cinzel", Georgia, serif);
  --vla-sans:  var(--vl-sans,  "Manrope", sans-serif);
  box-sizing: border-box;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--vla-sans);
  color: var(--vla-ink);
  font-variant-numeric: lining-nums;
}
.vl-awards *,
.vl-awards *::before,
.vl-awards *::after,
.vl-entry *,
.vl-entry *::before,
.vl-entry *::after {
  box-sizing: border-box;
}
.vl-awards .vl-awards__intro,
.vl-entry .vl-entry__lede {
  font-family: var(--vla-serif);
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--vla-navy);
  margin: 0 0 2.25rem;
  text-wrap: pretty;
}

/* --- one award: a plate with the seal on the left --- */
.vl-awards__item {
  margin: 0 0 1.25rem;
  scroll-margin-top: 96px;
}
.vl-awards__item:target .vl-award {
  outline-color: var(--vla-gold);
  box-shadow: 0 0 0 3px rgba(221, 184, 73, .35);
}
.vl-awards .vl-award {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.1rem 1.4rem;
  background: var(--vla-navy);
  color: var(--vla-plate-ink);
  border-radius: 4px;
  outline: 1px solid var(--vla-gold-line);
  outline-offset: -7px;
  transition: box-shadow .2s ease;
}
.vl-awards .vl-award__seal {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  position: relative;
}
.vl-awards .vl-award__seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.vl-awards .vl-award__seal--drawn {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2A3650 0%, #1E293B 70%);
  box-shadow:
    0 0 0 3px #1E293B,
    0 0 0 5px var(--vla-gold),
    0 0 0 6px #B08415,
    0 4px 12px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  text-align: center;
}
.vl-awards .vl-award__seal--drawn::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(221, 184, 73, .55);
}
.vl-awards .vl-award__mark {
  font-family: var(--vla-caps);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: var(--vla-gold);
  letter-spacing: .04em;
}
.vl-awards .vl-award__year {
  font-family: var(--vla-caps);
  font-size: .4375rem;
  letter-spacing: .1em;
  white-space: nowrap;
  color: rgba(243, 239, 230, .8);
}
.vl-awards .vl-award__text {
  flex: 1;
  min-width: 0;
}
.vl-awards .vl-award__label {
  display: block;
  font-family: var(--vla-caps);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vla-gold);
  margin-bottom: .35rem;
}
.vl-awards .vl-award__name,
.vl-awards strong.vl-award__name {
  display: block;
  font-family: var(--vla-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--vla-plate-ink);
  text-wrap: balance;
}
.vl-awards .vl-award__crit {
  display: block;
  margin-top: .4rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--vla-plate-dim);
}
.vl-awards .vl-award__holder {
  display: block;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(243, 239, 230, .14);
  font-size: .875rem;
  color: var(--vla-plate-ink);
}
.vl-awards .vl-award__holder-label {
  font-family: var(--vla-caps);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vla-gold);
  margin-right: .4rem;
}
.vl-awards .vl-award__holder a {
  color: var(--vla-plate-ink);
  font-weight: 700;
  text-decoration: none;
  background-image: none;
  border-bottom: 1px solid rgba(221, 184, 73, .5);
}
.vl-awards .vl-award__holder a:hover {
  color: var(--vla-gold);
  border-bottom-color: var(--vla-gold);
}

/* --- the embed kit under each plate --- */
.vl-awards__embed {
  margin: 0;
  border: 1px solid var(--vla-rule);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: var(--vla-panel);
}
.vl-awards__embed summary {
  cursor: pointer;
  list-style: none;
  padding: .7rem 1.4rem;
  font-family: var(--vla-caps);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vla-gold-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vl-awards__embed summary::-webkit-details-marker {
  display: none;
}
.vl-awards__embed summary::after {
  content: "+";
  font-family: var(--vla-serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--vla-gold-ink);
}
.vl-awards__embed[open] summary::after {
  content: "×";
}
.vl-awards__embed summary:hover {
  color: var(--vla-navy);
}
.vl-awards .vl-awards__embed > p {
  margin: 0 1.4rem .75rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--vla-muted);
}
.vl-awards__snippet {
  display: flex;
  gap: .75rem;
  align-items: stretch;
  padding: 0 1.4rem 1.1rem;
}
.vl-awards__snippet textarea {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--vla-rule);
  border-radius: 3px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--vla-ink);
  resize: none;
  white-space: pre-wrap;
  word-break: break-all;
}
.vl-awards__snippet textarea:focus {
  outline: 2px solid var(--vla-navy);
  outline-offset: 1px;
}

/* --- the nomination form --- */
.vl-entry__form {
  margin: 0;
}
.vl-entry__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vl-entry__set {
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--vla-rule);
  border-top: 2px solid var(--vla-gold);
  border-radius: 3px;
  background: var(--vla-panel);
  min-width: 0;
}
.vl-entry__set legend {
  float: left;               /* keeps the legend inside the panel's padding box */
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  font-family: var(--vla-caps);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vla-gold-ink);
}
.vl-entry__set legend + * {
  clear: both;
}
.vl-entry__row {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 1.1rem;
}
.vl-entry__row:last-child {
  margin-bottom: 0;
}
.vl-entry__row label {
  font-family: var(--vla-sans);
  font-size: .875rem;
  font-weight: 700;
  color: var(--vla-navy);
}
.vl-entry__row label em {
  font-style: normal;
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vla-gold-ink);
  margin-left: .4rem;
}
.vl-entry__row input,
.vl-entry__row select,
.vl-entry__row textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid #CFC9BD;
  border-radius: 3px;
  background: #fff;
  font-family: var(--vla-sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vla-ink);
  box-shadow: 0 1px 2px rgba(30, 41, 59, .04) inset;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vl-entry__row textarea {
  min-height: 140px;
  resize: vertical;
}
.vl-entry__row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--vla-navy) 50%), linear-gradient(135deg, var(--vla-navy) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.vl-entry__row input:hover,
.vl-entry__row select:hover,
.vl-entry__row textarea:hover {
  border-color: #B5AE9F;
}
.vl-entry__row input:focus,
.vl-entry__row select:focus,
.vl-entry__row textarea:focus {
  outline: none;
  border-color: var(--vla-gold);
  box-shadow: 0 0 0 3px rgba(221, 184, 73, .3);
}
.vl-entry__row input::placeholder,
.vl-entry__row textarea::placeholder {
  color: #9C9484;
}
.vl-entry__consent {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--vla-rule);
  border-radius: 3px;
  background: #fff;
}
.vl-entry__consent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--vla-ink);
  cursor: pointer;
}
.vl-entry__consent input {
  margin: .25rem 0 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--vla-navy);
  cursor: pointer;
}
.vl-entry__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.vl-entry__fine {
  font-size: .8125rem;
  color: var(--vla-muted);
}
.vl-entry__notice {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: 3px;
  border: 1px solid var(--vla-rule);
  border-left: 4px solid var(--vla-gold);
  background: var(--vla-panel);
  font-size: .9375rem;
  line-height: 1.55;
}
.vl-entry__notice strong {
  font-family: var(--vla-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--vla-navy);
  margin-right: .3rem;
}
.vl-entry__notice--err {
  border-left-color: #A2584A;
}

/* --- the two buttons here are the site button --- */
.vl-awards__copy,
.vl-entry__submit,
button.vl-entry__submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  margin: 0;
  padding: 0 1.5rem;
  background: var(--vla-gold);
  color: var(--vla-navy);
  border: 1px solid #C9A63E;
  border-radius: 4px;
  font-family: var(--vla-sans);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 2px rgba(30, 41, 59, .12);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vl-awards__copy {
  height: auto;
  align-self: stretch;
  padding: 0 1.1rem;
  flex: 0 0 auto;
}
.vl-entry__submit::after {
  content: "→";
  font-family: var(--vla-serif);
  font-size: 1.25em;
  line-height: 0;
  transition: transform .15s ease;
}
.vl-awards__copy:hover,
.vl-entry__submit:hover {
  background: #E6C65E;
  color: var(--vla-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 18px -8px rgba(30, 41, 59, .5);
  transform: translateY(-1px);
}
.vl-entry__submit:hover::after {
  transform: translateX(3px);
}
.vl-awards__copy:active,
.vl-entry__submit:active {
  background: #D2AD3F;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(30, 41, 59, .18) inset;
}
.vl-awards__copy:focus-visible,
.vl-entry__submit:focus-visible {
  outline: 2px solid var(--vla-navy);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .vl-awards .vl-award {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .vl-awards .vl-award__seal {
    width: 80px;
    height: 80px;
  }
  .vl-awards__snippet {
    flex-direction: column;
  }
  .vl-awards__copy {
    height: 44px;
    align-self: flex-start;
  }
  .vl-entry__set {
    padding: 1.1rem 1.1rem 1.25rem;
  }
}
@media print {
  .vl-awards__embed,
  .vl-entry__form {
    display: none;
  }
}


/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .vl-page .sechead h2 {
    font-size: 1.5rem;
  }
  .vl-page .feature h2 {
    font-size: 1.625rem;
  }
  .archive .wp-block-post-template,
  .blog .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}