/*
Theme Name: PNW Select Rope — Editorial
Theme URI: https://pnwselectrope.com
Author: PNW Select Rope
Author URI: https://pnwselectrope.com
Description: Editorial Parchment & Playfair block theme for PNW Select Rope. Light-dominant, hand-set typographic homepage with staggered lineup grid, drop-caps, mono-tag overlines, italic-accent emphasis, and arrow-link affordances. Source mockup: homepage-mockups/option-3.html.
Version: 0.2.3
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: All rights reserved
License URI:
Text Domain: pnw-select-rope-editorial
Tags: full-site-editing, block-templates, block-patterns, editorial, custom-colors, custom-logo
*/

/* ============================================================
   PNW Select Rope — Editorial
   Source of truth: homepage-mockups/option-3.html
   theme.json declares color/typography/spacing tokens for the
   editor. This file carries the editorial primitives WP cannot
   express: drop caps, ::first-letter, staggered grid offsets,
   italic-accent ems, arrow-links, mono-tag overlines, hover
   choreography, and the reveal animation.
   ============================================================ */

:root {
  --color-forge-black: #1A1A18;
  --color-rope-tan: #B5A07A;
  --color-iron-charcoal: #4A4A40;
  --color-burnished-gold: #C4943C;
  --color-parchment: #EDE8DC;

  --forge-black-700: #3E3E38;
  --forge-black-800: #2C2C28;

  --rope-tan-500: #9E8A64;

  --parchment-50: #F6F4EC;
  --parchment-200: #E0D9C8;
  --parchment-300: #D2C9B4;

  --burnished-gold-200: #ECC87A;
  --burnished-gold-500: #A87C2E;

  --font-primary: 'Inter', 'Arial', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  --max-width: 1200px;
  --max-content: 720px;

  --header-height: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; }
body.pnw-editorial {
  background: var(--parchment-50);
  font-family: var(--font-primary);
  color: var(--color-iron-charcoal);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* WordPress wraps templates in a .wp-site-blocks element. Override the
   block-gap on direct children so sections stack flush without WP's
   default whitespace between top-level groups. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Page sections live in post-content (so they're editable in the block
   editor). Keep the full-bleed sections flush — the flow layout would
   otherwise inject block-gap margins between them. */
.pnw-editorial .wp-block-post-content > * { margin-block: 0; }

a { color: inherit; }

/* ─── Reveal animations ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── Editorial primitives ─── */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
}
.mono-tag .gold { color: var(--color-burnished-gold); }
.mono-tag .num  { color: var(--color-forge-black); font-weight: 500; }

.italic-accent {
  font-style: italic;
  color: var(--color-burnished-gold);
}

/* Restyle WordPress's <em> inside editorial headings to the burnished gold
   italic. Patterns mark accent words with <em> in heading content. */
.pnw-editorial h1 em,
.pnw-editorial h2 em,
.pnw-editorial h3 em,
.pnw-editorial h4 em {
  font-style: italic;
  color: var(--color-burnished-gold);
  font-weight: 400;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-forge-black);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-burnished-gold);
  padding-bottom: 4px;
  transition: gap 200ms ease, border-color 200ms ease;
}
.arrow-link:hover { gap: 12px; border-bottom-color: var(--color-forge-black); }
.arrow-link::after {
  content: "";
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h12M9 1l4 4-4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h12M9 1l4 4-4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.italic-link {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 18px;
  color: var(--color-forge-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-burnished-gold);
  padding-bottom: 3px;
  transition: border-color 200ms ease, color 200ms ease;
}
.italic-link:hover { border-bottom-color: var(--color-forge-black); }

/* Drop-cap utility: applied to the first paragraph in a group. */
.has-drop-cap::first-letter {
  font-family: var(--font-secondary);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-forge-black);
  float: left;
  line-height: 0.9;
  margin-right: 8px;
  margin-top: 4px;
}
.has-drop-cap--lg::first-letter {
  font-size: 64px;
  margin-right: 10px;
  margin-top: 6px;
}

