/*
 Theme Name:   RescueNK
 Theme URI:    https://rescuenk.org
 Description:  Astra child theme for RescueNK — bilingual (EN/KO) site with a
               hand-built home template. Replaces the BeTheme page-builder
               layout the site used before the 2026 migration.
 Author:       Cornerstone
 Template:     astra
 Version:      5.24.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  rescuenk
*/

/* ---------------------------------------------------------------------------
   Typography

   The previous child theme pulled a Korean display face ('777Balsamtint') from
   a third-party CDN and forced it onto html/body with !important. That made
   every paragraph on the site — English included — render in a decorative
   display face, and put an uncached third-party host on the critical path for
   every page load.

   Body copy now uses the system stack, which already covers Hangul well on
   every platform. No external request, and Korean and English both read
   properly.
--------------------------------------------------------------------------- */

:root {
	/* --- Colour: one accent, one near-black, four tinted neutrals ----------
	   The tell of an unfinished theme is pure grey. Every well-made site in
	   this sector tints its neutrals toward the brand — warm here, since the
	   accent is warm. Eight tokens, no more.                                */
	--rnk-accent:      #C0392B;
	--rnk-accent-deep: #A02D21;
	--rnk-accent-tint: #FDF1EF;   /* selected states, quiet bands */
	--rnk-ink:         #1A1614;   /* warm near-black, never #000 */
	--rnk-ink-soft:    #5A524E;   /* body grey */
	--rnk-ink-mute:    #8C837E;   /* meta, captions, eyebrows */
	--rnk-line:        #E6E1DD;   /* hairlines and card borders */
	--rnk-bg-muted:    #FAF8F6;   /* section bands */
	--rnk-accent-ink:  #FFFFFF;

	/* --- Type: a 1.25 scale, six steps, nothing else --------------------- */
	--rnk-t-xs:   0.75rem;   /* 12 — eyebrows, meta */
	--rnk-t-sm:   0.875rem;  /* 14 */
	--rnk-t-base: 1rem;      /* 16 */
	--rnk-t-lead: 1.25rem;   /* 20 — lead paragraphs, prayer body */
	--rnk-t-h3:   1.75rem;   /* 28 */
	--rnk-t-h2:   2.5rem;    /* 40 */
	--rnk-t-h1:   3.25rem;   /* 52 — display */

	/* Two weights only. Big and light beats medium and bold; 700 muddies
	   Korean webfaces at display sizes. */
	--rnk-w-normal: 400;
	--rnk-w-semi:   600;

	--rnk-maxw:   1140px;
	--rnk-measure: 68ch;
	--rnk-gap:    clamp(1rem, 2.5vw, 2rem);
	--rnk-radius: 10px;      /* one radius, everywhere */
}

body,
.rnk-home {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic",
		"Noto Sans KR", sans-serif;
	color: var(--rnk-ink);
}

/* Astra wraps pages in its own container; the home template manages its own
   width, so let its sections run full-bleed. */
.rnk-home {
	max-width: none;
	padding: 0;
}

/* --- Hero -----------------------------------------------------------------
   Base rules; the split layout is set up further down with the rest of the
   full-bleed bands.                                                         */

.rnk-hero {
	position: relative;
	background-color: #fff;
	color: var(--rnk-ink);
}

.rnk-hero__inner {
	position: relative;
	width: 100%;
}

.rnk-hero__title {
	margin: 0 0 .6em;
	max-width: 20ch;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	line-height: 1.15;
	font-weight: 700;
	color: var(--rnk-ink);
	text-wrap: balance;
}

.rnk-hero__lede {
	margin: 0 0 1.6em;
	max-width: 46ch;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.65;
	color: var(--rnk-ink-soft);
}

.rnk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 0;
}

/* --- Buttons ------------------------------------------------------------- */

.rnk-btn {
	display: inline-block;
	padding: .7em 1.5em;
	margin: 0 .5rem .5rem 0;
	border-radius: 4px;
	background: var(--rnk-accent);
	color: var(--rnk-accent-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}

.rnk-btn:hover,
.rnk-btn:focus-visible {
	background: #1a5fd0;
	color: #fff;
	transform: translateY(-1px);
}

/* The ghost button was white-on-transparent, which was right when the only
   place it appeared was a dark hero. On the light panel it was invisible — the
   second hero action simply did not exist for a sighted reader. It now takes
   its colour from the surface it sits on. */
.rnk-btn--ghost {
	background: transparent;
	color: var(--rnk-accent-deep);
	box-shadow: inset 0 0 0 1px var(--rnk-line);
}

.rnk-btn--ghost:hover,
.rnk-btn--ghost:focus-visible {
	background: var(--rnk-accent-tint);
	box-shadow: inset 0 0 0 1px var(--rnk-accent);
}

/* On a dark surface it goes back to being white. */
.rnk-band--dark .rnk-btn--ghost,
.rnk-hero--dark .rnk-btn--ghost {
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.rnk-band--dark .rnk-btn--ghost:hover,
.rnk-hero--dark .rnk-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}

/* --- Sections ------------------------------------------------------------ */

.rnk-section {
	max-width: var(--rnk-maxw);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--rnk-gap);
}

.rnk-section--muted {
	max-width: none;
	background: var(--rnk-bg-muted);
	border-block: 1px solid var(--rnk-line);
}

.rnk-section--muted > * {
	max-width: var(--rnk-maxw);
	margin-inline: auto;
}

.rnk-section__title {
	margin: 0 0 1.4rem;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rnk-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	max-width: var(--rnk-maxw);
	margin-inline: auto;
}

.rnk-section__head .rnk-section__title { margin-bottom: 1.4rem; }

.rnk-morelink {
	font-weight: 600;
	text-decoration: none;
	color: var(--rnk-accent);
	white-space: nowrap;
}

.rnk-morelink:hover { text-decoration: underline; }

/* --- Pillars ------------------------------------------------------------- */

.rnk-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--rnk-gap);
}

.rnk-pillar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--rnk-line);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .18s ease, transform .18s ease;
}

.rnk-pillar:hover,
.rnk-pillar:focus-visible {
	box-shadow: 0 8px 26px rgba(22, 32, 43, .12);
	transform: translateY(-2px);
}

.rnk-pillar__media {
	display: block;
	aspect-ratio: 16 / 7;
	background: var(--rnk-bg-muted);
}

.rnk-pillar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rnk-pillar__body { padding: 1.1rem 1.25rem 1.4rem; }

.rnk-pillar__title {
	display: block;
	margin-bottom: .4rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.rnk-pillar__blurb {
	display: block;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--rnk-ink-soft);
}

/* --- Post cards ---------------------------------------------------------- */

.rnk-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--rnk-gap);
}

.rnk-card {
	border: 1px solid var(--rnk-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s ease, transform .18s ease;
}

.rnk-card:hover,
.rnk-card:focus-within {
	box-shadow: 0 8px 26px rgba(22, 32, 43, .12);
	transform: translateY(-2px);
}

.rnk-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.rnk-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--rnk-bg-muted);
}

.rnk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rnk-card__body {
	display: block;
	padding: 1rem 1.15rem 1.3rem;
}

.rnk-card__date {
	display: block;
	margin-bottom: .35rem;
	font-size: .8rem;
	color: var(--rnk-ink-soft);
}

.rnk-card__title {
	margin: 0 0 .45rem;
	font-size: 1.02rem;
	line-height: 1.4;
	font-weight: 650;
}

.rnk-card__excerpt {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--rnk-ink-soft);
}

.rnk-empty { color: var(--rnk-ink-soft); }

/* --- Get involved -------------------------------------------------------- */

.rnk-involve__links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.rnk-chip {
	display: inline-block;
	padding: .55em 1.1em;
	border: 1px solid var(--rnk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--rnk-ink);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.rnk-chip:hover,
.rnk-chip:focus-visible {
	border-color: var(--rnk-accent);
	color: var(--rnk-accent);
}

/* --- Free-form content the editors add to the Home page ------------------ */

.rnk-freeform { line-height: 1.7; }
.rnk-freeform img { max-width: 100%; height: auto; }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rnk-btn,
	.rnk-pillar,
	.rnk-card {
		transition: none;
	}
	.rnk-btn:hover,
	.rnk-pillar:hover,
	.rnk-card:hover {
		transform: none;
	}
}

/* --- Language switcher ---------------------------------------------------
   Appended to the primary menu rather than placed in the menu structure, so
   rebuilding the menus from code cannot drop it. Set apart from the page links
   because it changes the whole site, not the page.                          */

.rnk-lang-item > a {
	font-weight: 600;
	letter-spacing: .02em;
}

