/* ==========================================================================
   Designing Results — Brand Typography
   Self-hosted fonts per Brand Style Guide Section 3.
   Font files live in: user/themes/drquark2/fonts/

   RESTORED July 29, 2026 — the Quark 2 theme update overwrote this file
   back to its stock 6-line stub. This block is restored from Lyn's saved
   July 9 copy (custom_2.css). The font files themselves were untouched by
   the update (they lived in the theme's /fonts folder, not the theme's own
   package), so this should look exactly as it did originally.

   MOVED July 29, 2026 — this whole file, the footer templates, the brand
   fonts, and the two logo SVGs were moved out of user/themes/quark2 into
   this new child theme, user/themes/drquark2, specifically so a future
   Quark 2 update can never overwrite them again. See drquark2.yaml for how
   the inheritance is wired up.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces Italic';
  src: url('../fonts/FrauncesItalicRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces SemiBold';
  src: url('../fonts/FrauncesSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('../fonts/RobotoSlabBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Site-wide defaults — maps our brand fonts onto Quark 2 / Blades CSS's
   own font variables, so body copy, headings, and code/data text pick up
   the brand type system automatically, everywhere on the site.

   UPDATED July 29, 2026 — after restoring this file, the whole site was
   rendering in Quark 2's own stock fonts (Cal Sans/Inter) again instead of
   ours, even though this rule was in place. Root cause: the updated
   theme.css now defines these same font variables on
   ":root, :root[data-theme='light']" and ":root[data-theme='dark']"
   separately (it didn't do this scoping before, as far as I can tell —
   this looks like a change that came in with the theme update itself, not
   something we lost). A plain ":root" selector has lower specificity than
   ":root[data-theme='light']", so theme.css was winning regardless of load
   order. Matching the same selector list here so ours wins in both light
   and dark mode.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-font-family-sans-serif: 'Source Sans 3', system-ui, sans-serif;
  --pico-font-family-display: 'Fraunces SemiBold', 'Fraunces', Georgia, serif;
  --pico-font-family-monospace: 'IBM Plex Mono', 'SFMono-Regular', monospace;
}

/* Body copy: Charcoal on Soft Chalk, per style guide (softer than pure
   black for easier long-form reading). Confirm --q2-color-text is the
   correct variable name for your build — see note below. */
body {
  color: #3A3A3A;
}

/* --------------------------------------------------------------------------
   Utility classes for the specific brand type roles that go beyond simple
   body/heading defaults (hero headline, hero sub-phrase, status readout).
   Apply these directly in page content or templates as we build out the
   homepage and section pages in Phase 4.
   -------------------------------------------------------------------------- */
.dr-hero-headline {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  color: #1A1A1A;
}

.dr-hero-subphrase {
  font-family: 'Fraunces Italic', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: #C4922E !important;
}

.dr-status-readout {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3A3A3A;
  background: #E8E4DA;
  padding: 0.15em 0.5em;
  border-radius: 4px;
}

/* ==========================================================================
   RECONSTRUCTED July 29, 2026 — footer styling only.

   The theme update also reverted templates/partials/footer.html.twig to
   Grav's stock footer, which we've rebuilt to render the custom 3-column
   /footer page again (see that file, and modular/footer-column.html.twig).
   This CSS was NOT in Lyn's July 9 file — it was added in a later working
   session (July 17) and wasn't saved anywhere as standalone code, so this
   block is rebuilt from the project log's description rather than restored
   byte-for-byte.

   UPDATED July 29, 2026 — first pass of this reconstruction rendered with
   the columns stacked instead of side-by-side and washed-out text. Checked
   the old live site (L:\laragon\www\drcom) for how it solved the identical
   problem on the previous theme generation: it fights Quark's own base
   #footer styles (theme.css sets its own background/color/text-align on
   #footer) with !important on every rule, not just links, plus an inline
   style on the <footer> tag itself as a backstop (see footer.html.twig).
   Rewritten below the same way. Please check the live footer again after
   this — flag anything that still doesn't match (colors, column widths,
   logo size/spacing) so we can keep adjusting.
   ========================================================================== */

