/* MMI Alma — tokens, fonts, reset, type, buttons, motion. */

/* ---------- Fonts (licensed Tiempos + Basier; OFL handwriting) ---------- */
@font-face { font-family: "Tiempos Headline"; src: url(../fonts/TiemposHeadline-300-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(../fonts/TiemposHeadline-300-Light-Italic.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(../fonts/TiemposHeadline-400-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(../fonts/TiemposHeadline-400-Regular-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(../fonts/TiemposHeadline-500-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url(../fonts/TiemposText-400-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url(../fonts/TiemposText-400-Regular-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url(../fonts/TiemposText-500-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Basier Circle"; src: url(../fonts/BasierCircle-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Basier Circle"; src: url(../fonts/BasierCircle-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Basier Circle"; src: url(../fonts/BasierCircle-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Basier Circle"; src: url(../fonts/BasierCircle-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Basier Circle"; src: url(../fonts/BasierCircle-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zeyada"; src: url(../fonts/Zeyada.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Loved by the King"; src: url(../fonts/LovedbytheKing.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens: Alma roles, Marriage Matters colours ---------- */
:root {
	/* Dara's colour system, 2 Nov 2026, with her change of 3 Nov: Burgundy and Deep Wine in place of the purples.
	   Gold and Rose never carry text on light backgrounds. */
	--wine: #3d1020;
	--wine-deep: #2a0a15;
	--wine-soft: #521a2e;
	--burgundy: #7a2048;
	--rose: #f4a9c4;
	--gold: #d99a2b;
	--dusty-blush: #f0dce7;
	--blush-white: #faf5f7;
	--white: #fff;

	/* Roles. The older names point at the palette, so every page follows it. */
	--ink: var(--wine);
	--text: #4d3a42;
	--muted: #6b5a60;
	--plum: var(--wine);
	--plum-hover: var(--wine-soft);
	--plum-deep: var(--wine-deep);
	--plum-mid: var(--burgundy);
	--plum-grad: linear-gradient(140deg, #3d1020 0%, #4a1427 55%, #58182f 100%);
	--blush: var(--rose);
	--gold-ink: var(--burgundy);
	--sand: var(--blush-white);
	--ivory: var(--blush-white);
	--cream: var(--dusty-blush);
	--promo: var(--dusty-blush);
	--line: #ecdfe6;
	--line-strong: #d6c3ce;
	--open: #b0788a;

	--serif: "Tiempos Headline", "Tiempos Text", Georgia, "Times New Roman", serif;
	--serif-text: "Tiempos Text", Georgia, serif;
	--sans: "Basier Circle", "Helvetica Neue", Arial, sans-serif;
	--hand: "Zeyada", "Segoe Script", cursive;
	--hand-2: "Loved by the King", "Segoe Print", cursive;

	--container: 1360px;
	--gutter: 40px;
	--header-h: 80px;
	--radius-card: 16px;
	--radius-hero: 24px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--shadow-panel: 0 2px 24px rgba(0, 0, 0, .16);
	--shadow-soft: 0 18px 50px -18px rgba(61, 16, 32, .28);
}

@media (max-width: 1024px) { :root { --gutter: 24px; } }
@media (max-width: 480px) { :root { --gutter: 16px; --header-h: 68px; } }

/* Inner pages follow Alma's page templates rather than its home page: a 1280px column,
   16px body copy, square photos and 8px cards. The header and footer keep the home widths. */
body:not(.home) .site-main { --container: 1280px; --radius-hero: 0px; --radius-card: 8px; font-size: 16px; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[class], ol[class], nav ul) { list-style: none; padding: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { line-height: 1.2; }
/* Burgundy rings on light; Rose on Deep Wine, where Burgundy would vanish. */
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 4px; }
:is(.site-footer, .is-dark, [data-dark]) :focus-visible { outline-color: var(--rose); }
::selection { background: var(--blush); color: var(--ink); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--wine); color: var(--white); padding: 10px 16px; border-radius: 4px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-main:focus { outline: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.container--text { max-width: calc(720px + var(--gutter) * 2); }
.section { padding-block: 64px; }
.section--sand { background: var(--sand); }
.section--blush { background: var(--dusty-blush); }
.section--ivory { background: var(--ivory); }

/* ---------- Type ---------- */
.eyebrow { font-family: var(--sans); font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: 1.12px; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 12px; }
/* On Deep Wine, small labels take the gold. */
.eyebrow--light { color: var(--gold); }
.section-title { font-family: var(--serif); font-size: 44px; line-height: 1.2; font-weight: 300; letter-spacing: -.88px; color: var(--ink); text-wrap: balance; }
.section-title em { font-style: italic; }
.section-head--center { text-align: center; margin-inline: auto; max-width: 860px; }
.section-head { margin-bottom: 32px; }
.section-head .eyebrow { margin-bottom: 24px; line-height: 20px; }
body:not(.home) .site-main .section-title { font-size: 36px; line-height: 1.25; letter-spacing: -.5px; }
.lede { font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--text); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--burgundy); text-decoration: none; }
.text-link .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.text-link:hover .icon, .text-link:focus-visible .icon { transform: translateX(4px); }
.text-link:hover span:first-child, .text-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

@media (max-width: 768px) {
	.section { padding-block: 48px; }
	.section-title { font-size: 32px; letter-spacing: -.5px; }
	body:not(.home) .site-main .section-title { font-size: 28px; line-height: 1.25; }
	.section-head { margin-bottom: 28px; }
	.eyebrow { font-size: 14px; }
	.lede { font-size: 18px; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 4px; font-family: var(--sans); font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 1; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--nav { height: 38px; padding: 0 16px; border-width: 2px; font-size: 14px; }
.btn--nav.btn--light { border-color: rgba(61, 16, 32, .3); }
/* Button hierarchy: Burgundy on light backgrounds, Rose on Deep Wine. Gold is never a button. */
.btn--nav.btn--solid { border-color: var(--burgundy); }
.btn--nav.btn--solid:hover { border-color: var(--wine); }
.btn--solid { background: var(--burgundy); color: var(--white); }
.btn--solid:hover { background: var(--wine); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn--light:hover { border-color: var(--burgundy); color: var(--burgundy); }
.btn--pill { height: 56px; padding: 0 28px; border-radius: 999px; font-size: 18px; }
.btn--lg { height: 56px; padding: 0 24px; border-radius: 999px; font-size: 20px; line-height: 1.25; }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .9); }
.btn--outline-light:hover { background: var(--white); color: var(--wine); }
.btn--rose { background: var(--rose); color: var(--wine); }
.btn--rose:hover { background: var(--white); }
.btn--rose:not(.btn--lg) { height: 52px; padding: 0 24px; border-radius: 999px; font-size: 17px; }
.btn--ghost-light { color: var(--white); border-color: rgba(255, 255, 255, .45); height: 52px; padding: 0 24px; border-radius: 999px; font-size: 17px; }
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.btn--block { width: 100%; height: 52px; font-size: 17px; border-radius: 999px; }
/* Alma's page-template button: 48px tall, 4px corners, 16px label. Pills stay on the home page. */
body:not(.home) .site-main :is(.btn--pill, .btn--lg, .btn--block, .btn--rose, .btn--ghost-light) { height: 48px; padding: 0 16px; border-radius: 4px; font-size: 16px; line-height: 1.5; }
body:not(.home) .site-main .btn--block { width: 100%; }

/* ---------- Deep Wine sections ----------
   Headings turn white, small labels gold and highlighted words Rose. Buttons follow the
   dark-background hierarchy: Rose with Deep Wine text, then a quiet white outline. */
.is-dark { background-color: var(--wine); color: var(--white); }
.is-dark :is(h1, h2) { color: var(--white); }
.is-dark .eyebrow { color: var(--gold); }
.is-dark :is(h1, h2) em { color: var(--rose); }
.is-dark .btn--solid { background: var(--rose); color: var(--wine); }
.is-dark .btn--solid:hover { background: var(--white); }
.is-dark .btn--light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.is-dark .btn--light:hover { border-color: var(--white); color: var(--white); background: rgba(255, 255, 255, .08); }
.is-dark .text-link { color: var(--rose); }

/* ---------- Burgundy panels ----------
   Dara's "brand warmth" colour carries the first-step call-to-action panels, so Deep Wine stays
   within her 15–20%. Same rules as Deep Wine, except small labels turn Rose: gold is too dim on
   Burgundy for small text (4.05:1), though gold icons still pass. */
.is-dark.is-berry { background: var(--burgundy); }
.is-berry :is(.eyebrow, .eyebrow--light) { color: var(--rose); }

/* ---------- Forms ---------- */
.field { width: 100%; height: 56px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); font-size: 17px; transition: border-color .25s, box-shadow .25s; }
textarea.field { height: auto; min-height: 140px; padding: 16px 20px; resize: vertical; line-height: 1.5; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233d1020' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; padding-right: 48px; }
.field:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 4px rgba(122, 32, 72, .12); }
.field[aria-invalid="true"] { border-color: #a33a3a; }
/* Alma's page-template inputs: 48px tall with 4px corners. */
body:not(.home) .site-main .field { height: 48px; padding: 0 16px; border-radius: 4px; font-size: 16px; }
body:not(.home) .site-main textarea.field { height: auto; padding: 12px 16px; }
body:not(.home) .site-main select.field { padding-right: 44px; background-position: right 14px center; }
.form-msg { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 16px; font-weight: 500; }
.form-msg--success { background: #ecf3ec; color: #24502c; }
.form-msg--error { background: #f8e9e7; color: #8a2b22; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.45; font-weight: 500; }
.checklist .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--gold); }
.checklist--light li { color: var(--white); }
.checklist--light .icon { color: var(--gold); }

/* ---------- Motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Children rise one after another once their parent is in view. */
.js [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Headlines rise word by word from behind a mask. Words wait fully below the mask and transparent,
   so no tops of tall letters peek through before they rise; the mask is dropped once they land. */
.split-word { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split-word > span { display: inline-block; opacity: 0; transform: translateY(calc(100% + .25em)); transition: transform 1.1s var(--ease), opacity .7s var(--ease); transition-delay: calc(var(--w, 0) * 55ms + 80ms); }
.is-split.is-in .split-word > span { opacity: 1; transform: none; }
.is-split.is-done .split-word { overflow: visible; }
/* Headlines wait, hidden, until main.js has split them, so they never flash in whole first. */
@media (prefers-reduced-motion: no-preference) {
	.js :is([data-split], .page-hero__title, .section-title, .article-hero__title):not(.is-split, .hero *, .mobile-menu *, .site-footer *) { visibility: hidden; animation: mmi-show 0s 2.5s forwards; }
}
@keyframes mmi-show { to { visibility: visible; } }

/* Photos wipe up into place and settle from a slight zoom. */
.js [data-reveal-img] { clip-path: inset(100% 0 0 0 round var(--radius-hero)); transition: clip-path 1.3s var(--ease); }
.js [data-reveal-img] img { scale: 1.18; transition: scale 1.8s var(--ease); }
.js [data-reveal-img].is-visible { clip-path: inset(0 0 0 0 round var(--radius-hero)); }
.js [data-reveal-img].is-visible img { scale: 1; }

/* Scroll-linked drift on large photos, where the browser can drive it off the main thread. */
@supports (animation-timeline: view()) {
	[data-parallax] { overflow: hidden; }
	[data-parallax] img { animation: mmi-drift linear both; animation-timeline: view(); animation-range: cover; }
	@keyframes mmi-drift { from { translate: 0 -7%; scale: 1.14; } to { translate: 0 7%; scale: 1.14; } }
}

/* Reading progress along the top of articles. */
.read-progress { position: fixed; z-index: 101; inset: 0 0 auto; height: 3px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
	.read-progress { animation: mmi-progress linear both; animation-timeline: scroll(root); }
	@keyframes mmi-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Cross-page fade: the header holds still while the page beneath it changes. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: mmi-page-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: mmi-page-in .55s var(--ease) both; }
@keyframes mmi-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes mmi-page-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js [data-reveal], .js [data-stagger] > * { opacity: 1; transform: none; }
	.split-word > span { opacity: 1; transform: none; }
	.js [data-reveal-img] { clip-path: none; }
	.js [data-reveal-img] img, [data-parallax] img { scale: 1; translate: none; animation: none; }
	@view-transition { navigation: none; }
}

/* Brand colours the team can pick for words in an article (editor palette, inc/blocks.php). */
.has-wine-color { color: #3D1020; } .has-burgundy-color { color: #7A2048; } .has-rose-color { color: #F4A9C4; }
.has-gold-color { color: #D99A2B; } .has-blush-color { color: #F0DCE7; } .has-white-color { color: #fff; }
.has-wine-background-color { background-color: #3D1020; } .has-burgundy-background-color { background-color: #7A2048; }
.has-rose-background-color { background-color: #F4A9C4; } .has-gold-background-color { background-color: #D99A2B; }
.has-blush-background-color { background-color: #F0DCE7; } .has-white-background-color { background-color: #fff; }