.rnk-lang-item > a::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: .9em;
	margin-right: .85em;
	vertical-align: -.06em;
	background: currentColor;
	opacity: .28;
}

@media (max-width: 921px) {
	/* Astra's off-canvas menu stacks items; the divider reads as clutter there. */
	.rnk-lang-item > a::before { display: none; }
}

/* --- Inline content sections (single-page layout) ------------------------
   The site is one page: the former RESCUE / RESTORE / OPERATION / NEWS pages
   render here as anchored sections rather than as separate thin pages.        */

.rnk-prose__body {
	max-width: 68ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--rnk-ink);
}

.rnk-prose__body > *:first-child { margin-top: 0; }
.rnk-prose__body > *:last-child  { margin-bottom: 0; }

.rnk-prose__body p { margin: 0 0 1.1em; }

.rnk-prose__body h1,
.rnk-prose__body h2,
.rnk-prose__body h3,
.rnk-prose__body h4 {
	margin: 1.8em 0 .6em;
	line-height: 1.3;
	font-weight: 650;
}

.rnk-prose__body h3 { font-size: 1.15rem; }
.rnk-prose__body h4 { font-size: 1.02rem; }

.rnk-prose__body ul,
.rnk-prose__body ol { margin: 0 0 1.1em 1.3em; }
.rnk-prose__body li { margin-bottom: .4em; }

.rnk-prose__body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.rnk-prose__body a { color: var(--rnk-accent); }

/* Anchored sections must not hide behind Astra's sticky header. */
.rnk-section[id] { scroll-margin-top: 90px; }

html { scroll-behavior: smooth; }

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


/* --- Header navigation ---------------------------------------------------
   Astra's top-level menu links compute to padding:0 here, so the items butt
   straight against each other and the header reads as one run-on string:
   "What we doOPERATIONIDRN TrainingNEWS…". Korean is worse, because Hangul has
   no inter-word spaces to fake a boundary.                                  */

.main-header-menu > .menu-item > a,
.ast-header-break-point .main-header-menu > .menu-item > a {
	padding-inline: 0.85rem;
}

/* The nav inherits Astra's link blue, so the header reads as a row of raw
   hyperlinks rather than a menu. Use the body ink, and let the accent mark the
   current section only. */
.main-header-menu > .menu-item > a {
	color: var(--rnk-ink);
}

.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item > a:focus-visible {
	color: var(--rnk-accent);
}

/* Off-canvas menu: Astra's padding targets .main-header-menu, and the page-menu
   fallback emits .nav-menu, so the links sat flush against the viewport edge. */
.ast-mobile-popup-drawer .nav-menu > ul > .menu-item > a,
.main-navigation .nav-menu > ul > .menu-item > a {
	padding: 0.7rem 20px;
}

/* --- Korean typesetting ---------------------------------------------------
   Without keep-all, Hangul breaks at arbitrary syllable boundaries — the /ko/
   H1 was splitting 구조하고 across a line break at 49.6px. Korean should break
   at eojeol (word-phrase) boundaries instead.
   `ch` is also the width of "0", and a Hangul syllable is roughly 2ch, so a
   20ch max-width gives Korean about half the measure it gives English.        */

:lang(ko) .rnk-hero__title,
:lang(ko) .rnk-section__title,
:lang(ko) .rnk-pillar__title,
:lang(ko) .rnk-card__title,
:lang(ko) .rnk-pillar__blurb,
:lang(ko) .rnk-card__excerpt,
:lang(ko) .rnk-hero__lede {
	word-break: keep-all;
	overflow-wrap: break-word;
}

:lang(ko) .rnk-hero__title { max-width: 24em; }
:lang(ko) .rnk-hero__lede  { max-width: 34em; }

/* --- Focus visibility -----------------------------------------------------
   No outline was defined anywhere, so focus fell back to a 1px dotted UA ring —
   white-on-blue on the primary button, effectively invisible. The :focus-visible
   rules elsewhere only add a hover-style lift, which is not a focus indicator. */

a:focus-visible,
button:focus-visible,
.rnk-btn:focus-visible,
.rnk-card__link:focus-visible,
.rnk-pillar:focus-visible,
.rnk-chip:focus-visible {
	outline: 2px solid var(--rnk-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.rnk-btn:focus-visible {
	outline-color: var(--rnk-ink);
}

/* --- Forms ----------------------------------------------------------------
   Hand-built rather than a plugin, matching the togetherint theme. The site
   previously printed a Contact Form 7 shortcode as visible text because the
   plugin was never installed.                                               */

.rnk-form { max-width: 34rem; margin-top: 1.5rem; }

.rnk-form__notice {
	margin: 0 0 1.25rem;
	padding: .8rem 1rem;
	border-radius: 6px;
	border: 1px solid var(--rnk-line);
	font-size: .95rem;
	line-height: 1.5;
}

.rnk-form__notice--ok    { border-color: #b7d9c0; background: #f1f9f3; color: #1c5b30; }
.rnk-form__notice--error { border-color: #e3bcbc; background: #fdf3f3; color: #8a2626; }

.rnk-field { margin: 0 0 1.15rem; }

.rnk-field label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .95rem;
}

.rnk-field input[type="text"],
.rnk-field input[type="email"],
.rnk-field select,
.rnk-field textarea {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--rnk-line);
	border-radius: 6px;
	background: #fff;
	color: var(--rnk-ink);
	font: inherit;
	line-height: 1.5;
}

.rnk-field textarea { resize: vertical; min-height: 8rem; }

.rnk-field input:focus-visible,
.rnk-field select:focus-visible,
.rnk-field textarea:focus-visible {
	outline: 2px solid var(--rnk-accent);
	outline-offset: 1px;
	border-color: var(--rnk-accent);
}

/* The consent box is a real requirement, so it reads as a sentence rather than
   a bare tickbox with a label floating above it. */
.rnk-field--check label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--rnk-ink-soft);
}

.rnk-field--check input { margin-top: .2rem; flex: 0 0 auto; }

/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   fields that are explicitly hidden, which defeats the point. */
.rnk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Modern pass — full-bleed sections, real photography, a proper type scale
   ========================================================================== */

/* --- Break out of Astra's container ---------------------------------------
   .ast-container caps everything at 1240px, so the hero and the alternating
   bands rendered as 1200px islands with white either side — at 1920px the hero
   read as a banner advert rather than a hero. The breakout is on the section,
   with an inner wrapper restoring the reading measure.                       */

.rnk-hero,
.rnk-section--muted,
.rnk-give,
.rnk-band {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.rnk-section--muted > *,
.rnk-band > * {
	max-width: var(--rnk-maxw);
	margin-inline: auto;
	padding-inline: var(--rnk-gap);
}

/* --- Hero: the split ------------------------------------------------------
   Text on paper, photograph beside it. The previous version laid white type
   over the picture, which meant a near-opaque scrim to stay legible — and a
   scrim heavy enough for that turns any photograph into a sad one. Nothing is
   darkened here, so a hopeful picture is allowed to look hopeful.

   It also asks a 768px original to cover half the viewport instead of all of
   it, which buys real sharpness until the file can be upscaled.             */

.rnk-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	align-items: stretch;
	min-height: clamp(360px, 44vw, 560px);
	overflow: hidden;
	background: #fff;
}

.rnk-hero__panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: clamp(2.5rem, 5.5vw, 4.5rem) clamp(1.25rem, 3.5vw, 3rem);
	background: linear-gradient(180deg, var(--rnk-bg-muted) 0%, #fff 100%);
}

/* Align the panel's text with the page's reading column rather than with the
   panel edge, so the headline lines up with everything below it. */
.rnk-hero__inner {
	max-width: calc(var(--rnk-maxw) / 2);
	width: 100%;
}

.rnk-hero__media {
	position: relative;
	min-height: 260px;
}

.rnk-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
}

/* A hairline seam, so the photograph meets the panel as an edge rather than a
   smudge when the two are close in tone. */
.rnk-hero__media::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 1px;
	background: var(--rnk-line);
	z-index: 1;
}

@media (max-width: 880px) {
	.rnk-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* Picture first on a phone: it is the thing that says where you are. */
	.rnk-hero__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
	.rnk-hero__media::before { inset: auto 0 0 0; width: auto; height: 1px; }
	.rnk-hero__panel { justify-content: flex-start; padding-inline: var(--rnk-gap); }
	.rnk-hero__inner { max-width: var(--rnk-measure); }
}

/* --- Type scale -----------------------------------------------------------
   Display type gets tighter tracking as it grows; body copy stays comfortable. */

.rnk-section__title {
	font-size: clamp(1.45rem, 2.6vw, 2.1rem);
	letter-spacing: -0.018em;
	line-height: 1.2;
}