#footer {
  text-align: left !important;
}

#footer p,
#footer li {
  color: #F4F3EF !important;
}

#footer a {
  color: #F4F3EF !important;
  text-decoration: none;
}

#footer a:hover,
#footer a:focus {
  color: #C4922E !important;
  text-decoration: underline;
}

.dr-footer-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2.5rem !important;
  text-align: left !important;
}

@media (min-width: 720px) {
  .dr-footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.dr-footer-logo img {
  max-width: 220px;
  height: auto;
  margin-block-end: 1rem;
}

/* --------------------------------------------------------------------------
   About page portrait — RECONSTRUCTED July 29, 2026.

   Targets the image by its alt text ("Lyn Borchert"), per Lyn's stated
   preference for styling Markdown-native images via a distinguishing alt
   attribute rather than wrapping them in a styled <div>.

   The photo itself (Lyn_2019_framed_web_smaller.webp) is already a fully
   composed soft-vignette portrait, faded to black on all sides — the
   "framed" look is baked into the image, not something to add in CSS. It's
   also a tall portrait crop. Un-sized, it was rendering at nearly the full
   text-column width, which at its natural aspect ratio made it several
   screens tall.

   UPDATED July 29, 2026 — first pass centered it above the text at 324px.
   Lyn confirmed the font/size direction was right but wants it floated to
   the right of the text (paragraphs wrapping to its left), a bit smaller.
   Floating it right; dropped to 260px (a guess at "a bit smaller" — easy
   to tune further). Text will wrap around it down the left side.
   -------------------------------------------------------------------------- */
img[alt="Lyn Borchert"] {
  float: right;
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 0 1.5rem 1.5rem;
}

/* --------------------------------------------------------------------------
   KNOWN GAPS — not reconstructed, flagged rather than guessed:

   1. Hero section top-padding fix (July 17 session): a `.hero.section`
      override with higher specificity than a sitewide `.section` padding
      tightening rule, restoring extra top padding on the homepage hero.
      Neither the original tightening rule nor the override survived, and
      guessing exact padding values risks getting it visibly wrong. Please
      check the homepage hero after this restore — if it looks too
      cramped/tall at the top compared to before, tell me and we'll re-tune
      it live against the actual rendered result.

   -------------------------------------------------------------------------- */

/* ==========================================================================
   Features tile grid ("Why Work With Me" and any other modular/features
   section) — ADDED July 29, 2026.

   Confirmed root cause of the 4-across layout: Quark 2's stock rule is
   `.modular-features .columns { grid-template-columns: repeat(auto-fit,
   minmax(220px, 1fr)); }` (theme.css) — an auto-fit grid that packs in as
   many 220px-minimum tiles as the row's width allows, which is why it
   floated between 3 and 4 across depending on viewport width. The
   admin's Features "standard vs. small" class toggle isn't wired to any
   column-count CSS in this theme at all (checked theme.css directly), so
   that had no effect — not a mistake on Lyn's end.

   Locking to a fixed column count instead, same responsive pattern the
   theme's own blog grid uses: 1 col on mobile, 2 on tablet, 3 from 900px
   up. With 6 tiles, that gives a clean 2-row-by-3 layout at desktop
   widths.
   -------------------------------------------------------------------------- */
.modular-features .columns {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 560px) {
  .modular-features .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  .modular-features .columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   Section-title accent bar — ADDED July 29, 2026.

   Quark 2's stock theme.css puts a small 28px accent-bar dash above every
   h2 by default (`h2::before` in theme.css), and only suppresses it in
   three specific cases: an h2 directly after an h1, `.hero h2`, and
   `.text-center h2`. None of those cover our own modular section titles
   (the "## Heading" at the top of each modular/text and modular/features
   section on the homepage — Pitch, How This Works, Why Work With Me,
   Get Started/CTA, etc.), so the dash was showing above all of them.

   Lyn recalled this being removed with custom CSS before, and this is
   almost certainly the same fix from the lost July 16/17 session work —
   extending the theme's own existing exclusion pattern to our two modular
   section types.

   WIDENED September 3, 2026 — the rule below was only ever scoped to
   .modular-text and .modular-features, i.e. the homepage's modular
   sections. That was fine while the homepage was the only page with h2s,
   but the moment a NON-modular page was built (the Contact page, which
   uses the Form plugin's form.html.twig template), the stock dash came
   straight back above every ## heading on it. Lyn caught it on the first
   screenshot. "Site-wide" was never actually site-wide.

   Now suppressed globally instead of per-section-type. The theme's own
   three exclusions (h1 + h2 adjacency, .hero h2, .text-center h2) become
   redundant but harmless. If a dash above an h2 is ever wanted somewhere,
   re-enable it for that one case rather than narrowing this again.
   -------------------------------------------------------------------------- */
h2::before {
  display: none !important;
}

/* ==========================================================================
   Pitch section photo — ADDED July 29, 2026.

   Root cause: Quark 2's stock rule `.modular-text img { width: 100%; height:
   auto; }` (theme.css) stretches any modular/text image to fill its entire
   grid column — half the page width at desktop, which is why Lyn's photo
   on the "About the Approach" (Pitch) section was rendering nearly full-
   height/full-column-width.

   Used the theme's own per-page "class" field (page frontmatter on
   user/pages/01.home/02._pitch/default.md — the same field Lyn already
   uses for the Features "standard/small" toggle) rather than a hidden
   selector, so it's visible/editable from the page settings in Admin too.

   320px is a judgment call (Lyn asked me to pick, not a fixed spec) — in
   the same modest scale as the About page portrait (324px there). Easy to
   size up/down.
   -------------------------------------------------------------------------- */
.dr-photo-small img {
  max-width: 260px;
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* ==========================================================================
   Homepage section spacing — ADDED July 29, 2026.

   Stock theme.css gives every `.section` a fairly generous vertical rhythm:
   `padding-block: clamp(3rem, 8vw, 6rem)`. Quark 2 already ships a tighter
   alternative for this, `.section-tight` (clamp(2rem, 5vw, 3.5rem) — used
   on our footer already), so this reuses that same, already-proven-in-theme
   spacing rather than inventing new numbers.

   Scoped to just the homepage's modular content sections (Pitch, How This
   Works, Why Work With Me, Examples, Examples/Pricing, Get Started/CTA) —
   deliberately leaves the header, footer, and hero alone, since those
   weren't part of what looked too spaced-out and the hero specifically has
   its own larger padding for visual reasons (see the "known gaps" note
   earlier in this file re: the hero's top padding).
   -------------------------------------------------------------------------- */
.modular-text.section,
.modular-features.section {
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
}

/* ==========================================================================
   Hero top padding — ADDED July 29, 2026.

   The hero's own box wasn't touched by the section-tightening rule above
   (deliberately excluded), but tightening the Pitch section right below it
   shrank the gap between them, which reads as the hero itself feeling
   shorter/more cramped at the top by contrast.

   Stock hero padding (theme.css `.hero`) is `padding-block: clamp(5rem,
   12vw, 9rem)` for both top and bottom.

   UPDATED July 29, 2026 — at typical desktop widths the preferred (vw)
   value exceeds the max, so the max bound is what's actually rendered.
   Lyn measured "about 3/4 inch more" against a screenshot at that clamped
   value (11rem = 176px), so added 4.5rem (0.75in at 96px/in, 16px root)
   to both the min and max bounds, leaving the fluid (vw) middle term
   alone: 7rem/11rem -> 11.5rem/15.5rem.
   -------------------------------------------------------------------------- */
.hero.section {
  padding-block-start: clamp(11.5rem, 14vw, 15.5rem) !important;
}

/* ==========================================================================
   Header logo — ADDED July 29, 2026.

   Two separate stock Quark 2 rules were fighting our two-line logo lockup:

   1. `.navbar-brand svg { height: 28px; width: auto; }` — sized for a
      simple single-line wordmark/icon. Our logo's viewBox is 640x260 (two
      stacked lines, "Designing" over "RESULTS"), so squeezing the whole
      thing to 28px tall left each line just a few pixels high — reads as
      an unreadable smudge, which matches what Lyn described.

   2. `.navbar-brand svg, .navbar-brand svg * { fill: var(--q2-text-strong);
      }` — forces every shape inside the inlined SVG to one flat color.
      That beats the SVG's own fill="..." attributes (CSS always overrides
      SVG presentation attributes), which is why both "Designing" and
      "RESULTS" were rendering as the same washed-out tone in dark mode
      instead of gold + black/white.

   Fix: size the logo up to something actually readable, and reinstate the
   two-tone brand colors using classes added directly to the SVG's <text>
   elements (dr-logo-accent / dr-logo-strong — see
   images/logo/DesigningResults_Logo.svg). "RESULTS" is deliberately left
   on the adaptive --q2-text-strong variable (rather than hardcoded Ink
   Black) so it stays legible against the header in both light and dark
   mode instead of needing a separate dark-mode logo file. Gold reads fine
   on either background, so that one stays fixed.

   46px is a judgment call on size — easy to size up/down further.
   -------------------------------------------------------------------------- */
.navbar-brand svg {
  height: 46px !important;
  width: auto !important;
}

.navbar-brand svg .dr-logo-accent {
  fill: #C4922E !important;
}

.navbar-brand svg .dr-logo-strong {
  fill: var(--q2-text-strong) !important;
}

/* ==========================================================================
   Pricing page — plan tiles + expandable detail — ADDED August 6, 2026.

   Built directly as HTML in the Pricing page content (03.pricing/default.md)
   rather than a new Twig modular template, per Lyn's call: this only shows
   up on one or two pages (Pricing now, Answers later), so a reusable
   template wasn't worth the extra files to track down months from now.
   Structure lives in the page; only the visual styling lives here, using
   the same dr- prefix convention as the hero/footer utility classes above.

   Uses the theme's own --q2-* surface/border/shadow/radius variables
   instead of hardcoded light-mode colors, so the cards and accordion
   automatically look correct in both light and dark mode with no separate
   dark-theme override block needed — same approach as the logo fix above.

   The accordion itself is plain HTML <details>/<summary> — no JavaScript.

   Three plan tiles: Results Level I, Results Level II, and White Glove.
   White Glove is deliberately NOT "Results Level III" — see the August
   2026 pricing conversation — the different name signals it's a different
   kind of relationship (limited clients, hands-on), not just "more of
   the same."
   -------------------------------------------------------------------------- */
/* UPDATED August 6, 2026 — switched from a 3-across card grid to full-width
   stacked rows. With three cards side by side, an open accordion only had
   about a third of the page to work with, which cramped the longer plan
   lists into one tall narrow column (Lyn: "don't like how horizontally
   constrained the open accordions are"). Full-width rows give each plan
   the whole page width — see the accordion ul column rule further down,
   which uses that extra width to lay the list into two columns instead
   of one long one. */
.dr-pricing-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block: 2rem;
}

.dr-price-card {
  background: var(--q2-bg-elev);
  border: 1px solid var(--q2-border-ring);
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  padding: 1.75rem 2rem;
}

/* Progressive tier treatment — ADDED August 6, 2026, UPDATED same day
   (twice). Level I stays plain (the clean, no-frills baseline). Level II
   is a neutral gray step up — first pass used a light gold tint, but a
   large-area fill in the accent color read differently than the same
   color used sparingly as an accent, and fought the "growing intensity"
   read Lyn was going for. Second pass used the theme's own --q2-bg-muted
   variable, which works well in dark mode but is barely distinguishable
   from the page's own light-mode canvas color (both very pale), so the
   "step" disappeared in light mode. Now: an explicit firmer gray for
   light mode, --q2-bg-muted kept for dark mode since that one already
   reads correctly there. White Glove reuses the same dark Ink Black
   gradient as the page banner up top, so the boldest tier echoes the
   page's own opening statement rather than just being "darker." Text and
   the accordion's own colors are overridden inside it since the
   light-mode theme variables they normally use would clash against a
   dark card. */
.dr-price-card--level2 {
  background: #E8E5DD;
}

:root[data-theme="dark"] .dr-price-card--level2 {
  background: var(--q2-bg-muted);
}

.dr-price-card--featured {
  background: linear-gradient(135deg, #1A1A1A 0%, #2A2118 100%);
  border: 2px solid #C4922E;
}

.dr-price-card--featured .dr-price-name,
.dr-price-card--featured .dr-price-amount {
  color: #F4F3EF;
}

.dr-price-card--featured .dr-price-tagline,
.dr-price-card--featured .dr-price-period {
  color: #D8CFC0;
}

.dr-price-card--featured .dr-price-note {
  color: #C9C0AF;
  border-block-start-color: rgba(244, 243, 239, 0.15);
}

.dr-price-card--featured .dr-accordion summary {
  background: rgba(244, 243, 239, 0.08);
  border-color: rgba(244, 243, 239, 0.2);
  color: #F4F3EF;
}

.dr-price-card--featured .dr-accordion summary:hover,
.dr-price-card--featured .dr-accordion summary:focus-visible {
  background: rgba(244, 243, 239, 0.14);
  border-color: #C4922E;
}

.dr-price-card--featured .dr-accordion[open] summary {
  border-color: #C4922E;
}

.dr-price-card--featured .dr-accordion ul {
  background: rgba(244, 243, 239, 0.05);
  border-color: rgba(244, 243, 239, 0.2);
}

.dr-price-card--featured .dr-accordion li {
  color: #EDEAE3;
}

/* Name / price / tagline sit in one horizontal row now that each card
   spans the full page width — wraps to multiple lines on narrow screens. */
.dr-price-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  margin-block-end: 1rem;
}

.dr-price-badge {
  align-self: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #C4922E;
  margin: 0;
}

.dr-price-name {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  color: var(--q2-text-strong);
  margin: 0;
}

.dr-price-amount {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--q2-text-strong);
  margin: 0;
}

.dr-price-period {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--q2-text-muted);
}

.dr-price-tagline {
  font-family: 'Fraunces Italic', Georgia, serif;
  font-style: italic;
  color: var(--q2-text-muted);
  margin: 0;
  flex: 1 1 16rem;
}

.dr-price-note {
  font-size: 0.9rem;
  color: var(--q2-text-muted);
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--q2-divider);
}

