/*
Theme Name: Drift
Theme URI: https://drift-breath.com
Author: Drift by Daniela Camacho
Author URI: https://drift-breath.com
Description: A calm, editorial block theme for Drift by Daniela Camacho — breathwork, meditation and movement. Built around a bone-and-sage palette, generous vertical rhythm and full-bleed photography.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drift
Tags: blog, portfolio, one-column, block-patterns, full-site-editing, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, accessibility-ready
*/

/* ==========================================================================
   Drift — component styles
   Global colour / type / spacing tokens live in theme.json and are exposed as
   --wp--preset--* custom properties. Everything below is layout and detail.
   ========================================================================== */

:root {
	--drift-header-h: 4.5rem;
	--drift-hairline: 1px solid var(--wp--preset--color--sand-deep);
	/* Igual al contentSize del Cover del hero y del cierre. Si cambia allí,
	   cámbialo aquí: lo usa el sangrado del titular. */
	--drift-hero-content: 76rem;
	--drift-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
	scroll-behaviour: smooth;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* WordPress separa los hijos de .wp-site-blocks con el blockGap (1.25rem), lo
   que dejaba una franja hueso de 20 px entre la cabecera y la foto del hero.
   Cabecera, contenido y pie van pegados. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--drift-header-h) + 1.5rem); }

/* Visible keyboard focus everywhere. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.drift-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: var(--drift-header-h);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: var(--drift-hairline);
}

/* The admin bar pushes the page down; keep the sticky header below it. */
.admin-bar .drift-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .drift-header { top: 46px; } }

/* The designers' wordmark is 2.02:1, roughly half as wide for its height as
   the draft it replaced (3.97:1). Sizing it by width would have made it 62px
   tall inside a 72px header, so it is sized by HEIGHT instead and the width
   follows. If the artwork is ever swapped again, check this against
   --drift-header-h rather than eyeballing the width. */
.drift-header .wp-block-site-logo img {
	height: clamp(2.1rem, 3.6vw, 2.7rem);
	width: auto;
	max-width: none;
	display: block;
}

/* Centrado vertical: la fila interior ocupa todo el alto útil de la cabecera
   y reparte su contenido con align-items:center. No tocar el `display` de
   .drift-header: el margin-inline:auto de WordPress dejaría de estirar la fila
   y el logotipo se iría al centro en vez de al borde izquierdo. */
.drift-header > .wp-block-group {
	min-height: calc(var(--drift-header-h) - 1.4rem);
}

.drift-brand { display: flex; align-items: center; gap: 0.7rem; }

.drift-brand .wp-block-site-title { margin: 0; }

.drift-brand .wp-block-site-title a { text-decoration: none; }

/* Language switcher — EN / ES, current language not a link. */
.drift-lang {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex: 0 0 auto;
}

.drift-lang p {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
}

.drift-lang a {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	text-decoration: none;
	transition: color 0.3s var(--drift-ease);
}

.drift-lang a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.drift-lang__current { color: var(--wp--preset--color--contrast); }

.drift-lang__sep { color: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent); }

/* Underline that draws in from the left on hover. */
@media (max-width: 1080px) {
	.drift-nav { font-size: 0.875rem; }
	.drift-header .wp-block-navigation { --wp--style--block-gap: 1.35rem; }
	.drift-nav .wp-block-navigation__container { gap: 1.35rem; }
}

.drift-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	text-decoration: none;
}

.drift-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--drift-ease);
}

.drift-nav .wp-block-navigation-item__content:hover::after,
.drift-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Small shared details
   -------------------------------------------------------------------------- */

/* Section label above a heading. Bold and dark so it reads as the name of the
   section you have just landed on, not as a caption for the line below it. */
.drift-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-block: 0 0.85rem;
}

.drift-eyebrow--light { color: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent); }

/* Tighten the label on narrow screens so it stays on one line. */
@media (max-width: 620px) {
	.drift-eyebrow {
		font-size: 0.8125rem;
		letter-spacing: 0.1em;
	}
}