/* Editorial buttons: square, uppercase, forge-black */
.pnw-editorial .wp-block-button .wp-block-button__link {
  background: var(--color-forge-black);
  color: var(--parchment-50);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pnw-editorial .wp-block-button .wp-block-button__link:hover,
.pnw-editorial .wp-block-button .wp-block-button__link:focus-visible {
  background: var(--forge-black-800);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26,26,24,0.2);
  outline: none;
}
.pnw-editorial .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-forge-black);
  border: 1px solid var(--color-forge-black);
}
.pnw-editorial .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-forge-black);
  color: var(--parchment-50);
}

/* On dark sections, invert the primary button */
.pnw-editorial .has-forge-black-background-color .wp-block-button .wp-block-button__link,
.pnw-editorial .section-custom-orders .wp-block-button .wp-block-button__link,
.pnw-editorial .section-finale .wp-block-button .wp-block-button__link {
  background: var(--color-parchment);
  color: var(--color-forge-black);
}
.pnw-editorial .has-forge-black-background-color .wp-block-button .wp-block-button__link:hover,
.pnw-editorial .section-custom-orders .wp-block-button .wp-block-button__link:hover,
.pnw-editorial .section-finale .wp-block-button .wp-block-button__link:hover {
  background: var(--parchment-50);
  box-shadow: 0 6px 16px rgba(0,0,0,0.32);
}
.pnw-editorial .has-forge-black-background-color .italic-link {
  color: var(--color-parchment);
  border-bottom-color: var(--burnished-gold-200);
}
.pnw-editorial .has-forge-black-background-color .italic-link:hover {
  border-bottom-color: var(--color-parchment);
}

/* ─── Image placeholders (when no image is uploaded) ─── */
.wp-block-image:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--parchment-200);
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(26,26,24,0.04) 14px 15px);
  border: 1px solid var(--parchment-300);
  min-height: 280px;
}
.wp-block-image:not(:has(img))::after {
  content: "IMAGE";
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rope-tan-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hairline separator utility */
.is-style-hairline {
  height: 1px;
  background: var(--parchment-300);
  width: 100%;
  border: 0;
  margin: 0;
}

/* ============================================================
   Header (template part)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246,244,236,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--parchment-300);
}
/* The core navigation mobile menu opens as a position:fixed overlay. A
   backdrop-filter on the header makes it a containing block for fixed
   descendants, which trapped that overlay inside the 76px sticky header and
   clipped the menu. Drop the blur at the widths where the hamburger overlay
   can open so the overlay sizes to the full viewport. Desktop keeps the frost. */
@media (max-width: 600px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 700px) { .site-header__inner { padding: 0 var(--space-md); } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-forge-black);
  overflow: hidden;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin: 0;
}
.brand-mark a { display: block; width: 100%; height: 100%; }
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}
.brand-name {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-forge-black);
  letter-spacing: -0.01em;
  margin: 0;
}
.brand-name a {
  color: inherit;
  text-decoration: none;
}

.header-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav .wp-block-navigation-item__content {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-iron-charcoal);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.header-nav .wp-block-navigation-item__content:hover,
.header-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--color-forge-black);
}

