/* ============================================================================
   Dual Cities NWA. Theme CSS.
   Token system, components, and editorial layouts.
   Direction B, Community Hub. No em dashes anywhere.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CSS variables (semantic + component layer; primitives come via theme.json)
   ---------------------------------------------------------------------------- */

:root {
	/* Semantic color tokens, light surface defaults */
	--color-bg-primary:    #FAF5EC;
	--color-bg-secondary:  #F1E9D8;
	--color-bg-elevated:   #FFFFFF;
	--color-bg-inverse:    #1A1410;
	--color-bg-tinted:     #FBF1EC;
	--color-fg-primary:    #2C2620;
	--color-fg-secondary:  #504738;
	--color-fg-muted:      #65553F;
	--color-fg-inverse:    #FAF5EC;
	--color-fg-accent:     #A8182F;   /* brand-red-700, on cream/light surfaces (was clay-700 #7E3211) */
	--color-fg-accent-cool:#163E72;   /* brand-blue-700, secondary accent for eyebrows + editorial labels */
	--color-border-default:#E3D5BB;
	--color-border-muted:  #F1E9D8;
	--color-border-accent: #C92042;   /* brand-red-500 (was clay #B85225) */
	/* Brand colors, sampled directly from the DCNWA seal logo */
	--color-brand-red-50:  #FBE7EB;
	--color-brand-red-100: #F8C8D2;
	--color-brand-red-300: #E36A82;
	--color-brand-red-500: #C92042;  /* primary brand red */
	--color-brand-red-700: #A8182F;
	--color-brand-red-900: #6E0C1D;
	--color-brand-blue-50:  #E7EEF7;
	--color-brand-blue-100: #C9D8EB;
	--color-brand-blue-300: #6F92C2;
	--color-brand-blue-500: #1E579A;  /* primary brand blue */
	--color-brand-blue-700: #163E72;
	--color-brand-blue-900: #0C2547;

	--color-accent-default: var(--color-brand-red-500);
	--color-accent-hover:   var(--color-brand-red-700);
	--color-accent-pressed: var(--color-brand-red-900);
	--color-accent-muted:   var(--color-brand-red-50);
	--color-link-default:   var(--color-brand-blue-500);
	--color-link-hover:     var(--color-brand-blue-700);
	--color-secondary-accent: var(--color-brand-blue-500);

	--color-success:       #3F8A52;
	--color-warning:       #C68A0E;
	--color-error:         #B0231C;
	--color-info:          var(--color-brand-blue-500);
	--color-overlay-scrim: rgba(26, 20, 16, 0.55);
	--color-overlay-warmth:rgba(110, 12, 29, 0.18);
	/* Cream foreground over ink surfaces (footer, pergola, hero photo caption,
	   hiring banner, promo bar accents). Used in patterns and inside CSS rules
	   where rgba(250, 245, 236, X) repeats with these two alphas. */
	--color-fg-on-ink:        rgba(250, 245, 236, 0.85);
	--color-fg-on-ink-strong: rgba(250, 245, 236, 0.95);
	/* Brand-red-300 (#E36A82) alpha halos. DR-13 (iter-6) tokenized four prior
	   inline rgba(227,106,130, X) occurrences so a future palette retune adjusts
	   one place. Used on focus rings + hover backgrounds on dark surfaces. */
	--color-accent-halo:       rgba(227, 106, 130, 0.55);
	--color-accent-halo-soft:  rgba(227, 106, 130, 0.18);
	--color-accent-halo-strong:rgba(227, 106, 130, 0.85);
	--color-accent-halo-mid:   rgba(227, 106, 130, 0.75);

	/* Component slots */
	--color-cta-primary-bg:         var(--color-accent-default);
	--color-cta-primary-fg:         #FFFFFF;
	--color-cta-primary-bg-hover:   var(--color-accent-hover);
	--color-cta-primary-bg-pressed: var(--color-accent-pressed);
	--color-cta-primary-focus-ring: rgba(201, 32, 66, 0.45);
	--color-cta-secondary-bg:       transparent;
	--color-cta-secondary-fg:       var(--color-fg-primary);
	--color-cta-secondary-border:   var(--color-fg-primary);
	--color-cta-secondary-hover-bg: var(--color-bg-secondary);
	--color-cta-tertiary-fg:        var(--color-brand-blue-500);
	--color-card-bg:                var(--color-bg-elevated);
	--color-card-border:            var(--color-border-default);
	--color-card-bg-tinted:         #FBF1EC;
	--color-input-bg:               #FFFFFF;
	--color-input-bg-dark:          #231D18;
	--color-input-border:           #A89373;
	--color-input-border-focus:     var(--color-brand-blue-500);
	--color-input-focus-ring:       rgba(30, 87, 154, 0.30);
	--color-promo-bar-bg:           #1A1410;
	--color-promo-bar-fg:           #FAF5EC;
	--color-promo-bar-accent:       var(--color-brand-red-500);
	--color-hiring-banner-bg:       var(--color-brand-blue-700);
	--color-hiring-banner-fg:       #FAF5EC;
	--color-hiring-banner-accent:   var(--color-brand-red-500);
	--color-pergola-band-bg:        #1A1410;
	--color-pergola-band-fg:        #FAF5EC;
	/* Wave 3: string-light gold (was brand-red) so the pergola after-dark glow
	   reads as the bulbs overhead, not a red wash. Spends the defined-but-unused
	   warning gold token. */
	--color-pergola-band-glow:      rgba(198, 138, 14, 0.22);
	--color-footer-bg:              #1A1410;
	--color-footer-fg:              #F1E9D8;
	--color-footer-fg-muted:        #928576;
	--color-mark-highlight-bg:      #FFE0C2;
	--color-mark-highlight-fg:      #2C2620;

	/* Type families */
	--font-family-display: "Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-body:    "Fraunces", Georgia, "Iowan Old Style", "Source Serif Pro", serif;
	--font-family-ui:      "Bricolage Grotesque", system-ui, sans-serif;
	--font-family-mono:    "JetBrains Mono", "Menlo", monospace;

	/* Type scale (mirrors theme.json font sizes).
	   DR-04 (iter-6): added --font-size-display-xs to close the 28-56px gap
	   between headline-xl and display-s. Lets eat-drink H3s (BEER, COCKTAILS,
	   WINE) drop their 1.5rem inline font-size and pick up the scale.
	   DR-35 (iter-6): bumped display-m min from 2.25rem to 2.625rem so the
	   page H1 stays above the masthead H2 (display-s) at small viewports. */
	--font-size-overline:    clamp(0.75rem, 0.85vw, 0.875rem);
	--font-size-body-s:      clamp(0.9375rem, 1.05vw, 1rem);
	--font-size-body-m:      clamp(1.0625rem, 1.25vw, 1.1875rem);
	--font-size-body-l:      clamp(1.1875rem, 1.4vw, 1.375rem);
	--font-size-headline-s:  clamp(1.125rem, 1.7vw, 1.625rem);
	--font-size-headline-m:  clamp(1.3125rem, 2vw, 2.125rem);
	--font-size-headline-l:  clamp(1.625rem, 2.6vw, 2.75rem);
	--font-size-headline-xl: clamp(2rem, 3.2vw, 3.5rem);
	--font-size-display-xs:  clamp(1.375rem, 2.2vw, 2.25rem);
	--font-size-display-s:   clamp(1.75rem, 3.4vw, 4.25rem);
	--font-size-display-m:   clamp(2.625rem, 4.4vw, 5.5rem);
	--font-size-display-l:   clamp(2.75rem, 5.6vw, 7rem);
	--font-size-display-xl:  clamp(3.5rem, 7.2vw, 9rem);

	/* Line heights */
	--line-height-display:        1.02;
	--line-height-display-italic: 1.08;
	--line-height-headline:       1.18;
	--line-height-body:           1.6;
	--line-height-body-dark:      1.65;
	--line-height-body-lead:      1.5;
	--line-height-overline:       1.3;
	--line-height-ui:             1.45;

	/* Tracking */
	--tracking-display-tight:  -0.03em;
	--tracking-display:        -0.02em;
	--tracking-display-italic: -0.01em;
	--tracking-headline:       -0.01em;
	--tracking-body:            0;
	--tracking-body-relaxed:    0.005em;
	--tracking-overline:        0.08em;
	--tracking-mono-label:      0.06em;

	/* Weights */
	--font-weight-display-bold:  700;
	--font-weight-display-black: 800;
	--font-weight-headline:      600;
	--font-weight-headline-light:500;
	--font-weight-body:          400;
	--font-weight-body-italic:   400;
	--font-weight-body-emphasis: 600;
	--font-weight-overline:      500;

	/* Spacing scale */
	--space-0:    0;
	--space-px:   1px;
	--space-0-5:  2px;
	--space-1:    4px;
	--space-2:    8px;
	--space-3:    12px;
	--space-4:    16px;
	--space-5:    20px;
	--space-6:    24px;
	--space-7:    32px;
	--space-8:    40px;
	--space-9:    48px;
	--space-10:   56px;
	--space-11:   64px;
	--space-12:   80px;
	--space-13:   96px;
	--space-14:   120px;
	--space-15:   144px;
	--space-16:   160px;

	/* Layout. DR-15 (iter-6): added --container-max-reading and --max-prose
	   so the three narrow-column widths in use (640 / 720 / 880) all live
	   on tokens. Previously 11 inline `style="max-width: 720px"` and
	   `880px` overrides drifted across pages. */
	--container-max-narrow:  640px;
	--container-max-reading: 720px;
	--container-max-prose:   880px;
	--container-max-default: 1200px;
	--container-max-wide:    1440px;
	--container-max-full:    1920px;
	--gutter:                clamp(1.25rem, 4vw, 3rem);
	--gutter-mobile:         20px;
	--gutter-tablet:         32px;
	--gutter-desktop:        48px;
	--gutter-wide:           72px;

	/* Radius */
	--radius-0:    0;
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   24px;
	--radius-2xl:  36px;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-none: none;
	--shadow-soft:
		0 1px 2px rgba(62, 26, 8, 0.05),
		0 2px 6px rgba(62, 26, 8, 0.04);
	--shadow-card:
		0 2px 4px rgba(62, 26, 8, 0.06),
		0 6px 16px rgba(62, 26, 8, 0.08),
		inset 0 1px 0 rgba(250, 245, 236, 0.5);
	--shadow-lifted:
		0 4px 8px rgba(62, 26, 8, 0.08),
		0 16px 40px rgba(62, 26, 8, 0.14),
		0 32px 80px rgba(62, 26, 8, 0.10);
	--shadow-inset:
		inset 0 1px 2px rgba(62, 26, 8, 0.10),
		inset 0 0 0 1px rgba(62, 26, 8, 0.04);
	--shadow-focus-accent:  0 0 0 3px rgba(201, 32, 66, 0.35);   /* brand-red-500 alpha (CTA focus) */
	--shadow-focus-default: 0 0 0 3px rgba(30, 87, 154, 0.30);   /* brand-blue-500 alpha (was clay 184,82,37) - secondary interactive focus */

	/* Motion */
	--motion-duration-instant:      1ms;
	--motion-duration-fast:         120ms;
	--motion-duration-base:         220ms;
	--motion-duration-slow:         420ms;
	--motion-duration-deliberate:   700ms;
	--motion-duration-stagger-step: 80ms;
	--motion-ease-standard:    cubic-bezier(0.32, 0.72, 0, 1);
	--motion-ease-emphasized:  cubic-bezier(0.16, 1, 0.3, 1);
	--motion-ease-decel:       cubic-bezier(0, 0, 0.2, 1);
	--motion-ease-accel:       cubic-bezier(0.4, 0, 1, 1);
	--motion-ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Icon sizes */
	--icon-xs: 14px;
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-xl: 32px;
	--icon-display: 48px;
}

/* ----------------------------------------------------------------------------
   2. Dark surface remaps (use .surface-ink on a wrapper)
   ---------------------------------------------------------------------------- */

.surface-ink,
.theme-dark {
	--color-bg-primary:    #1A1410;
	--color-bg-secondary:  #231D18;
	--color-bg-elevated:   #2C2620;
	--color-bg-inverse:    #FAF5EC;
	--color-bg-tinted:     #162010;
	--color-fg-primary:    #FAF5EC;
	--color-fg-secondary:  #F1E9D8;
	--color-fg-muted:      #928576;
	--color-fg-inverse:    #2C2620;
	--color-fg-accent:     #E36A82;   /* brand-red-300, on dark surfaces (was ember-300 #FFA64D) */
	--color-fg-accent-cool:#6F92C2;   /* brand-blue-300, secondary accent on dark */
	--color-border-default:#3B3329;
	--color-border-muted:  #2C2620;
	--color-border-accent: #C92042;   /* brand-red-500 (was ember #F26A0A) */
	--color-card-bg:       #2C2620;
	--color-card-border:   #3B3329;
	--color-input-bg:      #231D18;
	--color-input-border:  #65553F;

	--shadow-soft:
		0 1px 2px rgba(0, 0, 0, 0.20),
		0 2px 6px rgba(0, 0, 0, 0.18);
	--shadow-card:
		0 2px 4px rgba(0, 0, 0, 0.40),
		0 8px 24px rgba(0, 0, 0, 0.30);
	--shadow-lifted:
		0 8px 16px rgba(0, 0, 0, 0.50),
		0 24px 56px rgba(0, 0, 0, 0.40);

	background: var(--color-bg-primary);
	color: var(--color-fg-primary);
}

/* ----------------------------------------------------------------------------
   3. Base reset + body
   ---------------------------------------------------------------------------- */

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

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

/* DR-25 (iter-6): only enable native smooth scroll for users who haven't
   opted out. The reduced-motion block at the bottom already neutralizes it
   via `scroll-behavior: auto !important;`, but scoping the positive case
   keeps the intent visible at the source. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body.dcnwa,
.editor-styles-wrapper {
	background: var(--color-bg-primary);
	color: var(--color-fg-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: var(--line-height-body);
	font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variation-settings: "SOFT" 100, "opsz" 14;
	/* DR-18 (iter-6) belt-and-braces typography defaults. font-synthesis: none
	   rejects faked bold/italic on any weight that isn't in the variable font
	   file. font-optical-sizing: auto is the editorial default and the safety
	   net for any selector that misses an explicit `opsz` declaration. */
	font-synthesis: none;
	font-optical-sizing: auto;
	hanging-punctuation: first last;
}

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

/* DR-12 (iter-6) browser text selection color. Pre-pivot fallback used
   clay-800 (#5E260C, warm brown); brand-red-900 (#6E0C1D) at 9.7:1 on the
   tinted cream selection background lands the right surface. */
::selection {
	background: var(--color-bg-tinted);
	color: var(--color-brand-red-900);
}

.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

a.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	background: var(--color-bg-inverse);
	color: var(--color-fg-inverse);
	padding: 0.75rem 1rem;
	z-index: 9999;
}
a.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
}

/* ----------------------------------------------------------------------------
   4. Typography helpers
   ---------------------------------------------------------------------------- */

/* DR-26 (iter-6, OP-4 path A): eyebrows now render in brand-blue-700 instead
   of brand-red-700. Pre-change --color-fg-accent-cool was defined but
   referenced in zero selectors. Brand-blue carries the editorial spine
   (eyebrows, ledger lines); brand-red stays the heat (CTAs, italic accents,
   focus rings, hiring-banner CTA). Twelve-plus surfaces light up brand-blue
   in one CSS edit, and the page reads as cool-frames-hot rather than two
   instances of brand-red competing. */
.dcnwa-eyebrow,
.has-overline-font-size {
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	font-weight: var(--font-weight-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-accent-cool);
	line-height: var(--line-height-overline);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.dcnwa-eyebrow::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	flex: 0 0 auto;
}

.dcnwa-eyebrow[style*="center"]::before,
.has-text-align-center .dcnwa-eyebrow::before {
	display: none;
}

.dcnwa-ledger {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	font-feature-settings: "tnum" 1, "kern" 1;
	letter-spacing: var(--tracking-body-relaxed);
}

.dcnwa-display {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-display-bold);
	line-height: var(--line-height-display);
	letter-spacing: var(--tracking-display-tight);
	color: var(--color-fg-primary);
}