/* Short terracotta hairline with a dot in the middle, echoing the logo. */
.wp-block-separator.drift-sep {
	position: relative;
	border: 0;
	height: 1px;
	width: 100%;
	max-width: 9rem;
	margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wp--preset--color--terracotta) 22%,
		var(--wp--preset--color--terracotta) 78%,
		transparent 100%);
	opacity: 0.5;
}

.wp-block-separator.drift-sep::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
}

.wp-block-separator.drift-sep.aligncenter,
.has-text-align-center + .wp-block-separator.drift-sep { margin-inline: auto; }

.drift-on-dark .wp-block-separator.drift-sep {
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--base) 22%, var(--wp--preset--color--base) 78%, transparent);
}

.drift-on-dark .wp-block-separator.drift-sep::after { background: var(--wp--preset--color--base); }

/* Cap a heading or paragraph at a comfortable reading measure, left aligned. */
.drift-measure { max-width: 46rem; }

/* Large, quiet pull statement. */
.drift-statement p,
p.drift-statement {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-block: 0;
}

.drift-lead {
	font-size: clamp(1.15rem, 1.6vw, 1.3rem);
	line-height: 1.62;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
}

.drift-italic {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.42;
}

/* --------------------------------------------------------------------------
   Section heading hierarchy
   --------------------------------------------------------------------------
   Feedback 02, point 1: "all the titles should be bigger than the text below
   them", naming About me, Work with me and Get in touch. Those three used to
   be a small uppercase eyebrow sitting above a very large sentence, which is
   the opposite. So the name of the section is now the h2, and the sentence
   that used to be the h2 became .drift-subhead underneath it.

   The two sizes are separate clamps on purpose, with no overlap at any
   viewport width: the heading runs 1.7rem to 2.6rem (the "section" preset)
   and the subhead 1.3rem to 1.85rem, so the title is always the larger of
   the two, never just at one breakpoint. */
.drift-sectionhead {
	margin-block: 0 0.75rem;
}

/* Short terracotta hairline under the section name, the same mark used by
   .drift-sep on the inner pages, so the three home sections and the two
   standalone pages read as one family. */
.drift-sectionhead::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 1px;
	margin-block-start: clamp(0.9rem, 1.6vw, 1.25rem);
	background: var(--wp--preset--color--terracotta);
	opacity: 0.55;
}

.has-text-align-center.drift-sectionhead::after { margin-inline: auto; }

.drift-on-dark .drift-sectionhead::after { background: var(--wp--preset--color--base); }

/* The sentence that used to be the heading. Still Cormorant, still the
   emotional line of the section, but clearly below the title. */
.drift-subhead {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(1.3rem, 2.3vw, 1.85rem);
	line-height: 1.34;
	letter-spacing: -0.008em;
	max-width: 34ch;
	margin-block: 0;
	color: var(--wp--preset--color--contrast);
}

/* The question that guides Daniela's work. Feedback 02 moved it below the
   opening paragraph of About me, so it stops being a heading and becomes a
   pull quote: same serif, italic, with a hairline down the left edge. */
.drift-question {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.3rem, 2.3vw, 1.85rem);
	line-height: 1.38;
	letter-spacing: -0.008em;
	max-width: 30ch;
	border-inline-start: 1px solid var(--wp--preset--color--accent);
	padding-inline-start: clamp(1rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--contrast);
}

/* Get in touch is a single centred column, so its subhead centres too. The
   cap is in rem rather than ch and tight enough to keep "Let's begin with a
   conversation." and "Empecemos con una conversación." on one line; at the
   34ch of the left-aligned variant both of them broke after "a" / "una". */
.drift-subhead--center {
	max-width: 26rem;
	margin-inline: auto;
}

/* Text link with a trailing arrow. */
.drift-arrow-link a,
a.drift-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.3rem;
}

