/**
 * FCE 80 años — "Una ventana por cada historia".
 *
 * Mobile first: the base rules are the phone layout; the breakpoint
 * (min-width: 60em, see custom.fce80.breakpoint in theme.json) adds the desktop one.
 * Colors and fonts come from theme.json (--wp--preset--*), with a fallback so the
 * page still works if the theme.json is ever removed.
 */

@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/archivo-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff, U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff;
}

@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/archivo-latin.woff2) format("woff2");
	unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@keyframes f80-flicker {

	0%,
	100% {
		opacity: 0.92;
	}

	50% {
		opacity: 0.66;
	}
}

@keyframes f80-rise {

	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes f80-trama-up {

	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -1200px;
	}
}

/* ───────── Base ───────── */
html {
	background: #0a0908;
}

body.fce80-body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #0a0908;
	color: #f3f2f2;
	font-family: Archivo, system-ui, sans-serif;
}

.fce80-body ::selection {
	background: #b5342f;
	color: #fff;
}

#fce80,
#fce80 *,
#fce80 *::before,
#fce80 *::after {
	box-sizing: border-box;
}


#fce80 {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--f80-night);
	color: var(--f80-ink);
	font-family: var(--f80-font);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.55;
}

#fce80 [hidden] {
	display: none !important;
}

#fce80 h1,
#fce80 h2,
#fce80 p {
	margin: 0;
}

#fce80 button,
#fce80 input,
#fce80 textarea {
	font-family: var(--f80-font);
}

.f80-screen img {
	display: block;
	max-width: none;
}

#fce80 a {
	color: var(--f80-gold);
	text-decoration: none;
}

#fce80 a:hover {
	color: #fff;
}

#fce80 button:focus-visible,
#fce80 a:focus-visible,
#fce80 input:focus-visible,
#fce80 textarea:focus-visible,
#fce80 [role="radio"]:focus-visible {
	outline: 2px solid var(--f80-gold);
	outline-offset: 2px;
}

#fce80 .f80-nav__list a {
	color: var(--f80-ink);
}

#fce80 .f80-nav__list a:hover,
#fce80 .f80-nav__list .current-menu-item > a {
	color: var(--f80-gold);
}

.f80-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.f80-screen {
	position: absolute;
	inset: 0;
}

/* ═════════ 1. Preload ═════════ */
.f80-preload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--f80-red);
}

.f80-trama {
	position: absolute;
	inset: 0;
	background-image: url(../img/trama.jpg);
	background-repeat: repeat;
	background-size: 480px 1200px;
	animation: f80-trama-up 26s linear infinite;
}

.f80-preload__veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(62% 56% at 50% 44%, rgb(181 52 47 / 42%) 0%, rgb(150 38 32 / 55%) 58%, rgb(112 26 22 / 78%) 100%);
}

.f80-preload__line {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: rgb(242 193 78 / 55%);
}

.f80-preload__logo80 {
	position: relative;
	z-index: 1;
	width: auto;
	height: min(28vh, 240px);
	animation: f80-rise 0.9s ease-out both;
}

.f80-sp--a {
	height: min(52px, 6vh);
}

.f80-sp--b {
	height: min(60px, 7vh);
}

/* The prototype's "rise" animation (fill-mode both) wins over opacity: the logo ends fully opaque. */
.f80-preload__logofce {
	position: relative;
	z-index: 1;
	width: min(60vw, 360px);
	height: auto;
	opacity: 0.85;
	animation: f80-rise 1.1s ease-out both;
}

.f80-enter {
	position: relative;
	z-index: 1;
	padding: 1.0625rem 2.875rem;
	border: 2px solid rgb(255 255 255 / 55%);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s, color 0.18s;
	animation: f80-rise 1.3s ease-out both;
	appearance: none;
}

.f80-enter:hover {
	border-color: var(--f80-ink);
	background: var(--f80-ink);
	color: var(--f80-red);
}

