@layer reset, base, layout, components, utilities;

/* ============ RESET ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, iframe { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  a { color: inherit; }
  address { font-style: normal; }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
}

/* ============ BASE / TOKENY ============ */
@layer base {
  :root {
    color-scheme: light;
    /* wartości zapasowe (jasny motyw) */
    --bg: #FFFFFF; --bg-2: #F2F4F9; --ink: #141A2E; --ink-2: #4A5270;
    --line: #D8DDE9; --line-2: #EBEEF5;
    --blue-ink: #14487C; --blue-soft: #E6EEF7; --btn: #14487C; --brass: #8F6F26; --brand: #14487C;
    /* stałe: pole hero (płaszcz Maryi) i mosiądz punktów */
    --brass-dot: #C9A45A;
    --field: #0F3760; --field-2: #0A2746; --field-3: #1A5A98;
    --on-field: #F4F6FC; --on-field-2: rgba(244, 246, 252, .74); --on-field-brass: #E9D9A8;
    --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --wrap: 1160px;
    --gutter: clamp(20px, 4vw, 40px);
    --space: clamp(72px, 9vw, 120px);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  @supports (color: light-dark(#000, #fff)) {
    :root {
      color-scheme: light dark;
      --bg: light-dark(#FFFFFF, #0A1422);
      --bg-2: light-dark(#F2F5F9, #12213A);
      --ink: light-dark(#141A2E, #EEF1F8);
      --ink-2: light-dark(#4A5270, #A9B1CC);
      --line: light-dark(#D8DEE8, #26395A);
      --line-2: light-dark(#EBEFF5, #1B2A45);
      --blue-ink: light-dark(#14487C, #A9C7EE);
      --blue-soft: light-dark(#E6EEF7, #152A45);
      --btn: light-dark(#14487C, #2F6DB5);
      --brand: light-dark(#14487C, #9CC0EE);
      --brass: light-dark(#8F6F26, #DEC178);
    }
    :root[data-theme=light] { color-scheme: light; }
    :root[data-theme=dark] { color-scheme: dark; }
  }
  @supports not (color: light-dark(#000, #fff)) { .theme-btn { display: none !important; } }

  html { scroll-behavior: smooth; scroll-padding-top: 92px; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  h1, h2, h3 { font-family: var(--display); font-weight: 600; font-stretch: 96%; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; font-optical-sizing: auto; }
  h2 { font-size: clamp(32px, 4vw, 48px); }
  h3 { font-size: 24px; line-height: 1.15; }
  .time-list li, .dial .center .time, .facts dt, .people p, .office .hours, .contact .phone, .timeline .year, .site-footer .brand-foot, .acc summary, .menu-sheet a, .video-play .label b, .tile b, .event-title { font-weight: 600; font-stretch: 96%; letter-spacing: -.02em; }
  p { text-wrap: pretty; }
  a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  a:hover { text-decoration-thickness: 2px; }
  strong { font-weight: 600; }
  :focus-visible { outline: 3px solid var(--brass-dot); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--blue-soft); }

  /* przełączanie motywu: okrągłe odsłonięcie zamiast domyślnego przenikania */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}

/* ============ UKŁAD ============ */
@layer layout {
  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--space); border-top: 1px solid var(--line-2); }
  .section-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
  .section-head { position: sticky; top: 100px; }
  .section-head p { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
  @media (max-width: 860px) {
    .section-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .section-head { position: static; }
    .section-head p { max-width: 60ch; }
  }
}

/* ============ KOMPONENTY ============ */
@layer components {
  .skip { position: absolute; left: -999px; top: 10px; z-index: 100; background: var(--field); color: #fff; padding: 10px 14px; border-radius: 8px; }
  .skip:focus { left: 10px; }

  /* --- nagłówek --- */
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line-2);
  }
  .site-header .wrap { max-width: 1300px; }
  .header-inner { display: flex; align-items: center; gap: 20px; min-height: 74px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
  .brand .mark { width: 40px; height: 40px; flex: none; color: var(--brand); }
  .brand b { display: block; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
  .brand small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
  .nav { display: flex; gap: 2px; margin-left: auto; }
  .nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 999px; color: var(--ink); white-space: nowrap; }
  .nav a:hover { background: var(--bg-2); }
  .nav a[aria-current=true] { background: var(--blue-soft); color: var(--blue-ink); }
  .header-actions { display: flex; gap: 8px; margin-left: 6px; }
  .icon-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; background: var(--bg); white-space: nowrap; }
  .icon-btn:hover { background: var(--bg-2); }
  .icon-btn svg { width: 18px; height: 18px; }
  .icon-btn kbd { font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
  .theme-btn { width: 40px; padding: 0; justify-content: center; }
  .theme-btn .icon-sun { display: none; }
  :root[data-theme=dark] .theme-btn .icon-moon { display: none; }
  :root[data-theme=dark] .theme-btn .icon-sun { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-btn .icon-moon { display: none; }
    :root:not([data-theme]) .theme-btn .icon-sun { display: block; }
  }
  .menu-btn { display: none; }
  /* zwarty nagłówek na każdej szerokości: 8 pozycji menu musi się zmieścić */
  .nav a { font-size: 14.5px; padding: 8px 9px; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { width: 40px; padding: 0; justify-content: center; }
  .header-inner { gap: 12px; }
  @media (max-width: 1240px) {
    .nav { display: none; }
    .menu-btn { display: inline-flex; }
  }
  @media (max-width: 600px) {
    .brand { flex: 1 1 auto; min-width: 0; }
    .brand > span { min-width: 0; }
    .brand b { overflow: hidden; text-overflow: ellipsis; }
    .header-inner { gap: 10px; min-height: 64px; }
    .header-actions { gap: 6px; }
    .brand .mark { width: 32px; height: 32px; }
    .brand b { font-size: 16px; white-space: normal; line-height: 1.1; overflow: visible; text-overflow: clip; }
    .menu-btn { padding: 0 10px; }
    .header-actions .theme-btn { display: none; }
    .menu-theme { display: block; }
  }
  @media (max-width: 400px) {
    .header-inner { gap: 8px; }
    .brand .mark { width: 30px; height: 30px; }
    .brand b { font-size: 15.5px; }
    .menu-btn { width: 40px; padding: 0; justify-content: center; }
    .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  }
  .menu-sheet {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; border: 0;
    max-height: 90dvh; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--bg); color: var(--ink); border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(10, 14, 30, .28);
  }
  .menu-sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 4px auto 8px; }
  .menu-sheet::backdrop { background: rgba(10, 14, 30, .45); }
  .menu-sheet a { display: block; padding: 12px 6px; font-family: var(--display); font-size: 22px; text-decoration: none; border-top: 1px solid var(--line-2); color: var(--ink); }
  .menu-sheet a:first-of-type { border-top: 0; }
  .menu-close { margin-top: 16px; width: 100%; }
  .menu-theme { display: none; width: 100%; margin-top: 10px; }

  /* --- przyciski --- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; transition: background .2s, transform .15s, border-color .2s; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--btn); color: #fff; }
  .btn-secondary { border-color: var(--line); color: var(--ink); background: var(--bg); }
  .btn-secondary:hover { background: var(--bg-2); }
  .hero .btn-primary { background: #fff; color: var(--field); }
  .hero .btn-ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
  .hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
  .link-btn { font-size: 15px; font-weight: 600; color: var(--blue-ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .link-btn:hover { text-decoration-thickness: 2px; }

  /* --- hero: płaszcz Maryi + tarcza doby --- */
  .hero::before { content: ""; position: absolute; inset: -25%; pointer-events: none;
    background: radial-gradient(38% 46% at 28% 32%, rgba(72, 118, 240, .5), transparent 62%), radial-gradient(30% 40% at 78% 18%, rgba(201, 164, 90, .2), transparent 62%), radial-gradient(44% 52% at 62% 84%, rgba(30, 72, 176, .55), transparent 62%);
    filter: blur(44px); animation: aurora 38s ease-in-out infinite alternate; }
  .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  @keyframes aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 3%, 0) rotate(7deg); } }
  /* ZDJĘCIE W HERO (opcjonalnie): na sekcji .hero ustaw style="--hero-photo: url('zdjecia/kosciol.jpg')" */
  .hero-photo { position: absolute; inset: 0; background: var(--hero-photo, none) center / cover no-repeat; opacity: .32; mix-blend-mode: luminosity; pointer-events: none; }
  .hero > .wrap { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
  @supports (animation-timeline: scroll()) {
    .site-header { animation: header-shadow linear both; animation-timeline: scroll(); animation-range: 0 140px; }
    .header-inner { animation: header-shrink linear both; animation-timeline: scroll(); animation-range: 0 140px; }
    @keyframes header-shadow { to { box-shadow: 0 10px 30px rgba(10, 14, 30, .10); } }
    @keyframes header-shrink { to { min-height: 60px; } }
  }
  .hero {
    position: relative; overflow: hidden; color: var(--on-field);
    background: radial-gradient(90% 70% at 85% 8%, var(--field-3) 0%, transparent 60%), linear-gradient(180deg, var(--field) 0%, var(--field-2) 100%);
    padding-block: clamp(52px, 7vw, 96px) clamp(48px, 6vw, 84px);
  }
  .hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
  .hero h1 { font-size: clamp(38px, 5.4vw, 70px); line-height: .96; letter-spacing: -.035em; }
  .hero .pre { display: block; font-size: .36em; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin-bottom: .5em; color: var(--on-field-2); }
  .invocation { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); color: var(--on-field-brass); margin-top: 24px; }
  .intro { max-width: 52ch; font-size: 18.5px; line-height: 1.6; color: var(--on-field-2); margin-top: 18px; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  @media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero h1 { font-size: clamp(38px, 10.5vw, 60px); }
  }

  .dial-wrap { margin: 0; }
  .dial { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
  .dial svg { width: 100%; height: 100%; overflow: visible; }
  .dial .plan { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1.2; stroke-linejoin: round; }
  .dial .ring { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.4; }
  .dial .dome { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
  .dial .tick { stroke: rgba(255, 255, 255, .42); stroke-width: 1.2; }
  .dial .tick.major { stroke: rgba(255, 255, 255, .8); stroke-width: 1.8; }
  .dial .hour { fill: rgba(255, 255, 255, .6); font-size: 11px; font-family: var(--sans); text-anchor: middle; }
  .dial .mass { fill: var(--brass-dot); stroke: var(--field); stroke-width: 2; }
  .dial .mass.past { fill: transparent; stroke: rgba(201, 164, 90, .75); stroke-width: 1.6; }
  .dial .mass-label { fill: #fff; font-size: 12.5px; font-weight: 600; text-anchor: middle; font-family: var(--sans); }
  .dial .mass-label.past { fill: rgba(255, 255, 255, .6); font-weight: 500; }
  .dial .arc { fill: none; stroke: var(--brass-dot); stroke-width: 3; stroke-linecap: round; }
  .dial .now { fill: #fff; }
  .dial .halo { fill: none; stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out infinite; }
  @keyframes halo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
  .dial .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; width: 190px; margin: auto; }
  .dial .center .lbl { font-size: 14px; color: var(--on-field-2); font-weight: 500; }
  .dial .center .time { font-family: var(--display); font-size: clamp(50px, 9vw, 70px); line-height: 1; letter-spacing: -.02em; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
  .dial .center .time.small { font-size: 21px; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
  .dial .center .in { font-size: 15px; color: var(--on-field-brass); }
  .dial-caption { text-align: center; font-size: 14px; line-height: 1.5; color: var(--on-field-2); max-width: 44ch; margin: 22px auto 0; }

  /* jedyna animacja wejścia: rysowanie planu kościoła */
  .dial .ring, .dial .plan { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) forwards; }
  .dial .plan { animation-delay: .35s; }
  .dial .marks, .dial .dome { opacity: 0; animation: fade .8s ease forwards 1.3s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .dial .ring, .dial .plan { animation: none; stroke-dashoffset: 0; }
    .dial .marks, .dial .dome { animation: none; opacity: 1; }
    .dial .halo { animation: none; opacity: 0; }
  }

  /* --- zaproszenie: film ładowany po kliknięciu --- */
  .play-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px; color: #fff; font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .5); }
  .play-link:hover { text-decoration-color: #fff; }
  .play-link svg { width: 22px; height: 22px; flex: none; }
  .video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; color: #fff; background: radial-gradient(80% 90% at 80% 10%, var(--field-3) 0%, transparent 60%), linear-gradient(180deg, var(--field) 0%, var(--field-2) 100%); }
  .video img, .video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; background: #000; }
  .video-poster { position: absolute; inset: 0; display: grid; place-items: center; }
  .video-poster svg { width: 30%; max-width: 190px; opacity: .28; color: #fff; }
  .video-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer; color: #fff; }
  .video-play:focus-visible { outline-offset: -5px; border-radius: 18px; }
  .video-play .disc { display: grid; place-items: center; width: clamp(64px, 10vw, 88px); height: clamp(64px, 10vw, 88px); border-radius: 50%; background: #fff; color: var(--field); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
  .video-play:hover .disc { transform: scale(1.06); }
  .video-play .disc svg { width: 34%; height: 34%; margin-left: 6%; }
  .video-play .label { position: absolute; left: 22px; right: 22px; bottom: 18px; text-align: left; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
  .video-play .label b { display: block; font-family: var(--display); font-size: clamp(22px, 2.8vw, 30px); line-height: 1.1; }
  .video-play .label small { display: block; font-size: 14px; color: var(--on-field-2); margin-top: 4px; }
  .video.is-playing .video-play, .video.is-playing .video-poster, .video.is-playing .video-thumb { display: none; }
  .video-caption { margin-top: 16px; color: var(--ink-2); max-width: 60ch; }
  .video-caption strong { color: var(--ink); }
  .video-text { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .video-text summary { padding: 14px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .video-text summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); flex: none; margin-right: 6px; }
  .video-text[open] summary::after { transform: translateY(3px) rotate(-135deg); }
  .video-text .body { padding: 0 0 18px; color: var(--ink-2); max-width: 62ch; }
  .video-text .body p + p { margin-top: 10px; }

  /* --- kafelki: dziś w parafii --- */
  .today { background: var(--bg-2); border-top: 1px solid var(--line-2); }
  .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-block: 16px; }
  .tile { display: grid; gap: 5px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); min-height: 112px; }
  .tile-k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .tile b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.2; }
  .tile-sub { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
  .tile-sub a { font-weight: 500; }
  .tile-next { background: var(--field); border-color: transparent; color: #fff; }
  .tile-next .tile-k, .tile-next .tile-sub { color: var(--on-field-2); }
  .tile-next b { font-size: 24px; }
  .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
  .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); flex: none; }
  .pill.open::before { background: #2E9E5B; }
  .pill.closed::before { background: #C7433B; }
  @media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .bento { grid-template-columns: 1fr; } .tile { min-height: 0; } }

  /* --- pasek szybkich akcji (telefon) --- */
  .dock { display: none; }
  @media (max-width: 760px) {
    body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
    .dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px;
      background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
      border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 40px rgba(10, 14, 30, .2); }
    .dock a { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 7px; border-radius: 16px; font-size: 11.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
    .dock a:active { background: var(--bg-2); }
    .dock svg { width: 22px; height: 22px; }
  }

  /* --- nadchodzące wydarzenia --- */
  .events { margin-bottom: 30px; }
  .events .sub { margin-top: 0; margin-bottom: 12px; }
  .events { min-width: 0; }
  .events-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
  .event { flex: 0 0 min(320px, 86%); scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--bg); }
  .event time { display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 58px; padding: 8px 6px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink); }
  .event time b { font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
  .event time span { font-size: 12.5px; font-weight: 600; }
  .event time small { font-size: 11px; color: var(--ink-2); }
  .event-title { font-family: var(--display); font-size: 17px; line-height: 1.25; }
  .event-meta { font-size: 14px; color: var(--ink-2); margin: 4px 0 8px; }
  .event .link-btn { font-size: 14px; }

  /* --- Msze --- */
  .times { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 36px 48px; }
  .times-group { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
  .times-group h3 { align-self: end; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; padding-bottom: 12px; margin: 0; border-bottom: 2px solid var(--ink); }
  .time-list { display: block; }
  .time-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0 16px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: clamp(36px, 3.4vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .time-list li.occasional { color: var(--brand); }
  .time-list li.occasional small { max-width: 24ch; }
  .time-list small { display: block; flex: 0 1 auto; max-width: 18ch; font-family: var(--sans); font-size: 13.5px; font-weight: 400; font-stretch: 100%; line-height: 1.35; color: var(--ink-2); letter-spacing: 0; text-align: right; }
  @media (max-width: 620px) { .times { grid-template-columns: 1fr; grid-template-rows: none; } .times-group { display: block; } .time-list li { padding: 14px 0 12px; } }
  .rows { margin-top: 40px; border-top: 1px solid var(--line); }
  .rows > div { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .rows dt { font-weight: 600; }
  .rows dd { color: var(--ink-2); max-width: 60ch; }
  @media (max-width: 560px) { .rows > div { grid-template-columns: 1fr; gap: 4px; } }
  .sub { font-family: var(--sans); font-size: 16px; font-weight: 600; margin-top: 40px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .chips li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; }
  .muted { color: var(--ink-2); font-size: 15px; margin-top: 14px; }

  /* --- ogłoszenia --- */
  .notices li { display: grid; grid-template-columns: minmax(0, 130px) 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
  .notices li:last-child { border-bottom: 1px solid var(--line); }
  .notices time { font-weight: 600; font-size: 15px; line-height: 1.4; display: block; }
  .notices time span { display: block; font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
  .notices p { max-width: 62ch; }
  .notice-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
  .notices-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
  @media (max-width: 560px) { .notices li { grid-template-columns: 1fr; gap: 6px; } }

  /* --- sakramenty: natywny akordeon --- */
  .acc details { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
  .acc details:last-child { border-bottom: 1px solid var(--line); }
  .acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--display); font-size: 25px; line-height: 1.15; }
  .acc summary:hover { color: var(--blue-ink); }
  .acc summary::after { content: ""; width: 11px; height: 11px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-4px) rotate(45deg); transition: transform .3s var(--ease); flex: none; margin-right: 6px; }
  .acc details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
  .acc details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
  .acc details[open]::details-content { block-size: auto; }
  .acc .body { padding: 0 0 26px; max-width: 62ch; color: var(--ink-2); }
  .acc .body p + p { margin-top: 12px; }
  .acc .body strong { color: var(--ink); }

  /* --- społeczność WhatsApp + kod QR --- */
  .wa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 36px; align-items: center; background: var(--bg-2); border-radius: 18px; padding: 28px 30px; margin-bottom: 36px; }
  .wa h3 { font-size: 25px; margin-bottom: 10px; }
  .wa p { color: var(--ink-2); max-width: 46ch; }
  .wa .wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
  .wa .btn-primary[aria-disabled=true] { opacity: .55; pointer-events: none; }
  .wa-qr { display: grid; justify-items: center; gap: 10px; }
  .wa-qr .qr { width: clamp(150px, 16vw, 196px); aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(10, 14, 30, .08); display: grid; place-items: center; text-align: center; color: #4A5270; font-size: 13px; line-height: 1.4; }
  .wa-qr .qr svg { width: 100%; height: 100%; }
  .wa-qr small { font-size: 13.5px; color: var(--ink-2); text-align: center; max-width: 22ch; }
  @media (max-width: 680px) { .wa { grid-template-columns: 1fr; padding: 22px; } .wa-qr { justify-items: start; } }

  /* --- wspólnoty --- */
  .groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .groups li { padding: 22px 0; border-top: 1px solid var(--line); }
  .groups h3 { font-size: 22px; margin-bottom: 8px; }
  .groups h3 .who { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-top: 6px; }
  .groups p { color: var(--ink-2); font-size: 16px; }
  @media (max-width: 640px) { .groups { grid-template-columns: 1fr; } }

  /* --- o parafii: oś czasu --- */
  .timeline { position: relative; padding-left: 30px; margin-bottom: 44px; }
  .timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
  .timeline::after { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--brass-dot); transform-origin: top; }
  @supports (animation-timeline: view()) {
    .timeline::after { animation: grow linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
    @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
  .timeline li { position: relative; padding: 0 0 24px; display: grid; grid-template-columns: 112px 1fr; gap: 16px; }
  .timeline li::before { content: ""; position: absolute; left: -30px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brass-dot); z-index: 1; }
  .timeline .year { font-family: var(--display); font-size: 21px; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .timeline li p { color: var(--ink-2); }
  @media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
  .prose { max-width: 64ch; }
  .prose p + p { margin-top: 14px; }
  .prose a { font-weight: 500; }
  .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
  .facts dt { font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: -.02em; }
  .facts dd { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
  @media (max-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } }

  /* --- kancelaria --- */
  .people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-bottom: 30px; }
  .people h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
  .people p { font-family: var(--display); font-size: 26px; line-height: 1.15; }
  .people .off { font-family: var(--sans); font-size: 14.5px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--ink-2); margin-top: 6px; }
  .person-contact { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
  .person-contact a { color: var(--blue-ink); font-size: 16px; text-decoration: none; overflow-wrap: anywhere; }
  .person-contact a:hover { text-decoration: underline; }
  .office { background: var(--bg-2); border-radius: 18px; padding: 28px 30px; display: grid; gap: 14px; }
  .office .hours { font-family: var(--display); font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; }
  .office p { color: var(--ink-2); max-width: 58ch; }
  .office p strong { color: var(--ink); }
  @media (max-width: 560px) { .people { grid-template-columns: 1fr; } .office { padding: 22px; } }

  /* --- kontakt --- */
  .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .map { position: relative; border-radius: 18px; overflow: hidden; background: var(--blue-soft); aspect-ratio: 4 / 3; }
  .map .pin { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue-ink); text-align: center; padding: 20px; }
  .map .pin svg { width: 40px; height: 40px; margin: 0 auto 8px; }
  .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .map-link { display: block; margin-top: 10px; font-size: 14.5px; }
  .contact address { font-size: 20px; line-height: 1.45; }
  .contact .phone { font-family: var(--display); font-size: 34px; line-height: 1.1; margin-top: 18px; }
  .contact .phone a { text-decoration: none; color: var(--ink); }
  .contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .contact .note { color: var(--ink-2); margin-top: 18px; font-size: 16px; max-width: 46ch; }
  .streets { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 70ch; }
  .streets strong { color: var(--ink); }
  .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
  .langs h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
  .langs p { color: var(--ink-2); font-size: 16px; }
  @media (max-width: 720px) { .contact, .langs { grid-template-columns: 1fr; } }

  /* --- stopka --- */
  .site-footer { background: var(--field-2); color: rgba(244, 246, 252, .72); padding: 52px 0 44px; font-size: 15px; }
  .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  .site-footer a { color: #fff; }
  .site-footer .brand-foot { font-family: var(--display); color: #fff; font-size: 23px; line-height: 1.15; margin-bottom: 10px; }
  .site-footer p + p { margin-top: 8px; }
  .footer-links li + li { margin-top: 10px; }
  .site-footer .mark { width: 34px; height: 34px; color: #fff; margin-bottom: 14px; }
  @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }

  /* --- wyszukiwarka (⌘K) --- */
  dialog.search { border: 0; border-radius: 18px; padding: 0; width: min(640px, calc(100% - 32px)); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(10, 14, 30, .35); margin: 10vh auto auto; }
  dialog.search::backdrop { background: rgba(10, 14, 30, .45); backdrop-filter: blur(4px); }
  .search-input { width: 100%; font: inherit; font-size: 19px; padding: 20px 22px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; outline: none; }
  .search-input::placeholder { color: var(--ink-2); }
  .results { max-height: 50vh; overflow: auto; padding: 8px; }
  .results li { padding: 12px 14px; border-radius: 12px; display: grid; gap: 2px; cursor: pointer; }
  .results li[aria-selected=true], .results li:hover { background: var(--blue-soft); }
  .results b { font-weight: 600; }
  .results span { font-size: 14px; color: var(--ink-2); }
  .results .empty { color: var(--ink-2); cursor: default; }
  .results .empty:hover { background: none; }
  .search-foot { padding: 10px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); display: flex; gap: 18px; flex-wrap: wrap; }
  .search-foot kbd { border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }

  /* --- powiadomienie --- */
  .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); z-index: 60; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
}

/* ============ NARZĘDZIA I DRUK ============ */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  section[id] { scroll-margin-top: 92px; }
  @media print {
    .site-header, .dial-wrap, .hero-cta, .link-btn, .btn, dialog, .map, .toast, .menu-sheet, .video, .play-link, .dock, .hero::before, .hero::after { display: none !important; }
    .hero { background: none; color: #000; padding: 0 0 16px; }
    .hero .pre, .intro, .invocation { color: #333; }
    .section { padding-block: 22px; border-top: 1px solid #bbb; }
    .section-inner { grid-template-columns: 1fr; gap: 12px; }
    .section-head { position: static; }
    .acc details::details-content { block-size: auto; }
    .site-footer { background: none; color: #000; }
    a { color: #000; text-decoration: none; }
    .wa .wa-link { display: inline !important; font-size: 10pt; word-break: break-all; }
    .wa .wa-link::after { content: ' ' attr(href); }
    .wa-qr .qr { box-shadow: none; border: 1px solid #bbb; }
    body { font-size: 12pt; }
  }
}

  /* ---------- otwarcie: jeden obraz ---------- */
  .hero-open { position: relative; min-height: min(78dvh, 820px); display: grid; align-items: center; overflow: clip; isolation: isolate; padding-block: clamp(36px, 5vh, 56px); }
  .hero-open .hero-photo { position: absolute; inset: 0; z-index: -2; background: var(--hero-photo, none) center / cover no-repeat; }
  .hero-open .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,22,.15) 0%, rgba(4,10,22,.1) 40%, rgba(4,10,22,.72) 100%); opacity: var(--photo-shade, 0); }
  .hero-open.has-photo { --photo-shade: 1; --on-field: #fff; --on-field-2: rgba(255,255,255,.8); --on-field-brass: #E9D9A8; color: #fff; }
  .hero-open .hero-plan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .hero-open .hero-plan svg { position: absolute; right: -8vw; bottom: -18vh; width: min(70vh, 60vw); color: currentColor; opacity: .06; }
  .hero-open.has-photo .hero-plan { display: none; }
  .hero-open-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr); grid-template-areas: "name live" "title live" "note live" "cue live"; gap: 18px clamp(24px, 5vw, 72px); align-items: center; }
  .hero-open .hero-name { grid-area: name; margin-bottom: 4px; max-width: 44ch; display: block; }
  .hero-open .hero-name-pre, .hero-open .hero-name-main { display: inline; font-family: var(--display); font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--on-field-2); line-height: 1.35; max-width: none; }
  .hero-open .hero-name-pre::after { content: " "; }
  .hero-open h1 { grid-area: title; font-size: clamp(40px, 6.2vw, 92px); line-height: .96; letter-spacing: -.035em; font-weight: 800; max-width: 14ch; align-self: end; animation: hero-rise 1s cubic-bezier(.2,.7,.1,1) both; }
  .hero-live { grid-area: live; display: grid; justify-items: center; text-align: center; gap: 10px; animation: hero-rise 1s .2s cubic-bezier(.2,.7,.1,1) both; }
  .hero-live .dial-wrap { margin: 0; width: 100%; max-width: 420px; }
  .hero-live .dial-caption { font-size: 13px; color: var(--on-field-2); }
  .hero-live .btn { margin-top: -6px; }
  .hero-live .play-link { font-size: 15px; }
  .hero-open-note { grid-area: note; display: flex; align-items: center; gap: 10px; font-size: clamp(16px, 1.3vw, 19px); color: var(--on-field); max-width: 46ch; line-height: 1.4; margin-top: 4px; font-family: var(--display); font-weight: 400; }
  .hero-open-note .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 4px rgba(47, 179, 107, .18); }
  .hero-open-note:empty { display: none; }
  .hero-cue { grid-area: cue; font-size: 13.5px; color: var(--on-field-2); display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .hero-cue::before { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--brass-dot), transparent); }
  @keyframes hero-rise { from { transform: translateY(22px); opacity: 0; } }
  @media (max-width: 900px) { .hero-open { min-height: 0; } .hero-open-inner { grid-template-columns: 1fr; grid-template-areas: "name" "title" "note" "cue" "live"; } .hero-live { justify-items: center; margin-top: 10px; } .hero-live .dial-wrap { max-width: 360px; } .hero-open h1 { font-size: clamp(44px, 12vw, 72px); } }
  @media (prefers-reduced-motion: reduce) { .hero-open h1, .hero-live { animation: none; } }
  /* jasny hero */
  @media (prefers-color-scheme: light) {
    html:not([data-theme=dark]) .hero-open { --on-field: var(--ink); --on-field-2: var(--ink-2); --on-field-brass: #8C6A1F; background: radial-gradient(70% 60% at 88% 0%, #DCE8F7 0%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F0F4FA 100%); border-bottom: 1px solid var(--line); }
    html:not([data-theme=dark]) .hero-open::before { background: radial-gradient(38% 46% at 28% 32%, rgba(120,160,230,.28), transparent 62%), radial-gradient(30% 40% at 78% 18%, rgba(201,164,90,.22), transparent 62%); }
    html:not([data-theme=dark]) .hero-open .btn-primary { background: var(--brand); color: #fff; }
    html:not([data-theme=dark]) .hero-open .btn-ghost { border-color: rgba(20,72,124,.4); color: var(--brand); }
    html:not([data-theme=dark]) .dial .plan { stroke: rgba(20,72,124,.28); }
    html:not([data-theme=dark]) .dial .ring { stroke: rgba(20,72,124,.55); }
    html:not([data-theme=dark]) .dial .dome { stroke: rgba(20,72,124,.14); }
    html:not([data-theme=dark]) .dial .tick { stroke: rgba(20,72,124,.38); }
    html:not([data-theme=dark]) .dial .tick.major { stroke: rgba(20,72,124,.8); }
    html:not([data-theme=dark]) .dial .hour { fill: rgba(20,72,124,.7); }
    html:not([data-theme=dark]) .dial .now { fill: var(--brand); }
    html:not([data-theme=dark]) .dial .halo { stroke: var(--brand); }
    html:not([data-theme=dark]) .dial .mass-label { fill: var(--brand); }
    html:not([data-theme=dark]) .dial .mass-label.past { fill: rgba(20,72,124,.5); }
  }
  html[data-theme=light] .hero-open { --on-field: var(--ink); --on-field-2: var(--ink-2); --on-field-brass: #8C6A1F; background: radial-gradient(70% 60% at 88% 0%, #DCE8F7 0%, transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F0F4FA 100%); border-bottom: 1px solid var(--line); }
  html[data-theme=light] .hero-open .btn-primary { background: var(--brand); color: #fff; }
  html[data-theme=light] .dial .plan { stroke: rgba(20,72,124,.28); }
  html[data-theme=light] .dial .ring { stroke: rgba(20,72,124,.55); }
  html[data-theme=light] .dial .dome { stroke: rgba(20,72,124,.14); }
  html[data-theme=light] .dial .tick { stroke: rgba(20,72,124,.38); }
  html[data-theme=light] .dial .tick.major { stroke: rgba(20,72,124,.8); }
  html[data-theme=light] .dial .hour { fill: rgba(20,72,124,.7); }
  html[data-theme=light] .dial .now { fill: var(--brand); }
  html[data-theme=light] .dial .halo { stroke: var(--brand); }
  html[data-theme=light] .dial .mass-label { fill: var(--brand); }
  html[data-theme=light] .dial .mass-label.past { fill: rgba(20,72,124,.5); }
  /* tarcza w Mszach */
  .dial-slot:empty { display: none; }
  .dial-slot { margin-top: 28px; }
  .dial-slot .dial-wrap { max-width: 360px; }
  /* spowiedź */
  #spowiedz .lead { font-size: clamp(17px, 1.3vw, 20px); max-width: 58ch; font-family: var(--display); font-weight: 400; }
  #spowiedz-extra { color: var(--ink-2); max-width: 58ch; }
  /* kafelki „W naszej parafii" */
  .section-head.wide { max-width: 64ch; margin-bottom: 28px; }
  .invite { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .invite li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
  .invite li::before { content: ""; position: absolute; left: 24px; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: var(--brass-dot, #C9A45A); }
  .invite .kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-top: 6px; }
  .invite h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.01em; }
  .invite p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; flex: 1; }
  .invite a { font-weight: 600; text-decoration: none; color: var(--blue-ink); }
  .invite a::after { content: " →"; }
  .invite a:hover { text-decoration: underline; }
  @media (max-width: 960px) { .invite { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .invite { grid-template-columns: 1fr; } }
  /* duszpasterze */
  .section-soft { background: var(--bg-2); }
  .faces-block { margin: 0; }
  .faces { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .faces li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
  .faces .avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 24px; }
  .faces .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .faces .role { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
  .faces .name { font-family: var(--display); font-size: 19px; margin: 2px 0 6px; }
  .faces q { font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--ink-2); quotes: "„" "”"; }
  .faces .more-link { display: inline-block; margin-top: 8px; font-size: 14px; }
  @media (max-width: 640px) { .faces { grid-template-columns: 1fr; } }
  /* galeria */
  .gallery { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
  .gallery figcaption { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
  @media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }
  /* wesprzyj */
  .nav-donate { background: var(--brass-dot); color: #1E1608 !important; font-weight: 700; padding-inline: 14px; margin-left: 10px; }
  .nav-donate:hover { background: #D9B86A; }
  .btn-gold { background: var(--brass-dot); color: #1E1608; border-color: transparent; }
  .btn-gold:hover { background: #D9B86A; }
  .menu-sheet .menu-donate { font-weight: 700; color: #8C6A1F; }
  .donate { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); gap: 20px; align-items: start; }
  @media (max-width: 760px) { .donate { grid-template-columns: 1fr; } }
  .donate-card { padding: 24px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 14px; }
  .donate-acct { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; word-break: break-word; }
  .donate-meta { display: grid; gap: 8px; margin: 0; }
  .donate-meta div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 15px; }
  .donate-meta dt { color: var(--ink-2); }
  .donate-meta dd { margin: 0; }
  .donate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .donate-qr { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); display: grid; gap: 12px; color: #14203A; }
  .donate-qr-code svg { width: 100%; height: auto; display: block; }
  /* jedno pismo */
  :root { --sans: 'Bricolage Grotesque', 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif; }
  body { font-family: var(--sans); font-optical-sizing: auto; }
  .nav a, .btn, .tile-k, .pill, .menu-sheet a, .dock a { font-family: var(--display); }
  .nav a { font-weight: 600; }
  .section-head p, .intro { font-family: var(--display); font-weight: 400; }
  .header-inner { overflow: hidden; }
  @media (max-width: 1400px) { .brand-city { display: none; } }
  @media (max-width: 1320px) { .nav .nav-donate { display: none; } }
  /* stopka */
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; }
  .footer-admin-link { color: rgba(255,255,255,.45) !important; font-size: 13px; }
  @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr !important; } }
  @media (max-width: 500px) { .footer-inner { grid-template-columns: 1fr !important; } }
  /* dostępność */
  .icon-btn, .btn { min-height: 44px; }
  .tile-k, .tile-sub, .faces .role, .invite .kicker, .time-list small { font-size: 13.5px; }
  .more-card:focus-visible, .invite a:focus-visible, .tile-link:focus-visible { outline: 3px solid var(--brass-dot); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
  @media print { .hero-cta, .tile-link, .form-actions, .dock { display: none !important; } }
  .small { font-size: 13.5px; }

  .face-contact { display: block; font-size: 14.5px; color: var(--brand); text-decoration: none; margin-top: 3px; }
  .face-contact:hover { text-decoration: underline; }
  .search-btn { display: none !important; }
  [hidden] { display: none !important; }

  /* ukryj bordery z ukrytych wierszy w Mszach */
  #msze .rows > div[hidden] { display: none !important; }
  #msze .rows { margin-bottom: 0; }
  #msze .dial-slot { margin-top: 20px; margin-bottom: 0; }
  #msze .section-inner { padding-bottom: 48px; }