.drift-arrow-link a::after,
a.drift-arrow-link::after {
	content: "\2192";
	transition: transform 0.35s var(--drift-ease);
}

.drift-arrow-link a:hover::after,
a.drift-arrow-link:hover::after { transform: translateX(0.3rem); }

/* Outline variant of the button element. */
.wp-block-button.is-style-drift-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

.wp-block-button.is-style-drift-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.drift-on-dark .wp-block-button.is-style-drift-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.drift-on-dark .wp-block-button.is-style-drift-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Heights come from the Cover block itself so they stay draggable in the editor. */
.drift-hero { align-items: flex-end; }

/* Lo que WordPress hace con los Cover y la vista previa no imitaba:
   - Les pone `padding: 1em`, y el texto quedaba a 18 px del borde. Se les da
     el mismo margen lateral que al resto de la página.
   - Con una posición de contenido elegida (abajo a la izquierda en el hero,
     centro a la izquierda en el cierre) pone el contenedor interior a
     `width: auto`, que se encoge al texto. Sin el 100% el texto no se alinea
     con la columna de 76rem ni con el logo. */
.wp-block-cover.drift-hero,
.wp-block-cover.drift-band,
.wp-block-cover.drift-closing {
	padding: var(--wp--preset--spacing--40);
}

.drift-hero > .wp-block-cover__inner-container,
.drift-band > .wp-block-cover__inner-container,
.drift-closing > .wp-block-cover__inner-container {
	width: 100% !important;
}

.drift-hero .wp-block-cover__inner-container { padding-block-end: clamp(2.5rem, 6vw, 5rem); }

.drift-hero__title {
	font-size: clamp(3rem, 9.5vw, 7rem);
	line-height: 0.98;
	letter-spacing: -0.028em;
	max-width: 14ch;
	margin-block: 0;
	/* El max-width fuerza el salto de línea en titulares largos, pero deja la
	   caja más estrecha que la columna, y WordPress centra a los hijos de un
	   contenedor constrained con `margin-left: auto !important`: el titular
	   salía centrado respecto al eyebrow y a los botones.
	   En vez de centrar esta caja estrecha, le damos el mismo sangrado con el
	   que WordPress centra la columna de 76rem. El max() cubre las pantallas
	   donde la columna ya es más estrecha que 76rem y el sangrado es cero. */
	margin-inline: max(0px, calc((100% - var(--drift-hero-content)) / 2)) auto !important;
}

/* Slow, gentle rise on load — skipped for reduced-motion users. */
.drift-rise {
	animation: drift-rise 1.4s var(--drift-ease) both;
}

.drift-rise--2 { animation-delay: 0.15s; }
.drift-rise--3 { animation-delay: 0.3s; }