.header-cta-wrap { margin: 0; flex-shrink: 0; }
.header-cta {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 18px;
  color: var(--color-forge-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-burnished-gold);
  padding-bottom: 2px;
  flex-shrink: 0;
  transition: border-color 200ms ease;
}
.header-cta:hover, .header-cta:focus-visible {
  border-bottom-color: var(--color-forge-black);
}
.header-cta .arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.header-cta:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) { .header-nav .wp-block-navigation__container { gap: var(--space-md); } }
@media (max-width: 768px) {
  .header-nav, .header-cta-wrap { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.section-hero {
  background: var(--color-parchment);
  padding: var(--space-3xl) 0 var(--space-4xl);
  border-bottom: 1px solid var(--parchment-300);
}
.section-hero .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 700px) { .section-hero .container { padding: 0 var(--space-md); } }

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2xl);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.section-hero h1 {
  font-family: var(--font-secondary);
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin: 0 0 var(--space-2xl);
}
.hero__media { margin: var(--space-xl) 0; }
.hero__media .wp-block-image:not(:has(img)) { aspect-ratio: 21 / 9; min-height: 0; }
@media (max-width: 700px) { .hero__media .wp-block-image:not(:has(img)) { aspect-ratio: 4 / 3; } }
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
}
.hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-iron-charcoal);
  max-width: 44ch;
  margin: 0;
}
.hero__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  justify-self: end;
}
@media (max-width: 900px) {
  .hero__bottom { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero__actions { justify-self: start; }
}

/* ============================================================
   Section heads (shared across Industries, Lineup, Events…)
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-3xl);
}
.section-head .mono-tag { display: block; margin-bottom: var(--space-md); }
.section-head h2 {
  font-family: var(--font-secondary);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-head__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-iron-charcoal);
  max-width: 42ch;
  justify-self: end;
  margin: 0;
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: var(--space-md); }
  .section-head__sub { justify-self: start; }
}

/* ============================================================
   Industries (alternating discipline rows)
   ============================================================ */
.section-disciplines { padding: var(--space-4xl) 0 var(--space-3xl); }
.section-disciplines .container,
.section-lineup .container,
.section-events .container,
.section-process .container,
.section-faq .container,
.section-about .container,
.section-custom-orders .container,
.section-finale .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 700px) {
  .section-disciplines .container,
  .section-lineup .container,
  .section-events .container,
  .section-process .container,
  .section-faq .container,
  .section-about .container,
  .section-custom-orders .container,
  .section-finale .container {
    padding: 0 var(--space-md);
  }
}

.discipline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--parchment-300);
}
.discipline-row:last-child { border-bottom: 1px solid var(--parchment-300); }
.discipline-row--reverse .discipline-row__media { order: 2; }
.discipline-row__media .wp-block-image:not(:has(img)) { aspect-ratio: 4 / 3; min-height: 0; }
.discipline-row__copy { padding: 0 var(--space-md); }
.discipline-row__copy .mono-tag { display: block; margin-bottom: var(--space-md); }
.discipline-row__copy h3 {
  font-family: var(--font-secondary);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
}
.discipline-row__copy p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-iron-charcoal);
  max-width: 44ch;
  margin: 0 0 var(--space-lg);
}
@media (max-width: 900px) {
  .discipline-row { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-2xl) 0; }
  .discipline-row--reverse .discipline-row__media { order: 0; }
  .discipline-row__copy { padding: 0; }
}

/* ============================================================
   Lineup (staggered 2-up product grid)
   ============================================================ */
.section-lineup {
  background: var(--color-parchment);
  padding: var(--space-3xl) 0 var(--space-4xl);
  border-top: 1px solid var(--parchment-300);
}
.lineup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-2xl);
  row-gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}
.lineup-grid > .product:nth-child(2) { transform: translateY(var(--space-3xl)); }
.lineup-grid > .product:nth-child(4) { transform: translateY(var(--space-3xl)); }

.product .product__media .wp-block-image:not(:has(img)) { aspect-ratio: 4 / 5; min-height: 0; }
.product__spec {
  margin-top: var(--space-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-forge-black);
}
.product__sku {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-forge-black);
}
.product__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--rope-tan-500);
}
.product h3 {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: var(--space-md) 0 var(--space-xs);
}
.product p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-iron-charcoal);
  max-width: 44ch;
  margin: 0 0 var(--space-md);
}
@media (max-width: 900px) {
  .lineup-grid { grid-template-columns: 1fr; row-gap: var(--space-2xl); }
  .lineup-grid > .product:nth-child(2),
  .lineup-grid > .product:nth-child(4) { transform: none; }
}

/* ============================================================
   Custom Orders (dark CTA band)
   ============================================================ */