/* DR-01 (iter-6): per-size opsz invocation. Without these, every deep-page
   H1 / H2 rendered Bricolage at the default opsz (tuned for 14-24px reading
   text) and looked visibly under-tuned next to the home hero, which already
   sets opsz 96. Order matters: these rules sit after the base .dcnwa-display
   rule so the per-size font-variation-settings win.
   DR-04 (iter-6): added .dcnwa-display-xs (sub-headline display register)
   for surfaces between 28-56px that previously had no semantic option. */
.dcnwa-display-xs  { font-size: var(--font-size-display-xs); font-variation-settings: "opsz" 36; }
.dcnwa-display-s   { font-size: var(--font-size-display-s);  font-variation-settings: "opsz" 72; }
.dcnwa-display-m   { font-size: var(--font-size-display-m);  font-variation-settings: "opsz" 96; }
.dcnwa-display-l   { font-size: var(--font-size-display-l);  font-variation-settings: "opsz" 120; }
.dcnwa-display-xl  { font-size: var(--font-size-display-xl); font-variation-settings: "opsz" 144; }

/* Section masthead display headings always sit one rem below the eyebrow.
   Replaces ~40 inline `style="margin-top: 1rem;"` overrides across patterns. */
.dcnwa-section__masthead .dcnwa-display,
.dcnwa-section__masthead .dcnwa-display-xs,
.dcnwa-section__masthead .dcnwa-display-s,
.dcnwa-section__masthead .dcnwa-display-m { margin-top: 1rem; }

/* DR-19 (iter-6): orphan/widow protection on body paragraphs and editorial
   decks. Prevents a single stranded word at the bottom of a paragraph from
   reading as a typo. */
.dcnwa-main p,
.dcnwa-hero-editorial__deck,
.dcnwa-named-spaces__lede,
.dcnwa-pergola-module__body { widows: 3; orphans: 3; }

/* DR-20 (iter-6): short editorial register paragraphs want equal-length
   lines via `balance`, not the default Knuth-Plass `pretty`. text-wrap is
   inherited per element here so the hero deck, named-spaces lede, pergola
   body, and CTA-row lede balance, while long-form body copy still uses
   pretty (set on .dcnwa-main p below at rule 35). */
.dcnwa-hero-editorial__deck,
.dcnwa-named-spaces__lede,
.dcnwa-pergola-module__body,
.dcnwa-section__masthead p,
.dcnwa-cta-row p { text-wrap: balance; }

mark {
	background: var(--color-mark-highlight-bg);
	color: var(--color-mark-highlight-fg);
	padding: 0 0.15em;
	border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   5. CTA pills
   ---------------------------------------------------------------------------- */

.dcnwa-cta-pill,
a.dcnwa-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--color-cta-primary-bg);
	color: var(--color-cta-primary-fg) !important;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-body-m);
	letter-spacing: -0.005em;
	padding: 0.85rem 1.5rem;
	border-radius: var(--radius-pill);
	border: 0;
	text-decoration: none !important;
	transition:
		background var(--motion-duration-base) var(--motion-ease-standard),
		transform var(--motion-duration-fast)  var(--motion-ease-standard),
		box-shadow var(--motion-duration-base) var(--motion-ease-standard);
	white-space: nowrap;
}
.dcnwa-cta-pill:hover  { background: var(--color-cta-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.dcnwa-cta-pill:active { transform: translateY(1px); background: var(--color-cta-primary-bg-pressed); }
.dcnwa-cta-pill:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-accent);
}

.dcnwa-cta-pill--secondary,
a.dcnwa-cta-pill--secondary {
	background: transparent;
	color: var(--color-cta-secondary-fg) !important;
	border: 1.5px solid var(--color-cta-secondary-border);
	padding: calc(0.85rem - 1.5px) calc(1.5rem - 1.5px);
}
.dcnwa-cta-pill--secondary:hover {
	background: var(--color-cta-secondary-hover-bg);
}
.dcnwa-cta-pill--secondary:focus-visible {
	box-shadow: var(--shadow-focus-default);
}

.dcnwa-cta-pill--small {
	padding: 0.55rem 1.1rem;
	font-size: var(--font-size-body-s);
}

/* Text-only tertiary link (underline-on-hover with line-grow) */
.dcnwa-text-link {
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-s);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-fg-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-default);
	padding-bottom: 0.2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
				border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-text-link:hover {
	color: var(--color-fg-accent);
	border-bottom-color: var(--color-fg-accent);
}
.dcnwa-text-link::after {
	content: "\2192";
	letter-spacing: 0;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-text-link:hover::after,
.dcnwa-text-link:focus-visible::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.dcnwa-text-link::after { transition: none; }
}

/* Dark-surface variant. Replaces inline rgba opacity styles that used to
   ship on pergola-module.php:28. Applies to any .dcnwa-text-link inside a
   .surface-ink wrapper or inside the pergola module (which is itself a
   dark-band variant without the .surface-ink class). */
.surface-ink .dcnwa-text-link {
	/* .surface-ink remaps --color-fg-primary to cream, so this resolves light. */
	color: var(--color-fg-primary);
	border-bottom-color: rgba(250, 245, 236, 0.5);
}
.dcnwa-pergola-module .dcnwa-text-link {
	/* The pergola band does NOT remap the fg tokens, so fg-primary resolved to
	   ink-on-ink here and the link was invisible. Use the band's own fg. */
	color: var(--color-pergola-band-fg);
	border-bottom-color: rgba(250, 245, 236, 0.5);
}
.surface-ink .dcnwa-text-link:hover,
.dcnwa-pergola-module .dcnwa-text-link:hover {
	color: var(--color-fg-accent);
	border-bottom-color: var(--color-fg-accent);
}

/* ----------------------------------------------------------------------------
   6. Promo bar
   ---------------------------------------------------------------------------- */

.dcnwa-promo-bar {
	background: var(--color-promo-bar-bg);
	color: var(--color-promo-bar-fg);
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	line-height: var(--line-height-overline);
	position: relative;
	transition: transform var(--motion-duration-slow) var(--motion-ease-standard),
				max-height var(--motion-duration-slow) var(--motion-ease-standard);
	overflow: hidden;
}

.dcnwa-promo-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem var(--gutter);
	max-width: var(--container-max-wide);
	margin: 0 auto;
}

.dcnwa-promo-bar p { margin: 0; }

.dcnwa-promo-bar a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(250, 245, 236, 0.35);
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
				border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-promo-bar a:hover {
	color: var(--color-promo-bar-accent);
	border-bottom-color: var(--color-promo-bar-accent);
}

.dcnwa-promo-bar__dismiss {
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	padding: 4px 8px;
	opacity: 0.7;
	letter-spacing: 0.2em;
	cursor: pointer;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
	/* WCAG 2.5.8 minimum tap target. The 30px min-height of pre-iter-4 already
	   passed, but iter-3 spread the constraint across a second rule block. */
	min-width: 30px;
	min-height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dcnwa-promo-bar__dismiss:hover { opacity: 1; }
.dcnwa-promo-bar__dismiss:focus-visible {
	outline: 0;
	/* DR-13 (iter-6): tokenized brand-red-300 alpha halo (was rgba 0.75). */
	box-shadow: 0 0 0 2px var(--color-accent-halo-mid);
	border-radius: 2px;
}

/* DR-13 (iter-6): brand-red-300 halo on hover targets that previously used
   ad-hoc rgba(227,106,130, X). Touch-target sweep already lands. */

.dcnwa-promo-bar.is-hidden { display: none; }

/* ----------------------------------------------------------------------------
   7. Utility row
   ---------------------------------------------------------------------------- */

.dcnwa-utility-row {
	border-bottom: 1px solid var(--color-border-muted);
	background: var(--color-bg-primary);
}

.dcnwa-utility-row__inner {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-7);
	padding: 0.55rem var(--gutter);
	max-width: var(--container-max-wide);
	margin: 0 auto;
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-muted);
	line-height: var(--line-height-overline);
}

.dcnwa-utility-row a {
	color: inherit;
	text-decoration: none;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-utility-row a:hover { color: var(--color-fg-primary); }
.dcnwa-utility-row .sep { opacity: 0.4; }

/* ----------------------------------------------------------------------------
   8. Sticky header / main nav

   IMPORTANT: WordPress wraps each template-part (header, footer) in a
   `<header class="wp-block-template-part">` element which is only as tall as
   its own contents. `position: sticky` only sticks within its containing
   block. So a `position: sticky` on `#site-header` alone would scroll away
   with the wrapper after one viewport.

   Fix: make the WP header template-part wrapper itself sticky. The promo
   bar + utility row + main nav all stick together as a unified band. Once
   the user scrolls past 8px, JS adds `.is-scrolled` to the inner
   `.dcnwa-site-header`, and CSS collapses the promo bar + utility row out
   of view (visibility:hidden + height:0) so only the nav band remains,
   keeping the Reserve a Court CTA reachable at every scroll position
   without eating 220px of viewport.

   The footer template-part wrapper is unaffected because the selector
   only targets the header template-part (parent of `.dcnwa-site-header`).
   ---------------------------------------------------------------------------- */

/* Hoist the sticky context to the wrapper so its sticky containing block
   becomes `.wp-site-blocks` (and ultimately the viewport). Without this
   the inner `position: sticky` on `#site-header` is constrained to the
   wrapper's ~220px height and scrolls off after one viewport. */
body > .wp-site-blocks > header.wp-block-template-part:has(.dcnwa-site-header),
.wp-site-blocks > header.wp-block-template-part:has(.dcnwa-site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 245, 236, 0.94);
	margin-block-start: 0 !important;
}

/* Sticky header keeps its full height (promo bar + utility row + nav)
   at every scroll position. Earlier we collapsed promo + utility on
   scroll using height/padding/visibility transitions, but those are
   layout-affecting properties and caused a visible jump as the user
   scrolled past the hiring banner and other below-the-fold content.
   Per the motion spec (only `transform` + `opacity` animate, no layout
   shift), the collapse is removed. The Reserve a Court pill in the
   primary nav band stays visible because the WHOLE header is sticky. */

.dcnwa-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 245, 236, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid transparent;
	/* DR-32 (iter-6): shadow fade shortened from base (220ms) to fast (120ms)
	   because the shadow is a response to the scroll, not its own beat. */
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
				box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-site-header.is-scrolled {
	border-bottom-color: var(--color-border-default);
	box-shadow: var(--shadow-soft);
}

.dcnwa-main-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-7);
	padding: var(--space-5) var(--gutter);
	max-width: var(--container-max-wide);
	margin: 0 auto;
}

.dcnwa-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--color-fg-primary);
	text-decoration: none;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-brand:hover { opacity: 0.85; }
.dcnwa-brand__logo {
	display: block;
	width: auto;
	height: clamp(48px, 5vw, 64px);
	max-height: 64px;
	object-fit: contain;
	/* No negative margins; let the seal's intrinsic whitespace breathe inside the nav band */
}
.dcnwa-mobile-drawer .dcnwa-brand__logo {
	height: 44px;
}

.dcnwa-main-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-7);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

.dcnwa-main-nav__list a {
	color: var(--color-fg-primary);
	text-decoration: none;
	padding: 0.35rem 0;
	position: relative;
	display: inline-block;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Hover + current page: shift the link color to brand-red-700 instead of
   drawing a wipe underline. The wipe was creating a visible second line
   below browsers' default link underline (or any user-agent "always
   underline links" accessibility setting); the color shift gives the same
   interactive cue without stacking another line under the text. */
.dcnwa-main-nav__list a:hover,
.dcnwa-main-nav__list a[aria-current="page"] {
	color: var(--color-fg-accent);
}

.dcnwa-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border-default);
	color: var(--color-fg-primary);
	/* WCAG 2.5.5 enhanced tap target (44x44) at every viewport. */
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--radius-md);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.dcnwa-nav-toggle svg { width: 18px; height: 18px; }
.dcnwa-nav-toggle:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-default);
}

/* ----------------------------------------------------------------------------
   9. Mobile drawer
   ---------------------------------------------------------------------------- */

.dcnwa-mobile-drawer {
	position: fixed;
	inset: 0;
	background: var(--color-bg-elevated);
	z-index: 100;
	display: flex;
	flex-direction: column;
	padding: var(--space-6) var(--gutter);
	transform: translateX(100%);
	transition: transform var(--motion-duration-base) var(--motion-ease-emphasized);
	overflow-y: auto;
}
.dcnwa-mobile-drawer.is-open {
	transform: none;
	box-shadow: var(--shadow-lifted);
}
.dcnwa-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-7);
}
.dcnwa-mobile-drawer__close {
	background: transparent;
	border: 1px solid var(--color-border-default);
	/* DR-08 (iter-6): bumped 42x42 to 48x48 so the close button reads as the
	   same tier as the .dcnwa-nav-toggle open button (44x44 min). WCAG 2.5.5
	   enhanced minimum is 44x44; this clears it with breathing room. */
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-fg-primary);
}
.dcnwa-mobile-drawer__cta {
	margin-bottom: var(--space-7);
}
.dcnwa-mobile-drawer__cta .dcnwa-cta-pill { width: 100%; justify-content: center; }
.dcnwa-mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-m);
}
.dcnwa-mobile-drawer__list a {
	color: var(--color-fg-primary);
	text-decoration: none;
	display: inline-block;
}
.dcnwa-mobile-drawer__sublist {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0 0 0 var(--space-5);
	font-size: var(--font-size-body-l);
	font-weight: var(--font-weight-headline-light);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: var(--color-fg-secondary);
}
.dcnwa-mobile-drawer__utility {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border-default);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-muted);
}
.dcnwa-mobile-drawer__contact {
	margin-top: auto;
	padding-top: var(--space-7);
	border-top: 1px solid var(--color-border-default);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* ----------------------------------------------------------------------------
   10. Hero editorial
   ---------------------------------------------------------------------------- */

.dcnwa-hero-editorial {
	padding-top: clamp(var(--space-9), 7vw, var(--space-13));
	padding-bottom: clamp(var(--space-9), 6vw, var(--space-12));
}

.dcnwa-hero-editorial__inner {
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	display: grid;
	gap: clamp(var(--space-7), 4vw, var(--space-10));
}

.dcnwa-hero-editorial__heading-row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(var(--space-7), 4vw, var(--space-10));
	align-items: end;
}

.dcnwa-hero-editorial__heading {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-display-bold);
	font-size: var(--font-size-display-l);
	line-height: 0.96;
	letter-spacing: -0.028em;
	color: var(--color-fg-primary);
	margin: 0;
	max-width: 12ch;
	/* DR-46 (iter-6): wdth 95 on the hero only. The Bricolage variable font
	   ships a width axis (75 condensed -> 100 extended). A 95 tightens the
	   stacked lockup at display sizes and differentiates the home hero from
	   every other Bricolage user. Scoped to the hero so deep-page H1s
	   stay at the default width. */
	font-variation-settings: "opsz" 96, "wdth" 95;
}
.dcnwa-hero-editorial__heading em,
.dcnwa-hero-editorial__heading .accent {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	letter-spacing: -0.012em;
	/* DR-36 (iter-6, OP-3 path B): opsz bloom on the hero italic accent. The
	   word lands at opsz 96 on first paint and morphs to opsz 144 once the
	   page hits html.is-loaded (which the hero reveal already sets via JS).
	   No JavaScript, no decoration, no layout impact. The brand-led signature
	   interaction the hero asked for, in 4 lines of CSS. */
	font-variation-settings: "SOFT" 100, "opsz" 96;
	transition: font-variation-settings 600ms var(--motion-ease-emphasized);
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1, "ss01" 1;
	display: inline-block;
	padding-inline-end: 0.08em;
}
.dcnwa-hero-editorial__photo.is-revealed ~ .dcnwa-hero-editorial__heading-row .dcnwa-hero-editorial__heading em,
.dcnwa-hero-editorial__photo.is-revealed ~ .dcnwa-hero-editorial__heading-row .dcnwa-hero-editorial__heading .accent,
html.is-loaded .dcnwa-hero-editorial__heading em,
html.is-loaded .dcnwa-hero-editorial__heading .accent {
	font-variation-settings: "SOFT" 100, "opsz" 144;
}
@media (prefers-reduced-motion: reduce) {
	.dcnwa-hero-editorial__heading em,
	.dcnwa-hero-editorial__heading .accent {
		transition: none;
		font-variation-settings: "SOFT" 100, "opsz" 144;
	}
}

