/*!
Theme Name: Дерионзини РУ
Theme URI: http://underscores.me/
Author: Александра Фомичева
Author URI: https://www.alfoart.com/portfolio.html#contact
Description: Штральборны и Дерионзини | Многосерийная архивная сага
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: derionzini-en
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/
/* Imports the historical cursive font from Google */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
/* 1. Import the new highly legible font from Google */
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');



html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==============================================================
   25. CINEMATIC MIST REVEAL (Images & Backgrounds)
============================================================== */

/* Base state: The element is hidden in the mist */
.mist-reveal {
    opacity: 0;
    filter: blur(15px) grayscale(30%); /* Soft blur with a hint of desaturation */
    transform: scale(1.03); /* Slightly enlarged so it "settles" into place */
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, filter, transform; /* Optimizes browser rendering */
}

/* Revealed state: The element is in sharp focus */
.mist-reveal.is-visible {
    opacity: 1;
    filter: blur(0px) grayscale(0%);
    transform: scale(1);
}

/* Forces padding to stay INSIDE the 100% width globally */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Converts bleeding 100vw overlays to strict 100% width */
#parallax-viewport, 
.site-navigation-dropdown.is-cinematic-open,
.site-navigation-dropdown.show {
    width: 100% !important; 
    max-width: 100% !important;
}

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* Box sizing
--------------------------------------------- */
*, *::before, *::after { box-sizing: inherit; }
html { box-sizing: border-box; }


/* =========================================
   FIX: ALLOW CLICKS THROUGH INVISIBLE HEADER
========================================= */

/* 1. Make the main header container entirely click-through */
header#site-header {
    pointer-events: none !important;
}

/* 2. Reactivate clicks ONLY for the actual clickable items inside it */
header#site-header a,
header#site-header button,
header#site-header input,
header#site-header .site-navigation-dropdown.show,
header#site-header .cinematic-search-form {
    pointer-events: auto !important;
}
/* Design System Variables
--------------------------------------------- */
:root {
    --bg-mist: #F0F2F5;
    --text-slate: #3A414C;
    --dark-twilight: #1C2532;
    --accent-gold: #685e4e;
}

/* Typography
--------------------------------------------- */
body, button, input, select, optgroup, textarea {
	color: var(--text-slate);
	font-family: 'Merriweather', serif;
	font-size: 14px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-family: 'Merriweather', serif;
    font-weight: 900;
    
	font-style: italic;
    color: var(--text-slate); /* <--- Restored! */
    text-shadow: none;
}

/* Exact requested H1 styling */
h1 {
    font-size: 50px;
    font-weight: 900;
	letter-spacing: -1px;
    font-style: italic;
    color: var(--text-slate);
    line-height: 1.2;
    margin: 0.67em 0;
}
h2 {
    font-size: 32px;
    font-weight: 900;
	letter-spacing: 0px;
    font-style: italic;
    color: var(--text-slate);
    line-height: 1.2;
    margin: 0.67em 0;
}

/* Paragraph styling with emboss */
p, span, li, dt, dd {
	margin-bottom: 1.5em;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-slate);
    text-shadow: 0px 1px 0px #ffffff;
}
.wp-comment-cookies-consent {
    font-weight: 300;
    font-size: 13px;
    color: var(--text-slate);

}

dfn, cite, em, i { font-style: italic; }


/* Elegant Archival Blockquotes */
blockquote {
	margin: 2em 2em;
    padding: 1.5em 2em;
    background-color: rgba(255, 255, 255, 0.4);
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 16px 16px 0;
}

blockquote p {
    font-style: italic;
    font-size: 18px; /* Slightly larger for quotes */
	line-height: 1.8;
    color: var(--dark-twilight);
    margin-bottom: 0;
}

address { margin: 0 0 1.5em; }

pre {
	background: rgba(255,255,255,0.6);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
    border: 1px solid rgba(0,0,0,0.05);
}

code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", monospace; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #f4ecd0; text-decoration: none; color: var(--dark-twilight); }
big { font-size: 125%; }

/* Elements
--------------------------------------------- */
body {
	background-color: var(--bg-mist);
}

hr {
	background-color: rgba(0,0,0,0.1);
	border: 0;
	height: 1px;
	margin-bottom: 2em;
}

ul, ol { margin: 0 0 1.5em 3em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
dt { font-weight: 700; color: var(--dark-twilight); }
dd { margin: 0 1.5em 1.5em; }

embed, iframe, object { max-width: 100%; }
img { height: auto; max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em; width: 100%; }

/* Links
--------------------------------------------- */
a {
	color: var(--accent-gold);
    text-decoration: none;
    transition: all 0.3s ease;
}
.cinematic-main a {
    text-decoration: none;
    border-bottom: 1px dashed rgba(164, 129, 73, 0.9);
    transition: color 0.3s ease, border-color 0.3s ease;

}
.cinematic-main .wp-block-image a {
    text-decoration: none !important; 
    border-bottom: none !important; 
    

}

a:visited { color: var(--accent-gold); }

a:hover, a:focus, a:active {
	color: var(--dark-twilight);
}

/* Remove the default dotted outline on click/focus */
a:focus, a:active, button:focus { 
    outline: none !important; 
    box-shadow: none !important; 
}

/* Forms
--------------------------------------------- */
/* 1. Global Buttons (Keeps standard text buttons looking nice if you ever need them) */
.comment-form { 
    font-style: italic !important;
	
   
}
button, input[type="button"], input[type="reset"], input[type="submit"]:not(.search-submit) {
    border: none;
    border-radius: 3px;
    background: var(--dark-twilight);
    color: #ffffff;
    line-height: 1;
    padding: 0.8em 1.5em;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 300;
    letter-spacing: 1px;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:not(.search-submit):hover {
    background: var(--accent-gold);
    color: #ffffff;
}

/* 2. Global Input Fields (The Minimalist Dark Line) */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
 color: var(--text-slate);
    background: transparent !important;
    border-style: solid;
    border-color: rgba(58, 65, 76, 0.3); /* <--- Your slate color at 60% opacity */
    border-width: 0px 0px 1px 0px;
    border-radius: 0 !important;
    padding: 4px 5px !important;
    font-family: 'Merriweather', serif;
    font-style: italic;
    width: 100%;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.4s ease;
}

/* Input Focus State (Highlights Gold) */
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {
    border-bottom: 1px solid var(--accent-gold) !important;
}

select { border: none; border-bottom: 1px solid var(--text-slate); padding: 5px; background: transparent; }
textarea { width: 100%; }

/* 3. The WordPress Default Search Form Layout */
.search-form {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 400px; /* Optional: keeps the line from stretching across the entire screen */
    margin-bottom: 2em;
}

.search-form label {
    flex-grow: 1;
    margin-bottom: 0;
}

/* 4. The Dark Gray Search Button SVG */
.search-form .search-submit {
    font-size: 0 !important; /* Hides the native "Search" text */
    color: transparent !important; /* Double-ensures text is hidden */
    width: 40px !important;
    height: 40px !important;
    background-color: var(--text-slate) !important; 
    -webkit-mask: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg') no-repeat center / contain !important;
    mask: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg') no-repeat center / contain !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 10px !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
	    margin-bottom: -24px;
}

.search-form .search-submit:hover {
    background-color: var(--accent-gold) !important;
    transform: scale(1.1);
}

/* 5. Kill Native Browser Clutter */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}
/* ==============================================================
   SIDEBAR SEARCH BUTTON (Icon Only)
============================================================== */

/* Target ONLY the search block button inside the sidebar */
.cinematic-sidebar .wp-block-search__button {
    font-size: 0 !important; /* Hides the native "Search" text */
    color: transparent !important; /* Double-ensures text is hidden */
    width: 40px !important;
    height: 40px !important;
    background-color: var(--text-slate) !important; 
    -webkit-mask: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg') no-repeat center / contain !important;
    mask: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg') no-repeat center / contain !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 10px !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
	margin-bottom: -24px;
}

/* Prevent the global hover effect from turning the background gold */
.cinematic-sidebar .wp-block-search__button:hover {
    background-color: var(--accent-gold) !important;
    transform: scale(1.2);
}

/*-------------------------------------------------------------
# Navigation, Layouts & WP Defaults (Preserved from _s)
--------------------------------------------------------------*/
.main-navigation { display: block; width: 100%; }
.main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; }
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; }
.main-navigation ul ul ul { left: -999em; top: 0; }
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { display: block; left: auto; }
.main-navigation ul ul a { width: 200px; }
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; }
.main-navigation li { position: relative; }
.main-navigation a { display: block; text-decoration: none; }
.menu-toggle, .main-navigation.toggled ul { display: block; }

@media screen and (min-width: 37.5em) {
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; }
}

.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; }
.comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; }
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; }
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; }

.sticky { display: block; }
.post, .page { margin: 0 0 1.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }

.widget { margin: 0 0 1.5em; }
.widget select { max-width: 100%; }

.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
.custom-logo-link { display: inline-block; }

.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }

.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-caption { display: block; }

.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; }


.infinity-end.neverending .site-footer { display: block; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
#primary[tabindex="-1"]:focus { outline: 0; }
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }

/* ==============================================================
   CINEMATIC OVERRIDES (PARALLAX, HEADER, FOOTER)
   Drop your complex custom styling below this line!
============================================================== */


/* Force Merriweather globally */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, div, blockquote, figcaption {
    font-family: 'Merriweather', serif !important;
}

html, body {
    overflow-x: hidden !important;
}

/* ==============================================================
   2. CUSTOM HEADER (Applied Site-Wide to #site-header)
============================================================== */

/* --- Desktop Layout --- */
header#site-header {
    position: absolute !important; top: 0; left: 0; width: 100% !important;
    z-index: 1000; background-color: transparent !important; border: none !important;
}

header#site-header .header-inner {
    padding: 0px 40px !important; display: flex !important;
    justify-content: space-between; align-items: center !important; min-height: 100px !important;
}

header#site-header .site-branding {
    display: flex !important; align-items: center !important; height: 80px !important; z-index: 1001;
}

header#site-header .custom-logo-link, header#site-header .custom-logo {
    display: block !important; width: 70px !important; height: 70px !important; flex-shrink: 0 !important;
}
header#site-header .custom-logo:hover { opacity: 0.6; }

header#site-header .site-branding .site-title, header#site-header .site-branding .page-title { display: none !important; }

/* Injected Brand Title */
header#site-header .site-branding::after {
    content: "Strahlborn & De Rionzini";
    font-weight: 600 !important; font-size: 1.2em !important; color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; margin-left: 20px !important;
    text-transform: uppercase !important; letter-spacing: 2px !important; white-space: nowrap !important;
}

/* --- Header Links --- */
header#site-header a {
    color: rgba(255, 255, 255, 0.9) !important; font-size: 1.2em; font-weight: 300;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3); text-decoration: none; letter-spacing: 0.8px !important;
}
header#site-header a:hover { color: rgba(255, 255, 255, 0.6) !important; }
header#site-header .site-navigation li.current-menu-item > a { color: #fff !important; }




/* ==============================================================
   3. CUSTOM FOOTER (Applied to Custom Wrappers)
============================================================== */
.site-footer, .footer-parallax { background-color: var(--dark-twilight) !important; padding: 60px 20px; }
.site-footer p, .site-footer span, .site-footer a, .site-footer li { color: var(--bg-mist) !important; text-shadow: none !important; }
.site-footer a:hover { color: var(--accent-gold) !important; }

/* ==============================================================
   4. HOME PARALLAX TEMPLATE (Scoped strictly to Parallax pages)
============================================================== */

/* 1. Completely lock the screen to prevent any scrolling or gaps */
body[class*="parallax"], 
body[class*="parallax"] html { 
    background-color: #3a414c !important; 
    height: 100vh !important;
    height: 100dvh !important; /* Fixes mobile browser address bar gaps */
    overflow: hidden !important; /* Kills all scrollbars */
    margin: 0 !important; 
    padding: 0 !important;
}

body[class*="parallax"] .site-main { 
    max-width: 100% !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}

/* 2. Lock the viewport frame to the exact edges of the screen */
#parallax-viewport { 
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    height: 100dvh;
    overflow: hidden; 
    opacity: 0; 
    transition: opacity 2.5s ease-in-out; 
}
#parallax-viewport.loaded { opacity: 1; }

/* 3. Keep text white inside the Parallax scene (THIS RESTORES YOUR WHITE TEXT!) */
#parallax-viewport h1, 
#parallax-viewport h2, 
#parallax-viewport h3, 
#parallax-viewport p, 
#parallax-viewport a { 
    color: #ffffff !important; 
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important; 
}
#parallax-viewport .poem-text { 
    color: rgba(255, 255, 255, 0.9) !important; 
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.7) !important; 
}

/* Layers & Groups */
.layer, .building-group, .fog-group { 
    position: absolute; 
    will-change: transform; 
}
.full-sky { width: 110vw; height: 110vh; left: -5vw; bottom: 2vh; }
.building-group { width: 128vw; aspect-ratio: 27 / 10; left: -14vw; bottom: -10vh; z-index: 30; }
.fog-group { width: 140vw; left: -20vw; bottom: 1vh; height: 80vh; z-index: 50; pointer-events: none; }

/* Title Group & Navigation Arch */
.title-group { position: absolute; width: 100%; height: 100%; z-index: 40; pointer-events: none; display: flex; justify-content: center; top: 16%; }
.title-content { text-align: center; color: white; font-family: 'Merriweather', serif; pointer-events: auto; text-shadow: 0 0 16px rgba(0,0,0,0.6); -webkit-font-smoothing: antialiased; }
.title-content h1 { font-size: 40pt !important; font-style: italic; font-weight: 900; margin: 0; line-height: 1.1; letter-spacing: -1px; }
.title-content h2 { font-size: 20pt !important; font-weight: 400; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.50); text-underline-offset: 8px; display: inline-block; transition: opacity 0.3s ease; margin: 0; }
.title-content h3 { font-size: 13pt; font-weight: 300; opacity: 0.7; margin: 16px 0; letter-spacing: 3px; text-transform: uppercase; }
.poem-text { font-family: 'Merriweather', serif; font-size: 14pt; font-weight: 300; font-style: italic; color: rgba(255, 255, 255, 0.9); margin-top: 20px; line-height: 1.6; text-shadow: 0 0 14px rgba(0, 0, 0, 0.7); }

.nav-arc-wrapper { position: relative; width: 16vw; height: 8vw; margin: 0 auto 2vh auto; overflow: hidden; }
.nav-arc-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, black 75%, transparent 100%); }
.nav-arc-circle { position: absolute; top: 0; left: 0; width: 100%; height: 200%; animation: rotateArcClockwise 40s linear infinite; pointer-events: none; }
.arc-links a { pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.arc-links text { 
    fill: rgba(255, 255, 255, 0.8); 
    font-weight: 300; 
    font-size: 11px; 
    letter-spacing: 2px; 
    text-shadow: none !important; 
    
    /* The Clickable Forcefield */
    stroke: transparent; 
    stroke-width: 35px; /* Increased from 14px for a massive hit area */
    paint-order: stroke fill; /* Keeps the invisible stroke behind the visible text */
    cursor: pointer;
}
/* Pause the circle when hovering over the navigation area */
.nav-arc-wrapper:hover .nav-arc-circle {
    animation-play-state: paused;
}
.arc-links a:hover text { fill: #ffffff; filter: drop-shadow(0px 0px 3px #ffffff); }
.arc-links a.active-season text {
    fill: rgba(255, 255, 255, 1) !important;
    filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));
}
/* ==============================================================
   KILL MOBILE TAP HIGHLIGHT ON SVG LINKS
============================================================== */
.arc-links a,
.arc-links text,
.nav-arc-circle,
.nav-arc-wrapper svg {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    outline: none !important;
    box-shadow: none !important;
}

.arc-links a:focus,
.arc-links a:active {
    outline: none !important;
}




/* ==============================================================
   6. MISSING PARALLAX ANIMATIONS & BASE LAYERS
============================================================== */

