/* ==========================================================================
   Parafia Św. Marii Magdaleny — 2026
   A small, modern stylesheet. No webfont downloads, no CSS framework.

   Loaded BEFORE css/fixes.css, which must stay last: it carries the
   mobile and accessibility work. See HANDOFF.md §6 and §11.

   Two decisions worth stating up front:

   1. NO WEBFONTS. The site loads 0 bytes of typeface and makes no
      third-party font request. That is worth having on a parish site —
      faster on a phone, nothing to consent to, and no third party seeing
      which pages parishioners read. The display face is the reader's own
      system serif, the text face their system sans.

   2. THE BRAND COLOUR IS AN ACCENT, NOT A TEXT COLOUR. --accent is
      measured out of the hero photograph and lands at 3.01:1, which fails
      WCAG AA for text (4.5:1). It is used for rules, tints and UI edges.
      Text uses --accent-ink at 6.61:1, the same hue carried darker. This is
      a property of the photograph, not an accident of tuning: the warm
      mid-tones in the image are simply too light to be body text.
   ========================================================================== */

:root {
	/* BRAND — measured out of the hero photograph, not chosen by eye.

	   The hero is not the blue-green people assume. Sampling it gives sand
	   #e3b782 at 37.8% of the frame, bronze #b48a5a at 25.4%, cream #f5eac2 at
	   16.8% and rust #864f32 at 16.1% — 96% warm. The teal in the picture is
	   the stained glass, and it is only 3.8% of it.

	   So the accent is rust in light mode and sand in dark, taken from the
	   photograph, and the neutrals are warmed to match rather than left as the
	   cool grey-green they were. Ratios are measured against this file's own
	   --paper and --paper-2, not against white:

	     --accent       3.38:1  rules and underlines only, never text
	     --accent-ink   6.61:1  links and body accents
	     --accent-deep  8.06:1  headings

	   Those are measured against --paper-2, the warm off-white the page
	   actually sits on, not against pure white. --accent was first picked at
	   3.01:1 on white and that is NOT good enough: on the real page
	   background it fell to 2.73:1, under the 3:1 that WCAG 1.4.11 wants
	   from a UI boundary. It is darkened until it clears on --paper-2.
	   check_palette.py reads the tokens out of this file and re-tests every
	   pair, in both modes, so it cannot drift.

	   A cyan was tried first, from an Aether/Omarchy palette. It is a
	   dark-mode-only idea: it has to be darkened to about #076360 to pass on
	   white, which is very nearly the teal this replaced, so in light mode it
	   measured a change of only 25 units against the old heading. Against the
	   dark surface it was excellent. Warm was kept because it is the only
	   option that is visibly different in BOTH modes and is actually in the
	   photograph. HANDOFF.md §11a has the numbers. */
	--accent:      #c07b58;   /* 3.06:1 on --paper-2 — rules, UI edges */
	--accent-soft: #f4ece4;   /* band behind day headings */
	--accent-tint: #fbf6f0;   /* faintest wash */
	--accent-ink:  #864f32;   /* 6.61:1 on white — links */
	--accent-deep: #74442b;   /* 8.06:1 on white — headings */

	/* ink — the neutrals are warmed to sit with the accent rather than
	   fight it. These are the same lightnesses as the cool greys they
	   replace; only the hue has moved toward the photograph. */
	--ink:    #1c1611;
	--ink-2:  #453a30;     /* 8.6:1 */
	--ink-3:  #6b5c4d;     /* 5.6:1 */
	--line:   #e3dad1;
	--paper:  #ffffff;
	--paper-2:#f7f3ef;

	/* type — two faces, on purpose. The parish's own serif for headings and a
	   system sans for everything else.

	   A third, --font-mono, was defined here and used in exactly one place,
	   the Mass times in the intentions table, where it set the same
	   information the footer already sets in the body font. It is gone, and
	   with it the temptation to reach for a "data" face that this design does
	   not otherwise have. If a monospace is ever genuinely wanted, add the
	   token back deliberately rather than reintroducing it for one number. */
	--font-text:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

	--step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--step-1:  clamp(1.15rem, 1.09rem + 0.3vw, 1.3125rem);
	--step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.625rem);
	--step-3:  clamp(1.6rem, 1.4rem + 1vw, 2.125rem);
	--step-4:  clamp(1.9rem, 1.55rem + 1.75vw, 3rem);

	/* space + shape */
	--sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
	--radius: 10px;
	--radius-lg: 16px;
	--maxw: 74rem;
	--shadow: 0 1px 2px rgba(20, 40, 36, .06), 0 8px 24px rgba(20, 40, 36, .06);
	--focus: #0b5fcc;
	--focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--focus);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--paper-2);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--step-0);
	line-height: 1.65;
	/* The one thing the whole layout depends on. */
	overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; }