.rnk-section { padding-block: clamp(3rem, 6vw, 5rem); }

/* A hairline above each band gives rhythm without drawing boxes. */
.rnk-section + .rnk-section:not(.rnk-section--muted) {
	border-top: 1px solid var(--rnk-line);
}

/* --- Media treatment ------------------------------------------------------
   A slight zoom on hover and a soft gradient foot so white card text never
   sits directly on a bright photograph.                                      */

.rnk-pillar__media,
.rnk-card__media {
	position: relative;
	overflow: hidden;
	background: var(--rnk-bg-muted);
}

.rnk-pillar__media img,
.rnk-card__media img {
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.rnk-pillar:hover .rnk-pillar__media img,
.rnk-card:hover .rnk-card__media img {
	transform: scale(1.04);
}

/* 16:9 rather than 4:3. The pillar images are a mix of 3:2 photographs and
   3.17:1 banners; a 4:3 box cropped the banners to their washed-out middle band,
   which read as an empty grey card. 16:9 keeps enough of both. */
.rnk-pillar__media { aspect-ratio: 16 / 9; }

/* Bias the crop upward: in all three photographs the faces sit above centre,
   and a centred 16:9 box took the tops of heads off. */
.rnk-pillar__media img { object-position: center 45%; }

/* --- Cards ---------------------------------------------------------------- */

.rnk-pillar,
.rnk-card {
	border-radius: 10px;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.rnk-pillar:hover,
.rnk-card:hover,
.rnk-card:focus-within {
	border-color: transparent;
	box-shadow: 0 12px 34px rgba(16, 26, 38, .14);
	transform: translateY(-3px);
}

.rnk-card__title { letter-spacing: -0.008em; }

/* Three across from ~760px, so REBUILDING never sits alone beside a void —
   auto-fit was resolving to two columns across the whole 640–860px band. */
@media (min-width: 760px) {
	.rnk-pillars { grid-template-columns: repeat(3, 1fr); }
}

/* --- Prose ---------------------------------------------------------------- */

.rnk-prose__body { font-size: 1.05rem; }
.rnk-prose__body > :first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.rnk-pillar__media img,
	.rnk-card__media img { transition: none; }
	.rnk-pillar:hover .rnk-pillar__media img,
	.rnk-card:hover .rnk-card__media img { transform: none; }
}

/* --- Partner strip --------------------------------------------------------
   The point of the site. Logos are set in greyscale at rest and colour on
   hover, so six different brand palettes do not fight the page — the usual
   treatment for a partner row, and it keeps one accent colour meaningful.    */

.rnk-partners__lede {
	margin: -0.6rem 0 2rem;
	max-width: 60ch;
	color: var(--rnk-ink-soft);
	line-height: 1.65;
}

.rnk-partners__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--rnk-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rnk-partner__link {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	height: 100%;
	padding: 1.4rem 1.25rem;
	border: 1px solid var(--rnk-line);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rnk-partner__link:hover,
.rnk-partner__link:focus-visible {
	border-color: transparent;
	box-shadow: 0 10px 28px rgba(16, 26, 38, .12);
	transform: translateY(-2px);
}

.rnk-partner__mark {
	display: flex;
	align-items: center;
	min-height: 48px;
}

.rnk-partner__mark img {
	max-height: 44px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .78;
	transition: filter .18s ease, opacity .18s ease;
}

.rnk-partner__link:hover .rnk-partner__mark img,
.rnk-partner__link:focus-visible .rnk-partner__mark img {
	filter: grayscale(0);
	opacity: 1;
}

/* Where no logo exists, the name sets as a wordmark so the row stays even. */
.rnk-partner__wordmark {
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rnk-partner__note {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--rnk-ink-soft);
}

/* --- Offices -------------------------------------------------------------- */

.rnk-offices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--rnk-gap);
}

.rnk-office p { margin: 0 0 .3rem; }
.rnk-office__label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rnk-ink-soft);
}
.rnk-office__org { font-weight: 650; }
.rnk-office__addr,
.rnk-office__tel { color: var(--rnk-ink-soft); font-size: .95rem; }
.rnk-office a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rnk-line); }
.rnk-office a:hover { color: var(--rnk-accent); border-color: currentColor; }


/* ==========================================================================
   Typographic system
   Applied after the survey of LiNK, Compassion, charity: water and LiNK Korea.
   The old settings — H1 at weight 700 with -1.27px tracking, one heading size
   below it, and a bare system-ui stack — were the main reason the page read as
   a template rather than a designed thing.
   ========================================================================== */

.rnk-home h1,
.rnk-hero__title {
	font-size: clamp(2.25rem, 4.6vw, var(--rnk-t-h1));
	font-weight: var(--rnk-w-normal);
	line-height: 1.14;
	letter-spacing: -0.02em;
}

.rnk-home h2,
.rnk-section__title {
	font-size: clamp(1.75rem, 3vw, var(--rnk-t-h2));
	font-weight: var(--rnk-w-semi);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.rnk-home h3,
.rnk-card__title,
.rnk-pillar__title {
	font-size: var(--rnk-t-h3);
	font-weight: var(--rnk-w-semi);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Cards sit in a grid and need a smaller step than a section heading. */
.rnk-card__title { font-size: 1.0625rem; line-height: 1.4; }
.rnk-pillar__title { font-size: 1.25rem; }

.rnk-hero__lede,
.rnk-partners__lede { font-size: var(--rnk-t-lead); line-height: 1.6; }

.rnk-card__excerpt,
.rnk-pillar__blurb { font-size: var(--rnk-t-base); line-height: 1.6; }

.rnk-card__date,
.rnk-office__label { font-size: var(--rnk-t-xs); }

/* --- Korean --------------------------------------------------------------
   Hangul blocks have no ascender/descender rhythm, so identical line-heights
   read tighter than in Latin — Korean needs more. And negative tracking, which
   sharpens Latin display type, collapses Hangul; it must be switched off.   */

:lang(ko) .rnk-hero__title,
:lang(ko) .rnk-section__title,
:lang(ko) .rnk-card__title,
:lang(ko) .rnk-pillar__title {
	letter-spacing: normal;
	line-height: 1.32;
}

:lang(ko) .rnk-card__excerpt,
:lang(ko) .rnk-pillar__blurb,
:lang(ko) .rnk-prose__body { line-height: 1.8; }

/* Never break Hangul mid-word. Astra will not do this for you, and it is the
   most common Korean typography failure on bilingual WordPress sites. */
.rnk-home h1, .rnk-home h2, .rnk-home h3,
.rnk-hero__title, .rnk-section__title, .rnk-card__title,
.rnk-pillar__title, .rnk-pillar__blurb, .rnk-card__excerpt,
.rnk-prose__body, .rnk-prayer__body {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* One radius everywhere — buttons were 4px against 10px cards. */
.rnk-btn, .rnk-chip, .rnk-field input, .rnk-field select,
.rnk-field textarea, .rnk-form__notice { border-radius: var(--rnk-radius); }

/* Buttons are sized from the *Korean* label: 후원하기 is four blocks where
   "Donate" is six characters, so a shared min-width stops the two language
   versions wobbling. */
.rnk-btn { min-width: 9rem; text-align: center; font-weight: var(--rnk-w-semi); }

/* Partner logos in colour at rest. The greyscale-to-colour hover is dated —
   none of the four sites surveyed still uses it. Restraint comes from opacity. */
.rnk-partner__mark img { filter: none; opacity: .82; }
.rnk-partner__link:hover .rnk-partner__mark img,
.rnk-partner__link:focus-visible .rnk-partner__mark img { opacity: 1; }

/* --- The daily prayer -----------------------------------------------------
   One featured item, readable inline, on a tinted band that separates it from
   the hero. Measure is held at ~62ch: this is the one block on the page people
   actually read.                                                             */

.rnk-prayer {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
	background: var(--rnk-bg-muted);
	border-block: 1px solid var(--rnk-line);
}

.rnk-prayer__inner {
	max-width: 62ch;
	margin-inline: auto;
	padding-inline: var(--rnk-gap);
}

.rnk-prayer__eyebrow {
	margin: 0 0 1.1rem;
	font-size: var(--rnk-t-xs);
	font-weight: var(--rnk-w-semi);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rnk-accent);
}

:lang(ko) .rnk-prayer__eyebrow { letter-spacing: .04em; text-transform: none; }

.rnk-prayer__toggle {
	display: inline-flex;
	gap: 2px;
	margin-bottom: 1.4rem;
	padding: 3px;
	border: 1px solid var(--rnk-line);
	border-radius: 999px;
	background: #fff;
}

.rnk-prayer__tab {
	padding: .38rem 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rnk-ink-soft);
	font: inherit;
	font-size: var(--rnk-t-sm);
	cursor: pointer;
}

.rnk-prayer__tab.is-active {
	background: var(--rnk-accent-tint);
	color: var(--rnk-accent-deep);
	font-weight: var(--rnk-w-semi);
}

.rnk-prayer__date {
	display: block;
	margin-bottom: .5rem;
	font-size: var(--rnk-t-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rnk-ink-mute);
}

.rnk-prayer__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: var(--rnk-w-semi);
	line-height: 1.25;
	letter-spacing: -0.015em;
}

