/* ═══════════════════════════════════════════════════════════
   HERO — LE PORTAIL (variante B, Satoshi)
   Chosen by Mendar on 18/08/2026 out of two mock-ups.

   Everything here is a DEROGATION from the Cahier, and that is
   deliberate. The Cahier forbids type over a photograph, sets
   labels in sentence case and carries no accent colour at all.
   The five Behance references the client picked do the exact
   opposite — all five lay the name over the image, in spaced
   capitals, with one rare accent. This sheet reconciles the two
   by scoping every exception to the front door and nowhere else.

   It is loaded ONLY while the preview is on, so the site the
   client is currently reviewing is not touched by a single byte
   of it. See alextome_ecrin_hero_portal_active() in functions.php.
   ═══════════════════════════════════════════════════════════ */

/* ── Putting the portal back together ─────────────────────
   The Cahier does not merely ignore the parent's portal, it DISMANTLES it:
   it hides the veil and the grain with !important, takes the photograph out
   of absolute flow, caps it at 72svh and strips the shadow off the name —
   all of it coherent, because that art direction never lays type over a
   picture and needs none of these devices.

   The front door does. Measured on the staging server before this block
   existed: the hero stood 648px tall inside a 900px viewport and the name
   sat on the bare photograph with no veil at all. So the mechanism is
   restored here, scoped to .portal--ecrin and nowhere else — the Cahier
   keeps its rules everywhere it still applies. */
.portal--ecrin {
	height: 100svh;
	min-height: 30rem;
	overflow: hidden;
	background: var(--ink);
}

.portal--ecrin .portal__media,
.portal--ecrin .portal__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.portal--ecrin .portal__media img {
	object-fit: cover;
	display: block;
}

/* Hidden with !important by the Cahier — the veil is the only thing keeping
   the name readable over a bright frame, so it has to come back. */
.portal--ecrin .portal__veil { display: block !important; }

.portal--ecrin {
	/* The coloured accent that used to sit on "since 2014" is gone (Mendar,
	   18/08/2026, along with the rest of the ornament). It never cleared the
	   4.5:1 threshold over a photograph anyway — dropping it closes that
	   question for good rather than trading legibility against a hue. */
	/* THE GRID. The front door used to size its own margin — clamp(…, 4vw,
	   3.25rem) = 52px at 1440, against the 72px every other page runs on. Two
	   grids on one site: the menu jumped 20px sideways the moment you scrolled
	   past the photograph (Mendar, 19/08/2026). There is now ONE gutter, the
	   theme's, and the front door obeys it like everything else. */
	--edge: var(--gutter);
}

/* ── Coming off the photograph ─────────────────────────────
   Measured: 0px between the bottom of the picture and the top of the first
   section, which then opens on 0.9rem of its own padding. "Selected weddings"
   therefore started 14px under a full-screen photograph, and the page read as
   two things stuck together rather than as one going past the other.

   The parent zeroes main's padding on a portal page (has-portal), which is
   right for the picture and wrong for what follows it. The air is given back
   here, sized on the theme's own rhythm — its sections close on
   clamp(2.25rem, 6vw, 5rem), and a change of ground deserves slightly more
   than a change of section. */
.portal--ecrin + .shell { padding-top: clamp(3.5rem, 8vw, 7rem); }

/* ── The veil ──────────────────────────────────────────────
   The parent drives a heavy radial at the centre (0.66) because its
   own portal set the name over the optical centre with no other
   protection. Here the type sits at the three edges AND the centre, so
   the veil is rebuilt: strong top and bottom where the labels are, and
   a soft halo — a quarter of the parent's — under the name.

   The photograph must never be darkened into a mood board: the veil
   protects the words, not the picture. */
.portal--ecrin .portal__veil {
	/* 31/08 — le halo central est SUPPRIME. Il protegeait le nom quand celui-ci
	   se tenait au milieu ; il assombrissait donc precisement le sujet, et sur
	   une etreinte c'est le seul endroit du cadre qu'on n'a pas le droit de
	   ternir. Le nom etant descendu, l'ombre descend avec lui : franche en bas
	   ou vivent le nom et la sortie, legere en haut pour le menu, et RIEN au
	   milieu. La photographie retrouve sa lumiere la ou elle raconte. */
	/* Reglage apres capture : le nom se pose a 61 % de la hauteur, et sur cette
	   image-la il tombe sur la ROBE — du blanc sur du blanc, les trois
	   dernieres lettres decrochaient. L'ombre est donc calee sur la position
	   reelle du bloc (58 % a 100 %) au lieu d'un fondu generique. Au-dessus de
	   45 % il n'y a plus rien : c'est la que vivent les visages. */
	background: linear-gradient(
		to bottom,
		rgba(10, 9, 7, 0.34) 0%,
		rgba(10, 9, 7, 0.06) 22%,
		rgba(10, 9, 7, 0.00) 45%,
		rgba(10, 9, 7, 0.26) 58%,
		rgba(10, 9, 7, 0.44) 70%,
		rgba(10, 9, 7, 0.60) 85%,
		rgba(10, 9, 7, 0.74) 100%
	);
}