@keyframes drift-rise {
	from { opacity: 0; transform: translateY(1.1rem); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Full-bleed photo band with a line of text over it
   -------------------------------------------------------------------------- */

.drift-band p.drift-statement {
	max-width: 26ch;
	margin-inline: auto;
}

/* Take over the Cover overlay so the scrim is a gradient, not a flat dim.
   The scrim colour is mixed from the palette's darkest tone rather than
   hard-coded, so changing the palette in theme.json recolours the
   photographs along with everything else. */
.drift-hero > .wp-block-cover__background,
.drift-band > .wp-block-cover__background,
.drift-closing > .wp-block-cover__background {
	--drift-scrim: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, #000);
	/* El !important es obligatorio: WordPress escribe
	   `.has-contrast-background-color { background-color: … !important }` y,
	   sin él, el velo era un bloque gris opaco que tapaba la foto entera. */
	background-color: transparent !important;
	opacity: 1;
}

.drift-hero > .wp-block-cover__background {
	background-image:
		linear-gradient(102deg,
			color-mix(in srgb, var(--drift-scrim) 82%, transparent) 0%,
			color-mix(in srgb, var(--drift-scrim) 60%, transparent) 24%,
			color-mix(in srgb, var(--drift-scrim) 24%, transparent) 48%,
			transparent 72%),
		linear-gradient(0deg,
			color-mix(in srgb, var(--drift-scrim) 56%, transparent) 0%,
			color-mix(in srgb, var(--drift-scrim) 15%, transparent) 40%,
			transparent 70%,
			color-mix(in srgb, var(--drift-scrim) 24%, transparent) 100%);
}

/* Velo plano y parejo: es el efecto que tenía la banda de la primera versión. */
.drift-band > .wp-block-cover__background {
	background-image: linear-gradient(0deg,
		color-mix(in srgb, var(--drift-scrim) 60%, transparent) 0%,
		color-mix(in srgb, var(--drift-scrim) 48%, transparent) 50%,
		color-mix(in srgb, var(--drift-scrim) 60%, transparent) 100%);
}

/* Lo mismo en la banda de cierre, un punto más oscuro: aquí la roca de la foto
   es clara y el texto va encima. */
.drift-closing > .wp-block-cover__background {
	background-image: linear-gradient(0deg,
		color-mix(in srgb, var(--drift-scrim) 66%, transparent) 0%,
		color-mix(in srgb, var(--drift-scrim) 56%, transparent) 50%,
		color-mix(in srgb, var(--drift-scrim) 66%, transparent) 100%);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.drift-about__figure {
		position: sticky;
		top: calc(var(--drift-header-h) + 2.5rem);
	}
}

/* --------------------------------------------------------------------------
   About — "Read more"
   --------------------------------------------------------------------------
   The ten paragraphs of About me are split by inc/sections/about.php: three
   stay open and the rest go inside a core/details, so this collapses and
   expands with no JavaScript, like the offerings.

   The fade is a pseudo-element on the details block itself, not a wrapper
   around the visible paragraphs. That way the gradient is anchored to
   something that is always exactly where the visible text stops, whatever
   the paragraph count or the column width, and it adds no markup for
   Daniela to trip over in the editor. It is absolutely positioned, so it
   takes no space: it floats over the bottom of the last visible paragraph.

   The positioning context is the details block and not the button, because
   the button is an inline-flex pill and the fade has to span the whole text
   column.

   The gradient ends in `base` because About me sits on the page background.
   If the section ever gets its own background colour, this has to follow it
   or a pale band will appear across the text. */
/* `.wp-block-details` lleva `margin-block: 0` más abajo en este archivo y, con
   la misma especificidad, ganaba: el botón quedaba pegado al párrafo. De ahí
   el selector doble. El hueco de arriba es el mismo que hay debajo hasta el
   enlace de certificaciones, para que el botón quede centrado entre los dos. */
.wp-block-details.drift-readmore {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--40);
}

.drift-readmore > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
	border-radius: 999px;
	padding: 0.8em 1.8em;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.3s var(--drift-ease), color 0.3s var(--drift-ease),
	            border-color 0.3s var(--drift-ease);
}

.drift-readmore > summary::-webkit-details-marker { display: none; }

.drift-readmore > summary:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.drift-readmore > summary::after {
	content: "\2193";
	transition: transform 0.35s var(--drift-ease);
}

.drift-readmore[open] > summary::after { transform: rotate(180deg); }

/* The fade. `bottom: 100%` parks it directly above the block, so it covers
   the last stretch of the paragraph before it and takes up no space itself.
   It only exists while the block is closed: with it open there is nothing
   underneath to fade into and the gradient would just grey out a paragraph. */
.drift-readmore::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	/* Se mide desde el borde del bloque, así que incluye el hueco de arriba:
	   7rem de difuminado sobre el texto más ese hueco. */
	height: calc(7rem + var(--wp--preset--spacing--40));
	pointer-events: none;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent) 60%,
		var(--wp--preset--color--base) 100%);
}

.drift-readmore[open]::before { display: none; }