/* --- LOADER --- */
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; transition: opacity 1s ease-out; }
#loader-text { color: rgba(255, 255, 255, 0.5); font-family: 'Merriweather', serif; font-style: italic; font-size: 14pt; letter-spacing: 2px; animation: pulseText 2s infinite; }

/* --- STARS & MOON WRAPPER --- */
#star-container { position: absolute; top: 0; left: 0; width: 100%; height: 38%; z-index: 2; pointer-events: none; }
.star { position: absolute; background-color: #ffffff; border-radius: 50%; animation: twinkle linear infinite; }
.moon-blur-wrapper { position: absolute; width: 100%; height: 100%; animation: blurCycle 14s infinite ease-in-out; pointer-events: none; }

/* --- CLOUD BASE --- */
.cloud { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center center; pointer-events: none; overflow: visible; animation: cloud-float 10s 0.1s infinite alternate cubic-bezier(0.4, 0.05, 0.5, 0.9); }

/* --- MANSION INTERIOR & DANCERS --- */
.interior { position: absolute; width: 33.07%; height: 16.39%; left: 50%; bottom: 35%; transform: translateX(-50%); background-image: url('https://alfoart.com/images/derionzini-images/building-interior.webp'); background-size: 100% 100%; z-index: 31; animation: lightPulse 5s infinite ease-in-out; }
.dancers { position: absolute; width: 20.66%; height: 9.7%; left: 50%; bottom: 34.8%; background-image: url('https://alfoart.com/images/derionzini-images/dancing-people.webp'); background-size: 100% 100%; z-index: 32; animation: danceWave 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); }

/* --- FOG --- */
.fog-layer { position: absolute; width: 200%; height: 100%; background-image: url('https://alfoart.com/images/derionzini-images/fog-5.webp'); background-repeat: repeat-x; background-size: 50% 100%; opacity: 0.38; animation: fogBreath 8s infinite ease-in-out; }
.fog-1 { top: 0; left: 0; animation: fogMoveLeft 50s linear infinite; }
.fog-2 { top: 35%; left: 0; opacity: 0.35; animation: fogMoveRight 80s linear infinite; }

/* --- ARCH LOGO --- */
.nav-arc-logo { position: absolute; background-image: url('https://alfoart.com/images/derionzini-images/sd-logo-01.svg'); bottom: 0; left: 50%; transform: translateX(-50%); width: 30%; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80);
    -webkit-mask-image: url(https://alfoart.com/images/derionzini-images/sd-logo-01.svg); mask-image: url(https://alfoart.com/images/derionzini-images/sd-logo-01.svg);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    pointer-events: auto; transition: opacity 0.4s ease; animation: antiqueFloat 6s infinite ease-in-out; }
.nav-arc-logo:hover { opacity: 0.6; }

/* --- PARALLAX FOOTER --- */
.footer-copyright { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 100; font-family: 'Merriweather', serif; pointer-events: auto; }

/* Added #parallax-viewport and !important to beat the global text rules */
#parallax-viewport .footer-copyright a { 

    font-family: 'Merriweather', serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding-top: 10px !important;
    width: 60%;
    margin: 0 auto;
    transition: all 0.4s ease !important;

}

#parallax-viewport .footer-copyright a:hover { 
 letter-spacing: 5px !important; color: rgba(255, 255, 255, 0.7) !important;
}


/* ==============================================================
   7. ELEMENTOR MENU RESET (Replaces missing Elementor CSS)
============================================================== */
/* 1. Strip all default WordPress bullets and left-margins */
header#site-header ul.menu, 
header#site-header ul.sub-menu,
header#site-header ul.menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Ensure the header wrapper is above the content */
header#site-header {
    position: relative; /* Ensure z-index works */
    z-index: 9999; /* Higher than the rest of the content */
}


/* =========================================
   13. INNER PAGE CINEMATIC HEADER SCENE
========================================= */


/* Hide the original physical img tag inside so only our golden mask shows */
/*#mobile-menu-toggle img,
.site-navigation-toggle img {
    display: none !important;
}*/
.cinematic-main p {
    	font-size: 1.2em;
}

.inner-hero-scene {
    position: relative;
    width: 100%;
    height: 50vh; 
    overflow: hidden;
    background-color: var(--dark-twilight);
}

#inner-parallax-scene { z-index: 3 !important; }

.site-branding .site-title,
.site-branding .site-description,
.page-template-template-cinematic header.site-header .site-branding {
    display: none !important; 
}

/* Parallax Layers */
.inner-layer-bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important; 
    margin-top: -70px !important; margin-left: -50px !important; 
    width: calc(100% + 100px) !important;
    height: calc(100% + 140px) !important; 
    background-image: url('https://alfoart.com/images/derionzini-images/background-content-1.webp');
    background-size: cover;
    background-position: top center;
    animation: blurCycle 18s infinite ease-in-out; 
    z-index: 1 !important;
}

.inner-layer-tree {
    position: absolute !important;
    top: 0 !important; left: 0 !important; 
    margin-top: -10vw !important; margin-left: -12vw !important; 
    width: 100vw !important; 
    height: 40.296vw !important; 
    background-image: url('https://alfoart.com/images/derionzini-images/cherry-tree.webp') !important;
    background-size: 100% auto !important; 
    background-position: top left !important;
    background-repeat: no-repeat !important;
    z-index: 4 !important;
}

.inner-layer-fog-old {
    position: absolute;
    top: -5px; left: 0;
    width: 200%; height: calc(100% + 10px); 
    background-image: url('https://alfoart.com/images/derionzini-images/fog-5.webp');
    background-size: 80vw auto; 
    background-position: bottom left; 
    background-repeat: repeat-x;
    animation: cinematicFogMoveLeft 80s linear infinite;
    z-index: 2;
}

.inner-layer-fog-new {
    position: absolute;
    bottom: -2px; left: 0;
    width: 200%; height: 100%; 
    background-image: url('https://alfoart.com/images/derionzini-images/fog-content.webp');
    background-size: 80vw auto; 
    background-position: bottom left;
    background-repeat: repeat-x;
    animation: cinematicFogMoveRight 110s linear infinite;
    z-index: 4;
}

/* Ring & Parrot */
.inner-layer-ring {
    position: absolute;
    top: -6vh; left: 50%;
    transform: translateX(-50%);
    width: 15vw; height: 22.92vw; 
    z-index: 5; pointer-events: none;
}

/* The newly isolated Ring layer */
.ring-background-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('https://alfoart.com/images/derionzini-images/ring.webp');
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

.cockatoo-ring-container {
    position: absolute;
    top: 75%; left: 57%;
    transform: translate(-50%, -50%);
    width: 61%; height: auto;
    z-index: 15; pointer-events: none; 
}

#historic-cockatoo {
    width: 100%; height: auto; display: block;
}
/* =========================================
   PARALLAX ENGINE STABILIZATION
========================================= */

/* 1. Force the wrappers to overlap and fill the scene perfectly */
.cinematic-parallax-wrapper,
#bg-parallax-scene,
#tree-parallax-scene {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Force the layers to ignore any conflicting Javascript layout rules */
.inner-layer-bg,
.inner-layer-tree {
    position: absolute !important;
    display: block !important;
}
/* =========================================
   14. INNER PAGE CINEMATIC FOOTER
========================================= */

.footer-layer-bg {
    position: absolute;
    top: 0; left: 0; 
    width: calc(110% + 100px); 
    
    /* Increased from +100px to +400px to survive extreme parallax pulls on long pages */
    height: calc(110% + 400px) !important; 
    
    /* Pulled up slightly at the top, leaving a massive 300px safety net hanging off the bottom */
    margin-top: -100px !important; 
    margin-left: -50px;
    
    background-image: url('https://alfoart.com/images/derionzini-images/background-content-1.webp');
    background-size: cover; 
    background-position: bottom;
    z-index: 2;
}

.footer-layer-fog-new {
    position: absolute; top: -1px; left: 0;
    width: 200%; height: 100%; 
    background-position: bottom left; background-repeat: repeat-x;
}

.footer-fog-1 {
    top: 5%; left: -5%; 
    background-image: url('https://alfoart.com/images/derionzini-images/fog-5.webp');
    background-size: 60vw auto; 
    animation: cinematicFooterFogMoveLeft 100s linear infinite; 
}

.footer-fog-2 { 
    background-image: url('https://alfoart.com/images/derionzini-images/fog-content.webp');
    background-size: 80vw auto; /* Matches the top fog perfectly */
    animation: cinematicFooterFogMoveRight 110s linear infinite; /* Matches the top fog timing */
}



.inner-footer-content {
    position: absolute !important;
    /* Remove top/translate centering and pin to bottom */
    top: auto !important;
    bottom: 10px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; /* Only center horizontally */
    
    z-index: 10; 
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; /* Pushes content to the bottom of the flexbox */
    width: 100%; 
    max-width: 600px;
}

.inner-footer-content .cinematic-hero-logo
 {
    display: block;
    width: 100px !important;
    height: 100px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease;
}

.inner-footer-scene h3, .inner-footer-content h3 {
  font-family: 'Merriweather', serif !important;
    font-size: 40px !important;
    line-height: 70px !important;
    letter-spacing: -1px;
    font-style: italic !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    
}

.inner-footer-scene p, .inner-footer-content p {
    font-size: 19px;
    font-weight: 300;
    opacity: 0.6;
    margin: 5px 0px 15px 0px !important; /* Reduced bottom margin */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

.custom-footer-copyright a {
    font-family: 'Merriweather', serif !important; font-size: 11px !important; 
    text-transform: uppercase !important; letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.6) !important; padding-top: 10px !important;
    width: 60%; margin: 0 auto; transition: all 0.4s ease !important;
}
.custom-footer-copyright a:hover { letter-spacing: 5px !important; color: rgba(255, 255, 255, 0.8) !important; }

/* =========================================
   15. CINEMATIC TEMPLATE CURTAIN EFFECT
========================================= */

.page-template-template-cinematic footer#site-footer { display: none !important; }

.inner-hero-scene {
    position: fixed !important; top: -2px !important; left: 0 !important;
    width: 100% !important; height: calc(50vh + 2px) !important; 
    z-index: 0 !important; overflow: hidden !important; 
}

.inner-footer-scene {
    position: fixed !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 50vh !important;
    z-index: 1 !important; overflow: hidden !important; 
}

/* The "Curtain" Scrolling Body */
.page-template-template-cinematic .site-main {
    margin-top: 50vh !important; 
    margin-bottom: 50vh !important; /* This creates the space for the footer to be revealed */
    position: relative !important;
    z-index: 10 !important;
    background-color: var(--bg-mist) !important;
}

/* Masks */
.page-template-template-cinematic .site-main::before {
    content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 20vh; 
    background: linear-gradient(to top, var(--bg-mist) 0px, var(--bg-mist) 15px, transparent 100%);
    pointer-events: none; z-index: 20; 
}
.page-template-template-cinematic .site-main::after {
    content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 20vh; 
    background: linear-gradient(to bottom, var(--bg-mist) 0px, var(--bg-mist) 15px, transparent 100%);
    pointer-events: none; z-index: 20; 
}
#star-container { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 38%; 
   /* THE FIX: Strictly locks the container behind the tree (z-index 3) */
    pointer-events: none; 
	z-index: 2 !important;
}

.star { 
    position: absolute; 
    background-color: #ffffff; 
    border-radius: 50%; 
    animation: twinkle linear infinite; 
    z-index: 1 !important; /* Prevents individual JS stars from rebelling */
}
/* 1. The Background Wrapper (Furthest Back) */
#bg-parallax-scene {
    z-index: 1 !important;
}


/* 3. The Tree Wrapper (Front Layer) */
#tree-parallax-scene {
    z-index: 3 !important;
}

/* =========================================
   16. SCROLLING FOG ATTACHMENTS 
========================================= */

/* Ensure the main container allows the fog to hang "out of bounds" */
.page-template-template-cinematic .site-main {
    position: relative !important;
    overflow: visible !important; 
}

.fog-clip-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50vh; /* How far down the fog reaches into the dark zone */
    overflow: hidden;
    pointer-events: none;
    z-index: 20; /* Sits on top of the footer scene layers */
}

/* This pins the top fog to the top of the white area */
.clip-top { 
    bottom: 100%; 
}

/* THE FIX: This pins the bottom fog to the bottom of the white area */
.clip-bottom { 
    top: 100%; 
}

/* The individual fog layers */
.scrolling-bottom-fog {
    position: absolute;
    top: -5px; /* Overlaps content by 5px to crush that gray line */
    width: 200%;
    height: 100%;
}

.footer-fog-1 {
    background-image: url('https://alfoart.com/images/derionzini-images/fog-5.webp');
    background-size: 60vw auto;
    animation: cinematicFooterFogMoveLeft 90s linear infinite;
}

.footer-fog-2 {
    background-image: url('https://alfoart.com/images/derionzini-images/fog-content.webp');
    background-size: 100vw auto !important;
    animation: cinematicFooterFogMoveRight 100s linear infinite;
}




/* =========================================
   19. CINEMATIC PHP TEMPLATE STRUCTURE 
========================================= */
.cinematic-parallax-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.cinematic-main { min-height: 30vh; }
.page-content-wrapper { max-width: 1480px; margin: 0 auto; padding: 0px 20px; position: relative; z-index: 15; }
#dust-container, .footer-color-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#dust-container { z-index: 5; }
.footer-color-overlay { background-color: var(--dark-twilight); opacity: 0.4; z-index: 2; }

/* ==============================================================
   5. CINEMATIC TEMPLATE & HEADER LAYOUT
============================================================== */

/* --- Base Scoped Styles --- */
body.page-template-template-cinematic .site-main { background-color: var(--bg-mist) !important; }
body.page-template-template-cinematic p, 
body.page-template-template-cinematic li, 
body.page-template-template-cinematic blockquote { color: var(--text-slate); text-shadow: 0px 1px 0px #ffffff; }

/* Hide default branding/footer on cinematic pages */
.page-template-template-cinematic header#site-header .site-branding { display: none !important; }
.page-template-template-cinematic footer#site-footer { display: none !important; }

/* --- Desktop Header Structure --- */
header#site-header .header-inner {
    position: relative;
    padding-top: 25px !important; /* Breathes! Pushes the whole header row down */
}

.cinematic-nav-wrapper { margin-top: 0px !important; pointer-events: auto; }

/* --- Cinematic Branding Container --- */
.cinematic-brand-container {
    position: absolute; 
    top: 30px; 
    left: 40px;
    max-width: 800px; /* Forces description into two short lines */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    z-index: 50;
    pointer-events: none; /* Allows stray clicks to pass through */
}

.cinematic-title-row {
    display: flex; 
    align-items: center; 
    gap: 30px;
    pointer-events: auto; /* Makes logo and title clickable */
}

/* --- Cinematic Logo --- */
.cinematic-hero-logo {
    display: block; width: 70px; height: 70px;
    background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80);
    -webkit-mask: url('https://alfoart.com/images/derionzini-images/sd-logo-01.svg') no-repeat center / contain;
    mask: url('https://alfoart.com/images/derionzini-images/sd-logo-01.svg') no-repeat center / contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); 
    transition: filter 0.3s ease;
}
.cinematic-hero-logo:hover { filter: drop-shadow(0 4px 16px rgba(255,255,255,0.4)); }

/* --- Cinematic Typography --- */
h1.cinematic-hero-title {
    font-family: 'Merriweather', serif !important; font-size: 58px !important; line-height: 70px !important;
    letter-spacing: -1px; font-style: italic !important; font-weight: 900 !important;
    background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
    text-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; margin: 0 !important;
}

h2.cinematic-hero-desc {
    font-size: 18px !important; line-height: 1.6; font-style: italic !important; font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.75) !important; margin: 15px 0 0 95px !important; pointer-events: auto; 
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
	max-width: 600px;
}