/* A still photograph, held still. The parent drifts its portal image by
   8% for 24s, which on a portrait crop walks faces out of frame. This one
   breathes once on arrival and then stops. */
.portal--ecrin .portal__media img {
	animation: ecrin-breathe 18s var(--ease) forwards;
}

@keyframes ecrin-breathe {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* ── The frame ─────────────────────────────────────────────
   Three bands: navigation at the top, the name in the middle, the way
   down at the foot. The two outer bands hold ONE object each — every
   label that used to fill the corners has been removed. */
.portal--ecrin .ecrin-frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	grid-template-rows: auto 1fr auto;
	/* Vertical is NOT the gutter: the masthead opens on 24px, so the menu sits
	   22px from the top on every inner page. The front door was putting it at
	   54px — the same links dropping 32px between two pages. Top padding now
	   matches the masthead's, so the menu holds its line across the whole site.
	   The foot keeps the full gutter: nothing has to align with it. */
	/* 1.25rem and not the masthead's 1.5rem: the two bars are built differently
	   (a 69px flex row there, a grid band here), so matching the PADDING left
	   the links 4px apart. What has to match is where the TEXT lands — measured
	   at 22px on every inner page, and 22px here with this value. */
	padding: 1.25rem max(var(--edge), calc((100% - var(--shell-max)) / 2 + var(--edge))) var(--edge);
	color: var(--paper);
	font-size: 0.6875rem;
}

.portal--ecrin .ecrin-top,
.portal--ecrin .ecrin-foot {
	gap: 1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The menu is the only thing left in the top band, so it goes to the right
   on its own — where it already sat, and where the masthead will take over
   once the visitor scrolls past. */
.portal--ecrin .ecrin-top {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	opacity: 0.86;
}

/* The way down sits on the optical centre, under the name. */
.portal--ecrin .ecrin-foot {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	opacity: 0.82;
}

.portal--ecrin .ecrin-nav ul {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.portal--ecrin .ecrin-frame a { color: inherit; text-decoration: none; }
.portal--ecrin .ecrin-nav a { opacity: 0.86; transition: opacity 0.3s var(--ease); }
.portal--ecrin .ecrin-nav a:hover,
.portal--ecrin .ecrin-nav a:focus-visible { opacity: 1; }

/* ── The name ──────────────────────────────────────────────
   The luxury is carried by the AIR BETWEEN the letters, not by the
   size: 0.22em of tracking at text weight. Set larger and tighter it
   would read as a technology landing page, which is exactly the trap
   the first two attempts fell into. */
/* The name stays CENTRED — that is the validated gesture of variant B, and it
   is deliberate (Mendar, 19/08/2026, after I wrongly pulled it to the gutter).
   The front door is a frontispiece: the name owns the middle of the picture.
   Only the FRAME around it obeys the site's grid — gutter and menu height. */
/* PASSE DU 31/08 — le nom quitte le milieu VERTICAL, pas le milieu tout court.

   Mesure : a 1440x900 le bloc du nom se posait a y=370, c'est-a-dire en
   travers des deux visages ; a 390px il barrait celui de la mariee. Un
   frontispice ne doit pas etre lu comme une rature sur la photographie.

   Le geste valide (Mendar, 18-19/08) est que le nom OCCUPE LE MILIEU DE
   L'IMAGE : c'est un centrage HORIZONTAL, et il ne bouge pas d'un pixel.
   Ce qui bouge est la hauteur — le bloc descend dans le tiers bas, la ou
   la photographie est calme (robe, bras, sol) plutot que sur les regards.
   L'image reprend le haut du cadre pour elle seule, la signature ferme
   le bas : c'est le rapport d'un tirage et de sa legende. */
.portal--ecrin .ecrin-mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding-bottom: clamp(1.5rem, 7vh, 5.5rem);
}

.portal--ecrin .ecrin-name {
	margin: 0;
	/* Family, weight, case and tracking come from the WORDMARK block in
	   style.css (19/08/2026). The front door is where that shape was decided,
	   but it no longer OWNS it: restating the values here is what let the
	   masthead and the colophon drift into two other drawings of the name.
	   Only what genuinely belongs to the front door stays below. */

	/* The Cahier sets .portal__name in ink, for a name that sits on paper.
	   Here it sits on a photograph, and inheriting from the frame is not
	   enough: that rule targets the element directly and wins over the
	   inherited value. It has to be restated, or the name comes out black
	   on the picture — which is precisely how it rendered on staging. */
	color: var(--paper);
	/* 8.2vw = 118px a 1440 : avec 0.22em d'approche le mot courait sur 1100px
	   et ne laissait plus de marge a l'image. A 6.6vw il tient sur ~900px et
	   la photographie respire des deux cotes. Le luxe est dans l'air entre
	   les lettres, pas dans la taille — la note d'origine le disait deja. */
	font-size: clamp(1.5rem, 6.6vw, 6rem);

	/* COMPENSATION OPTIQUE — 31/08. Mendar : « le nom du menu rend mieux que
	   celui du hero, et il est different ». Mesure faite : ils sont regles a
	   l'IDENTIQUE (Satoshi 400, 0.22em, capitales, meme famille). L'ecart est
	   optique, et il a deux causes.

	   1. A 11px le rendu ecran epaissit les traits ; a 95px ce gain disparait
	      et la graisse 400 s'amincit. Il faut donc MONTER d'un cran pour
	      retrouver, en grand, la densite que l'oeil lit en petit.
	   2. 0.22em espace joliment un mot de 11px ; a 95px cela fait 21px entre
	      les lettres, et on ne lit plus un mot mais une file de lettres.

	   Le bloc WORDMARK de style.css reste la seule source du dessin : famille,
	   casse et principe d'approche large n'ont pas bouge. Ce qui est redresse
	   ici est la COMPENSATION propre au grand corps — au meme titre que la
	   taille et la couleur, que ce bloc a toujours autorisees a varier. Le
	   masthead et le colophon gardent 400/0.22 : a 11px c'est juste. */
	font-weight: 500;
	letter-spacing: 0.18em;
	/* The last letter carries a trailing space it does not need; the indent
	   pushes the word back so the optical centre matches the real one. It is
	   REQUIRED as long as the name is centred — remove it only if the name is
	   ever aligned left, where it would instead push past the gutter. */
	text-indent: 0.18em;
}

.portal--ecrin .ecrin-role {
	margin: 1.1rem 0 0;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	opacity: 0.9;
	/* One line of 11px type over a photograph is fragile by nature, and the
	   opening picture is meant to change. The halo darkens only the pixels
	   immediately behind the glyphs, so the line survives a bright frame
	   without the veil having to darken the photograph for it. */
	text-shadow: 0 1px 10px rgba(10, 9, 7, 0.72), 0 1px 3px rgba(10, 9, 7, 0.5);
}

/* ── The way down ──────────────────────────────────────────
   Keeps the parent's .portal__enter class so the existing script still
   catches it and scrolls smoothly to the work. */
/* 31/08 — « Enter » etait le seul mot de la porte en casse normale, quand le
   menu au-dessus et le lieu au-dessous sont en capitales espacees. Un meme
   objet, trois dessins : la meme faute que le nom avait avant le 19/08. */
.portal--ecrin .ecrin-enter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
}