.dr-accordion {
  margin-block-start: 0;
}

/* UPDATED August 6, 2026 — first pass styled the summary as plain text with
   a hover color change, which read as inert body copy rather than something
   clickable (Lyn: "can't even tell they are a link until you hover"). Redone
   as an obvious pill-shaped control: filled background, border, and a solid
   gold circular +/- badge that's visible without hovering at all. */
.dr-accordion summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  color: var(--q2-text-strong);
  list-style: none;
  padding: 0.85rem 1rem;
  background: var(--q2-bg-muted);
  border: 1px solid var(--q2-border-ring);
  border-radius: var(--q2-radius);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dr-accordion summary::-webkit-details-marker {
  display: none;
}

.dr-accordion summary::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #C4922E;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.dr-accordion[open] summary::after {
  content: "\2212";
}

.dr-accordion summary:hover,
.dr-accordion summary:focus-visible {
  background: var(--q2-bg);
  border-color: #C4922E;
}

.dr-accordion[open] summary {
  border-color: #C4922E;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.dr-accordion ul {
  margin: 0;
  padding: 1rem 1.25rem 1rem 2rem;
  background: var(--q2-bg-muted);
  border: 1px solid var(--q2-border-ring);
  border-block-start: none;
  border-radius: 0 0 var(--q2-radius) var(--q2-radius);
}