:lang(ko) .rnk-prayer__title { letter-spacing: normal; line-height: 1.38; }

.rnk-prayer__body {
	font-size: var(--rnk-t-lead);
	line-height: 1.75;
	color: var(--rnk-ink-soft);
}

:lang(ko) .rnk-prayer__body { line-height: 1.85; font-size: 1.125rem; }

.rnk-prayer__body p { margin: 0 0 1em; }
.rnk-prayer__body > :last-child { margin-bottom: 0; }

.rnk-prayer__src,
.rnk-prayer__more { margin: 1.4rem 0 0; font-size: var(--rnk-t-sm); }

.rnk-prayer__src a,
.rnk-prayer__more a {
	color: var(--rnk-accent);
	text-decoration: none;
	font-weight: var(--rnk-w-semi);
}

.rnk-prayer__src a:hover,
.rnk-prayer__more a:hover { text-decoration: underline; }

.rnk-prayer__item[hidden] { display: none; }

/* The hero photograph is left alone. It used to carry
   grayscale(.35) brightness(.92) — a treatment that made sense when white type
   sat on top of it, and which was half the reason the picture read as bleak.
   With the type on its own panel there is nothing to compensate for. */
.rnk-hero__img { filter: saturate(1.04); }

/* ---------------------------------------------------------------------------
   "I prayed"
   The lowest rung of participation: no account, no email, one press. It sits
   inside the prayer card, at the end of the text, because that is the moment
   the reader has just finished praying.
   ------------------------------------------------------------------------ */

.rnk-prayed {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rnk-line);
}

.rnk-prayed__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.15rem;
	border: 1px solid var(--rnk-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--rnk-accent-deep);
	font: inherit;
	font-size: var(--rnk-t-sm);
	font-weight: var(--rnk-w-semi);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.rnk-prayed__btn:hover,
.rnk-prayed__btn:focus-visible { background: var(--rnk-accent-tint); }

.rnk-prayed__icon { font-size: .9em; line-height: 1; }

.rnk-prayed.is-done .rnk-prayed__btn {
	border-color: var(--rnk-line);
	background: var(--rnk-bg-muted);
	color: var(--rnk-ink-mute);
	cursor: default;
}

.rnk-prayed__count {
	margin: 0;
	font-size: var(--rnk-t-sm);
	color: var(--rnk-ink-mute);
}

.rnk-prayed__n { font-weight: var(--rnk-w-semi); color: var(--rnk-ink-soft); }
.rnk-prayed__count[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Prayer-list subscription
   Directly under the prayer, not in the footer. Every site in the survey except
   Open Doors buried this; the moment someone has just prayed is the moment they
   subscribe.
   ------------------------------------------------------------------------ */

.rnk-subscribe {
	margin-top: 1.6rem;
	padding: 1.5rem;
	border: 1px solid var(--rnk-line);
	border-radius: var(--rnk-radius);
	background: var(--rnk-bg-muted);
}

.rnk-subscribe__promise {
	margin: 0 0 .9rem;
	font-size: var(--rnk-t-base);
	font-weight: var(--rnk-w-semi);
	color: var(--rnk-ink);
}

.rnk-subscribe__row {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

.rnk-subscribe__row input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .7rem .9rem;
	border: 1px solid var(--rnk-line);
	border-radius: var(--rnk-radius);
	background: #fff;
	font: inherit;
	font-size: var(--rnk-t-sm);
	color: var(--rnk-ink);
}

.rnk-subscribe__row input[type="email"]:focus-visible {
	outline: 2px solid var(--rnk-accent);
	outline-offset: 1px;
	border-color: var(--rnk-accent);
}

.rnk-subscribe__row .rnk-btn {
	min-width: 0;
	flex: 0 0 auto;
	padding: .7rem 1.4rem;
	font-size: var(--rnk-t-sm);
}

.rnk-subscribe__check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-top: .7rem;
	font-size: var(--rnk-t-sm);
	line-height: 1.5;
	color: var(--rnk-ink-soft);
}

.rnk-subscribe__check input { margin-top: .25rem; flex: 0 0 auto; }
.rnk-subscribe__check em { font-style: normal; color: var(--rnk-ink-mute); }

.rnk-subscribe__privacy {
	margin: .8rem 0 0;
	font-size: var(--rnk-t-xs);
	line-height: 1.6;
	color: var(--rnk-ink-mute);
}

/* ---------------------------------------------------------------------------
   Giving
   Cost, not urgency. The amounts are Cornerstone's published unit prices; the
   sentence beneath them uses "could" throughout, because the mapping from a
   gift to an object is not something this site is in a position to promise.
   ------------------------------------------------------------------------ */

.rnk-give {
	padding: clamp(3rem, 7vw, 5rem) 1.25rem;
	background: var(--rnk-accent-tint);
	border-top: 1px solid var(--rnk-line);
	border-bottom: 1px solid var(--rnk-line);
}

.rnk-give__inner {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.rnk-give__eyebrow {
	margin: 0 0 .6rem;
	font-size: var(--rnk-t-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: var(--rnk-w-semi);
	color: var(--rnk-accent-deep);
}

:lang(ko) .rnk-give__eyebrow { letter-spacing: .06em; }

.rnk-give__title {
	margin: 0 0 .8rem;
	font-size: clamp(1.6rem, 3.2vw, var(--rnk-t-h2));
	font-weight: var(--rnk-w-semi);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--rnk-ink);
}

:lang(ko) .rnk-give__title { letter-spacing: normal; line-height: 1.32; }

.rnk-give__lede {
	margin: 0 auto 1.8rem;
	max-width: 34rem;
	font-size: var(--rnk-t-sm);
	line-height: 1.7;
	color: var(--rnk-ink-soft);
}

.rnk-give__freq {
	display: inline-flex;
	padding: 3px;
	margin-bottom: 1.4rem;
	border: 1px solid var(--rnk-line);
	border-radius: 999px;
	background: #fff;
}

.rnk-give__seg {
	padding: .45rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rnk-ink-soft);
	font: inherit;
	font-size: var(--rnk-t-sm);
	cursor: pointer;
}

.rnk-give__seg.is-active {
	background: var(--rnk-accent);
	color: #fff;
	font-weight: var(--rnk-w-semi);
}

.rnk-give__amounts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}

.rnk-give__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	min-width: 7.5rem;
	padding: .8rem 1rem;
	border: 1px solid var(--rnk-line);
	border-radius: var(--rnk-radius);
	background: #fff;
	color: var(--rnk-ink);
	font: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.rnk-give__chip:hover { border-color: var(--rnk-accent); }

.rnk-give__chip.is-active {
	border-color: var(--rnk-accent);
	box-shadow: inset 0 0 0 1px var(--rnk-accent);
}

/* Prices read as facts, not as a shout. Regular weight, on purpose. */
.rnk-give__krw {
	font-size: var(--rnk-t-base);
	font-weight: var(--rnk-w-normal);
	letter-spacing: -0.01em;
}

.rnk-give__usd {
	font-size: var(--rnk-t-xs);
	color: var(--rnk-ink-mute);
}

.rnk-give__chip--other { justify-content: center; }

.rnk-give__impact {
	min-height: 3.2em;
	margin: 0 auto 1.6rem;
	max-width: 32rem;
	font-size: var(--rnk-t-base);
	line-height: 1.65;
	color: var(--rnk-ink-soft);
}

.rnk-give__action { margin: 0 0 .9rem; }

.rnk-btn--lg {
	padding: .95rem 2.2rem;
	font-size: var(--rnk-t-base);
}

.rnk-give__note {
	margin: 0 0 1.4rem;
	font-size: var(--rnk-t-sm);
	color: var(--rnk-ink-soft);
}

.rnk-give__alt { margin: 0 0 1.6rem; font-size: var(--rnk-t-sm); }

.rnk-give__alt a {
	color: var(--rnk-accent-deep);
	text-decoration: none;
	font-weight: var(--rnk-w-semi);
}

.rnk-give__alt a:hover { text-decoration: underline; }

