/*
Theme Name: Outdoor Muster
Theme URI: https://example.com/outdoor-muster
Author: Kyle
Description: An editorial WordPress theme for outdoor / community campaigns. Cream-paper aesthetic with vermilion display type, cobalt accents, hand-drawn brush-star motif, and a full-bleed homepage built from four scroll sections.
Version: 1.8.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: outdoor-muster
Tags: blog, one-page, editorial, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. SELF-HOSTED FONTS (optional)
   ---------------------------------------------------------
   Drop your ITC Benguiat Bold Condensed font file into
   /assets/fonts/ and it will be picked up automatically.
   The theme tries multiple filenames + formats, so any of
   these will work:

       assets/fonts/Benguiat-BoldCondensed.woff2   (best)
       assets/fonts/Benguiat-BoldCondensed.woff
       assets/fonts/Benguiat-BoldCondensed.otf
       assets/fonts/Benguiat-BoldCondensed.ttf

   If the file isn't present, the browser silently falls
   back to Abril Fatface (loaded from Google Fonts).
   ========================================================= */
@font-face {
  font-family: 'Benguiat';
  src: url('assets/fonts/Benguiat-BoldCondensed.woff2') format('woff2'),
       url('assets/fonts/Benguiat-BoldCondensed.woff')  format('woff'),
       url('assets/fonts/Benguiat-BoldCondensed.otf')   format('opentype'),
       url('assets/fonts/Benguiat-BoldCondensed.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* ---- Background image URLs for the front page.
     Replace these with your Media Library URLs after upload. ---- */
  --om-bg-hero:   url('assets/img/hero-mountains.jpg');
  --om-bg-cliff:  url('assets/img/cliff.jpg');
  --om-bg-lake:   url('assets/img/lake.jpg');

  /* ---- Palette (sampled from the PDF) ---- */
  --om-red:    #F83C00;   /* vermilion */
  --om-red-dk: #C82E00;
  --om-blue:   #235393;   /* cobalt */
  --om-yellow: #F2B83D;   /* mustard */
  --om-cream:  #FDE7CF;   /* peach paper */
  --om-cream-dk: #F1D5B5;
  --om-ink:    #1F1B17;
  --om-ink-soft: #4A413A;
  --om-white:  #FFF8EC;

  /* ---- Type ---- */
  /* Stack: self-hosted Benguiat first (if present), then Abril Fatface
     (loaded from Google Fonts), then system fallback. */
  --om-serif:  'Benguiat', 'Abril Fatface', 'Georgia', serif;
  --om-script: 'Beth Ellen', 'Brush Script MT', cursive;
  --om-sans:   'Libre Franklin', system-ui, -apple-system, sans-serif;

  /* ---- Spacing ---- */
  --om-gutter: clamp(1.2rem, 4vw, 3rem);
  --om-content-max: 70ch;
  --om-wide-max: 1180px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding-left: 1.2em; }
img, picture, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--om-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--om-red-dk); }
button, input, textarea, select { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }
body {
  background: var(--om-cream);
  background-image:
    radial-gradient(rgba(31,27,23,.025) 1px, transparent 1px),
    radial-gradient(rgba(31,27,23,.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  color: var(--om-ink);
  font-family: var(--om-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--om-ink); color: var(--om-cream);
  padding: .6rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--om-serif);
  color: var(--om-red);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); text-transform: none; letter-spacing: 0; }
h4 { font-size: 1.4rem; text-transform: none; letter-spacing: 0; color: var(--om-ink); }
h5 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--om-ink); font-weight: 700; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--om-ink-soft); }

p { margin-bottom: 1.1em; }

blockquote {
  border-left: 4px solid var(--om-red);
  padding: .4rem 0 .4rem 1.4rem;
  margin: 1.8rem 0;
  font-family: var(--om-serif);
  font-style: italic;
  font-size: 1.25em;
  color: var(--om-ink-soft);
}
blockquote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--om-script);
  font-size: 1.4em;
  font-style: italic;
  color: var(--om-red);
}

code, pre, kbd { font-family: ui-monospace, 'SF Mono', 'Menlo', monospace; }
code { background: var(--om-cream-dk); padding: .12em .35em; border-radius: 3px; font-size: .92em; }
pre {
  background: var(--om-ink); color: var(--om-cream);
  padding: 1.1rem 1.3rem; border-radius: 8px;
  overflow-x: auto; margin: 1.5rem 0;
}
pre code { background: transparent; padding: 0; color: inherit; }

