/* ==========================================================================
   LMJ LAND SERVICES
   Title. Ownership. Due Diligence.
   --------------------------------------------------------------------------
   Design rules for this build:
   - Flat fills only. No gradients anywhere.
   - Cards are separated by fill + spacing, never by an outline/border.
   - No emoji. Iconography is stroked SVG only.
   - Hairline rules carry structure; they are the only "line" element used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Graphite — neutral dark field. Deliberately not brown; it lets the
     Permian orange and gold carry all of the warmth. */
  --dark-900: #131517;
  --dark-800: #1C1F22;
  --dark-700: #272B2F;
  --dark-600: #343940;
  --dark-line: #32373C;

  /* Gold — brass, caliche sun */
  --gold: #CA9C3D;
  --gold-bright: #DFB55E;
  --gold-dim: #96702A;

  /* Orange — Permian oxide, pumpjack iron. Action colour. */
  --rust: #C2551F;
  --rust-bright: #D96A2C;
  --rust-dim: #93400F;

  /* Paper */
  --paper: #F7F6F3;
  --paper-2: #EFEDE8;
  --paper-3: #E4E1DA;
  --white: #FFFFFF;

  /* Text */
  --text: #16181A;
  --text-2: #4E545B;
  --text-3: #7C838B;
  --text-on-dark: #E4E7EA;
  --text-on-dark-2: #9AA2AA;

  /* Rules */
  --rule: #E2E0DA;
  --rule-strong: #CBC8C0;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Metrics */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: 40px;
  --section-y: 104px;
  --header-h: 84px;
}

@media (max-width: 900px) {
  :root {
    --section-y: 68px;
    --gutter: 20px;
    --header-h: 68px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The hidden attribute must beat component display rules. Without this,
   .btn (inline-flex) and .ticker (flex) render even when hidden, so the
   ticker flashes empty on load and Cancel Edit never goes away. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--dark-800);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--dark-900);
  color: var(--white);
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-y) 0; }
.section--tight { padding: 72px 0; }
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }

.section--dark {
  background: var(--dark-800);
  color: var(--text-on-dark);
}
.section--dark-deep {
  background: var(--dark-900);
  color: var(--text-on-dark);
}

/* Hairline rules */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule--dark { background: var(--dark-line); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  max-width: 120px;
}
.eyebrow--plain::after { display: none; }
.section--dark .eyebrow::after,
.section--dark-deep .eyebrow::after,
.hero .eyebrow::after { background: var(--dark-line); }

h1, .h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.012em;
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.62;
  color: var(--text-2);
}
.section--dark .lede,
.section--dark-deep .lede,
.hero .lede { color: var(--text-on-dark-2); }

.body-copy p + p { margin-top: 18px; }
.body-copy p { color: var(--text-2); }
.section--dark .body-copy p { color: var(--text-on-dark-2); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--rust);
  color: var(--white);
}
.btn--primary:hover { background: var(--rust-bright); }

.btn--gold {
  background: var(--gold);
  color: var(--dark-900);
}
.btn--gold:hover { background: var(--gold-bright); }

.btn--dark {
  background: var(--dark-800);
  color: var(--white);
}
.btn--dark:hover { background: var(--dark-700); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--dark-line);
}
.btn--ghost-light:hover {
  background: var(--dark-700);
  box-shadow: inset 0 0 0 1px var(--dark-700);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--dark-800);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.btn--ghost-dark:hover {
  background: var(--dark-800);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--dark-800);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