/* Opening it should not slam the hidden text against the button. */
.drift-readmore[open] > summary { margin-block-end: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */

.drift-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-block: var(--drift-hairline);
}

.drift-stats > * {
	padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
	text-align: center;
	margin-block: 0;
}

.drift-stats p { margin-block: 0; }

.drift-stats > * + * { border-left: var(--drift-hairline); }

.drift-stat__figure {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}

.drift-stat__label {
	display: block;
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent);
	line-height: 1.5;
}

@media (max-width: 600px) {
	.drift-stats { grid-template-columns: 1fr; }
	.drift-stats > * + * { border-left: 0; border-top: var(--drift-hairline); }
}

/* --------------------------------------------------------------------------
   Offerings — collapsible editorial rows

   Built on core/details, so opening and closing needs no JavaScript. Each row
   reveals a short summary first and keeps the long description behind a second,
   nested "See more". The 01 / 02 / 03 numbers come from a CSS counter, so the
   list renumbers itself if an offering is added, removed or reordered.
   -------------------------------------------------------------------------- */

.wp-block-details { margin-block: 0; }

.drift-offers { counter-reset: drift-offer; }

.drift-offer {
	border-top: var(--drift-hairline);
	margin-block: 0;
}

.drift-offers > .drift-offer:last-child { border-bottom: var(--drift-hairline); }

/* The clickable row: number, title, and a plus that loses its stem when open. */
.drift-offer > summary {
	display: grid;
	grid-template-columns: 3.5rem 1fr 1.25rem;
	align-items: baseline;
	column-gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1.4rem, 2.8vw, 2.1rem);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.008em;
	list-style: none;
	cursor: pointer;
	transition: color 0.3s var(--drift-ease);
}

.drift-offer > summary::-webkit-details-marker { display: none; }

.drift-offer > summary:hover { color: var(--wp--preset--color--accent); }

.drift-offer > summary::before {
	counter-increment: drift-offer;
	content: counter(drift-offer, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--terracotta);
}

.drift-offer > summary::after {
	content: "";
	align-self: start;
	justify-self: end;
	margin-block-start: 0.34em;
	width: 0.95rem;
	height: 0.95rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	color: var(--wp--preset--color--accent);
}

.drift-offer[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

/* Body text lines up with the title column, not with the number. */
.drift-offer__body {
	max-width: 46rem;
	margin-block: 0 clamp(2rem, 4vw, 3rem);
	padding-inline-start: calc(3.5rem + clamp(1rem, 2.5vw, 2rem));
}

.drift-offer__body > *:first-child { margin-block-start: 0; }

.drift-offer__body p { margin-block: 0 1.1rem; }

@media (max-width: 700px) {
	.drift-offer > summary { grid-template-columns: 2.4rem 1fr 1.25rem; }
	.drift-offer__body { padding-inline-start: 0; }
}

/* The second level: "See more". */
.drift-more { margin-block-start: 0.4rem; }

.drift-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	padding-bottom: 0.3rem;
	list-style: none;
	cursor: pointer;
	transition: color 0.3s var(--drift-ease);
}

.drift-more > summary::-webkit-details-marker { display: none; }

.drift-more > summary:hover { color: var(--wp--preset--color--contrast); }

.drift-more > summary::after {
	content: "\2193";
	transition: transform 0.35s var(--drift-ease);
}

.drift-more[open] > summary::after { transform: rotate(180deg); }

.drift-more > summary + * { margin-block-start: 1.6rem; }

/* Certification rows sit inside plain groups; kill the flow gaps. */
.drift-cert > * { margin-block: 0; }

.drift-cert p { margin-block: 0; }

/* "Ideal if you are experiencing" / focus-area lists. */
.drift-checklist { list-style: none; padding: 0; margin: 0; }

.drift-checklist li {
	position: relative;
	padding-left: 1.85rem;
	margin-block: 0.85rem;
	line-height: 1.6;
}