.rnk-give__fineprint {
	margin: 0 auto;
	max-width: 34rem;
	font-size: var(--rnk-t-xs);
	line-height: 1.65;
	color: var(--rnk-ink-mute);
}

@media (max-width: 480px) {
	.rnk-give__chip { min-width: 6.5rem; padding: .7rem .8rem; }
	.rnk-subscribe__row .rnk-btn { width: 100%; }
}

/* The hero headline is sized against the panel it sits in, not the viewport.
   The global h1 step assumes full-width display type; in a half-width column it
   overshot and broke a six-word line into four. */
.rnk-hero__title {
	font-size: clamp(1.85rem, 3.05vw, 2.8rem);
	max-width: 18ch;
}

:lang(ko) .rnk-hero__title { max-width: 20ch; }

/* ===========================================================================
   Pass 6 — states, density, and two layouts that were mostly empty space
   ======================================================================== */

/* --- Astra's button states ------------------------------------------------
   Astra styles every bare <button> on :hover and :focus with its own accent
   colour: `button:focus, button:hover, …` is one class heavier than a plain
   `.rnk-give__chip`, so selecting a giving amount turned it Astra blue inside
   our red border. These controls define all of their own states; the extra
   class here is only there to outweigh the theme.                          */

.rnk-give .rnk-give__chip,
.rnk-give .rnk-give__chip:hover,
.rnk-give .rnk-give__chip:focus,
.rnk-give .rnk-give__chip:active {
	background: #fff;
	color: var(--rnk-ink);
}

.rnk-give .rnk-give__chip:hover { border-color: var(--rnk-accent); }

.rnk-give .rnk-give__chip.is-active,
.rnk-give .rnk-give__chip.is-active:hover,
.rnk-give .rnk-give__chip.is-active:focus {
	background: var(--rnk-accent-tint);
	border-color: var(--rnk-accent);
	box-shadow: inset 0 0 0 1px var(--rnk-accent);
}

.rnk-give .rnk-give__seg,
.rnk-give .rnk-give__seg:hover,
.rnk-give .rnk-give__seg:focus,
.rnk-give .rnk-give__seg:active {
	background: transparent;
	color: var(--rnk-ink-soft);
}

.rnk-give .rnk-give__seg.is-active,
.rnk-give .rnk-give__seg.is-active:hover,
.rnk-give .rnk-give__seg.is-active:focus {
	background: var(--rnk-accent);
	color: #fff;
}

.rnk-prayer .rnk-prayer__tab,
.rnk-prayer .rnk-prayer__tab:hover,
.rnk-prayer .rnk-prayer__tab:focus,
.rnk-prayer .rnk-prayer__tab:active {
	background: transparent;
	color: var(--rnk-ink-soft);
}

.rnk-prayer .rnk-prayer__tab.is-active,
.rnk-prayer .rnk-prayer__tab.is-active:hover,
.rnk-prayer .rnk-prayer__tab.is-active:focus {
	background: var(--rnk-accent-tint);
	color: var(--rnk-accent-deep);
}

.rnk-prayed .rnk-prayed__btn,
.rnk-prayed .rnk-prayed__btn:focus {
	background: #fff;
	color: var(--rnk-accent-deep);
}

.rnk-prayed .rnk-prayed__btn:hover { background: var(--rnk-accent-tint); }

.rnk-prayed.is-done .rnk-prayed__btn,
.rnk-prayed.is-done .rnk-prayed__btn:hover,
.rnk-prayed.is-done .rnk-prayed__btn:focus {
	background: var(--rnk-bg-muted);
	color: var(--rnk-ink-mute);
}

/* --- Density --------------------------------------------------------------
   Every band was padded as though it were the only thing on the page. Between
   a 5rem top, a 5rem bottom and a 1.4rem gap under each heading, two adjacent
   sections put ten rem of nothing between one sentence and the next.        */

.rnk-section { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.rnk-prayer  { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.rnk-give    { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.rnk-section__title { margin-bottom: 1rem; }

/* --- The prayer band, two columns -----------------------------------------
   The prayer is measure-limited, so on a desktop the band was a column of text
   with two-thirds of its width empty. The sign-up moves into that space: no
   extra page height, and the ask now sits beside the thing it asks about.  */

.rnk-prayer__inner {
	max-width: var(--rnk-maxw);
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
}

@media (min-width: 1000px) {
	.rnk-prayer__inner {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
	}

	.rnk-prayer__rail { position: sticky; top: 6rem; }
}

.rnk-prayer__main { max-width: 62ch; }
.rnk-prayer__rail .rnk-subscribe { margin-top: 0; }
.rnk-prayer__rail .rnk-subscribe__row { flex-direction: column; }
.rnk-prayer__rail .rnk-subscribe__row .rnk-btn { width: 100%; }

@media (min-width: 1000px) {
	.rnk-prayer__more { margin-top: 1.1rem; }
}

/* --- Partners: a line, not a grid -----------------------------------------
   Six organisations in a `repeat(auto-fit, minmax(230px, 1fr))` grid wrapped to
   a ragged 4 + 2 and gave every logo a paragraph of its own, which read as a
   list of things rather than a row of organisations.                        */

.rnk-partners__head { margin-bottom: 1.6rem; }
.rnk-partners__head > * { max-width: var(--rnk-measure); }
.rnk-partners__lede { margin: 0; font-size: var(--rnk-t-base); color: var(--rnk-ink-soft); }

.rnk-partners__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 1.1rem .5rem;
	border-block: 1px solid var(--rnk-line);
	list-style: none;
}

.rnk-partner { flex: 0 1 10rem; max-width: 13rem; }

.rnk-partner__link {
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	height: 100%;
	padding: .9rem .6rem;
	border: 0;
	border-radius: var(--rnk-radius);
	background: transparent;
	text-align: center;
	box-shadow: none;
}

.rnk-partner__link:hover,
.rnk-partner__link:focus-visible {
	background: var(--rnk-bg-muted);
	box-shadow: none;
	transform: none;
}

.rnk-partner__mark { justify-content: center; min-height: 56px; }

/* Larger, now that the marks are not sharing the row with three lines of
   caption each. */
.rnk-partner__mark img { max-height: 52px; opacity: .92; }
.rnk-partner__link:hover .rnk-partner__mark img { opacity: 1; }
.rnk-partner__wordmark { font-size: 1.05rem; }

/* The caption is gone from the markup; this keeps it gone if a stale copy of
   the template is ever rendered. */
.rnk-partner__note { display: none; }

/* --- Contact beside the offices ------------------------------------------- */

.rnk-contactblock__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.rnk-contactblock__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.rnk-contactblock__offices { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--rnk-line); }
	.rnk-offices { grid-template-columns: 1fr; gap: 1.4rem; }
}

.rnk-contactblock .rnk-section__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

/* --- Pillars: give the photograph the weight ------------------------------ */

.rnk-pillar__media { aspect-ratio: 16 / 10; }
.rnk-pillar__body { padding: 1.15rem 1.25rem 1.35rem; }

/* --- Section eyebrows -----------------------------------------------------
   A small accent label above each heading. The bands were all identical — a
   black heading on a white or grey ground — and identical bands read as plain
   however well the type is set. This is the cheapest thing that gives a page
   rhythm, and it is the same device the daily prayer already used. */

.rnk-eyebrow {
	margin: 0 0 .45rem;
	font-size: var(--rnk-t-xs);
	font-weight: var(--rnk-w-semi);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rnk-accent);
}

:lang(ko) .rnk-eyebrow { letter-spacing: .05em; }

/* The head was a space-between flex row, built for "heading … see all". With an
   eyebrow added, the eyebrow took the left end and the heading was flung to the
   right. It stacks now; the "see all" link, when there is one, goes underneath
   the heading rather than opposite it. */
/* Stacked, but still laid out by whatever band contains it.
   Narrowing the head itself to a reading measure took it out of the centring
   that `.rnk-section--muted > *` applies to every other child, so inside a
   full-bleed band the heading sat at the window's edge while the cards under it
   stayed in the container — a 230px step between a title and its own content.
   The measure belongs on the lines, not on the box. */
.rnk-section__head {
	display: block;
	margin-bottom: 1.4rem;
}

.rnk-section__head > * { max-width: var(--rnk-measure); }
.rnk-section__head .rnk-section__title { margin-bottom: 0; }
.rnk-section__head .rnk-morelink { display: inline-block; margin-top: .6rem; }

/* --- Latest, as text ------------------------------------------------------
   Without a thumbnail the card needs its own structure: a rule at the top in
   the accent, a date, and a title that carries the card. */

.rnk-card__link {
	border-top: 2px solid var(--rnk-accent);
	border-radius: 0 0 var(--rnk-radius) var(--rnk-radius);
}