.f80-soon {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 1.0625rem 2.875rem;
	border: 2px solid rgb(255 255 255 / 55%);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
	animation: f80-rise 1.3s ease-out both;
}

.f80-stage-badge {
	position: absolute;
	right: 1.25rem;
	bottom: 4rem;
	left: 1.25rem;
	z-index: 1;
	margin: 0;
	padding: 0.5rem 0.75rem;
	background: rgb(10 9 8 / 85%);
	color: var(--f80-gold);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

.f80-preload__years {
	position: absolute;
	z-index: 1;
	bottom: 1.375rem;
	left: 1.25rem;
	color: var(--f80-gold);
	font-size: 0.75rem;
	letter-spacing: 0.28em;
}

/* ═════════ 2. Intro ═════════ */
.f80-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.f80-intro__logo {
	position: absolute;
	width: auto;
	height: min(28vh, 240px);
	animation: f80-flicker 4s ease-in-out infinite;
}

.f80-intro__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.f80-intro__yt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	pointer-events: none;
}

/* Contained (not cropped) so subtitles burned into the video are never cut off. */
.f80-intro__yt iframe {
	width: min(100vw, 177.78vh);
	height: min(56.25vw, 100vh);
	border: 0;
}

.f80-ctl {
	position: absolute;
	z-index: 2;
	border: 2px solid var(--f80-line);
	border-radius: 0;
	background: rgb(10 9 8 / 55%);
	color: var(--f80-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.18s, background 0.18s;
	appearance: none;
}

.f80-ctl--mute {
	bottom: 1.125rem;
	left: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.6875rem 1rem;
}

.f80-ctl--mute:hover {
	border-color: var(--f80-red-text);
}

.f80-ctl--sfx {
	right: 1.125rem;
	bottom: 1.125rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.6875rem 1rem;
}

.f80-ctl--sfx:hover,
.f80-ctl--sfx:focus-visible {
	border-color: var(--f80-gold);
}

.f80-ctl--skip {
	top: 1.125rem;
	right: 1.125rem;
	padding: 0.6875rem 1.125rem;
}

.f80-ctl--skip:hover {
	border-color: var(--f80-red);
	background: var(--f80-red);
}

/* ═════════ 3. Facade ═════════ */
.f80-main {
	--f80-bldg: #6f716b;
	--f80-bldg-base: #474845;
	--f80-bldg-line: #3a312d;
	--f80-bldg-win: #1a1715;
	--f80-bldg-sign: #0d0c0b;
	--f80-bldg-trim: 0.55;
	--f80-bldg-slat: 0.55;
	--f80-bldg-shade: 0;

	background: radial-gradient(120% 80% at 50% 100%, #15100f 0%, #0a0908 62%);
}

.f80-header--overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 4;
}

.f80-sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	overflow: hidden;
	background: linear-gradient(180deg, #060509 0%, #0d0a18 18%, #1c1230 34%, #3a1a42 50%, #6b2a4c 66%, #a63f47 80%, #d4703f 92%, #e79a4a 100%);
}

.f80-main[data-sky] .f80-sky {
	display: block;
}

.f80-main[data-sky="night"] .f80-sky {
	background: linear-gradient(180deg, #02030a 0%, #070a1c 40%, #0f1530 72%, #1b1a33 100%);
}

.f80-main[data-sky="fireworks"] .f80-sky {
	background: linear-gradient(180deg, #02020a 0%, #060817 45%, #0d1127 78%, #171630 100%);
}

/* Stars (placed by the script): small dots that twinkle. */
.f80-star {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #fff;
	opacity: 0.75;
	animation: f80-twinkle var(--f80-twinkle, 3s) ease-in-out var(--f80-delay, 0s) infinite;
}

.f80-star--gold {
	background: #ffe3a3;
}

@keyframes f80-twinkle {

	0%,
	100% {
		opacity: 0.15;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.35);
	}
}

.f80-fireworks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Keeps the text readable while the bursts go off behind it. */
#fce80 .f80-main[data-sky="fireworks"] .f80-hero > * {
	text-shadow: 0 1px 14px rgb(0 0 0 / 85%);
}

.f80-facade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	height: min(50vh, 420px);
}