hr {
  border: 0;
  height: 2px;
  background: var(--om-red);
  margin: 2.5rem 0;
  width: 60px;
}

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { padding: .65rem .9rem; border-bottom: 1px solid var(--om-cream-dk); text-align: left; }
th { font-family: var(--om-serif); font-weight: 700; color: var(--om-ink); }

mark { background: var(--om-yellow); color: var(--om-ink); padding: 0 .15em; }

/* =========================================================
   4. SITE HEADER (non-front-page)
   ========================================================= */
.om-site-header {
  position: sticky; top: 0;
  background: var(--om-cream);
  border-bottom: 2px solid var(--om-red);
  z-index: 50;
  padding: 1rem var(--om-gutter);
}
.om-site-header__inner {
  max-width: var(--om-wide-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.om-site-branding a {
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--om-red);
  text-decoration: none;
  line-height: 1;
}
.om-site-branding__tagline {
  display: block;
  font-family: var(--om-script);
  font-size: 1.1rem;
  color: var(--om-ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-top: .15rem;
}

/* Primary navigation */
.om-primary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.om-primary-nav a {
  font-family: var(--om-sans);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--om-ink);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.om-primary-nav a:hover,
.om-primary-nav .current-menu-item a {
  border-bottom-color: var(--om-red);
  color: var(--om-red);
}
.om-primary-nav ul ul { /* dropdowns */
  display: none;
  position: absolute;
  background: var(--om-cream);
  border: 1px solid var(--om-cream-dk);
  padding: .5rem 0;
  flex-direction: column;
  gap: 0;
}
.om-primary-nav li:hover > ul { display: flex; }
.om-primary-nav ul ul a { padding: .4rem 1rem; border: 0; }

/* =========================================================
   5. SITE MAIN
   ========================================================= */
.om-site-main { min-height: 60vh; }
.om-container {
  max-width: var(--om-wide-max);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--om-gutter);
}
.om-content { max-width: var(--om-content-max); }

/* Single post / page */
.om-entry { margin-bottom: 3rem; }
.om-entry__header { margin-bottom: 2rem; }
.om-entry__title { color: var(--om-red); margin-bottom: .5rem; }
.om-entry__meta {
  font-family: var(--om-script);
  font-size: 1.4rem;
  color: var(--om-ink-soft);
  line-height: 1.2;
}
.om-entry__meta a { color: var(--om-red); text-decoration: none; }

.om-entry__content > * { max-width: var(--om-content-max); }
.om-entry__content > .alignwide { max-width: var(--om-wide-max); }
.om-entry__content > .alignfull { max-width: none; }
.om-entry__content img { border-radius: 4px; }

.om-entry__thumb {
  margin-bottom: 2rem;
  border-radius: 4px;
  overflow: hidden;
}

/* WP alignments / captions */
.alignleft  { float: left;  margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1.5rem auto; }
.wp-caption-text, figcaption {
  font-family: var(--om-script);
  font-size: 1.15rem;
  color: var(--om-ink-soft);
  text-align: center;
  margin-top: .4rem;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }

/* =========================================================
   6. ARCHIVE / POST LIST
   ========================================================= */
.om-archive__title {
  color: var(--om-red);
  margin-bottom: .3rem;
}
.om-archive__desc {
  font-family: var(--om-script);
  font-size: 1.6rem;
  color: var(--om-ink-soft);
  margin-bottom: 2.5rem;
}

.om-post-list {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.om-post-card {
  background: var(--om-white);
  border: 1px solid var(--om-cream-dk);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.om-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -16px rgba(31,27,23,.25);
}
.om-post-card__thumb {
  margin: -1.5rem -1.5rem 1.2rem;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--om-cream-dk);
}
.om-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.om-post-card__title {
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: .5rem;
  text-transform: none;
  letter-spacing: 0;
}
.om-post-card__title a { color: var(--om-ink); text-decoration: none; }
.om-post-card__title a:hover { color: var(--om-red); }
.om-post-card__meta {
  font-family: var(--om-script);
  font-size: 1.2rem;
  color: var(--om-ink-soft);
  margin-bottom: .9rem;
}
.om-post-card__excerpt {
  flex: 1;
  font-size: .95rem;
  color: var(--om-ink-soft);
  margin-bottom: 1rem;
}
.om-post-card__more {
  font-family: var(--om-sans);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--om-red);
  text-decoration: none;
  border-bottom: 2px solid var(--om-red);
  align-self: flex-start;
  padding-bottom: 2px;
}