/* Text link with brass underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dark-800);
  padding-bottom: 5px;
  box-shadow: inset 0 -1px 0 0 var(--rust);
  transition: color 0.18s ease, box-shadow 0.18s ease;
}
.link-arrow svg { transition: transform 0.18s ease; }
.link-arrow:hover { color: var(--rust); }
.link-arrow:hover svg { transform: translateX(4px); }

.section--dark .link-arrow,
.section--dark-deep .link-arrow { color: var(--white); }
.section--dark .link-arrow:hover,
.section--dark-deep .link-arrow:hover { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   6. Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--dark-900);
  color: var(--text-on-dark-2);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 42px;
}
.topbar__regions {
  display: flex;
  align-items: center;
  gap: 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.topbar__regions li { display: flex; align-items: center; }
.topbar__regions li + li::before {
  content: "";
  width: 1px;
  height: 11px;
  background: var(--dark-line);
  margin: 0 16px;
}
.topbar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
  font-weight: 500;
}
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.topbar__contact a:hover { color: var(--gold-bright); }
.topbar__contact svg { color: var(--gold); }

@media (max-width: 860px) {
  .topbar__regions { display: none; }
  .topbar__inner { justify-content: center; }
}
@media (max-width: 480px) {
  .topbar__contact { gap: 18px; font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   7. Masthead / navigation
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 0 var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
}

/* Wordmark */
.wordmark { display: flex; align-items: center; gap: 14px; }
.wordmark__mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.wordmark__divider {
  width: 1px;
  height: 34px;
  background: var(--rule-strong);
}
.wordmark__text { display: flex; flex-direction: column; gap: 4px; }
.wordmark__name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-800);
  line-height: 1;
}
.wordmark__tag {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: 38px; }
.nav__link {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--text-2);
  padding: 6px 0;
  position: relative;
  transition: color 0.18s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav__link:hover { color: var(--dark-800); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--dark-800); font-weight: 600; }

.masthead__cta { display: flex; align-items: center; gap: 20px; }
.masthead__cta .btn { padding: 13px 24px; font-size: 12.5px; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
  color: var(--dark-800);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile panel */
.mobile-nav {
  display: none;
  background: var(--white);
  box-shadow: 0 1px 0 0 var(--rule);
  border-top: 1px solid var(--rule);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 8px 0 24px; }
.mobile-nav li + li { border-top: 1px solid var(--rule); }
/* Scoped to the list so it cannot override .btn's colour and padding. */
.mobile-nav ul a {
  display: block;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark-800);
}
.mobile-nav .btn { width: 100%; margin-top: 20px; }

@media (max-width: 1040px) {
  .nav { gap: 26px; }
  .masthead__cta .btn { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .wordmark__mark { font-size: 25px; }
  .wordmark__divider { height: 28px; }
  .wordmark__name { font-size: 12px; letter-spacing: 0.16em; }
  .wordmark__tag { font-size: 8px; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--dark-800);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
  /* Longhand only — a `padding` shorthand here would wipe out the
     horizontal gutters that .container sets. */
  padding-top: 108px;
  padding-bottom: 112px;
}
.hero h1 { color: var(--white); }
.hero__lede {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.68;
  color: var(--text-on-dark-2);
  max-width: 52ch;
}
.hero__meta {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--dark-line);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.hero__meta-item { }
.hero__meta-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.hero__meta-value {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--white);
  line-height: 1.4;
}

.hero__figure { position: relative; }

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 80px;
  }
  .hero__figure { max-width: 420px; }
}
@media (max-width: 900px) {
  .hero__inner { padding-top: 56px; padding-bottom: 64px; }
  .hero__meta { gap: 28px; margin-top: 34px; }
}

/* Plat figure (inline SVG art) */
.plat { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   10. Section headers
   -------------------------------------------------------------------------- */
.section-head { max-width: 760px; }
.section-head p { margin-top: 22px; }

.section-head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  max-width: none;
}
.section-head--split p { margin-top: 0; padding-bottom: 6px; }