.f80-facade__back {
	position: absolute;
	right: 0;
	left: 0;
}

.f80-facade__back--top {
	top: 16%;
	bottom: 13.2%;
	background: var(--f80-bldg);
}

.f80-facade__back--base {
	bottom: 0;
	height: 13.4%;
	background: var(--f80-bldg-base);
}

/* Body of the building: stone grey (#cbcec3) dimmed for night. The sunset values live in the .f80-main rule above. */
.f80-main[data-sky="night"],
.f80-main[data-sky="fireworks"] {
	--f80-bldg: #51524e;
	--f80-bldg-base: #393a37;
}

.f80-bldg {
	fill: var(--f80-bldg);
}

.f80-bldg-base {
	fill: var(--f80-bldg-base);
}

.f80-bldg-line {
	stroke: var(--f80-bldg-line);
}

.f80-bldg-linefill {
	fill: var(--f80-bldg-line);
	opacity: 0.6;
}

.f80-bldg-win {
	fill: var(--f80-bldg-win);
}

.f80-bldg-sign {
	fill: var(--f80-bldg-sign);
}

.f80-bldg-trim {
	fill: #f3f2f2;
	opacity: var(--f80-bldg-trim);
}

.f80-slat {
	opacity: var(--f80-bldg-slat);
}

.f80-shade-stop {
	stop-opacity: var(--f80-bldg-shade);
}

/* On phones the facade is wider than the screen: it scrolls sideways and each window is tapped. */
.f80-facade__scroll {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.f80-facade__scroll::-webkit-scrollbar {
	display: none;
}

.f80-svg {
	position: relative;
	display: block;
	width: 1150px;
	min-width: 1150px;
	height: 100%;
}

.f80-dark {
	cursor: crosshair;
}

.f80-hit {
	cursor: pointer;
	outline: none;
}

.f80-hit:focus-visible {
	stroke: #fff;
	stroke-width: 2.5;
}

.f80-sign {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: #d4cec9;
	font-family: Archivo, sans-serif;
}

.f80-sign__unc {
	padding-left: 0.36em;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.36em;
}

.f80-sign__name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.11em;
}

.f80-tip {
	display: none;
}

.f80-tip.is-on {
	display: block;
}

.f80-tip__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	height: 126px;
	padding-right: 14px;
	font-family: Archivo, sans-serif;
}

.f80-tip__meta {
	color: #f2c14e;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.15em;
}

.f80-tip__text {
	color: #f3f2f2;
	font-size: 20px;
	line-height: 1.25;
}

.f80-tip__cta {
	color: rgb(243 242 242 / 60%);
	font-size: 14px;
	letter-spacing: 0.12em;
}

/* Hero text */
.f80-hero {
	position: absolute;
	top: 6.5rem;
	right: var(--f80-edge);
	bottom: calc(min(50vh, 420px) + 1.25rem);
	left: var(--f80-edge);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: min(18px, 2vh);
	pointer-events: none;
}

#fce80 .f80-hero h2 {
	flex-shrink: 0;
	width: 100%;
	max-width: 35rem;
	color: var(--f80-ink);
	font-size: clamp(1.375rem, 4vh, 3.25rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

#fce80 .f80-hero p {
	flex-shrink: 0;
	width: 100%;
	max-width: 35rem;
	color: var(--f80-ink-muted);
	font-size: clamp(0.8125rem, 1.8vh, 1rem);
	line-height: 1.55;
	text-wrap: pretty;
}

/* Anniversary date: same type as the main menu items. */
#fce80 .f80-hero .f80-hero__date {
	max-width: none;
	margin: 0;
	color: var(--f80-gold);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (min-width: 75em) {

	#fce80 .f80-hero .f80-hero__date {
		font-size: 0.75rem;
	}
}