/* Pagination */
.om-pagination {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-family: var(--om-sans);
}
.om-pagination .page-numbers {
  display: inline-block;
  min-width: 2.4rem;
  padding: .4rem .75rem;
  text-align: center;
  text-decoration: none;
  color: var(--om-ink);
  border: 1px solid var(--om-cream-dk);
  border-radius: 3px;
  font-weight: 700;
}
.om-pagination .page-numbers.current,
.om-pagination .page-numbers:hover {
  background: var(--om-red); color: var(--om-cream); border-color: var(--om-red);
}

/* =========================================================
   7. FORMS, BUTTONS, SEARCH
   ========================================================= */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="tel"], textarea, select {
  width: 100%;
  background: var(--om-white);
  border: 1.5px solid var(--om-cream-dk);
  border-radius: 4px;
  padding: .65rem .9rem;
  font-family: var(--om-sans);
  color: var(--om-ink);
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--om-red);
}
label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: .95rem; }

button, .om-btn, input[type="submit"] {
  display: inline-block;
  background: var(--om-red);
  color: var(--om-cream);
  border: 0;
  padding: .7rem 1.4rem;
  font-family: var(--om-sans);
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
button:hover, .om-btn:hover, input[type="submit"]:hover { background: var(--om-red-dk); }

.om-btn--outline {
  background: transparent;
  color: var(--om-red);
  box-shadow: inset 0 0 0 2px var(--om-red);
}
.om-btn--outline:hover { background: var(--om-red); color: var(--om-cream); }

.om-search-form {
  display: flex;
  gap: .5rem;
  max-width: 480px;
}
.om-search-form input[type="search"] { flex: 1; }

/* =========================================================
   8. COMMENTS
   ========================================================= */
.om-comments { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--om-red); }
.om-comments__title { margin-bottom: 1.5rem; }
.om-comment-list { list-style: none; padding: 0; }
.om-comment-list .comment { margin-bottom: 1.5rem; padding: 1.2rem; background: var(--om-white); border-radius: 4px; border: 1px solid var(--om-cream-dk); }
.om-comment-list .comment .comment { margin-left: 1rem; margin-top: 1rem; }
.comment-author { font-weight: 700; }
.comment-author cite { font-style: normal; }
.comment-metadata { font-family: var(--om-script); font-size: 1.05rem; color: var(--om-ink-soft); }

/* =========================================================
   9. SITE FOOTER (non-front-page)
   ========================================================= */