/*.inner-hero-scene { position: fixed !important; top: -2px !important; left: 0 !important; width: 100% !important; height: calc(50vh + 2px) !important; z-index: 0 !important; overflow: hidden !important; background-color: var(--dark-twilight); }
.inner-footer-scene { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 50vh !important; z-index: 1 !important; overflow: hidden !important; }
.page-template-template-cinematic .site-main { margin-top: 50vh !important; margin-bottom: 50vh !important; position: relative !important; z-index: 10 !important; overflow: visible !important; }*/

/* --- Ring & Parrot Engine --- */
.inner-layer-ring { position: absolute; top: -6vh; left: 50%; transform: translateX(-50%); width: 15vw; height: 22.92vw; z-index: 5; pointer-events: none; }
.ring-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://alfoart.com/images/derionzini-images/ring.webp') top center / 100% 100% no-repeat; }
.cockatoo-ring-container { position: absolute; top: 75%; left: 57%; transform: translate(-50%, -50%); width: 61%; height: auto; z-index: 15; pointer-events: none; }

/* =========================================
   22. THE "OVERSHOOT" FOG GAP FIX
   (Forces the top fog to grow past the screen edge)
========================================= */

/* 1. Force the top wrapper to be 20% taller than the screen */
.page-template-template-cinematic .fog-clip-wrapper.clip-top {
    height: 120vh !important; 
}

/* 2. Tell the fog image to scale up and fill that new height */
.page-template-template-cinematic .fog-clip-wrapper.clip-top .scrolling-top-fog,
.page-template-template-cinematic .fog-clip-wrapper.clip-top .inner-layer-fog-new {
    height: 100% !important;
/*    background-size: auto 200% !important;*/
    background-position: bottom left !important;
    bottom: -5px !important; /* A tiny negative overlap to crush any sub-pixel lines */
}

/* ==============================================================
   24. CINEMATIC SEARCH BAR (Desktop & Mobile)
============================================================== */

/* Ensure the form aligns properly within the menu list */
.cinematic-search-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
}

.cinematic-search-form {
    display: flex;
    align-items: center;
    position: relative;
}

/* 1. The Minimalist 50px Input Line */
.cinematic-search-input {
    width: 50px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Merriweather', serif !important;
    font-style: italic;
    font-size: 14px !important;
    padding: 0 5px 2px 5px !important;
    margin-right: 8px !important; /* Breathing room before the icon */
    transition: all 0.4s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Optional UX Polish: Expands the line smoothly when clicked so users can see what they type */
.cinematic-search-input:focus {
    width: 120px !important; 
    border-bottom: 1px solid rgba(212, 200, 170, 0.5) !important; /* Highlights with your accent gold */
}

/* 2. The 32px Golden Gradient SVG Icon */
.cinematic-search-btn {
    width: 40px !important;
    height: 40px !important;
    
    /* Apply the gold gradient */
    background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80) !important;
    
    /* Mask the gradient using your SVG */
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/magnifying-glass.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    margin-bottom: -24px;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

/* Hover Effect for the Icon */
.cinematic-search-btn:hover {
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.4));
    transform: scale(1.1);
}

/* 3. Kill Native Browser Clutter */
/* Chrome and Safari love to inject ugly "X" clear buttons into search fields. This vaporizes them. */
.cinematic-search-input::-webkit-search-decoration,
.cinematic-search-input::-webkit-search-cancel-button,
.cinematic-search-input::-webkit-search-results-button,
.cinematic-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* =========================================
   18. CINEMATIC FOG ANIMATIONS (WAVE)
========================================= */




/* --- COMMON KEYFRAMES --- */
@keyframes pulseText { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@keyframes blurCycle { 0%, 100% { filter: blur(0px); } 50% { filter: blur(4px); } }
@keyframes cloud-float { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(80px, 40px, 0); } }
@keyframes rotateArcClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes antiqueFloat { 0% { transform: translateX(-50%) translateY(0px); } 50% { transform: translateX(-50%) translateY(-5px); } 100% { transform: translateX(-50%) translateY(0px); } }
@keyframes wind-drift { 0% { top: var(--start-y); left: var(--start-x); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110vh; left: var(--end-x); opacity: 0; } }
@keyframes sway-1 { 0% { transform: rotate(0deg) rotateX(0deg); } 50% { transform: rotate(180deg) rotateX(60deg); } 100% { transform: rotate(360deg) rotateX(0deg); } }
@keyframes sway-2 { 0% { transform: rotate(0deg) rotateY(0deg); } 50% { transform: rotate(-180deg) rotateY(-60deg); } 100% { transform: rotate(-360deg) rotateY(0deg); } }
@keyframes fogBreath { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.40; } }
@keyframes fogMoveRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes fogMoveLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes lightPulse { 0%, 100% { filter: brightness(1) contrast(100%); } 50% { filter: brightness(1.7) contrast(105%); } }
@keyframes lightPulsemoon { 0%, 100% { filter: brightness(0.7) contrast(100%); } 50% { filter: brightness(1) contrast(110%); } }
@keyframes twinkle { 0%, 75%, 100% { opacity: 0.2; transform: scale(0.8); filter: none; } 92% { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); } }
@keyframes danceWave { 0%, 100% { transform: translateX(-50%) translate(0, 0); } 6% { transform: translateX(-50%) translate(-4%, -8px); } 12% { transform: translateX(-50%) translate(-4%, 0); } 18% { transform: translateX(-50%) translate(-8%, -8px); } 24% { transform: translateX(-50%) translate(-8%, 0); } 30% { transform: translateX(-50%) translate(-12%, -8px); } 36% { transform: translateX(-50%) translate(-12%, 0); } 50% { transform: translateX(-50%) translate(0, 0); } 56% { transform: translateX(-50%) translate(4%, -8px); } 62% { transform: translateX(-50%) translate(4%, 0); } 68% { transform: translateX(-50%) translate(8%, -8px); } 74% { transform: translateX(-50%) translate(8%, 0); } 80% { transform: translateX(-50%) translate(12%, -8px); } 86% { transform: translateX(-50%) translate(12%, 0); } }
/* HEADER FOGS */
@keyframes cinematicFogMoveLeft {
    0%   { transform: translateX(0) translateY(0); opacity: 0.10; }
    33%  { transform: translateX(-26.66vw) translateY(-12px); opacity: 0.25; }
    66%  { transform: translateX(-53.33vw) translateY(8px); opacity: 0.45; }
    100% { transform: translateX(-80vw) translateY(0); opacity: 0.10; }
}
@keyframes cinematicFogMoveRight {
    0%   { transform: translateX(-80vw) translateY(0); opacity: 1; }
    33%  { transform: translateX(-53.33vw) translateY(12px); opacity: 0.45; }
    66%  { transform: translateX(-26.66vw) translateY(-8px); opacity: 0.85; }
    100% { transform: translateX(0) translateY(0); opacity: 1; }
}
/* BOTTOM FOG 1: Moving Left (Inverted) */
@keyframes cinematicFooterFogMoveLeft {
    0%   { transform: scaleY(-1) translateX(0) translateY(0); opacity: 0.25; }
    33%  { transform: scaleY(-1) translateX(-20vw) translateY(-12px); opacity: 0.25; }
    66%  { transform: scaleY(-1) translateX(-40vw) translateY(8px); opacity: 0.35; }
    100% { transform: scaleY(-1) translateX(-60vw) translateY(0); opacity: 0.25; }
}

/* BOTTOM FOG 2: Moving Right (Inverted & 100% Solid) */
@keyframes cinematicFooterFogMoveRight {
    0%   { transform: scaleY(-1) translateX(-80vw) translateY(0); opacity: 1; }
    33%  { transform: scaleY(-1) translateX(-53.33vw) translateY(12px); opacity: 1; }
    66%  { transform: scaleY(-1) translateX(-26.66vw) translateY(-8px); opacity: 1; }
    100% { transform: scaleY(-1) translateX(0) translateY(0); opacity: 1; }
}

@keyframes footerFogMoveLeft {
    0%   { transform: scaleY(-1) translateX(0); opacity: 0.35; }
    50%  { opacity: 0.1; }
    100% { transform: scaleY(-1) translateX(-60vw); opacity: 0.35; } 
}

@keyframes footerFogMoveRight {
    0%   { transform: scaleY(-1) translateX(-60vw); } 
    100% { transform: scaleY(-1) translateX(0); }
}
/* ==============================================================
   SEARCH PAGE: HEADER TEXT STYLING
============================================================== */
h2.search-hero-term {
    font-size: 28px !important; /* Larger than the normal paragraph description */
    font-style: italic !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    
    /* Undo the 2-line clamp for this specific word so it renders normally */
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}
/* =========================================
   21. THE ONE AND ONLY MOBILE OVERRIDE
========================================= */

@media (max-width: 1200px) {
	h1 {
    font-size: 34px;
    font-weight: 900;
	letter-spacing: -1px;
    font-style: italic;
    color: var(--text-slate);
    line-height: 1.2;
    margin: 0.5em 0;
}
	
	   /* Fullscreen Overlay */
    #site-header .site-navigation-dropdown.is-cinematic-open {
        position: fixed !important; 
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        background: rgba(25, 35, 65, 0.90) !important; 
        backdrop-filter: blur(8px) !important; 
        z-index: 9998 !important; display: flex !important; 
        align-items: center !important; justify-content: center !important;
        padding: 0 !important; overflow-y: auto !important;
    }

    #site-header .site-navigation-dropdown ul.menu {
        display: flex !important; flex-direction: column !important; align-items: center !important;
        justify-content: center !important; width: 100% !important; margin: auto !important; padding: 40px 0 !important;
    }

    #site-header .site-navigation-dropdown ul.menu li {
        display: block !important; position: relative !important; padding: 0 !important; 
        text-align: center !important; width: 100% !important;
    }

    #site-header .site-navigation-dropdown ul.menu > li > a {
        display: inline-block !important; padding: 15px 10px !important; width: auto !important;
        font-size: 1.2em !important; text-transform: uppercase !important; letter-spacing: 3px !important;
        color: rgba(255,255,255,0.8) !important;
    }

    /* Mobile Submenu Arrow */
    #site-header .site-navigation-dropdown ul.menu li.menu-item-has-children > a::after {
        content: "▾" !important; display: inline-block !important; margin-left: 8px !important; 
        vertical-align: middle !important; pointer-events: none !important; 
        color: rgba(255, 255, 255, 0.4) !important; font-size: 1em !important;
    }

    /* Submenu Hidden by Default */
    #site-header .site-navigation-dropdown ul.sub-menu {
        position: static !important; width: 100% !important;      
        background: transparent !important; padding: 10px 0px 0px 0px !important; margin: 0 !important; border: none !important;
        display: none !important; 
    }

    #site-header .site-navigation-dropdown ul.sub-menu a {
        font-size: 1em !important; padding: 10px 0 !important; text-shadow: none !important; display: block !important;
        width: 100% !important; color: rgba(255, 255, 255, 0.6) !important; font-style: italic !important; 
        letter-spacing: 2px !important; text-transform: none !important;
    }

    #site-header .site-navigation-dropdown ul.sub-menu a:hover { color: #ffffff !important; }
    #site-header .site-navigation-dropdown ul.sub-menu li { border-bottom: none !important; }
    
    /* Expand Submenu Accordion on Mobile */
    #site-header .site-navigation-dropdown ul.menu li.mobile-active > ul.sub-menu { 
        display: block !important; 
    }
	 /* --- A. GENERAL SITE-WIDE FIXES (Home & Seasons) --- */
    .header-inner {
        display: flex !important; 
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 25px 25px !important; 
    }

    

	
    /* --- C. MOBILE FOG & TREE REPAIR --- */
    
    /* 1. Ensure any fixed scene fogs are allowed to breathe */
    .page-template-template-cinematic .inner-layer-fog-old {
        position: absolute !important; 
        height: 100vh !important; 
        top: auto !important; 
        bottom: 0 !important; 
        
        /* THE FIX: Replaced '200vw 100%' with 'auto' to restore natural aspect ratio */
        background-size: auto 120% !important; /* Adjust the 120% if you want the fog taller/shorter */
        background-position: bottom left !important;
        background-repeat: repeat-x !important;
    }

  /* Fog & Wrappers Mobile Expansion */
    .page-template-template-cinematic .fog-clip-wrapper { height: 100vh !important; }
    .page-template-template-cinematic .fog-clip-wrapper.clip-top { height: 120vh !important; } /* The Gap Fix */
    .page-template-template-cinematic .fog-clip-wrapper .inner-layer-fog-new,
    .page-template-template-cinematic .fog-clip-wrapper .footer-layer-fog-new,
    .page-template-template-cinematic .fog-clip-wrapper.clip-top .scrolling-top-fog {
        position: absolute !important; height: 100% !important; width: 200% !important; 
        
        /* FIX 3: Use proportional sizing (vw width, auto height) to stop mobile stretching */
        background-size: 200vw auto !important; 
        
        background-repeat: repeat-x !important; background-position: bottom left !important; bottom: 0 !important; top: auto !important;
    }

    /* 5. Wrappers and Tree */
    .page-template-template-cinematic .cinematic-parallax-wrapper {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }

    .page-template-template-cinematic .inner-layer-tree {
        position: absolute !important; display: block !important;
        height: 130vh !important; width: 130vw !important;
        margin-top: -15vh !important; margin-left: -25vw !important;
        background-size: 360% auto !important; background-position: top right !important;
        z-index: 3 !important;
    }
/* --- D. MOBILE MENU & DROPDOWN FIXES (Now Global for all Dynamic Headers) --- */

    /* Kills the gap by using MAXIMUM specificity */
    body #site-header.dynamic-header .site-navigation-dropdown.show {
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important;
        width: 100vw !important; 
        height: 100vh !important;
        margin: 0 !important; 
        padding: 0 !important; /* Kills any rogue padding creating gaps */
        background: rgba(25, 35, 65, 0.90) !important; /* Deep cinematic glass */
        backdrop-filter: blur(8px) !important;
        z-index: 999999 !important; 
        
        /* THE CENTERING FIX: Switch to Flexbox */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;      /* Centers horizontally */
        justify-content: center !important;  /* Centers vertically */
        
        pointer-events: auto !important; 
    }

    /* Submenu Hidden State */
    body #site-header.dynamic-header .site-navigation-dropdown ul.sub-menu {
        max-height: 0 !important; 
        overflow: hidden !important;
        opacity: 0 !important; 
        visibility: hidden !important; 
        border: none !important;
        padding: 0 !important; 
        margin: 0 !important;
        display: block !important;
        transition: max-height 0.4s ease, opacity 0.4s ease !important;
    }

    /* Submenu OPEN State (Now looks for Elementor's click class globally!) */
    body #site-header.dynamic-header .site-navigation-dropdown li.menu-item-has-children.toggled-on > ul.sub-menu,
    body #site-header.dynamic-header .site-navigation-dropdown li.menu-item-has-children.mobile-active > ul.sub-menu,
    body #site-header.dynamic-header .site-navigation-dropdown li.menu-item-has-children.elementor-active > ul.sub-menu {
        max-height: 1000px !important; 
        opacity: 1 !important;
        visibility: visible !important;
        padding: 10px 0px 0px 0px !important; 
        margin-top: 10px !important;
    }
	.inner-footer-content {
    width: 90%; max-width: 90% !important;
}
	.inner-footer-scene p, .inner-footer-content p {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 10px 0px 20px 0px !important;
		font-size: 11px;
		
}
	.inner-footer-scene h3, .inner-footer-content h3 {
    font-size: 2em !important;
		line-height: 1em !important;
    margin-bottom: 0px !important;
	}
	