.dcnwa-hero-editorial__deck {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.55;
	color: var(--color-fg-secondary);
	max-width: 30ch;
	margin: 0;
	padding-bottom: 0.5rem;
}
.dcnwa-hero-editorial__deck strong {
	color: var(--color-fg-primary);
	font-weight: 600;
}

.dcnwa-hero-editorial__photo-row {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	align-items: end;
	gap: clamp(var(--space-6), 3vw, var(--space-9));
}

.dcnwa-hero-editorial__photo {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lifted);
	aspect-ratio: 16 / 10;
	background: var(--color-bg-secondary);
	margin: 0;
	/* Visible by default so the hero is never blank on first paint. A short
	   CSS-only entrance plays on load; JS adding .is-revealed just confirms
	   the end state. Reduced motion cancels the animation below. */
	opacity: 1;
	transform: none;
	animation: dcnwa-hero-photo-in var(--motion-duration-slow) var(--motion-ease-emphasized) both;
}
.dcnwa-hero-editorial__photo.is-revealed { opacity: 1; transform: none; }
@keyframes dcnwa-hero-photo-in {
	from { opacity: 0; transform: translateY(8px) scale(0.996); }
	to   { opacity: 1; transform: none; }
}
.dcnwa-hero-editorial__photo img {
	/* Absolutely fill the figure so the image always covers its container
	   exactly, regardless of the figure's aspect-ratio. (height:100% alone did
	   not resolve against the aspect-ratio-derived figure height, leaving the
	   image taller than its rounded container and clipped.) */
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 62%;
}
.dcnwa-hero-editorial__photo::after {
	content: "";
	position: absolute;
	inset: 45% 0 0 0;
	background: linear-gradient(180deg, rgba(26, 20, 16, 0) 0%, rgba(26, 20, 16, 0.10) 45%, var(--color-overlay-scrim) 100%);
	pointer-events: none;
}
.dcnwa-photo-caption {
	position: absolute;
	left: var(--space-7);
	bottom: var(--space-6);
	right: var(--space-7);
	color: var(--color-fg-inverse);
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}
.dcnwa-photo-caption .where {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	font-size: var(--font-size-body-s);
	letter-spacing: -0.005em;
	text-transform: none;
	color: rgba(250, 245, 236, 0.84);
	font-variation-settings: "SOFT" 100, "opsz" 36;
}

/* ----------------------------------------------------------------------------
   11. Booking widget (hero sidecar + standalone)
   ---------------------------------------------------------------------------- */

.dcnwa-booking-widget {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 420px;
	width: 100%;
}
.dcnwa-booking-widget__title {
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-fg-accent);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dcnwa-booking-widget__title .meta {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--color-fg-muted);
	font-size: var(--font-size-body-s);
}
.dcnwa-booking-widget__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3) var(--space-4);
}
.dcnwa-booking-widget__field {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}
.dcnwa-booking-widget__field--full { grid-column: 1 / -1; }
.dcnwa-booking-widget__field label {
	font-family: var(--font-family-display);
	/* DR-03 (iter-6): swapped 0.72rem literal for the overline token. */
	font-size: var(--font-size-overline);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
}
.dcnwa-booking-widget__field input,
.dcnwa-booking-widget__field select {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	font-weight: 500;
	color: var(--color-fg-primary);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-border-default);
	padding: 0.42rem 0;
	appearance: none;
	font-feature-settings: "tnum" 1, "kern" 1;
	font-variation-settings: "SOFT" 100, "opsz" 16;
	min-height: 38px;
}
.dcnwa-booking-widget__field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--color-fg-accent) 50%),
		linear-gradient(135deg, var(--color-fg-accent) 50%, transparent 50%);
	background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.4rem;
}
/* DR-27 (iter-6): focus state visibly upgrades. Bottom border thickens
   to 2px brand-red, the field draws a 1px brand-red top hairline so the
   label-plus-input read as one connected field, and the parent field flags
   `.is-focused` so the label color can lift in tandem. */
.dcnwa-booking-widget__field input:focus,
.dcnwa-booking-widget__field select:focus {
	outline: 0;
	border-bottom: 2px solid var(--color-accent-default);
	box-shadow: inset 0 1px 0 0 var(--color-accent-default);
	padding-bottom: calc(0.42rem - 1px);
}
.dcnwa-booking-widget__field:focus-within label {
	color: var(--color-fg-accent);
}
/* DR-56 (iter-6): brief flash on the auto-default time field. Fades
   cream -> brand-red-50 -> cream over 700ms. Transform-free. */
.dcnwa-booking-widget__field.is-default-highlight {
	animation: dcnwa-default-flash 700ms var(--motion-ease-emphasized);
}
@keyframes dcnwa-default-flash {
	0%   { background: transparent; }
	35%  { background: var(--color-brand-red-50); }
	100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.dcnwa-booking-widget__field.is-default-highlight { animation: none; }
}
.dcnwa-booking-widget__submit {
	background: var(--color-cta-primary-bg);
	color: var(--color-cta-primary-fg);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 0.85rem 1.3rem;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-body-m);
	letter-spacing: -0.005em;
	align-self: flex-start;
	cursor: pointer;
	transition: background var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	grid-column: 1 / -1;
}
.dcnwa-booking-widget__submit:hover { background: var(--color-cta-primary-bg-hover); transform: translateY(-1px); }
.dcnwa-booking-widget__submit:active { background: var(--color-cta-primary-bg-pressed); transform: translateY(0); }
.dcnwa-booking-widget__submit:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-accent);
}
/* DR-27 (iter-6): on-submit spinner. JS adds .is-submitting on the button
   for 1 second to prevent double-tap on slow mobile. */
.dcnwa-booking-widget__submit.is-submitting {
	cursor: progress;
	opacity: 0.88;
}
.dcnwa-booking-widget__submit.is-submitting span[aria-hidden="true"] {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	/* Clip the arrow glyph out of the ring. Without these three lines the
	   &rarr; character kept rendering inside the spinner and rotated with it
	   like a propeller on every submit. currentColor still paints the ring,
	   so the glyph is hidden by clipping, not by color. */
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	animation: dcnwa-spin 720ms linear infinite;
}
@keyframes dcnwa-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.dcnwa-booking-widget__submit.is-submitting span[aria-hidden="true"] { animation: none; }
}
.dcnwa-booking-widget__footnote {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	font-style: italic;
	color: var(--color-fg-muted);
	margin: 0;
}
/* Inline links inside body text need a non-color distinguisher (WCAG 1.4.1). */
.dcnwa-booking-widget__footnote a {
	color: var(--color-link-default);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.dcnwa-booking-widget__footnote a:hover {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------------
   12. Day-arc strip
   ---------------------------------------------------------------------------- */

.dcnwa-day-arc {
	border-top: 1px solid var(--color-border-default);
	padding-top: var(--space-5);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-5);
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-muted);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.dcnwa-day-arc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/* DR-16 (iter-6): dropped `flex-wrap: wrap`. The outer .dcnwa-day-arc
	   container already does horizontal `overflow-x: auto` with
	   `scroll-snap-type: x mandatory`, so wrapping fought the snap and
	   broke the single-line timeline metaphor at 768-1024px. Items now
	   stay on one line; narrow viewports get horizontal scroll-snap. */
	gap: var(--space-5) var(--space-7);
}
.dcnwa-day-arc__list li {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	scroll-snap-align: start;
	/* DR-16 (iter-6): no shrink, no wrap. Pairs with the flex-wrap removal. */
	flex: 0 0 auto;
}
.dcnwa-day-arc__list li em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-primary);
	letter-spacing: -0.005em;
	text-transform: none;
	font-variation-settings: "SOFT" 100, "opsz" 36;
}
/* ----------------------------------------------------------------------------
   13. Named-space module (3-up grid)
   ---------------------------------------------------------------------------- */

.dcnwa-named-spaces {
	padding-top: clamp(var(--space-12), 9vw, var(--space-15));
	padding-bottom: clamp(var(--space-12), 9vw, var(--space-15));
	border-top: 1px solid var(--color-border-default);
}
.dcnwa-named-spaces__inner {
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
.dcnwa-named-spaces__masthead {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: end;
	gap: clamp(var(--space-7), 4vw, var(--space-11));
	margin-bottom: clamp(var(--space-10), 6vw, var(--space-13));
}
.dcnwa-named-spaces__title {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-size: var(--font-size-display-s);
	line-height: 1.0;
	letter-spacing: -0.028em;
	color: var(--color-fg-primary);
	margin: var(--space-5) 0 0 0;
	max-width: 11ch;
	font-variation-settings: "opsz" 96;
}
.dcnwa-named-spaces__title em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	letter-spacing: -0.012em;
	font-variation-settings: "SOFT" 100, "opsz" 144;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}
.dcnwa-named-spaces__lede {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.6;
	color: var(--color-fg-secondary);
	margin: 0;
	/* DR-42 (iter-6): tightened 56ch to 44ch for the same reason as the
	   masthead lede, slightly wider here because the named-spaces section
	   takes the longer narrative posture. */
	max-width: 44ch;
	padding-bottom: 0.4rem;
}

.dcnwa-named-spaces__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-8), 4vw, var(--space-11));
}

/* DR-39 (iter-6): article was promoted to <a>. Element-level color and
   text-decoration overrides keep the card looking the same (no underline,
   text in the primary color) while the whole card is now the tap target. */
a.dcnwa-named-space,
.dcnwa-named-space {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	position: relative;
	color: inherit;
	text-decoration: none;
}
a.dcnwa-named-space:hover { color: inherit; }
a.dcnwa-named-space:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--color-cta-primary-focus-ring);
	border-radius: var(--radius-lg);
}
/* Inner text-link span (aria-hidden cue) still styles like a text-link. */
.dcnwa-named-space .dcnwa-text-link {
	display: inline-flex;
	align-self: flex-start;
}
.dcnwa-named-space__photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow-card);
	background: var(--color-bg-secondary);
	margin: 0;
}
.dcnwa-named-space__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1200ms var(--motion-ease-emphasized);
}
.dcnwa-named-space:hover .dcnwa-named-space__photo img { transform: scale(1.025); }
/* DR-41 (iter-6): touch devices get a small scale on :active so finger-tap
   feedback mirrors what hover-capable devices get. Same magnitude as the
   hover state. */
.dcnwa-named-space:active .dcnwa-named-space__photo img { transform: scale(1.025); transition-duration: 200ms; }
.dcnwa-named-space__index {
	position: absolute;
	top: var(--space-5);
	left: var(--space-5);
	font-family: var(--font-family-display);
	font-weight: 600;
	/* DR-03 (iter-6): swapped off-scale 0.78rem literal for the overline
	   token so the pill ladders with every other overline-register surface. */
	font-size: var(--font-size-overline);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-fg-inverse);
	background: rgba(26, 20, 16, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 0.32rem 0.6rem;
	border-radius: var(--radius-pill);
}
.dcnwa-named-space__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-5);
	border-bottom: 1px solid var(--color-border-default);
	padding-bottom: 0.4rem;
}
/* DR-22 (iter-6): kicker promoted from overline-uppercase-muted to body-m,
   mixed-case, primary color, weight 600. Pre-change the row "The Pergola /
   Open 4 p.m. to close." rendered as two same-tier small grey lines and the
   reader could not tell venue name from ledger. The kicker now reads as
   the venue name; .dcnwa-ledger keeps the small italic muted ledger role. */
.dcnwa-named-space__kicker {
	font-family: var(--font-family-display);
	font-size: var(--font-size-body-m);
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--color-fg-primary);
	font-weight: 600;
}
.dcnwa-named-space__name {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-size: var(--font-size-headline-m);
	line-height: 1.06;
	letter-spacing: -0.022em;
	color: var(--color-fg-primary);
	margin: 0;
	font-variation-settings: "opsz" 24;
}
.dcnwa-named-space__name em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	/* Accent economy (wave 3): card-level names go ink italic (matching the
	   feature cards, which were already demoted) so the red stays a scarce,
	   load-bearing move on the section masthead above and the hero. */
	color: var(--color-fg-primary);
	font-variation-settings: "SOFT" 100, "opsz" 96;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
	letter-spacing: -0.012em;
}
.dcnwa-named-space__copy {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: 1.7;
	color: var(--color-fg-secondary);
	margin: 0;
	max-width: 38ch;
}

/* ----------------------------------------------------------------------------
   14. Feature card (3-up Play section)
   ---------------------------------------------------------------------------- */

.dcnwa-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-6), 3vw, var(--space-9));
}

.dcnwa-feature-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-xl);
	padding: var(--space-7);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	transition: transform var(--motion-duration-slow) var(--motion-ease-standard),
				box-shadow var(--motion-duration-slow) var(--motion-ease-standard);
	height: 100%;
}
.dcnwa-feature-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lifted);
}
.dcnwa-feature-card__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-secondary);
	margin: 0;
}
.dcnwa-feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dcnwa-feature-card__title {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-m);
	line-height: var(--line-height-headline);
	letter-spacing: -0.022em;
	color: var(--color-fg-primary);
	margin: 0;
	font-variation-settings: "opsz" 24;
}
.dcnwa-feature-card__price {
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	font-feature-settings: "tnum" 1;
	margin: 0;
}
.dcnwa-feature-card__copy {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: var(--line-height-body);
	color: var(--color-fg-secondary);
	margin: 0;
	flex-grow: 1;
}
.dcnwa-feature-card__cta { align-self: flex-start; margin-top: auto; }

/* ----------------------------------------------------------------------------
   15. Food grid (6-up)
   ---------------------------------------------------------------------------- */

.dcnwa-food-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(var(--space-4), 2vw, var(--space-6));
}
.dcnwa-food-grid__item {
	background: var(--color-card-bg-tinted);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.dcnwa-food-grid__item:hover { transform: translateY(-2px); }
.dcnwa-food-grid__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-secondary);
	margin: 0;
}
.dcnwa-food-grid__media img { width: 100%; height: 100%; object-fit: cover; }
.dcnwa-food-grid__name {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: var(--font-weight-body-emphasis);
	font-size: var(--font-size-headline-s);
	line-height: 1.25;
	color: var(--color-fg-primary);
	margin: 0;
}
.dcnwa-food-grid__desc {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	color: var(--color-fg-secondary);
	margin: 0;
	line-height: 1.45;
}
.dcnwa-food-grid__price {
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	margin-top: auto;
}

/* Text-only menu list (eat-drink pizza menu and any future menu surface).
   No card chrome, no media slot expectation. Editorial menu format: italic
   name left, price right, description on the second line, hairline between
   items. Reads as a printed menu rather than as understyled food tiles. */
.dcnwa-menu-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	/* DR-15 (iter-6): tokenized. */
	max-width: var(--container-max-reading);
}
.dcnwa-menu-list__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: var(--space-5);
	row-gap: var(--space-2);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border-muted);
}
.dcnwa-menu-list__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.dcnwa-menu-list__name {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: var(--font-weight-body-emphasis);
	font-size: var(--font-size-headline-s);
	line-height: 1.25;
	color: var(--color-fg-primary);
	margin: 0;
}
.dcnwa-menu-list__price {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-m);
	color: var(--color-fg-accent);
	letter-spacing: var(--tracking-overline);
	margin: 0;
	align-self: baseline;
	font-feature-settings: "tnum" 1;
}
.dcnwa-menu-list__desc {
	grid-column: 1 / -1;
	grid-row: 2;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-secondary);
	line-height: 1.5;
	margin: 0;
}

/* ----------------------------------------------------------------------------
   16. Pergola module (signature dark band)
   ---------------------------------------------------------------------------- */

.dcnwa-pergola-module {
	background: var(--color-pergola-band-bg);
	color: var(--color-pergola-band-fg);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	position: relative;
	margin: clamp(var(--space-9), 6vw, var(--space-13)) auto;
	max-width: var(--container-max-wide);
	box-shadow: var(--shadow-lifted);
}
.dcnwa-pergola-module::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 50% 20%, var(--color-pergola-band-glow), rgba(26,20,16,0) 70%);
	pointer-events: none;
	z-index: 1;
}
.dcnwa-pergola-module__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: clamp(var(--space-7), 4vw, var(--space-12));
	align-items: center;
	padding: clamp(var(--space-9), 6vw, var(--space-14));
}
.dcnwa-pergola-module__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.dcnwa-pergola-module__eyebrow {
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* DR-10 (iter-6): tokenized. The pergola sits inside the dark-surface
	   color remap which already aliases --color-fg-accent to #E36A82
	   (brand-red-300). Hardcoding here bypassed the chain; the token now
	   threads through cleanly so a future palette retune lands in one place. */
	color: var(--color-fg-accent);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}