.section-custom-orders {
  background: var(--color-forge-black);
  color: var(--parchment-200);
  padding: var(--space-4xl) 0;
  text-align: center;
}
.custom-orders__inner { max-width: 760px; margin: 0 auto; }
.custom-orders__inner .mono-tag {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--burnished-gold-200);
}
.custom-orders__inner h2 {
  font-family: var(--font-secondary);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  color: var(--color-parchment);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.custom-orders__inner p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--parchment-300);
  max-width: 480px;
  margin: 0 auto var(--space-lg);
}
.custom-orders__actions {
  display: inline-flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Events (date · title · chip · arrow rows)
   ============================================================ */
.section-events { padding: var(--space-4xl) 0 var(--space-3xl); }
.events-list { margin-top: var(--space-xl); }
.event-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--parchment-300);
  text-decoration: none;
  color: inherit;
  transition: background 180ms ease, padding 180ms ease;
}
.event-row:last-child { border-bottom: 1px solid var(--parchment-300); }
.event-row:hover {
  background: rgba(196,148,60,0.04);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.event-row__date {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-forge-black);
  font-weight: 500;
}
.event-row__date .day {
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  color: var(--color-forge-black);
  margin-right: 8px;
  vertical-align: middle;
}
.event-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.event-row__title {
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.event-row__location { font-size: 14px; color: var(--color-iron-charcoal); }
.event-row__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-forge-black);
  border: 1px solid var(--color-forge-black);
  padding: 4px 10px;
}
.event-row__arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--color-forge-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-forge-black);
  transition: background 200ms ease, color 200ms ease;
}
.event-row__arrow::after {
  content: "";
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h12M9 1l4 4-4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5h12M9 1l4 4-4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.event-row:hover .event-row__arrow {
  background: var(--color-forge-black);
  color: var(--parchment-50);
}

/* Full-row click target — invisible <a> covering the entire event-row */
.event-row__overlay { margin: 0; }
.event-row__overlay a {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-decoration: none;
}
.event-row__overlay a:focus-visible {
  outline: 2px solid var(--color-burnished-gold);
  outline-offset: -4px;
}
.event-row > *:not(.event-row__overlay) { position: relative; z-index: 0; }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .event-row { grid-template-columns: 1fr auto; gap: var(--space-md); }
  .event-row__date { grid-column: 1 / -1; }
  .event-row__chip { display: none; }
}

/* ============================================================
   About (centered pullquote + 2-col body with drop-cap + list)
   ============================================================ */
.section-about {
  background: var(--color-parchment);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--parchment-300);
  border-bottom: 1px solid var(--parchment-300);
}
.about__pullquote {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto var(--space-3xl);
  position: relative;
}
.about__pullquote .mono-tag { display: inline-block; margin-bottom: var(--space-md); }
.about__pullquote blockquote {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-forge-black);
  letter-spacing: -0.02em;
  margin: 0;
}
.about__pullquote blockquote::before { content: "\201C"; color: var(--color-burnished-gold); margin-right: 6px; }
.about__pullquote blockquote::after  { content: "\201D"; color: var(--color-burnished-gold); margin-left: 6px; }