/* Full-width cards give enough room to lay the longer plan lists into two
   columns instead of one long narrow one, once there's space for it. */
@media (min-width: 640px) {
  .dr-accordion ul {
    column-count: 2;
    column-gap: 2rem;
  }
}

.dr-accordion li {
  margin-block-end: 0.5rem;
  color: var(--q2-text);
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   Pricing page banner — ADDED August 6, 2026.

   A contained (not full-bleed) color panel using the same Ink Black /
   Antique Gold system as the homepage hero, but typography-only rather
   than a photo — a stock image would fight the authentic, non-templated
   feel built everywhere else on the site, and a pricing page reads better
   when attention stays on the numbers. Reuses .dr-status-readout as-is
   (light pill / dark text) since it already pops cleanly against a black
   background without any override needed.
   -------------------------------------------------------------------------- */
/* UPDATED August 6, 2026 — the stock theme wraps every page's content in
   #body-wrapper.section, which carries a generous clamp(3rem, 8vw, 6rem)
   top padding site-wide (theme.css). That's invisible as plain breathing
   room above ordinary page text, but reads as an odd dead gap above a
   hard-edged black box (Lyn: "top background needs to move up to just
   under the menu bar"). Scoped to only pages containing this banner via
   :has(), so no other page's spacing changes.

   EXTENDED September 3, 2026 — same problem, same session as the h2::before
   lesson: the Contact page's new intro panel is also a hard-edged box, so
   the gap read as dead space there too (Lyn measured ~5/8", wanted 1–2/8").
   Adding .dr-contact-intro to the same rule rather than writing a second
   one. NOTE: this is now the second page needing it, and the pattern will
   repeat on any future page that opens with a panel rather than plain
   text — worth deciding whether to just tighten this site-wide instead of
   listing pages one at a time. Flagged with Lyn, not decided. */
#body-wrapper:has(.dr-pricing-banner),
#body-wrapper:has(.dr-contact-intro) {
  padding-block-start: 1.5rem;
}