.rnk-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.rnk-card__date { display: block; margin-bottom: .4rem; color: var(--rnk-ink-mute); }
.rnk-card__title { margin: 0 0 .5rem; }

/* --- Giving: the numbers should carry the band --------------------------- */

.rnk-give__lede { font-size: var(--rnk-t-base); margin-bottom: 1.6rem; }
.rnk-give__krw { font-size: var(--rnk-t-lead); }
.rnk-give__chip { min-width: 8.5rem; padding: .95rem 1.1rem; }

.rnk-give__impact {
	font-size: var(--rnk-t-lead);
	line-height: 1.55;
	color: var(--rnk-ink);
	max-width: 30ch;
}

.rnk-give__note { font-size: var(--rnk-t-sm); }

/* --- Two things the screenshots caught -----------------------------------*/

/* `flex: 1 1 16rem` on the email input is a *width* basis in the row layout,
   and the rail turns that row into a column — where flex-basis is height. The
   field rendered sixteen rems tall with the button stranded underneath it. */
.rnk-prayer__rail .rnk-subscribe__row > input[type="email"] {
	flex: 0 0 auto;
	width: 100%;
}

/* Astra's scroll-to-top arrives in Astra's blue, which is the one other colour
   on the page and sits in the corner of the giving band arguing with the
   button next to it. */
#ast-scroll-top {
	background-color: var(--rnk-accent);
	color: #fff;
	border-radius: 999px;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus { background-color: var(--rnk-accent-deep); color: #fff; }

/* ===========================================================================
   Pass 7 — taking the link states back from the parent theme

   Astra colours links with `a:hover, a:focus { color: … }` — specificity
   (0,1,1), which beats a bare `.rnk-btn` (0,1,0). Every one of our links and
   buttons was therefore one hover away from turning Astra blue, and the primary
   hero button rendered blue-on-red the moment it was focused.

   `:is()` takes the specificity of its heaviest argument, so
   `.rnk-btn:is(:hover, :focus)` is (0,2,0) and wins outright. Listing :link and
   :visited alongside is not belt-and-braces — an unvisited and a visited link
   are different selectors to the cascade, and Astra styles both.
   ======================================================================== */

.rnk-btn,
.rnk-btn:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	color: var(--rnk-accent-ink);
	background: var(--rnk-accent);
	text-decoration: none;
}

.rnk-btn:is(:hover, :focus-visible) { background: var(--rnk-accent-deep); }

.rnk-btn--ghost,
.rnk-btn--ghost:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	color: var(--rnk-accent-deep);
	background: transparent;
}

.rnk-btn--ghost:is(:hover, :focus-visible) { background: var(--rnk-accent-tint); }

/* Text links that carry our own colour. */
.rnk-prayer__src a,
.rnk-prayer__more a,
.rnk-give__alt a,
.rnk-morelink,
.rnk-office__org a,
.rnk-office__tel a {
	color: var(--rnk-accent-deep);
}

.rnk-prayer__src a:is(:link, :visited, :hover, :focus, :active),
.rnk-prayer__more a:is(:link, :visited, :hover, :focus, :active),
.rnk-give__alt a:is(:link, :visited, :hover, :focus, :active),
.rnk-morelink:is(:link, :visited, :hover, :focus, :active),
.rnk-office__org a:is(:link, :visited, :hover, :focus, :active),
.rnk-office__tel a:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-accent-deep);
}

/* Cards and the partner marks are whole-block links; their text must keep the
   ink colour it was set in rather than becoming a link colour on hover. */
.rnk-card__link,
.rnk-card__link:is(:link, :visited, :hover, :focus, :active),
.rnk-pillar,
.rnk-pillar:is(:link, :visited, :hover, :focus, :active),
.rnk-partner__link,
.rnk-partner__link:is(:link, :visited, :hover, :focus, :active) {
	color: inherit;
	text-decoration: none;
}

/* One focus ring, ours, and only for keyboard focus. Astra leaves the UA's
   1px dotted ring in place, which on the red button is a dotted blue box. */
.rnk-btn:focus:not(:focus-visible),
.rnk-prayer__tab:focus:not(:focus-visible),
.rnk-give__chip:focus:not(:focus-visible),
.rnk-give__seg:focus:not(:focus-visible),
.rnk-prayed__btn:focus:not(:focus-visible),
.rnk-partner__link:focus:not(:focus-visible),
.rnk-card__link:focus:not(:focus-visible),
.rnk-pillar:focus:not(:focus-visible) {
	outline: none;
}

/* ===========================================================================
   Pass 8 — the hero takes the window, the header sits on it
   ======================================================================== */

:root { --rnk-header-h: 80px; }

/* --- The header ----------------------------------------------------------
   Fixed, so the hero photograph starts at the top of the window instead of
   below an 80px white band. Over the photograph it is a dark translucent wash;
   past the hero it turns solid white. The state is a class on <body>, so with
   JS off the header stays solid — the readable state, not the pretty one. */

#masthead {
	position: fixed;
	inset: 0 0 auto;
	z-index: 99;
	transition: background-color .25s ease, box-shadow .25s ease;
}

/* Every page but the front has no hero to overlay, so it clears the bar.
   Astra already gives #primary a 60px top margin, which is enough breathing
   room on its own — the padding here only replaces the space the header used
   to occupy before it was taken out of the flow. */
.rnk-solid-header #content { padding-top: var(--rnk-header-h); }

/* On the front page that same 60px margin was the white strip above the hero:
   the header is fixed and takes no space, but Astra's margin still did. The
   bottom half of it was the empty band above the footer. Both go — every
   section on this page carries its own padding. */
/* `!important` because Astra sets this from `.ast-plain-container.ast-no-sidebar
   #primary`, three classes deep — a body class and an id cannot reach it. */
.rnk-has-overlay-header #primary { margin-block: 0 !important; }

/* Astra paints the bar on inner wrappers rather than on #masthead, and it
   paints a *different* wrapper above and below its own header breakpoint — so
   naming the two I could see in a narrow window left a white bar across every
   real desktop. Nothing inside the header should carry its own ground while it
   is floating on a photograph, so nothing does. `!important` because Astra
   emits its header colours as inline customiser CSS, which lands after this
   file whatever the specificity. */
.rnk-has-overlay-header:not(.rnk-scrolled) #masthead,
.rnk-has-overlay-header:not(.rnk-scrolled) #masthead * {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	box-shadow: none !important;
}

/* The wash lives on the hero, not on the header.
   Astra's header wrappers clip their overflow, so a gradient hung off the
   bottom of #masthead was cut dead at the bar's edge — which is exactly what a
   flat grey band pasted across the top of a photograph looks like. Painted
   inside the hero it can fade over its full length, and it stops being a bar
   and starts being light. */
.rnk-has-overlay-header:not(.rnk-scrolled) .rnk-hero::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 15rem;
	z-index: 1;
	background: linear-gradient(to bottom,
		rgba(8, 13, 18, .72) 0%,
		rgba(8, 13, 18, .58) 18%,
		rgba(8, 13, 18, .36) 40%,
		rgba(8, 13, 18, .14) 68%,
		rgba(8, 13, 18, 0) 100%);
	pointer-events: none;
}

.rnk-has-overlay-header:not(.rnk-scrolled) .site-title a,
.rnk-has-overlay-header:not(.rnk-scrolled) .main-header-menu a,
.rnk-has-overlay-header:not(.rnk-scrolled) .ast-builder-menu a,
.rnk-has-overlay-header:not(.rnk-scrolled) .menu-toggle,
.rnk-has-overlay-header:not(.rnk-scrolled) .menu-toggle .ast-mobile-svg {
	color: #fff;
	fill: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .35);
}

/* Scrolled past the hero, and every non-front page. */
.rnk-scrolled #masthead { box-shadow: 0 1px 0 var(--rnk-line), 0 6px 20px rgba(16, 26, 38, .06); }

/* Astra's hamburger arrives in Astra's blue on every page. */
.menu-toggle,
.menu-toggle .ast-mobile-svg { color: var(--rnk-ink); fill: var(--rnk-ink); }

/* --- The hero, taller and photograph-led ---------------------------------
   Full-bleed picture taking most of the window, with the words on a light card
   laid over its lower-left rather than set directly on the image. The card is
   why this can be both photograph-led and bright: only the small area behind
   the type is covered, and it is covered with paper, not with shadow. */