.drift-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.95rem;
	height: 1px;
	background: var(--wp--preset--color--terracotta);
}

.drift-note {
	border-left: 2px solid var(--wp--preset--color--accent-2);
	padding: 0.25rem 0 0.25rem 1.4rem;
}

.drift-note__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-block: 0 0.9rem;
}

/* --------------------------------------------------------------------------
   Dark call-out band (free discovery call)
   -------------------------------------------------------------------------- */

.drift-on-dark,
.drift-on-dark :where(h1, h2, h3, h4, h5, p, li) { color: var(--wp--preset--color--base); }

.drift-on-dark .drift-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent); }

.drift-on-dark .drift-rule::before,
.drift-on-dark .drift-rule::after,
.drift-on-dark .drift-rule > span { background: var(--wp--preset--color--base); opacity: 0.6; }

.drift-on-dark .wp-block-button:not(.is-style-drift-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

.drift-on-dark .wp-block-button:not(.is-style-drift-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   Certifications
   -------------------------------------------------------------------------- */

.drift-cert-group + .drift-cert-group { margin-top: clamp(3rem, 6vw, 4.5rem); }

.drift-cert-group__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	margin-block: 0 0.5rem;
}

.drift-cert {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0 2rem;
	padding-block: clamp(1.2rem, 2.4vw, 1.75rem);
	border-bottom: var(--drift-hairline);
}

.drift-cert__year {
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--terracotta);
	padding-top: 0.35em;
	font-variant-numeric: tabular-nums;
}

.drift-cert__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.1vw, 1.55rem);
	font-weight: 400;
	line-height: 1.25;
	margin-block: 0 0.4rem;
}

.drift-cert__org {
	font-size: 1rem;
	line-height: 1.6;
	margin-block: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.drift-cert__accred {
	display: block;
	font-size: 0.875rem;
	line-height: 1.55;
	margin-top: 0.45rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 58%, transparent);
}

@media (max-width: 700px) {
	.drift-cert { grid-template-columns: 1fr; gap: 0.5rem; }
	.drift-cert__year { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Upcoming events

   Feedback 02 brought the first real event, with a poster. An entry is now a
   two column block: the poster on the left, everything else on the right.
   The columns come from core/columns, so this file only styles the pieces;
   core collapses them to one column on a phone on its own.
   -------------------------------------------------------------------------- */

.drift-event {
	padding-block: clamp(2rem, 4vw, 3rem);
	border-bottom: var(--drift-hairline);
}

.drift-events > .drift-event:first-child { border-top: var(--drift-hairline); }

.drift-event p { margin-block: 0; }

.drift-event p + p { margin-block-start: 1.1rem; }

.drift-event__poster .wp-block-image { margin-block: 0; }

.drift-event__poster img {
	width: 100%;
	height: auto;
	display: block;
}

.drift-event__status {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	border-radius: 999px;
	padding: 0.45rem 0.85rem;
	margin-block-end: 0.9rem;
}

.drift-event__title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 300;
	line-height: 1.18;
	margin-block: 0 0.6rem;
}

/* Date, time and place on one line, in the terracotta used for dates
   elsewhere in the site. */
.drift-event__when {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--terracotta);
}

.drift-event__pull {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.35;
	color: var(--wp--preset--color--accent);
	margin-block-start: 1.4rem !important;
}

/* Where and when, repeated at the foot of the entry the way the poster does,
   so somebody scanning for the address does not have to read the copy. */
.drift-event__details {
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	padding-inline-start: 1.25rem;
}

.drift-event__details p + p { margin-block-start: 0.5rem; }