.dcnwa-pergola-module__eyebrow::before {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	background: currentColor;
	/* DR-21 (iter-6): pergola eyebrow underline holds a stronger opacity than
	   the generic .dcnwa-eyebrow::before (0.55). On the dark pergola surface
	   the brand-red-300 text+rule already runs warmer; 0.85 keeps the rule
	   visible without overpowering the wordmark. */
	opacity: 0.85;
	flex: 0 0 auto;
}
.dcnwa-pergola-module__title {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-size: var(--font-size-display-m);
	line-height: 1.0;
	letter-spacing: -0.028em;
	color: var(--color-pergola-band-fg);
	margin: 0;
	font-variation-settings: "opsz" 96;
}
.dcnwa-pergola-module__title em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	/* DR-10 (iter-6): tokenized. Same rationale as the eyebrow above. */
	color: var(--color-fg-accent);
	font-variation-settings: "SOFT" 100, "opsz" 144;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
	letter-spacing: -0.012em;
}
.dcnwa-pergola-module__body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: var(--line-height-body-dark);
	color: var(--color-fg-on-ink);
	margin: 0;
	max-width: 48ch;
}
.dcnwa-pergola-module__photo {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow-lifted);
	margin: 0;
}
.dcnwa-pergola-module__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: translateY(0);
	transition: transform 1200ms var(--motion-ease-emphasized);
	will-change: transform;
}
.dcnwa-pergola-module.is-in-view .dcnwa-pergola-module__photo img {
	transform: translateY(-3%);
}

/* ----------------------------------------------------------------------------
   17. Event poster + event strip
   ---------------------------------------------------------------------------- */

.dcnwa-event-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-6), 3vw, var(--space-9));
}

.dcnwa-event-poster {
	background: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard),
				box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}
.dcnwa-event-poster:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lifted);
}
.dcnwa-event-poster__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-secondary);
	margin: 0;
}
.dcnwa-event-poster__media img { width: 100%; height: 100%; object-fit: cover; }
.dcnwa-event-poster__date {
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-accent);
}
.dcnwa-event-poster__title {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-m);
	line-height: var(--line-height-headline);
	color: var(--color-fg-primary);
	margin: 0;
}
.dcnwa-event-poster__time {
	font-family: var(--font-family-mono), var(--font-family-display);
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	letter-spacing: var(--tracking-mono-label);
	font-feature-settings: "tnum" 1;
}
.dcnwa-event-poster__desc {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-secondary);
	margin: 0;
	line-height: 1.55;
}

/* ----------------------------------------------------------------------------
   18. Membership comparison table
   ---------------------------------------------------------------------------- */

.dcnwa-membership-table {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow-x: auto;
	width: 100%;
}
.dcnwa-membership-table table {
	width: 100%;
	border-collapse: collapse;
	font-feature-settings: "tnum" 1;
}
.dcnwa-membership-table th,
.dcnwa-membership-table td {
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-border-muted);
	text-align: left;
	vertical-align: top;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-secondary);
}
.dcnwa-membership-table thead th {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-s);
	color: var(--color-fg-primary);
	background: var(--color-bg-tinted);
}
.dcnwa-membership-table thead th .price {
	display: block;
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 400;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	margin-top: 2px;
}
.dcnwa-membership-table tbody tr:last-child td,
.dcnwa-membership-table tbody tr:last-child th { border-bottom: 0; }
/* WCAG AA: success green (#3F8A52) yields 4.22:1 on white, which fails 4.5:1.
   Use a deeper success token (#2F6B3E) for at least 5.6:1 on white. */
.dcnwa-membership-table .check { color: #2F6B3E; font-weight: 600; }
.dcnwa-membership-table .dash  { color: var(--color-fg-muted); opacity: 0.5; font-size: 1.4em; line-height: 1; }

/* Header price-final placeholder, originally inline opacity:0.75 which dropped contrast.
   Use the muted foreground at full opacity for ~5.4:1 on tinted bg. */
.dcnwa-membership-table .price em.price-final {
	font-style: italic;
	color: var(--color-fg-muted);
	opacity: 1;
}

/* ----------------------------------------------------------------------------
   19. Hiring banner
   ---------------------------------------------------------------------------- */

.dcnwa-hiring-banner {
	background: var(--color-hiring-banner-bg);
	color: var(--color-hiring-banner-fg);
	border-radius: var(--radius-2xl);
	padding: clamp(var(--space-8), 5vw, var(--space-11)) clamp(var(--space-7), 4vw, var(--space-10));
	box-shadow: var(--shadow-card);
	margin: clamp(var(--space-9), 5vw, var(--space-12)) auto;
	max-width: var(--container-max-wide);
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(var(--space-6), 3vw, var(--space-9));
	align-items: center;
}
.dcnwa-hiring-banner__title {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-l);
	line-height: 1.1;
	letter-spacing: -0.022em;
	margin: 0 0 var(--space-4) 0;
	/* Override theme.json h2 ink-700 default which fails 3:1 vs blue-700 background */
	color: var(--color-hiring-banner-fg);
	font-variation-settings: "opsz" 48;
}
.dcnwa-hiring-banner__title em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	/* DR-11 (iter-6): tokenized cream-200 literal. --color-fg-inverse on the
	   blue-700 background still lands ~10:1 contrast (AAA). The earlier hardcoded
	   #F1E9D8 was correct on render; the token makes the semantic intent
	   ("cream on ink") obvious to any future maintainer reading the rule. */
	color: var(--color-fg-inverse);
	font-variation-settings: "SOFT" 100, "opsz" 96;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}
.dcnwa-hiring-banner__roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	font-family: var(--font-family-display);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-on-ink-strong);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dcnwa-hiring-banner__roles li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.dcnwa-hiring-banner__roles li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-hiring-banner-accent);
	/* DR-54 (iter-6): single-fire pulse when the banner enters the viewport.
	   The four role dots tick on for 220ms each, 200ms apart, then stop.
	   Reads as "we are open for these four roles, today." Reduced-motion
	   guarded below. */
	animation: dcnwa-role-dot-pulse 1.5s var(--motion-ease-emphasized) both;
	animation-iteration-count: 1;
}
.dcnwa-hiring-banner__roles li:nth-child(1)::before { animation-delay: 200ms; }
.dcnwa-hiring-banner__roles li:nth-child(2)::before { animation-delay: 400ms; }
.dcnwa-hiring-banner__roles li:nth-child(3)::before { animation-delay: 600ms; }
.dcnwa-hiring-banner__roles li:nth-child(4)::before { animation-delay: 800ms; }
@keyframes dcnwa-role-dot-pulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	30%  { transform: scale(1.6); opacity: 1; }
	60%  { transform: scale(1);   opacity: 1; }
	100% { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dcnwa-hiring-banner__roles li::before { animation: none; opacity: 1; }
}
.dcnwa-hiring-banner__cta {
	justify-self: end;
}
.dcnwa-hiring-banner__cta .dcnwa-cta-pill {
	/* Use brand-red-700 (#A8182F) for ~5.8:1 contrast vs cream fg, passes WCAG AA. */
	background: var(--color-brand-red-700);
	color: #FAF5EC !important;
}
.dcnwa-hiring-banner__cta .dcnwa-cta-pill:hover {
	background: var(--color-brand-red-900);
	color: #FFFFFF !important;
}

/* ----------------------------------------------------------------------------
   20. FAQ accordion (Details block)
   ---------------------------------------------------------------------------- */

/* DR-31 (iter-6) shortcut path: opt the FAQ into modern interpolate-size so
   the native <details>/<summary> open/close animates instead of snapping.
   `interpolate-size: allow-keywords` is a no-op in older browsers (graceful
   degradation: still snaps). */
:root { interpolate-size: allow-keywords; }

.dcnwa-faq {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-border-default);
}
.dcnwa-faq details {
	border-bottom: 1px solid var(--color-border-default);
	padding: var(--space-5) 0;
	/* DR-31 (iter-6): animate the panel block-size between 0 and auto. The
	   interpolate-size rule above unlocks the keyword interpolation in
	   supporting browsers. */
	transition: block-size var(--motion-duration-base) var(--motion-ease-standard);
}
.dcnwa-faq summary {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-s);
	color: var(--color-fg-primary);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
}
.dcnwa-faq summary::-webkit-details-marker { display: none; }
.dcnwa-faq summary::after {
	content: "+";
	font-size: 1.4em;
	color: var(--color-fg-accent);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
	font-weight: 300;
	line-height: 1;
}
.dcnwa-faq details[open] summary::after { content: "\2212"; }
.dcnwa-faq details > *:not(summary) {
	margin-top: var(--space-3);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: var(--line-height-body);
	color: var(--color-fg-secondary);
}

/* ----------------------------------------------------------------------------
   21. Newsletter / Free Member signup block
   ---------------------------------------------------------------------------- */

.dcnwa-newsletter {
	background: var(--color-bg-tinted);
	border-radius: var(--radius-2xl);
	padding: clamp(var(--space-9), 6vw, var(--space-12));
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: clamp(var(--space-7), 4vw, var(--space-11));
	align-items: center;
	margin: clamp(var(--space-9), 5vw, var(--space-12)) auto;
	max-width: var(--container-max-wide);
}
.dcnwa-newsletter__title {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-l);
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var(--color-fg-primary);
	margin: 0 0 var(--space-4) 0;
	font-variation-settings: "opsz" 48;
}
.dcnwa-newsletter__title em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}
.dcnwa-newsletter__body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	color: var(--color-fg-secondary);
	margin: 0;
	line-height: 1.55;
}
.dcnwa-newsletter__cta { justify-self: start; }

/* ----------------------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------------------- */

/* 2026-07-17 batch: footer compressed (it ran long). Lighter paddings, the
   12-link column flows in two columns, and the brand block carries the motto. */
.dcnwa-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-fg);
	padding: clamp(var(--space-9), 5vw, var(--space-11)) 0 var(--space-6);
	margin-top: var(--space-11);
}
.dcnwa-footer__inner {
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.dcnwa-footer__brand {
	display: inline-flex;
	margin-bottom: var(--space-4);
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-footer__motto {
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-m);
	color: var(--color-footer-fg);
	margin: 0 0 clamp(var(--space-6), 4vw, var(--space-8));
}
.dcnwa-footer__brand:hover { opacity: 0.85; }
.dcnwa-footer__logo {
	display: block;
	width: auto;
	height: 96px;
	object-fit: contain;
	/* White circular chip so the seal reads on the ink footer surface.
	   The seal-round asset is a true 1:1 circle with alpha, so the chip
	   can finally be a circle instead of the old pill workaround. */
	background: #FFFFFF;
	border-radius: 50%;
	padding: 8px;
	box-shadow: 0 6px 18px -8px rgba(201, 32, 66, 0.32);
}
@media (max-width: 640px) {
	.dcnwa-footer__logo { height: 76px; }
}
.dcnwa-footer__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-6), 3vw, var(--space-9));
	padding-bottom: var(--space-7);
	border-bottom: 1px solid rgba(146, 133, 118, 0.25);
}
.dcnwa-footer__col h3,
.dcnwa-footer__col__heading {
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	font-weight: var(--font-weight-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-footer-fg);
	margin: 0 0 var(--space-5);
}
.dcnwa-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
/* The Where-to-go list holds 12 links; two columns halve its height.
   Selector must out-rank the .dcnwa-footer__col ul flex rule above, which
   silently won on specificity and kept the list single-column. */
.dcnwa-footer__col ul.dcnwa-footer__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-5);
	row-gap: var(--space-2);
}
.dcnwa-footer a {
	color: var(--color-footer-fg);
	text-decoration: none;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-footer a:hover { color: var(--color-brand-red-300); }
.dcnwa-footer__address {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: 1.6;
	color: var(--color-footer-fg);
}
.dcnwa-footer__address strong {
	display: block;
	font-family: var(--font-family-display);
	font-weight: 700;
	font-size: var(--font-size-body-l);
	margin-bottom: var(--space-3);
}
.dcnwa-footer__address em {
	font-family: var(--font-family-body);
	font-style: italic;
	color: var(--color-footer-fg-muted);
}
/* DR-23 (iter-6): flipped the hierarchy. Pre-change, the day label (dt)
   rendered display-uppercase-muted and the hours (dd) rendered italic body-s,
   which implied the day was the headline. For a hospitality reader, the hour
   IS what they are checking. Now: day is the small overline label, hour is
   the dominant Bricolage display body-m tabular line. */
.dcnwa-footer__hours dt {
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	font-weight: 500;
	color: var(--color-footer-fg-muted);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	margin-top: var(--space-3);
}
.dcnwa-footer__hours dt:first-of-type {
	margin-top: 0;
}
.dcnwa-footer__hours dd {
	font-family: var(--font-family-display);
	font-style: normal;
	font-weight: 500;
	font-size: var(--font-size-body-m);
	color: var(--color-footer-fg);
	margin: 0;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.005em;
}
.dcnwa-footer__social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-5);
}
.dcnwa-footer__social a {
	display: inline-flex;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(250, 245, 236, 0.06);
	align-items: center;
	justify-content: center;
}
/* DR-57 (iter-6): icons now mirror the footer link hover (brand-red-300 fill
   instead of the prior bare opacity bump). DR-13 (iter-6) tokenized the bg. */
.dcnwa-footer__social a:hover {
	background: var(--color-accent-halo-soft);
	color: var(--color-brand-red-300);
}
.dcnwa-footer__social a:hover svg {
	stroke: var(--color-brand-red-300);
}
.dcnwa-footer__social svg {
	width: 18px; height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* Footer modifier classes added in iter-4 to replace inline style overrides. */
.dcnwa-footer__cta-wrap        { margin-top: 1.25rem; }
.dcnwa-footer__address--lead   { margin-bottom: 1.25rem; }
.dcnwa-footer__address--sister { margin-top: 1.5rem; font-size: 0.875rem; }

.dcnwa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-7);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-7);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	font-style: italic;
	color: var(--color-footer-fg-muted);
}
.dcnwa-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}
.dcnwa-footer__bottom-links a {
	color: var(--color-footer-fg-muted);
}

/* ----------------------------------------------------------------------------
   23. Page sections (named spaces masthead overrides at narrower breakpoints)
   ---------------------------------------------------------------------------- */

.dcnwa-section {
	padding: clamp(var(--space-10), 6vw, var(--space-13)) 0;
}

.dcnwa-section__masthead {
	max-width: var(--container-max-wide);
	margin: 0 auto clamp(var(--space-8), 4vw, var(--space-11));
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(var(--space-6), 3vw, var(--space-10));
	align-items: end;
}

.dcnwa-section__masthead h2 {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-size: var(--font-size-display-s);
	line-height: 1.0;
	letter-spacing: -0.028em;
	color: var(--color-fg-primary);
	margin: 0;
	max-width: 12ch;
	font-variation-settings: "opsz" 72;
}
.dcnwa-section__masthead h2 em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	font-variation-settings: "SOFT" 100, "opsz" 144;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}

.dcnwa-section__masthead p {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.55;
	color: var(--color-fg-secondary);
	margin: 0;
	/* DR-42 (iter-6): tightened 56ch to 42ch so the masthead lede reads as
	   deck, not as paragraph. The standard editorial body measure is 56ch;
	   a section lede sits one register tighter and is meant to be scanned. */
	max-width: 42ch;
}

/* Stacked masthead modifier. Replaces the inline
   `style="grid-template-columns: 1fr; gap: 1rem;"` overrides on patterns whose
   masthead is single-column (about, food-drink, leagues, etc.). */
