/* =========================================================
   Clubul Femeilor Unice
   Hero: documentar (B) · Ritm editorial (A) · Calendar + index (C)
   ========================================================= */

:root{
	--ink:        #2F2F2F;
	--ink-soft:   #55504A;
	--mute:       #6B6660;
	--faint:      #8A8378;
	--white:      #FFFFFF;
	--cream:      #F7F3EE;
	--cream-2:    #F0EBE3;
	--gold:       #B89B5E;
	--gold-deep:  #9A7F42;
	--gold-soft:  #E7DCC4;
	/* The brand wine, used sparingly: actions, hovers, a few rules.
	   Gold stays the quiet editorial accent; wine marks what you can do. */
	--wine:       #7F1432;
	--wine-deep:  #630F26;
	--hairline:   #E4DFD6;
	--dark:       #2F2F2F;
	--dark-deep:  #232120;
	--radius:     3px;

	--gutter: 40px;
	--maxw: 1280px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 18px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ transition: color .2s ease; }

.screen-reader-text{
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ---------- Layout ---------- */
.cfu-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* --maxw minus two gutters equals theme.json's wideSize (1200px), so a
   section's inner edge lands on the same line whether the width comes
   from this padding or from the block editor's constrained layout. */
.cfu-section{ padding: clamp(64px, 8vw, 108px) var(--gutter); }
.cfu-section-tight,
.cfu-section--tight{ padding: clamp(40px, 5vw, 64px) var(--gutter); }
.cfu-bg-cream{ background: var(--cream); }

/* front-page.php prints the_content() straight into <main>, so top-level
   blocks get no container from WordPress and would otherwise run edge to
   edge. Give the wide ones the same measure as everything else. */
#main > .alignwide{
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.5px;
	margin: 0 0 18px;
	text-wrap: balance;
	color: var(--ink);
}
h1{ font-size: clamp(42px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -1.2px; }
h2{ font-size: clamp(32px, 4vw, 46px); }
h3{ font-size: clamp(24px, 2.4vw, 32px); }
p{ margin: 0 0 18px; }
p:last-child{ margin-bottom: 0; }

/* Written as p.cfu-eyebrow so a section's own paragraph colour never
   wins over it — the label is a label wherever it sits. */
p.cfu-eyebrow,
.cfu-eyebrow{
	display: block;
	font-size: 11px; font-weight: 600; letter-spacing: 2.4px;
	text-transform: uppercase; color: var(--gold-deep);
	margin-bottom: 18px;
}
p.cfu-eyebrow.is-center,
.cfu-eyebrow.is-center{ text-align: center; }
p.cfu-eyebrow.is-light,
.cfu-eyebrow.is-light{ color: var(--gold-soft); }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.cfu-btn{
	display: inline-block;
	background: var(--wine);
	color: var(--white) !important;
	border: 1px solid var(--wine);
	border-radius: var(--radius);
	padding: 16px 34px;
	font-size: 11.5px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.wp-block-button__link:hover,
.cfu-btn:hover{
	background: var(--wine-deep); border-color: var(--wine-deep);
	color: var(--white) !important; transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.cfu-btn--ghost{
	background: transparent;
	color: var(--ink) !important;
	border: 1px solid var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.cfu-btn--ghost:hover{
	background: var(--wine); color: var(--white) !important;
	border-color: var(--wine); transform: translateY(-1px);
}

.cfu-btn-light .wp-block-button__link,
.cfu-btn--light .wp-block-button__link,
.cfu-btn-light,
.cfu-btn--light{ background: var(--white); color: var(--wine) !important; border-color: var(--white); }
.cfu-btn-light .wp-block-button__link:hover,
.cfu-btn--light .wp-block-button__link:hover,
.cfu-btn-light:hover,
.cfu-btn--light:hover{
	background: var(--wine-deep); border-color: var(--wine-deep);
	color: var(--white) !important;
}

/* =========================================================
   HEADER — transparent over the hero on the front page
   ========================================================= */
.cfu-header{
	background: var(--white);
	border-bottom: 1px solid var(--hairline);
	position: sticky; top: 0; z-index: 50;
	transition: background-color .35s ease, border-color .35s ease, padding .35s ease;
}
/* The logo carries the brand, so it gets the room; the padding gives it
   back by shrinking to compensate. */
/* Top bar: the standing offer of free psychological support, plus the
   channels. Kept above the masthead so the menu row stays uncrowded,
   and folded away once you scroll so the sticky bar stays compact. */
.cfu-topbar{
	background: var(--wine);
	color: #fff;
	overflow: hidden;
	max-height: 42px;
	transition: max-height .35s ease;
}
.cfu-header.is-stuck .cfu-topbar{ max-height: 0; }
.cfu-topbar-inner{
	max-width: var(--maxw); margin: 0 auto;
	padding: 0 var(--gutter);
	height: 42px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cfu-topbar-cta{
	color: #fff; text-decoration: none;
	font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
	position: relative; white-space: nowrap;
}
.cfu-topbar-cta::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-topbar-cta:hover{ color: var(--gold-soft); }
.cfu-topbar-cta:hover::after,
.cfu-topbar-cta:focus-visible::after{ transform: scaleX(1); }

.cfu-social{ display: flex; align-items: center; gap: 6px; }
.cfu-social a{
	color: rgba(255,255,255,.82);
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	transition: color .2s ease, background-color .2s ease;
}
.cfu-social a:hover,
.cfu-social a:focus-visible{ color: #fff; background: rgba(255,255,255,.14); }
.cfu-social svg{ width: 15px; height: 15px; fill: currentColor; display: block; }

.cfu-header-inner{
	max-width: var(--maxw); margin: 0 auto;
	padding: 12px var(--gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cfu-brand{ display: flex; align-items: center; gap: 12px; color: var(--ink); }
.cfu-brand a{ display: block; line-height: 0; text-decoration: none; }
.cfu-brand img,
.cfu-brand .custom-logo{
	max-height: 90px; width: auto; height: auto;
	transition: max-height .35s ease, filter .35s ease;
}
.cfu-brand-name{
	font-family: 'Cormorant Garamond', serif;
	font-size: 25px; font-weight: 500; letter-spacing: .4px;
	color: inherit; text-decoration: none; line-height: 1.2;
}
.cfu-primary-nav ul{ list-style: none; display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; }
.cfu-primary-nav a{
	color: var(--ink); text-decoration: none;
	font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}
.cfu-primary-nav a:hover{ color: var(--gold-deep); }
.cfu-primary-nav li.menu-item-has-children{ position: relative; }
.cfu-primary-nav li.menu-item-has-children > ul{
	/* Anchored to the item's right edge: the nav sits against the right
	   gutter, so a panel that grows leftwards can never leave the page. */
	position: absolute; top: calc(100% + 12px); right: -16px;
	/* No frame at all — the ground is only there so the list stays legible
	   over the hero photograph. What separates the items is a hairline. */
	background: var(--white); border: none; border-radius: 0; box-shadow: none;
	/* Only as wide as the longest label: no fixed width, so the panel never
	   reads as a slab hung under a very restrained menu. */
	width: max-content; min-width: 0; padding: 2px 0; margin: 0;
	/* Kept in the layout and faded in, rather than switched on with
	   display, so opening reads as a movement and not as a flash. */
	display: flex; flex-direction: column; align-items: stretch; gap: 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px);
	transition:
		opacity .26s cubic-bezier(.22,.61,.36,1),
		transform .26s cubic-bezier(.22,.61,.36,1),
		visibility 0s linear .26s;
}
/* The air above the panel would break the hover; this bridges it. */
.cfu-primary-nav li.menu-item-has-children > ul::before{
	content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px;
}
.cfu-primary-nav li.menu-item-has-children:hover > ul,
.cfu-primary-nav li.menu-item-has-children:focus-within > ul{
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: none;
	transition:
		opacity .26s cubic-bezier(.22,.61,.36,1),
		transform .26s cubic-bezier(.22,.61,.36,1),
		visibility 0s;
}
/* 16px of side padding puts the labels on the same axis as the menu item
   above, since the panel hangs 16px past its right edge. */
.cfu-primary-nav li.menu-item-has-children > ul a{
	display: block; padding: 12px 16px; color: var(--mute);
	text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; font-size: 11.5px;
	text-align: left; white-space: nowrap;
	transition: color .2s ease;
}
/* The only structure in the panel: a rule between one item and the next. */
.cfu-primary-nav li.menu-item-has-children > ul > li + li > a{
	border-top: 1px solid var(--hairline);
}
.cfu-primary-nav li.menu-item-has-children > ul a:hover,
.cfu-primary-nav li.menu-item-has-children > ul a:focus-visible{ color: var(--wine); }
.cfu-nav-toggle{
	display: none; background: none; color: inherit;
	border: 1px solid currentColor; border-radius: var(--radius);
	padding: 9px 14px; font-family: inherit;
	font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
}

/* Underline that draws in on hover — the one flourish in the nav. */
.cfu-primary-nav > ul > li > a{ position: relative; }
.cfu-primary-nav > ul > li > a::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-primary-nav > ul > li > a:hover::after,
.cfu-primary-nav > ul > li > a:focus-visible::after{ transform: scaleX(1); }

/* Front page: the header floats over the hero photo, then turns into a
   solid white band once you scroll past it. */
body.home .cfu-header{
	position: fixed; top: 0; left: 0; right: 0;
	background: transparent; border-bottom-color: transparent;
}
body.home .cfu-brand,
body.home .cfu-brand-name,
body.home .cfu-primary-nav > ul > li > a,
body.home .cfu-nav-toggle{ color: var(--white); }
body.home .cfu-primary-nav > ul > li > a:hover{ color: var(--gold-soft); }
body.home .cfu-brand img{ filter: brightness(0) invert(1); }

body.home .cfu-header.is-stuck{
	background: var(--white);
	border-bottom-color: var(--hairline);
}
body.home .cfu-header.is-stuck .cfu-header-inner{ padding-top: 8px; padding-bottom: 8px; }
body.home .cfu-header.is-stuck .cfu-brand img{ filter: none; max-height: 64px; }
body.home .cfu-header.is-stuck .cfu-brand,
body.home .cfu-header.is-stuck .cfu-brand-name,
body.home .cfu-header.is-stuck .cfu-primary-nav > ul > li > a,
body.home .cfu-header.is-stuck .cfu-nav-toggle{ color: var(--ink); }
body.home .cfu-header.is-stuck .cfu-primary-nav > ul > li > a:hover{ color: var(--wine); }

/* Inner pages: same shrink once scrolled. */
.cfu-header.is-stuck .cfu-header-inner{ padding-top: 8px; padding-bottom: 8px; }
.cfu-header.is-stuck .cfu-brand img{ max-height: 64px; }
.cfu-primary-nav > ul > li > a:hover{ color: var(--wine); }

/* =========================================================
   HERO (direction B)
   ========================================================= */
/* Built on the core cover block so the photo and the headline stay
   editable in wp-admin; the theme only supplies proportion and scrim. */
.cfu-hero-cover.wp-block-cover{
	min-height: clamp(560px, 78vh, 800px);
	align-items: flex-end;
	padding: 0;
	border-radius: 0;
}
/* Bottom padding clears the card that overlaps the hero, so the
   headline keeps its own breathing room above it. */
.cfu-hero-cover .wp-block-cover__inner-container{
	max-width: var(--maxw); margin: 0 auto; width: 100%;
	padding: 0 var(--gutter) clamp(150px, 16vw, 235px);
}
.cfu-hero-cover .wp-block-cover__background{
	background: linear-gradient(180deg, rgba(24,22,20,.60) 0%, rgba(24,22,20,.16) 42%, rgba(24,22,20,.80) 100%) !important;
	opacity: 1 !important;
}
/* Warm sheen so the hero reads as deliberate even before a photo is added. */
.cfu-hero-cover::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 90% at 20% 6%, rgba(184,155,94,.20) 0%, rgba(184,155,94,0) 62%);
}
.cfu-hero-cover .wp-block-cover__inner-container > *{ position: relative; z-index: 1; }
.cfu-hero-cover h1{ color: var(--white); margin: 0; max-width: 15ch; }
/* The hero photo is taller than the band it shows, so bias the crop
   downwards — the subject sits below the middle of the frame. */
.cfu-hero-cover .wp-block-cover__image-background{ object-position: 50% 64%; }
/* The association's name, not a label: it takes the quote band's italic
   Cormorant rather than the small uppercase used for section eyebrows. */
.cfu-hero-cover .cfu-eyebrow{
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-style: italic; font-weight: 300;
	font-size: clamp(21px, 2.3vw, 30px);
	letter-spacing: 0; text-transform: none;
	line-height: 1.3; color: var(--gold-soft);
	margin-bottom: 14px;
}

/* Overlapping card under the hero */
.cfu-overlap{
	position: relative; z-index: 3;
	max-width: var(--maxw);
	margin: clamp(-150px, -11vw, -80px) auto 0;
	padding: 0 var(--gutter);
}
.cfu-overlap .wp-block-columns{
	margin: 0; gap: 0 !important; align-items: stretch;
}
.cfu-overlap__note{
	background: var(--white);
	padding: clamp(36px, 4.2vw, 54px);
	border-radius: var(--radius) 0 0 var(--radius);
}
.cfu-overlap__note .lead{
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(24px, 2.5vw, 31px);
	font-weight: 300; line-height: 1.45; color: var(--ink);
	margin: 0 0 18px; text-wrap: pretty;
}
/* Matched by what it is, not by position: a link can follow it. */
.cfu-overlap__note p:not(.lead):not(.cfu-more){ color: var(--ink-soft); font-size: 16px; max-width: 56ch; }

/* A quiet way on: the same arrow used on the programme cards, not a slab. */
.cfu-more{ margin: 26px 0 0; }
.cfu-more a{
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--gold-deep); text-decoration: none;
	transition: color .25s ease;
}
.cfu-more a::after{
	content: "→"; display: inline-block;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-more a:hover,
.cfu-more a:focus-visible{ color: var(--wine); }
.cfu-more a:hover::after,
.cfu-more a:focus-visible::after{ transform: translateX(5px); }
.cfu-overlap__next{
	background: var(--gold);
	color: var(--white);
	padding: clamp(34px, 3.6vw, 46px) clamp(28px, 3vw, 40px);
	display: flex; flex-direction: column; justify-content: center; gap: 14px;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.cfu-overlap__next .label{
	font-size: 11px; font-weight: 600; letter-spacing: 2.2px;
	text-transform: uppercase; color: rgba(255,255,255,.86);
}
.cfu-overlap__next .when{
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(28px, 2.8vw, 35px); line-height: 1.15; color: var(--white);
}
.cfu-overlap__next .where{ font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.92); }
.cfu-overlap__next .cfu-btn{ margin-top: 6px; text-align: center; }

/* =========================================================
   STAT RAIL (direction A)
   ========================================================= */
/* Wraps a native columns block so each figure stays editable. The rules
   sit on the inner row so they line up with the text column, not with
   the section's padding edge. */
.cfu-stats .wp-block-columns{
	margin: 0; gap: 0 !important;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}
.cfu-stats .wp-block-column{
	padding: 34px 30px;
	border-left: 1px solid var(--hairline);
}
.cfu-stats .wp-block-column:first-child{ border-left: none; padding-left: 0; }
.cfu-stats .wp-block-column:last-child{ padding-right: 0; }
.cfu-stats .wp-block-column > *:first-child{
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(38px, 3.4vw, 48px);
	font-weight: 400; line-height: 1; color: var(--gold-deep);
	margin: 0 0 9px; letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
.cfu-stats .wp-block-column > *:last-child{
	font-size: 13px; color: var(--mute); line-height: 1.5; margin: 0;
}

/* =========================================================
   EDITORIAL SECTION with margin numeral (direction A)
   ========================================================= */
/* One header for every section: a rule, the number, the section's name.
   All on a single line, so nothing stacks apart on a narrow screen. */
p.cfu-kicker,
.cfu-kicker{
	display: flex; align-items: center; gap: 12px;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: clamp(25px, 2.2vw, 26px);
	font-weight: 400; line-height: 1.15; letter-spacing: 0;
	text-transform: none; color: var(--wine);
	margin: 0 0 16px;
}
.cfu-kicker::before{
	content: ""; width: 34px; height: 1px; background: var(--wine); flex: none;
}
/* The number keeps a touch more weight, so it still reads as a marker
   rather than as the first word of the label. */
.cfu-kicker strong{ font-weight: 500; }
p.cfu-kicker.is-center,
.cfu-kicker.is-center{ justify-content: center; }

/* 24px above matches the gap under every other heading on the page. */
.cfu-lede{ font-size: 17px; color: var(--mute); max-width: 74ch; margin: 24px 0 44px; }
.cfu-kicker.is-center + h2 + .cfu-lede{ margin-inline: auto; text-align: center; }

/* Editorial list of what we do — each row is a native columns block:
   left column holds the label, right column the heading and text. */
.cfu-list{ border-top: 1px solid var(--hairline); }
.cfu-list .wp-block-columns{
	margin: 0; gap: 48px !important;
	padding: 34px 0; border-bottom: 1px solid var(--hairline);
	align-items: flex-start;
}
.cfu-list .wp-block-column:first-child > p{
	font-size: 12px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--gold-deep);
	margin: 5px 0 0;
}
.cfu-list h3{ margin: 0 0 10px; }
.cfu-list .wp-block-column:last-child > p{
	font-size: 16px; line-height: 1.75; color: var(--ink-soft);
	max-width: 62ch; margin: 0;
}

/* =========================================================
   CALENDAR (direction C)
   ========================================================= */
/* One agenda: the standing programmes first, then everything with a date. */

/* 24px above matches the gap the block editor leaves under every other
   kicker, so the five section headers keep the same rhythm. */
.cfu-agenda-section > h2{ margin: 24px 0 clamp(34px, 4vw, 48px); }
.cfu-agenda{ margin: 0; }
.cfu-agenda__head{
	display: flex; justify-content: space-between; align-items: baseline;
	padding-bottom: 16px; border-bottom: 2px solid var(--ink);
	font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
}
.cfu-agenda__head a{ color: var(--faint); text-decoration: none; letter-spacing: 1.4px; }
.cfu-agenda__head a:hover{ color: var(--gold-deep); }
.cfu-agenda__item{
	display: grid; grid-template-columns: 46px 74px minmax(0, 1fr) auto;
	gap: 20px; align-items: center;
	padding: 22px 0; border-bottom: 1px solid var(--hairline);
}
/* Cormorant sets figures at x-height, so the numeral's ink starts a full 20px
   below its own box top and the date reads as dropped next to the thumbnail.
   Measured against the row rather than guessed: with the day at 34px and a
   year line beneath it, -9px puts the date's ink level with the thumbnail
   alongside. The earlier -5px was calibrated for a 42px numeral with nothing
   under it, and left the block sitting low. Optical only. */
.cfu-agenda__item > div:nth-child(2){ position: relative; top: -9px; text-align: center; }
.cfu-agenda__thumb{
	display: block; width: 46px; height: 46px;
	overflow: hidden; border-radius: var(--radius); background: var(--cream-2);
}
.cfu-agenda__thumb img{
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cfu-agenda__item:hover .cfu-agenda__thumb img{ transform: scale(1.06); }
.cfu-agenda__more{
	justify-self: end; white-space: nowrap;
	padding: 9px 17px; border: 1px solid var(--hairline); border-radius: var(--radius);
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--ink); text-decoration: none; background: transparent;
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.cfu-agenda__more:hover,
.cfu-agenda__more:focus-visible{
	border-color: var(--wine); color: var(--wine); background: rgba(127, 20, 50, .04);
}
/* Dates carry the accent so the colour is present without needing hover
   — which phones do not have. */
.cfu-agenda__day{
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 34px; font-weight: 500; line-height: 1; color: var(--wine);
	font-variant-numeric: tabular-nums;
}
.cfu-agenda__month{
	display: block; font-size: 12.5px; line-height: 1; font-weight: 600; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--ink-soft); margin-top: 13px;
}
/* The year takes the weight the month used to carry: present, but the last
   thing read. Tabular figures so the column does not shift between 2026 and
   2027, and line-height 1 so the gap above it is the margin and nothing else —
   at the default leading a 10px line box carries a few pixels of air that no
   margin can take back. */
.cfu-agenda__year{
	display: block; font-size: 10px; line-height: 1; letter-spacing: 1.4px;
	color: var(--faint); margin-top: 5px;
	font-variant-numeric: tabular-nums;
}
.cfu-agenda__title{
	font-family: 'Cormorant Garamond', serif;
	font-size: 23px; line-height: 1.25; margin: 0 0 5px;
}
.cfu-agenda__title a{ color: var(--ink); text-decoration: none; }
.cfu-agenda__title a:hover{ color: var(--gold-deep); }
.cfu-agenda__meta{ font-size: 13px; color: var(--mute); line-height: 1.6; }
.cfu-agenda__empty{ padding: 26px 0; color: var(--mute); font-size: 15px; }

/* =========================================================
   PROJECT INDEX (direction C)
   ========================================================= */
/* The index is a selection; the archive holds the rest. */
.cfu-archive-cta{ margin-top: clamp(34px, 3.6vw, 48px); }
.cfu-index{ border-bottom: 1px solid var(--hairline); }
.cfu-index__head,
.cfu-index__row{
	display: grid; grid-template-columns: 120px minmax(0, 1fr) 230px;
	gap: 28px; align-items: baseline;
}
.cfu-index__head{
	padding-bottom: 12px;
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--faint);
}
.cfu-index__row{
	padding: 24px 0; border-top: 1px solid var(--hairline);
	transition: background-color .2s ease;
}
.cfu-index__row:hover{ background: var(--cream); }
.cfu-index__year{
	font-family: 'Cormorant Garamond', serif;
	font-size: 26px; color: var(--wine); font-variant-numeric: tabular-nums;
}
.cfu-index__name{ font-family: 'Cormorant Garamond', serif; font-size: 25px; line-height: 1.3; }
.cfu-index__name a{ color: var(--ink); text-decoration: none; }
.cfu-index__name a:hover{ color: var(--gold-deep); }
.cfu-index__type{ font-size: 13px; color: var(--mute); }

/* =========================================================
   QUOTE (direction A)
   ========================================================= */
/* A dark pause between two light sections — the page's one moment of
   quiet, and the only place the type is allowed to be this large. */
.cfu-quote-band{
	position: relative;
	overflow: hidden;
	background: var(--dark);
	padding: clamp(84px, 10vw, 148px) var(--gutter);
	text-align: center;
}
.cfu-quote-band::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(88% 130% at 50% 0%, rgba(184,155,94,.15) 0%, rgba(184,155,94,0) 62%);
}
.cfu-quote-band > *{ position: relative; z-index: 1; }

.cfu-quote-band .cfu-quote{ max-width: 920px; margin: 0 auto; text-align: center; }
.cfu-quote-band .cfu-quote::before{
	content: "\201C";
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(88px, 11vw, 148px);
	line-height: .72;
	color: var(--gold);
	opacity: .42;
	margin-bottom: 6px;
}
.cfu-quote-band .cfu-quote > p:first-child{
	color: #F4EEE4;
	font-size: clamp(27px, 3.5vw, 43px);
	margin-bottom: 32px;
}
.cfu-quote-band .cfu-quote > p:last-child{
	color: var(--gold-soft);
	justify-content: center;
}
.cfu-quote-band .cfu-quote > p:last-child::before{ background: var(--gold); }

.cfu-quote{ max-width: 900px; margin: 0; }
.cfu-quote > p:first-child{
	font-family: 'Cormorant Garamond', serif;
	font-style: italic; font-weight: 300;
	font-size: clamp(26px, 3.2vw, 40px); line-height: 1.38;
	color: var(--ink); margin: 0 0 24px; text-wrap: pretty;
}
.cfu-quote > p:last-child{
	font-size: 11px; font-weight: 600;
	letter-spacing: 1.8px; text-transform: uppercase; color: var(--mute);
	display: flex; align-items: center; gap: 14px; margin: 0;
}
.cfu-quote > p:last-child::before{
	content: ""; width: 34px; height: 1px; background: var(--gold-deep); flex: none;
}

/* =========================================================
   SUPPORT (direction C)
   ========================================================= */
/* =========================================================
   Standing programmes — open-ended, no date attached
   ========================================================= */
.cfu-programs-block{ margin-bottom: clamp(52px, 6vw, 80px); }
.cfu-programs__head{ margin-bottom: 26px; }
.cfu-programs__note{
	font-weight: 500; letter-spacing: 1.4px; color: var(--gold-deep);
}
.cfu-programs{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
}
/* Cards, not cropped photographs: white against the cream band, with a
   drawn mark where the poster used to be. */
.cfu-program{
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--white);
	border: 1px solid var(--hairline); border-radius: var(--radius);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
.cfu-program:hover{ transform: translateY(-3px); border-color: var(--gold); }
/* The drawing takes the band the poster used to occupy, so it can be read
   from across the page rather than squinted at. */
.cfu-program__mark{
	display: grid; place-items: center; flex: none;
	height: clamp(126px, 13vw, 152px);
	background: var(--cream); border-bottom: 1px solid var(--hairline);
	color: var(--wine);
	transition: background-color .35s ease, color .35s ease;
}
.cfu-program:hover .cfu-program__mark{ background: var(--cream-2); color: var(--wine-deep); }
.cfu-pictogram{
	display: block; width: clamp(76px, 8vw, 94px); height: clamp(76px, 8vw, 94px);
}
/* Flex so the three "Detalii" links sit on one line whatever the text length. */
.cfu-program__body{
	display: flex; flex-direction: column; flex: 1;
	padding: clamp(24px, 2.4vw, 30px);
}
.cfu-program__when{
	align-self: flex-start; margin-bottom: 14px;
	padding: 6px 13px; border-radius: 100px;
	background: rgba(127, 20, 50, .07); color: var(--wine);
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}
.cfu-program__title{
	font-size: clamp(21px, 2.1vw, 26px);
	line-height: 1.25; margin: 0 0 10px;
}
.cfu-program__title a{ color: var(--ink); text-decoration: none; }
.cfu-program:hover .cfu-program__title a{ color: var(--wine); }
.cfu-program__text{
	font-size: 15px; line-height: 1.7; color: var(--ink-soft);
	margin: 0 0 auto;
}
.cfu-program__more{
	display: inline-block; margin-top: 18px;
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--gold-deep);
	text-decoration: none;
	transition: color .25s ease;
}
.cfu-program__more::after{
	content: "→"; margin-left: 8px;
	display: inline-block;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-program:hover .cfu-program__more{ color: var(--wine); }
.cfu-program:hover .cfu-program__more::after{ transform: translateX(5px); }

@media (max-width: 860px){
	.cfu-programs{ grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   Support network — the specialists, lifted out of the poster
   ========================================================= */
.cfu-network__intro{ max-width: 760px; margin: 0 auto clamp(44px, 5vw, 64px); }
.cfu-network__intro p:not(.cfu-eyebrow):not(.cfu-kicker){ color: var(--ink-soft); font-size: 16px; }
.cfu-network__how{
	font-size: 15px !important;
	padding-top: 18px; margin-top: 22px;
	border-top: 1px solid #DDD5C6;
}
.cfu-network__how strong{ color: var(--wine); font-weight: 600; white-space: nowrap; }
.cfu-network__intro .wp-block-buttons{ margin-top: 28px; }

/* Nine people: a 3x3 block, so no row is left short. Held to a narrow
   measure and centred, it sits on the same axis as the intro above. */
.cfu-network__people{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.4vw, 44px) clamp(18px, 2.4vw, 34px);
	justify-items: center;
}
/* The block is alignwide, and the editor's constrained layout sets that
   to 1200px from a two-class selector — so this has to outrank it. */
.cfu-section.cfu-network .cfu-network__people{
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
/* Same trap as the support-card header: the editor's flow layout puts a
   24px top margin on every sibling but the first, which inside a grid
   drops half of each row a notch. */
.cfu-network .cfu-network__people > *{
	margin-block-start: 0;
	margin-block-end: 0;
}
.cfu-person{ text-align: center; max-width: 180px; }
/* A white mat and a hairline, so each portrait reads as a framed print
   rather than a photo dropped onto the cream. */
.cfu-person__photo{
	width: fit-content;
	margin: 0 auto 14px !important;
	padding: 6px;
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .25s ease;
}
.cfu-person:hover .cfu-person__photo{ border-color: var(--gold); }
.cfu-person__photo img{
	width: 132px; height: 164px;
	object-fit: cover; object-position: 50% 25%;
	display: block;
}
.cfu-person__name{
	font-family: 'Cormorant Garamond', serif;
	font-size: 19px !important; line-height: 1.25;
	color: var(--ink) !important;
	margin: 0 0 4px !important;
}
.cfu-person__name a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.cfu-person__name a:hover{ color: var(--wine); border-bottom-color: var(--wine); }
.cfu-person__role{
	font-size: 12px !important; line-height: 1.45;
	color: var(--mute) !important; margin: 0 !important;
}

@media (max-width: 560px){
	/* Two columns leave a ninth on its own, so let it span the row and
	   sit centred instead of hanging off to one side. */
	.cfu-network__people{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cfu-person:last-child{ grid-column: 1 / -1; }
	.cfu-person__photo img{ width: 118px; height: 146px; }
}

.cfu-support-intro{ max-width: 760px; margin: 0 auto clamp(36px, 4.4vw, 52px); }
.cfu-support-intro p:not(.cfu-eyebrow):not(.cfu-kicker){ color: var(--ink-soft); font-size: 16px; }
.cfu-support-intro h2{ margin-bottom: 0; }

/* The association's own posters. They are dense, portrait and not in
   this palette, so they run small and whole — cropping them to a strip
   would look broken — and open full size on click. Pairing each with
   its title in a ruled header row gives them a place on the grid
   instead of floating loose in the corner. */
.cfu-support-card__head{
	display: flex;
	align-items: center;
	gap: 22px;
	padding-bottom: 24px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--hairline);
}
/* The card is a flex column, so margins do not collapse: without this the
   editor's own 24px top margin stacks onto the head's and the body text
   ends up floating half a rule away. */
.cfu-support-card .cfu-support-card__head + *{ margin-block-start: 0; }
.cfu-support-card__poster{
	flex: none;
	width: 118px;
	margin: 0 !important;
}
.cfu-support-card__poster img{
	width: 100%; height: auto; display: block;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	cursor: zoom-in;
}
/* The block editor's flow layout puts a 24px top margin on every sibling
   after the first; inside a flex row that margin fights the centring. */
.cfu-support-card .cfu-support-card__head > *{
	margin-block-start: 0;
	margin-block-end: 0;
}
.cfu-support-card__headtext{ flex: 1; min-width: 0; }
.cfu-support-card__headtext .cfu-eyebrow{ margin-bottom: 10px; }
.cfu-support-card__headtext h3{ margin-bottom: 0; }

/* Two audiences, two cards: a company redirects profit tax, a person
   redirects income tax. Separating them keeps each ask readable. */
.cfu-support-paths.wp-block-columns{
	gap: clamp(20px, 2.4vw, 32px) !important;
	align-items: stretch; margin: 0;
}
.cfu-support-card{
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: clamp(28px, 3.2vw, 44px);
	display: flex; flex-direction: column;
}
.cfu-support-card h3{
	font-size: clamp(22px, 2.2vw, 29px);
	margin-bottom: 14px;
}
.cfu-support-card h3 strong{
	font-weight: 400;
	color: var(--wine);
}
.cfu-support-card > p{ font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.cfu-support-card__label{
	font-size: 10.5px !important; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--faint) !important;
	margin: 24px 0 12px !important;
	padding-top: 16px; border-top: 1px solid var(--hairline);
}
.cfu-support-card ul{
	list-style: none; margin: 0 0 4px; padding: 0;
}
.cfu-support-card ul li{
	position: relative; padding-left: 26px; margin-bottom: 10px;
	font-size: 15px; line-height: 1.65; color: var(--ink-soft);
}
/* A hairline tick rather than an emoji — same language as the rules
   used everywhere else on the page. */
.cfu-support-card ul li::before{
	content: ""; position: absolute; left: 0; top: 12px;
	width: 13px; height: 1px; background: var(--wine);
}
.cfu-support-card__note{
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 19px !important; line-height: 1.5;
	color: var(--ink) !important;
	margin: 22px 0 26px !important;
}
.cfu-support-card .wp-block-buttons{ margin-top: auto; padding-top: 8px; }

.cfu-support-foot{
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: 26px;
	border-top: 1px solid #DDD5C6;
	text-align: center;
}
.cfu-support-foot__bank{
	font-size: 13.5px; color: var(--mute);
	letter-spacing: .3px; font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.cfu-support-foot__sign{
	font-family: 'Cormorant Garamond', serif;
	font-style: italic; font-size: 19px; color: var(--ink); margin: 0;
}

/* =========================================================
   Archive cards / single post
   ========================================================= */
.cfu-archive-header{ text-align: center; padding: clamp(56px, 7vw, 84px) 0 clamp(36px, 4vw, 52px); }
.cfu-archive-header p,
.cfu-archive-intro p{ color: var(--mute); max-width: 60ch; margin: 0 auto; }

/* A warm mat behind the grid, with real gaps. At a 1px gap the tone
   underneath never showed and the cards read as one slab. */
.cfu-cards{
	display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
	background: var(--cream-2);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: clamp(14px, 1.6vw, 20px);
}
/* Barely-there lift, not a drop shadow: enough to separate the white panel
   from the mat without the heavy card look the brief rules out. */
.cfu-card{
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: 0 1px 1px rgba(47, 47, 47, .03), 0 10px 22px -18px rgba(47, 47, 47, .22);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition:
		border-color .35s ease,
		box-shadow .35s ease,
		transform .35s cubic-bezier(.22,.61,.36,1);
}
.cfu-card:hover{
	border-color: var(--gold);
	box-shadow: 0 2px 3px rgba(47, 47, 47, .04), 0 18px 34px -20px rgba(47, 47, 47, .3);
	transform: translateY(-3px);
}
.cfu-card-thumb{
	aspect-ratio: 4/3; overflow: hidden; display: block;
	background: var(--cream-2);
	border-bottom: 1px solid var(--hairline);
}
.cfu-card-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cfu-card:hover .cfu-card-thumb img{ transform: scale(1.04); }
.cfu-card-body{ padding: 28px; flex: 1; display: flex; flex-direction: column; }
.cfu-card-tag{
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.cfu-card-title{ font-family: 'Cormorant Garamond', serif; font-size: 25px; line-height: 1.25; margin: 0 0 10px; }
.cfu-card-title a{ color: var(--ink); text-decoration: none; }
.cfu-card-title a:hover{ color: var(--gold-deep); }
.cfu-card-excerpt{ color: var(--mute); font-size: 15px; margin: 0 0 auto; }
/* Date and action share the closing line, so every card ends the same way
   however long its excerpt runs. */
.cfu-card-foot{
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 20px;
	padding-top: 16px; border-top: 1px solid var(--hairline);
}
/* Without a date the button would slide to the left; keep it in the same
   corner it occupies on every other card. */
.cfu-card-foot--end{ justify-content: flex-end; }
/* The date is the first thing a reader checks on an event card, and at 12px
   grey it was losing to the excerpt above it. */
.cfu-card-date{
	color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
	font-variant-numeric: tabular-nums;
}
.cfu-card-more{
	flex: none; white-space: nowrap;
	padding: 8px 15px; border: 1px solid var(--hairline); border-radius: var(--radius);
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--ink); text-decoration: none;
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.cfu-card-more:hover,
.cfu-card-more:focus-visible,
.cfu-card:hover .cfu-card-more{
	border-color: var(--wine); color: var(--wine); background: rgba(127, 20, 50, .04);
}

.cfu-single-header{
	padding: clamp(48px, 6vw, 76px) 0 clamp(28px, 3vw, 40px);
	border-bottom: 1px solid var(--hairline);
	margin-bottom: clamp(36px, 4vw, 56px); text-align: center;
}
.cfu-single-title{ max-width: 20ch; margin: 0 auto 16px; font-size: clamp(32px, 4.4vw, 52px); }
.cfu-single-meta{ color: var(--faint); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.cfu-single-thumb{ margin: 0 0 clamp(36px, 4vw, 56px); }
.cfu-single-thumb img{ width: 100%; border-radius: var(--radius); }
.cfu-entry-content{ max-width: 720px; margin: 0 auto; }
.cfu-entry-content h2{ margin-top: 44px; }
.cfu-entry-content h3{ margin-top: 34px; }
.cfu-entry-content img{ border-radius: var(--radius); }
.cfu-entry-content .wp-block-gallery img{ border-radius: var(--radius); }

.cfu-nav-links{
	max-width: 720px; margin: clamp(48px, 6vw, 72px) auto 0;
	padding-top: 30px; border-top: 1px solid var(--hairline);
	display: flex; justify-content: space-between; gap: 24px; font-size: 14px;
}
.cfu-nav-links a{ color: var(--ink); text-decoration: none; }
.cfu-nav-links a:hover{ color: var(--gold-deep); }

/* Latest-posts block, if used in content */
.wp-block-latest-posts.is-grid{
	gap: 1px !important; background: var(--hairline);
	border: 1px solid var(--hairline); padding: 0; margin: 0;
}
.wp-block-latest-posts.is-grid li{ background: var(--white); padding-bottom: 26px; }
.wp-block-latest-posts__featured-image{ margin: 0 0 18px; }
.wp-block-latest-posts__featured-image img{ border-radius: 0; width: 100%; }
.wp-block-latest-posts li > a.wp-block-latest-posts__post-title{
	padding: 0 26px; display: block;
	font-family: 'Cormorant Garamond', serif; font-size: 23px; color: var(--ink); margin-bottom: 8px;
}
.wp-block-latest-posts__post-excerpt{ padding: 0 26px; font-size: 15px; color: var(--mute); }
.wp-block-latest-posts__post-date{
	padding: 0 26px; color: var(--faint); font-size: 11.5px;
	letter-spacing: 1.2px; text-transform: uppercase; display: block; margin-bottom: 10px;
}

/* =========================================================
   Footer
   ========================================================= */
.cfu-footer{ background: var(--dark); color: #D8D2C7; padding: clamp(56px, 7vw, 84px) 0 0; }
.cfu-footer-grid{
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: clamp(32px, 4vw, 52px);
	padding-bottom: clamp(40px, 5vw, 56px);
	border-bottom: 1px solid rgba(255,255,255,.13);
}
/* wp_get_attachment_image() prints width/height attributes, so both axes
   must be released or the logo squashes. */
.cfu-footer-brand img{
	max-height: 56px; width: auto; height: auto; max-width: 100%;
	margin-bottom: 18px;
}
.cfu-footer-brand p{ font-size: 15px; line-height: 1.7; color: #B0A899; max-width: 34ch; }
.cfu-footer h4{
	color: var(--white); font-family: 'Mulish', sans-serif;
	font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
	text-transform: uppercase; margin: 0 0 18px;
}
.cfu-footer ul{ list-style: none; margin: 0; padding: 0; }
.cfu-footer ul li{ margin-bottom: 11px; font-size: 15px; color: #B0A899; }
.cfu-footer a{ color: #D8D2C7; text-decoration: none; font-size: 15px; }
.cfu-footer a:hover{ color: var(--gold-soft); }
.cfu-footer-social{ display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start; }
.cfu-footer-social a{
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius);
	padding: 8px 13px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
	transition: border-color .25s ease, color .25s ease;
}
.cfu-footer-social svg{ width: 14px; height: 14px; fill: currentColor; display: block; flex: none; }
.cfu-footer-social a:hover{ border-color: var(--gold); color: var(--gold-soft); }
.cfu-footer-partners{
	padding: 40px 0 44px;
	border-bottom: 1px solid rgba(255,255,255,.13);
	text-align: center;
}
.cfu-footer-partners h4{ margin-bottom: 22px; }
.cfu-footer-partners__list{
	display: flex; flex-wrap: wrap; gap: 20px;
	align-items: stretch; justify-content: center;
}
/* Every partner mark sits on its own light tile: the logos come with
   their own backgrounds baked in, and at this size a grayscale wash
   would flatten brands that are the whole point of the credit. */
.cfu-partner{
	width: 200px; height: 200px;
	background: var(--white);
	border-radius: var(--radius);
	padding: 18px;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-partner:hover{ transform: translateY(-3px); }
.cfu-partner img{
	width: 100%; height: 100%;
	object-fit: contain;
	filter: none; opacity: 1;
}
.cfu-footer-bottom{
	padding: 22px 0 16px; font-size: 13px; color: #9C958A;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* =========================================================
   Motion — everything is opt-in: the hidden states only exist once
   the script adds .cfu-anim, so with JS off nothing is ever invisible.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
	.cfu-anim .cfu-reveal{
		opacity: 0;
		transform: translateY(18px);
		will-change: opacity, transform;
	}
	.cfu-anim .cfu-reveal.is-visible{
		opacity: 1;
		transform: none;
		transition:
			opacity .75s cubic-bezier(.22,.61,.36,1),
			transform .75s cubic-bezier(.22,.61,.36,1);
	}

	@keyframes cfu-rise{
		from{ opacity: 0; transform: translateY(24px); }
		to{ opacity: 1; transform: none; }
	}
	.cfu-anim .cfu-rise{
		opacity: 0;
		animation: cfu-rise .95s cubic-bezier(.22,.61,.36,1) both;
	}

	/* Slow drift on the hero photo so the page never feels static. */
	@keyframes cfu-drift{
		from{ transform: scale(1.06); }
		to{ transform: scale(1); }
	}
	.cfu-anim .cfu-hero-cover .wp-block-cover__image-background{
		animation: cfu-drift 14s ease-out both;
	}
}

/* ---------- Hover micro-interactions ---------- */
/* A rule that draws across the top of the row, rather than a bar beside
   the year — nothing crowds the text. */
.cfu-index__row{ position: relative; }
.cfu-index__row::before{
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
	background: var(--wine); transform: scaleX(0); transform-origin: left;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.cfu-index__row:hover::before{ transform: scaleX(1); }
.cfu-index__row:hover .cfu-index__name a{ color: var(--wine); }

.cfu-agenda__item .cfu-agenda__day{ transition: color .25s ease; }
.cfu-agenda__item:hover .cfu-agenda__day{ color: var(--wine-deep); }
.cfu-agenda__title a{ transition: color .25s ease; }

.cfu-card-title a{ transition: color .25s ease; }
.cfu-card:hover .cfu-card-title a{ color: var(--wine); }

/* The quote's leading rule is one of the few wine moments. */
.cfu-quote > p:last-child::before{ background: var(--wine); }

/* =========================================================
   Pagination
   ========================================================= */
.wp-block-query-pagination, .navigation.pagination{ margin-top: 48px; }
.nav-links{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nav-links .page-numbers{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--hairline); border-radius: var(--radius);
	color: var(--ink); text-decoration: none; font-size: 14px;
}
.nav-links .page-numbers:hover{ border-color: var(--ink); }
.nav-links .page-numbers.current{ background: var(--ink); color: var(--white); border-color: var(--ink); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
	.cfu-overlap .wp-block-columns{ flex-wrap: wrap !important; }
	.cfu-overlap .wp-block-column{ flex-basis: 100% !important; }
	.cfu-overlap__note{ border-radius: var(--radius) var(--radius) 0 0; }
	.cfu-overlap__next{ border-radius: 0 0 var(--radius) var(--radius); }
}

@media (max-width: 781px){
	/* The block is marked not-stacked-on-mobile, so it stays a row;
	   wrap it into a 2x2 rail rather than four narrow slivers. */
	.cfu-stats .wp-block-columns.is-not-stacked-on-mobile{ flex-wrap: wrap !important; }
	.cfu-stats .wp-block-columns > .wp-block-column{
		flex-basis: 50% !important; flex-grow: 0; padding: 26px 18px;
	}
	.cfu-stats .wp-block-columns > .wp-block-column:nth-child(odd){ border-left: none; padding-left: 0; }
	.cfu-stats .wp-block-columns > .wp-block-column:nth-child(even){ padding-right: 0; }
	.cfu-stats .wp-block-columns > .wp-block-column:nth-child(-n+2){ border-bottom: 1px solid var(--hairline); }

	/* Stacked, the 48px column gap turns into a chasm between a label and
	   the heading it belongs to. */
	.cfu-list .wp-block-columns{ gap: 8px !important; padding: 26px 0; }
	/* On a phone the row label carries the whole structure of the list, so
	   it cannot stay at caption size. */
	.cfu-list .wp-block-column:first-child > p{ font-size: 13px; letter-spacing: 1.5px; margin: 0; }
	/* The longest label is "03 Rețeaua de sprijin"; a shorter rule keeps it
	   on one line on a 320px screen. */
	.cfu-kicker{ gap: 10px; }
	.cfu-kicker::before{ width: 24px; }
}

@media (max-width: 900px){
	.cfu-nav-toggle{ display: inline-block; }
	/* Keep the taller logo from eating the screen on a phone. */
	.cfu-brand img,
	.cfu-brand .custom-logo{ max-height: 64px; }
	.cfu-header.is-stuck .cfu-brand img,
	body.home .cfu-header.is-stuck .cfu-brand img{ max-height: 52px; }
	.cfu-primary-nav{
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--white); border-bottom: 1px solid var(--hairline);
	}
	body.home .cfu-primary-nav{ background: var(--dark); }
	body.home .cfu-primary-nav a{ color: var(--white); }
	.cfu-primary-nav.is-open{ display: block; }
	.cfu-primary-nav ul{ flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gutter) 22px; }
	.cfu-primary-nav a{ display: block; padding: 13px 0; }
	/* In the drawer the submenu is simply part of the list — none of the
	   floating-panel treatment applies. */
	.cfu-primary-nav li.menu-item-has-children > ul{
		position: static; border: none; border-radius: 0; box-shadow: none;
		padding: 0 0 0 18px; display: flex; background: transparent;
		width: auto; min-width: 0; left: auto; right: auto;
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: none; transition: none;
	}
	.cfu-primary-nav li.menu-item-has-children > ul::before{ content: none; }
	.cfu-primary-nav li.menu-item-has-children > ul a,
	.cfu-primary-nav li.menu-item-has-children > ul > li + li > a{
		padding: 13px 0; white-space: normal; color: var(--ink);
		border-top: none;
		text-transform: none; letter-spacing: 1.5px; font-size: 13px;
	}
	/* The drawer is dark on the front page, so the sub-items follow. */
	body.home .cfu-primary-nav li.menu-item-has-children > ul a{ color: var(--white); }


	.cfu-list__item{ grid-template-columns: 1fr; gap: 10px; }
	.cfu-index__head{ display: none; }
	.cfu-index__row{ grid-template-columns: 78px minmax(0, 1fr); gap: 18px; }
	.cfu-index__type{ grid-column: 2; }
	.cfu-footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px){
	:root{ --gutter: 22px; }
	body{ font-size: 17px; }
	/* Tighten the bar so the link and all five channels still share one
	   row on a normal phone. */
	.cfu-topbar,
	.cfu-topbar-inner{ height: 38px; max-height: 38px; }
	.cfu-topbar-cta{ font-size: 10px; letter-spacing: 1.2px; }
	.cfu-social{ gap: 2px; }
	.cfu-social a{ width: 28px; height: 28px; }
	.cfu-social svg{ width: 14px; height: 14px; }

	/* Side by side there is no room left for the title on a phone. */
	.cfu-support-card__head{
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.cfu-support-card__poster{ width: 112px; }
	/* All three marks on one row: two-up left the third one stranded. */
	.cfu-footer-partners__list{ gap: 12px; flex-wrap: nowrap; }
	.cfu-partner{
		width: calc(33.333% - 8px); height: auto; aspect-ratio: 1 / 1;
		padding: 11px;
	}
	.cfu-overlap{ margin-top: -56px; }
	/* Stacked under the white note, the gold card is a standalone panel
	   rather than a right-hand rail, so it reads better centred — and at
	   full width the type can carry more weight. */
	.cfu-overlap__next{ text-align: center; align-items: center; gap: 16px; }
	.cfu-overlap__next .label{ font-size: 12px; letter-spacing: 2px; }
	.cfu-overlap__next .when{ font-size: 33px; }
	.cfu-overlap__next .where{ font-size: 15.5px; }
	/* A long label would wrap ragged inside the card; full width and centred
	   it reads as a deliberate block either way. */
	.cfu-overlap__next .wp-block-buttons{ width: 100%; justify-content: center; }
	.cfu-overlap__next .wp-block-button{ width: 100%; }
	.cfu-overlap__next .wp-block-button__link{
		display: block; text-align: center; padding-left: 18px; padding-right: 18px;
	}
	/* One column, so the four blocks read as a stack rather than a ragged
	   left rail — and the type can carry more weight at full width. */
	.cfu-footer-grid{ grid-template-columns: 1fr; text-align: center; gap: 36px; }
	.cfu-footer-brand img{ max-height: 78px; margin-left: auto; margin-right: auto; }
	.cfu-footer-brand p{ font-size: 16px; max-width: 42ch; margin-left: auto; margin-right: auto; }
	.cfu-footer-menu a,
	.cfu-footer-contact a,
	/* `.cfu-footer ul li` is more specific than a single class, so the
	   plain address line needs to be matched the same way. */
	.cfu-footer-contact ul li{ font-size: 16px; }
	.cfu-footer-social{ justify-content: center; }
	.cfu-footer-bottom{ justify-content: center; text-align: center; }
	.cfu-footer-legal{ justify-content: center; }
	.cfu-nav-links{ flex-direction: column; gap: 14px; }
	/* Four columns do not fit, and stacking them into a narrow rail leaves
	   the title in a 200px gutter. Instead: thumbnail and date share one
	   short line, then the title gets the full width beneath it. */
	.cfu-agenda__item{
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px; align-items: center;
	}
	.cfu-agenda__thumb{ grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
	.cfu-agenda__item > div:nth-child(2){
		grid-column: 2; grid-row: 1;
		display: flex; align-items: baseline; gap: 8px;
		text-align: left; top: 0; /* the optical nudge is for the desktop rail */
	}
	.cfu-agenda__item > div:nth-child(3){ grid-column: 1 / -1; grid-row: 2; }
	.cfu-agenda__more{ grid-column: 1 / -1; grid-row: 3; justify-self: start; }
	.cfu-agenda__day{ display: inline; font-size: 28px; }
	.cfu-agenda__month{ display: inline; margin-top: 0; }
	.cfu-agenda__year{ display: inline; margin-top: 0; }
	/* Two long labels never share a line on a phone. */
	.cfu-programs__head{ flex-wrap: wrap; gap: 6px 18px; }
}

/* Narrowest phones: the link and the five marks no longer share a row, so
   the bar becomes two centred rows rather than dropping either of them.
   Must follow the 600px block — same specificity, later rule wins. */
@media (max-width: 420px){
	/* The 600px block fixes both to 38px; the bar clips its own content
	   unless that height is released here too, not just on the inner row. */
	.cfu-topbar{ height: auto; max-height: 92px; }
	.cfu-topbar-inner{
		height: auto; max-height: none;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding-top: 9px; padding-bottom: 7px;
	}
	.cfu-social a{ width: 34px; height: 34px; }
	.cfu-social svg{ width: 15px; height: 15px; }
}

/* =========================================================
   PAGE SECTIONS — used by the "Pagină cu secțiuni" template
   ========================================================= */

/* Page hero: the same documentary cover as the front page, at a height
   that leaves room for the content rather than filling the screen. */
.cfu-page-hero.wp-block-cover{
	min-height: clamp(360px, 46vh, 520px);
	align-items: flex-end;
	padding: 0; border-radius: 0;
}
.cfu-page-hero .wp-block-cover__inner-container{
	max-width: var(--maxw); margin: 0 auto; width: 100%;
	padding: 0 var(--gutter) clamp(48px, 6vw, 76px);
}
.cfu-page-hero .wp-block-cover__background{
	background: linear-gradient(180deg, rgba(24,22,20,.55) 0%, rgba(24,22,20,.22) 45%, rgba(24,22,20,.82) 100%) !important;
	opacity: 1 !important;
}
.cfu-page-hero h1{ color: var(--white); margin: 0; max-width: 16ch; }
.cfu-page-hero .cfu-eyebrow{
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-style: italic; font-weight: 300;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: 0; text-transform: none;
	line-height: 1.3; color: var(--gold-soft); margin-bottom: 12px;
}

/* A drawing on its own, wherever the shortcode is used. */
.cfu-mark{ display: block; color: var(--wine); }
.cfu-mark .cfu-pictogram{ width: clamp(52px, 5.6vw, 66px); height: clamp(52px, 5.6vw, 66px); }

/* Story: an opening line at display size, then the body in two columns so
   seven paragraphs stop reading as one long ribbon. */
/* The opening line is the section's thesis, so it gets a panel of its own:
   cream against the white band, with the accent on the leading edge. A 26ch
   measure left it stranded in a quarter of the column. */
.cfu-story__lead{
	max-width: 860px;
	margin: clamp(36px, 4.2vw, 52px) 0 clamp(36px, 4vw, 50px);
	padding: clamp(28px, 3.2vw, 44px) clamp(30px, 3.6vw, 50px);
	background: var(--cream);
	border-left: 2px solid var(--wine);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; line-height: 1.42;
	color: var(--ink); text-wrap: pretty;
}
.cfu-story__body{
	columns: 2; column-gap: clamp(34px, 4vw, 64px);
	font-size: 16px; color: var(--ink-soft);
}
.cfu-story__body p{ margin: 0 0 18px; break-inside: avoid; }
.cfu-story__body p:last-child{ margin-bottom: 0; }

/* Numbered steps — what an evening actually looks like. */
.cfu-steps.wp-block-columns{ gap: clamp(22px, 2.6vw, 34px) !important; margin: 0; }
.cfu-steps .wp-block-column{
	background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
	padding: clamp(24px, 2.4vw, 32px);
	transition: border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.cfu-steps .wp-block-column:hover{ border-color: var(--gold); transform: translateY(-3px); }
.cfu-steps .cfu-mark{ margin-bottom: 18px; }
.cfu-steps .cfu-step__when{
	font-size: 11px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px;
}
.cfu-steps h3{ font-size: clamp(20px, 2vw, 25px); margin: 0 0 10px; }
.cfu-steps p:last-child{ font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* Three things we are after, each with its own drawing. */
.cfu-values.wp-block-columns{ gap: clamp(30px, 4vw, 60px) !important; margin: 0; }
.cfu-values .wp-block-column{ border-top: 2px solid var(--wine); padding-top: 26px; }
.cfu-values .cfu-mark{ margin-bottom: 16px; }
.cfu-values h3{ font-size: clamp(21px, 2.1vw, 27px); margin: 0 0 10px; }
.cfu-values p:last-child{ font-size: 15.5px; line-height: 1.72; color: var(--ink-soft); }

/* The catalogue: fourteen categories set in two columns, each kept whole. */
.cfu-catalog{ columns: 2; column-gap: clamp(36px, 4.5vw, 76px); }
.cfu-catalog__cat{
	break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 30px; padding-bottom: 26px;
	border-bottom: 1px solid var(--hairline);
}
.cfu-catalog__cat h3{
	font-size: 21px; line-height: 1.25; margin: 0 0 12px;
	display: flex; align-items: baseline; gap: 10px;
}
.cfu-catalog__cat h3::before{
	content: ""; width: 18px; height: 1px; background: var(--wine); flex: none;
	transform: translateY(-6px);
}
.cfu-catalog__cat ul{
	list-style: none; margin: 0; padding: 0;
	font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.cfu-catalog__cat li{ padding: 5px 0 5px 16px; position: relative; }
.cfu-catalog__cat li::before{
	content: ""; position: absolute; left: 0; top: 14px;
	width: 5px; height: 1px; background: var(--gold-deep);
}
.cfu-catalog__cat li strong{ color: var(--ink); font-weight: 500; }

/* Closing band: the one place on this page that asks for something. */
.cfu-cta-band{
	background: var(--wine); color: var(--white);
	padding: clamp(64px, 8vw, 104px) var(--gutter);
	text-align: center;
}
.cfu-cta-band h2{ color: var(--white); max-width: 20ch; margin: 0 auto 16px; }
.cfu-cta-band p{ color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto; }
.cfu-cta-band .wp-block-buttons{ margin-top: 32px; }
.cfu-cta-band .wp-block-button__link{
	background: var(--white); color: var(--wine) !important; border-color: var(--white);
}
.cfu-cta-band .wp-block-button__link:hover{
	background: transparent; color: var(--white) !important; border-color: var(--white);
}
.cfu-cta-band .is-style-outline .wp-block-button__link{
	background: transparent; color: var(--white) !important; border-color: rgba(255,255,255,.55);
}
.cfu-cta-band .is-style-outline .wp-block-button__link:hover{
	background: var(--white); color: var(--wine) !important; border-color: var(--white);
}

@media (max-width: 860px){
	.cfu-story__body{ columns: 1; }
	.cfu-catalog{ columns: 1; }
}

@media (max-width: 600px){
	/* On a phone the panel's own padding was costing a fifth of the line. */
	.cfu-story__lead{ padding: 22px 24px; font-size: 22px; }
}


/* The two films from the association's own page. Both are portrait phone
   footage, so they share the row evenly and are held to a width where a
   9:16 frame does not tower over the section. */
.cfu-videos.wp-block-columns{
	gap: clamp(18px, 2.2vw, 28px) !important;
	margin: clamp(40px, 4.6vw, 60px) 0 0;
	justify-content: center;
}
.cfu-videos .wp-block-column{ max-width: 330px; }
.cfu-videos .wp-block-video{ margin: 0; position: relative; }
.cfu-videos video{
	width: 100%; height: auto; display: block;
	background: var(--cream-2);
	border-radius: var(--radius);
	border: 1px solid var(--hairline);
}
.cfu-videos figcaption{
	margin-top: 10px; font-size: 12.5px; color: var(--faint);
	letter-spacing: .2px; text-align: left;
}

/* Play mark: the only thing over the still frame. */
.cfu-video__play{
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 68px; height: 68px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(24, 22, 20, .34);
	color: #fff; cursor: pointer; padding: 0;
	display: grid; place-items: center;
	transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.cfu-video__play svg{ width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.cfu-video__play:hover,
.cfu-video__play:focus-visible{
	background: var(--wine); border-color: var(--wine);
	transform: translate(-50%, -50%) scale(1.06);
}
.cfu-video.is-playing .cfu-video__play{ display: none; }

/* =========================================================
   SINGLE EVENT — header, content, related
   ========================================================= */
.cfu-single-hero{
	background: var(--cream);
	padding: clamp(40px, 5vw, 68px) 0 clamp(40px, 5vw, 68px);
	margin-bottom: clamp(44px, 5.5vw, 72px);
}
.cfu-single-hero__inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(30px, 4vw, 64px);
	align-items: center;
}
.cfu-single-hero__crumbs{
	display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
	font-size: 11px; font-weight: 600; letter-spacing: 2px;
	text-transform: uppercase; color: var(--gold-deep);
	margin: 0 0 20px;
}
.cfu-single-hero__crumbs a{ color: inherit; text-decoration: none; }
.cfu-single-hero__crumbs a:hover{ color: var(--wine); }
.cfu-single-hero__crumbs span{ color: var(--faint); }
.cfu-single-title{ margin: 0 0 26px; font-size: clamp(32px, 4.2vw, 50px); max-width: 19ch; }
.cfu-single-facts{
	display: flex; flex-wrap: wrap; gap: 16px 44px;
	padding-top: 22px; border-top: 1px solid var(--hairline);
}
.cfu-single-facts .k{
	display: block; margin-bottom: 5px;
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: var(--faint);
}
.cfu-single-facts .v{
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 22px; line-height: 1.25; color: var(--ink);
}
/* Height-capped and kept at its own aspect, so a portrait poster does not
   get blown up to the width of the column. */
/* Every rule here is scoped to the article header on purpose. WordPress copies
   a block's className onto the figures it builds inside the lightbox overlay,
   so an unscoped .cfu-single-hero__media rule reached the enlarged image too —
   and clamped it back to the 440px of the thumbnail, which is the one thing the
   lightbox exists to escape. The overlay is a child of <body>, so anchoring to
   .cfu-single-hero__inner keeps these rules on the page copy alone.

   The figure hugs the image rather than spanning the column, and is pushed
   right as a whole. It used to be the image that was pushed right inside a
   full-width figure — which left the lightbox button, positioned against the
   figure, floating 64px in from the picture's corner. */
.cfu-single-hero__inner .cfu-single-hero__media{
	margin: 0 0 0 auto;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}
.cfu-single-hero__inner .cfu-single-hero__media img{
	width: auto; max-width: 100%; height: auto; max-height: 440px;
	border-radius: var(--radius);
	border: 1px solid var(--hairline);
	display: block;
}
/* Core hides the trigger until hover; on a poster that is the only thing
   inviting the click, so it stays faintly visible and firms up on approach. */
.cfu-single-hero__inner .cfu-single-hero__media.wp-lightbox-container button{ opacity: .62; }
.cfu-single-hero__inner .cfu-single-hero__media.wp-lightbox-container:hover button,
.cfu-single-hero__inner .cfu-single-hero__media.wp-lightbox-container button:focus-visible{ opacity: 1; }

/* ---------- Article body ---------- */
.cfu-entry-content{ max-width: 700px; margin: 0 auto; color: var(--ink-soft); line-height: 1.78; }
.cfu-entry-content > p:first-of-type{ font-size: 19px; color: var(--ink); }
.cfu-entry-content h2{ color: var(--ink); font-size: clamp(26px, 2.6vw, 34px); margin: 48px 0 14px; }
.cfu-entry-content h3{ color: var(--ink); font-size: clamp(21px, 2.1vw, 26px); margin: 36px 0 12px; }
.cfu-entry-content strong{ color: var(--ink); font-weight: 600; }
.cfu-entry-content a{
	color: var(--wine);
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-thickness: 1px; text-decoration-color: rgba(127, 20, 50, .35);
}
.cfu-entry-content a:hover{ text-decoration-color: var(--wine); }
/* Marks rather than bullets, to match the lists elsewhere on the site. */
.cfu-entry-content ul{ list-style: none; padding-left: 0; }
.cfu-entry-content ul li{ position: relative; padding-left: 22px; margin-bottom: 9px; }
.cfu-entry-content ul li::before{
	content: ""; position: absolute; left: 0; top: .78em;
	width: 8px; height: 1px; background: var(--gold-deep);
}
.cfu-entry-content ol{ list-style: none; padding-left: 0; counter-reset: cfu-step; }
.cfu-entry-content ol li{
	position: relative; padding-left: 32px; margin-bottom: 9px;
	counter-increment: cfu-step;
}
.cfu-entry-content ol li::before{
	content: counter(cfu-step) "."; position: absolute; left: 0; top: -1px;
	font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--wine);
}
.cfu-entry-content blockquote{
	margin: 36px 0; padding-left: 26px; border-left: 2px solid var(--gold);
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-style: italic; font-size: clamp(21px, 2.2vw, 26px);
	line-height: 1.45; color: var(--ink);
}
.cfu-entry-content blockquote p:last-child{ margin-bottom: 0; }
.cfu-entry-content figure{ margin: 36px 0; }
.cfu-entry-content figcaption{
	margin-top: 10px; font-size: 12.5px; color: var(--faint); text-align: left;
}
/* Wide blocks escape the 700px measure without escaping the page. */
.cfu-entry-content .alignwide,
.cfu-entry-content .alignfull{
	width: min(100% + 260px, calc(100vw - var(--gutter) * 2));
	max-width: none;
	margin-left: 50%; transform: translateX(-50%);
}
.cfu-entry-content > *:last-child{ margin-bottom: 0; }

/* ---------- Related events ---------- */
.cfu-related{
	background: var(--cream);
	margin-top: clamp(56px, 7vw, 92px);
	padding: clamp(52px, 6.5vw, 88px) 0 clamp(52px, 6.5vw, 88px);
}
.cfu-related .cfu-kicker{ margin-bottom: 26px; }
.cfu-cards--three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfu-related__back{ margin-top: clamp(36px, 4vw, 52px); text-align: center; }

@media (max-width: 900px){
	.cfu-single-hero__inner{ grid-template-columns: 1fr; }
	/* Single column here, so the poster stops hugging the right. */
	.cfu-single-hero__inner .cfu-single-hero__media{ margin-left: 0; }
	.cfu-single-hero__inner .cfu-single-hero__media img{ max-height: 360px; }
	.cfu-cards--three{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
	/* Stacked, the header is a single centred block — and its type can
	   afford a notch more size. Must follow the 900px rules above, which
	   pin the poster to the left. */
	.cfu-single-hero{ text-align: center; }
	.cfu-single-hero__crumbs{ justify-content: center; font-size: 12px; }
	.cfu-single-title{ max-width: none; margin-left: auto; margin-right: auto; font-size: 34px; }
	.cfu-single-facts{ justify-content: center; }
	.cfu-single-facts .k{ font-size: 11.5px; }
	.cfu-single-facts .v{ font-size: 24px; }
	.cfu-single-hero__inner .cfu-single-hero__media{ margin-left: auto; margin-right: auto; }
}

/* The standing programmes, carried above each event listing. */
.cfu-archive-programmes{
	background: var(--cream);
	padding: clamp(44px, 5.5vw, 72px) 0;
	margin-bottom: clamp(8px, 1vw, 16px);
}

/* =========================================================
   CONTACT
   ========================================================= */
/* The same air the other sections leave under their headings — the block
   editor's own top margin is lost to the shorthand. */
.cfu-contact-cards.wp-block-columns{
	gap: clamp(18px, 2.2vw, 28px) !important;
	margin: clamp(34px, 4vw, 48px) 0 0;
}
.cfu-contact-cards .wp-block-column{
	background: var(--white);
	border: 1px solid var(--hairline); border-radius: var(--radius);
	box-shadow: 0 1px 1px rgba(47, 47, 47, .03), 0 10px 22px -18px rgba(47, 47, 47, .22);
	padding: clamp(26px, 2.8vw, 36px);
	transition: border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.cfu-contact-cards .wp-block-column:hover{ border-color: var(--gold); transform: translateY(-3px); }
.cfu-contact-cards .cfu-mark{ margin-bottom: 20px; }
.cfu-contact-cards h3{ font-size: clamp(20px, 2vw, 25px); margin: 0 0 14px; }
.cfu-contact-cards p{
	font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 6px;
}
.cfu-contact-cards p:last-child{ margin-bottom: 0; }
.cfu-contact-cards a{
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--hairline);
	transition: color .25s ease, border-color .25s ease;
}
.cfu-contact-cards a:hover{ color: var(--wine); border-color: var(--wine); }

/* The standing offer, as a panel rather than another run of text. */
.cfu-support-panel{
	max-width: 760px; margin: clamp(34px, 4vw, 48px) auto 0;
	background: var(--white);
	border: 1px solid var(--hairline); border-radius: var(--radius);
	border-top: 2px solid var(--wine);
	box-shadow: 0 1px 1px rgba(47, 47, 47, .03), 0 14px 30px -22px rgba(47, 47, 47, .26);
	padding: clamp(30px, 3.6vw, 52px);
	text-align: center;
}
.cfu-support-panel .cfu-mark{ margin: 0 auto 22px; }
.cfu-support-panel h2{ margin: 0 0 16px; }
.cfu-support-panel p{ color: var(--ink-soft); max-width: 52ch; margin: 0 auto 14px; }
.cfu-support-panel .cfu-support-panel__how{
	font-size: 15px; color: var(--ink-soft);
	padding-top: 18px; margin-top: 22px;
	border-top: 1px solid var(--hairline);
}
.cfu-support-panel .cfu-support-panel__how strong{ color: var(--wine); font-weight: 600; white-space: nowrap; }
.cfu-support-panel .wp-block-buttons{ margin-top: 26px; justify-content: center; }

/* Channels, from [cfu_social] */
.cfu-social-links{
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.cfu-social-links a{
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 18px;
	border: 1px solid var(--hairline); border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
	font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.cfu-social-links svg{ width: 16px; height: 16px; fill: currentColor; display: block; flex: none; }
.cfu-social-links a:hover,
.cfu-social-links a:focus-visible{
	border-color: var(--wine); color: var(--wine); background: rgba(127, 20, 50, .04);
}

@media (max-width: 860px){
	.cfu-contact-cards.wp-block-columns{ flex-wrap: wrap !important; }
	.cfu-contact-cards .wp-block-column{ flex-basis: 100% !important; }
}


/* =========================================================
   HERO, SPLIT ON DESKTOP
   The photograph is portrait (1707x2560). Full-bleed and wide, only 37% of
   its height fits and the picture reads as a slice of table. The narrower
   the column, the more of it survives: at a third of the width the whole
   height fits, cropped a little at the sides instead. On a phone the hero
   is taller than it is wide and the photograph already fits whole, so none
   of this applies there.
   ========================================================= */
@media (min-width: 901px){
	.cfu-hero-cover.wp-block-cover{
		/* The card below splits at 62% of the content column, inset by the
		   gutter. The hero is full-bleed, so left to a plain percentage its
		   own division lands a few pixels off that one — near enough to read
		   as a mistake. Both now use the same line. Percentages resolve
		   against the hero, not the viewport, so the scrollbar cannot
		   knock them apart. */
		--cfu-edge: calc((100% - min(100%, var(--maxw))) / 2 + var(--gutter));
		--cfu-split: calc(var(--cfu-edge) + 0.62 * (min(100%, var(--maxw)) - 2 * var(--gutter)));
		display: grid;
		/* The margin is a column of its own rather than padding on the text:
		   a percentage inside a custom property resolves where it is used,
		   so as padding on the child it would measure the child, not the
		   hero — and 100vw would count the scrollbar. */
		grid-template-columns:
			var(--cfu-edge)
			calc(var(--cfu-split) - var(--cfu-edge))
			calc(100% - var(--cfu-split));
		/* minmax(0,…) or the photograph's intrinsic height sizes the row. */
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
		/* The cap is what matters on a wide screen: at 1920 the frame needs
		   960px of height before the whole photograph fits. */
		min-height: clamp(700px, 92vh, 1020px);
		/* Warm dark rather than the flat neutral: three stops and a grain
		   take the weight off a field this large. */
		background: linear-gradient(158deg, #5C5649 0%, #453F37 48%, #35312B 100%);
	}
	/* The floating header's white menu sits over the photograph, and the top
	   of the photograph is a sunlit cream wall. A scrim across the top of
	   the hero gives it a ground; it fades out well above the headline, so
	   it reads as light falling off rather than as a band. */
	.cfu-hero-cover .wp-block-cover__background{
		display: block;
		/* Only over the photograph. Across the whole hero it would darken
		   the top of the panel, which is the part just lightened — and the
		   logo has all the contrast it needs on the panel as it is. */
		top: 0; left: var(--cfu-split); right: 0; bottom: auto;
		/* The menu sits 84–114px down, so the scrim has to still be strong
		   there: held near full strength to 40%, then a long fade. */
		height: clamp(230px, 30vh, 320px);
		background: linear-gradient(
			180deg,
			rgba(24, 22, 20, .78) 0%,
			rgba(24, 22, 20, .66) 40%,
			rgba(24, 22, 20, 0) 100%
		) !important;
		opacity: 1 !important;
	}

	/* Over the text half: a hatching of fine gold rules on the diagonal of
	   the sunbeam in the photograph, and a glow where that beam enters. An
	   engraved surface rather than a flat grey field. */
	.cfu-hero-cover::after{
		display: block; content: "";
		position: absolute; inset: 0 calc(100% - var(--cfu-split)) 0 0;
		pointer-events: none;
		background:
			radial-gradient(115% 85% at 16% 6%, rgba(184,155,94,.26) 0%, rgba(184,155,94,0) 62%),
			repeating-linear-gradient(
				142deg,
				rgba(184,155,94,.09) 0px,
				rgba(184,155,94,.09) 1px,
				rgba(184,155,94,0) 1px,
				rgba(184,155,94,0) 13px
			);
	}

	/* Sized, not stretched: on a replaced element `width:auto` with four
	   offsets keeps the intrinsic size and ignores `right`. */
	.cfu-hero-cover .wp-block-cover__image-background{
		position: absolute; top: 0; left: var(--cfu-split);
		width: calc(100% - var(--cfu-split)); height: 100%;
		object-fit: cover;
		/* The slow zoom scales from the centre by default, which walks the
		   left edge 15px into the panel and the top edge 25px past the hero
		   over its fourteen seconds. Anchored here, the two edges that meet
		   something stay put and the growth happens where it is clipped. */
		transform-origin: left top;
		/* Biased up a little for the widest screens, where the frame stops
		   being tall enough to hold the whole photograph. */
		object-position: 50% 38%;
	}
	.cfu-hero-cover .wp-block-cover__inner-container{
		grid-column: 2; grid-row: 1;
		display: flex; flex-direction: column; justify-content: center;
		max-width: none; width: 100%;
		padding:
			clamp(48px, 6vw, 90px)
			clamp(48px, 5vw, 88px)
			clamp(130px, 14vw, 210px)
			0;
	}
	.cfu-hero-cover h1{
		font-size: clamp(46px, 5vw, 76px);
		max-width: 15ch;
	}
}

/* Under Servicii the category is what the reader is choosing between, so it
   is set as a chip in the accent rather than a caption above the title. */
.cfu-card--service .cfu-card-tag{
	align-self: flex-start;
	padding: 7px 14px; border-radius: 100px;
	background: rgba(127, 20, 50, .07);
	color: var(--wine);
	font-size: 11px; letter-spacing: 1.6px;
	margin-bottom: 16px;
	transition: background-color .3s ease;
}
.cfu-card--service:hover .cfu-card-tag{ background: rgba(127, 20, 50, .12); }

/* =========================================================
   COOKIE CONSENT
   Both answers carry the same weight: refusing has to be no
   harder than agreeing, or the consent is not freely given.
   ========================================================= */
.cfu-consent{
	position: fixed; z-index: 100;
	left: 0; right: 0; bottom: 0;
	background: var(--white);
	border-top: 1px solid var(--hairline);
	box-shadow: 0 -12px 30px -24px rgba(47, 47, 47, .4);
	opacity: 0; transform: translateY(100%);
	transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.cfu-consent.is-open{ opacity: 1; transform: none; }
.cfu-consent__inner{
	max-width: var(--maxw); margin: 0 auto;
	padding: 20px var(--gutter);
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 3vw, 44px);
}
.cfu-consent__text{
	margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
	max-width: 78ch;
}
.cfu-consent__text a{ color: var(--wine); text-underline-offset: 3px; }
.cfu-consent__actions{ display: flex; gap: 10px; flex: none; }
.cfu-consent__btn{
	font-family: inherit; cursor: pointer;
	padding: 12px 24px; border-radius: var(--radius);
	border: 1px solid var(--ink); background: transparent; color: var(--ink);
	font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cfu-consent__btn:hover,
.cfu-consent__btn:focus-visible{ background: var(--ink); color: var(--white); }
.cfu-consent__btn--yes{ border-color: var(--wine); color: var(--wine); }
.cfu-consent__btn--yes:hover,
.cfu-consent__btn--yes:focus-visible{ background: var(--wine); border-color: var(--wine); color: var(--white); }

@media (max-width: 780px){
	.cfu-consent__inner{ flex-direction: column; align-items: stretch; gap: 16px; }
	.cfu-consent__actions{ justify-content: stretch; }
	.cfu-consent__btn{ flex: 1; padding: 13px 12px; }
}

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

.cfu-footer-legal{ display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cfu-footer-legal a{ font-size: 13px; color: #9C958A; }
.cfu-footer-legal a:hover{ color: var(--gold-soft); }

.cfu-support-panel__note{
	margin-top: 20px; margin-bottom: 0;
	text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--mute);
}
.cfu-support-panel__note a{ color: var(--wine); text-underline-offset: 3px; }

/* Doua clase, nu una: p:last-child{margin-bottom:0} din reset are
   specificitate (0,1,1) si invingea .cfu-footer-identity (0,1,0), lasand randul
   lipit de marginea ferestrei. Spatiul de jos e si padding, pe care regula aceea
   nu il poate atinge oricum. Culoarea: #6E6862 pe #2F2F2F dadea un contrast de
   2.44:1, sub orice prag de lizibilitate. */
.cfu-footer .cfu-footer-identity{
	margin: 16px 0 0;
	padding-bottom: clamp(28px, 3vw, 40px);
	font-size: 12.5px; line-height: 1.6; text-align: center;
	color: #9C958A;
}

/* Cookie names and option keys read as machine text, not prose: small,
   monospaced, on a faint tint so they stop looking like a font failure. */
.cfu-entry-content code{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .84em; letter-spacing: .01em;
	padding: 2px 6px; border-radius: 2px;
	background: var(--cream-2); color: var(--ink);
	overflow-wrap: anywhere;
}

/* Section heads inside an archive: the same rule-under-a-label as the front
   page's agenda, so the two listings read as one family. */
.cfu-archive-band__head{ margin-bottom: 28px; }
.cfu-archive-band__head--second{ margin-top: clamp(56px, 6vw, 84px); }

/* The agenda's way out, under the list rather than beside the heading. */
.cfu-agenda__foot{
	display: flex; justify-content: center;
	padding-top: clamp(30px, 3.4vw, 44px);
}

/* =========================================================
   Hero card — what happens next

   Three rows on the gold panel: the two weekly fixtures, then the next
   dated event. Hairlines rather than gaps, so the rhythm reads as a
   list and not as three loose blocks.
   ========================================================= */
/* align-self, because the card centres its children on a phone and would
   otherwise shrink-wrap this block — leaving the dividers as short dashes
   floating in the middle instead of ruling the full width. */
.cfu-next{ display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
.cfu-next__label{
	margin: 0;
	font-size: 11px; font-weight: 600; letter-spacing: 2.2px;
	text-transform: uppercase; color: rgba(255,255,255,.86);
}
.cfu-next__list{ list-style: none; margin: 0; padding: 0; }
.cfu-next__row{
	display: flex; flex-direction: column; gap: 5px;
	padding: 15px 0;
	border-top: 1px solid rgba(255,255,255,.3);
}
.cfu-next__row:first-child{ border-top: 0; padding-top: 0; }
.cfu-next__row:last-child{ padding-bottom: 0; }
.cfu-next__when{
	font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
	text-transform: uppercase; color: rgba(255,255,255,.8);
}
.cfu-next__title{
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2;
	color: var(--white);
	/* Some event titles run to seventy characters — a cruise itinerary naming
	   six ports. Clamped rather than trimmed in PHP, so the full title still
	   reaches a screen reader and the link still says where it goes. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
/* No underline at rest. Three underlined titles plus the two dividers made
   five horizontal lines in a card of three rows; the dividers already do the
   structural work, so the link affordance waits for the pointer. */
a.cfu-next__title{
	text-decoration: none;
	transition: opacity .25s ease, text-decoration-color .25s ease;
}
a.cfu-next__title:hover{
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,.55);
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
/* Keyboard users get more than a hover state can give them. */
a.cfu-next__title:focus-visible{
	outline: 2px solid var(--white);
	outline-offset: 3px;
	border-radius: 1px;
}

/* The card's way out, matched to "Despre noi" in the column beside it: same
   size, same letterspacing, same sliding arrow. White at rest because
   gold-deep on gold is unreadable; wine on hover, as in the left column. */
/* The card is a flex column with a 14px gap of its own, so this margin adds
   to it rather than replacing it — 20px here read as 42px on screen, wider
   than the button it replaced. */
.cfu-overlap__next .cfu-more{ margin: 2px 0 0; }
.cfu-overlap__next .cfu-more a{ color: var(--white); }
.cfu-overlap__next .cfu-more a:hover,
.cfu-overlap__next .cfu-more a:focus-visible{ color: var(--wine); }
.cfu-overlap__next .cfu-more a:focus-visible{
	outline: 2px solid var(--white); outline-offset: 4px; border-radius: 1px;
}

/* ---------- Hero: the two exit links, on one line ----------
   The left column flows as a block and its link lands wherever the text ends;
   the card centres its contents and floated the link 35px higher. Making both
   columns flex and pushing each link down with an auto margin pins them to
   their own bottom padding.

   Only above the stacking breakpoint: once the columns sit one under the other
   there is no free space for an auto margin to absorb, so it collapses to zero
   and takes the link's ordinary 26px breathing room with it. */
@media (min-width: 1081px){
	.cfu-overlap__note{ display: flex; flex-direction: column; }
	.cfu-overlap__note .cfu-more{ margin-top: auto; }
	.cfu-overlap__next{ justify-content: flex-start; }
	.cfu-overlap__next .cfu-more{
		margin-top: auto;
		/* The two columns carry different vertical padding — 4.2vw against
		   3.6vw, each with its own ceiling — so pinning both to their own
		   bottom still left them 8px apart here, and a different amount at
		   every other width. This is that difference, restated. */
		margin-bottom: calc(clamp(36px, 4.2vw, 54px) - clamp(34px, 3.6vw, 46px));
	}
}