.rnk-hero {
	display: block;
	position: relative;
	/* Contain the stack. The rotating frames, the card and the wash all carry a
	   z-index; without a stacking context of its own they compete at the root
	   with everything else positioned on the page, including the fixed header.
	   Isolating costs nothing and removes a whole class of bug. */
	isolation: isolate;
	min-height: clamp(600px, 86vh, 900px);
	padding: 0;
	overflow: visible;
	/* Not ink. This ground shows for a moment as one photograph cross-fades
	   into the next, and while the first one decodes; near-black reads as the
	   page having gone out rather than as a transition. A mid-tone lifted from
	   the photographs themselves disappears into them. */
	background: #4a5344;
}

.rnk-hero__media {
	position: absolute;
	inset: 0;
	/* An explicit height, even though `inset: 0` already stretches this box.
	   Belt and braces for the `height: 100%` on the photographs inside: a
	   percentage wants a definite basis, and `inset` plus the hero's
	   `min-height` is not obviously one. */
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.rnk-hero__media::before { content: none; }

.rnk-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

/* The card is before the picture in the markup — the words are the content and
   the photograph is the setting — so it needs a layer to sit on. Both are
   positioned, and without this the later element simply painted over it. */
.rnk-hero__panel {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: clamp(2rem, 5vh, 4rem);
	transform: translateX(-50%);
	width: min(100% - 2 * var(--rnk-gap), var(--rnk-maxw));
	padding: 0;
	background: none;
	display: block;
}

.rnk-hero__inner {
	max-width: 32rem;
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	border-radius: var(--rnk-radius);
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 18px 50px rgba(12, 18, 24, .18);
}

.rnk-hero__title { margin-bottom: .5em; }
.rnk-hero__lede { margin-bottom: 1.2em; }

@media (max-width: 880px) {
	/* The card cannot overlap a phone-width photograph without covering the
	   faces, so the picture takes a band of its own and the card sits beneath
	   it, pulled up far enough to overlap the edge and read as one object.
	   The card comes first in the markup, so the picture is ordered ahead of
	   it rather than the markup being written for the small screen. */
	.rnk-hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		/* The ink ground exists to sit behind a photograph that covers the whole
		   band. Here the card sits on the page, not on the picture, so the ink
		   showed as a black frame around it. */
		background: #fff;
	}

	.rnk-hero__media {
		order: -1;
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
		max-height: 56vh;
		min-height: 0;
	}

	.rnk-hero__panel {
		position: relative;
		z-index: 1;
		left: auto;
		bottom: auto;
		transform: none;
		width: 100%;
		margin-top: -2rem;
		padding-inline: var(--rnk-gap);
	}

	.rnk-hero__inner {
		max-width: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #fff;
	}

	/* The picture is a band here rather than the whole hero, so the wash fades
	   over a shorter run and never reaches the card. */
	.rnk-has-overlay-header:not(.rnk-scrolled) .rnk-hero::before { height: 10rem; }

	/* Two actions, one row. Stacked full-width buttons read as a form, and
	   this is a choice between two places to go. */
	.rnk-hero__actions { flex-wrap: nowrap; }
	.rnk-hero__actions .rnk-btn { flex: 1 1 0; min-width: 0; margin: 0; padding-inline: .75em; }
}

/* --- Footer ---------------------------------------------------------------
   Four short columns on an ink ground. On every page but the home page this is
   the only place the offices and the outward links appear at all, so it earns
   its height — which is the difference between a footer and the empty band it
   replaced.                                                                 */

.rnk-footer {
	background: var(--rnk-ink);
	color: rgba(255, 255, 255, .72);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.rnk-footer__inner {
	max-width: var(--rnk-maxw);
	margin-inline: auto;
	padding-inline: var(--rnk-gap);
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.rnk-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.rnk-footer__mark {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
	font-weight: var(--rnk-w-semi);
	letter-spacing: -0.01em;
	color: #fff;
}

.rnk-footer__line { margin: 0 0 .7rem; font-size: var(--rnk-t-sm); line-height: 1.6; }

.rnk-footer__note {
	margin: 0;
	font-size: var(--rnk-t-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
	max-width: 30ch;
}

.rnk-footer__head {
	margin: 0 0 .7rem;
	font-size: var(--rnk-t-xs);
	font-weight: var(--rnk-w-semi);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

:lang(ko) .rnk-footer__head { letter-spacing: .05em; }

.rnk-footer__col ul { margin: 0; padding: 0; list-style: none; }
.rnk-footer__col li { margin-bottom: .4rem; }

.rnk-footer a,
.rnk-footer a:is(:link, :visited, :hover, :focus, :active) {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: var(--rnk-t-sm);
}

.rnk-footer a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; }

.rnk-footer__office { margin: 0 0 .55rem; font-size: var(--rnk-t-sm); }

.rnk-footer__officelabel {
	display: block;
	font-size: var(--rnk-t-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

/* Astra's copyright bar sits under it; on the ink ground its default white
   band was a bright stripe across the bottom of the page. */
.site-below-footer-wrap {
	background: var(--rnk-ink) !important;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: .9rem !important;
}

.site-below-footer-wrap,
.site-below-footer-wrap * { color: rgba(255, 255, 255, .45) !important; font-size: var(--rnk-t-xs); }

/* --- Seven days -----------------------------------------------------------
   A cycle is read forward, one day at a time, and the reader needs to know
   where they are in it. So: a numbered rail down the left, one entry per day,
   and the prayer set apart from the report it follows.                      */

.rnk-week { margin-block: 2rem; }

.rnk-week__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rnk-line);
}

.rnk-week__daylink {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--rnk-line);
	border-radius: 999px;
	font-size: var(--rnk-t-sm);
	font-weight: var(--rnk-w-semi);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.rnk-week__daylink,
.rnk-week__daylink:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-ink-soft);
	text-decoration: none;
}

.rnk-week__daylink:is(:hover, :focus-visible) {
	border-color: var(--rnk-accent);
	background: var(--rnk-accent-tint);
	color: var(--rnk-accent-deep);
}

.rnk-week__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.rnk-day {
	display: grid;
	gap: 1.25rem;
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--rnk-line);
	scroll-margin-top: 6rem;
}

.rnk-day:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 760px) {
	.rnk-day { grid-template-columns: 5rem minmax(0, 1fr); gap: 2rem; }
}

.rnk-day__marker { line-height: 1; }

.rnk-day__label {
	display: block;
	font-size: var(--rnk-t-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rnk-ink-mute);
}

.rnk-day__n {
	display: block;
	margin-top: .1rem;
	font-size: 2.6rem;
	font-weight: var(--rnk-w-normal);
	letter-spacing: -0.03em;
	color: var(--rnk-accent);
}

.rnk-day__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	font-weight: var(--rnk-w-semi);
	line-height: 1.25;
	letter-spacing: -0.015em;
}

:lang(ko) .rnk-day__title { letter-spacing: normal; line-height: 1.38; }

.rnk-day__standfirst {
	margin: 0 0 1.1rem;
	font-size: var(--rnk-t-lead);
	line-height: 1.6;
	color: var(--rnk-ink-soft);
	max-width: 46ch;
}

.rnk-day__text { max-width: var(--rnk-measure); line-height: 1.75; color: var(--rnk-ink-soft); }
.rnk-day__text p { margin: 0 0 1em; }
.rnk-day__text > :last-child { margin-bottom: 0; }

.rnk-day__scripture {
	margin: 1.4rem 0 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--rnk-line);
	max-width: 46ch;
}

.rnk-day__scripture p {
	margin: 0 0 .35rem;
	font-size: var(--rnk-t-base);
	line-height: 1.65;
	font-style: italic;
	color: var(--rnk-ink);
}

.rnk-day__scripture cite {
	font-style: normal;
	font-size: var(--rnk-t-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rnk-ink-mute);
}

/* The prayer is the point of the day, not a footnote to it. */
.rnk-day__pray {
	margin-top: 1.5rem;
	padding: 1.15rem 1.3rem;
	border-radius: var(--rnk-radius);
	background: var(--rnk-accent-tint);
	max-width: 50ch;
}

.rnk-day__praylabel {
	margin: 0 0 .35rem;
	font-size: var(--rnk-t-xs);
	font-weight: var(--rnk-w-semi);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rnk-accent-deep);
}

:lang(ko) .rnk-day__praylabel { letter-spacing: .05em; }

.rnk-day__prayer { margin: 0; font-size: var(--rnk-t-base); line-height: 1.7; color: var(--rnk-ink); }

.rnk-day__src { margin: 1rem 0 0; font-size: var(--rnk-t-sm); }

.rnk-day__src a,
.rnk-day__src a:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-accent-deep);
	text-decoration: none;
	font-weight: var(--rnk-w-semi);
}

.rnk-day__src a:hover { text-decoration: underline; }