.drift-event__details p {
	font-size: 1rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.drift-event__detail-label {
	display: inline-block;
	min-width: 5.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* 70%, not less: at 12px this is small text, and 55% measured 3.3:1 on
	   the bone background. 70% gives 5.0:1. */
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

.drift-event__closing {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	line-height: 1.4;
	margin-block-start: 1.6rem !important;
}

.drift-event__note {
	margin-block-start: 0.85rem;
	line-height: 1.65;
}

.drift-event__cta { margin-block-start: 1.6rem !important; }

.drift-events__empty {
	border-block: var(--drift-hairline);
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	max-width: 38rem;
}

.drift-events__empty p { margin-block: 0; }

/* The poster is taller than it is wide; on a phone it would eat the whole
   first screen, so cap it and keep it centred. */
@media (max-width: 781px) {
	.drift-event__poster img {
		max-width: 20rem;
		margin-inline: auto;
	}

	.drift-event__detail-label { display: block; min-width: 0; margin-bottom: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Contact form (WordPress.com / Jetpack Form block)
   -------------------------------------------------------------------------- */

.drift-form .wp-block-jetpack-contact-form,
.drift-form form { display: grid; gap: 1rem 1.5rem; }

.drift-form :where(.jetpack-field, .grunion-field-wrap, .drift-field) { margin: 0; }

/* Jetpack ships hidden inputs inside the form. They have no size but they
   would still claim a grid cell and push name and email out of step, so
   they are taken out of the flow. */
.drift-form input[type="hidden"] { display: none; }

/* Name and email share a row from 640px up. That halves a field row out of
   the section, which is most of what made Get in touch feel long.

   The pairing is by POSITION, not by a Jetpack class: those class names have
   changed between versions of the plugin and this form has never run inside
   a real WordPress. If the markup turns out different, the two fields simply
   stay full width, which is what they did before. Nothing breaks. */
@media (min-width: 640px) {
	.drift-form .wp-block-jetpack-contact-form,
	.drift-form form { grid-template-columns: 1fr 1fr; }

	.drift-form :where(.wp-block-jetpack-contact-form, form) > * { grid-column: 1 / -1; }

	.drift-form :where(.wp-block-jetpack-contact-form, form)
		> :where(.jetpack-field, .grunion-field-wrap, .drift-field):nth-child(1),
	.drift-form :where(.wp-block-jetpack-contact-form, form)
		> :where(.jetpack-field, .grunion-field-wrap, .drift-field):nth-child(2) {
		grid-column: auto;
	}
}

.drift-form :where(label, .jetpack-field-label, .grunion-field-label) {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	margin-bottom: 0.4rem;
}

.drift-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent);
	border-radius: 0;
	padding: 0.65rem 0;
	transition: border-color 0.3s var(--drift-ease);
	-webkit-appearance: none;
	appearance: none;
}

.drift-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--accent) 50%),
	                  linear-gradient(135deg, var(--wp--preset--color--accent) 50%, transparent 50%);
	background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

.drift-form :where(input, select, textarea):focus {
	border-bottom-color: var(--wp--preset--color--accent);
	outline: none;
}

.drift-form textarea { min-height: 5.25rem; resize: vertical; line-height: 1.65; }

.drift-form :where(button[type="submit"], .wp-block-jetpack-button button, input[type="submit"]) {
	justify-self: start;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 1.05em 2.4em;
	cursor: pointer;
	transition: background-color 0.3s var(--drift-ease), border-color 0.3s var(--drift-ease);
}

.drift-form :where(button[type="submit"], .wp-block-jetpack-button button, input[type="submit"]):hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   Newsletter
   --------------------------------------------------------------------------
   The WordPress.com / Jetpack Subscribe block. Its own markup nests the
   field and the button inside .wp-block-jetpack-subscriptions__form-elements,
   but the class names have moved around between Jetpack versions, so the
   rules below also match a plain input and button inside the section. That
   way the section still looks right if the block markup shifts under us. */

.drift-newsletter .wp-block-jetpack-subscriptions__form-elements,
.drift-newsletter form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 0.9rem 1.1rem;
}

.drift-newsletter :where(p) { margin-block: 0; }