.dcnwa-section__masthead--stacked {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.dcnwa-section__content {
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Narrow content widths inside a section. Replaces inline
   `style="max-width: 720px"` and `style="max-width: 880px"` overrides.
   DR-15 (iter-6): now uses the new --container-max-reading and
   --container-max-prose tokens so the three narrow widths in the build
   (640 / 720 / 880) all derive from the token system. */
.dcnwa-section__content--narrow { max-width: var(--container-max-reading); }
.dcnwa-section__content--medium { max-width: var(--container-max-prose); }

/* ----------------------------------------------------------------------------
   24. CTA row (generic between sections)
   ---------------------------------------------------------------------------- */

.dcnwa-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: center;
	padding: var(--space-9) var(--gutter);
	border-top: 1px solid var(--color-border-default);
	border-bottom: 1px solid var(--color-border-default);
	margin: var(--space-11) 0;
}
.dcnwa-cta-row p {
	font-family: var(--font-family-display);
	font-size: var(--font-size-headline-s);
	font-weight: var(--font-weight-headline);
	color: var(--color-fg-primary);
	margin: 0 var(--space-4) 0 0;
	letter-spacing: -0.018em;
}
.dcnwa-cta-row p em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
}
/* Helper line that sits beneath the two CTA buttons in the row. iter-3 added
   the markup but never gave it a CSS rule, so it inherited the headline-sized
   .dcnwa-cta-row p treatment. This restores the intended body-s italic. */
.dcnwa-cta-row__helper {
	flex-basis: 100%;
	text-align: center;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	font-style: italic;
	color: var(--color-fg-muted);
	margin: 0;
	max-width: 56ch;
	margin-inline: auto;
}
/* The helper wraps its text in <em>, which .dcnwa-cta-row p em (section above)
   was painting brand-red so the helper note read as an error under the CTA.
   Neutralize: the whole helper line is already muted italic.
   NOTE: the descendant form is required. A bare .dcnwa-cta-row__helper em
   (0,1,1) loses the cascade to .dcnwa-cta-row p em (0,1,2); scoping it under
   .dcnwa-cta-row (0,2,1) wins. (2026-07-17: dcnwa_cta_row() no longer emits
   the helper, so this rule is dormant; kept for the accepted helper_line arg.) */
.dcnwa-cta-row .dcnwa-cta-row__helper em {
	color: var(--color-fg-muted);
	font-family: inherit;
	font-weight: inherit;
}

/* Shared hero figure wrapper. Replaces three patterns that hand-inlined the
   same border-radius + overflow + shadow + aspect-ratio block. */
.dcnwa-hero-figure {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lifted);
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--space-9);
}
/* Frame the venue/pergola subject, not the ceiling/sky. The interior
   16/9 figures had no object-position and defaulted to center 50%. */
.dcnwa-hero-figure img { object-position: center 64%; }

/* Reserved slot for a client photo that has not been delivered yet
   (golf bay hero). Reads as an intentional quiet band, not a broken image. */
.dcnwa-hero-figure--placeholder {
	box-shadow: none;
	border: 1px dashed var(--color-border-default);
	background: var(--color-bg-secondary);
	margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
}
.dcnwa-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-m);
	color: var(--color-fg-muted);
}

/* Button row used inside wp:html groups (event-strip, food-drink-grid,
   membership-table) where wp-block-buttons was reused only for centering. */
.dcnwa-button-row {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
   25. Local pride strip
   ---------------------------------------------------------------------------- */

.dcnwa-local-pride {
	text-align: center;
	padding: clamp(var(--space-11), 6vw, var(--space-14)) var(--gutter);
	/* DR-15 (iter-6): tokenized. */
	max-width: var(--container-max-reading);
	margin: 0 auto;
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-headline-s);
	line-height: 1.5;
	color: var(--color-fg-primary);
}
.dcnwa-local-pride p { margin: 0 0 var(--space-3); }
.dcnwa-local-pride p:last-child {
	font-family: var(--font-family-display);
	font-style: normal;
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-muted);
	margin-top: var(--space-6);
}

/* ----------------------------------------------------------------------------
   26. 404
   ---------------------------------------------------------------------------- */

.dcnwa-404 {
	padding: clamp(var(--space-12), 8vw, var(--space-15)) var(--gutter);
	/* DR-15 (iter-6): tokenized. */
	max-width: var(--container-max-reading);
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}
.dcnwa-404 .dcnwa-eyebrow {
	color: var(--color-fg-muted);
	letter-spacing: var(--tracking-overline);
}
.dcnwa-404__title {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-display-bold);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: var(--line-height-display);
	letter-spacing: var(--tracking-display-tight);
	color: var(--color-fg-primary);
	margin: 0;
	max-width: 24ch;
	font-variation-settings: "opsz" 72;
}
.dcnwa-404__title em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	font-variation-settings: "SOFT" 100, "opsz" 96;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}
.dcnwa-404__body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: var(--line-height-body);
	color: var(--color-fg-secondary);
	margin: 0;
	max-width: 44ch;
}
.dcnwa-404__subhead {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	font-size: var(--font-size-headline-m);
	color: var(--color-fg-primary);
	margin: var(--space-6) 0 0;
	letter-spacing: var(--tracking-headline);
}
.dcnwa-404__subhead em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
}
.dcnwa-404__links {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: 1.5;
}
.dcnwa-404__links li a {
	display: block;
	padding: var(--space-4) var(--space-5);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	color: var(--color-fg-primary);
	text-decoration: none;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
	            background var(--motion-duration-fast) var(--motion-ease-standard),
	            transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-404__links li a:hover {
	border-color: var(--color-fg-accent);
	background: var(--color-bg-tinted);
}
.dcnwa-404__links li a:focus-visible {
	outline: 0;
	border-color: var(--color-accent-default);
	box-shadow: var(--shadow-focus-accent);
}
.dcnwa-404__links li a strong {
	color: var(--color-fg-accent);
	font-family: var(--font-family-display);
	font-weight: 600;
	margin-right: 0.4em;
}
.dcnwa-404__footnote {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	color: var(--color-fg-muted);
	margin: var(--space-6) 0 0;
	max-width: 50ch;
}

/* ----------------------------------------------------------------------------
   27. Apply page wrapper
   ---------------------------------------------------------------------------- */

.dcnwa-apply {
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.dcnwa-apply__intro {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.55;
	color: var(--color-fg-secondary);
	margin: 0 0 var(--space-7);
	max-width: 60ch;
}
.dcnwa-apply__roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-9);
	padding: 0;
	list-style: none;
}
.dcnwa-apply__roles li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.45rem 0.9rem;
	background: var(--color-bg-tinted);
	border-radius: var(--radius-pill);
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-s);
	color: var(--color-fg-primary);
	letter-spacing: -0.005em;
}
.dcnwa-apply__roles li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-fg-accent);
}
.dcnwa-apply__values {
	margin: 0 0 var(--space-9);
	padding-left: 1.25rem;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.6;
	color: var(--color-fg-primary);
}
.dcnwa-apply__values li { margin-bottom: var(--space-3); }
.dcnwa-apply__values li strong {
	font-weight: 600;
	color: var(--color-fg-accent);
}
.dcnwa-apply__form-intro {
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-m);
	color: var(--color-fg-muted);
	margin: 0 0 var(--space-4);
}
.dcnwa-apply__form-wrap {
	background: var(--color-card-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	padding: var(--space-5);
	box-shadow: var(--shadow-soft);
}
.dcnwa-apply__form-wrap iframe { width: 100%; border: 0; min-height: 600px; }
.dcnwa-apply__cta-row {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-9);
}
.dcnwa-apply__footnote {
	margin: var(--space-7) 0 0;
	font-style: italic;
	font-family: var(--font-family-body);
	color: var(--color-fg-muted);
	font-size: var(--font-size-body-s);
}

/* ----------------------------------------------------------------------------
   28. Responsive

   DR-14 (iter-6): a real tablet breakpoint sits between the mobile and
   desktop bands. The pre-change build had one cliff at 1024px where every
   two-column module collapsed in one beat. That left iPad-Pro landscape,
   Surface Pro, and 13-inch MacBook viewers reading an awkward 2-up grid
   where card 03 of named-spaces became the billboard of the section. The
   ladder now reads:
   - <= 768px   true mobile (drawer, single-column, stacked masthead)
   - 769-1023   real tablet (3-up grids stay 3-up at tighter ratios)
   - >= 1024    desktop baseline
   ---------------------------------------------------------------------------- */

/* TABLET. DR-14 (iter-6). Keeps named-spaces 3-up via a portrait aspect ratio
   on the cards so the No. 01 / 02 / 03 sequence stays intact. Feature grids
   stay 3-up. Hiring + newsletter compress to a tighter 2-col. */
@media (min-width: 769px) and (max-width: 1023px) {
	.dcnwa-hero-editorial__heading-row { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-7); }
	.dcnwa-hero-editorial__photo-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); }
	.dcnwa-booking-widget { max-width: none; }
	.dcnwa-named-spaces__masthead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
	.dcnwa-named-spaces__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
	.dcnwa-named-space__photo { aspect-ratio: 3 / 4; }
	.dcnwa-pergola-module__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
	.dcnwa-food-grid { grid-template-columns: repeat(3, 1fr); }
	.dcnwa-feature-grid { grid-template-columns: repeat(3, 1fr); }
	.dcnwa-event-strip { grid-template-columns: repeat(3, 1fr); }
	.dcnwa-hiring-banner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.dcnwa-newsletter { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.dcnwa-footer__row { grid-template-columns: repeat(3, 1fr); }
	.dcnwa-section__masthead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
}

/* DESKTOP. Pull the hero photo above the fold at >=1024px. The base clamps
   all hit their MAX in the 1024-1440px band, stacking ~470-560px of
   chrome + type above the image. These overrides trim only the spacers that
   sit ABOVE the photo, plus the framing, so the subject lands inside the
   first viewport. Scoped to >=1024px so the <=768 and 769-1023 bands are
   untouched. Only the page's lead/hero section tightens (:first-of-type);
   downstream sections keep their full editorial rhythm. */
@media (min-width: 1024px) {
	/* Home editorial hero: trim the spacers and the oversized headline so the
	   photo+widget row rises into the first viewport. */
	.dcnwa-hero-editorial { padding-top: clamp(var(--space-5), 2.5vw, var(--space-7)); }
	.dcnwa-hero-editorial__inner { gap: clamp(var(--space-4), 1.8vw, var(--space-6)); }
	.dcnwa-hero-editorial__heading { font-size: clamp(2.75rem, 4.2vw, 4.75rem); }
	/* Match the photo to the booking-widget height so the two columns align
	   cleanly (no empty gap above the shorter photo). With a definite stretched
	   height, the figure drops its aspect-ratio and the absolutely-positioned
	   image covers the full column. */
	.dcnwa-hero-editorial__photo-row { align-items: stretch; }
	.dcnwa-hero-editorial__photo { aspect-ratio: auto; }
	.dcnwa-hero-editorial__photo img { object-position: center 66%; }

	/* Interior heroes (masthead stacked above the image). The display-m H1 hit
	   ~63-88px and ate the viewport; cap it lower on the lead section only, and
	   tighten the spacers above the image. */
	.dcnwa-section:first-of-type { padding-top: clamp(var(--space-5), 2.5vw, var(--space-7)); }
	.dcnwa-section:first-of-type .dcnwa-section__masthead { margin-bottom: clamp(var(--space-5), 2vw, var(--space-7)); }
	.dcnwa-section:first-of-type .dcnwa-section__masthead h1 { font-size: clamp(2.25rem, 3.4vw, 3.75rem); line-height: 1.02; }

	/* Standalone hero figures (about, events, food-drink): go cinematic-short
	   so the whole image fits above the fold. */
	.dcnwa-section:first-of-type .dcnwa-hero-figure { aspect-ratio: 2.1 / 1; }
	.dcnwa-hero-figure img { object-position: center 62%; }

	/* Photo + booking-widget heroes (pickleball, golf-sims): frame the subject. */
	.dcnwa-hero-with-widget__photo img { object-position: center 60%; }
}

/* MOBILE. DR-14 (iter-6): the previous single cliff at 1024px is now scoped
   to true mobile (<= 768px). The tablet band above keeps 3-up grids alive. */
@media (max-width: 768px) {
	/* Header density: the utility row (Hiring / CrossFit / Visit) is redundant
	   on mobile because all three links live in the drawer, so hiding it removes
	   a full pre-content band and shortens the sticky header. */
	.dcnwa-utility-row { display: none; }
	.dcnwa-main-nav__list { display: none; }
	.dcnwa-nav-toggle { display: inline-flex; }
	/* With the utility row gone, the nav band is the primary chrome: trim its
	   vertical padding and gap so the page leads with content sooner. The
	   Reserve pill and 44x44 hamburger keep their own sizing. */
	.dcnwa-main-nav { padding-block: var(--space-4); gap: var(--space-5); }
	/* Lightly tighten the only remaining pre-nav band; gutter unchanged. */
	.dcnwa-promo-bar__inner { padding-block: var(--space-3); gap: var(--space-4); }
	/* Promo-bar tap targets to >=44px (WCAG 2.5.8); negative margin keeps the
	   X glyph at the gutter edge so the bar does not visibly widen. */
	.dcnwa-promo-bar__dismiss { min-width: 44px; min-height: 44px; margin-right: calc(-1 * var(--space-2)); }
	.dcnwa-promo-bar__cta { min-height: 44px; padding-block: 0.4em; }
	.dcnwa-hero-editorial__heading-row { grid-template-columns: 1fr; gap: var(--space-7); }
	.dcnwa-hero-editorial__photo-row { grid-template-columns: 1fr; }
	/* Lead the mobile hero with the photo, then the booking widget below it
	   (swap requested). Trades the previous Reserve-above-the-fold order for
	   visual impact first. */
	.dcnwa-hero-editorial__photo-row .dcnwa-hero-editorial__photo { order: -1; }
	.dcnwa-hero-editorial__photo-row .dcnwa-booking-widget { order: 0; }
	.dcnwa-booking-widget { max-width: none; border-radius: var(--radius-lg); }
	.dcnwa-hero-editorial__photo { aspect-ratio: 4/5; }
	/* Hero scrim fix: the global ::after (inset 45%) becomes a washed grey band
	   on the tall 4/5 portrait. Re-anchor it to a short bottom gradient so the
	   upper photo stays crisp and the caption sits on an intentional shelf. */
	.dcnwa-hero-editorial__photo::after {
		inset: auto 0 0 0;
		height: 42%;
		background: linear-gradient(180deg, rgba(26, 20, 16, 0) 0%, rgba(26, 20, 16, 0.20) 48%, rgba(26, 20, 16, 0.66) 100%);
	}
	.dcnwa-photo-caption { left: var(--space-5); right: var(--space-5); bottom: var(--space-4); font-size: var(--font-size-body-s); letter-spacing: 0.08em; }
	.dcnwa-photo-caption .where { color: rgba(250, 245, 236, 0.96); }
	/* Booking-widget controls to >=44px touch height; arrow nudged to stay
	   centered on the taller field (mobile only; desktop arrow at 18px kept). */
	.dcnwa-booking-widget__field input,
	.dcnwa-booking-widget__field select { min-height: 44px; padding-block: 0.6rem; }
	.dcnwa-booking-widget__field select { background-position: calc(100% - 14px) 21px, calc(100% - 9px) 21px; }
	.dcnwa-day-arc { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
	.dcnwa-named-spaces__masthead { grid-template-columns: 1fr; gap: var(--space-7); margin-bottom: var(--space-9); }
	/* Polish: tighten the single-column gap (was 64px max) for premium rhythm. */
	.dcnwa-named-spaces__grid { grid-template-columns: 1fr; gap: var(--space-9); }
	.dcnwa-pergola-module__inner { grid-template-columns: 1fr; }
	.dcnwa-food-grid { grid-template-columns: repeat(2, 1fr); }
	.dcnwa-feature-grid { grid-template-columns: 1fr; }
	.dcnwa-event-strip { grid-template-columns: 1fr; }
	.dcnwa-hiring-banner { grid-template-columns: 1fr; padding: var(--space-8); }
	.dcnwa-hiring-banner__cta { justify-self: start; }
	.dcnwa-newsletter { grid-template-columns: 1fr; }
	.dcnwa-footer__row { grid-template-columns: 1fr; }
	/* Footer tap targets: expand each link to a 44px row while tightening the
	   list gap so the column stays visually dense. */
	.dcnwa-footer__col ul { gap: var(--space-1); }
	.dcnwa-footer__col ul a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--space-1); }
	.dcnwa-footer__bottom-links a { display: inline-flex; align-items: center; min-height: 44px; }
	.dcnwa-pergola-module__inner { padding: var(--space-9); }
	.dcnwa-pergola-module__title { font-size: var(--font-size-headline-l); }
	.dcnwa-section__masthead { grid-template-columns: 1fr; gap: var(--space-5); }
	/* DR-40 (iter-6): booking widget submit goes full-width on mobile so the
	   tap target matches the drawer CTA pill pattern. */
	.dcnwa-booking-widget__submit { width: 100%; justify-content: center; align-self: stretch; }
}