/* ------------------------------------------------------------ a11y base */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	left: var(--sp-3);
	top: -100vh;
	z-index: 999;
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
	color: #fff;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 700;
	text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* The back-to-top target. Empty and zero-height so it costs no layout and
   shows up in no tab order; it exists purely so `href="#gora"` resolves.
   The header above it is sticky, so anchoring here parks the masthead at the
   top of the viewport rather than underneath it. */
.top-anchor { display: block; height: 0; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

/* ---------------------------------------------------------------- header */
.site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	/* Sticky, but only where there is room for it. */
	position: sticky;
	top: 0;
	z-index: 50;
}

/* THE FIX for the scaffold's header bug.
   A two-row grid: brand on row 1, nav on row 2. The previous version made
   the nav a flex item in a single horizontal row, so between roughly 700px
   and 1300px the logo wrapped to three lines and the nav to two, and on a
   phone opening the menu dropped the links on top of the logo. A grid gives
   each one its own row, so there is no width at which they can collide. */
.site-header__bar {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"brand toggle"
		"nav   nav";
	align-items: center;
	column-gap: var(--sp-4);
	/* Measured cramped: the two rows were flush at 0px and the bar had only
	   12px of padding, so the nav ran straight into the wordmark and the whole
	   thing read as one dense block. row-gap was 0 because nothing collided
	   at the time — the grid made collision impossible, and that got mistaken
	   for "no space needed". Both are now generous but still compact: the
	   header is sticky, so every px here is a px off the viewport. */
	row-gap: var(--sp-2);
	padding-block: var(--sp-4);
}

/* The parish is named in text, not by the drawn logo image.
   The logo is a 394x100 PNG with the name baked into it in a script face,
   which made it unselectable, unsearchable and illegible to a screen reader
   beyond its alt text — and it repeated the name already in the page title,
   the h1 and the footer. Boom drew it at its full 394px width, which is why
   that header was so tall. As text: 0 bytes, sharp at any size, and the
   parish's own colour becomes an accent rather than a body colour.

   The name comes from the CMS, so renaming the parish renames the header. */
.brand {
	grid-area: brand;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	/* Was 2px, which set the two lines of the lockup almost on top of each
	   other — the tightest spot in the header by a wide margin. */
	gap: 5px;
	text-decoration: none;
	line-height: 1.1;
	min-width: 0;
}
.brand__kicker {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--accent-ink);
}
.brand__name {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	color: var(--accent-deep);
	/* Long Polish names must wrap rather than widen the page. */
	overflow-wrap: break-word;
}
.brand:hover .brand__name { color: var(--accent-ink); }
.brand:hover .brand__kicker { color: var(--accent-deep); }

@media (min-width: 768px) {
	.brand__name { font-size: var(--step-3); }
}
/* On a phone the parish name is 206px of text and the column left over beside
   the Menu button is 222px at 360px but only 182px at 320px, so a fixed size
   wraps to two lines on the narrowest phones and makes the header needlessly
   tall. Scaling with the viewport keeps it on one line everywhere: measured
   2 lines at 320px before, 1 line after, header 168px -> 130px. */