@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .section-head--split p { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   11. Capability cards (no outlines — separated by fill)
   -------------------------------------------------------------------------- */
/* Tiles are separated by fill + gap only — never by an outline or divider. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.cap {
  background: var(--paper);
  padding: 38px 32px 42px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease;
}
.section--paper .cap { background: var(--white); }
.cap:hover { background: var(--paper-2); }
.section--paper .cap:hover { background: var(--paper-2); }

.cap__icon {
  color: var(--gold);
  margin-bottom: 26px;
}
.cap h3 { margin-bottom: 14px; }
.cap p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-2);
}
.cap__num {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 20px;
  letter-spacing: 0.06em;
}

@media (max-width: 1100px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cap-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .cap { padding: 32px 26px 34px; }
}

/* --------------------------------------------------------------------------
   12. Service detail rows
   -------------------------------------------------------------------------- */
.svc-list { margin-top: 8px; }
.svc {
  display: grid;
  grid-template-columns: 88px 1fr 1.15fr;
  gap: 48px;
  padding: 52px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.svc__num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.08em;
  padding-top: 6px;
}
.svc__title h3 { font-size: 26px; }
.svc__title .svc__icon { color: var(--gold); margin-bottom: 20px; }
.svc__body p {
  color: var(--text-2);
  font-size: 16.5px;
}
.svc__points {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}
.svc__points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.svc__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

@media (max-width: 980px) {
  .svc { grid-template-columns: 60px 1fr; gap: 20px 28px; padding: 40px 0; }
  .svc__body { grid-column: 2; }
  .svc__title h3 { font-size: 23px; }
}
@media (max-width: 620px) {
  .svc { grid-template-columns: 1fr; gap: 18px; }
  .svc__body { grid-column: 1; }
  .svc__num { padding-top: 0; }
  .svc__points { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. Process
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.step {
  background: var(--dark-700);
  padding: 40px 32px 44px;
}
.section--dark-deep .step { background: var(--dark-800); }
.step__num {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 24px;
}
.step h3 { color: var(--white); font-size: 19px; margin-bottom: 12px; }
.step p { font-size: 14.5px; line-height: 1.62; color: var(--text-on-dark-2); }

@media (max-width: 980px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   14. Audience / two-column feature
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.split--figure-first .split__figure { order: -1; }
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split--figure-first .split__figure { order: 0; }
}

.audience {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.audience__item {
  background: var(--paper);
  padding: 32px 30px 34px;
}
.section--paper .audience__item { background: var(--white); }
.audience__item h4 { color: var(--dark-800); margin-bottom: 10px; letter-spacing: 0.08em; }
.audience__item p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 620px) { .audience { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--dark-800);
  color: var(--white);
  padding: 84px 0 92px;
}
.page-head h1 { color: var(--white); max-width: 20ch; }
.page-head .lede { margin-top: 26px; max-width: 60ch; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-2);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb span { color: var(--dark-line); }
@media (max-width: 900px) { .page-head { padding: 52px 0 60px; } }

/* --------------------------------------------------------------------------
   17. Insights / article cards
   -------------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.post {
  background: var(--paper);
  padding: 40px 34px 44px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease;
}
.section--paper .post { background: var(--white); }
.post:hover { background: var(--paper-2); }
.section--paper .post:hover { background: var(--paper-2); }
.post__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.post h3 { margin-bottom: 14px; }
.post p { font-size: 15px; color: var(--text-2); line-height: 1.62; flex: 1; }
.post .link-arrow { margin-top: 28px; align-self: flex-start; }
@media (max-width: 980px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   18. Coverage / region blocks
   -------------------------------------------------------------------------- */
.regions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.region {
  background: var(--paper);
  padding: 46px 40px 50px;
}
.section--paper .region { background: var(--white); }
.region__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.region h3 { font-size: 25px; margin-bottom: 16px; }
.region p { color: var(--text-2); font-size: 15.5px; }
.region__tags {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.tag {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--paper-3);
  padding: 7px 12px;
}
@media (max-width: 800px) {
  .regions { grid-template-columns: 1fr; }
  .region { padding: 36px 28px 40px; }
}

/* --------------------------------------------------------------------------
   18b. Principal / founder
   -------------------------------------------------------------------------- */
.principal {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  align-items: start;
}

.principal__card {
  background: var(--paper);
  padding: 40px 40px 44px;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

/* Source headshot is circle-cropped; masking here keeps it clean on any
   background and regardless of whether the file has transparency. */
.principal__photo {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper-2);
  margin: 0 auto 36px;
}

.principal__name {
  font-size: 34px;
  line-height: 1.15;
}
.principal__role {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 14px;
}
.principal__role--sub {
  color: var(--text-3);
  margin-top: 8px;
}

/* Stacked, not two-column — the card is too narrow for a label gutter.
   Doubled class raises specificity above the base .definition-list rule,
   which is defined later in this file. */
.definition-list.definition-list--compact > div {
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 18px 0;
}
.definition-list.definition-list--compact dt {
  padding-top: 0;
  font-size: 11px;
  color: var(--text-3);
}
.definition-list.definition-list--compact dd { font-size: 14.5px; line-height: 1.55; }
.definition-list.definition-list--compact > div:first-child { border-top: 0; padding-top: 0; }

.pull-quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.42;
  color: var(--text);
  margin: 38px 0;
  padding-left: 28px;
  box-shadow: inset 2px 0 0 0 var(--gold);
}

@media (max-width: 1040px) {
  .principal { grid-template-columns: 320px 1fr; gap: 48px; }
}
@media (max-width: 860px) {
  .principal { grid-template-columns: 1fr; gap: 44px; }
  .principal__card { position: static; padding: 36px 32px 40px; }
  .principal__photo { margin-left: 0; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }

.contact-item { padding: 26px 0; border-top: 1px solid var(--rule); }
.contact-item:first-of-type { border-top: 0; padding-top: 0; }
.contact-item__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.contact-item__value {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--dark-800);
  line-height: 1.4;
}
.contact-item__value a:hover { color: var(--rust); }
.contact-item__note { font-size: 14px; color: var(--text-3); margin-top: 8px; }

.form { background: var(--paper); padding: 44px 44px 48px; }
.section--paper .form { background: var(--white); }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 9px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 0;
  box-shadow: inset 0 -1px 0 0 var(--rule-strong);
  padding: 13px 14px;
  font-size: 15.5px;
  color: var(--text);
  transition: box-shadow 0.18s ease;
}
.section--paper .field input,
.section--paper .field select,
.section--paper .field textarea { background: var(--paper); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 0 var(--gold);
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
.field select { appearance: none; border-radius: 0; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-3);
}
.form .btn { width: 100%; margin-top: 8px; }
.form__note { font-size: 13px; color: var(--text-3); margin-top: 18px; line-height: 1.55; }
@media (max-width: 620px) {
  .form { padding: 32px 26px 36px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   20. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--dark-900);
  color: var(--white);
  padding: 84px 0 88px;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--text-on-dark-2); margin-top: 20px; max-width: 52ch; }