.about__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  column-gap: var(--space-3xl);
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.about__body p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-iron-charcoal);
  margin: 0;
}
.about__body p + p { margin-top: var(--space-md); }
.about__body .col-1 p:first-child::first-letter {
  font-family: var(--font-secondary);
  font-size: 64px;
  font-weight: 700;
  color: var(--color-forge-black);
  float: left;
  line-height: 0.9;
  margin-right: 10px;
  margin-top: 6px;
}
.about__body .col-2 ul {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  border-top: 1px solid var(--parchment-300);
}
.about__body .col-2 li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--parchment-300);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin: 0;
}
.about__body .col-2 li .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
  flex-shrink: 0;
  width: 80px;
}
.about__body .col-2 li .text {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 18px;
  color: var(--color-forge-black);
}
@media (max-width: 900px) {
  .about__body { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============================================================
   Process (numbered timeline)
   ============================================================ */
.section-process { padding: var(--space-4xl) 0 var(--space-3xl); }
.process-timeline {
  margin-top: var(--space-2xl);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.process-step {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-xl) 0;
  border-top: 1px dashed var(--parchment-300);
}
.process-step:first-child { border-top: 1px solid var(--color-forge-black); }
.process-step:last-child  { border-bottom: 1px solid var(--color-forge-black); }
.process-step__num {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 88px;
  font-weight: 700;
  line-height: 0.85;
  color: var(--color-forge-black);
  letter-spacing: -0.04em;
  margin: 0;
}
.process-step__copy h3 {
  font-family: var(--font-secondary);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-xs);
}
.process-step__copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-iron-charcoal);
  max-width: 52ch;
  margin: 0;
}
.process-cta { text-align: center; margin-top: var(--space-2xl); }
@media (max-width: 700px) {
  .process-step { grid-template-columns: 1fr; gap: var(--space-sm); }
  .process-step__num { font-size: 56px; }
}

/* ============================================================
   FAQ (core/details accordion, restyled)
   ============================================================ */
.section-faq {
  background: var(--color-parchment);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--parchment-300);
}
.faq-list {
  max-width: 880px;
  margin: var(--space-2xl) auto 0;
}
.faq-list .wp-block-details {
  border-top: 1px solid var(--parchment-300);
  padding: 0;
  margin: 0;
}
.faq-list .wp-block-details:last-child { border-bottom: 1px solid var(--parchment-300); }
.faq-list .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--color-forge-black);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.faq-list .wp-block-details summary::-webkit-details-marker { display: none; }
.faq-list .wp-block-details summary::marker { display: none; }
.faq-list .wp-block-details summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--color-burnished-gold);
  width: 28px;
  text-align: right;
  transition: transform 200ms ease;
}
.faq-list .wp-block-details[open] summary::after { transform: rotate(45deg); }
.faq-list .wp-block-details > p {
  padding: 0 0 var(--space-lg);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-iron-charcoal);
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   Finale (dark closing CTA)
   ============================================================ */
.section-finale {
  background: var(--color-forge-black);
  color: var(--parchment-200);
  padding: var(--space-4xl) 0;
  text-align: center;
}
.finale__inner { max-width: 880px; margin: 0 auto; }
.finale__inner .mono-tag {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--burnished-gold-200);
}
.finale__inner h2 {
  font-family: var(--font-secondary);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  color: var(--color-parchment);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-md);
}
.finale__inner p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--parchment-300);
  max-width: 480px;
  margin: 0 auto var(--space-lg);
}
.finale__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Footer (template part)
   ============================================================ */
.site-footer { padding: var(--space-3xl) 0 var(--space-xl); }
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.site-footer .brand-name { font-size: 16px; }
.site-footer .brand-mark { width: 30px; height: 30px; }
.site-footer__links {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
}
.site-footer__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-iron-charcoal);
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer__links a:hover, .site-footer__links a:focus-visible {
  color: var(--color-forge-black);
}
.site-footer__meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rope-tan-500);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-md); text-align: center; }
  .site-footer__meta { text-align: center; }
  .site-footer .brand { justify-content: center; }
  .site-footer__links { flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
}
@media (max-width: 700px) { .site-footer__inner { padding: 0 var(--space-md); } }

/* ============================================================
   Contact page
   Source mockup: option-3-contact.html. Sections: hero (crumbs +
   quick-contacts), inquiry (form card + channels + hours), visit
   (map + address), departments grid. FAQ + Finale reuse the shared
   section styles above.
   ============================================================ */
.contact-hero .container,
.section-inquiry .container,
.section-visit .container,
.section-departments .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 700px) {
  .contact-hero .container,
  .section-inquiry .container,
  .section-visit .container,
  .section-departments .container { padding: 0 var(--space-md); }
}