@media (max-width: 479px) {
	.brand__name { font-size: clamp(1.05rem, 5vw, 1.25rem); }
}

.nav-toggle {
	/* The toggle only exists below the breakpoint. Hidden by default so a
	   desktop visitor is never offered a control that does nothing — the
	   previous measurement caught it sitting next to an already-open nav at
	   every width from 768px up. */
	display: none;
	grid-area: toggle;
	justify-self: end;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;       /* tap target */
	padding: var(--sp-2) var(--sp-3);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.nav-toggle__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .18s ease, top .18s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.main-nav {
	grid-area: nav;
	min-width: 0;    /* lets the flex children shrink instead of forcing overflow */
}
.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	/* Column gap was 12px, tight enough that the eight page names read as one
	   run of text rather than a menu. */
	gap: var(--sp-1) var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-nav a {
	display: block;
	padding: var(--sp-2) var(--sp-1);
	color: var(--ink-2);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.main-nav a:hover { color: var(--accent-ink); }
.main-nav li.current a,
.main-nav a[aria-current="page"] {
	color: var(--accent-deep);
	border-bottom-color: var(--accent);
}

/* The nav collapses behind the toggle only when it genuinely needs to. */
@media (max-width: 767px) {
	/* The desktop padding buys air where there is room for it; on a phone the
	   same header is sticky over a much shorter viewport, where 16px of padding
	   is 16px of content permanently off the screen. Measured: 127px at 360px
	   wide with 16px, 119px with 12px, on a 667px viewport. Keep the desktop
	   air, hand the phone its height back. */
	.site-header__bar { padding-block: var(--sp-3); }
	.nav-toggle { display: inline-flex; }
	.main-nav {
		grid-column: 1 / -1;
		grid-area: nav;
		border-top: 1px solid var(--line);
		/* row-gap already separates the rows; this was doubling up with it. */
		margin-top: 0;
	}
	.main-nav[hidden] { display: none; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav a {
		padding: var(--sp-3) var(--sp-2);
		border-bottom: 1px solid var(--line);
		white-space: normal;
	}
}

/* ------------------------------------------------- liturgy widget: GONE
   The niedziela.pl widget used to be injected into the header. It is removed
   from this theme, so these two rules no longer match anything and are deleted
   rather than left as dead code.

   The matching rules in fixes.css (§9 and §9b) are still there and are now
   inert. That file stays byte-identical to Boom's, where the widget is still
   in use, so it is not ours to tidy. */

/* ------------------------------------------------------------------ hero */
/* The church photograph, homepage only, full-bleed. It replaces the old
   full-width slider, which loaded the same 116 KiB JPG on every page and
   moved by itself. As a <picture> with WebP and three widths it is 18 KiB on
   a phone and 68 KiB on a desktop.

   A fixed band height with object-fit:cover rather than the image's own
   aspect ratio: the source is 2.8:1, which would be 128px tall on a 360px
   phone and 457px on a 1280px desktop. A band that scales with the viewport
   is predictable and never dominates. */
.hero {
	margin: 0;
	background: var(--accent-soft);
	line-height: 0;
}
.hero picture { display: block; }
.hero img {
	display: block;
	width: 100%;
	height: clamp(170px, 26vw, 320px);
	object-fit: cover;
	object-position: center 45%;
	border: 0;
}
@media (max-width: 479px) {
	.hero img { height: 180px; }
}

/* The photograph is a bright, high-key interior. Measured against the real
   render it has a relative luminance of 0.243, while the dark page surface
   behind it is 0.020 — twelve times brighter than everything around it. On a
   phone at night that is genuinely painful, and a page that opens with a flash
   of white light is the classic reason people turn dark mode back off.

   So in dark mode the hero carries a flat tint, taking it from 0.243 down to
   0.075: a 69% reduction in emitted light, and close to the 3.7x the page
   surface itself throws off. Opacity was picked by measuring 0.30 through
   0.60 and reading the trade-off curve, not by eye:

     opacity  relLum  detail kept
     0.30     0.126   69.6%
     0.40     0.098   59.9%
     0.50     0.075   50.3%   <- shipped
     0.60     0.054   40.8%

   A tint rather than `filter: brightness()` because brightness() rescales the
   whole tonal range and so flattens the picture: measured, brightness(.5)
   contrast(1.35) reached 0.048 but retained only 47.1% of the detail, losing
   to the 0.50 tint on BOTH axes at once — darker AND blurrier. The photograph
   is the reason the band is there; a mask that erases it defeats the point.

   CORRECTION, kept deliberately: an earlier revision of this comment claimed
   the overlay "measured as a flat fill, stddev 0.00, photograph gone", and
   chose the filter on that basis. That measurement was wrong. The hero <img>
   carries decoding="async", and an async-decoded image under a filter or an
   overlay is frequently unrasterised at screenshot time — so the capture
   caught an empty box. Re-measured with decoding="sync" and a 15s budget, the
   overlay renders the photograph perfectly well. The stddev-0.00 signature is
   a capture artefact, not a property of the overlay. If you ever re-measure
   this band, force sync decode first, or you will measure the harness. */
@media (prefers-color-scheme: dark) {
	.hero { position: relative; }
	.hero::after {
		content: "";
		position: absolute;
		inset: 0;
		/* Warm-black, not teal-black: the mask sits on the photograph, and a
		   cool tint over a warm image reads as a grey haze. This is the dark
		   page surface carried warmer still. */
		background: #1a1512;      /* the dark page surface, warmed */
		opacity: .5;
		pointer-events: none;
	}
}

/* ----------------------------------------------------------------- main */
.site-main { padding-block: var(--sp-5) var(--sp-8); }

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
}
/* Sidebar joins the main column from 900px up. minmax(0,1fr) on the first
   track is what stops a long unbroken word widening the page.

   The sidebar was 20rem and is now 22rem. It carries the widest thing on the
   page — the collection-banner image, which is 1880x929 and therefore wants
   every pixel it can get — plus a two-column quick-links list. Widening it
   also shaves the main column, which is a small readability win: the body
   measure drops from 92 to ~88 characters.

   What deliberately did NOT change is --maxw. It stays 74rem (1184px) at
   every viewport width, and that is not an oversight. Measured, the main text
   column is 718px, which is already 92 characters per line at 16px — past the
   45-75 that is comfortable to read. The container cannot get wider without
   the lines getting longer, because the sidebar and the card padding are
   already spoken for. So the spare room on a large monitor is spent in
   theme.css, by making the type bigger instead of the box wider: same
   measure, fewer characters across it, everything easier to read. */
@media (min-width: 900px) {
	.layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-7); }
	.layout__side { position: sticky; top: 6rem; }
}