.dr-pricing-banner {
  background: #1A1A1A;
  border-radius: var(--q2-radius-md);
  padding: 2.5rem 2rem;
  margin-block-end: 2rem;
  text-align: center;
}

.dr-pricing-banner-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  color: #F4F3EF;
  margin: 0.75rem 0 0.5rem;
}

.dr-pricing-banner-sub {
  font-family: 'Fraunces Italic', Georgia, serif;
  font-style: italic;
  color: #C4922E;
  max-width: 42rem;
  margin-inline: auto;
}

/* ==========================================================================
   Contact page layout — ADDED September 3, 2026.

   Two problems Lyn flagged from a desktop screenshot: the intro copy ran
   the full page width (too long a measure to read comfortably), and the
   "Reach me directly" / "Where I work" blocks stacked vertically, leaving
   a lot of empty space to the right of some very short lines.

   WHY THE BLOCKS ARE WRAPPED, and not styled positionally:
   The first plan was pure-CSS grid placement by :nth-child on the page's
   flat Markdown output, so the page content could stay 100% Markdown with
   no wrappers at all. That does not actually work well. CSS Grid rows are
   shared across columns, so row 2 of column 1 ("Phone — ...", one line)
   would be forced to the same height as row 2 of column 2 (the Iowa/2002
   paragraph, two or three lines), opening ragged gaps down the shorter
   column. Placement by :nth-child is also silently broken by adding or
   removing any paragraph later.

   Wrapping each block in its own element makes each one a single grid
   item, so the two columns size independently and the markup survives
   editing. The wrappers come from shortcode-core's [div] shortcode rather
   than raw HTML in the page, which keeps the content Markdown-native per
   the general rule — no raw <div> tags in the .md file.

   Page DOM for reference (quark2 partials/base.html.twig):
     section#body-wrapper.section > div.container > [page content]
   Content elements are direct children of .container, which is what the
   :has() scoping below relies on.
   -------------------------------------------------------------------------- */