/* Inline image placeholder (used for the map block in core/html) */
.img-ph {
  width: 100%;
  background: var(--parchment-200);
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(26,26,24,0.04) 14px 15px);
  border: 1px solid var(--parchment-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.img-ph svg { stroke: var(--rope-tan-500); }
.img-ph span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rope-tan-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.img-ph--map { aspect-ratio: 4 / 3; }

/* Raw <button>/<a> submit button inside the form (core/html block). The
   core/button styling above only covers .wp-block-button__link. */
.pnw-editorial .btn {
  display: inline-block;
  background: var(--color-forge-black);
  color: var(--parchment-50);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 0;
  text-decoration: none;
  border: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.pnw-editorial .btn:hover,
.pnw-editorial .btn:focus-visible {
  background: var(--forge-black-800);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26,26,24,0.2);
  outline: none;
}
.pnw-editorial .btn:active { transform: translateY(0); }

/* ─── Contact hero ─── */
.contact-hero {
  background: var(--color-parchment);
  padding: var(--space-3xl) 0 var(--space-4xl);
  border-bottom: 1px solid var(--parchment-300);
}
.contact-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2xl);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.contact-hero__crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--rope-tan-500);
  text-transform: uppercase;
  margin: 0;
}
.contact-hero__crumbs a { color: var(--rope-tan-500); text-decoration: none; }
.contact-hero__crumbs a:hover { color: var(--color-forge-black); }
.contact-hero__crumbs .sep { margin: 0 6px; color: var(--parchment-300); }
.contact-hero h1 {
  font-family: var(--font-secondary);
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin: 0 0 var(--space-2xl);
}
.contact-hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
}
.contact-hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-iron-charcoal);
  max-width: 44ch;
  margin: 0;
}
.contact-hero__sub.has-drop-cap::first-letter {
  font-family: var(--font-secondary);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-forge-black);
  float: left;
  line-height: 0.9;
  margin-right: 8px;
  margin-top: 4px;
}
.contact-hero__quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-self: end;
  border-left: 1px solid var(--parchment-300);
  padding-left: var(--space-lg);
  max-width: 320px;
}
.contact-hero__quick .row { display: flex; flex-direction: column; margin: 0; }
.contact-hero__quick .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
  margin-bottom: 4px;
}
.contact-hero__quick .val {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-forge-black);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.contact-hero__quick .val em { font-style: italic; color: var(--color-burnished-gold); font-weight: 400; }
@media (max-width: 900px) {
  .contact-hero__bottom { grid-template-columns: 1fr; gap: var(--space-lg); }
  .contact-hero__quick { justify-self: start; border-left: none; padding-left: 0; max-width: 100%; }
}

/* ─── Inquiry (form + channels + hours) ─── */
.section-inquiry { padding: var(--space-4xl) 0 var(--space-3xl); }
.inquiry-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.form-card {
  border-top: 1px solid var(--color-forge-black);
  border-bottom: 1px solid var(--color-forge-black);
  padding: var(--space-2xl) 0;
}
.form-card .form-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
  margin-bottom: var(--space-md);
  display: block;
}
.form-card h3 {
  font-family: var(--font-secondary);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-xl);
}
.form-card h3 em { font-style: italic; color: var(--color-burnished-gold); font-weight: 400; }

.field { display: block; margin-bottom: var(--space-lg); }
.field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
  margin-bottom: var(--space-xs);
}
.field__label .req { color: var(--color-burnished-gold); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--parchment-300);
  border-radius: 0;
  padding: 10px 0;
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--color-forge-black);
  transition: border-color 200ms ease;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--color-forge-black); }
.field input::placeholder,
.field textarea::placeholder { color: var(--rope-tan-500); font-style: italic; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.field--row .field { margin-bottom: 0; }
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1A18' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}
.form-actions {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.form-actions .form-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rope-tan-500);
  text-transform: uppercase;
}