.layout__main {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
	box-shadow: var(--shadow);
	min-width: 0;
}
@media (min-width: 768px) {
	.layout__main { padding: var(--sp-6); }
}

.page-title {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1.15;
	font-weight: 700;
	color: var(--accent-deep);
}
.page-title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: var(--sp-3);
	background: var(--accent);
	border-radius: 2px;
}

.prose { max-width: 68ch; }
.prose :where(h1, h2, h3, h4) {
	font-family: var(--font-display);
	line-height: 1.2;
	color: var(--accent-deep);
	margin: var(--sp-6) 0 var(--sp-3);
}
.prose :where(h1) { font-size: var(--step-3); }
.prose :where(h2) { font-size: var(--step-2); }
.prose :where(h3) { font-size: var(--step-1); }
.prose :where(p, li) { margin-block: 0 var(--sp-4); }
.prose :where(a) { color: var(--accent-ink); }
.prose :where(a:hover) { color: var(--accent-deep); }
.prose :where(img) { border-radius: var(--radius); }
.prose :where(blockquote) {
	margin: var(--sp-5) 0;
	padding: var(--sp-3) var(--sp-4);
	border-left: 4px solid var(--accent);
	background: var(--accent-tint);
}
.prose :where(table) { width: 100%; border-collapse: collapse; }
.prose :where(th, td) { padding: var(--sp-2); border: 1px solid var(--line); text-align: left; }