/* Intro block: a contained panel, centered on the page at roughly 72% width
   — between the 2/3 and 3/4 Lyn asked for, so it reads as clearly wider
   than either of the two half-width columns below it.

   UPDATED September 3, 2026 — the h1 and paragraphs were previously styled
   individually as direct children of .container. That centered them but
   could never give them a shared background, since three separate elements
   would have produced three separate boxes. They're now wrapped in a single
   [div class="dr-contact-intro"] so the panel is one box around the whole
   intro.

   The generous horizontal padding is doing real work, not just decoration:
   it narrows the text measure inside the panel, which is what evens out the
   ragged line lengths Lyn flagged on the centered copy.

   Background follows the same light/dark split proven on the Pricing page's
   Level II card: an explicit firmer gray in light mode, because the theme's
   own --q2-bg-muted is nearly indistinguishable from the light-mode page
   canvas, and --q2-bg-muted in dark mode where it does read correctly.

   The percentage cap is behind a media query on purpose: 72% of a phone
   screen is a painfully narrow measure, so below 768px the panel goes full
   width and keeps only its padding. */
.dr-contact-intro {
  text-align: center;
  margin-inline: auto;
  margin-block-end: 1rem;
  padding: 1.125rem 2rem;
  background: #E8E5DD;
  border: 1px solid var(--q2-border-ring);
  border-radius: var(--q2-radius-md);
}