.channels {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-forge-black);
  border-bottom: 1px solid var(--color-forge-black);
}
.channel {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-lg) 0;
  border-bottom: 1px dashed var(--parchment-300);
  text-decoration: none;
  color: inherit;
  transition: padding 180ms ease, background 180ms ease;
}
.channel:last-child { border-bottom: none; }
.channel:hover {
  background: rgba(196,148,60,0.04);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.channel__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-forge-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-forge-black);
}
.channel__icon svg { width: 18px; height: 18px; stroke: currentColor; }
.channel__body { display: flex; flex-direction: column; gap: 2px; }
.channel__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
}
.channel__val {
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.channel__val em { font-style: italic; color: var(--color-burnished-gold); font-weight: 400; }
.channel__note { font-size: 14px; color: var(--color-iron-charcoal); margin-top: 4px; }

.hours-card {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-forge-black);
  padding-top: var(--space-md);
}
.hours-card h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rope-tan-500);
  font-weight: 500;
  margin: 0 0 var(--space-md);
}
.hours-card ul { list-style: none; margin: 0; padding: 0; }
.hours-card li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px dashed var(--parchment-300);
  font-family: var(--font-secondary);
  font-size: 17px;
  color: var(--color-forge-black);
}
.hours-card li:last-child { border-bottom: none; }
.hours-card li .day { font-style: italic; color: var(--color-iron-charcoal); }
.hours-card li.is-open .time { color: var(--color-burnished-gold); }
.hours-card li.is-closed .time { color: var(--rope-tan-500); }
@media (max-width: 900px) {
  .inquiry-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .field--row { grid-template-columns: 1fr; }
}

/* ─── Visit (map + address) ─── */
.section-visit {
  background: var(--color-parchment);
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--parchment-300);
  border-bottom: 1px solid var(--parchment-300);
}
.visit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.visit-row__media .img-ph { aspect-ratio: 4 / 3; }
.visit-row__copy .mono-tag { display: block; margin-bottom: var(--space-md); }
.visit-row__copy h2 {
  font-family: var(--font-secondary);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.visit-row__copy p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-iron-charcoal);
  max-width: 44ch;
  margin: 0 0 var(--space-lg);
}
.visit-row__address {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 22px;
  color: var(--color-forge-black);
  line-height: 1.4;
  margin: 0 0 var(--space-lg);
}
.visit-row__address em { color: var(--color-burnished-gold); font-style: italic; }
.visit-row__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
  .visit-row { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ─── Departments grid ─── */
.section-departments { padding: var(--space-4xl) 0 var(--space-3xl); }
.dept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-forge-black);
  border-bottom: 1px solid var(--color-forge-black);
}
.dept-card {
  padding: var(--space-2xl) var(--space-lg);
  border-right: 1px solid var(--parchment-300);
  border-bottom: 1px solid var(--parchment-300);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: background 220ms ease;
}
.dept-card:nth-child(2n) { border-right: none; }
.dept-card:nth-last-child(-n+2) { border-bottom: none; }
.dept-card:hover { background: rgba(196,148,60,0.04); }
.dept-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.dept-card__num {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--color-burnished-gold);
  font-weight: 400;
}
.dept-card__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-forge-black);
  border: 1px solid var(--color-forge-black);
  padding: 4px 10px;
}
.dept-card h3 {
  font-family: var(--font-secondary);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-forge-black);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.dept-card h3 em { font-style: italic; color: var(--color-burnished-gold); font-weight: 400; }
.dept-card p { font-size: 16px; line-height: 1.75; color: var(--color-iron-charcoal); margin: 0; }
.dept-card__contact {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-forge-black);
  border-top: 1px dashed var(--parchment-300);
  padding-top: var(--space-md);
}
.dept-card__contact .who {
  color: var(--rope-tan-500);
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .dept-grid { grid-template-columns: 1fr; }
  .dept-card { border-right: none !important; border-bottom: 1px solid var(--parchment-300) !important; }
  .dept-card:last-child { border-bottom: none !important; }
}