.om-site-footer {
  margin-top: 4rem;
  background: var(--om-red);
  color: var(--om-cream);
  padding: 2.5rem var(--om-gutter);
}
.om-site-footer__inner {
  max-width: var(--om-wide-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
}
.om-site-footer__star {
  width: 70px;
  color: var(--om-yellow);
}
.om-site-footer__meta { font-family: var(--om-sans); font-size: .95rem; }
.om-site-footer__meta a { color: var(--om-cream); text-decoration: underline; }
.om-site-footer__socials {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--om-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: .9rem;
}
.om-site-footer__socials a { color: var(--om-cream); text-decoration: none; }
.om-site-footer__socials a:hover { color: var(--om-yellow); }

/* =========================================================
   10. BRUSH-STROKE STAR (mask of the real artwork)
   ========================================================= */
.om-star {
  display: inline-block;
  color: var(--om-red);
  background-color: currentColor;
  -webkit-mask: url('assets/img/star.png') center / contain no-repeat;
          mask: url('assets/img/star.png') center / contain no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.om-star--yellow { color: var(--om-yellow); }
.om-star--cream  { color: var(--om-cream); }

/* =========================================================
   11. FRONT PAGE (the 4-section landing)
   ========================================================= */
.om-front {
  background: var(--om-cream);
  background-image: none; /* override body grain for full-bleed */
}
.om-front .om-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* §1 Hero — title centered top, tagline + Est mid-right over the photo */
.om-hero {
  background: var(--om-bg-hero) center/cover no-repeat, #2c3338;
  color: var(--om-red);
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  grid-template-columns: 1fr;
  padding: 4vh 5vw 6vh;
}
.om-hero__title {
  grid-row: 1;
  justify-self: center;
  text-align: center;
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: clamp(3.6rem, 9.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--om-red);
  margin: 0;
  white-space: nowrap;
}
.om-hero__tag {
  grid-row: 2;
  justify-self: end;
  align-self: end;
  text-align: right;
  font-family: var(--om-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 32ch;
  margin-right: 2vw;
}
.om-hero__est {
  display: block;
  margin-top: .5rem;
  font-family: var(--om-script);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.8vw, 4.5rem);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

/* §2 Intro — Hi There top-left, Hello + body underneath (close); star upper-middle; dates angled right */
.om-intro {
  position: relative;
  background: var(--om-cream);
  background-image:
    radial-gradient(rgba(31,27,23,.025) 1px, transparent 1px),
    radial-gradient(rgba(31,27,23,.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  padding: 6vh 6vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  gap: .6rem 3rem;
  align-items: start;
}
.om-intro__hi {
  grid-column: 1 / 2;
  grid-row: 1;
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  color: var(--om-red);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.om-intro__hello {
  grid-column: 1 / 2;
  grid-row: 2;
  font-family: var(--om-script);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  color: var(--om-red);
  line-height: 1;
  margin-bottom: .8rem;
}
.om-intro__body {
  grid-column: 1 / 2;
  grid-row: 3;
  font-family: var(--om-sans);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--om-ink);
  margin-top: 1.5rem;
}
.om-intro__star {
  position: absolute;
  left: 72%;
  top: 18%;
  transform: translateX(-50%);
  width: min(17vw, 210px);
}
.om-intro__meta {
  position: absolute;
  right: 6vw;
  top: 55%;
  transform: rotate(-3deg);
  transform-origin: right top;
  font-family: var(--om-script);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  color: var(--om-red);
  line-height: 1.15;
  text-align: left;
}
.om-intro__meta span { display: block; white-space: nowrap; }

.om-intro__buttons {
  grid-column: 1 / 2;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
}
.om-intro__buttons .om-btn {
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  padding: .85rem 1.6rem;
}

/* §3 Represent — single cliff photo spans the whole section. Sky covers the
   left (under star + REPRESENT), rock covers the right (under the callouts). */
.om-represent {
  background: var(--om-bg-cliff) right center / cover no-repeat, var(--om-blue);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}
.om-represent__left {
  background: transparent;
  padding: 5vh 4vw 5vh 5vw;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: start;
}
.om-represent__star {
  width: min(34vw, 460px);
  align-self: center;
  justify-self: center;
}
.om-represent__title {
  align-self: end;
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: clamp(2.4rem, 7.5vw, 6rem);
  color: var(--om-red);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 2rem;
}
.om-represent__right {
  background: transparent;
  padding: 5vh 4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
}
/* Zigzag pattern from the PDF: narrow callouts (so they don't fill the
   column), each shifted to a distinctly different horizontal position.
   Top sits LEFT, middle sits FAR RIGHT, bottom sits roughly centered
   (slightly left of center). The translateX values are the key — without
   them, three blocks at ~70% width look stacked. */
.om-callout {
  background: var(--om-yellow);
  color: var(--om-ink);
  font-family: var(--om-sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.35;
  padding: 1.1rem 1.5rem;
  border-radius: 14px;
  width: 75%;
  max-width: 32ch;
  text-align: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.35);
}
.om-callout:nth-of-type(1) {
  align-self: flex-start;
  transform: translateX(-2%);
}
.om-callout:nth-of-type(2) {
  align-self: flex-end;
  transform: translateX(4%);
}
.om-callout:nth-of-type(3) {
  align-self: center;
  transform: translateX(-8%);
}

.om-front .om-section.om-outro {
  min-height: 0;
  overflow: visible;
}

/* §4 Outro — cream-paper header above the orange socials band. */
.om-front .om-outro {
  background: var(--om-cream);
  background-image:
    radial-gradient(rgba(31,27,23,.025) 1px, transparent 1px),
    radial-gradient(rgba(31,27,23,.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  min-height: auto;
  display: block;
  text-align: center;
  padding: 0;
}
.om-outro__title {
  display: block;
  padding: 8vh 4vw 5vh;
  font-family: var(--om-serif);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 7rem);
  color: var(--om-red);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.om-socials {
  width: 100%;
  background: var(--om-red);
  color: var(--om-white);
  padding: 1.8rem 5vw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: .6rem 1.5rem;
}
/* Layout (HTML order: star, socials-block, email-block, star-right):
   ┌───────┬──────────────┬───────┐
   │ ★     │ SOCIALS      │       │
   ├───────┤ @handle      ├───────┤
   │       │ EMAIL        │   ★   │
   │       │ info@…       │       │
   └───────┴──────────────┴───────┘ */
.om-socials > :nth-child(1) { grid-column: 1; grid-row: 1; }
.om-socials > :nth-child(2) { grid-column: 2; grid-row: 1; }
.om-socials > :nth-child(3) { grid-column: 2; grid-row: 2; }
.om-socials > :nth-child(4) { grid-column: 3; grid-row: 2; }
.om-socials__star { width: clamp(44px, 5vw, 70px); color: var(--om-yellow); }
.om-socials__block { text-align: center; }
.om-socials__block h3 {
  font-family: var(--om-serif);
  font-weight: 700;
  font-size: clamp(.9rem, 1.4vw, 1.15rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  color: var(--om-cream);
}
.om-socials__block p {
  font-family: var(--om-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.om-socials__block a { color: var(--om-cream); text-decoration: none; }
.om-socials__block a:hover { color: var(--om-yellow); }
.om-socials__block { text-align: center; }
.om-socials__block h3 {
  font-family: var(--om-serif);
  font-weight: 700;
  font-size: clamp(.9rem, 1.4vw, 1.15rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: .35rem;
  color: var(--om-cream);
}
.om-socials__block p {
  font-family: var(--om-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.om-socials__block a { color: var(--om-cream); text-decoration: none; }
.om-socials__block a:hover { color: var(--om-yellow); }

/* Shortcode landing area below the socials band — typically holds a contact
   form, signup form, or other plugin output. Cream background for legibility. */
.om-outro__shortcode {
  background: var(--om-cream);
  color: var(--om-ink);
  padding: 2.5rem 6vw 3rem;
  border-top: 3px solid var(--om-red-dk);
}
.om-outro__shortcode-inner {
  max-width: 680px;
  margin: 0 auto;
}
.om-outro__shortcode-inner > *:first-child { margin-top: 0; }
.om-outro__shortcode-inner > *:last-child  { margin-bottom: 0; }

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
  .om-site-header__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* §1 Hero — center the content vertically on mobile (was pinned to top) */
  .om-hero {
    padding: 6vh 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vh;
  }
  .om-hero__title {
    margin-left: 0;
    text-align: center;
    white-space: normal;
    font-size: clamp(2.2rem, 10.5vw, 3.8rem);
    line-height: 0.95;
  }
  .om-hero__tag {
    margin-right: 0;
    text-align: center;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    font-size: clamp(.85rem, 3vw, 1.1rem);
  }
  .om-hero__est {
    font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  }

  /* §2 Intro — same treatment, plus stack the absolute-positioned bits */
  .om-intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 1rem;
    padding: 8vh 7vw 6vh;
  }
  .om-intro__hi {
    grid-column: 1; grid-row: 1;
    white-space: normal;
    font-size: clamp(2.2rem, 10.5vw, 3.8rem);
  }
  .om-intro__hello   { grid-column: 1; grid-row: 2; font-size: clamp(1.9rem, 6.5vw, 2.8rem); }
  .om-intro__star    { position: static; transform: none; grid-column: 1; grid-row: 3; width: 42vw; margin: 1rem auto; }
  .om-intro__body    { grid-column: 1; grid-row: 4; font-size: clamp(1rem, 4vw, 1.2rem); }
  .om-intro__buttons { grid-column: 1; grid-row: 5; justify-content: center; }
  .om-intro__meta    {
    position: static;
    transform: rotate(-2deg);   /* keep the handwritten slant but milder */
    transform-origin: center;
    grid-column: 1; grid-row: 6;
    text-align: center;
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    margin-top: 1.2rem;
  }
  .om-intro__meta span { white-space: normal; }

  /* §3 Represent — stack the columns */
  .om-represent { grid-template-columns: 1fr; }
  .om-represent__left { padding: 8vh 6vw 4vh; grid-template-rows: auto auto; }
  .om-represent__star { width: 50vw; max-width: 280px; }
  .om-represent__title {
    justify-self: center;
    font-size: clamp(2.2rem, 10.5vw, 3.8rem);
  }
  .om-represent__right { padding: 4vh 6vw 8vh; align-items: center; }
  .om-callout, .om-callout:nth-child(n) { align-self: center; margin: 0; }

  /* §4 Outro — title sits above socials at header size, not as a giant hero */
  .om-outro__title { font-size: clamp(2.2rem, 10.5vw, 3.8rem); padding: 6vh 6vw 3vh; }
  .om-socials {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: center;
    gap: 1rem;
    padding: 2rem 6vw;
  }
  .om-socials > :nth-child(1) { grid-column: 1; grid-row: 1; justify-self: center; }
  .om-socials > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .om-socials > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .om-socials > :nth-child(4) { grid-column: 1; grid-row: 4; justify-self: center; }
  .om-socials__star { width: 56px; }

  .om-outro__shortcode { padding: 2rem 6vw 2.5rem; }

  /* Site footer (non-front-page) */
  .om-site-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .om-site-footer__star { margin: 0 auto; }
  .om-site-footer__socials { justify-content: center; }
}