/* --- REDUCE STARS ON MOBILE BY 50% --- */
    #star-container .star:nth-child(even) {
        display: none !important;
    }
	
	.custom-footer-copyright a {
        font-size: 6px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    h2.search-hero-term {
        font-size: 24px !important;
        margin-left: 0 !important;
        text-align: center !important;
    }
	
    
    .search body.search h1.cinematic-hero-title {
        text-align: center !important;
    }
	    .cinematic-search-item {
        width: 100% !important; /* Forces the list item to span the full width of the menu */
        display: flex !important;
        justify-content: center !important; /* Centers the form inside the list item */
        margin-top: 25px !important; 
        padding-bottom: 20px !important;
        
        /* Strips any invisible inherited menu padding that causes off-center drifting */
        padding-left: 0 !important; 
        padding-right: 0 !important;
    }
    
    .cinematic-search-form {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important; /* Locks the form dead center */
    }
	  /* 1. Force kill the native .show class on all templates */
    body #site-header .site-navigation-dropdown.show,
    body #site-header.dynamic-header .site-navigation-dropdown.show {
        display: none !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 2. Show ONLY when our Golden Key adds .is-cinematic-open */
    body #site-header .site-navigation-dropdown.is-cinematic-open,
    body #site-header.dynamic-header .site-navigation-dropdown.is-cinematic-open {
        position: fixed !important; 
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        background: rgba(25, 35, 65, 0.90) !important; 
        backdrop-filter: blur(8px) !important; 
        z-index: 9998 !important; 
        display: flex !important; 
        align-items: center !important; justify-content: center !important;
        padding: 0 !important; overflow-y: auto !important;
        opacity: 1 !important; visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* 3. Ensure submenus actually appear when clicked */
    #site-header .site-navigation-dropdown ul.sub-menu {
        display: none !important; 
    }
    
    #site-header .site-navigation-dropdown ul.menu li.mobile-active > ul.sub-menu {
        display: block !important;
        margin-top: 10px !important;
        padding-bottom: 20px !important;
    }
	    header#site-header .header-inner { padding: 25px !important; }
    
    /* Golden Key Button */
    header#site-header button.site-navigation-toggle {
        display: flex !important; z-index: 9999999 !important; position: relative !important;
        background-image: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80) !important;
        -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/menu-key.svg') !important;
        mask-image: url('https://alfoart.com/images/derionzini-images/menu-key.svg') !important;
        -webkit-mask-size: contain !important; mask-size: contain !important;
        width: 44px !important; height: 44px !important; background-color: transparent !important; border: none !important;
    }
    header#site-header .site-navigation-toggle-icon { display: none !important; }
    
    /* Fullscreen Overlay Container */
    header#site-header .site-navigation.toggled-on, 
    body #site-header .site-navigation-dropdown.show {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
        background: rgba(25, 35, 65, 0.90) !important; backdrop-filter: blur(8px) !important; z-index: 999999 !important;
        display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
    }
    
    /* Link Layout */
    body #site-header .site-navigation-dropdown ul.menu li { text-align: center !important; padding: 0px 10px !important; border: none !important; }
    body #site-header .site-navigation-dropdown ul.menu > li > a { font-size: 1.2em !important; text-transform: uppercase !important; letter-spacing: 3px !important; }
    body #site-header .site-navigation-dropdown ul.menu li.menu-item-has-children > a::after { content: "▾" !important; margin-left: 8px !important; color: rgba(255, 255, 255, 0.4) !important; }
    
    /* Mobile Submenu Accordion */
    body #site-header .site-navigation-dropdown ul.sub-menu { max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; transition: all 0.4s ease !important; }
    /* PURGED .elementor-active HERE */
    body #site-header .site-navigation-dropdown li.menu-item-has-children.toggled-on > ul.sub-menu,
    body #site-header .site-navigation-dropdown li.menu-item-has-children.mobile-active > ul.sub-menu {
        max-height: 1000px !important; opacity: 1 !important; visibility: visible !important; margin-top: 10px !important; padding-bottom: 20px !important;
    }
    body #site-header .site-navigation-dropdown ul.sub-menu a { font-style: italic !important; font-size: 1em !important; color: rgba(255, 255, 255, 0.6) !important; text-transform: none !important; }
	    /* 1. Kill Desktop Menu */
    #site-header .site-navigation { display: none !important; }
    
    /* 2. Show Toggle Button */
    #site-header .site-navigation-toggle-holder { display: block !important; }
    #site-header .site-navigation-toggle,
    #site-header button.site-navigation-toggle {
        display: flex !important;
        z-index: 9999999 !important; 
    }

    /* 3. Hide Mobile Dropdown by Default */
    #site-header .site-navigation-dropdown { display: none !important; }
    
    /* 4. Show ONLY when JS adds our unique class */
    #site-header .site-navigation-dropdown.is-cinematic-open { display: flex !important; }
	  
    .page-template-template-cinematic .cinematic-hero-logo { position: absolute; top: 15px !important; left: 25px !important; width: 44px !important; height: 44px !important;
     pointer-events: auto;}
   
	/* --- B. CINEMATIC TEMPLATE SPECIFIC (Archival Pages) --- */
    
/* 1. Header Scene (Fixed 100vw bug to 100%) */
.page-template-template-cinematic .inner-hero-scene { 
    position: fixed !important; 
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100vh !important; 
    z-index: 2 !important; 
    transition: opacity 0.4s ease, visibility 0.4s ease !important; 
} 

/* 2. Footer Scene (Restored to 50vh) */
.page-template-template-cinematic .inner-footer-scene {
    position: fixed !important; 
    bottom: 0 !important; left: 0 !important;
    width: 100% !important; 
    height: 100vh !important; /* Restored to prevent bottom overscroll */
    z-index: 1 !important; 
}

/* 3. The Scrolling Content Body (Restored Bottom Margin) */
.page-template-template-cinematic .site-main {
    margin-top: 100vh !important;
    margin-bottom: 100vh !important; /* Limits the scroll to exactly fit the footer */
    z-index: 10 !important; position: relative !important;
    background-color: var(--bg-mist) !important;
    overflow: visible !important; 
}


    .page-template-template-cinematic header#site-header .header-inner {
        display: block !important; padding: 0 !important;
    }
 
	
	.page-template-template-cinematic .inner-footer-content .cinematic-hero-logo {
        /* 1. Break the absolute positioning inherited from the header */
        position: relative !important; 
        top: auto !important; 
        left: auto !important;
        
        /* 2. Your requested sizing */
        width: 70px !important;
        height: 70px !important;
        
        /* 3. The Centering and Bottom Margin */
        display: block !important;
        margin: 0 auto 25px auto !important; /* Top 0, Right Auto, Bottom 25px, Left Auto */
        
        /* Optional: Keeps it clickable if it's a link */
        pointer-events: auto !important;
    }
    
    .page-template-template-cinematic .cinematic-nav-wrapper {
        position: absolute !important; top: 25px !important; right: 25px !important; 
        z-index: 10000 !important; pointer-events: auto !important;
    }

	
    .page-template-template-cinematic .cinematic-brand-container {
        position: absolute; top: 15px; left: 0; width: 100%;
        display: flex; flex-direction: column; align-items: center; 
        pointer-events: none; 
    }

   	
    .page-template-template-cinematic h1.cinematic-hero-title { 
        font-size: 34px !important; 
        line-height: 1.2 !important; 
        white-space: normal !important; 
        margin-top: 95px !important; 
        width: 100% !important; 
        padding: 0 20px !important; 
        box-sizing: border-box !important;
        text-align: center !important; 
    }

    
    .page-template-template-cinematic .cinematic-title-row {
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }
	
	
    .page-template-template-cinematic h2.cinematic-hero-desc { font-size: 1em !important; margin: 10px 0 0 0 !important; text-align: center !important; padding: 0 40px; pointer-events: auto; white-space: normal !important;}
	
    body.error404 h2.cinematic-hero-desc.search-hero-term {
        display: none !important;  }

    
    /* The Ring Mobile Cut */
    .page-template-template-cinematic .inner-layer-ring { top: 24vh !important; width: 60vw !important; height: 91.68vw !important; position: absolute; z-index: 5 !important; }
    .page-template-template-cinematic .ring-background-image { clip-path: inset(28% 0 0 0) !important; }
    .page-template-template-cinematic .inner-layer-ring::after { display: none !important; }
    
    /* Fog & Wrappers Mobile Expansion */
    .page-template-template-cinematic .fog-clip-wrapper { height: 100vh !important; }
    .page-template-template-cinematic .fog-clip-wrapper.clip-top { height: 120vh !important; } /* The Gap Fix */
    .page-template-template-cinematic .fog-clip-wrapper .inner-layer-fog-new,
    .page-template-template-cinematic .fog-clip-wrapper .footer-layer-fog-new,
    .page-template-template-cinematic .fog-clip-wrapper.clip-top .scrolling-top-fog {
        position: absolute !important; height: 100% !important; width: 200% !important; background-size: auto 180% !important;
        background-repeat: repeat-x !important; background-position: bottom left !important; bottom: 0 !important; top: auto !important;
    }

  /* 1. SEARCH PAGE ONLY: TEXT CONTENT 90% WIDTH */
 

    /* 2. SEARCH PAGE ONLY: CUSTOM TITLE AREA */
    body.search h1.cinematic-hero-title {
        
        max-width: 600px !important;
        
		font-size: 30px !important; 
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important; /* Allows long titles to wrap naturally */
    
        margin: 100px auto 10px auto !important; /* Pushed down to clear the header */
    }
    
    body.search h2.search-hero-term {
        text-align: left !important;
        margin: 0 auto 30px auto !important;
        white-space: normal !important;
        display: block !important;
		font-size: 20px !important;
    }

    /* 3. GLOBAL MOBILE MENU: HEADER SEARCH BAR */
    .cinematic-search-item {
        width: 100% !important;
        margin-top: 30px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .cinematic-search-form {
        width: 80% !important; 
        max-width: 300px !important;
    }
    
    .cinematic-search-input {
        width: 50px !important; 
        text-align: center !important;
        font-size: 16px !important; /* Prevents iOS Safari from auto-zooming! */
    }
    
    .cinematic-search-input:focus {
        width: 100% !important; 
    }
}
/* Parallax Mobile Fixes */
@media (max-width: 768px) and (orientation: portrait) {
    .title-group { top: 10%; width: 86% !important; left: 7% !important; }
    .title-content h1 { font-size: 26pt !important; }
    .title-content h2 { font-size: 16pt !important; }
	.title-content h3 { font-size: 9pt;
    font-weight: 300;
    opacity: 0.7;
    margin: 6px 0;
}
	.poem-text { font-size: 9pt !important; margin-top: 10px !important; }
    .nav-arc-wrapper { width: 60vw; height: 30vw; }
    .building-group { width: 450vw; left: -175vw; }
    .fog-group { width: 330vw !important; left: -115vw !important; }
	 .footer-copyright { bottom: 10px; }
    #parallax-viewport .footer-copyright a { font-size: 6px !important; }
}



/* ==============================================================
   11. DESKTOP MENU & SUB-MENU (CINEMATIC DESIGN)
============================================================== */
@media (min-width: 1201px) {
    
    /* --- 1. Visibility & Layout --- */
    header#site-header .site-navigation { display: block !important; }
    header#site-header .site-navigation-toggle-holder,
    header#site-header .site-navigation-toggle,
    header#site-header .site-navigation-dropdown { display: none !important; }

    header#site-header .site-navigation ul.menu { 
        display: flex !important; 
        justify-content: flex-end !important; 
        align-items: center !important; 
        gap: 40px !important; 
        margin-bottom: 20px !important; 
    }

    /* --- 2. Dropdown Triggers (Parents) --- */
    header#site-header .site-navigation ul.menu > li.menu-item-has-children { 
        position: relative !important; 
        display: flex !important; 
        align-items: center !important; 
    }

    /* Desktop Submenu Arrow (Attached directly to the link text) */
    header#site-header .site-navigation ul.menu li.menu-item-has-children > a::after {
        content: "▾" !important; 
        display: inline-block !important; 
        margin-left: 8px !important; 
        color: rgba(255,255,255,0.75) !important; 
        font-size: 1em !important;
    }

    /* --- 3. Sub-Menu Container (Hidden State) --- */
    header#site-header .site-navigation ul.sub-menu {
        position: absolute !important; 
        top: 100% !important; 
        left: 45% !important;
        transform:  translateX(-50%) translateY(1px) !important; 
        background: transparent !important; 
        min-width: 100px !important;
        padding: 20px 0 !important; 
        margin: 0 !important; 
        border: none !important;
        box-shadow: none !important; 
        text-align: center !important; 
        opacity: 0; 
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        z-index: 1100 !important; 
        display: block !important;
    }

    
    header#site-header .site-navigation ul.menu > li.menu-item-has-children:hover > ul.sub-menu {
        opacity: 1; 
        visibility: visible;
        transform:  translateX(-50%) translateY(1px) !important;
    }

    /* --- 5. Sub-Menu List Items & Separators --- */
    header#site-header .site-navigation ul.sub-menu li {
        list-style: none !important; 
        margin: 0 !important; 
        padding: 0 !important;
        border: none !important; 
        position: relative !important;
        display: block !important; 
        width: 100% !important; 
        text-align: center !important; 
    }

    /* The 1px horizontal line between links */
    header#site-header .site-navigation ul.sub-menu li:not(:last-child)::after {
        content: "" !important; 
        display: block !important; 
        width: 30px !important; 
        height: 1px !important;
        background-color: rgba(255, 255, 255, 0.2) !important; 
        margin: 8px auto !important; 
    }

    /* --- 6. Sub-Menu Links (Movie Credit Style) --- */
    header#site-header .site-navigation ul.sub-menu a {
        display: block !important; 
        width: 100% !important; 
        text-align: center !important; 
        justify-content: center !important;
        font-style: italic !important; 
        font-size: 1em !important; 
        padding: 8px 0px !important;
        color: rgba(255, 255, 255, 0.8) !important; 
        text-shadow: none !important; 
        background: transparent !important;
        letter-spacing: 1px !important; 
        white-space: nowrap !important; 
        transition: all 0.4s ease !important;
    }

    /* Sub-Menu Link Hover Glow */
    header#site-header .site-navigation ul.sub-menu a:hover {
        color: #ffffff !important; 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important; 
        letter-spacing: 3px !important; 
    }
}
/* ==============================================================
   404 PAGE SPECIFIC STYLING
============================================================== */

/* 1. Adjust Top Header Parallax Height */
body.error404 .inner-hero-scene { 
    height: 30vh !important; 
    min-height: 25vh !important;
}

/* 2. Force Main Content to have a solid background and sit ON TOP of parallax */
body.error404 .site-main { 
    margin-top: 30vh !important; 
    position: relative !important;
    z-index: 10 !important;
    background-color: transparent; /* Forces a solid light archival background */
}

/* On Mobile, shift to 50% */
@media (max-width: 1024px) {
    body.error404 .inner-hero-scene { 
        height: 45vh !important; 
        min-height: 45vh !important;
    }
    body.error404 .site-main { 
        margin-top: 45vh !important; 
    }
	.not-found-video {
    /* 1. Size and format the transparent video */
 
    max-width: 180px !important; 
		  /* 3. Shift it up visually without altering the container */
    transform: translateY(-60%) !important; 
		margin-bottom: -280px; /* <--- THE FIX: Adjust this number to move the text closer or further! */
    
}
	.cinematic-main .not-found-text {
    font-style: italic;
    font-size: 1em !important;
    color: var(--text-slate, #4a4a4a);
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
	z-index: 100;
}
	.cinematic-main .not-found-action {
    font-size: 1em !important;
		margin-top: 0px !important;
    
}
	.not-found-action a {
  margin-top: 0px!important;
  
}

	
}

/* 3. Format the 404 Content Area */
.not-found-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 50; /* This is higher than the fog's z-index of 20 */
}


.not-found-video {
    /* 1. Size and format the transparent video */
    display: block;
    width: 100%;
    max-width: 350px; 
    height: auto;
    object-fit: contain;
    background-color: transparent;
    border: none;
    outline: none;

    /* 2. Center it horizontally and PULL THE TEXT UP */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -200px; /* <--- THE FIX: Adjust this number to move the text closer or further! */

    /* 3. Shift it up visually without altering the container */
    transform: translateY(-40%); 
    
    /* 4. Keep it in front of the fog */
    position: relative;
}