/* News posts, as emitted by the CMS. The heading level is fixed in the CMS
   core, not the theme, so the theme only styles what arrives. */
.nm_post {
	padding-block: var(--sp-5);
	border-bottom: 1px solid var(--line);
}
.nm_post:first-of-type { padding-top: 0; }
.nm_post_title {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.2;
	color: var(--accent-deep);
}
.nm_post_title a { color: inherit; text-decoration: none; }
.nm_post_title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.nm_post_date {
	margin: 0 0 var(--sp-3);
	color: var(--ink-3);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.nm_post_image img { border-radius: var(--radius); }
.nm_post_content p { margin: 0 0 var(--sp-3); }
.nm_page_nav {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	padding-top: var(--sp-5);
}
.nm_page_nav a,
.nm_page_nav span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-2); text-decoration: none;
}
.nm_page_nav .current span { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.nm_page_nav .ellipsis { border-color: transparent; min-width: auto; }

/* --------------------------------------------------------- intentions */
.intencje {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.intencje caption {
	caption-side: top;
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--accent-deep);
	padding-bottom: var(--sp-3);
}
.intencje thead th {
	text-align: left;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ink-3);
	border-bottom: 2px solid var(--line);
	padding: var(--sp-2);
}
.intencje__day th {
	background: var(--accent-soft);
	color: var(--accent-deep);
	font-family: var(--font-display);
	font-size: var(--step-1);
	text-align: left;
	padding: var(--sp-3);
	border-top: 1px solid var(--line);
}
.intencje__note td {
	font-style: italic;
	color: var(--ink-3);
	font-size: var(--step--1);
	padding: var(--sp-1) var(--sp-3);
}
.intencje td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.intencje__time {
	width: 5.5rem;
	white-space: nowrap;
	font-weight: 700;
	color: var(--accent-ink);
	/* This was set in the monospace face, and it was the only place in the
	   theme that used it. Dropped, for two reasons.

	   The footer's "Godziny Mszy Świętych" shows the SAME times — 18:00,
	   czwartek, 18:00 — in the body font, with no override. The same piece of
	   information was therefore being set two different ways on one page, and
	   the footer was right: nothing about a Mass time is machine data.

	   And the reason to reach for monospace in the first place was digit
	   alignment, which is already handled without changing the typeface:
	   `font-variant-numeric: tabular-nums` is set on .intencje above, so the
	   digits in "07:00" and "18:00" occupy equal widths in whatever font is
	   in use. Monospace was buying nothing.

	   The weight and the accent stay: those are what make the time
	   scannable down a column. */
	font-size: 1em;
}

/* Several intentions for one Mass. Each gets its own line and its own visible
   number, which is what the parish asked for: the source numbers them 1, 2, 3,
   4 under a single time, and run together in one cell they were unreadable.

   The numbers are the browser's own, not CSS counters. A counter draws the
   digit with `content`, which is decoration the accessibility tree never sees,
   so a screen reader announces an unnumbered run of names. A real <ol> is
   announced as a list with a position, and the numbers renumber themselves if
   a Mass ever gains or loses one. ::marker only recolours them.

   list-style is restated because Boom's reset sets `li { margin-left: 20px;
   margin-bottom: 15px }` and `ol li { list-style: decimal outside }`, and that
   15px gap between every intention is far too loose here. */
.intencje__list {
	margin: 0;
	padding-left: 1.7rem;
	list-style: decimal outside;
}
.intencje__list li {
	list-style: decimal outside;
	margin: 0 0 var(--sp-2) 0;
	padding: 0;
}
.intencje__list li:last-child { margin-bottom: 0; }
.intencje__list li::marker {
	font-weight: 700;
	color: var(--accent-ink);
	/* Body font, like the time beside it. The marker is an ordinal, not a
	   measurement — "2." in monospace read as a value, which is the opposite
	   of what it is. */
	font-family: var(--font-text);
}