@media (max-width: 420px) {
	/* 2026-07-17 mobile pass: dropped flex-wrap (it stranded the dismiss X on
	   its own row); the <=768px grid layout below owns the narrow-bar layout. */
	.dcnwa-promo-bar__inner { gap: var(--space-3); }
	.dcnwa-booking-widget__fields { grid-template-columns: 1fr; }
	.dcnwa-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
	/* Narrowest phones: stack the caption label and italic .where so they do
	   not collide or wrap awkwardly. */
	.dcnwa-photo-caption { flex-direction: column; align-items: flex-start; gap: var(--space-2); bottom: var(--space-3); }
	/* Recover per-card width for the 2-up food grid at 360px. */
	.dcnwa-food-grid { gap: var(--space-3); }
	/* Footer bottom row is now a column of 44px-tall links; drop the row-gap so
	   the column does not double-space. */
	.dcnwa-footer__bottom-links { row-gap: 0; }
}

/* ----------------------------------------------------------------------------
   30. Reduced motion
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.dcnwa-hero-editorial__photo { opacity: 1; transform: none; animation: none; }
	.dcnwa-pergola-module__photo img { transform: none !important; }
	.dcnwa-named-space:hover .dcnwa-named-space__photo img { transform: none; }
}

/* ----------------------------------------------------------------------------
   31. Print
   ---------------------------------------------------------------------------- */

@media print {
	.dcnwa-promo-bar,
	.dcnwa-utility-row,
	.dcnwa-site-header,
	.dcnwa-footer,
	.dcnwa-mobile-drawer { display: none !important; }
	body.dcnwa { background: #fff; color: #000; }
}

/* ----------------------------------------------------------------------------
   32. WP block adjustments
   ---------------------------------------------------------------------------- */

/* Generous default spacing for WP-rendered post content blocks */
.wp-block-post-content > * + * { margin-top: 1.25em; }

.wp-block-cover.surface-ink,
.wp-block-cover-image.surface-ink { color: var(--color-fg-inverse); }

.wp-block-buttons .wp-block-button .wp-block-button__link {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline);
	border-radius: var(--radius-pill);
	padding: 0.85rem 1.5rem;
	letter-spacing: -0.005em;
	transition: background var(--motion-duration-base) var(--motion-ease-standard);
}
.wp-block-buttons .is-style-outline .wp-block-button__link {
	border-width: 1.5px;
	background: transparent;
}

/* Ensure full-width hero patterns use the wide layout */
.dcnwa-section .alignwide { max-width: var(--container-max-wide); margin-inline: auto; }
.dcnwa-section .alignfull { max-width: 100vw; margin-inline: calc((100vw - 100%) / -2); }

/* ----------------------------------------------------------------------------
   33. Global focus visibility (Phase 2.5 accessibility polish)
   ---------------------------------------------------------------------------- */

/* All interactive elements get a visible, brand-appropriate focus ring.
   Components with bespoke focus styles (cta-pill, booking-widget, promo-bar)
   keep their own treatments. This is the catch-all for everything else.
   DR-37 (iter-6): upgraded from a generic 3px ring to a 2px brand-red bar +
   2px halo combo. The inset bar doubles as a baseline underline; the halo
   reads as "the brand acknowledges you" instead of the browser's default
   keyboard outline. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 0;
	box-shadow:
		inset 0 -2px 0 var(--color-accent-default),
		0 0 0 2px var(--color-cta-primary-focus-ring);
	border-radius: 2px;
}

/* Inputs on dark surfaces use the brand-red-300 halo. DR-13 (iter-6) tokenized. */
.surface-ink a:focus-visible,
.surface-ink button:focus-visible,
.surface-ink input:focus-visible,
.surface-ink select:focus-visible,
.surface-ink textarea:focus-visible {
	box-shadow: 0 0 0 3px var(--color-accent-halo);
}

/* Main nav focus: the wipe `::after` underline was removed (it stacked with
   browsers' default/forced link underline as a second visible line). Let
   the global focus ring (a:focus-visible above) do the keyboard-focus job
   on nav links the same way it does everywhere else. */

/* WCAG 2.1 AA (1.4.1 Use of Color): inline links inside paragraph text
   must be distinguishable from surrounding text without color alone.
   Underline by default for content paragraphs, list items, dt/dd, td.
   CTA pills, navigation lists, ledger items, footer columns, and other
   structurally distinct links opt out via explicit overrides below. */
.dcnwa-main p a:not(.dcnwa-cta-pill):not(.dcnwa-text-link):not(.skip-link),
.dcnwa-main li a:not(.dcnwa-cta-pill):not(.dcnwa-text-link):not(.skip-link):not([class]),
.dcnwa-main dd a:not([class]),
.dcnwa-main td a:not([class]),
.dcnwa-footer__address a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
}

/* Reserve link/anchor underline-on-hover for non-CTA text links.
   DR-38 (iter-6): hover bumps text-decoration-thickness from 1px to 2px so
   the hover state actually adds a second affordance. Pre-change, content
   links shipped underlined by default (WCAG 1.4.1) so the hover-only color
   shift didn't add anything. */
a:not(.dcnwa-cta-pill):not(.dcnwa-text-link):not(.skip-link):hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------------
   34. Promo bar CTA polish
   ---------------------------------------------------------------------------- */

.dcnwa-promo-bar__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-family-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.85em;
	margin-left: 0.5em;
	color: var(--color-promo-bar-accent);
	text-decoration: none;
	padding: 0.2em 0.5em;
	border-radius: var(--radius-sm);
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
	            background var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-promo-bar__cta:hover {
	color: var(--color-promo-bar-fg);
	/* DR-13 (iter-6): tokenized brand-red-300 halo. */
	background: var(--color-accent-halo-soft);
	text-decoration: none;
}
.dcnwa-promo-bar__cta:focus-visible {
	outline: 0;
	/* DR-13 (iter-6): tokenized. */
	box-shadow: 0 0 0 2px var(--color-accent-halo-strong);
}
.dcnwa-promo-bar__dismiss span[aria-hidden] {
	font-size: 1.2em;
	line-height: 1;
}

/* ----------------------------------------------------------------------------
   35. Type rhythm polish (Phase 2.5)
   ---------------------------------------------------------------------------- */

/* Generous, consistent vertical rhythm on rendered post content */
.dcnwa-main p { text-wrap: pretty; }
.dcnwa-main h1, .dcnwa-main h2, .dcnwa-main h3 { text-wrap: balance; }
.dcnwa-main h2 + p, .dcnwa-main h3 + p { margin-top: var(--space-3); }
.dcnwa-main h2 { margin-top: var(--space-9); }
.dcnwa-main section + section { margin-top: clamp(var(--space-10), 6vw, var(--space-13)); }

/* 2026-07-17 batch: page-level rhythm modifiers.
   --hero-lead collapses the four stacked spacers between a standalone page
   hero and the section after it (figure margin + hero padding-bottom + the
   adjacency margin above + the next section's padding-top) into one gap.
   --tight halves the default section rhythm on dense editorial pages
   (eat-drink) where full-height bands read as voids. */
.dcnwa-main .dcnwa-section--hero-lead { padding-bottom: 0; }
.dcnwa-main .dcnwa-section--hero-lead .dcnwa-hero-figure:last-child { margin-bottom: 0; }
.dcnwa-main .dcnwa-section--hero-lead + section {
	margin-top: 0;
	padding-top: clamp(var(--space-9), 5vw, var(--space-11));
}
.dcnwa-main .dcnwa-section--tight { padding-block: clamp(var(--space-7), 3.5vw, var(--space-9)); }
.dcnwa-main .dcnwa-section--tight + .dcnwa-section--tight { margin-top: 0; }

/* Avoid widows on display headings */
.dcnwa-display, .dcnwa-display-s, .dcnwa-display-m {
	text-wrap: balance;
	hyphens: manual;
}

/* Apply page font-stack consistency: italic accent on display em */
.dcnwa-display em,
.dcnwa-display-s em,
.dcnwa-display-m em {
	font-family: var(--font-family-body);
	font-style: italic;
	font-weight: 500;
	color: var(--color-fg-accent);
	letter-spacing: var(--tracking-display-italic);
	font-variation-settings: "SOFT" 100, "opsz" 144;
	font-feature-settings: "dlig" 1, "salt" 1, "kern" 1, "liga" 1;
}

/* ----------------------------------------------------------------------------
   36. Picture element responsive defaults
   ---------------------------------------------------------------------------- */

picture { display: block; }
picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------------------------
   37. Photography credits page
   ---------------------------------------------------------------------------- */

.dcnwa-credits {
	max-width: var(--container-max-narrow);
	margin: 0 auto;
	padding: clamp(var(--space-11), 6vw, var(--space-13)) var(--gutter);
}
.dcnwa-credits__intro {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	line-height: 1.55;
	color: var(--color-fg-secondary);
	margin: 0 0 var(--space-9);
	max-width: 60ch;
}
.dcnwa-credits__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-3);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	line-height: 1.5;
}
.dcnwa-credits__list li {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-default);
	color: var(--color-fg-primary);
}
.dcnwa-credits__list strong {
	font-family: var(--font-family-display);
	font-weight: 600;
	color: var(--color-fg-accent);
	margin-right: 0.5em;
}

/* ----------------------------------------------------------------------------
   Inline link distinguishability (WCAG 1.4.1, link-in-text-block)
   Inline links inside paragraphs and content blocks need a non-color cue.
   Standalone link components (CTAs, nav, utility row, footer cards, etc.)
   already opt out via their own classes.
   ---------------------------------------------------------------------------- */
.dcnwa-main p > a,
.dcnwa-main li > a,
.dcnwa-main blockquote a,
.dcnwa-section__content p > a,
.dcnwa-section__masthead p > a,
.dcnwa-booking-widget__footnote a {
	color: var(--color-link-default);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-skip-ink: auto;
}
.dcnwa-main p > a:hover,
.dcnwa-main li > a:hover,
.dcnwa-main blockquote a:hover,
.dcnwa-section__content p > a:hover,
.dcnwa-section__masthead p > a:hover,
.dcnwa-booking-widget__footnote a:hover {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}
/* Opt-out: CTAs, brand wrappers, and nav items already have visual treatment. */
.dcnwa-main a.dcnwa-cta-pill,
.dcnwa-main a.dcnwa-brand,
.dcnwa-main .wp-block-buttons a {
	text-decoration: none;
}

/* ============================================================================
   38. Phase 3 QA P0 fixes (mobile + tablet ship-blockers)
   ============================================================================

   Patch set after Phase 3 QA reports flagged:
   1. Inline `grid-template-columns: repeat(N, 1fr)` overrides on pickleball,
      leagues, events, contact, eat-drink pages prevented the existing
      `@media (max-width: 1024px)` rules from applying. Pages overflowed
      horizontally at 768px and 375px.
   2. Hero+booking-widget side-by-side layout (pickleball + golf-sims) did
      not collapse to a single column at mobile breakpoint; the widget
      was crushed to ~101px wide on a 375 viewport.
   3. Mobile drawer had no backdrop scrim, no tap-outside-to-dismiss, and
      no background-scroll lock when open.
   4. Promo-bar dismiss button was 22x30 (fails WCAG 2.5.8 24x24).
   5. Hamburger toggle was 32x42 at 375 (fails WCAG 2.5.5 enhanced 44x44).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   38a. Hero-with-widget two-up layout, mobile-first single column.
   ---------------------------------------------------------------------------- */

.dcnwa-hero-with-widget {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
.dcnwa-hero-with-widget__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lifted);
	aspect-ratio: 16/9;
	margin: 0;
	/* On mobile/tablet, the photo follows the widget visually (which is
	   stacked above by `order: -1` on the widget) so it reads:
	   hero copy -> booking widget -> hero photo. The widget is the
	   conversion surface, so it should be reachable without scrolling
	   past the photo on a small screen. */
}
.dcnwa-hero-with-widget .dcnwa-booking-widget {
	order: -1;
}
@media (min-width: 769px) {
	.dcnwa-hero-with-widget {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}
	.dcnwa-hero-with-widget .dcnwa-booking-widget {
		order: 0;
	}
}

/* ----------------------------------------------------------------------------
   38b. Responsive 4-col / 5-col feature grids, replacing inline overrides.
   ---------------------------------------------------------------------------- */

/* `dcnwa-feature-grid--4col` (pickleball "Who shows up", leagues "How
   leagues work"). 4 columns at desktop, 2 at tablet, 1 at mobile.
   DR-14 (iter-6): tablet now uses the (min-width:769) and (max-width:1023)
   window so it doesn't double-fire with the mobile rule. */
.dcnwa-feature-grid--4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 769px) and (max-width: 1023px) {
	.dcnwa-feature-grid--4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.dcnwa-feature-grid--4col {
		grid-template-columns: 1fr;
	}
}

/* `dcnwa-feature-grid--5col` (events weekly schedule). 5 at desktop, 3 at
   tablet (the regulars row stays scan-friendly without one orphan), 1 at
   mobile. DR-14 (iter-6): tablet bumped from 2 to 3 so the recurring
   schedule reads as a row, not a stack of pairs. */
.dcnwa-feature-grid--5col {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (min-width: 769px) and (max-width: 1023px) {
	.dcnwa-feature-grid--5col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.dcnwa-feature-grid--5col {
		grid-template-columns: 1fr;
	}
}
/* DR-44 (iter-6): drop the headline size inside the 5-col cards. With five
   ~210px-wide cards, the default headline-m wraps unpredictably ("Family /
   lunch" but "League night" stays one line); headline-s scans cleanly. */
.dcnwa-feature-grid--5col .dcnwa-feature-card__title { font-size: var(--font-size-headline-s); }

/* ----------------------------------------------------------------------------
   38c. Contact methods grid (phone / email / address).
   ---------------------------------------------------------------------------- */

.dcnwa-contact-methods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}
@media (max-width: 768px) {
	.dcnwa-contact-methods {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------------------
   38d. Eat-drink bar / espresso grids (drop inline 3-col overrides).
   DR-14 (iter-6): tablet keeps these 3-up so the bar/cocktails/wine triad
   reads as a row.
   ---------------------------------------------------------------------------- */

.dcnwa-bar-grid,
.dcnwa-espresso-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}
.dcnwa-espresso-grid {
	gap: 1.5rem;
}
@media (max-width: 768px) {
	.dcnwa-bar-grid,
	.dcnwa-espresso-grid {
		grid-template-columns: 1fr;
	}
}

/* Backstop: any `.dcnwa-food-grid` without an inline override still gets the
   default responsive ladder (3-up at desktop, 2-up tablet, 1-up mobile)
   from rule 28. No extra work needed. */

/* Bar/wine/cocktail h3 + ul triplet used inside page-food-drink. Promoted
   from inline styles repeated across three columns. DR-03 + DR-04 (iter-6):
   swapped the 1.5rem literal for the new --font-size-display-xs token. */
.dcnwa-bar-grid h3 {
	font-family: var(--font-family-display);
	font-weight: 600;
	font-size: var(--font-size-display-xs);
	margin: 0 0 1rem;
	font-variation-settings: "opsz" 36;
}
.dcnwa-bar-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--color-fg-secondary);
}

/* Contact methods grid: phone / email / address anchor triplet. Promoted
   from inline styles repeated three times in page-contact. */
.dcnwa-contact-methods > a {
	text-decoration: none;
	color: var(--color-fg-primary);
	border-bottom: 1px solid var(--color-border-default);
	padding: 1rem 0;
}
.dcnwa-contact-methods > a > .dcnwa-eyebrow + div {
	font-family: var(--font-family-body);
	font-size: var(--font-size-headline-s);
	font-style: italic;
	margin-top: 0.5rem;
}