.cinematic-main .not-found-text {
    font-style: italic;
    font-size: 1.4em;
    color: var(--text-slate, #4a4a4a);
    line-height: 1.8;
    margin-bottom: 40px;
}

/* 4. Center the Search Widget */
.not-found-search {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.not-found-search .search-form {
    margin: 0 !important;
    width: 100%;
    max-width: 350px;
}

.not-found-action {
    font-size: 1.2em;
    color: var(--text-slate, #4a4a4a);
    opacity: 0.8;
}

.not-found-action a {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9em;
}
/* ==============================================================
   26. CINEMATIC POST LAYOUT (70% Content / 30% Sidebar)
============================================================== */

.cinematic-post-layout {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    justify-content: space-between;
    width: 100%;
    gap: 50px; /* Beautiful archival breathing room between text and sidebar */
    
    /* Resets the text alignment so long posts are easy to read */
    text-align: left !important; 
    align-items: flex-start !important;
}

/* The Left Column (70%) */
.cinematic-post-content {
    flex: 1 1 calc(70% - 25px);
    max-width: calc(70% - 25px);
}

/* The Right Column (30%) */
.cinematic-sidebar {
    flex: 1 1 calc(30% - 25px);
    max-width: calc(30% - 25px);
}

/* --- Mobile Override (Stacks them vertically) --- */
@media (max-width: 1024px) {
    .cinematic-post-content,
    .cinematic-sidebar {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .cinematic-sidebar {
        margin-top: 60px; /* Pushes the sidebar down below the post */
        padding-top: 40px;
        border-top: 1px solid rgba(0, 0, 0, 0.1); /* Elegant divider line */
    }
}

/* ==============================================================
   CONTENT TITLES GRADIENT (Light Backgrounds Only)
============================================================== */

/* 1. Apply gradient ONLY inside the white/light content wrapper */
.page-content-wrapper h1, 
.page-content-wrapper h2, 
.page-content-wrapper h3, 
.page-content-wrapper h4, 
.page-content-wrapper h5, 
.page-content-wrapper h6 {
    background: linear-gradient(to right, #a48149, #344e72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
}

/* 2. Explicitly protect the Home Page Parallax Titles (Failsafe) */
 
.title-content h2, 
.title-content h3 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #ffffff !important; 
	font-style: normal;
}
.title-content h1 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #ffffff !important; 
	font-style: italic;
}
/* ==============================================================
   CUSTOM "QUILL & LINE" SUBMIT BUTTON
============================================================== */

/* 1. The Wrapper Container */
.comment-form .form-submit {
    position: relative;
    display: inline-block;
    margin-top: 30px;
    transition: transform 0.4s ease; /* Smoothly zooms the whole assembly */
    transform-origin: left bottom; /* Keeps it anchored beautifully */
}

/* 2. The Line (The actual clickable button) */
.comment-form .form-submit input[type="submit"] {
    color: transparent !important;
    font-size: 0 !important;
    background-color: transparent !important;
    background-image: none !important; /* Pen moved to ::after */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(58, 65, 76, 0.4) !important;
    width: 150px !important; 
    height: 60px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: border-color 0.4s ease !important;
}

/* 3. The Pen Icon (Moved to ::after so we can gradient-mask it) */
.comment-form .form-submit::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 40px;
    height: 40px;
    background: var(--text-slate); /* Default dark slate color */
    
    /* The SVG Masking Magic */
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/pen.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/pen.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    
    pointer-events: none; /* Let clicks pass through to the line */
    transition: background 0.4s ease;
}

/* 4. The Handwritten "Post message" Text */
.comment-form .form-submit::before {
    content: "Post message";
    position: absolute;
    bottom: 10px; 
    left: 0;
    font-family: 'Merriweather', serif; 
    font-style: italic;
    font-size: 16px;
    
    /* THE FIX: Vaporize the global white text-shadow */
    text-shadow: none !important; 
    
    /* Pre-load the gradient so Safari doesn't glitch during the transition */
    background: var(--text-slate);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--text-slate);
    color: transparent;

    opacity: 0;
    transform: translateY(10px); 
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.4s ease;
    pointer-events: none; 
    z-index: 2;
}
/* =======================================
   THE HOVER EFFECTS
======================================= */

/* 1. Scale the entire assembly flawlessly */
.comment-form .form-submit:hover {
    transform: scale(1.1);
}

/* 2. Highlight the Line */
.comment-form .form-submit:hover input[type="submit"] {
    border-bottom-color: var(--accent-gold) !important; 
}

/* 3. Gradient the Pen Icon */
.comment-form .form-submit:hover::after {
    background: linear-gradient(to right, #a48149, #344e72);
}

/* 5. Reveal and Gradient the Text on Hover */
.comment-form .form-submit:hover::before {
    opacity: 1;
    transform: translateY(0);
    
    /* Smoothly transition the background to the gradient */
    background: linear-gradient(to right, #a48149, #344e72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ==============================================================
   JOURNAL FEED: CIRCULAR FEATURED IMAGES
============================================================== */

/* 1. Create the 250px Circular Frame */
.cinematic-post-content .post-thumbnail {
    display: block;
    float: left; /* Aligns the circle to the left */
    width: 250px !important;
    height: 250px !important;
    margin: 10px 40px 30px 0 !important; /* Spacing: Top Right Bottom Left */
    border-radius: 50%; /* This creates the perfect circle */
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* A soft archival shadow */
    border: 3px solid rgba(212, 197, 163, 0.3); /* Optional: A faint golden rim */
}

/* 2. Fit the Image Perfectly Inside the Circle */
.cinematic-post-content .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Prevents squishing or stretching */
    object-position: center !important; /* Keeps the focus in the middle */
    transition: transform 0.6s ease;
}

/* 3. Subtle Hover Zoom Effect */
.cinematic-post-content .post-thumbnail:hover img {
    transform: scale(1.05);
}

/* 4. Ensure the text wraps cleanly and doesn't overlap the next post */
.cinematic-post-content article {
    clear: both;
    overflow: hidden; 
    margin-bottom: 60px; /* Gives each post plenty of breathing room */
}
/* ==============================================================
   COMMENTS POST TITLE EXACT FIX (Targeting the Span)
============================================================== */

.comments-area .comments-title span {
    /* 1. Fix the squished words so the space returns */
    letter-spacing: normal !important;
    word-spacing: 2px !important; 
    
    /* 2. Kill the white color and the ghost shadow */
    text-shadow: none !important;
    
    /* 3. Force the gradient directly onto these specific words */
    background: linear-gradient(to right, #a48149, #344e72) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 4. Ensure the rest of the sentence ("2 thoughts on") stays slate */
.comments-area .comments-title {
    color: var(--text-slate) !important;
    text-shadow: none !important;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    /* On mobile, center the circle and stack it above the text */
    .cinematic-post-content .post-thumbnail {
        float: none;
        margin: 0 auto 30px auto !important;
        width: 200px !important; /* Slightly smaller for mobile screens */
        height: 200px !important;
    }
    
    .journal-feed-header {
        text-align: center !important;
    }
}
/* ==============================================================
   FOOTER SOCIAL & PROFESSIONAL ICONS (Image + Font Awesome)
============================================================== */

/* 1. Force the Horizontal Row */
.footer-social-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important; 
    margin: 15px auto !important;
    width: 100% !important;
}

/* 2. Style the Link Wrappers using Opacity */
.footer-social-links a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #ffffff !important; /* Solid white base color for fonts */
    opacity: 0.4 !important; /* Makes BOTH fonts and the PNG translucent */
    text-decoration: none !important;
    transition: all 0.4s ease !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Size the Font Awesome Icons */
.footer-social-links a i {
    font-size: 22px !important; 
}

/* 4. Match your custom PNG height to the FA Icons */
.footer-social-links a .custom-99-img {
    height: 22px !important; /* Perfectly matches the 24px font size above */
    width: auto !important;
    display: block !important;
}

/* 5. THE HOVER EFFECT */
.footer-social-links a:hover {
    opacity: 1 !important; /* Fades everything to brilliant solid white */
    transform: translateY(-4px) !important; /* Floats up */
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.6)) !important; 
	}


/* ==============================================================
   DESKTOP: MINIMAL FIXED SHARE ICONS (Always Visible, No Fog)
============================================================== */

/* 1. Master Container (Desktop) */
.cinematic-left-share {
    position: fixed;
    left: 30px; /* Distance from left edge of screen */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: auto; /* Always clickable on desktop */
}

/* 2. Hide Mobile Elements on Desktop */
.share-toggle-btn,
.rotated-fog-overlay {
    display: none !important; 
}

/* 3. The Drawer Wrapper (Transparent on Desktop) */
.share-fog-drawer {
    background: none; /* No gradient background */
    display: flex;
    align-items: center;
}

/* 4. The Icons List (Desktop) */
.share-icons-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Tighter spacing for smaller desktop icons */
}

/* Default State: Light Golden Gradient (For Dark Headers, Footers, and Home Pages) */
.share-icons-list a {
    font-size: 16px; /* Smaller, elegant size */
    text-decoration: none;
    
    /* Added 'background' to the transition so the color shifts smoothly! */
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s ease;
    opacity: 0.6; /* Subdued until hovered */
    
    /* The Light Golden Gradient */
    background: linear-gradient(135deg, rgb(212, 197, 163), rgb(244, 236, 208), rgb(175, 159, 128));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.share-icons-list a:hover {
    transform: scale(1.2);
    opacity: 1;
}

/* Active State: Dark Gradient (Triggered when over the light <main> area) */
.cinematic-left-share.over-light-bg .share-icons-list a {
    /* The Elegant Dark Gradient */
    background: linear-gradient(to bottom, #a48149, #344e72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==============================================================
   MOBILE: THE FOG DRAWER & HAND BOOKMARK
============================================================== */
@media (max-width: 1024px) {
    
    /* 1. Reset Container for Mobile Drawer */
    .cinematic-left-share {
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        transform: none; /* Removes the vertical centering */
        pointer-events: none; /* Allow clicks through to the page when closed */
        display: flex;
        align-items: center;
    }
    
    .cinematic-left-share.is-open {
        pointer-events: auto; 
    }

  .share-toggle-btn {
        display: block !important;
        position: absolute;
        left: 0; 
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important; 
        border: none;
        
        /* 1. THE SENSITIVITY FIX: Expands the invisible clickable area */
        padding: 10px 10px 10px 0; /* Top: 20px, Right: 30px, Bottom: 20px, Left: 0 (keeps it flush) */
        
        cursor: pointer;
        z-index: 10;
        pointer-events: auto;
        
        /* 2. THE MOBILE FLASH FIX: Kills the blue tap-highlight on iPhones/Androids */
        -webkit-tap-highlight-color: transparent; 
    }

    /* 3. THE DESKTOP/BROWSER FOCUS FIX: Kills the blue rectangular outline */
    .share-toggle-btn:focus,
    .share-toggle-btn:active {
        outline: none !important;
        box-shadow: none !important;
    }

 /* Default State: Light Golden Gradient (For Dark Headers, Footers, and Home Pages) */
    .hand-icon {
        width: 22px;
        height: 29px; 
        margin-left: -3px;
        display: block;
        
        /* The Light Golden Gradient */
        background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80);
        
        /* The SVG Mask */
        -webkit-mask: url('https://alfoart.com/images/derionzini-images/hand.svg') no-repeat center / contain;
        mask: url('https://alfoart.com/images/derionzini-images/hand.svg') no-repeat center / contain;
        
        /* Smooth color transition when scrolling between sections */
        transition: filter 0.3s ease, transform 0.3s ease, background 0.4s ease; 
    }

    /* Active State: Dark Gradient (Triggered when over the light <main> area) */
    .cinematic-left-share.over-light-bg .hand-icon {
        background: linear-gradient(135deg, #a48149, #344e72);
    }
	

   
  /* 3. The Drawer Gradient */
    .share-fog-drawer {
        position: absolute;
        left: 0px; /* Maintains the clean 40px safe zone for the hand icon on the left */
        right: 0;
        top: 0;
        height: 100vh;
        
        /* Ensures the icons are vertically centered and pushed to the right */
        display: flex; 
        align-items: center;
        justify-content: flex-end; 
        padding-right: 30px;
        
        background: linear-gradient(to left, #F0F2F5 0%, #F0F2F5 15%, rgba(240, 242, 245, 0) 100%);
        
        /* THE MAGIC FLIP: 
           100% pushes it completely off the RIGHT side of the screen. 
           (It was previously -100vw, which pushed it off the left) */
        transform: translateX(100%); 
        
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        overflow: hidden;
    }

    .cinematic-left-share.is-open .share-fog-drawer {
        /* Slides it perfectly back into place, stopping right before the hand icon */
        transform: translateX(0);
    }

/* 4. The 90-Degree Seamless Fog (Mobile) */
    .rotated-fog-overlay {
        display: block !important;
        position: absolute;
        top: 50%;
        left: 40%; /* Shifts fog towards center/left */
        width: 100vh; 
        height: 100vw; 
     background-image: url('https://alfoart.com/images/derionzini-images/fog-content2.webp');
        
        /* THE KEY FIX: */
        /* Forces the 80vw width, auto handles height to keep proportions. */
        background-size: 220vw auto; 
        
        /* 'repeat-x' repeats visually 'top-to-bottom' on the rotated screen */
        background-repeat: repeat-x; 
        
        background-position: center; /* Centers the single horizontal strip */
        transform: translate(-50%, -50%) rotate(-90deg);
        opacity: 1; /* Opaque fog */
        z-index: 1;
        pointer-events: none;
    }

    /* 5. Mobile Icons List */
    .share-icons-list {
        position: relative;
        z-index: 2; 
        gap: 20px; /* Wider spacing for mobile thumbs */
    }

    .share-icons-list a {
        font-size: 20px; /* Larger, tappable size */
           /* Elegant Dark Gradient for Desktop */
    background: linear-gradient(to bottom, #a48149, #344e72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

        opacity: 1; 
    }
}
/* ==============================================================
   INLINE SUBSCRIPTION FORM (Header & Footer)
============================================================== */

.cinematic-inline-subscribe {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}


/* 1. The Thin Golden Input Line */
.inline-subscribe-input {
    width: 80px !important;
    background: transparent !important;
    border: none !important;
    /* Uses your light golden accent */
    border-bottom: 1px solid rgba(212, 197, 163, 0.6) !important; 
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Merriweather', serif !important;
    font-style: italic;
    font-size: 14px !important;
    padding: 0 5px 2px 5px !important;
    margin-right: 12px !important; /* Distance to the feather */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1;
}

.inline-subscribe-input::placeholder {
    color: rgba(212, 197, 163, 0.4) !important;
}

/* Expands the line smoothly when clicked */
.inline-subscribe-input:focus {
    width: 180px !important;
    border-bottom: 1px solid rgba(212, 197, 163, 1) !important; 
}

/* 2. The 34px Golden Feather Icon */
.inline-subscribe-btn {
    width: 34px !important;
    height: 34px !important;
    
    /* Apply the light golden gradient */
    background: linear-gradient(135deg, #d4c5a3, #f4ecd0, #af9f80) !important;
    
    /* Mask the gradient using your Feather SVG */
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/feather-pen2.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/feather-pen2.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s ease, filter 0.4s ease, mask-image 0.4s ease, -webkit-mask-image 0.4s ease !important;
}

.cinematic-inline-subscribe:hover .inline-subscribe-btn {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
}
/* ==============================================================
   FOOTER SUBSCRIPTION CENTERING
============================================================== */

/* 1. Center the wrapper and stack the text above the line */
.inner-footer-content .cinematic-newsletter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 15px auto 0px auto; /* Adds elegant breathing room above and below */
    width: 100%;
}

/* 2. Center the golden input line and feather icon */
.inner-footer-content .cinematic-inline-subscribe {
    justify-content: center;
    margin-top: 10px; /* Distance between your prompt text and the golden line */
    width: 100%;
	margin-bottom: 20px;
}
.inner-footer-content .inline-subscribe-input {
    width: 160px !important;
}

/* 3. Give the prompt text a cinematic styling */
span.newsletter-title {
    font-size: 14px;
	font-style: italic;
    text-transform: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: rgba(162,154,137,0.90);
    margin-bottom: 0px;
  
	
}

/* ==============================================================
   SUCCESS STATE: The Wax Seal Transformation
============================================================== */

/* Collapse and hide the input field smoothly */
.cinematic-inline-subscribe.is-submitted .inline-subscribe-input {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none; /* Prevents clicking */
    border-color: transparent !important;
}

/* Morph the Feather into the Seal */
.cinematic-inline-subscribe.is-submitted .inline-subscribe-btn {
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/seal.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/seal.svg');
    transform: scale(1.15); /* Slight pop when the seal stamps down */
    cursor: default !important; /* Removes pointer hand */
    pointer-events: none; /* Prevents submitting a second time */
}
/* ==============================================================
   CUSTOM CINEMATIC TOOLTIP
============================================================== */

/* 1. The Tooltip Styling */
.cinematic-inline-subscribe::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -35px; /* Floats elegantly just above the golden line */
    left: 0;
    
    /* Cinematic Design */
    background: rgba(28, 37, 50, 0.95); /* Deep slate background */
    color: #d4c5a3; /* Light gold text */
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 12px;
    border: 1px solid rgba(212, 197, 163, 0.2); /* Faint gold border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    
    /* Animation & Sensitivity (Hidden by default) */
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease; /* Fast, 0.2s reaction time! */
    pointer-events: none; /* Prevents the tooltip itself from blocking your mouse clicks */
    z-index: 100;
}

/* 2. The Instant Hover Trigger */
.cinematic-inline-subscribe:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Hide permanently once the wax seal is stamped */
.cinematic-inline-subscribe.is-submitted::after {
    display: none !important;
}

/* 4. Center the tooltip perfectly in the Footer */
.inner-footer-content .cinematic-inline-subscribe::after {
    left: 50%;
    transform: translate(-50%, 5px); /* Centers it and drops it slightly */
}

.inner-footer-content .cinematic-inline-subscribe:hover::after {
    transform: translate(-50%, 0); /* Floats up into perfect center alignment */
}
/* ==============================================================
   MOBILE HEADER LAYOUT FIX
============================================================== */
@media (max-width: 1024px) {
    
    /* 1. Turn the main header into an anchor point for centering */
    .header-inner {
        position: relative;
    }

    /* 2. Break the Title onto a new line below the Logo */
    .cinematic-title-row {
        flex-direction: column !important; /* Overrides your inline flex row */
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* 3. Pluck the subscription form out of the row and pin it top-center */
    .cinematic-title-row .cinematic-inline-subscribe {
        position: absolute;
        top: 20px; /* Aligns horizontally with your logo and menu icon */
        left: 52%;
        transform: translateX(-50%);
        z-index: 99;
    }

    /* 4. Slightly shorten the input line so it doesn't bump the menu icon on tiny phones */
    .cinematic-title-row .inline-subscribe-input {
        width: 100px !important; 
        margin-right: 8px !important;
    }

    /* Keep the expansion modest so it fits between the logo and menu */
    .cinematic-title-row .inline-subscribe-input:focus {
        width: 140px !important;
    }

    /* 5. Drop the tooltip BELOW the line on mobile so it doesn't clip off the top of the screen */
    .cinematic-title-row .cinematic-inline-subscribe::after {
        top: 100%; 
        margin-top: 10px;
    }
}
/* ==============================================================
   HOME PAGE ONLY: TOP-LEFT SUBSCRIPTION (Feather First)
============================================================== */

/* 1. Use the .home class to target only the front page */
.home .header-left-subscribe .cinematic-inline-subscribe {
    display: flex !important;
    flex-direction: row !important; /* Ensures side-by-side */
    align-items: center !important;
}

/* 2. Flip the spacing: Gap now moves to the left of the input */
.home .header-left-subscribe .inline-subscribe-input {
    margin-right: 0 !important; 
    margin-left: 12px !important; 
    width: 140px;
}

/* 3. Adjust the Tooltip position for the new layout */
.home .header-left-subscribe .cinematic-inline-subscribe::after {
    top: 100%;
    left: 20px; /* Aligns the tooltip better with the new icon position */
    margin-top: 15px;
}

/* 4. Mobile Logic: Absolute positioning to the top-left */
@media (max-width: 1024px) {
    .home .header-inner {
        position: relative !important;
    }

    .home .header-left-subscribe {
        position: absolute !important;
        top: 35px !important; 
        left: 20px !important;
        z-index: 999 !important;
    }

    /* Shorten the line slightly for small screens */
    .home .header-left-subscribe .inline-subscribe-input {
        width: 40px !important; 
    }
	/* Keep the expansion modest when typing */
    .header-left-subscribe .inline-subscribe-input:focus {
        width: 140px !important;
    }
}
/* ==============================================================
   CINEMATIC EPISTLE (CONTACT FORM) - LIGHT BACKGROUND
============================================================== */

.cinematic-contact-wrapper {
    max-width: 600px;
    margin: 40px auto;
    position: relative;
    font-family: 'Merriweather', serif;
}

.contact-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

/* 1. The Ledger Lines (Dark Slate for Light Backgrounds) */
.cinematic-contact-input,
.cinematic-contact-textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(28, 37, 50, 0.4) !important; 
    border-radius: 0 !important;
    color: #1C2532 !important; /* Deep Slate Text */
    font-family: 'Merriweather', serif !important;
    font-style: italic;
    font-size: 15px !important;
    padding: 10px 5px !important;
    transition: border-color 0.4s ease !important;
    outline: none !important;
    box-shadow: none !important;
    resize: none; 
}

.cinematic-contact-input::placeholder,
.cinematic-contact-textarea::placeholder {
    color: rgba(28, 37, 50, 0.4) !important;
}

/* Turns to your gradient colors on focus */
.cinematic-contact-input:focus,
.cinematic-contact-textarea:focus {
    border-bottom: 1px solid #a48149 !important; 
}

/* ==============================================================
   THE SUBMIT BUTTON (Matches Comment Section Layout)
============================================================== */

.cinematic-dispatch-submit {
    position: relative;
    width: 200px;
    height: 60px;
    margin-top: 10px;
    transition: all 0.5s ease;
}

/* 2. The Line */
.dispatch-submit-btn {
    color: transparent !important;
    font-size: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(28, 37, 50, 0.4) !important;
    width: 100% !important; 
    height: 100% !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: border-color 0.4s ease !important;
    outline: none !important;
}

/* 3. The Pen Icon */
.cinematic-dispatch-submit::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 40px;
    height: 40px;
    background: #1C2532; /* Deep slate default */
    
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/pen.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/pen.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    
    pointer-events: none; 
    transition: background 0.4s ease, transform 0.4s ease, -webkit-mask-image 0.4s ease;
}

/* 4. The Hover Text ("Seal & Send") */
.cinematic-dispatch-submit::before {
    content: "Отправить Депешу"; 
    position: absolute;
    bottom: 10px; 
    left: 0;
    font-family: 'Merriweather', serif; 
    font-style: italic;
    font-size: 14px;
    text-shadow: none !important; 
    
    /* Pre-load gradient */
    background: linear-gradient(135deg, #a48149, #344e72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    opacity: 0;
    transform: translateY(10px); 
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none; 
}

/* Hover Effects (Line, Pen, and Text activate) */
.cinematic-dispatch-submit:hover .dispatch-submit-btn {
    border-bottom: 1px solid #a48149 !important;
}

.cinematic-dispatch-submit:hover::after {
    background: linear-gradient(135deg, #a48149, #344e72);
	 transform: scale(1.1);
}

.cinematic-dispatch-submit:hover::before {
    opacity: 1;
    transform: translateY(0); 
}


/* ==============================================================
   SUCCESS STATE: THE WAX SEAL TRANSFORMATION
============================================================== */

/* 1. Fade out the text fields and collapse their height to zero */
.contact-form-container.is-submitted .contact-row,
.contact-form-container.is-submitted .cinematic-contact-textarea {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    transition: all 0.5s ease;
}

/* 2. Center the button container to hold the seal */
.contact-form-container.is-submitted .cinematic-dispatch-submit {
    margin: 0 auto; 
    width: 80px;  /* A perfect square box to hold the seal */
    height: 80px;
    border: none !important;
}

/* Hide the line and remove interactions */
.contact-form-container.is-submitted .dispatch-submit-btn {
    border-color: transparent !important;
    cursor: default !important;
    pointer-events: none;
}

/* Hide the "Seal & Send" text */
.contact-form-container.is-submitted .cinematic-dispatch-submit::before {
    opacity: 0 !important; 
}

/* 3. Morph the Pen into the Seal and force dead-center */
.contact-form-container.is-submitted .cinematic-dispatch-submit::after {
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/seal.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/seal.svg');
    background: linear-gradient(135deg, #a48149, #344e72);
    width: 70px; 
    height: 70px;
    
    /* Pin it to all sides and use auto margins for absolute centering */
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: auto; 
    
    /* Add a cinematic "stamping" animation */
    animation: stamp-seal 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* The Stamp Keyframes */
@keyframes stamp-seal {
    0% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 4. Show the Success Text directly below the centered seal */
.contact-success-message {
    text-align: center;
    opacity: 0;
    pointer-events: none;
    margin-top: 20px;
    transition: opacity 0.8s ease 0.6s; /* Waits for the stamp to finish! */
}

.contact-success-message p {
    color: #1C2532;
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-size: 16px;
    margin: 0;
}

.contact-form-container.is-submitted + .contact-success-message {
    opacity: 1;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
    .contact-row {
        flex-direction: column;
        gap: 20px;
    }
}
/* ==============================================================
   FIX: ITALIC FONT CLIPPING ON GRADIENT TITLES
============================================================== */
.page-content-wrapper h1, 
.page-content-wrapper h2, 
.page-content-wrapper h3, 
.page-content-wrapper h4, 
.page-content-wrapper h5, 
.page-content-wrapper h6 {
    /* Expands the invisible gradient box so the sweeping italic serifs don't get chopped off */
    padding-left: 0.15em !important;
    padding-right: 0.15em !important;
    
    /* Pulls the title back to the left so it still aligns perfectly with your paragraphs */
    margin-left: -0.15em !important;
}

/* ==============================================================
   CUSTOM CIRCULAR IMAGE EFFECT (Forces Perfect Circles)
============================================================== */

/* 1. The Wrapper (Acts as the Cookie Cutter) */
.cinematic-circle-image img{
    aspect-ratio: 1 / 1 !important; /* The magic rule: forces width and height to be identical */
    border-radius: 50% !important; /* Turns that perfect square into a perfect circle */
    overflow: hidden !important; /* Chops off anything outside the circle */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 
    transition: transform 0.4s ease, box-shadow 0.4s ease; 
    
    /* Layout adjustments */
    display: block;
    margin: 0 auto; /* Centers the circle horizontally */
    max-width: 90%; /* Keeps it from overflowing its column */
}

/* 2. The Hover Zoom Effect */
.cinematic-circle-image img:hover {
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); 
}

/* 3. The Image Inside (Fills the Cookie Cutter cleanly) */
.cinematic-circle-image img {
    width: 100% !important;
    height: 100% !important; /* Forces the image to match the wrapper's new square height */
    object-fit: cover !important; /* Prevents squishing! Crops the rectangle perfectly from the center */
    border-radius: 50% !important; 
    display: block !important;
    margin: 0 !important;
}

/* ==============================================================
   Letter background 
============================================================== */
.letter-center {
    width: 100%;
    background-image: url('https://www.alfoart.com/images/derionzini-images/letter-center.webp');
    background-size: 100% auto; 
    background-repeat: repeat-y; 
    background-position: top left; 
    padding: 0 12%; 
    box-sizing: border-box;
    
    /* THE FIX: Creates an impenetrable wall. No invisible WordPress margins can leak out to push the bottom edge away. */
    overflow: hidden !important; 
}

.letter-bottom {
    width: 100%;
    aspect-ratio: 1600 / 160;
    background-image: url('https://www.alfoart.com/images/derionzini-images/letter-bottom.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    /* THE NUCLEAR OPTION */
    margin: 0 !important; /* Strip away any phantom WordPress margins */
    transform: translateY(-2px) !important; /* Physically drag the image up over the center block */
    position: relative !important; 
    z-index: 10 !important;
}

/* 1. Top Edge (Locked to exact proportions) */
.letter-top {
    width: 100%;
    aspect-ratio: 1600 / 246;
    background-image: url('https://www.alfoart.com/images/derionzini-images/letter-top.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 2. Center Body (Auto-tiling) */
.letter-center {
    width: 100%;
    background-image: url('https://www.alfoart.com/images/derionzini-images/letter-center.webp');
    background-size: 100% auto; 
    background-repeat: repeat-y; 
    background-position: top left; /* Ensures the pattern starts precisely at pixel 0 */
    padding: 0 12%; 
    box-sizing: border-box;
}


/* 4. The Handwritten Ink Override */
p.historical-ink-quote {
    font-family: "Great Vibes", cursive !important; 
    font-size: 36px !important; 
    
    /* Lock the line-height in pixels to make the math perfect */
    line-height: 60px !important; 
    
    color: #2c221a !important; 
    text-shadow: none !important; 
    
    /* Strip away all vertical padding and margins */
    margin: 0 !important; 
    padding: 0 !important; 
    
    /* The Ruled Paper Effect */
    display: block !important; 
    width: 100% !important; /* Forces the lines to stretch edge-to-edge */
    
    /* Draws a faint ink line exactly every 60px */
    background-image: repeating-linear-gradient(
        transparent 0px, 
        transparent 59px, 
        rgba(44, 34, 26, 0.15) 59px, /* The translucent line color */
        rgba(44, 34, 26, 0.15) 60px
    ) !important;
}

/* Mobile Adjustment for Readability */
@media (max-width: 768px) {
    p.historical-ink-quote {
        font-size: 22px !important;
        
        /* Adjust the line-height for mobile... */
        line-height: 46px !important;
        
        /* ...and adjust the repeating gradient to match the new height exactly */
        background-image: repeating-linear-gradient(
            transparent 0px, 
            transparent 45px, 
            rgba(44, 34, 26, 0.15) 45px, 
            rgba(44, 34, 26, 0.15) 46px
        ) !important;
    }
    .letter-center {
        padding: 0 10%; 
    }
}

/* ==============================================================
   GLOBAL CINEMATIC BUTTONS (Dark Gold Gradient)
============================================================== */
/* This targets standard WordPress button blocks to match your site theme */
.wp-block-button__link {
    background: linear-gradient(135deg, #a48149, #344e72) !important; /* Your custom dark-gold to slate gradient */
    color: #ffffff !important; /* Ensures text is always white */
    border: none !important;
    
    padding: 12px 25px !important;
    font-family: 'Merriweather', serif !important;
    font-style: normal !important;
    font-size: 16px !important;
   
    letter-spacing: 1px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}

/* Button Hover Effect */
.wp-block-button__link:hover {
    transform: translateY(-2px) !important; /* Floats up slightly */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; /* Shadow expands */
    filter: brightness(1.1) !important; /* Slight brightening effect */
}
/* ==============================================================
   FOOTER DISCLAIMER (Author's Note)
============================================================== */
.historical-disclaimer {
    font-family: 'Merriweather', serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.45); /* Muted enough to blend in, bright enough to read */
    text-align: center;
    max-width: 600px; /* Keeps the text from spanning the whole monitor */
    margin: 10px auto 15px auto; /* Gives it breathing room from the social icons */
    line-height: 1.4;
    letter-spacing: 0.5px;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .historical-disclaimer {
        font-size: 12px;
        max-width: 85%;
        margin-top: 25px;
    }
}
/* The Container */
.full-width-map-wrapper {
    position: relative;
    width: 100%;
    
    /* Gives the map a guaranteed physical presence */
    min-height: 500px; 
    
    /* Will expand if the parent container is taller */
    height: 100%; 
    
    overflow: hidden;
}

/* The Iframe inside */
.full-width-map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}
/* ==============================================================
   HISTORICAL ARCHIVAL LIST
============================================================== */
ul.archival-list {
    list-style: none !important; /* Strips out the modern dots */
    padding-left: 0 !important;
    margin: 2rem 0 !important;
    font-family: 'Merriweather', serif;
}

ul.archival-list li {
    position: relative;
    padding-left: 4.5rem; /* Makes room for the historic icon */
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: #2c221a; /* Oxidized Iron Gall Ink */
    font-size: 17px;
}

/* The Historical Bullet Icon (Custom SVG Mask) */
ul.archival-list li::before {
    content: ""; /* THE MISSING MAGIC KEY: Tells the browser to render the element */
    position: absolute;
    left: 0;
    top: 0; /* You can change this to 2px or 4px if the icon looks too high next to the text */

    width: 40px !important;
    height: 29px !important;
/*    background: linear-gradient(135deg, #a48149, #344e72) !important;*/
	background: linear-gradient(135deg, #a48149, rgb(175, 159, 128)) !important;
    
    -webkit-mask-image: url(https://alfoart.com/images/derionzini-images/list-arrow2.svg);
    mask-image: url(https://alfoart.com/images/derionzini-images/list-arrow2.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 1));
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

/* Bolding for Archive Names (RGIA, Fond numbers, etc.) */
ul.archival-list li strong {
    color: #344e72; /* Slate blue accent */
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Archival Link Styling */
ul.archival-list li a {
    color: #a48149;
    text-decoration: none;
    border-bottom: 1px dotted rgba(164, 129, 73, 0.6); /* Delicate gold dotted line */
    transition: color 0.3s ease, border-color 0.3s ease;
}

ul.archival-list li a:hover {
    color: #344e72; /* Shifts to slate on hover */
    border-bottom-color: #344e72;
    border-bottom-style: solid; /* Line becomes solid when interacting */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    ul.archival-list li {
        padding-left: 4rem;
        font-size: 16px;
    }
    ul.archival-list li::before {
        font-size: 1.1em;
    }
}

/* ==============================================================
   CINEMATIC ARCHIVAL DIVIDER
============================================================== */
hr.cinematic-divider {
    /* 1. Strip the default WordPress line styling */
    border: none !important;
    background-color: transparent !important;
    
    /* 2. Define the size and spacing */
    height: 25px !important; /* Adjust this to match your SVG's thickness */
    max-width: 800px; /* Keeps the divider elegantly sized in the center */
    margin: 0.8rem auto !important; /* Centers it and adds breathing room */
    
    /* 3. Apply the gradient background */
    background: linear-gradient(135deg, #a48149, #344e72) !important;
    
    /* 4. Use the SVG to carve out the shape */
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/divider.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/divider.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Optional: A subtle glow to make it pop off the page */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* ==============================================================
   CIRCULAR ARCHIVAL MAP
============================================================== */
/* MAP CONTAINER SETTINGS
  - aspect-ratio: 1 / 1 makes it a perfect square.
  - border-radius: 50% turns that square into a perfect circle.
  - max-width: 700px ensures it doesn't get ridiculously huge on desktop monitors.
  - overflow: hidden is critical; it acts like a cookie cutter, clipping the map's square corners.
*/
.circular-archival-map {
    width: 100%;
    max-width: 900px; /* Change this number to make the circle larger or smaller */
    aspect-ratio: 1 / 1; 
    border-radius: 50%; 
    overflow: hidden; 
    margin: 2rem auto; /* Centers the map on the page with breathing room above and below */
    box-shadow: 0 8px 14px rgba(0,0,0,0.2); /* Adds a soft cinematic shadow behind the circle */
    
    /* A necessary fix for Safari browsers to ensure the circle doesn't break */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0); 
}
/* Fix the invisible "Ctrl + Scroll to zoom" text overlay */
.circular-archival-map .gm-style * {
    text-shadow: none !important; 
    color: #2c221a !important; 
}
/* ==============================================================
   TRUE SOFT VIGNETTE IMAGE FADE (Conflict-Free Method)
============================================================== */
/* Clean, conflict-free base for the JS to work with */
figure.faded-edge-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50px;
}
/* ==============================================================
   GOLDEN ALBUM CORNERS (Updated SVG & Size)
============================================================== */
/* 1. The Container */
figure.album-corner-image {
    position: relative;
    margin: 2rem auto !important;
    display: inline-block; /* Shrink-wraps the container tightly to the image */
    
    /* VERY IMPORTANT: Do NOT add 'overflow: hidden' to this class! 
       If you do, it will chop off the parts of the corner that hang outside. */
}

/* 2. The Image itself (Slightly rounded) */
figure.album-corner-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px; /* Your requested 8px rounding */
	box-shadow: 3px 10px 28px rgba(28, 37, 50, 0.3);

}
figure.album-corner-image img:hover
 {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}


/* Clean base for the JS to work with */
figure.album-corner-image {
    position: relative;
    margin: 1.5rem auto !important;
    display: inline-block; 
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
   figure.album-corner-image img {
    border-radius: 8px; /* Your requested 8px rounding */
}
	figure.faded-edge-image img {
    border-radius: 10px;
}
}
/* ==============================================================
   CINEMATIC VIDEO FRAME
============================================================== */
.cinematic-video-frame {
    position: relative;
    max-width: 800px; 
    margin: 3rem auto;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(44, 34, 26, 0.2); 
    
    /* OVERFLOW: HIDDEN HAS BEEN REMOVED FROM HERE! */
    background-color: #2c221a; 
}

/* The video itself still holds the rounded corners perfectly */
.cinematic-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    outline: none; 
}
/* ==============================================================
   CUSTOM CIRCULAR VIDEO EFFECT (Animated Portraits)
============================================================== */

/* 1. The Video Element (Acts as both the wrapper and the image) */
.cinematic-circle-video video {
    aspect-ratio: 1 / 1 !important; /* Forces the perfect square footprint */
    border-radius: 50% !important;  /* Rounds it into a perfect circle */
    overflow: hidden !important; 
    
    /* Layout and Sizing */
    display: block;
    margin: 2rem 2rem; 
    max-width: 90%; 
    width: 100% !important;
    height: auto!important; 
    
    /* object-fit: cover is the magic here! It crops rectangular videos into the circle without squishing them */
    object-fit: cover !important; 
    
    /* The cinematic shadow and smooth animation timing */
    box-shadow: 0 10px 24px rgba(44, 34, 26, 0.2); 
    transition: transform 0.4s ease, box-shadow 0.4s ease; 
    
    /* Clean up default video UI behaviors */
    outline: none;
    pointer-events: none; /* Prevents the user from accidentally clicking or pausing the portrait */
}

/* 2. The Hover Zoom Effect */
.cinematic-circle-video video:hover {
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); 
}


/* ==============================================================
   cinematic-360-container & 360 Fog
============================================================== */
.cinematic-360-container {
    width: 100%; 
    height: 100vh; 
    min-height: 500px;
    margin: 0; 
    position: relative;
    background-color: #000; 
    box-shadow: none; 
    z-index: 10;
}

#ancestor-room-scene { 
    width: 100%; 
    height: 100%; 
}

body.page-template-template-cinematic-360 .inner-hero-scene {
    height: 30vh !important;
    min-height: 25vh !important;
}

body.page-template-template-cinematic-360 .site-main {
    margin-top: 30vh !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: transparent;
}

/* ==============================================================
   STATIC SEAMLESS FOG OVERLAYS
============================================================== */
.static-scene-fog {
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px; 
    background-image: url('https://alfoart.com/images/derionzini-images/fog-content-360.webp');
    background-size: auto 100%; 
    background-position: left bottom; 
    background-repeat: repeat-x; 
    pointer-events: none; 
    z-index: 9999 !important; 
}

.static-scene-fog.fog-top {
    top: 0;
}

.static-scene-fog.fog-bottom {
    bottom: -1px;
    background-position: right bottom; 
    transform: scaleY(-1); 
}

/* ==============================================================
   PANNELLUM 360 CUSTOM Загрузка SCREEN
============================================================== */
#ancestor-room-scene.pnlm-container {
    background: #f0f2f5 !important;
}

.pnlm-load-box { 
    background-color: transparent !important; 
    box-shadow: none !important;
}

.pnlm-load-box p {
    color: #3A414C !important;
    font-family: 'Merriweather', serif !important; 
    font-size: 20px !important;
    font-weight: 400 !important;
    text-shadow: none !important; 
}

.pnlm-loading {
    border: 4px solid rgba(58, 65, 76, 0.15) !important; 
    border-left-color: #3A414C !important; 
}

/* ==============================================================
   PANNELLUM 360 CONTROLS - FIXED RIGHT & VERTICAL STACK
============================================================== */

/* 1. Structural Container (Anchored Center-Right) */
.pnlm-controls-container {
    position: fixed !important; 
    top: 50% !important;
    right: 30px !important;
    left: auto !important; 
    bottom: auto !important; 
    transform: translateY(-50%) !important; /* Maintains strict vertical centering */
    display: flex !important;
    flex-direction: column !important; 
    align-items: center;
    gap: 15px !important; 
    z-index: 9999 !important; 
}

/* 2. Zoom Controls Group */
.pnlm-zoom-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; 
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pnlm-controls {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pnlm-zoom-in {
    border-bottom: none !important;
}

/* 3. The Magic Dye: Lighter Gold (Isolated Color Filter) */
.pnlm-control {
    background-color: transparent !important;
    opacity: 1 !important; 
    
    /* Applies the pure light-gold color. Drop-shadow removed to prevent animation bugs */
    filter: brightness(0) saturate(100%) invert(88%) sepia(25%) saturate(400%) hue-rotate(345deg) brightness(108%) contrast(95%) !important;
    
    border-radius: 50% !important; /* Establishes a circular bound for shadows */
    transition: all 0.4s ease-in-out !important;
}

/* 4. Hover State for All Icons */
.pnlm-control:hover {
    filter: brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(300%) hue-rotate(340deg) brightness(115%) contrast(100%) !important;
    box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.9) !important; /* Glows on hover */
}

/* ==============================================================
   360 CONTROLS: DESKTOP SCALING & TARGETED ANIMATION
============================================================== */

/* 5. Desktop Scaling: Enlarges individual icons cleanly */
@media screen and (min-width: 851px) {
    .pnlm-control {
        transform: scale(1.3) !important; 
    }
}

/* ==============================================================
   6. TARGETED PULSE (BULLETPROOF GHOST RING)
============================================================== */

/* Anchor the fullscreen button so the ghost ring knows exactly where to sit */
.pnlm-fullscreen-toggle-button {
    position: relative !important; 
}

/* Create the invisible ghost ring directly behind the fullscreen icon */
.pnlm-fullscreen-toggle-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    /* Assign the pulse animation strictly to this ghost ring */
    animation: pulseFullscreen 2s infinite;
    
    /* Let the user click through the pulse to hit the button */
    pointer-events: none; 
}

/* Pause the ghost ring's animation when the user is hovering */
.pnlm-fullscreen-toggle-button:hover::after {
    animation: none !important;
}

/* The Keyframe Engine for the Golden Pulse */
@keyframes pulseFullscreen {
    0% { box-shadow: 0 0 0 0 rgba(247, 216, 165, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(247, 216, 165, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 216, 165, 0); }
}

/* ==============================================================
   360 ANIMATED PARROT
============================================================== */
.character-billboard { 
    pointer-events: none; 
}

.character-billboard video {
    width: auto !important; 
    height: auto; 
    max-width: none !important; 
    transform: translate(-50%, -50%); 
    filter: drop-shadow(10px 15px 12px rgba(40, 25, 10, 0.6)); 
}

/* ==============================================================
   360 FLOATING TEXT LABELS & INTERACTIVE DOTS
============================================================== */
.text-hotspot-parent {
    width: 0px !important; 
    height: 0px !important; 
    
    /* CRITICAL: We must allow clicks now so the dots work! */
    pointer-events: auto; 
    cursor: pointer;
}

/* 1. The Glowing Target Dot (Hidden on Desktop by default) */
.mist-dot-indicator {
    display: none; 
}

/* 2. The Text Container */
.mist-text-container {
    transform: translate(-50%, -50%); 
    width: 160px !important; 
    text-align: center !important; 
    white-space: normal !important; 
    
    /* Let clicks pass through the text block so users can still drag the room */
    pointer-events: none; 
    transition: all 0.3s ease-in-out;
}

/* Line 1: The Character Name */
.mist-name {
    font-family: 'Merriweather', serif !important;
    font-style: italic !important;
    color: #e8ecef !important; 
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0px;
    text-shadow: 2px 4px 10px rgba(28, 37, 50, 0.5) !important; 
    margin-bottom: 4px; 
    line-height: 1.2 !important; 
}

/* Line 2: The Description */
.mist-desc {
    font-family: 'Merriweather', serif !important; 
    font-style: normal !important; 
    color: rgba(232, 236, 239, 0.9) !important; 
    font-size: 9px !important; 
    font-weight: 300 !important;
    letter-spacing: 0px;
    text-shadow: 1px 2px 6px rgba(28, 37, 50, 0.5) !important; 
    line-height: 1.1 !important; 
}

/* ==============================================================
   MOBILE ONLY: Convert Text to Clickable Dots
============================================================== */
@media screen and (max-width: 850px) {
    
    /* 1. CRITICAL Z-INDEX FIX: Force the opened hotspot to the very front 
          so no neighbor's dots pierce through the text box */
    .text-hotspot-parent.is-active {
        z-index: 999 !important; 
    }

    /* 2. The New Custom SVG Target Dot */
    .mist-dot-indicator {
        display: block;
        position: absolute;
        width: 20px; /* Slightly larger so the intricate SVG is clear */
        height: 20px;
        background-image: url('https://alfoart.com/images/derionzini-images/point.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        
        background-color: transparent; /* Removes the old solid gold circle */
        border: none; /* Removes the old white outline */
        border-radius: 50%; /* Keeps the shadow pulse perfectly circular */
        transform: translate(-50%, -50%);
        animation: pulseGoldDot 2s infinite;
        
        z-index: 1; /* Keeps the dot safely behind the text box */
    }

    /* 3. The Cinematic Text Container */
    .mist-text-container {
        opacity: 0;
        visibility: hidden;
        position: relative; /* Required for z-index to work */
        z-index: 10; /* Pops the text above its own dot */
        transform: translate(-50%, 15px); 
        
        background: rgba(164, 129, 73, 0.65); 
        backdrop-filter: blur(4px);
        padding: 12px 8px;
        border-radius: 12px;
/*        border: 1px solid rgba(223, 185, 125, 0.3); */
        box-shadow: 0 10px 25px rgba(40,30,15,0.3);
    }
    
    /* Reveal the text box when active */
    .text-hotspot-parent.is-active .mist-text-container {
        opacity: 1;
        visibility: visible;
    }

    /* When tapped, stop the pulsing and make the SVG itself glow white */
    .text-hotspot-parent.is-active .mist-dot-indicator {
        animation: none;
        filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8));
    }
}

/* The CSS animation that makes the dot pulse like a radar/target */
@keyframes pulseGoldDot {
    0% { box-shadow: 0 0 0 0 rgba(223, 185, 125, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(223, 185, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(223, 185, 125, 0); }
}
/* ==============================================================
   MOBILE ROOM HEIGHT RESPONSIVENESS
============================================================== */
@media (max-width: 768px) {
    .cinematic-360-container {
        height: 50vh; 
        min-height: 350px; 
    }
    .static-scene-fog {
        height: 100px; 
    }
    body.page-template-template-cinematic-360 .inner-hero-scene {
        height: 50vh !important;
        min-height: 50vh !important;
    }
    body.page-template-template-cinematic-360 .site-main {
        margin-top: 50vh !important;
    }
}

/* ==============================================================
   MOBILE FOG FIX: BACKGROUND-SIZE SCALING (360 & 404 PAGES)
============================================================== */
@media (max-width: 1024px) {
    
    /* Target ONLY the top scrolling fog on the 360 template and the 404 page */
    body.page-template-template-cinematic-360 .fog-clip-wrapper.clip-top .scrolling-top-fog,
    body.error404 .fog-clip-wrapper.clip-top .scrolling-top-fog {
        
        /* The default was auto 180%. We are cutting the height exactly in half! */
        background-size: auto 90% !important; 
        
        /* Pin the background image to the TOP edge so it hugs the ceiling as it shrinks */
        background-position: bottom left !important; 
    }
    
}
/* ==============================================================
   CINEMATIC READ-ALOUD BUTTON (250px STAMP + CUSTOM TEXT)
============================================================== */
.cinematic-audio-wrapper {
    display: flex;
    justify-content: center; /* Centers the whole assembly */
    margin: 2rem 0; 
}

/* The Button Wrapper uses Flexbox to stack the Stamp and Text */
.cinematic-read-aloud-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* The breathing room between the stamp and the text */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 1. The 250px SVG Masked Icon */
.cinematic-read-aloud-btn .read-aloud-icon {
    display: block;
    width: 250px !important;
    height: 250px !important;
    
    /* The seamlessly panning gradient */
    background: linear-gradient(45deg, rgb(164, 129, 73), rgb(52, 78, 114), rgb(164, 129, 73));
    background-size: 200% 200%;
    background-position: 0% 50%; 
    
    -webkit-mask-image: url('https://alfoart.com/images/derionzini-images/read-aloud-ru.svg');
    mask-image: url('https://alfoart.com/images/derionzini-images/read-aloud-ru.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 2. The Custom HTML Text */
/* 2. The Custom HTML Text */
.cinematic-read-aloud-btn .read-aloud-text {
    font-family: 'Merriweather', serif !important;
    font-style: italic !important;
    
    /* 1. Size & Case Forces */
    font-size: 16px !important; 
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    
    /* 2. The Gradient Text */
    background: linear-gradient(45deg, rgb(164, 129, 73), rgb(52, 78, 114)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* 3. THE SHADOW FIX: Kill the global text-shadow and use a filter instead! */
    text-shadow: none !important; 
    filter: drop-shadow(0px 1px 0px #ffffff) !important;
    
    /* 4. Kill the global span margin */
    margin-bottom: 0 !important;
    
    transition: letter-spacing 0.4s ease !important;
}

/* 3. The Hover Effect (Scales stamp and expands text spacing) */
.cinematic-read-aloud-btn:hover {
    transform: scale(1.05); 
    filter: drop-shadow(0 12px 24px rgba(164, 129, 73, 0.3)); 
}
.cinematic-read-aloud-btn:hover .read-aloud-text {
    letter-spacing: 4px; /* Text stretches beautifully on hover */
}

/* 4. The Active Playing State (Stamp breathes) */
.cinematic-read-aloud-btn.is-playing {
    animation: audioActiveStampPulse 3s infinite ease-in-out;
}
@keyframes audioActiveStampPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(164, 129, 73, 0)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 8px 20px rgba(164, 129, 73, 0.4)); }
}

/* 5. The Active Playing State (Gradient flows) */
.cinematic-read-aloud-btn.is-playing .read-aloud-icon {
    animation: audioGradientFlow 4s ease-in-out infinite;
}
@keyframes audioGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* ==============================================================
   MOBILE FULLSCREEN VIDEO FIX (The Anti-Shatter Update)
============================================================== */

/* 1. Hide conflicting fixed layers */
body.is-in-fullscreen .footer-copyright,
body.is-in-fullscreen .site-header,
body.is-in-fullscreen .inner-hero-scene,
body.is-in-fullscreen .inner-footer-scene,
body.is-in-fullscreen .cinematic-left-share,
body.is-in-fullscreen .fog-clip-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -999 !important;
}

/* 2. Prevent viewport shattering when the device rotates */
body.is-in-fullscreen {
    overflow: hidden !important;
    background-color: #000000 !important; /* Fills the void with black */
}

/* 3. Kill the massive 100vh margins temporarily so the layout anchors safely */
body.is-in-fullscreen .site-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #000000 !important; 
}

/* 4. Ensure the video isolates cleanly */
body.is-in-fullscreen .cinematic-video-frame {
    transform: none !important;
    z-index: 2147483647 !important;
}
.cinematic-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    outline: none; 
    
    /* THE MAGIC FIX: Forces the poster to fill the frame perfectly */
    object-fit: cover !important; 
    object-position: center !important; /* Crops equally from all edges */
    
    /* Optional: Adds a dark background while the poster image downloads */
    background-color: #1C2532; 
}

/* ==============================================================
   MOBILE ORIENTATION LOGIC (PORTRAIT OVERLAY & LANDSCAPE TAKEOVER)
============================================================== */

/* 1. DEFAULT STATE: Completely hide the overlay on Desktop and Landscape */
.rotate-device-overlay {
    display: none !important;
}

/* 2. MOBILE PORTRAIT: Show the Blur, Golden Icon, and Rotate Sign */
@media screen and (max-width: 850px) and (orientation: portrait) {
    .rotate-device-overlay {
        display: flex !important;
        cursor: pointer !important; 
        position: absolute !important; 
        top: 0 !important; 
        left: 0 !important; 
        
        /* THE FIX: Reverted to 100% so it stays perfectly inside the 360 container! */
        width: 100% !important; 
        height: 100% !important; 
        
        background: rgba(28, 37, 50, 0.85) !important; 
        backdrop-filter: blur(8px) !important; 
        -webkit-backdrop-filter: blur(8px) !important; 
        
        /* Z-index 999 keeps it beneath the 9999 Fog, but above the room */
        z-index: 999 !important; 
        
        align-items: center !important; 
        justify-content: center !important; 
        text-align: center !important;
    }
    
    /* Ensure the icon and text stack vertically in the center */
    .rotate-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rotate-content svg { 
        width: 55px !important; 
        height: 55px !important; 
        fill: #dfb97d !important; 
        filter: drop-shadow(0px 0px 8px rgba(223, 185, 125, 0.7)) !important; 
        animation: phoneRotate 2s infinite ease-in-out !important; 
        margin-bottom: 15px !important; 
    }
    
    .rotate-content p { 
        font-family: 'Merriweather', serif !important; 
        font-style: italic !important; 
        font-size: 18px !important; 
        color: #fce8c5 !important; 
        text-shadow: 1px 2px 4px rgba(15, 20, 25, 0.8) !important; 
        margin-top: 0 !important; 
        line-height: 1.4 !important;
    }
}

/* 3. MOBILE LANDSCAPE: The Fullscreen Immersive Takeover */
@media screen and (max-width: 950px) and (orientation: landscape) {
    body.page-template-template-cinematic-360 .inner-hero-scene, 
    body.page-template-template-cinematic-360 .page-content-wrapper,
    body.page-template-template-cinematic-360 header, 
    body.page-template-template-cinematic-360 .site-header { 
        display: none !important;
    }

    .cinematic-360-container {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        z-index: 999999 !important; margin: 0 !important; padding: 0 !important;
    }

    .cinematic-360-container .static-scene-fog,
    .fog-clip-wrapper {
        display: none !important;
    }

    body.page-template-template-cinematic-360 {
        overflow: hidden !important;
    }
}

@keyframes phoneRotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); } 
    100% { transform: rotate(-90deg); } 
}
/* ==============================================================
   360 IFRAME: ROUNDED EDGES & CORNER SUPPORT
============================================================== */
.cinematic-iframe-frame {
    position: relative;
    margin: 3rem auto !important;
    display: block; 
    width: 100%;
    /* CRITICAL: No 'overflow: hidden' here, or the gold corners get chopped off! */
}

.cinematic-iframe-frame iframe {
    display: block;
    width: 100%;
    border-radius: 12px;
    box-shadow: 3px 10px 28px rgba(28, 37, 50, 0.3);
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .cinematic-iframe-frame iframe {
        border-radius: 8px;
    }
}
/* ==============================================================
   CENTERING CIRCULAR IMAGES (WITH MEDIA-TEXT PROTECTION)
============================================================== */

/* 1. Apply flex-centering ONLY to standalone image figures */
.wp-block-column figure.cinematic-circle-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

.wp-block-column figure.cinematic-circle-image img {
    margin: 0 auto !important;
    display: block !important;
}

/* 2. Protect WordPress Media & Text blocks by restoring their Grid */
div.wp-block-media-text.cinematic-circle-image {
    display: grid !important; 
    align-items: center !important;
}

/* 3. Ensure the image inside the Media & Text block stays a perfect circle */
div.wp-block-media-text.cinematic-circle-image .wp-block-media-text__media img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
/* ==============================================================
   MOBILE: HORIZONTAL RECTANGULAR IFRAME SCENE
============================================================== */
@media screen and (max-width: 768px) {
    .cinematic-iframe-frame iframe {
        /* Forces the height to be exactly 55% of the screen's width (a classic 16:9 cinematic ratio) */
        height: 55vw !important; 
        
        /* Safety rails to ensure it never gets too microscopic or too tall */
        min-height: 220px !important; 
        max-height: 350px !important;
        
        border-radius: 8px !important;
    }
}
/* Remove dotted underline from WordPress image blocks */
.cinematic-main figure a,
.cinematic-main .wp-block-image a,
.cinematic-main .wp-block-media-text__media a {
    border-bottom: none !important;
}
.cinematic-main a.wp-block-button__link,
.cinematic-main a.wp-element-button,
.wp-block-buttons a {
    text-decoration: none !important;
    border-bottom: none !important;
}
/* ==============================================================
   FIX: GOLDEN CORNERS FOR CENTERED / RESIZED IMAGES
============================================================== */
div.wp-block-image.album-corner-image {
    width: -moz-fit-content !important;
    width: fit-content !important; /* Shrink-wraps the container to the exact width of the image */
    margin-left: auto !important;  /* Centers the perfectly wrapped container */
    margin-right: auto !important;
    position: relative;
}

/* Remove internal spacing so the corners sit flush against the image */
div.wp-block-image.album-corner-image figure.aligncenter {
    margin: 0 !important; 
}
/* ==============================================================
   INDIVIDUAL "PILL" BACKGROUNDS FOR SUBMENU LINKS (DESKTOP)
============================================================== */
@media (min-width: 1025px) {
    
    /* 1. Shrink-wrap the link so the background only hugs the text */
    header#site-header .site-navigation ul.sub-menu a {
        display: inline-block !important;
        width: auto !important; 
        
        /* 2. The Semi-Transparent Dark Background */
        background-color: rgba(28, 37, 50, 0.5) !important; /* Your dark slate color at 80% opacity */
        
        /* Optional: Adds a slight frosted glass effect behind the pill */
        backdrop-filter: blur(1px) !important; 
        -webkit-backdrop-filter: blur(1px) !important;
        
        /* 3. The Shape (Rounded with minimal padding) */
        padding: 5px 16px !important;
        border-radius: 25px !important; 
        
        /* Pre-set an invisible border to prevent layout jumping on hover */
        border: none !important;
    }

    /* 4. The Hover Effect */
    header#site-header .site-navigation ul.sub-menu a:hover {
        background-color: rgba(28, 37, 50, 0.75) !important; /* Darkens slightly on hover for contrast */
        border: none !important; /* Adds a faint golden rim */
        transform: translateY(-2px) !important; /* A tiny, elegant lift */
    }
}
/* ==============================================================
   ARCHIVAL DOCUMENT GALLERY (Old Screenshots)
============================================================== */

/* Give the columns some breathing room */
.archival-doc-gallery {
    margin: 0.5rem auto !important;
}

/* Space out the individual figures */
.archival-doc-gallery figure.wp-block-image {
    margin-bottom: 0.5rem !important;
    position: relative;
}

/* 1. The Screenshot Images */
.archival-doc-gallery figure.wp-block-image img {
    border-radius: 6px !important; /* Just a tiny softening of the sharp digital corners */
    border: 1px solid rgba(164, 129, 73, 0.3) !important; /* Delicate gold rim */
    box-shadow: 0 4px 14px rgba(28, 37, 50, 0.20) !important; /* Soft museum shadow */
    
    /* Applies a very faint warm tint to stark white screenshots */
    filter: sepia(20%) contrast(95%) brightness(98%); 
    
    transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease !important;
}

/* 2. Hover Effect (Lifts the paper and clears the tint for easy reading) */
.archival-doc-gallery figure.wp-block-image:hover img {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(28, 37, 50, 0.25) !important;
    filter: sepia(0%) contrast(100%) brightness(100%); 
}

/* 3. The Captions (Typography) */
.archival-doc-gallery figcaption {
    text-align: center !important;
    font-family: 'Merriweather', serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: rgba(58, 65, 76, 0.8) !important; /* Muted slate text */
    margin-top: 8px !important;
    padding: 0 8px !important;
    text-shadow: none !important;
}

/* 4. Highlight the Italicized Source Names (e.g., "Вологодские Губернские Ведомости") */
.archival-doc-gallery figcaption em {
    color: #a48149 !important; /* Your signature accent gold */
    font-style: italic !important;
    font-weight: 400 !important;
    display: block !important; /* Puts the source on its own line if you have extra description text */
    margin-bottom: 4px !important;
}
@media screen and (max-width: 1024px) {
.archival-doc-gallery figcaption
  {
  
    display: none !important;
  
}
}
/* ==============================================================
   ARCHIVE TITLE FIX (Prevents Category/Tag Names from shrinking)
============================================================== */
h1.page-title span {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    color: inherit !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Ensures the span perfectly inherits the title's gradient */
    background: none !important;
    -webkit-text-fill-color: inherit !important;
}
/* Custom 600px Centered Text Block */
.cinematic-text-600 {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
/* ==============================================================
   FIX: CONTENT CUT-OFF AT THE BOTTOM OF THE PAGE
============================================================== */
.page-content-wrapper {
    padding-bottom: 100px !important; /* Creates a safe zone so fog/masks don't bite the content */
}
/* ==============================================================
   THE ULTIMATE SUB-PIXEL GAP FIX (Desktop & Mobile Override)
============================================================== */

/* 1. Bulletproof the Top Seam */
.page-template-template-cinematic .fog-clip-wrapper.clip-top .scrolling-top-fog,
.page-template-template-cinematic .fog-clip-wrapper.clip-top .inner-layer-fog-new {
    height: calc(100% + 20px) !important;
    bottom: -15px !important; /* Massive 15px overlap to crush the gap */
    top: auto !important;
}

/* 2. Bulletproof the Bottom Seam */
.page-template-template-cinematic .fog-clip-wrapper.clip-bottom .scrolling-bottom-fog,
.page-template-template-cinematic .fog-clip-wrapper.clip-bottom .footer-layer-fog-new {
    height: calc(100% + 20px) !important;
    top: -15px !important; /* Massive 15px overlap to crush the gap */
    bottom: auto !important;
}

/* 3. Pull the Solid Background Masks tighter over the cracks */
.page-template-template-cinematic .site-main::before {
    bottom: calc(100% - 5px) !important; 
}
.page-template-template-cinematic .site-main::after {
    top: calc(100% - 5px) !important; 
}
/* ==============================================================
   FOOTER GAP & CONTENT HEIGHT OVERRIDE (REFINED)
============================================================== */

/* 1. The Parallax Gap Fix (Universal) */
/* Gives the image massive vertical slack so it never runs out of fabric when pulled */
.footer-layer-bg {
    height: calc(100% + 800px) !important; 
    margin-top: -150px !important; 
}

/* 2. Desktop-Only Content Overflow Fix */
/* Protects the 100vh mobile layout while ensuring desktop footers never crush text */
@media (min-width: 1025px) {
    .page-template-template-cinematic .inner-footer-scene {
        height: max(50vh, 450px) !important;
    }

    .page-template-template-cinematic .site-main {
        margin-bottom: max(50vh, 450px) !important;
    }
}