:root[data-theme="dark"] .dr-contact-intro {
  background: var(--q2-bg-muted);
}

/* Strip the leading/trailing margins the h1 and final paragraph bring with
   them, so the panel's own padding controls the spacing evenly. */
.dr-contact-intro > :first-child {
  margin-block-start: 0;
}

.dr-contact-intro > :last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .dr-contact-intro {
    max-width: 72%;
    padding: 1.375rem 3.5rem;
  }
}

/* Single column on mobile, two side by side from tablet up. Same responsive
   pattern as the footer columns and the features tile grid. */
.dr-contact-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-block: 2.5rem;
}

@media (min-width: 768px) {
  .dr-contact-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Kill the leading margin on each column's heading so both columns start
   on the same baseline rather than one sitting lower than the other. */
.dr-contact-col > :first-child {
  margin-block-start: 0;
}

/* ==========================================================================
   Answers section — article cards on the cover page — ADDED September 8, 2026.

   Structure comes from templates/answers.html.twig, which loops the article
   collection defined in user/pages/08.answers/default.md frontmatter. Only
   the styling lives here.

   WHY A TEMPLATE THIS TIME, when the Pricing page's cards were authored as
   raw HTML in the page content: the Pricing cards are three fixed things
   that only exist on that one page. These cards are generated — one per
   article, however many there end up being — so there is no page content to
   put them in. A template is the only option that doesn't mean hand-editing
   the cover page every time an article is added.

   REWORKED September 8, 2026 — the first pass rendered as one run-on line of
   link-colored text. Two causes, both fixed: the title and blurb were
   <span>s relying on `display: block` to stack at all, and the whole card
   inherited the theme's inline-link color. Rebuilt to match the Pricing
   page's plan cards — same --q2-* surface, border, radius and shadow
   variables, same padding scale — so the two pages read as members of one
   system rather than two unrelated designs.

   Selectors are deliberately two levels deep (.dr-answers-list .dr-answer-*)
   rather than single-class. The card is an <a>, and the theme styles links
   inside .content-item with its own color and underline; a bare
   .dr-answer-title would lose that specificity fight and go back to being
   link-colored.

   Single column on purpose, not a grid. The whole point of this page is
   scanning down a list of titles to find the one that matches your problem;
   two columns makes the eye zigzag. Revisit if the list ever gets long
   enough that scrolling becomes the bigger annoyance — that's also roughly
   the point where categories start earning their keep.
   -------------------------------------------------------------------------- */
.dr-answers-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block: 2.5rem 1rem;
}