.cta-band .btn-row { margin-top: 0; justify-content: flex-end; }
@media (max-width: 940px) {
  .cta-band { padding: 60px 0 64px; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 34px; }
  .cta-band .btn-row { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--dark-900);
  color: var(--text-on-dark-2);
  border-top: 1px solid var(--dark-line);
  padding: 72px 0 0;
  font-size: 14.5px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
}
.footer .wordmark__mark { color: var(--gold); }
.footer .wordmark__divider { background: var(--dark-line); }
.footer .wordmark__name { color: var(--white); }
.footer .wordmark__tag { color: var(--text-on-dark-2); }
.footer__blurb { margin-top: 26px; max-width: 34ch; line-height: 1.65; color: var(--text-on-dark-2); }
.footer h4 {
  color: var(--white);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  margin-bottom: 22px;
}
.footer__links li + li { margin-top: 12px; }
.footer__links a { transition: color 0.18s ease; }
.footer__links a:hover { color: var(--gold-bright); }
.footer__bottom {
  border-top: 1px solid var(--dark-line);
  padding: 26px 0 34px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}
.footer__bottom a:hover { color: var(--gold-bright); }
@media (max-width: 980px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .footer { padding-top: 52px; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0 !important; }
.text-brass { color: var(--gold); }

/* Quote / statement block */
.statement {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--dark-800);
  max-width: 24ch;
}
.section--dark .statement,
.section--dark-deep .statement { color: var(--white); }

.definition-list { }
.definition-list > div {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.definition-list dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dark-800);
  padding-top: 3px;
}
.definition-list dd { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.62; }
@media (max-width: 720px) {
  .definition-list > div { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   23. Photography
   ========================================================================== */

/* Hero over a photograph. The scrim is a flat rgba wash, not a gradient,
   so the headline holds contrast over the bright part of the sky. */
.hero--photo {
  position: relative;
  background-color: var(--dark-900);
  isolation: isolate;
}
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 15, 17, 0.56);
}
.hero--photo .hero__figure { display: none; }
.hero--photo .hero__inner { grid-template-columns: minmax(0, 760px); }
.hero--photo h1 { max-width: 15ch; }
.hero--photo .hero__lede { color: #D8DCE0; }

/* Full-bleed photo band used to break up long pages */
.photoband {
  position: relative;
  height: clamp(240px, 30vw, 420px);
  overflow: hidden;
  background: var(--dark-900);
}
.photoband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photoband__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 0;
  background: rgba(14, 15, 17, 0.55);
}
.photoband__caption .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E9E4DA;
}
.photoband__caption em {
  font-style: normal;
  color: var(--gold-bright);
}

/* Photo paired with copy */
.photo-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-900);
}
.photo-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .photoband__caption .container { font-size: 9.5px; letter-spacing: 0.12em; }
  .photoband__caption span:last-child { display: none; }
}

/* ==========================================================================
   24. Live commodity ticker
   ========================================================================== */
/* Lives inside .topbar__inner, sharing the row with phone and email.
   The bar's own background/height come from the topbar. */