.portal--ecrin .ecrin-enter i {
	display: block;
	width: 1px;
	height: 1.9rem;
	background: currentColor;
	opacity: 0.5;
	transform-origin: top;
	animation: ecrin-drop 2.4s ease-in-out infinite;
}

@keyframes ecrin-drop {
	0%, 100% { transform: scaleY(0.5); }
	50%      { transform: scaleY(1); }
}

/* The corner marks that stood here are gone (Mendar, 18/08/2026): brackets at
   the four corners of a full-screen image read as a camcorder viewfinder, not
   as a photographer's contact sheet. So are the section number, the plate
   credit and the story count — no ornament at all, in any corner. */

/* ── Small screens ─────────────────────────────────────────
   At 390px the tracking that makes the name on desktop is what breaks
   it on a phone: 0.22em pushes "ALEX TOME" past both edges. */
@media (max-width: 40rem) {
	/* The ONLY place allowed to depart from --track-wordmark, and for a physical
	   reason rather than a stylistic one: at 120px the name runs off both edges
	   of a 390px screen. The masthead and colophon keep the full tracking —
	   at 11px there is nothing to run off. */
	.portal--ecrin .ecrin-name { letter-spacing: 0.13em; text-indent: 0.13em; }
	/* 31/08 — sur un ecran de 390 la hauteur utile est courte : le bloc se pose
	   plus haut que sur un grand ecran, sinon il vient toucher la sortie. */
	.portal--ecrin .ecrin-mid { padding-bottom: clamp(1rem, 4vh, 2.5rem); }
	.portal--ecrin .ecrin-role { letter-spacing: 0.22em; font-size: 0.625rem; }
	.portal--ecrin .ecrin-nav ul { gap: 0.9rem; flex-wrap: nowrap; }
	.portal--ecrin .ecrin-top { font-size: 0.625rem; letter-spacing: 0.1em; }

	/* Measured at 390px: "Meet Alex" broke across two lines straight into the
	   link beside it. A menu item is a single object and must never wrap. */
	.portal--ecrin .ecrin-nav a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.portal--ecrin .portal__media img,
	.portal--ecrin .ecrin-enter i { animation: none; }
	.portal--ecrin .portal__media img { transform: none; }
}