/* Both Jetpack and the preview renderer wrap the field and the button in a
   <p> each, so the flex items are those wrappers, not the input. The field
   wrapper is always first, so it is the one that takes the free space. */
.drift-newsletter :where(.wp-block-jetpack-subscriptions__form-elements, form) > * {
	flex: 0 0 auto;
	min-width: 0;
}

.drift-newsletter :where(.wp-block-jetpack-subscriptions__form-elements, form) > *:first-child {
	flex: 1 1 18rem;
}

.drift-newsletter :where(input[type="email"], input[type="text"]) {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
	border-radius: 0;
	padding: 0.7rem 0;
	transition: border-color 0.3s var(--drift-ease);
	-webkit-appearance: none;
	appearance: none;
}

/* The placeholder is doing the job of the label here (the real label is
   screen reader only), so it has to pass AA like any other text. Measured on
   the sand background: 48% gave 2.9:1, 75% gives 5.5:1. */
.drift-newsletter :where(input)::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
	opacity: 1;
}

.drift-newsletter :where(input):focus {
	border-bottom-color: var(--wp--preset--color--accent);
	outline: none;
}

.drift-newsletter :where(button[type="submit"], button, input[type="submit"]) {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 1.05em 2.4em;
	cursor: pointer;
	transition: background-color 0.3s var(--drift-ease), border-color 0.3s var(--drift-ease);
}

.drift-newsletter :where(button[type="submit"], button, input[type="submit"]):hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Below this the field and the button stop fitting side by side; stacking
   them keeps the button full width instead of leaving a stub. */
@media (max-width: 480px) {
	.drift-newsletter .wp-block-jetpack-subscriptions__form-elements,
	.drift-newsletter form { flex-direction: column; align-items: stretch; }

	.drift-newsletter :where(button[type="submit"], button, input[type="submit"]) { width: 100%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.drift-footer { border-top: var(--drift-hairline); }

.drift-footer img {
	width: clamp(8.5rem, 26vw, 11.5rem);
	height: auto;
	display: block;
}

.drift-footer .wp-block-navigation { justify-content: center; }

.drift-footer__by {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2;
	margin-block: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

/* Two links now (Email and Instagram), so the paragraph becomes a row with a
   real gap. Inline anchors inside a <p> would otherwise touch. */
.drift-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.6rem;
}

.drift-social a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	padding-bottom: 0.25rem;
	transition: color 0.3s var(--drift-ease), border-color 0.3s var(--drift-ease);
}

.drift-social a:hover {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Closing band

   Bookends the page: same full-bleed Cover treatment as the hero, a different
   frame, and the hero's own line again. Left aligned, like the hero.
   -------------------------------------------------------------------------- */

.drift-closing { align-items: center; }

/* Sin max-width a propósito: una caja más estrecha que la columna la
   centraría `margin-inline: auto`, y esta línea va a la izquierda. */
.drift-closing__line { margin-block: 0; }

/* The band is cut from a portrait original, so on a phone it needs a taller
   box and a higher focal point to keep her in frame. */
@media (max-width: 781px) {
	.drift-closing .wp-block-cover__image-background { object-position: 50% 22% !important; }
}

.drift-fineprint {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

/* --------------------------------------------------------------------------
   Image treatment
   -------------------------------------------------------------------------- */

.drift-figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* The hero photo is a wide landscape; on a phone, re-centre it on her face. */
@media (max-width: 781px) {
	.drift-hero .wp-block-cover__image-background { object-position: 29% 42% !important; }
	.drift-band .wp-block-cover__image-background { object-position: 50% 30% !important; }
}

/* Slow zoom-out settle on the hero photo. */
.drift-hero .wp-block-cover__image-background {
	animation: drift-settle 12s var(--drift-ease) both;
}

@keyframes drift-settle {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip-link.screen-reader-text {
	position: absolute !important;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.9375rem;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.2s var(--drift-ease);
}

.skip-link.screen-reader-text:focus { transform: none; }