/* --- A cycle page ---------------------------------------------------------
   Astra gives a page the full container width, which sets the introduction at
   about 150 characters a line. These are reading pages.                     */

.rnk-week-page .entry-content,
.rnk-week-page .entry-header {
	max-width: var(--rnk-maxw);
	margin-inline: auto;
}

.rnk-week-page .entry-content > p { max-width: var(--rnk-measure); }

.rnk-week-page .entry-title {
	max-width: 22ch;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	font-weight: var(--rnk-w-normal);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

:lang(ko) .rnk-week-page .entry-title { letter-spacing: normal; line-height: 1.3; }

.rnk-week-page .entry-content > p:first-of-type {
	font-size: var(--rnk-t-lead);
	line-height: 1.65;
	color: var(--rnk-ink-soft);
}

/* The end of a cycle: where to go next, and what to read. */
.rnk-week__end {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--rnk-line);
}

@media (min-width: 760px) {
	.rnk-week__end { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.rnk-week__nexttitle {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: var(--rnk-w-semi);
	line-height: 1.25;
}

.rnk-week__nexttitle a,
.rnk-week__nexttitle a:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-ink);
	text-decoration: none;
}

.rnk-week__nexttitle a:hover { color: var(--rnk-accent-deep); }

.rnk-week__nextnote {
	margin: 0;
	max-width: 46ch;
	font-size: var(--rnk-t-sm);
	line-height: 1.65;
	color: var(--rnk-ink-soft);
}

.rnk-week__reading ul { margin: 0; padding: 0; list-style: none; }
.rnk-week__reading li { margin-bottom: .45rem; font-size: var(--rnk-t-sm); }

.rnk-week__reading a,
.rnk-week__reading a:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-accent-deep);
	text-decoration: none;
}

.rnk-week__reading a:hover { text-decoration: underline; }

/* --- A rotating hero ------------------------------------------------------
   All the pictures are stacked and cross-faded. Only opacity animates, which
   is compositor-only work — no layout, no paint, and nothing that competes
   with the page still loading underneath.                                   */

/* One frame visible at a time, cross-faded.
   An earlier version tried to keep every frame opaque and stack them, fading
   the incoming one in on top so the ground could never show through. It looked
   right on paper and rendered black — two of the frames kept the incoming
   class and nothing painted. Not worth the cleverness: the dip is handled
   instead by what sits behind, which is a mid-tone taken from the photographs
   rather than near-black ink, so a momentary crossover reads as a soft flash
   and not as the page going out. */
.rnk-hero__img {
	opacity: 0;
	transition: opacity 1.1s ease-in-out;
}

.rnk-hero__img.is-active { opacity: 1; }

/* The classroom is 4:3 and crops hard in a wide band; bias it up so the
   children's heads survive rather than their desks. */
.rnk-hero__media img { object-position: center 38%; }

@media (prefers-reduced-motion: reduce) {
	.rnk-hero__img { transition: none; }
}

/* --- Share links --------------------------------------------------------- */

.rnk-share {
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rnk-line);
	max-width: var(--rnk-maxw);
	text-align: center;
}

.rnk-share__label {
	margin: 0 0 .8rem;
	font-size: var(--rnk-t-xs);
	font-weight: var(--rnk-w-semi);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rnk-ink-mute);
}

:lang(ko) .rnk-share__label { letter-spacing: .05em; }

.rnk-share__list {
	display: flex;
	justify-content: center;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rnk-share__list img { display: block; opacity: .85; transition: opacity .15s ease; }
.rnk-share__list a:hover img { opacity: 1; }

/* --- The one navigation item that asks for something ---------------------
   Giving sits last and reads as a button. Eight identical links give a reader
   no idea which one the page wants them to press. */

/* Scoped through #masthead: an id outweighs anything Astra can reach for with
   classes, and both sides were already using !important, so specificity was
   the only thing left deciding it. */
#masthead .rnk-nav-cta > a,
#masthead .rnk-nav-cta > a:is(:link, :visited, :hover, :focus, :active) {
	display: inline-block;
	padding: .45em 1.15em !important;
	border-radius: 999px;
	background-color: var(--rnk-accent) !important;
	color: #fff !important;
	font-weight: var(--rnk-w-semi);
	text-shadow: none !important;
	line-height: 1.5;
	transition: background .15s ease;
}

#masthead .rnk-nav-cta > a:is(:hover, :focus-visible) { background-color: var(--rnk-accent-deep) !important; }

/* Astra draws its own hover underline/indicator on menu items. */
#masthead .rnk-nav-cta > a::before,
#masthead .rnk-nav-cta > a::after { display: none !important; }

/* Over the photograph the accent is dark enough to read on its own, but a
   hairline keeps its edge off a busy background. */
.rnk-has-overlay-header:not(.rnk-scrolled) .rnk-nav-cta > a {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 10px rgba(0, 0, 0, .25);
}

/* In the off-canvas menu a full-width pill reads as a button, not a link. */
.ast-mobile-header-content .rnk-nav-cta > a,
.ast-mobile-popup-drawer .rnk-nav-cta > a {
	display: block;
	text-align: center;
	margin: .6rem var(--rnk-gap);
}

/* --- A day's photograph ---------------------------------------------------
   Above the heading rather than beside it: these are establishing shots — a
   market, a village street, a classroom — and they set the scene the report is
   about. Beside the text they would compete with the prayer block below. */

.rnk-day__media {
	margin: 0 0 1.25rem;
	max-width: var(--rnk-measure);
	overflow: hidden;
	border-radius: var(--rnk-radius);
	background: var(--rnk-bg-muted);
}

.rnk-day__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 45%;
}

/* --- The "what we do" pages ----------------------------------------------
   Four areas of work, each naming the organisation that does it. The pages
   were four-line lists with nothing behind them, which made three links off
   the homepage into three dead ends. */

.rnk-pagelead {
	max-width: 48ch;
	font-size: var(--rnk-t-lead);
	line-height: 1.6;
	color: var(--rnk-ink-soft);
	margin-bottom: 2rem;
}

.rnk-workareas {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.rnk-workareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rnk-workarea {
	padding-top: 1.15rem;
	border-top: 2px solid var(--rnk-accent);
}

.rnk-workarea h2 {
	margin: 0 0 .5rem;
	font-size: 1.15rem !important;
	font-weight: var(--rnk-w-semi);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

:lang(ko) .rnk-workarea h2 { letter-spacing: normal; line-height: 1.4; }

.rnk-workarea p { margin: 0 0 .7rem; font-size: var(--rnk-t-sm); line-height: 1.7; color: var(--rnk-ink-soft); }

.rnk-workarea__link { margin: 0 !important; }

.rnk-workarea__link a,
.rnk-workarea__link a:is(:link, :visited, :hover, :focus, :active) {
	color: var(--rnk-accent-deep);
	font-weight: var(--rnk-w-semi);
	text-decoration: none;
}

.rnk-workarea__link a:hover { text-decoration: underline; }

.rnk-pagecta { margin: 0; }

/* These pages come through Astra's default page template, which gives the
   content the full container. They read better at a measure. */
.page .entry-content > .rnk-pagelead,
.page .entry-content > .rnk-workareas,
.page .entry-content > .rnk-pagecta,
.page .entry-content > h2,
.page .entry-content > p { max-width: var(--rnk-maxw); margin-inline: auto; }

/* --- The other kinds of work ---------------------------------------------
   A reader who lands on RESCUE from a search result had no way to reach
   RESTORE except by going back to the homepage and finding the card again.
   The three pages are one idea in three parts. */

.rnk-pillarnav {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--rnk-line);
	max-width: var(--rnk-maxw);
	margin-inline: auto;
}

.rnk-pillarnav > ul {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.rnk-pillarnav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rnk-pillarnav a,
.rnk-pillarnav a:is(:link, :visited, :hover, :focus, :active) {
	display: block;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--rnk-line);
	border-radius: var(--rnk-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.rnk-pillarnav a:is(:hover, :focus-visible) {
	border-color: var(--rnk-accent);
	box-shadow: 0 6px 20px rgba(16, 26, 38, .07);
}

.rnk-pillarnav__title {
	display: block;
	margin-bottom: .35rem;
	font-size: 1.1rem;
	font-weight: var(--rnk-w-semi);
	line-height: 1.3;
	color: var(--rnk-ink);
}

.rnk-pillarnav__blurb {
	display: block;
	font-size: var(--rnk-t-sm);
	line-height: 1.6;
	color: var(--rnk-ink-soft);
}

/* The share icons are 64px files drawn at 30; the intrinsic size is in the
   markup so the layout does not shift while they load. */
.rnk-share__list img { width: 30px; height: 30px; }