/* Same visual recipe as .dr-price-card, plus the link resets a card-sized
   anchor needs.

   UPDATED September 8, 2026 — light-mode fix. Built first on --q2-bg-elev
   and --q2-border-ring, which read correctly in dark mode but nearly
   vanished in light mode: the elevated surface is a hair off the page
   canvas and the border ring is so pale the card edge is barely visible.
   Lyn flagged it as "the backgrounds disappear."

   This is the THIRD component to hit this exact problem (Pricing Level II
   card, Contact intro panel, now these cards), so the fix is the same one
   that worked both previous times: explicit firmer values for light mode,
   the theme's own variables kept for dark mode where they already work.
   #E8E5DD is deliberately the same light-mode surface value used by the
   other two, so panels across the site match rather than drifting apart.

   Worth noting for future sessions: three components patched the same way
   is a pattern, not a coincidence. At some point it's probably cleaner to
   define one --dr-surface / --dr-surface-border pair up top and have every
   panel use it, instead of repeating this light/dark split per component. */
.dr-answers-list .dr-answer-card {
  display: block;
  padding: 1.75rem 2rem;
  background: #E8E5DD;
  border: 1px solid #CFC7B5;
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  text-decoration: none !important;
  color: var(--q2-text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

:root[data-theme="dark"] .dr-answers-list .dr-answer-card {
  background: var(--q2-bg-elev);
  border-color: var(--q2-border-ring);
}

.dr-answers-list .dr-answer-card:hover,
.dr-answers-list .dr-answer-card:focus-visible {
  border-color: #C4922E;
  text-decoration: none !important;
  transform: translateY(-2px);
}

/* A real <h3> now, so its own default block margins have to be reset — the
   card's padding controls the spacing, not the heading. */
.dr-answers-list .dr-answer-title {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--q2-text-strong);
  margin: 0 0 0.5rem;
}

.dr-answers-list .dr-answer-card:hover .dr-answer-title,
.dr-answers-list .dr-answer-card:focus-visible .dr-answer-title {
  color: #C4922E;
}

/* Deliberately a notch smaller than body copy and in the regular weight, so
   the title reads as the title and this reads as the description under it. */
.dr-answers-list .dr-answer-blurb {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--q2-text);
  margin: 0 0 0.9rem;
}

.dr-answers-list .dr-answer-more {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #C4922E;
}

/* ==========================================================================
   Inline code — ADDED September 8, 2026.

   Backticked text in page content (domain names, IP addresses, file paths,
   record types) was rendering too pale to read comfortably in light mode —
   Lyn flagged it on the "What Is DNS?" article, where `yourbusiness.com` and
   the example IP address both washed out.

   Scoped with :not(pre) > code so this only touches INLINE code. Fenced code
   blocks live inside <pre> and are left to the theme's own block styling,
   which has different needs (its own background panel, scrolling, and
   syntax highlighting).

   The font itself is already correct — IBM Plex Mono, inherited from the
   --pico-font-family-monospace mapping at the top of this file. Only color
   and the small surface behind it are set here.

   Same light/dark split as the panels above: explicit values for light mode
   because the theme's variables are too pale there, and translucent white
   over the dark canvas for dark mode so it works against any dark surface
   it lands on.
   -------------------------------------------------------------------------- */
:not(pre) > code {
  color: #1A1A1A;
  background: #E8E5DD;
  border: 1px solid #DCD5C6;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

:root[data-theme="dark"] :not(pre) > code {
  color: #F4F3EF;
  background: rgba(244, 243, 239, 0.1);
  border-color: rgba(244, 243, 239, 0.2);
}