.ticker {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex: 1 1 auto;
  margin-right: auto;
}
.ticker__label {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.ticker__list {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker__list::-webkit-scrollbar { display: none; }

.quote {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 11.5px;
  white-space: nowrap;
}
.quote__sym {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9AA2AA;
}
.quote__px {
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.quote__chg {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.quote__chg.is-up   { color: #6FBF73; }
.quote__chg.is-down { color: #E06B5A; }
.quote__chg.is-flat { color: #8A9299; }

.ticker__stamp {
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6C747C;
}
.ticker.is-stale .ticker__stamp { color: #8A6A22; }

@media (max-width: 1560px) { .ticker__stamp { display: none; } }
@media (max-width: 900px)  { .ticker__label { display: none; } }

/* Phones: contacts and quotes each get their own row; quotes scroll. */
@media (max-width: 760px) {
  .topbar__inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 4px;
  }
  .ticker { order: 2; flex-basis: 100%; }
  .topbar__contact { order: 1; flex-basis: 100%; justify-content: space-between; gap: 14px; }
}

.post__date {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.post__date::before { content: "· "; }

.footer__credit {
  font-size: 11.5px;
  color: var(--text-on-dark-2);
}
.footer__credit a { color: inherit; box-shadow: inset 0 -1px 0 0 var(--dark-line); }
.footer__credit a:hover { color: var(--gold-bright); }

/* Credentials strip under the hero */
.cred-strip {
  background: var(--dark-800);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cred-strip__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px var(--gutter);
  flex-wrap: wrap;
}
.cred-strip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.cred-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
}
.cred-strip__list li {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9Ced3;
}

/* "Powered by B27 Intelligence" line under page-head headings */
.powered-by {
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.powered-by strong {
  color: var(--gold);
  font-weight: 600;
}

/* ==========================================================================
   25. Michele's Blog — Growing in God's Word
   ========================================================================== */
.faith-head { background: var(--paper-2); }

/* Devotional reading setting: serif body, longer measure, looser leading. */
.faith-copy p {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.78;
  color: var(--text-2);
}
.faith-copy p + p { margin-top: 20px; }

.faith-lead {
  font-family: var(--serif);
  font-size: 23px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  margin-bottom: 24px;
}
.faith-signoff {
  margin-top: 26px;
  font-style: italic;
  color: var(--text) !important;
}

/* Scripture pulled out of the flow, centred, gold rule above */
.scripture {
  margin: 34px 0;
  padding-top: 26px;
  text-align: center;
  border-top: 1px solid var(--rule-strong);
}
.scripture p {
  font-family: var(--serif);
  font-size: 21px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  font-style: italic;
}
.scripture cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* Each sermon separated by a hairline, never a box */
.sermon {
  padding-top: 52px;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.sermon:first-of-type { padding-top: 0; margin-top: 44px; border-top: 0; }
.sermon h3 {
  font-size: clamp(26px, 3vw, 33px);
  line-height: 1.2;
}
.sermon__meta {
  margin-top: 12px;
  margin-bottom: 26px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.church { text-align: center; }
.church h2 { color: #fff; }
.church__line {
  margin-top: 8px;
  color: var(--text-on-dark-2);
  font-size: 16px;
}
.church__line:first-of-type { margin-top: 20px; }
.church__motto {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
}
.church .eyebrow { justify-content: center; }
.church .eyebrow::after { display: none; }
.church .btn-row { justify-content: center; margin-top: 32px; }

/* ==========================================================================
   26. Photo-backed sections
   --------------------------------------------------------------------------
   Replaces the flat black bands. The scrim is a single flat rgba wash — no
   gradient — held dark enough that body copy keeps AA contrast over the
   brightest part of a sunset.
   ========================================================================== */
.section--photo,
.cta-band--photo {
  position: relative;
  isolation: isolate;
  background-color: var(--dark-900);
  color: var(--text-on-dark);
}
.section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.section--photo::after,
.cta-band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 14, 16, 0.60);
}
.cta-band--photo::after { background: rgba(13, 14, 16, 0.58); }

/* Tiles sitting on a photo need their own fill to stay readable */
.section--photo .step { background: rgba(28, 31, 34, 0.86); }
.section--photo .eyebrow::after { background: var(--dark-line); }

/* Caption strip reused on photo sections */
.section--photo .photo-credit,
.cta-band--photo .photo-credit {
  position: absolute;
  right: var(--gutter);
  bottom: 12px;
  z-index: 1;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

/* These sections were .section--dark-deep before gaining a photo, so they
   need the same light-on-dark text rules that class carried. */
.section--photo h2,
.section--photo h3,
.section--photo h4 { color: #fff; }
.section--photo .lede,
.section--photo .body-copy p,
.section--photo p { color: #D5DADE; }
.section--photo .step h4 { color: #fff; }
.section--photo .step p { color: var(--text-on-dark-2); }
.section--photo .step__num { color: var(--gold-bright); }

/* ==========================================================================
   27. Remaining bands, photo-backed
   --------------------------------------------------------------------------
   Every dark band on the site now carries an image behind a flat scrim.
   The footer stays solid — it is the one place the page needs to land.
   ========================================================================== */
.page-head--photo,
.cred-strip--photo,
.topbar--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.page-head--photo::after,
.cred-strip--photo::after,
.topbar--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* Headline + lede sit here, so this scrim carries the most weight. */
.page-head--photo::after  { background: rgba(13, 14, 16, 0.45); }
.cred-strip--photo::after { background: rgba(13, 14, 16, 0.62); }
/* Live prices must stay crisp at 11px, so the top bar reads nearly solid. */
.topbar--photo::after     { background: rgba(13, 14, 16, 0.86); }

.page-head--photo .section__bg  { object-position: 50% 38%; }
.cred-strip--photo .section__bg { object-position: 50% 62%; }
.topbar--photo .section__bg     { object-position: 50% 70%; }

.page-head--photo .lede { color: #D5DADE; }
.cta-band--photo p { color: #D5DADE; }

/* ==========================================================================
   28. Live headline feed
   ========================================================================== */
.feed__stamp {
  margin-top: 32px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.feed.is-stale .feed__stamp { color: var(--gold-dim); }
.feed__grid { margin-top: 52px; }

/* ==========================================================================
   29. Story detail
   ========================================================================== */
.story__cat { margin-bottom: 18px; }
.story__title {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.14;
  max-width: 22ch;
}
.story__date {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.story__excerpt {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.6;
  color: var(--text) !important;
}

/* Attribution block — fill, no outline, consistent with the card system */
.story__source {
  margin-top: 44px;
  padding: 32px 34px 34px;
  background: var(--paper);
}
.story__source-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.story__source-text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.story__source-text strong { color: var(--text); font-weight: 600; }
.story__source-link { margin-top: 22px; }

.story-missing h1 { max-width: 18ch; }
.story__more { margin-top: 44px; }

@media (max-width: 700px) {
  .story__source { padding: 26px 22px 28px; }
}

/* Messages as cards — same fill-and-gap language as the insights posts,
   but full width, because devotional prose does not read in a 3-up column. */
.sermon-card {
  background: var(--white);
  padding: 48px 48px 52px;
  margin-top: 20px;
  border-top: 0;
  transition: background-color 0.2s ease;
}
.sermon-card:first-of-type { margin-top: 44px; padding-top: 48px; }
.sermon-card .scripture { border-top-color: var(--rule); }
.sermon-card .faith-copy p { color: var(--text-2); }

@media (max-width: 700px) {
  .sermon-card { padding: 32px 24px 36px; }
  .sermon-card:first-of-type { padding-top: 32px; }
}

/* ==========================================================================
   30. Message detail page
   ========================================================================== */
.message__ref {
  color: var(--gold-dim);
  margin-bottom: 16px;
}
.message__title {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.14;
  max-width: 20ch;
}
.message__church {
  margin-top: 48px;
  padding: 32px 34px 34px;
  background: var(--paper);
}
.message__church-line {
  font-size: 15px;
  color: var(--text-2);
}
.message__church-line strong { color: var(--text); font-weight: 600; }
.message__church-motto {
  margin: 14px 0 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-dim);
}
@media (max-width: 700px) {
  .message__church { padding: 26px 22px 28px; }
}

/* ==========================================================================
   31. Adaptive treatment over photography
   --------------------------------------------------------------------------
   The base dark styles assume a flat #131517 field, so they use --dark-line
   (#32373C) for rules and ghost-button borders. Over a photograph that reads
   as a black box rather than a hairline. Anything sitting on an image switches
   to translucent white, which holds up over any part of any photo, and ghost
   buttons invert to solid white on hover instead of filling near-black.
   ========================================================================== */

/* Hairlines and eyebrow rules */
.hero--photo .eyebrow::after,
.section--photo .eyebrow::after,
.cta-band--photo .eyebrow::after,
.page-head--photo .eyebrow::after,
.cred-strip--photo .eyebrow::after { background: rgba(255, 255, 255, 0.34); }

.hero--photo .hero__meta,
.page-head--photo .hero__meta { border-top-color: rgba(255, 255, 255, 0.26); }

.page-head--photo .breadcrumb span,
.hero--photo .breadcrumb span { color: rgba(255, 255, 255, 0.4); }

/* Ghost buttons: hairline in translucent white, inverting to solid on hover.
   The faint fill lifts the label off busy areas of the image. */
.hero--photo .btn--ghost-light,
.section--photo .btn--ghost-light,
.cta-band--photo .btn--ghost-light,
.page-head--photo .btn--ghost-light {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}
.hero--photo .btn--ghost-light:hover,
.section--photo .btn--ghost-light:hover,
.cta-band--photo .btn--ghost-light:hover,
.page-head--photo .btn--ghost-light:hover {
  background: #FFFFFF;
  color: var(--dark-900);
  box-shadow: inset 0 0 0 1px #FFFFFF;
}

/* Credentials strip divider pips */
.cred-strip--photo .cred-strip__list li + li::before {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   32. Admin
   ========================================================================== */
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.admin-compose,
.admin-list { background: var(--paper); padding: 40px 38px 44px; }
.admin-compose__title {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 28px;
}
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: block; margin-bottom: 22px; }
.field__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}
.field__label em {
  font-style: normal;
  color: var(--gold-dim);
  text-transform: none;
  letter-spacing: 0.04em;
}
.field__input {
  width: 100%;
  padding: 13px 15px;
  background: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-size: 15px;
  font-family: var(--sans);
  color: var(--text);
}
.field__input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--gold);
}
textarea.field__input { resize: vertical; line-height: 1.6; }
.field__hint {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-3);
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
  margin-top: 4px;
}

.admin-msg {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.admin-msg.is-error { color: #A5341A; }
.admin-msg.is-ok { color: #2F6B3A; }

.admin-empty { font-size: 14px; color: var(--text-3); }
.admin-items { display: flex; flex-direction: column; }
.admin-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.admin-item:first-child { border-top: 0; padding-top: 0; }
.admin-item h3 { font-size: 17px; line-height: 1.3; margin-top: 4px; }
.admin-item__ref {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.admin-item__draft { color: var(--text-3); }
.admin-item__actions { display: flex; gap: 14px; flex: 0 0 auto; }
.admin-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  box-shadow: inset 0 -1px 0 0 var(--rule-strong);
}
.admin-link:hover { color: var(--text); }
.admin-link--danger:hover { color: #A5341A; }

.admin-note { font-size: 13px; line-height: 1.6; color: var(--text-3); }

@media (max-width: 980px) {
  .admin-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .admin-compose, .admin-list { padding: 28px 22px 32px; }
  .admin-row { grid-template-columns: 1fr; gap: 0; }
}

/* Footer admin link — deliberately quiet */
.footer__admin {
  color: var(--text-3);
  box-shadow: inset 0 -1px 0 0 var(--dark-line);
}
.footer__admin:hover { color: var(--gold); }

/* Founder card on the home page — same card as the About page, but the
   sticky behaviour is dropped since this section is short. */
.principal--intro .principal__card { position: static; }
.principal--intro .principal__photo { max-width: 240px; }
.principal--intro .principal__name { font-size: 30px; }
.founder .principal__card { background: var(--white); }

/* ==========================================================================
   33. Founder card — horizontal, home page
   --------------------------------------------------------------------------
   Lives inside the left column of the .split, so its width is that column's
   width and it lines up under the statement above it rather than spanning
   the full container.
   ========================================================================== */
.founder-card {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 44px;
  padding: 24px 28px 24px 24px;
  background: var(--paper);
  transition: background-color 0.2s ease;
}
.founder-card:hover { background: var(--paper-2); }

.founder-card__photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper-2);
}
.founder-card__body { display: block; min-width: 0; }

.founder-card__name {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.founder-card__role {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.founder-card__role--sub { margin-top: 3px; color: var(--text-3); }

.founder-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
}
.founder-card:hover .founder-card__link { color: var(--rust-bright); }

@media (max-width: 520px) {
  .founder-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
  .founder-card__photo { width: 84px; height: 84px; }
}