.mmr-raw { margin-top: var(--sp-6); }
.mmr-raw > summary {
	cursor: pointer;
	color: var(--ink-3);
	font-size: var(--step--1);
	padding: var(--sp-2) 0;
}
.mmr-raw__body { color: var(--ink-3); font-size: var(--step--1); }

/* ----------------------------------------------------------------- side */
.layout__side { min-width: 0; }
.layout__side :where(.sb-banner, .sb-live) { margin-bottom: var(--sp-5); }
.layout__side :where(.sb-banner img, .sb-live img) {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius);
}
.layout__side :where(.sb-links) {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- footer */
.site-footer {
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding-block: var(--sp-7) var(--sp-5);
	margin-top: var(--sp-7);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--sp-6);
}
.site-footer__col h2 {
	margin: 0 0 var(--sp-3);
	font-size: var(--step-1);
	font-family: var(--font-display);
	color: var(--accent-deep);
}
.site-footer__col :where(p, address, dl) {
	margin: 0 0 var(--sp-3);
	color: var(--ink-2);
	font-style: normal;
}
.site-footer__col :where(a) { color: var(--accent-ink); }
.godziny { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.godziny dt { font-weight: 600; color: var(--ink); }
.godziny dd { margin: 0; }
.godziny__uwaga { color: var(--ink-3); font-size: var(--step--1); }
.site-footer__nav { margin: 0; padding: 0; list-style: none; }
.site-footer__nav li { margin-bottom: var(--sp-1); }
.site-footer__base {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
	justify-content: space-between;
	font-size: var(--step--1);
	color: var(--ink-3);
}
.site-footer__base p { margin: 0; }
.site-footer__more { font-size: var(--step--1); }

.goto-top {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 40;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	background: var(--accent-ink);
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.goto-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.goto-top:hover { background: var(--accent-deep); }

/* --------------------------------------------------------------- dark mode */
@media (prefers-color-scheme: dark) {
	/* The photograph again, inverted for a dark surface. Sand and cream are
	   the bright things in the frame, so they are what carries the accent
	   here, and the neutrals are warmed to match. Measured against --paper
	   #16201e:

	     --accent       5.34:1
	     --accent-ink   9.02:1
	     --accent-deep 13.84:1                                        */
	:root {
		--ink:    #f0e8dc;
		--ink-2:  #cbbfae;
		--ink-3:  #a3968a;
		--line:   #3a2f26;
		--paper:  #191412;
		--paper-2:#141010;
		--accent:      #b48a5a;
		--accent-soft: #2a211a;
		--accent-tint: #241c16;
		--accent-ink:  #e3b782;
		--accent-deep: #f5eac2;
		--focus: #ffb27a;
		--shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
	}
	.goto-top { background: var(--accent-ink); color: #241a10; }
	.skip-link { background: #fff; color: #000; }
}

/* ----------------------------------------------------------------- print
   The Mass times are the thing people actually print, and the audit found
   the schedule unprintable. This makes a clean sheet of it. */
@media print {
	:root { --ink: #000; --ink-2: #000; --ink-3: #333; }
	body { background: #fff; font-size: 11pt; }
	.site-header, .site-footer, .nav-toggle, .goto-top,
	.layout__side, .skip-link, .mmr-raw, .easysocialbar,
	#cbcookies-top, .nm_page_nav { display: none !important; }
	.layout { display: block; }
	.layout__main { border: 0; box-shadow: none; padding: 0; }
	a { color: #000; text-decoration: none; }
	.intencje { font-size: 10.5pt; }
	.intencje__day th { background: #eee !important; color: #000; }
	.intencje thead th { border-bottom: 1.5pt solid #000; }
	.intencje td { border-bottom: .5pt solid #bbb; }
	.intencje tr, .nm_post { break-inside: avoid; }
	.intencje__day th { break-after: avoid; }
	.page-title::after { background: #000; }
}