/* Click-to-load map embed wrapper + load button. Promoted from inline styles
   in page-contact and page-hours. */
.dcnwa-map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-secondary);
	box-shadow: var(--shadow-soft);
}
.dcnwa-map-embed__load {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg-tinted);
	color: var(--color-fg-primary);
	border: 0;
	cursor: pointer;
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-m);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-map-embed__load:hover {
	background: var(--color-bg-secondary);
}

/* Pickleball + golf-sims booking widget footnote (replaces inline
   margin-top: 0.75rem). */
.dcnwa-booking-widget__footnote { margin-top: 0.75rem; }
/* Modifier: the "meta" subline that appears below the main footnote in the
   hero, pickleball, and golf-sims widgets. iter-3 added the markup without
   a rule, so this gives it a name in CSS too. */
.dcnwa-booking-widget__footnote--meta { margin-top: 0.5rem; opacity: 0.85; }

/* Note line under the membership comparison table (and the pickleball
   pricing table). Replaces inline styles that drifted across patterns. */
.dcnwa-membership-table__note {
	margin-top: 1rem;
	text-align: center;
	font-style: italic;
	color: var(--color-fg-muted);
	font-size: var(--font-size-body-s);
}

/* Wrapper around the apply page's JotForm placeholder, before the iframe
   takes over. Mostly inline-styled but a named rule keeps it greppable. */
.dcnwa-apply__form-placeholder { display: block; }

/* Wrapper around the page-contact "Email us" CTA + footnote pair. */
.dcnwa-contact-cta { margin-top: 2rem; }

/* ----------------------------------------------------------------------------
   38f. Editorial section dividers (DR-17, iter-6).

   Three named divider components. Pre-change every section break shipped
   the same border-top: 1px solid. The brand has a real seal, an eyebrow
   system, and an italic accent system; none of those were deployed as
   dividers. Placement (DR-29) is operator judgment.
   ---------------------------------------------------------------------- */

/* Asterism: three centered dots. Reads as "the next beat is a fresh
   thought," not "the section ended." Good between two soft-band sections
   like food-drink-grid and pergola-module. */
.dcnwa-divider-asterism {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin: clamp(var(--space-9), 5vw, var(--space-12)) auto;
	color: var(--color-fg-muted);
	letter-spacing: 0.6em;
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	line-height: 1;
}
.dcnwa-divider-asterism::before { content: "* * *"; }

/* Seal mark: a small seal/star glyph (CSS-only star, no SVG dependency).
   Good between two information-dense sections. */
.dcnwa-divider-seal {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: clamp(var(--space-9), 5vw, var(--space-12)) auto;
	color: var(--color-fg-accent);
}
.dcnwa-divider-seal::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, var(--color-accent-default) 0 38%, transparent 38%),
		conic-gradient(from 0deg, currentColor 0deg 6deg, transparent 6deg 60deg);
	opacity: 0.78;
}

/* Running head: a vertical numbered chapter mark anchored to the outer
   margin of a section. Apply to a wrapper around a section and pass the
   number as `data-chapter`. */
.dcnwa-running-head {
	position: relative;
}
.dcnwa-running-head::before {
	content: attr(data-chapter);
	position: absolute;
	left: calc(-1 * var(--gutter));
	top: var(--space-9);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--font-family-display);
	font-size: var(--font-size-overline);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--color-fg-muted);
	padding-block: 0.4rem;
	border-inline-start: 1px solid var(--color-border-default);
	padding-inline-start: 0.6rem;
}
@media (max-width: 1023px) {
	.dcnwa-running-head::before { display: none; }
}

/* DR-58 (iter-6): wire one demo selector to each previously dormant status
   token (--color-success / --color-warning / --color-error). Pre-change all
   three were defined and referenced in zero selectors; the form-state
   selectors below give Fluent Forms a styled landing pad once activated. */
.dcnwa-form-error {
	color: var(--color-error);
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-s);
	margin-top: 0.5rem;
}
.dcnwa-form-warning {
	color: var(--color-warning);
	font-family: var(--font-family-body);
	font-style: italic;
	font-size: var(--font-size-body-s);
	margin-top: 0.5rem;
}
.dcnwa-form-success {
	color: var(--color-success);
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: var(--font-size-body-m);
	margin-top: 0.5rem;
}

/* Placeholder cells in pickleball pricing table (replaces three hand-styled
   <em> tags). */
.dcnwa-membership-table .placeholder {
	color: var(--color-fg-muted);
	font-style: italic;
}

/* ----------------------------------------------------------------------------
   38e. Mobile drawer backdrop + scroll lock.
   Ported in iter-5 when dcnwa-motion.css was deleted (OJ-1 path A).
   ---------------------------------------------------------------------------- */

/* Scroll lock on both html and body when the drawer is open. JS toggles
   the class on both for resilience. */
html.is-drawer-open,
body.is-drawer-open {
	overflow: hidden;
	touch-action: none;
}

/* Dimmed backdrop behind the open drawer. Hidden by default; the
   .is-open class on the backdrop element reveals it with a soft fade. */
.dcnwa-mobile-drawer__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 20, 16, 0.55); /* ink-900 at 55% */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 90;
	cursor: pointer;
	transition:
		opacity var(--motion-duration-base, 220ms) var(--motion-ease-standard, ease),
		visibility 0s linear var(--motion-duration-base, 220ms);
}
.dcnwa-mobile-drawer__backdrop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--motion-duration-base, 220ms) var(--motion-ease-standard, ease),
		visibility 0s linear 0s;
}

/* WCAG 2.5.8 + 2.5.5 tap target sizes were consolidated into the original
   .dcnwa-promo-bar__dismiss (section 6) and .dcnwa-nav-toggle (section 8)
   rules to remove a cascade-order surprise. No retrofit block needed here. */

/* ============================================================================
   33. WAVE 1 (2026-07-04): nav dropdown, email capture, events truth
   ============================================================================ */

/* --- Desktop nav dropdown (Play / About) --------------------------------- */
.dcnwa-main-nav__item { position: relative; }
.dcnwa-main-nav__item > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.dcnwa-main-nav__caret { display: inline-flex; transition: transform var(--motion-duration-fast) var(--motion-ease-standard); }
.dcnwa-main-nav__item--has-children:hover .dcnwa-main-nav__caret,
.dcnwa-main-nav__item--has-children:focus-within .dcnwa-main-nav__caret { transform: rotate(180deg); }

.dcnwa-main-nav__submenu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: var(--color-bg-primary, #FEFCF6);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lifted);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
				transform var(--motion-duration-fast) var(--motion-ease-standard),
				visibility 0s linear var(--motion-duration-fast);
	z-index: 60;
}
/* A hover bridge closes the gap between the top link and the panel so the
   pointer can travel down without the submenu flickering shut. */
.dcnwa-main-nav__item--has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.6rem;
}
.dcnwa-main-nav__item--has-children:hover .dcnwa-main-nav__submenu,
.dcnwa-main-nav__item--has-children:focus-within .dcnwa-main-nav__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
				transform var(--motion-duration-fast) var(--motion-ease-standard),
				visibility 0s linear 0s;
}
.dcnwa-main-nav__submenu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm, 6px);
	font-size: var(--font-size-body-s);
	white-space: nowrap;
	color: var(--color-fg-primary);
	text-decoration: none;
	transition: background var(--motion-duration-fast) var(--motion-ease-standard),
				color var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-main-nav__submenu a:hover,
.dcnwa-main-nav__submenu a:focus-visible {
	background: var(--color-bg-tinted, #F1E9D8);
	color: var(--color-fg-accent);
}
@media (prefers-reduced-motion: reduce) {
	.dcnwa-main-nav__submenu { transition: none; }
}

/* --- Email capture (single field) ---------------------------------------- */
.dcnwa-email-capture {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	max-width: 30rem;
}
.dcnwa-email-capture__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 2026-07-17 batch: the input used the page background and a hairline border,
   so it blended into the cream page. Elevated fill + a stronger border + an
   inset seat give the field its own visual weight wherever the capture
   appears (newsletter band, events coming-soon, blog empty state). */
.dcnwa-email-capture__input {
	flex: 1 1 12rem;
	min-width: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	padding: 0.85rem 1.1rem;
	color: var(--color-fg-primary);
	background: var(--color-bg-elevated, #FFFFFF);
	border: 1.5px solid var(--color-fg-muted, #65553F);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 1px 2px rgba(43, 34, 23, 0.06);
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
				box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-email-capture__input::placeholder { color: var(--color-fg-muted); opacity: 0.85; }
.dcnwa-email-capture__input:hover { border-color: var(--color-fg-secondary, #4A3C2A); }
.dcnwa-email-capture__input:focus-visible {
	outline: 0;
	border-color: var(--color-brand-red-500, #C92042);
	box-shadow: var(--shadow-focus-accent, 0 0 0 3px rgba(201, 32, 66, 0.25));
}
.dcnwa-email-capture__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline, 600);
	font-size: 1rem;
	color: #FFFFFF;
	background: var(--color-cta-primary-bg, #C92042);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	transition: background var(--motion-duration-base) var(--motion-ease-standard),
				transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.dcnwa-email-capture__submit:hover { background: var(--color-cta-primary-bg-hover, #A8182F); transform: translateY(-1px); }
.dcnwa-email-capture__submit:active { transform: translateY(0); }
.dcnwa-email-capture__submit:focus-visible { outline: 0; box-shadow: var(--shadow-focus-accent, 0 0 0 3px rgba(201, 32, 66, 0.25)); }
.dcnwa-email-capture__note {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-s);
	font-style: italic;
}
.dcnwa-email-capture__note--ok { color: #2F6B3E; }
.dcnwa-email-capture__note--err { color: var(--color-brand-red-700, #A8182F); }
/* iOS zooms on focus of any sub-16px field; keep the input at 16px on touch. */
@media (pointer: coarse) {
	.dcnwa-email-capture__input { font-size: 16px; }
}

/* --- Events empty state (the designed no-results block) ------------------- */
.dcnwa-events-empty {
	text-align: center;
	padding: clamp(var(--space-8), 6vw, var(--space-12)) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}
.dcnwa-events-empty__title { max-width: 20ch; margin: 0; }
.dcnwa-events-empty__lede {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-l);
	color: var(--color-fg-secondary);
	max-width: 52ch;
	margin: 0 0 var(--space-3);
	line-height: 1.6;
}
.dcnwa-events-empty .dcnwa-email-capture { justify-content: center; }

/* --- Count-aware "Next up" stage: one event should not look broken -------- */
.dcnwa-event-strip:has(> .dcnwa-event-poster:only-child) {
	grid-template-columns: minmax(0, 1fr);
}
.dcnwa-event-strip:has(> .dcnwa-event-poster:only-child) .dcnwa-event-poster {
	max-width: 60rem;
	margin-inline: auto;
}
@media (min-width: 769px) {
	.dcnwa-event-strip:has(> .dcnwa-event-poster:only-child) .dcnwa-event-poster {
		display: grid;
		grid-template-columns: 5fr 7fr;
		align-items: center;
		gap: clamp(var(--space-6), 4vw, var(--space-9));
		padding: var(--space-6);
		max-width: 68rem;
	}
	.dcnwa-event-strip:has(> .dcnwa-event-poster:only-child) .dcnwa-event-poster__media {
		grid-row: 1 / 5;
		aspect-ratio: 4 / 3;
		height: 100%;
	}
	.dcnwa-event-strip:has(> .dcnwa-event-poster:only-child) .dcnwa-event-poster__title {
		font-size: var(--font-size-headline-l, 2rem);
	}
}
/* Two events: a comfortable half-width pair instead of two thirds + a gap. */
.dcnwa-event-strip:has(> .dcnwa-event-poster:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 56rem;
	margin-inline: auto;
}

/* --- Events archive: hero -> list is one unit ---------------------------- */
/* On /events/ the masthead, hero image, and events list read as one editorial
   block, but the default rhythm stacked four spacers below the hero image
   (figure margin-bottom + hero section padding-bottom + the section+section
   adjacency margin + the query section padding-top) into a ~308px void.
   Collapse them to a single comfortable gap. Scoped via :has() to the standalone
   hero that is immediately followed by the events query, so no other page or
   section rhythm is affected. */
.dcnwa-main .dcnwa-section:first-of-type:has(+ .wp-block-query.dcnwa-section) {
	padding-bottom: 0;
}
.dcnwa-main .dcnwa-section:first-of-type:has(+ .wp-block-query.dcnwa-section) .dcnwa-hero-figure:last-child {
	margin-bottom: 0;
}
.dcnwa-main .dcnwa-section:first-of-type + .wp-block-query.dcnwa-section {
	margin-top: 0;
	padding-top: clamp(var(--space-9), 5vw, var(--space-11));
}
/* The empty state carries its own generous vertical padding for when it stands
   alone; once the gap above it is tightened, trim its top so the no-events
   message does not float far below the hero. */
.dcnwa-main .dcnwa-section:first-of-type + .wp-block-query.dcnwa-section .dcnwa-events-empty {
	padding-top: 0;
}

/* --- Single-event meta line ---------------------------------------------- */
.dcnwa-event-single__meta {
	gap: 0.5rem 1.25rem;
	margin: var(--space-4) 0 var(--space-6);
	align-items: baseline;
}
.dcnwa-event-single__date {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline, 600);
	font-size: var(--font-size-headline-s);
	color: var(--color-fg-accent);
	margin: 0;
}
.dcnwa-event-single__time,
.dcnwa-event-single__location {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-muted);
	margin: 0;
}
/* Bound paragraphs render an empty <p> when the meta is blank; hide those. */
.dcnwa-event-single__meta p:empty { display: none; }

/* ============================================================================
   34. WAVE 2 (2026-07-04): art direction
   ============================================================================ */

/* --- Golf hero: dark console band with a brand-blue glow ------------------ */
/* The Trackman photo is 80% black on a cream page; on an ink band it becomes
   the light source and gives blue (otherwise only the hiring band) one big
   customer-facing beat. .surface-ink on the section remaps the booking widget
   to a matching dark console; the fairway screen glows cool. */
.dcnwa-golf-hero {
	position: relative;
	overflow: hidden;
	max-width: var(--container-max-wide);
	margin: clamp(var(--space-6), 4vw, var(--space-9)) auto 0;
	padding-block: clamp(var(--space-9), 6vw, var(--space-12));
	background: #14100C;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-lifted);
}
.dcnwa-golf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(62% 80% at 66% 42%, rgba(30, 87, 154, 0.34), rgba(20, 16, 12, 0) 66%),
		radial-gradient(40% 60% at 20% 90%, rgba(111, 146, 194, 0.12), rgba(20, 16, 12, 0) 70%);
}
.dcnwa-golf-hero > .dcnwa-section__content { position: relative; z-index: 1; }
.dcnwa-golf-hero .dcnwa-section__masthead p { color: var(--color-fg-secondary); }
/* The fairway screen glows against the dark bay. position:relative anchors
   the figcaption to the photo (not the section, which is also positioned). */
.dcnwa-golf-hero__screen {
	position: relative;
	box-shadow: 0 0 0 1px rgba(111, 146, 194, 0.18), 0 24px 70px -18px rgba(30, 87, 154, 0.55);
}
.dcnwa-golf-hero__screen img { object-position: center center; }
/* Caption text is light on the dark photo (fg-inverse flips dark under
   .surface-ink), and sits on a short scrim so it reads over the fairway. */
.dcnwa-golf-hero__screen::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0.7) 100%);
}
.dcnwa-golf-hero__screen .dcnwa-photo-caption { color: #FAF5EC; z-index: 1; }
.dcnwa-golf-hero__screen .dcnwa-photo-caption .where { color: rgba(250, 245, 236, 0.8); }
/* Booking widget becomes a dark console; native date control follows suit. */
.dcnwa-golf-hero .dcnwa-booking-widget { color-scheme: dark; }
.dcnwa-golf-hero .dcnwa-booking-widget__title { color: var(--color-fg-accent-cool); }

/* --- Facility grade: bind the cool warehouse shots into one look ---------- */
/* .dcnwa-facility was emitted with no CSS behind it. A whisper of warmth so
   the mixed-source interior photos read as one set. Never on food (those keep
   the .dcnwa-stock class, no grade). */
img.dcnwa-facility {
	filter: saturate(1.04) contrast(0.99) brightness(1.01);
}

/* --- Editorial split: image + copy row (eat-drink Bar / Coffee) ----------- */
.dcnwa-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(var(--space-6), 4vw, var(--space-9));
	align-items: center;
	margin-top: var(--space-7);
}
.dcnwa-split__media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-card);
}
.dcnwa-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcnwa-split__copy > p { margin: 0 0 var(--space-4); }
.dcnwa-split__copy > p:last-child { margin-bottom: 0; }
@media (min-width: 769px) {
	.dcnwa-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.dcnwa-split--flip .dcnwa-split__media { order: 2; }
}

/* --- Drop cap for the tavern-history editorial paragraph ------------------ */
.dcnwa-dropcap::first-letter {
	float: left;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-display-bold, 700);
	font-size: 3.4em;
	line-height: 0.82;
	padding: 0.05em 0.12em 0 0;
	color: var(--color-fg-accent);
	font-variation-settings: "opsz" 96;
}

/* --- Parties: facts trio -------------------------------------------------- */
.dcnwa-parties-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-top: var(--space-8);
	list-style: none;
	padding: 0;
}
.dcnwa-parties-facts li {
	border-top: 2px solid var(--color-fg-accent);
	padding-top: var(--space-4);
}
.dcnwa-parties-facts strong {
	display: block;
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-headline, 600);
	font-size: var(--font-size-headline-s);
	color: var(--color-fg-primary);
	margin-bottom: 0.2rem;
}
.dcnwa-parties-facts span {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-m);
	color: var(--color-fg-secondary);
}
@media (min-width: 769px) {
	.dcnwa-parties-facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}