/* Buttons */
.f80-btn-red {
	border: 0;
	border-radius: 0;
	background: var(--f80-red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s;
	appearance: none;
}

.f80-btn-red:hover {
	background: var(--f80-red-dark);
}

.f80-btn-red:disabled {
	opacity: 0.6;
	cursor: default;
}

.f80-btn-red--hero {
	padding: min(17px, 1.9vh) 2rem;
	pointer-events: auto;
}

.f80-btn-red--form {
	padding: 1.125rem 1.875rem;
	text-align: left;
}

.f80-btn-ghost {
	border: 2px solid var(--f80-line);
	border-radius: 0;
	background: transparent;
	color: var(--f80-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.8125rem 1.375rem;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s;
	appearance: none;
}

.f80-btn-ghost:hover {
	border-color: var(--f80-red);
	background: var(--f80-red);
}

/* Overlays */
.f80-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.f80-overlay--form {
	z-index: 5;
	background: rgb(8 7 7 / 72%);
}

.f80-overlay--msg {
	z-index: 6;
	background: rgb(8 7 7 / 78%);
}

.f80-panel__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.f80-kicker {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.f80-kicker--red {
	color: var(--f80-red-text);
}

.f80-kicker--gold {
	color: var(--f80-gold);
}

.f80-close {
	padding: 0;
	border: 0;
	background: transparent;
	color: rgb(243 242 242 / 62%);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
}

.f80-close:hover {
	color: var(--f80-ink);
}

/* Form */
.f80-panel--form {
	width: min(35rem, 92vw);
	max-height: 86vh;
	max-height: 86dvh;
	padding: 1.75rem 1.375rem 1.625rem;
	overflow-y: auto;
	border: 2px solid rgb(243 242 242 / 14%);
	background: rgb(16 14 13 / 94%);
	animation: f80-rise 0.35s ease-out both;
}

#fce80 .f80-h2 {
	margin: 1.125rem 0 0.625rem;
	color: var(--f80-ink);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

#fce80 .f80-lead {
	margin: 0 0 1.875rem;
	color: var(--f80-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;
}

#fce80 .f80-lead--thanks {
	margin-bottom: 2.125rem;
	font-size: 1.0625rem;
}

.f80-form {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.f80-field {
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
}

.f80-label {
	color: var(--f80-ink-faint);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.f80-input {
	width: 100%;
	padding: 0.75rem;
	border: 0;
	border-bottom: 2px solid var(--f80-line);
	border-radius: 0;
	outline: none;
	background: rgb(243 242 242 / 5%);
	color: var(--f80-ink);
	font-size: 1rem;
}

.f80-input::placeholder {
	color: rgb(243 242 242 / 55%);
}

.f80-input:focus {
	border-bottom-color: var(--f80-gold);
}

.f80-input--area {
	line-height: 1.5;
	resize: none;
}

.f80-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.f80-chip {
	padding: 0.625rem 0.9375rem;
	border: 2px solid var(--f80-line);
	border-radius: 0;
	background: transparent;
	color: rgb(243 242 242 / 80%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color 0.15s;
	appearance: none;
}

.f80-chip:hover {
	border-color: rgb(243 242 242 / 70%);
}

.f80-chip[aria-checked="true"] {
	border-color: var(--f80-gold);
	background: rgb(242 193 78 / 12%);
	color: var(--f80-gold);
}

#fce80 .f80-form .f80-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--f80-ink-muted);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-align: left;
	cursor: pointer;
}

#fce80 .f80-form .f80-link:hover {
	color: var(--f80-gold);
}

.f80-error {
	color: #f08a7e;
	font-size: 0.875rem;
	line-height: 1.4;
}

.f80-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Message modal */
.f80-panel--msg {
	width: min(42.5rem, 92vw);
	max-height: 90vh;
	max-height: 90dvh;
	padding: 1.875rem 1.5rem 1.75rem;
	overflow-y: auto;
	border: 2px solid rgb(242 193 78 / 40%);
	background: rgb(16 14 13 / 96%);
	animation: f80-rise 0.3s ease-out both;
}

#fce80 .f80-msg__text {
	margin: 1.25rem 0 1.5rem;
	color: var(--f80-ink);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1.42;
	text-wrap: pretty;
}

.f80-msg__rule {
	height: 2px;
	background: rgb(243 242 242 / 14%);
}

.f80-msg__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.375rem;
}

.f80-msg__who {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.f80-msg__name {
	color: var(--f80-ink);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.f80-msg__role {
	color: var(--f80-ink-faint);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Demo notice (editors only) */
.f80-demo-badge {
	position: absolute;
	bottom: 0.875rem;
	left: var(--f80-edge);
	z-index: 4;
	padding: 6px 10px;
	border: 1px solid rgb(242 193 78 / 40%);
	background: rgb(10 9 8 / 85%);
	color: var(--f80-gold);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.f80-noscript {
	position: absolute;
	inset: 0;
	display: grid;
	padding: 1.5rem;
	background: #0a0908;
	text-align: center;
	place-items: center;
}

/* ═════════ Desktop ═════════ */
@media (min-width: 60em) {


	.f80-preload__years {
		bottom: 2.125rem;
		left: 2.125rem;
	}

	.f80-preload__logofce {
		width: min(42vw, 360px);
	}

	.f80-ctl--mute {
		bottom: 2.125rem;
		left: 2.125rem;
	}

	.f80-ctl--sfx {
		right: 2.125rem;
		bottom: 2.125rem;
	}

	.f80-ctl--skip {
		top: 2.125rem;
		right: 2.125rem;
	}

	.f80-facade__scroll {
		overflow: visible;
	}

	.f80-svg {
		width: 100%;
		min-width: 0;
	}

	.f80-hero {
		top: 8.25rem;
	}

	.f80-panel--form {
		padding: 2.5rem 2.75rem 2.25rem;
	}

	#fce80 .f80-h2 {
		font-size: 2.125rem;
	}

	.f80-panel--msg {
		padding: 3rem 3.25rem 2.75rem;
	}

	#fce80 .f80-msg__text {
		margin: 1.625rem 0 2rem;
		font-size: 1.6875rem;
	}

	.f80-msg__foot {
		flex-direction: row;
		align-items: flex-end;
	}
}

@media (prefers-reduced-motion: reduce) {

	.f80-star,
	.f80-trama,
	.f80-intro__logo,
	.f80-preload__logo80,
	.f80-preload__logofce,
	.f80-enter,
	.f80-soon,
	.f80-panel--form,
	.f80-panel--msg {
		animation: none;
	}
}

/* Optional extras of the message form */
.f80-extras {
	display: grid;
	gap: 1rem;
	padding: 0.25rem 0 0;
}

.f80-extras__summary {
	color: var(--f80-gold);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.f80-extras__summary:focus-visible {
	outline: 2px solid var(--f80-gold);
	outline-offset: 3px;
}

.f80-extras[open] .f80-extras__summary {
	margin-bottom: 1rem;
}

.f80-extras .f80-field + .f80-field {
	margin-top: 1rem;
}

.f80-hint {
	display: block;
	margin-top: 0.375rem;
	color: var(--f80-ink-faint);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.f80-input--file {
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
}

/* Photo and social networks in the message window (published messages only) */
.f80-msg__photo {
	margin: 1.25rem 0 0;
}

.f80-msg__photo img {
	display: block;
	width: 100%;
	max-height: 40vh;
	max-height: 40dvh;
	object-fit: cover;
}

.f80-msg__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

#fce80 .f80-msg__who .f80-msg__social a {
	color: var(--f80-gold);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

#fce80 .f80-msg__who .f80-msg__social a:hover,
#fce80 .f80-msg__who .f80-msg__social a:focus-visible {
	text-decoration: underline;
}