/* Ported verbatim from concepts/concept-a-v14.html <style> block (client-approved homepage design).
   Fonts loaded via next/font/google in layout.tsx under the SAME family names ('Cormorant Garamond',
   'Inter'), so the font: shorthands below resolve to the self-hosted fonts without any class-name rewriting.
   Removed vs. v14: .badge rule (preview-only nav pill); the #slfb-btn / .slfb-panel feedback
   widget lived in a separate <style> block in v14 (not part of this one) and was never ported.

   MOBILE-FIRST REFACTOR (task: "make it genuinely mobile-first"): every rule below is written
   base-first for the smallest phones, then progressively enhanced with `@media(min-width: …)`.
   Breakpoint scale used throughout: 640px (phone → large phone/small tablet), 900px (tablet →
   desktop — the point at which the original v14 desktop layout takes over), 1200px (the `.wrap`
   container cap — not a hard layout-switch breakpoint, so no min-width query needed for it).
   Every `min-width` override below restores the exact value the ORIGINAL (pre-refactor,
   desktop-first) stylesheet declared unconditionally — so anything ≥900px renders pixel-identical
   to the client-approved design. Colors/typography/radius tokens are untouched; only layout,
   responsive behavior, and the explicitly-required a11y/touch-target/no-overflow fixes changed. */

  :root{
    /* body — white, with a whisper of warmth on the page ground so
       white cards read as cards and the whole thing stays liturgical */
    --paper:#FFFFFF; --ground:#FCFBFA; --warm:#F7F2EA; --ink:#1A1D24; --muted:#4B5563;
    /* accent — martyr's red. St. Lawrence's own liturgical colour. */
    --red:#A81E2D; --red-deep:#7E1420; --red-soft:#FBEEEF;
    /* brightened red, for use on dark blue grounds only */
    --red-bright:#DC4B5C;
    /* gold — the label layer: eyebrows, small caps, sacred details.
       Never a surface, never a button.
       --gold is used ONLY on light grounds (.kicker, .mass-cell h4, .data-table th,
       .contact-info .row b, the nav underline) and --gold-soft ONLY on dark ones —
       audited across the live site, no crossover. v14's #A87C2A scored 3.76:1 on
       white, under the 4.5:1 WCAG AA floor for text this size (the ≥24px / ≥18.66px-
       bold large-text exemption doesn't reach 11–13px labels), so the light-ground
       gold is deepened to #8A6420 — deep enough to clear AA on BOTH light grounds it
       actually lands on: 5.35:1 on white, and 4.59:1 on the --blue-soft table headers
       (.data-table th), which an interim #966C22 still failed at 4.04:1. The tinted
       ground, not white, is the binding constraint.
       --gold-soft is untouched: on the dark blues it already measures 8.2–9.3:1. */
    --gold:#8A6420; --gold-soft:#D9BE85;
    /* everything else — Marian blue, now carrying real surface area */
    --blue:#1B3A6B; --blue-deep:#12274A; --blue-mid:#2E5490; --blue-soft:#E9EEF6;
    --blue-tint:#F1F4FA; --blue-night:#0E1D38;
    --line:#E3E7EE; --line-blue:#CFD9E9;
    /* Corners are now a quiet hierarchy rather than the site's default visual
       effect: modest cards, restrained controls, and true pills only where a
       binary/status shape is meaningful. */
    --r-card:8px; --r-chip:4px; --r-btn:4px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* The canvas (the surface behind the page, revealed by iOS Safari's rubber-band
     overscroll and its collapsing toolbars) takes its colour from <html> — and when
     <html> has none, CSS propagates <body>'s up to it instead. With only a body
     background declared, overscrolling past the footer on iPhone painted a full
     screen of --blue-tint below it, reading as a broken white gap. Both page EDGES
     are --blue-night (the topbar above, the footer below), so pinning the canvas to
     that navy makes overscroll at either end look like those bars continuing. */
  html{text-size-adjust:100%;background:var(--blue-night)}
  /* Let each browser use its native font rasterisation. Forcing grayscale
     antialiasing made both families noticeably thinner on macOS—the opposite
     of what this older, reading-first audience needs. */
  body{font-family:'Inter',sans-serif;background:var(--blue-tint);color:var(--ink);-webkit-font-smoothing:auto}
  .serif{font-family:'Cormorant Garamond',serif}

  /* ── Keyboard focus ────────────────────────────────────────────────────────
     Only .navtoggle and the form inputs carried a focus style, so tabbing through
     the nav, cards, buttons or footer moved an INVISIBLE cursor — unusable without
     a mouse. :focus-visible (not :focus) means pointer users never see a ring on
     click, only keyboard/switch users do. Offset keeps it clear of the element's
     own border. On the dark blue bands a blue ring would vanish, so those flip to
     the gold that already reads at 8:1+ there. */
  a:focus-visible,button:focus-visible,summary:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible{
    outline:2px solid var(--blue-mid);outline-offset:3px;border-radius:4px}
  .hero a:focus-visible,.sunday a:focus-visible,.giving a:focus-visible,
  footer a:focus-visible,.hero button:focus-visible{outline-color:var(--gold-soft)}

  /* Brand the text selection instead of the OS default blue-on-blue. */
  ::selection{background:var(--blue-soft);color:var(--blue-deep)}

  /* Anchor jumps land under the sticky-ish header without this; smooth scrolling
     is opt-in here and disabled again in the reduced-motion block below. */
  html{scroll-behavior:smooth}
  [id]{scroll-margin-top:24px}

  /* ── Reduced motion ───────────────────────────────────────────────────────
     The hero ran a 24s infinite Ken Burns zoom with no escape hatch. "Reduce
     Motion" is a common iOS/macOS setting (vestibular disorders, migraine), and
     an endlessly drifting photo is exactly what it exists to stop. Animations
     collapse to a single instant frame rather than being removed outright, so
     anything that animates INTO a visible state still ends up visible. */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;scroll-behavior:auto!important}
    html{scroll-behavior:auto}
    .hero-media img{animation:none;transform:none}
  }

  /* ── Skip link ────────────────────────────────────────────────────────────
     First tab stop on every page: jumps past the topbar, crest and full nav
     straight to <main>. Off-screen until focused, so it costs the visual design
     nothing. */
  .skiplink{position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--blue-deep);color:#fff;padding:14px 22px;
    font:600 15px/1 'Inter';text-decoration:none;border-radius:0 0 var(--r-btn) 0}
  .skiplink:focus{left:0;outline:2px solid var(--gold-soft);outline-offset:-4px}
  /* defensive baseline (outcome 8): nothing with an intrinsic pixel size should
     ever force the viewport wider than it is — existing images already carry
     their own width:100% rules (more specific, so they win unchanged); this
     just guarantees any future/CMS-authored <img> can't blow out the layout. */
  img,svg{max-width:100%;height:auto}
  .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
  @media(min-width:640px){.wrap{padding:0 32px}}

  /* Centered crest header — Father's request: logo centered, nav beneath.
     The masthead is deliberately identity-only. Language and Giving sit with
     navigation in the secondary row; the removed utility bar's announcement
     and contact links remain available in the compact menu and elsewhere in
     the site without competing with the seal. */
  .brandrow{background:#fff;display:flex;justify-content:center;padding:20px 0 18px}
  @media(min-width:640px){.brandrow{padding:30px 0 24px}}
  .brandinner{display:flex;justify-content:center;align-items:center;width:100%}
  .utility-announcement{display:block;font:600 11px/1.4 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
  .navrow{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line-blue);border-bottom:1px solid var(--line-blue)}
  .navwrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;flex-wrap:nowrap;width:100%}
  .nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .nav-actions .lang{display:none}
  .nav-actions .header-give{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;font-size:12px}
  @media(min-width:1240px){
    .navwrap{max-width:1360px;padding-block:8px;gap:22px}
    .nav-actions .lang{display:inline-flex;height:40px;background:#fff}
    .nav-actions .header-give{min-height:40px;padding:10px 18px;font-size:12.5px}
  }
  .brand{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-width:0}
  .brand>div{flex:0 1 230px;min-width:0}
  @media(min-width:640px){.brand{gap:20px;width:auto}.brand>div{flex-basis:auto}}
  /* the parish's real seal, rescued from the old site */
  /* Sized for the NEW seal (2026-07-26): a detailed engraved figure with
     lettering around the ring, where the old mark was a simple device. At the
     previous 52/68px Eli could not make it out at all. */
  .seal{height:68px;width:auto;display:block;flex:none}
  @media(min-width:640px){.seal{height:112px}}
  .brand h1{font:600 25px/1.05 'Cormorant Garamond';letter-spacing:.02em}
  @media(min-width:640px){.brand h1{font-size:36px}}

  /* The crest is now a link home (there is no "Home" nav item by convention).
     Anchors are inline and inherit link colour, so restore the lockup's own
     layout and typography explicitly. */
  a.brand{text-decoration:none;color:inherit}
  a.brand:hover h1{color:var(--blue-deep)}
  .brand span{display:block;max-width:230px;font:500 9.5px/1.45 'Inter';letter-spacing:.16em;color:var(--muted);margin-top:6px;text-transform:uppercase}
  @media(min-width:640px){.brand span{max-width:none;font-size:12.5px;line-height:1;letter-spacing:.26em}}

  /* Primary navigation — the compact menu remains intentionally straightforward
     below 1240px. On wider screens the highest-demand links stay visible while
     a single "Parish Life" disclosure opens the full-width directory below. */
  nav{display:none;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line-blue);box-shadow:0 24px 40px -24px rgba(18,39,74,.35);padding:8px 0;max-height:calc(100vh - 100%);overflow-y:auto;font:500 15.5px/1 'Inter'}
  nav.open{display:flex}
  .mobile-nav-content{display:contents}
  .mobile-nav-content>a{color:var(--ink);text-decoration:none;position:relative;display:flex;align-items:center;min-height:48px;padding:0 20px;width:100%}
  .mobile-nav-content>a:after{content:"";position:absolute;left:20px;bottom:6px;height:1.5px;width:0;background:var(--gold);transition:width .3s}
  .mobile-nav-content>a:hover:after{width:calc(100% - 40px)}
  .desktop-nav-content{display:none}
  @media(min-width:640px){
    .mobile-nav-content>a{padding:0 32px}
    .mobile-nav-content>a:after{left:32px}
    .mobile-nav-content>a:hover:after{width:calc(100% - 64px)}
  }
  @media(min-width:1240px){
    nav{display:block;position:static;flex:1 1;background:transparent;border-bottom:0;box-shadow:none;padding:0;max-height:none;overflow:visible;font-size:14px}
    .mobile-nav-content{display:none}
    .desktop-nav-content{display:flex;align-items:center;justify-content:center;gap:clamp(13px,1.05vw,22px);width:100%}
    .desktop-nav-content>a,.mega-toggle{color:var(--ink);text-decoration:none;position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:transparent;font:500 14px/1 'Inter';white-space:nowrap;cursor:pointer}
    .desktop-nav-content>a:after,.mega-toggle:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
    .desktop-nav-content>a:hover:after,.desktop-nav-content>a:focus-visible:after,.mega-toggle:hover:after,.mega-toggle:focus-visible:after,.mega-root.open .mega-toggle:after{transform:scaleX(1)}
    .mega-root{position:static}
    .mega-toggle{gap:7px}
    /* Transparent hover corridor: the trigger's 40px box ends slightly above
       the full-width panel. Extending its hit area across that visual gap lets
       a pointer travel downward without collapsing the menu mid-journey. */
    .mega-toggle:before{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:18px}
    .mega-chevron{width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease,margin .2s ease}
    .mega-root.open .mega-chevron{margin-top:3px;transform:rotate(225deg)}

    /* Geeksblock-inspired full-width pattern, translated into the parish's
       Marian-blue palette: a browsable directory on the left and one clear
       worship action on the right. The panel is positioned from .navrow, the
       nearest positioned ancestor, so it spans the viewport rather than only
       the width of the trigger. */
    .mega-panel{position:absolute;left:0;right:0;top:100%;z-index:60;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);background:var(--blue-night);color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 30px 55px -28px rgba(4,12,27,.8);transition:opacity .22s ease,transform .22s ease,visibility .22s}
    .mega-root.open .mega-panel{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
    .mega-panel-inner{max-width:1360px;margin:0 auto;padding:34px 32px 38px;display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.82fr);grid-gap:42px;gap:42px;text-align:left}
    .mega-directory{min-width:0}
    .mega-heading,.mega-feature-kicker{font:600 11px/1 'Inter';letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
    .mega-heading{margin-bottom:17px}
    .mega-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:3px 18px;gap:3px 18px}
    .mega-link{display:grid;grid-template-columns:14px minmax(0,1fr) 18px;align-items:start;grid-gap:12px;gap:12px;min-height:74px;padding:12px 14px!important;color:#fff!important;text-decoration:none;border-radius:10px;transition:background .2s ease}
    .mega-link:after{display:none!important}
    .mega-link:hover,.mega-link:focus-visible{background:rgba(255,255,255,.055)}
    .mega-link-mark{width:8px;height:8px;margin-top:5px;border:1px solid var(--gold-soft);border-radius:50%;position:relative}
    .mega-link-mark:after{content:"";position:absolute;width:2px;height:2px;inset:2px;border-radius:50%;background:var(--gold-soft)}
    .mega-link strong{display:block;font:600 15px/1.25 'Inter';color:#fff;transition:color .2s ease}
    .mega-link small{display:block;margin-top:5px;font:400 12.5px/1.45 'Inter';color:#AEBBD0}
    .mega-link-arrow{align-self:center;color:var(--gold-soft);font-size:16px;opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease}
    .mega-link:hover strong,.mega-link:focus-visible strong{color:var(--gold-soft)}
    .mega-link:hover .mega-link-arrow,.mega-link:focus-visible .mega-link-arrow{opacity:1;transform:translateX(0)}
    .mega-feature{min-width:0;padding:24px 26px;border:1px solid rgba(217,190,133,.24);border-radius:var(--r-card);background:linear-gradient(145deg,rgba(46,84,144,.38),rgba(18,39,74,.18));display:flex;flex-direction:column}
    .mega-feature h2{margin:13px 0 10px;font:600 27px/1.04 'Cormorant Garamond';letter-spacing:.005em;color:#fff}
    .mega-feature>p:not(.mega-feature-kicker){font:400 13px/1.55 'Inter';color:#BFCBE0}
    .mega-feature-primary{display:flex!important;align-items:center;justify-content:space-between;width:100%!important;min-height:44px!important;margin-top:20px;padding:0 15px!important;background:var(--red);color:#fff!important;border-radius:var(--r-btn);font:600 12.5px/1 'Inter';letter-spacing:.025em;text-decoration:none;transition:background .2s ease}
    .mega-feature-primary:after{display:none!important}
    .mega-feature-primary:hover{background:var(--red-deep)}
    .mega-feature-visit{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);font:400 11.5px/1.35 'Inter';color:#AEBBD0}
    .mega-feature-visit a{display:inline!important;width:auto!important;min-height:auto!important;padding:0!important;color:#fff!important;font-weight:600;text-decoration:none;white-space:nowrap}
    .mega-feature-visit a:after{display:none!important}
    .mega-feature-visit a:hover{text-decoration:underline;-webkit-text-decoration-color:var(--gold-soft);text-decoration-color:var(--gold-soft);text-underline-offset:4px}
  }
  /* hamburger toggle — 44×44 touch target; hidden entirely once the desktop
     nav bar takes over at 1240px. Bars animate into an X when open. */
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;flex-shrink:0}
  /* .navtoggle-bars is itself position:absolute (placed relative to the 44px
     button), which makes IT the containing block for its own ::before/::after
     — so those pseudo-elements are positioned relative to the bars span's own
     24px box (left:10/right:10 of .navtoggle), not the button. They use
     left:0/right:0 (full width of that 24px box) accordingly. */
  .navtoggle-bars{content:"";position:absolute;left:10px;right:10px;top:21px;height:2px;border-radius:2px;background:var(--blue-deep);transition:background .2s ease}
  .navtoggle-bars:before,.navtoggle-bars:after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--blue-deep);transition:transform .25s ease,top .25s ease}
  .navtoggle-bars:before{top:-7px}
  .navtoggle-bars:after{top:7px}
  .navtoggle.open .navtoggle-bars{background:transparent}
  .navtoggle.open .navtoggle-bars:before{top:0;transform:rotate(45deg)}
  .navtoggle.open .navtoggle-bars:after{top:0;transform:rotate(-45deg)}
  .navtoggle:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px;border-radius:4px}
  @media(min-width:1240px){.navtoggle{display:none}}
  /* language switcher — was a decorative <b>EN</b><span>ES</span> pill, now
     real links (LanguageSwitcher.tsx); .active marks the current locale the
     same way the old bold <b> always marked English. */
  .lang{display:inline-flex;border:1px solid var(--line-blue);border-radius:999px;overflow:hidden;font:600 11.5px/1 'Inter'}
  .lang a{padding:7px 12px;color:var(--muted);text-decoration:none;display:inline-block}
  .lang a.active{background:var(--blue);color:#fff}
  /* EN/ES is a primary control in a bilingual parish, but at 10px/5px padding it
     measured 34x20 — under the 24x24 WCAG 2.5.8 minimum and hard to hit at all.
     Sized up to ~29px tall; still visually a small pill in the masthead. */
  .nav-actions .lang a{min-height:38px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center}
  /* Compact-menu utility block: preserves the removed bar's announcement and
     contact actions without consuming a permanent strip of mobile viewport. */
  .nav-utility{display:grid;grid-gap:4px;gap:4px;margin:12px 20px 0;padding:16px 0 4px;border-top:1px solid var(--line-blue)}
  .nav-utility .utility-announcement{margin-bottom:5px}
  .nav-utility a{display:inline-flex;align-items:center;width:max-content;min-height:40px;padding:0;color:var(--blue);font-size:14px}
  .nav-utility a:after{display:none}
  @media(min-width:640px){.nav-utility{margin-inline:32px}}
  @media(min-width:1240px){.nav-utility{display:none}}
  /* the compact-menu copy of the switcher (SiteNav's dropdown) — desktop
     already shows one alongside the desktop navigation, so hide this one once
     nav goes always-visible-horizontal at 1240px (matches .navtoggle's cutoff). */
  .navlang{align-self:flex-start;width:auto;margin:14px 20px 6px}
  @media(min-width:640px){.navlang{margin:14px 32px 6px}}
  @media(min-width:1240px){.navlang{display:none}}
  /* action = red, always. .btn's own padding/line-height already clears the
     44px touch-target minimum (15px vertical padding + 15px line-height). */
  .btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font:600 15px/1 'Inter';padding:15px 26px;border-radius:var(--r-btn);letter-spacing:.04em;transition:background .25s}
  .btn:hover{background:var(--red-deep)}
  .btn.alt{background:transparent;color:var(--blue);border:1px solid var(--blue-mid)}
  .btn.alt:hover{background:var(--blue);color:#fff}
  .hero .btn.alt{color:#fff;border-color:rgba(255,255,255,.45)}
  .hero .btn.alt:hover{background:#fff;color:var(--blue-deep);border-color:#fff}

  /* hero — deep blue field. This is what stops the page reading white. */
  .hero{position:relative;overflow:hidden;background:var(--blue-deep);color:#fff;display:flex;flex-direction:column}
  @media(min-width:1024px){.hero{display:block}}
  .hero:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 20%,rgba(46,84,144,.55),transparent 60%);pointer-events:none}
  @media(min-width:1024px){.hero:after{z-index:1}}
  .hero .wrap{position:relative;z-index:2;display:block;padding-top:8px;padding-bottom:36px}
  @media(min-width:1024px){.hero .wrap{padding-top:190px;padding-bottom:190px}}
  .hero .copy{max-width:100%}
  @media(min-width:1024px){.hero .copy{max-width:50%}}
  .kicker{font:600 13px/1 'Inter';letter-spacing:.28em;color:var(--gold);text-transform:uppercase;margin-bottom:20px}
  .hero .kicker{color:var(--gold-soft)}
  /* fluid headline (outcome 5): clamps to the exact original 64px once the
     viewport reaches ~900px (same point the layout itself goes desktop), and
     never drops below a legible ~28px on the smallest phones. The `4rem` cap
     guarantees 900/1024/1280/1440px all render the client-approved 64px
     pixel-exact, same as before this refactor. overflow-wrap is a zero-cost
     safety net — it only ever engages if the fluid size still isn't enough
     room for the non-breaking "North Miami Beach" phrase to fit on one line. */
  .hero h2{font-weight:600;font-size:clamp(1.75rem,0.5rem + 6.2vw,4rem);line-height:1.06;font-family:'Cormorant Garamond';letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
  @media(min-width:1024px){.hero h2{overflow-wrap:normal}}
  /* "the red cannot be prominent" — Fr., 2026-07-24. Display emphasis is
     gold; red stays in small assets (buttons, links, feast, rules). */
  .hero h2 em{font-style:italic;color:var(--gold-soft)}
  .hero p{margin:26px 0 34px;font-size:18.5px;line-height:1.75;color:#CDD7E7;max-width:52ch}
  /* Blended hero media — the original parish photograph remains untouched.
     On desktop it sits beneath a long navy-to-clear exposure falloff: real
     photographic texture gradually emerges behind the copy instead of the
     image becoming transparent at a visible panel boundary. */
  /* mobile: photo stacks above the copy, top-fading down into the field.
     On desktop the MEDIA LAYER spans the full hero so its blend has no
     container edge; the untouched photo itself remains anchored in the right
     80%. The mobile crop and bottom fade remain unchanged. */
  .hero-media{position:relative;width:100%;height:clamp(300px,68vw,420px);order:-1;z-index:1}
  @media(min-width:1024px){.hero-media{position:absolute;top:0;right:0;bottom:0;width:100%;height:auto;order:0}}
  .hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 22%;display:block;
    transform-origin:50% 25%;animation:kb 24s ease-in-out infinite alternate}
  @media(min-width:1024px){.hero-media img{left:auto!important;right:0!important;width:80%!important}}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
  /* MOBILE scrim: the photo is a full-width band above the copy, so it only
     needs a soft bottom fade into the blue field. The heavy left-side and top
     gradients below are for the DESKTOP side-blend — on a phone they fell
     across Fr. Cletus (upper-left of frame) and read as if his head had been
     cropped out. Keep the top clean so faces stay legible. */
  .hero-media:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(0deg,var(--blue-deep) 0%,rgba(18,39,74,.35) 18%,rgba(18,39,74,0) 45%),
               linear-gradient(180deg,rgba(18,39,74,.16) 0%,rgba(18,39,74,0) 18%)}
  @media(min-width:1024px){
    .hero-media:after{
      background:linear-gradient(90deg,var(--blue-deep) 0%,var(--blue-deep) 20%,rgba(18,39,74,.94) 30%,rgba(18,39,74,.76) 40%,rgba(18,39,74,.54) 52%,rgba(18,39,74,.30) 64%,rgba(18,39,74,.12) 76%,rgba(18,39,74,.03) 88%,rgba(18,39,74,0) 96%),
                 linear-gradient(0deg,rgba(18,39,74,.62) 0%,rgba(18,39,74,0) 38%),
                 linear-gradient(180deg,rgba(18,39,74,.45) 0%,rgba(18,39,74,0) 24%)}
  }
  /* Sunday times live in the copy column — nothing floats on the photo */
  .sun{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
  .sun span{font:600 12px/1 'Inter';letter-spacing:.24em;color:var(--gold-soft);text-transform:uppercase}
  .sun b{font:600 23px/1.2 'Cormorant Garamond';color:#fff;letter-spacing:.02em}

  /* mass schedule */
  .section{padding:48px 0;background:var(--paper)}
  @media(min-width:640px){.section{padding:64px 0}}
  @media(min-width:900px){.section{padding:78px 0}}

  /* Alternating grounds: navy -> tint -> white -> warm -> white -> tint -> navy.
     No section sits adjacent to its own background, which gives the scroll rhythm
     without touching a single layout rule. */
  .section.ground{background:var(--ground)}
  .section.content-ground{background:var(--blue-tint)}
  .section.tint{background:var(--blue-soft);border-top:1px solid var(--line-blue);border-bottom:1px solid var(--line-blue)}
  .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;border-bottom:1px solid var(--line-blue);padding-bottom:18px;margin-bottom:28px}
  @media(min-width:900px){.sec-head{flex-wrap:nowrap;gap:24px;margin-bottom:38px}}
  .sec-head h3{font:600 24px/1.18 'Cormorant Garamond'}
  @media(min-width:640px){.sec-head h3{font-size:28px;line-height:1.14}}
  /* the page's ONE deliberately loud section */
  .mass .sec-head h3{font-size:28px}
  @media(min-width:640px){.mass .sec-head h3{font-size:36px;line-height:1.1}}
  .ssub{font:500 17px/1.5 'Cormorant Garamond';font-style:italic;color:var(--muted);margin-top:8px;max-width:60ch}
  @media(min-width:640px){.ssub{font-size:18px}}
  .sec-head a{font:600 13.5px/1 'Inter';letter-spacing:.14em;color:var(--red);text-decoration:none;text-transform:uppercase}
  /* Mass Schedule — a contemporary liturgical program rather than a dashboard.
     The parish's own crucifix grounds the section in a real sacred place;
     Sunday carries the Marian-blue field, and square rules organize the rest
     with the visual gravity of a printed parish worship aid. */
  .mass{background:var(--paper);border:1px solid var(--line-blue);border-top:3px solid var(--blue-deep);border-radius:var(--r-card);overflow:hidden;box-shadow:none}
  /* The section and the schedule card intentionally share "mass" in their
     class names. Card chrome belongs only to the inner schedule: applying its
     radius to the full-width section created a false curved seam above the
     following Plan Your Visit band. */
  .section.mass{
    position:relative;isolation:isolate;border:0;border-radius:0;overflow:hidden;box-shadow:none;
    background:
      radial-gradient(ellipse 52% 78% at 2% 38%,rgba(217,190,133,.15),transparent 68%),
      radial-gradient(ellipse 54% 82% at 100% 54%,rgba(46,84,144,.12),transparent 72%),
      linear-gradient(108deg,#F7F2EA 0%,#FCFBFA 50%,#EEF3FA 100%)}
  /* The quick-actions ground dissolves into this section at uneven depths:
     three broad translucent lobes hide the sibling boundary without drawing
     another decorative line or wave across the page. */
  .section.mass::before{
    content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:170px;pointer-events:none;
    background:
      radial-gradient(ellipse 48% 115% at 13% 0%,rgba(252,251,250,.98) 0%,rgba(252,251,250,.7) 46%,transparent 78%),
      radial-gradient(ellipse 42% 88% at 57% 0%,rgba(252,251,250,.94) 0%,rgba(252,251,250,.56) 48%,transparent 82%),
      radial-gradient(ellipse 52% 126% at 96% 0%,rgba(252,251,250,.98) 0%,rgba(252,251,250,.64) 44%,transparent 76%),
      linear-gradient(180deg,#FCFBFA 0%,rgba(252,251,250,.72) 22%,transparent 72%)}
  /* One oversized sanctuary-arch silhouette breaks the page's rectangular
     rhythm behind the real crucifix photograph. It is atmosphere, not a faux
     architectural claim, and remains well outside the schedule's reading area. */
  .section.mass::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:clamp(-170px,-8vw,-92px);top:7%;width:clamp(340px,31vw,470px);height:82%;
    border:1px solid rgba(138,100,32,.18);
    border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;
    background:linear-gradient(145deg,rgba(217,190,133,.08),rgba(255,255,255,.015) 48%,rgba(46,84,144,.045));
    transform:rotate(-2deg)}
  .section.mass>.wrap{position:relative;z-index:1}
  @media(max-width:639px){
    .section.mass::before{height:130px;
      background:
        radial-gradient(ellipse 78% 120% at 4% 0%,rgba(252,251,250,.98),rgba(252,251,250,.62) 48%,transparent 80%),
        radial-gradient(ellipse 84% 92% at 96% 0%,rgba(252,251,250,.96),rgba(252,251,250,.48) 46%,transparent 82%)}
    .section.mass::after{left:-190px;top:3%;width:360px;height:440px;opacity:.72}
  }
  .mass-layout{display:grid;grid-template-columns:1fr;grid-gap:30px;gap:30px;align-items:stretch}
  .mass-program{min-width:0;display:flex;flex-direction:column}
  .mass-program .sec-head{margin-bottom:24px;border-bottom-color:rgba(138,100,32,.3)}
  .mass-program .sec-head .kicker{margin-bottom:12px}
  .mass-devotional{
    position:relative;min-height:330px;overflow:hidden;background:var(--blue-night);
    border-radius:var(--r-card)}
  .mass-devotional img{object-fit:cover;object-position:center 18%;filter:saturate(.76) contrast(1.04) brightness(.82)}
  .mass-devotional:after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(14,29,56,.08) 20%,rgba(14,29,56,.2) 56%,rgba(14,29,56,.92) 100%),
      linear-gradient(90deg,rgba(14,29,56,.16),transparent 45%)}
  .mass-devotional figcaption{
    position:absolute;z-index:1;left:24px;right:24px;bottom:24px;color:#fff;
    padding-top:16px;border-top:1px solid rgba(217,190,133,.52)}
  .mass-devotional figcaption small{
    display:block;margin-bottom:7px;font:600 10px/1 'Inter';letter-spacing:.19em;
    text-transform:uppercase;color:var(--gold-soft)}
  .mass-devotional figcaption span{
    display:block;font:600 23px/1.16 'Cormorant Garamond'}
  @media(min-width:900px){
    .mass-layout{grid-template-columns:minmax(250px,.68fr) minmax(0,1.72fr);gap:46px}
    .mass-devotional{min-height:650px}
    .mass-program>.mass{flex:1 1}
  }
  .mass-top{display:grid;grid-template-columns:1fr}
  @media(min-width:900px){.mass-top{grid-template-columns:1.05fr 1.95fr}}
  .sunday{background:var(--blue-deep);color:#fff;padding:26px 22px;position:relative;overflow:hidden}
  @media(min-width:640px){.sunday{padding:32px 30px}}
  .sunday:before{content:"✠";position:absolute;right:-26px;bottom:-38px;font-size:170px;color:rgba(217,190,133,.09);line-height:1}
  .sunday h4{font:600 11px/1 'Inter';letter-spacing:.24em;color:var(--gold-soft);text-transform:uppercase}
  .sunday .lord{font:500 15.5px/1.4 'Cormorant Garamond';font-style:italic;color:#D0DAE9;margin:6px 0 18px}
  .stime{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:1;min-height:44px}
  .stime:last-child{border-bottom:0}
  .stime b{font:600 27px/1 'Cormorant Garamond'}
  .mchip{
    font:600 9.5px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;
    padding:2px 0 2px 10px;border:0;border-left:1px solid rgba(255,255,255,.42);
    border-radius:0;color:#E6EDF7}
  .mchip.es{border-color:rgba(217,190,133,.62);color:var(--gold-soft)}
  .mass-rest{display:grid;grid-template-columns:1fr}
  @media(min-width:900px){.mass-rest{grid-template-columns:repeat(2,1fr)}}
  .mass-cell{padding:22px;border-left:1px solid var(--line-blue);border-top:1px solid var(--line-blue)}
  @media(min-width:640px){.mass-cell{padding:26px}}
  .mass-rest .mass-cell:first-child{border-top:0}
  @media(min-width:900px){.mass-rest .mass-cell:first-child{border-top:0}.mass-rest .mass-cell:nth-child(2){border-top:0}}
  .mass-cell h4{font:600 11px/1 'Inter';letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
  .mass-cell .t{font:600 26px/1.25 'Cormorant Garamond'}
  /* Fr. Cletus asked twice for larger type; the Mass schedule is the page's most
     consulted block and its detail line was the smallest copy on it. */
  .mass-cell p{font:400 16px/1.65 'Inter';color:var(--muted);margin-top:8px}
  .mass-cell.observance{background:linear-gradient(135deg,rgba(247,242,234,.82),rgba(255,255,255,.92))}
  .mass-cell.observance h4:before{content:"✠";margin-right:8px;color:var(--red)}
  .next{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-blue);background:var(--warm);padding:16px 22px}
  @media(min-width:640px){.next{padding:16px 26px}}
  .next-inner{display:flex;align-items:center;gap:16px}
  .nextpill{
    color:var(--red);font:700 10px/1 'Inter';letter-spacing:.16em;text-transform:uppercase;
    padding:6px 0 6px 12px;border-left:3px solid var(--red);border-radius:0}
  .nextt{font:600 20px/1.2 'Cormorant Garamond';color:var(--ink)}
  .next .live{display:flex;align-items:center;gap:8px;font:500 13px/1.4 'Inter';color:var(--blue-deep)}
  .next .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* quick actions */
  .quick{display:grid;grid-template-columns:1fr;grid-gap:16px;gap:16px}
  @media(min-width:640px){.quick{grid-template-columns:1fr 1fr;gap:20px}}
  @media(min-width:900px){.quick{grid-template-columns:repeat(4,1fr)}}
  .qcard{
    background:var(--paper);border:1px solid var(--line-blue);border-radius:var(--r-card);
    padding:0;text-decoration:none;color:var(--ink);overflow:hidden;
    transition:transform .25s,box-shadow .25s,border-color .25s;
    position:relative;display:flex;flex-direction:column;min-height:44px}
  .qcard:hover{transform:translateY(-4px);box-shadow:0 24px 44px -24px rgba(18,39,74,.32);border-color:var(--blue-mid)}
  .qcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-soft)}
  .qcard-media:after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 62%,rgba(18,39,74,.12) 100%)}
  .qcard-media img{object-fit:cover;transition:transform .45s ease}
  .qcard:hover .qcard-media img{transform:scale(1.035)}
  .qcard-body{display:flex;flex:1 1;flex-direction:column;padding:20px 20px 23px}
  @media(max-width:639px){.qcard-media{aspect-ratio:16/9}.qcard-body{padding:20px 22px 24px}}
  .qcard b{font:600 23px/1.25 'Cormorant Garamond';display:block;margin-bottom:8px;color:var(--blue-deep)}
  .qcard span{font:400 15.5px/1.65 'Inter';color:var(--muted)}

  /* Upcoming events — an editorial calendar, not three half-empty cards.
     The approved archive photograph is deliberately section-level: it shows
     real parish life without pretending to depict any one future event. */
  .happenings-layout{display:grid;grid-template-columns:1fr;grid-gap:22px;gap:22px}
  /* A non-repeating stained-glass light wash lives in the section's breathing
     room. Large ivory, Marian-blue and muted-gold blooms add atmosphere without
     reading as wallpaper or pretending that a real window exists here. */
  .happenings{position:relative;overflow:hidden;isolation:isolate}
  .happenings::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    inset:-5%;
    background:
      radial-gradient(ellipse 42% 70% at 0% 14%,rgba(255,255,255,.82) 0%,rgba(217,190,133,.11) 24%,rgba(27,58,107,.055) 48%,transparent 73%),
      radial-gradient(ellipse 38% 66% at 100% 18%,rgba(255,255,255,.66) 0%,rgba(27,58,107,.07) 38%,rgba(168,124,42,.055) 52%,transparent 74%),
      linear-gradient(118deg,transparent 8%,rgba(255,255,255,.3) 22%,transparent 39%);
    filter:blur(18px);opacity:.82}
  .happenings>.wrap{position:relative;z-index:1}
  @media(max-width:639px){
    .happenings::before{
      background:
        radial-gradient(ellipse 92% 38% at 8% 0%,rgba(255,255,255,.78) 0%,rgba(217,190,133,.09) 32%,rgba(27,58,107,.05) 58%,transparent 82%),
        linear-gradient(145deg,rgba(255,255,255,.24),transparent 48%);
      filter:blur(14px);opacity:.74}
  }
  .events{display:grid;grid-template-columns:1fr;grid-gap:0;gap:0;border:1px solid var(--line-blue);
    border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
  .ev{background:var(--paper);border:0;border-bottom:1px solid var(--line-blue);
    border-radius:0;padding:19px 20px;display:flex;gap:20px;align-items:center;min-height:104px}
  .ev:last-child{border-bottom:0}
  @media(min-width:640px){.ev{padding:22px 24px;gap:22px}}
  .date{min-width:72px;text-align:center;border:0;border-right:1px solid var(--line-blue);
    border-radius:0;padding:4px 20px 4px 0}
  .date b{font:700 32px/1 'Cormorant Garamond';color:var(--blue);display:block}
  .date span{font:600 11px/1 'Inter';letter-spacing:.14em;color:var(--muted)}
  /* the patronal feast is vested in red — so it is red here too */
  .ev.feast{border-left:3px solid var(--red);background:var(--red-soft);padding-left:17px}
  @media(min-width:640px){.ev.feast{padding-left:21px}}
  .ev.feast .date{border-color:rgba(168,30,45,.28);background:transparent}
  .ev.feast .date b{color:var(--red)}
  /* h4, not h5: these sit under the section's h3, and skipping a level makes a
     screen reader announce a heading that isn't there. Styling is unchanged. */
  .ev h4{font:600 21px/1.3 'Cormorant Garamond';margin-bottom:6px}
  .ev p{font:400 15px/1.6 'Inter';color:var(--muted)}
  .feast-note{font:600 11.5px/1 'Inter';letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin-top:10px;display:block}
  .happenings-photo{position:relative;order:-1;min-height:290px;overflow:hidden;
    border-radius:var(--r-card);background:var(--blue-deep);box-shadow:0 26px 50px -32px rgba(18,39,74,.6)}
  .happenings-photo img{object-fit:cover;object-position:center 52%}
  .happenings-photo:after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 45%,rgba(14,29,56,.88) 100%)}
  .happenings-photo figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff}
  .happenings-photo figcaption small{display:block;margin-bottom:7px;font:600 10px/1 'Inter';
    letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
  .happenings-photo figcaption b{display:block;font:600 25px/1.15 'Cormorant Garamond'}
  @media(min-width:900px){
    .happenings-layout{grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
      gap:44px;align-items:stretch}
    .happenings-photo{order:0;min-height:100%}
  }

  /* giving — blue carries the heavy band */
  .giving{background:var(--blue-deep);color:#D6E0F0}
  .giving .wrap{display:grid;grid-template-columns:1fr;grid-gap:40px;gap:40px;padding-top:56px;padding-bottom:56px;align-items:center}
  @media(min-width:900px){.giving .wrap{grid-template-columns:1fr 1fr;gap:64px;padding-top:84px;padding-bottom:84px}}
  .giving h3{font:600 32px/1.15 'Cormorant Garamond';color:#fff}
  @media(min-width:640px){.giving h3{font-size:42px}}
  .giving p{margin:20px 0 30px;font-size:17px;line-height:1.8;color:#C5D0E1}
  .funds{display:grid;grid-gap:12px;gap:12px}
  .fund{display:flex;justify-content:space-between;align-items:center;gap:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px 18px;text-decoration:none;color:#E6EDF7;transition:background .25s,border-color .25s;min-height:44px}
  @media(min-width:640px){.fund{padding:18px 22px}}
  .fund:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3)}
  .fund-copy{display:grid;grid-gap:5px;gap:5px}
  .fund b{font:600 20px/1.2 'Cormorant Garamond'}
  .fund-copy small{font:400 14px/1.5 'Inter';color:#C5D0E1;max-width:54ch}
  .fund .fund-action{flex:0 0 auto;font:600 12px/1 'Inter';letter-spacing:.14em;color:var(--gold-soft);text-transform:uppercase}
  .campaign{margin-top:14px;background:rgba(217,190,133,.08);border:1px solid rgba(217,190,133,.45);border-radius:10px;padding:20px 22px}
  .campaign b{font:600 18px/1.25 'Cormorant Garamond';color:#fff}
  .campaign p{margin:8px 0 0;font:400 14px/1.55 'Inter';color:#C5D0E1}
  .bar{height:6px;background:rgba(255,255,255,.16);margin:14px 0 8px;border-radius:99px;overflow:hidden}
  .bar i{display:block;height:100%;width:38%;background:var(--red)}
  .campaign span{font:500 12.5px/1.35 'Inter';color:#C5D0E1}
  .campaign-link{display:inline-block;margin-left:12px;font:600 12px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}
  .giving .giving-provider-note{margin:4px 2px 0;font:400 13.5px/1.6 'Inter';color:#C5D0E1}

  /* story teaser */
  .story{display:grid;grid-template-columns:1fr;grid-gap:32px;gap:32px;align-items:center}
  @media(min-width:900px){.story{grid-template-columns:1fr 1.1fr;gap:52px}}
  .simg{background:var(--blue-soft);border-radius:var(--r-card);overflow:hidden;box-shadow:0 26px 50px -30px rgba(18,39,74,.4)}
  .simg img{width:100%;height:260px;object-fit:cover;display:block}
  @media(min-width:640px){.simg img{height:350px}}
  .stitle{font:600 27px/1.2 'Cormorant Garamond';margin-bottom:14px}
  @media(min-width:640px){.stitle{font-size:34px;line-height:1.15}}
  .stext{font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:24px;max-width:56ch}

  /* trio + footer */
  .trio{display:grid;grid-template-columns:1fr;grid-gap:16px;gap:16px}
  @media(min-width:640px){.trio{grid-template-columns:1fr 1fr;gap:20px}}
  @media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr)}}
  .tcard{display:block;background:var(--blue-soft);position:relative;height:230px;overflow:hidden;border-radius:var(--r-card);text-decoration:none}
  .tcard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .tcard:hover img{transform:scale(1.05)}
  .tcard .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(18,39,74,.88));display:flex;align-items:flex-end;padding:22px}
  .tcard .ov b{display:block;color:#fff;font:600 25px/1.2 'Cormorant Garamond'}
  .tcard .ov small{display:block;margin-top:5px;color:var(--gold-soft);font:600 11px/1.2 'Inter';letter-spacing:.1em;text-transform:uppercase}
  /* line-height 1.8 -> 2 buys room for the link padding below without the taller
     hit areas overlapping between wrapped rows. */
  footer{background:#0E1D38;color:#B8C5D8;padding:48px 0 32px;font:400 15px/2 'Inter'}
  @media(min-width:640px){footer{padding:64px 0 40px}}
  footer .wrap{display:grid;grid-template-columns:1fr;grid-gap:32px;gap:32px}
  @media(min-width:900px){footer .wrap{grid-template-columns:2fr 1fr 1fr;gap:48px}}
  /* h4 for the same reason as .ev — h6 after the page's h3 sections was a two-level
     skip. Appearance identical. */
  footer h3{font:600 11px/1 'Inter';letter-spacing:.2em;color:var(--gold-soft);text-transform:uppercase;margin-bottom:16px}
  footer .name{font:600 22px/1.2 'Cormorant Garamond';color:#fff;margin-bottom:12px}
  @media(min-width:640px){footer .name{font-size:24px}}
  /* Footer crest — the reversed mark, deliberately smaller than the header's
     (52/68px) so the page reads header-first. Sits above the existing red rule,
     which stays as the divider between mark and parish name. */
  .fseal{height:80px;width:auto;display:block;margin-bottom:18px;opacity:.92}
  @media(min-width:640px){.fseal{height:96px}}
  footer .rule{height:2px;width:44px;background:var(--red);margin-bottom:18px}
  /* Footer links measured 18px tall — below the 24px WCAG 2.5.8 target minimum,
     and the densest tap area on the page (the "·"-separated rows sit close
     together). inline-block + vertical padding lifts them to ~28px without
     disturbing the separators or the approved layout. */
  footer a{color:inherit;text-decoration:none;display:inline-block;padding:5px 0}
  footer a:hover{text-decoration:underline}
  /* Links carrying colour meaning only (the pale grey on navy) get an underline
     on hover AND a brighter tone, so the affordance isn't colour-alone. */
  footer a:hover,footer a:focus-visible{color:#D7E2F2}

  /* Homepage section ordering. Fr. Cletus asked that "what's happening this
     week" be the first thing on mobile — but ordering it above the hero pushed
     the hero to y=1059 on an 844px-tall phone, so the welcome image was never
     seen at all. Hero now leads (compact on mobile, see .hero .wrap below) and
     happenings sits immediately beneath it, still the first CONTENT block. */
  .home{display:flex;flex-direction:column}
  /* Mobile follows the same decision hierarchy as desktop: welcome first,
     quick visitor journeys second, then the complete liturgical schedule.
     The remaining narrative sections retain their document order. */
  .home>*{order:6}
  .home>.hero{order:1}
  .home>.quick-band{order:2}
  .home>.mass{order:3}
  .home>.happenings{order:4}
  .home>.plan-visit{order:5}
  /* >=900px: no reordering, sections follow document order */
  @media(min-width:900px){.home>*,.home>.hero,.home>.quick-band,.home>.mass,.home>.plan-visit,.home>.happenings{order:0}}
  /* The homepage scrolls normally until its final Giving chapter. A single
     proximity snap point lets the browser ease that last handoff into place
     without hijacking the wheel/trackpad or creating stops between earlier
     sections. Phones keep native scrolling, and Reduce Motion disables the
     effect automatically. */
  @media(min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
    html:has(.home){scroll-snap-type:y proximity}
    .home>.giving{scroll-snap-align:start;scroll-snap-stop:normal}
  }

  /* Inner-page utility heroes stay compact and type-only. Primary visitor
     journeys use one symbolic paper-collage illustration as the hero field
     itself: no floating thumbnail, card border, radius, or drop shadow. */
  .page-hero .wrap{padding-top:32px;padding-bottom:32px}
  @media(min-width:640px){.page-hero .wrap{padding-top:48px;padding-bottom:48px}}
  .page-hero h2{font-size:clamp(1.75rem,1.2rem + 2.76vw,2.75rem)}
  .page-hero p{margin:15px 0 0;font-size:16.5px;line-height:1.65}
  .page-hero.has-media{min-height:340px;isolation:isolate}
  .page-hero.has-media:after{display:none}
  .page-hero.has-media .wrap{min-height:340px;display:flex;align-items:center}
  .page-hero.has-media .copy{max-width:min(100%,620px)}
  .page-hero-backdrop{position:absolute!important;inset:0;z-index:0;object-fit:cover}
  .page-hero-backdrop.right{object-position:right center}
  .page-hero-backdrop.left{object-position:left center}
  .page-hero-backdrop.top{object-position:center top}
  .page-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(14,29,56,.52) 0%,rgba(14,29,56,.32) 46%,
      rgba(14,29,56,.08) 76%,transparent 100%),
      linear-gradient(0deg,rgba(14,29,56,.24),transparent 48%)}
  @media(max-width:639px){
    .page-hero.has-media,.page-hero.has-media .wrap{min-height:380px}
    .page-hero-backdrop.right{object-position:68% center}
    .page-hero-veil{background:linear-gradient(90deg,rgba(14,29,56,.78),rgba(14,29,56,.58)),
      linear-gradient(0deg,rgba(14,29,56,.6),transparent 58%)}
  }
  @media(min-width:900px){
    .page-hero.has-media .wrap{min-height:350px;padding-top:64px;padding-bottom:64px}
  }
  /* A few illustrations depend on seeing more of the complete symbol. On wide
     screens these opt-in framings pull back the art while keeping it anchored
     to the right edge; the exposed left strip is the hero's matching navy
     field, so the image still reads as part of the band rather than a panel. */
  @media(min-width:1024px){
    .page-hero[class*="framing-reveal"] .page-hero-backdrop{
      top:50%!important;right:0!important;bottom:auto!important;left:auto!important;
      height:auto!important;max-width:none!important;transform:translateY(-50%);
      -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,#000 19%);
      mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,#000 19%)}
    .page-hero.framing-reveal-subtle .page-hero-backdrop{width:97%!important}
    .page-hero.framing-reveal .page-hero-backdrop{width:94%!important}
    .page-hero.framing-reveal-more .page-hero-backdrop{width:90%!important}
  }

  /* generic content-page card chrome (task 6: sacraments grid, religious-ed
     registering/contact blocks) — same tokens/radius as .qcard, sized for
     longer verbatim copy-deck paragraphs instead of homepage teaser text */
  .card-grid{display:grid;grid-template-columns:1fr;grid-gap:16px;gap:16px}
  @media(min-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
  .card-grid .wide{grid-column:1/-1}
  .info-card{background:var(--paper);border:1px solid var(--line-blue);border-radius:var(--r-card);padding:24px 22px}
  @media(min-width:640px){.info-card{padding:30px 28px}}
  .info-card h3,.info-card h4{font:600 22px/1.25 'Cormorant Garamond';color:var(--blue-deep);margin-bottom:10px}
  @media(min-width:640px){.info-card h3,.info-card h4{font-size:24px}}
  .info-card p{font:400 16px/1.7 'Inter';color:var(--muted)}
  .welcome-grid .info-card a{display:inline-block;margin-top:14px;padding:6px 0;color:var(--blue);font:600 14px/1.4 'Inter';text-decoration:none}
  .welcome-grid .info-card a:hover,.welcome-grid .info-card a:focus-visible{text-decoration:underline}
  .welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .welcome-ocia{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .welcome-ocia h3{font:600 27px/1.2 'Cormorant Garamond';color:var(--blue-deep)}
  .welcome-ocia p{max-width:66ch;margin-top:10px;font:400 16.5px/1.7 'Inter';color:var(--muted)}
  @media(min-width:900px){.welcome-ocia{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}.welcome-ocia .btn{flex:0 0 auto}}
  .info-card p+p{margin-top:12px}
  /* Card links (incl. "Give to ABCD →") sat at 19px — under the 24px WCAG 2.5.8
     target minimum. These run inline inside body copy, so inline-block padding
     would break the text flow; padding-block on an inline box grows the hit area
     without affecting line layout. Underlined always, not just on hover: red-on-
     white alone is a colour-only affordance inside a paragraph. */
  .info-card a{color:var(--red);font-weight:600;text-decoration:underline;
    text-underline-offset:3px;padding-block:6px}
  .info-card a:hover,.info-card a:focus-visible{text-decoration-thickness:2px}


  /* ministries directory — reuses .info-card/.card-grid chrome so the page reads
     as part of the approved design rather than a bolt-on. */
  .ministry-group{margin-bottom:38px}
  .ministry-group:last-of-type{margin-bottom:26px}
  .ministry-cat{font:600 11px/1 'Inter';letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
  /* Which language a group runs in is the first thing a parishioner needs, so it
     reads as a chip rather than buried in the description. */
  .ministry-lang{display:inline-block;font:600 10px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;
    padding:5px 9px;border-radius:var(--r-chip);background:var(--blue-soft);color:var(--blue-deep);margin-bottom:10px}
  .ministry-meets{margin-top:10px}
  .ministry-meets b{font:600 11px/1 'Inter';letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    display:block;margin-bottom:4px}
  .ministry-join{margin-top:8px;background:var(--blue-tint)}


  /* reflections + long-form prose (privacy) */
  .refl-date{font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .refl-quote{font:italic 500 17.5px/1.55 'Cormorant Garamond';color:var(--blue-deep);margin-top:10px}
  .refl-by{font:600 12px/1.4 'Inter';color:var(--muted);margin-top:12px}
  .refl-body{max-width:68ch}
  .refl-body p{font:400 17px/1.75 'Inter';color:var(--ink);margin-bottom:16px}
  .refl-back{margin-top:28px;font:600 15px/1 'Inter'}
  .prose{max-width:68ch}
  .prose-block{margin-bottom:28px}
  .prose-block h3{font:600 21px/1.3 'Cormorant Garamond';color:var(--blue-deep);margin-bottom:8px}
  .prose-block p{font:400 16px/1.7 'Inter';color:var(--ink);margin-bottom:12px}
  .prose-updated{font:400 14px/1.6 'Inter';color:var(--muted);border-top:1px solid var(--line-blue);padding-top:16px}


  /* ── Motion budget ─────────────────────────────────────────────────────────
     Deliberately small. This congregation is older and on older phones, and the
     page Fr. Cletus approved is a still, dignified one. The binding rule: NO
     element's visibility may depend on JavaScript — there is no scroll-reveal,
     no opacity:0 base state, nothing that fails closed if a script never runs.

     Tap feedback is the item that actually answers "animated" on a phone: every
     transition in this stylesheet was previously spent on :hover, which touch
     devices never fire, so the page felt dead in the hand. All of it collapses
     under prefers-reduced-motion, already honoured above. */
  @media(prefers-reduced-motion:no-preference){
    .btn,.qcard,.fund,.stime,.ev,.bulletin-row,.tcard,.info-card{
      transition:transform 120ms ease-out,box-shadow 200ms ease-out}
    .btn:active,.qcard:active,.fund:active,.ev:active,.bulletin-row:active,.tcard:active{
      transform:scale(.985)}
  }


  /* Plan Your Visit is the homepage's emotional invitation: a full-bleed,
     authentic photograph of the congregation inside St. Lawrence, recovered
     at full resolution from the parish's former Wix site. Its veil begins in
     Marian blue and resolves into black at the foot, preserving the photograph
     while giving the centered copy dependable contrast. */
  .section.plan-visit{
    position:relative;isolation:isolate;padding:0;overflow:hidden;
    background:var(--blue-night);color:#fff}
  .pv-backdrop{z-index:0;object-fit:cover;object-position:center 48%}
  .pv-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(ellipse 72% 58% at 50% 48%,rgba(18,39,74,.32),rgba(18,39,74,.1) 68%,transparent 100%),
      linear-gradient(180deg,
        rgba(18,39,74,.42) 0%,
        rgba(18,39,74,.52) 22%,
        rgba(13,27,50,.68) 48%,
        rgba(6,13,25,.86) 72%,
        rgba(0,0,0,.96) 100%)}
  .pv-stage{
    position:relative;z-index:2;min-height:max(760px,100svh);
    display:grid;grid-template-rows:1fr auto;align-items:center;
    padding-top:64px;padding-bottom:24px}
  .pv-copy{width:min(100%,760px);margin:auto;text-align:center}
  .pv-copy .kicker{color:var(--gold-soft)}
  .pv-copy h3{
    margin:14px 0 18px;color:#fff;
    font:600 clamp(2.65rem,7vw,4.9rem)/.98 'Cormorant Garamond';
    text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.28)}
  .pv-copy p{
    max-width:68ch;margin:0 auto;color:#EDF2F8;
    font:450 16.5px/1.75 'Inter';text-wrap:pretty}
  .pv-cta{display:flex;flex-direction:column;justify-content:center;gap:10px;margin-top:28px}
  .pv-cta .btn{
    min-height:48px;display:inline-flex;align-items:center;justify-content:center;
    text-align:center}
  .pv-cta .btn.ghost{
    background:rgba(9,20,39,.32);color:#fff;border-color:rgba(255,255,255,.72)}
  .pv-details{
    display:grid;grid-template-columns:1fr;margin-top:46px;
    border:1px solid rgba(217,190,133,.28);border-radius:var(--r-card);
    background:rgba(8,18,35,.66);box-shadow:0 24px 48px -34px rgba(0,0,0,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .pv-detail{
    display:flex;flex-direction:column;gap:6px;min-height:66px;padding:15px 18px;
    color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14)}
  .pv-detail:last-child{border-bottom:0}
  .pv-detail b{
    color:var(--gold-soft);font:600 10.5px/1 'Inter';
    letter-spacing:.15em;text-transform:uppercase}
  .pv-detail span{font:550 15px/1.4 'Inter'}
  .pv-detail:hover span{text-decoration:underline;text-underline-offset:3px}
  @media(min-width:640px){
    .pv-stage{padding-top:76px;padding-bottom:30px}
    .pv-copy p{font-size:17px}
    .pv-cta{flex-direction:row}
    .pv-cta .btn{min-width:190px}
    .pv-details{grid-template-columns:minmax(0,1.55fr) minmax(220px,.75fr)}
    .pv-detail{justify-content:center;padding:16px 20px;border-bottom:0}
    .pv-detail+ .pv-detail{border-left:1px solid rgba(255,255,255,.14)}
  }
  @media(min-width:1024px){
    .pv-stage{padding-top:82px;padding-bottom:34px}
    .pv-copy h3{margin-top:16px;margin-bottom:22px}
    .pv-copy p{font-size:18px;line-height:1.7}
    .pv-details{margin-top:54px}
  }
  .btn.ghost{background:transparent;color:var(--blue-deep);border:1px solid var(--blue-deep)}

  /* A measured light/dark/photo cadence on the homepage: the story receives a
     warm paper ground, the three image destinations a Marian-blue wash. */
  .story-band{
    position:relative;overflow:hidden;isolation:isolate;
    background:var(--warm);border-top:1px solid rgba(138,100,32,.14)}
  /* Two incomplete tile fragments, deliberately different in scale and angle.
     Their cropped edges and radial fades make them feel hand-laid rather than
     like a repeating page background; the center measure remains untouched. */
  .story-band::before,.story-band::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    background:
      conic-gradient(from 45deg,
        rgba(168,124,42,.11) 0 25%,
        rgba(18,39,74,.045) 0 50%,
        rgba(255,255,255,.48) 0 75%,
        rgba(168,124,42,.035) 0) 0 0/88px 88px;
    opacity:.42;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0,rgba(0,0,0,.68) 48%,transparent 78%);
    mask-image:radial-gradient(ellipse at center,#000 0,rgba(0,0,0,.68) 48%,transparent 78%)}
  .story-band::before{
    width:390px;height:500px;left:-150px;bottom:-220px;transform:rotate(8deg)}
  .story-band::after{
    width:470px;height:380px;right:-190px;top:-170px;transform:rotate(-11deg);
    background-size:112px 112px;opacity:.34}
  .story-band>.wrap{position:relative;z-index:1}
  @media(max-width:639px){
    .story-band::before{display:none}
    .story-band::after{
      width:300px;height:280px;right:-150px;top:-130px;
      background-size:96px 96px;opacity:.28}
  }
  /* Begin with the story band's exact warm tone, then crossfade into Marian
     blue before the cards. This removes the horizontal seam so the two parts
     read as one continuing parish story rather than stacked colour blocks. */
  .ministries-band{
    border-top:0;
    background:linear-gradient(180deg,var(--warm) 0,var(--blue-tint) 140px)}
  @media(min-width:640px){
    .ministries-band{
      background:linear-gradient(180deg,var(--warm) 0,var(--blue-tint) 180px)}
  }


  /* ── surface treatment ──────────────────────────────────────────── --- surface treatment ---
     Eli's brief: sections read as empty coloured boxes. Three things answer that,
     applied with deliberate restraint.

     1. TEXTURE — a fine paper grain, on the LIGHT bands ONLY. Putting it everywhere
        would just change the site's base colour; the value is in the contrast with
        the clean navy bands. Inline SVG noise, so it costs no request and nothing
        to maintain.
     2. ORNAMENT — the gold rule with a cross, the classic missal device. Used in
        exactly TWO places site-wide. One ornament reads as confident; six reads as
        a funeral home, and that is the whole difference between tasteful and tacky.
     3. ILLUSTRATION lives on Our Story only — see that page. The rule: photographs
        carry the parish as it IS, illustration carries the parish as it WAS. */
  /* ── texture, in one dark band ────────────────────────────────────────────
     Eli: "not everywhere — just a few places, maybe where it could break the
     monotony." Which is the rule I wrote myself and then broke: texture on every
     ground is not texture, it is a new base colour.

     Plan Your Visit is now photographic, so it no longer needs paper grain. The
     texture remains only on Giving, where a large area of solid navy otherwise
     reads like printed ink. Everything else stays clean, and the contrast is what
     makes the grain perceptible at all.

     NOT the hero: it is a photograph with a side-blend mask and a scrim whose
     stacking was tuned over 13 iterations. A grain layer plus a blanket z-index on
     its children destroyed the mask and hid the headline outright. */
  .giving{position:relative;overflow:hidden}
  .giving::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
  /* the navy band takes more before grain reads as dirt */
  .giving::before{opacity:.9;mix-blend-mode:overlay}
  /* Abstract sanctuary light: a broad, blurred ivory-gold beam entering from
     above-left. It gives the navy field depth without pretending to document
     a real window, person or church interior. The light remains behind every
     interactive element and fades before it can wash out the fund cards. */
  .giving::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    top:-62%;left:-18%;width:78%;height:205%;
    transform:rotate(-19deg);transform-origin:50% 50%;
    background:
      radial-gradient(ellipse at 58% 63%,rgba(255,247,218,.13) 0%,rgba(255,247,218,.045) 38%,transparent 70%),
      linear-gradient(90deg,transparent 13%,rgba(255,250,232,.025) 24%,rgba(255,246,207,.14) 47%,rgba(255,246,207,.045) 66%,transparent 82%);
    filter:blur(24px);mix-blend-mode:screen;opacity:.82}
  @media(max-width:899px){
    .giving::after{
      top:-34%;left:-58%;width:150%;height:105%;
      transform:rotate(-13deg);filter:blur(22px);opacity:.68}
  }
  .giving>*{position:relative;z-index:1}
  /* The parish's own seal supplies the St. Lawrence figure—no invented saint
     artwork. This content-hashed derivative removes the seal's outer lettering
     and rings, leaving only the halo, palm and gridiron to emerge quietly from
     the lower-left edge of the light. */
  .giving>.giving-saint{display:none}
  @media(min-width:900px){
    .giving>.giving-saint{
      display:block;position:absolute;z-index:0;pointer-events:none;
      left:clamp(-185px,-11vw,-125px);bottom:-14%;
      width:clamp(470px,38vw,560px);aspect-ratio:1000/1520;
      background:url("/assets/stlawrence-watermark.0b7d2946.webp") center/contain no-repeat;
      -webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 24%,rgba(0,0,0,.78) 58%,transparent 100%);
      mask-image:radial-gradient(ellipse at 50% 48%,#000 24%,rgba(0,0,0,.78) 58%,transparent 100%);
      mix-blend-mode:screen;filter:sepia(.2);opacity:.065}
  }

  @media(prefers-reduced-motion:no-preference){}


  /* the missal device — rule, cross, rule */



  /* A second, lighter treatment for any other page with a wide empty margin. */


  /* The parish's own photograph, floated into the measure's margin. Beauty here
     comes from using a real asset properly, not from adding ornament: this image
     was previously letterboxed into a separate band, discarding ~55% of it. */
  .story-photo{margin:0 0 22px}
  .story-photo img{width:100%;height:auto;display:block;border-radius:var(--r-card);
    box-shadow:0 26px 50px -30px rgba(18,39,74,.45)}
  @media(min-width:1000px){
    .story-photo{float:right;width:44%;margin:6px -14% 24px 36px;shape-outside:margin-box}
  }

  /* Fr. Hickey's 1956 words, set as type. Cormorant italic at scale against the
     martyr's red rule — the parish's own voice carrying the page. */
  .pullquote{margin:30px 0;padding:4px 0 4px 26px;border-left:2px solid var(--red)}
  .pullquote p{font:italic 500 22px/1.45 'Cormorant Garamond',serif;color:var(--blue-deep);margin:0}
  @media(min-width:640px){.pullquote p{font-size:26px}}
  .pullquote cite{display:block;margin-top:12px;font:600 11px/1.5 'Inter';
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}

  .ornament{display:flex;align-items:center;gap:14px;margin-bottom:18px;max-width:340px}
  .ornament i{height:1px;flex:1 1;background:linear-gradient(90deg,transparent,var(--gold-soft))}
  .ornament i:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}
  .ornament span{color:var(--gold);font-size:18px;line-height:1}

  /* Our Story — illustration, where no photograph can exist */
  /* Centred measure. This was left-aligned inside the wrap after the two-column
     .story grid lost its image, leaving a 421px dead zone to its right at 1920px
     and an ornament stranded at the far edge with nothing connecting them. */
  .story-prose{max-width:60ch;margin-inline:auto}

  /* generic data table (task 6: religious-education program grid) */
  .data-table-wrap{border:1px solid var(--line-blue);border-radius:var(--r-card);overflow:hidden;background:var(--paper);overflow-x:auto}
  .data-table{width:100%;border-collapse:collapse;font-size:14px}
  @media(min-width:640px){.data-table{font-size:16px}}
  .data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-blue)}
  @media(min-width:640px){.data-table th,.data-table td{padding:14px 20px}}
  .data-table tr:last-child td{border-bottom:0}
  .data-table th{font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--blue-soft)}
  .data-table td{font:400 15.5px/1.6 'Inter';color:var(--ink)}
  .data-table td:first-child{font:600 17px/1.3 'Cormorant Garamond';color:var(--blue-deep)}

  /* bulletins index (task 7) */
  .bulletin-list{display:grid;grid-gap:2px;gap:2px;border:1px solid var(--line-blue);border-radius:var(--r-card);overflow:hidden;background:var(--line-blue)}
  .bulletin-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;background:var(--paper);padding:16px 18px;text-decoration:none;color:var(--ink);transition:background .2s;min-height:44px}
  @media(min-width:640px){.bulletin-row{padding:18px 24px;gap:10px 14px}}
  .bulletin-row:hover{background:var(--blue-tint)}
  .bulletin-row .bdate{font:600 12px/1 'Inter';letter-spacing:.1em;color:var(--muted);min-width:100px}
  .bulletin-row .bsep{color:var(--line-blue)}
  .bulletin-row .btitle{font:600 19px/1.3 'Cormorant Garamond';color:var(--blue-deep);flex:1 1}
  .bulletin-row .bread{font:600 12.5px/1 'Inter';letter-spacing:.08em;color:var(--red);white-space:nowrap;margin-left:auto}
  .bulletin-empty{font:500 16px/1.6 'Cormorant Garamond';font-style:italic;color:var(--muted);padding:30px 0}

  /* contact page office info (task 7) */
  .contact-info{display:grid;grid-gap:18px;gap:18px}
  .contact-info .row b{display:block;font:600 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
  .contact-info .row div,.contact-info .row a{font:400 16px/1.6 'Inter';color:var(--ink);text-decoration:none;white-space:pre-line}
  /* Tap-to-call, tap-to-email and Get Directions are the primary mobile actions on
     the contact page, and they measured 20px tall — under the 24px WCAG 2.5.8
     minimum. inline-block + vertical padding takes them to ~30px; they're already
     on their own lines, so nothing shifts. */
  .contact-info .row a{color:var(--blue);display:inline-block;padding:6px 0}
  .contact-info .row a:hover,.contact-info .row a:focus-visible{text-decoration:underline}

  /* ParishForm (task 7) — inputs styled like the preview feedback widget
     (concepts/feedback-widget.snippet.html): 1px line-blue border, r-chip
     radius, Inter, focus outline blue-mid. Font-size is 16px (not the
     original 15px) unconditionally — below 16px, iOS Safari zooms the
     viewport on focus regardless of breakpoint, so this can't be a
     mobile-only override; it's the one place this refactor intentionally
     changes a typographic value, per the explicit "form inputs must be
     ≥16px" outcome. */
  .pform{display:grid;grid-gap:16px;gap:16px;max-width:560px}
  .pform-row{display:grid;grid-template-columns:1fr;grid-gap:16px;gap:16px}
  @media(min-width:640px){.pform-row{grid-template-columns:1fr 1fr}}
  .pform label{display:grid;grid-gap:6px;gap:6px;font:600 12px/1 'Inter';letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
  .pform-note,.pform-help{font:400 13px/1.55 'Inter';letter-spacing:0;color:var(--muted);text-transform:none}
  .pform-note{margin-bottom:2px}
  .pform-note span,.required-mark{color:var(--red)}
  .pform-help a{color:var(--blue)}
  .pform input,.pform textarea{width:100%;border:1px solid var(--line-blue);border-radius:var(--r-chip);padding:12px 14px;font:400 16px/1.5 'Inter';color:var(--ink);background:var(--paper)}
  .pform textarea{resize:vertical;min-height:120px}
  .pform input:focus,.pform textarea:focus{outline:2px solid var(--blue-mid);outline-offset:0}
  .pform button.btn{justify-self:start;border:0;cursor:pointer}
  .pform button.btn:disabled{opacity:.6;cursor:default}
  .pform-status{font:500 14.5px/1.6 'Inter'}
  .pform-status.ok{font:500 20px/1.5 'Cormorant Garamond';color:var(--blue-deep);padding:20px 0}
  .pform-status.err{color:var(--red)}
  /* honeypot — visually hidden but not display:none (some bots skip
     display:none fields but still fill absolutely-positioned off-screen
     ones, which is exactly the behavior we want to catch). */
  .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