/* --- About: sister-gym split + local-pride photographic band -------------- */
.dcnwa-sister-split { align-items: center; }
.dcnwa-local-pride--framed {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-2xl);
	max-width: var(--container-max-wide);
	margin-inline: auto;
	padding: clamp(var(--space-11), 9vw, var(--space-14)) var(--gutter);
	color: var(--color-pergola-band-fg);
	isolation: isolate;
}
.dcnwa-local-pride--framed .dcnwa-local-pride__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.dcnwa-local-pride--framed .dcnwa-local-pride__bg img { width: 100%; height: 100%; object-fit: cover; }
.dcnwa-local-pride--framed::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(20, 16, 12, 0.62), rgba(20, 16, 12, 0.78));
}
.dcnwa-local-pride--framed p { color: var(--color-pergola-band-fg); }
.dcnwa-local-pride--framed p:last-child { color: rgba(250, 245, 236, 0.72); }

/* ============================================================================
   35b. WAVE 3 (2026-07-04): tier color-coding + numerals
   ============================================================================ */

/* Tier identity: the two paid pickleball tiers get a colored top rule + price
   so the six-tier page stops reading as identical card rows. Gold spends the
   warm gold token; Platinum takes brand-blue-700. */
.dcnwa-membership-table thead th.tier { border-top: 3px solid transparent; }
.dcnwa-membership-table thead th.tier--gold { border-top-color: #C68A0E; }
.dcnwa-membership-table thead th.tier--platinum { border-top-color: var(--color-brand-blue-700); }
.dcnwa-membership-table thead th.tier--gold .price { color: #9A6B0B; }
.dcnwa-membership-table thead th.tier--platinum .price { color: var(--color-brand-blue-700); }
/* Golf sim tiers reuse the same accent system: green, blue, gold escalation. */
.dcnwa-membership-table thead th.tier--birdie { border-top-color: #2F6B3E; }
.dcnwa-membership-table thead th.tier--eagle { border-top-color: var(--color-brand-blue-700); }
.dcnwa-membership-table thead th.tier--vip { border-top-color: #C68A0E; }
.dcnwa-membership-table thead th.tier--birdie .price { color: #2F6B3E; }
.dcnwa-membership-table thead th.tier--eagle .price { color: var(--color-brand-blue-700); }
.dcnwa-membership-table thead th.tier--vip .price { color: #9A6B0B; }

/* Price figures line up: tabular lining numerals in the comparison + pricing
   tables so the money columns align on the decimal. */
.dcnwa-membership-table td,
.dcnwa-membership-table .price {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Matching tier accents on the "what you actually get" cards (memberships). */
.dcnwa-membership-card--gold { border-top: 3px solid #C68A0E; }
.dcnwa-membership-card--platinum { border-top: 3px solid var(--color-brand-blue-700); }
.dcnwa-membership-card--gold .dcnwa-feature-card__title em { color: #9A6B0B; }
.dcnwa-membership-card--platinum .dcnwa-feature-card__title em { color: var(--color-brand-blue-700); }

/* ============================================================================
   36b. WAVE 4 (2026-07-04): motion + mobile ergonomics
   ============================================================================ */

/* --- Scroll-reveal entrances (progressive: hidden state only under
       html.js-inview, so no-JS shows everything) ------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.js-inview .dcnwa-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--motion-duration-slow) var(--motion-ease-decel),
					transform var(--motion-duration-slow) var(--motion-ease-decel);
	}
	.js-inview .dcnwa-reveal.is-inview {
		opacity: 1;
		transform: none;
	}
	/* Gentle stagger for siblings inside a card row. */
	.js-inview .dcnwa-reveal:nth-child(2) { transition-delay: var(--motion-duration-stagger-step); }
	.js-inview .dcnwa-reveal:nth-child(3) { transition-delay: calc(var(--motion-duration-stagger-step) * 2); }
	.js-inview .dcnwa-reveal:nth-child(4) { transition-delay: calc(var(--motion-duration-stagger-step) * 3); }
	.js-inview .dcnwa-reveal:nth-child(5) { transition-delay: calc(var(--motion-duration-stagger-step) * 4); }
}

/* --- Cross-document view transition: a soft fade between pages ------------ */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}

/* --- Day-arc: fade the right edge when the timeline can scroll ------------ */
.dcnwa-day-arc {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
	padding-inline-end: var(--space-8);
}
@media (max-width: 768px) {
	/* Stacked column on mobile, so no horizontal fade needed. */
	.dcnwa-day-arc { -webkit-mask-image: none; mask-image: none; padding-inline-end: 0; }
}

/* --- Named-spaces: horizontal snap carousel on mobile (cuts the tall
       3-card stack that dominated the phone scroll) --------------------- */
@media (max-width: 768px) {
	.dcnwa-named-spaces__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--space-5);
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		/* Without scroll-padding, snap-align: start parks card 1 at the
		   scrollport edge PAST the inline padding, so the first card sat flush
		   at x=0 while every other section kept the gutter. */
		scroll-padding-inline: var(--gutter);
		padding-bottom: var(--space-3);
		scrollbar-width: none;
	}
	.dcnwa-named-spaces__grid::-webkit-scrollbar { display: none; }
	.dcnwa-named-spaces__grid > .dcnwa-named-space {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}
}

/* --- Mobile drawer: 44px minimum tap rows (metrics showed 30px) ----------- */
@media (max-width: 768px) {
	.dcnwa-mobile-drawer__list a,
	.dcnwa-mobile-drawer__sublist a,
	.dcnwa-mobile-drawer__utility a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ============================================================================
   37b. WAVE 5 (2026-07-04): reflow + text robustness (WCAG 1.4.10)
   ============================================================================ */

/* The closed off-canvas drawer sits translated off the right edge; its
   intrinsic width was pushing document scrollWidth past the viewport
   (measured +10px at 320, +24px on /apply, worse at 280). overflow-x: clip
   neutralizes it WITHOUT the position:sticky breakage that overflow:hidden
   would cause on the sticky header. */
html { overflow-x: clip; }

/* Long owner-entered strings (emails, URLs, compound words) must not breach
   the viewport on narrow screens. There was zero overflow-wrap in the whole
   sheet before this. */
.dcnwa-footer__col,
.dcnwa-contact-methods,
.dcnwa-split__copy,
.dcnwa-email-capture,
.dcnwa-main p,
.dcnwa-menu-list,
.dcnwa-booking-widget__footnote {
	overflow-wrap: anywhere;
}

/* Below ~360px let CTA pills wrap their label instead of forcing a scroll. */
@media (max-width: 360px) {
	.dcnwa-cta-pill { white-space: normal; text-align: center; }
}

/* Neutral placeholder for a slug with no asset on disk (dcnwa_picture guard). */
.dcnwa-photo-missing {
	width: 100%;
	height: 100%;
	min-height: 10rem;
	aspect-ratio: 4 / 3;
	border-radius: inherit;
	background:
		linear-gradient(0deg, rgba(26, 20, 16, 0.03), rgba(26, 20, 16, 0.03)),
		repeating-linear-gradient(45deg, var(--color-bg-secondary) 0 14px, var(--color-cream-200, #F1E9D8) 14px 28px);
}

/* ============================================================================
   2026-07-17 mobile frame-fit pass.
   Fixes found by the 320/390px audit: promo-bar layout collapse, zero-width
   header logo, table columns hidden past the card edge with no cue, crushed
   rate columns, the hours table unreadable sideways, snap-carousel gutter,
   photo-caption legibility, and emails breaking mid-address.
   ========================================================================= */

/* The brand link was flex-squeezed to zero width at 320px (img max-width:100%
   of a shrunk flex item). Never shrink the logo; scale it down instead. */
.dcnwa-brand { flex-shrink: 0; }
@media (max-width: 420px) {
	.dcnwa-main-nav { gap: var(--space-4); }
	.dcnwa-main-nav .dcnwa-brand__logo { height: 40px; }
}

/* Promo bar on mobile: text and dismiss in a two-column grid (dismiss pinned
   top right), and the Apply pill drops to its own line instead of sitting
   44px tall inside wrapped 12px overline text. */
@media (max-width: 768px) {
	.dcnwa-promo-bar__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}
	.dcnwa-promo-bar__dismiss { align-self: start; }
	.dcnwa-promo-bar__cta {
		display: flex;
		width: fit-content;
		margin-left: 0;
		margin-top: 0.35em;
		padding-inline: 0.55em;
	}
	/* The generic .dcnwa-promo-bar a underline (0,1,1) curved around the
	   pill's radius and read as a detached outline under the label; match
	   its specificity to actually clear it. */
	.dcnwa-promo-bar a.dcnwa-promo-bar__cta { border-bottom: 0; }
}

/* Photo captions sit over unpredictable crops (e.g. the bright TrackMan
   screen); a shadow keeps them legible regardless of what lands behind. */
.dcnwa-photo-caption { text-shadow: 0 1px 2px rgba(20, 16, 10, 0.55), 0 0 12px rgba(20, 16, 10, 0.35); }

/* Email addresses must never break mid-token (.dcnwa-main p sets
   overflow-wrap: anywhere, which split leagues@... across lines mid-TLD).
   The address wraps to its own line as one unit instead. */
.dcnwa-main a[href^="mailto:"] { overflow-wrap: normal; word-break: keep-all; }

/* --- Tables at phone widths ---------------------------------------------- */

/* Denser cells sitewide on mobile; the note keeps card-edge breathing room. */
@media (max-width: 768px) {
	.dcnwa-membership-table th,
	.dcnwa-membership-table td { padding: var(--space-3) var(--space-4); font-size: var(--font-size-body-s); }
	.dcnwa-membership-table__note { padding-inline: var(--space-4); }
}

/* Swipe hint for the comparison tables, mobile only. */
.dcnwa-table-swipe-hint { display: none; }
@media (max-width: 768px) {
	.dcnwa-table-swipe-hint {
		display: block;
		margin: 0 0 var(--space-2);
		font-family: var(--font-family-body);
		font-style: italic;
		font-size: var(--font-size-body-s);
		color: var(--color-fg-muted);
	}
}

/* Comparison tables (memberships): keep sideways scroll but make it read as
   scrollable, not broken. Sticky row labels hold context, tier columns get a
   min-width so the next column peeks cleanly instead of slicing mid-character,
   and a right-edge shadow (background-attachment: local trick) appears only
   while more columns remain off-screen. */
@media (max-width: 768px) {
	.dcnwa-membership-table--compare {
		background-image:
			linear-gradient(to left, var(--color-card-bg) 35%, rgba(254, 252, 246, 0)),
			radial-gradient(farthest-side at 100% 50%, rgba(43, 34, 23, 0.28), transparent);
		background-position: right center, right center;
		background-size: 44px 100%, 16px 100%;
		background-repeat: no-repeat, no-repeat;
		background-attachment: local, scroll;
		background-color: var(--color-card-bg);
	}
	.dcnwa-membership-table--compare thead th:first-child,
	.dcnwa-membership-table--compare tbody th[scope="row"] {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--color-card-bg);
		box-shadow: 8px 0 8px -8px rgba(43, 34, 23, 0.18);
	}
	.dcnwa-membership-table--compare th,
	.dcnwa-membership-table--compare td { min-width: 8.5rem; }
	.dcnwa-membership-table--compare thead th:first-child,
	.dcnwa-membership-table--compare tbody th[scope="row"] { min-width: 6.5rem; max-width: 7.5rem; }
}

/* Two-column rate tables (pickleball and golf hourly): on phones the price
   column was crushed to one word per line. Prices never wrap; the price
   column shrinks to fit and the When column takes the remaining width.
   Desktop keeps its approved balanced columns. */
@media (max-width: 768px) {
	.dcnwa-membership-table--rates td { white-space: nowrap; width: 1%; }
}

/* Hours table: sideways scrolling a schedule is hostile; below 640px each day
   stacks as a labeled block instead. */
@media (max-width: 640px) {
	.dcnwa-membership-table--hours table,
	.dcnwa-membership-table--hours tbody { display: block; }
	.dcnwa-membership-table--hours thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.dcnwa-membership-table--hours tr { display: block; padding-block: var(--space-3) var(--space-4); }
	.dcnwa-membership-table--hours tr + tr { border-top: 1px solid var(--color-border-muted); }
	.dcnwa-membership-table--hours th[scope="row"] {
		display: block;
		border-bottom: 0;
		padding: 0 var(--space-4) 0.3rem;
		font-family: var(--font-family-display);
	}
	.dcnwa-membership-table--hours td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-4);
		border-bottom: 0;
		padding: 0.15rem var(--space-4);
		/* Values that wrap align right as a block instead of centering raggedly. */
		text-align: right;
	}
	.dcnwa-membership-table--hours td::before {
		content: attr(data-label);
		color: var(--color-fg-muted);
		font-size: var(--font-size-body-s);
	}
}

/* Contact page: the inbox-routing card's 2rem padding left the email links
   touching the card edge at 320px (padding moved out of the inline style). */
.dcnwa-contact-inboxes { padding: 2rem; }
@media (max-width: 420px) {
	.dcnwa-contact-inboxes { padding: 1.25rem; }
	/* The 16/9 map placeholder is only ~150px tall at phone width, cramming
	   the address and the tap-to-load control; give it more height. */
	.dcnwa-map-embed { aspect-ratio: 4 / 3; }
	.dcnwa-map-embed__load { padding: var(--space-4); }
}

/* ============================================================================
   2026-07-17 desktop pass. Verified against live DOM first: the giant voids
   in review screenshots were unloaded lazy images (real inter-section gaps
   measure a uniform ~190-206px, the intended rhythm). The real fixes below:
   placeholder boxes sized for their content, sparse-page tightening via the
   existing modifiers, and small shared-component polish.
   ========================================================================= */

/* Click-to-load map: at desktop the 16/9 box is ~680px of near-empty blush
   holding two lines. Cap the PLACEHOLDER state only; once the iframe replaces
   the button (replaceChildren in dcnwa.js), :has stops matching and the box
   returns to 16/9 for the real map. */
@media (min-width: 1024px) {
	.dcnwa-map-embed:has(> .dcnwa-map-embed__load) {
		aspect-ratio: auto;
		height: clamp(320px, 34vh, 420px);
	}
	.dcnwa-hero-figure--placeholder {
		aspect-ratio: auto;
		height: clamp(280px, 30vh, 360px);
	}
}
/* The button lays out its address span and label as flex-row anonymous items,
   which read as one run-on string; stack them. */
.dcnwa-map-embed__load {
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
}

/* Newsletter capture: the submit rendered shorter than the input beside it. */
.dcnwa-email-capture { align-items: stretch; }
.dcnwa-email-capture__input,
.dcnwa-email-capture__submit { min-height: 48px; }