/* Wireframe-first: minimal, readable, responsive.
   UI polish comes next (typography, spacing, colors).
*/

/* fonts - adobe fonts
Elizeth Regular
font-family: "elizeth", serif;
font-weight: 400;
font-style: normal;
Elizeth Italic
font-family: "elizeth", serif;
font-weight: 400;
font-style: italic;
Elizeth Bold
font-family: "elizeth", serif;
font-weight: 700;
font-style: normal;
Elizeth Bold Italic
font-family: "elizeth", serif;
font-weight: 700;
font-style: italic; */

/*
font-family: "source-sans-3", sans-serif;
font-weight: 400;
font-style: normal;
Source Sans 3 Italic
font-family: "source-sans-3", sans-serif;
font-weight: 400;
font-style: italic;
Source Sans 3 Bold
font-family: "source-sans-3", sans-serif;
font-weight: 700;
font-style: normal;
Source Sans 3 Bold Italic
font-family: "source-sans-3", sans-serif;
font-weight: 700;
font-style: italic;

LTC Caslon Pro Regular
font-family: "ltc-caslon-pro", serif;
font-weight: 400;
font-style: normal;
LTC Caslon Pro Italic
font-family: "ltc-caslon-pro", serif;
font-weight: 400;
font-style: italic;
LTC Caslon Pro Bold
font-family: "ltc-caslon-pro", serif;
font-weight: 700;
font-style: normal;
LTC Caslon Pro Bold Italic
font-family: "ltc-caslon-pro", serif;
font-weight: 700;
font-style: italic;


*/


:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: rgba(17,17,17,.62);
  --hairline: rgba(17,17,17,.12);

  --container: 1100px;
  --pad: 24px;

  --radius: 999px;
  --tap: 44px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.4;
  overflow-x: hidden;

  /* KEY FIX: make the page a flex column so landing can be exactly one-screen */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.container{
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.skip-link:focus{ left: 12px; top: 12px; z-index: 9999; }

.site-header{
  border-bottom: 1px solid var(--hairline);
}
.header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 16px;
}
.brand a{
  font-weight: 600;
  letter-spacing: .02em;
}

.site-nav{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-footer{
  border-top: 1px solid var(--hairline);
  margin-top: 0; /* KEY FIX: remove forced extra height that causes scroll */
}
.footer-row{
  padding: 18px 0;
  display: flex;
  justify-content: center;
}
.footer-credit{
  font-size: 13px;
  color: var(--muted);
}

/* Landing */
.landing{
  flex: 1;               /* KEY FIX: fill the remaining viewport space */
  display: grid;
  place-items: center;
  padding: 0;
}
.landing-center{
  width: min(680px, 100%);
  text-align: center;
  display: grid;
  gap: 18px;
  padding: 24px 0;
}



/* Gallery: stage supports image slide OR text slide */
/* Gallery page layout (missing in your current CSS) */
.gallery{
  padding: 28px 0;
}

.gallery-shell{
  display: grid;
  gap: 14px;
}

/* This is the container that controls image size */

/* Ensure the stage fills the slider */
.slide-stage{
  width: 100%;
  height: 100%;
  display: grid;
}

/* Image slide: image area + tiny caption */

/* Image sizing rule: always show full image */


/* Nav buttons (if you already have them in CSS elsewhere, keep one copy only) */
.nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(17,17,17,.25);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}
.nav-btn:hover{ background: rgba(17,17,17,.38); }
.nav-btn.prev{ left: 14px; }
.nav-btn.next{ right: 14px; }

/* Meta row under slider (language + counter) */
.meta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.lang-switch{
  display: flex;
  gap: 10px;
  align-items: center;
}

.muted{ color: var(--muted); }

/* Mobile adjustments */
@media (max-width: 640px){
  .slider{
    height: calc(100vh - 180px);
    max-height: none;
    border-radius: 14px;
  }
  .nav-btn{ width: 42px; height: 42px; }
}



.slide-stage{
  width: 100%;
  height: 100%;
  display: grid;
}


.slide-text{
  width: 100%;
  height: 100%;
  display: none; /* JS toggles */
  place-items: center;
  padding: 24px;
}

.text-card{
  width: min(760px, 100%);
  display: grid;
  gap: 12px;
  padding: 24px;
  /*border: 1px solid var(--hairline);
  border-radius: 18px;*/
  background: #fff;
}

.text-title{
  margin: 0;
  font-size: 18px;
  letter-spacing: .02em;
}

.text-body{
  margin: 0;
  color: var(--muted);
}



/* --- FIX: caption must always be visible --- */
figcaption.caption{
  display: block !important;
  padding: 6px 12px;
  border-top: 1px solid var(--hairline);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  background: #fff;
  line-height: 1.3;
}

/* --- Slider: give it a stable responsive height --- */
.slider{
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 0;          /* no rounded edges */
  overflow: hidden;          /* keep everything inside the frame */
  background: #fff;

  /* KEY: stable stage height that fits most screens */
  height: min(78vh, 820px);
  min-height: 520px;
}

/* Make the stage fill the slider */
.slide-stage{
  width: 100%;
  height: 100%;
}

/* Image slide = image area + caption */
.slide-image{
  width: 100%;
  height: 100%;
  margin: 0;

  display: grid;
  grid-template-rows: 1fr auto; /* image takes remaining space, caption sits below */
  min-height: 0;                /* IMPORTANT: allow the 1fr row to shrink */
}

/* The image must NEVER exceed its grid cell */
.slide-img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;            /* IMPORTANT */
  display: block;

  object-fit: contain;      /* complete image, no cropping */
  object-position: center;
}

/* Caption stays visible (small, fixed) */
.caption{
  font-size: 10px;
  line-height: 1.3;
  padding: 6px 12px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: slightly shorter stage */
@media (max-width: 640px){
  .slider{
    height: 70vh;
    min-height: 420px;
  }
}


/* --- FIX: images must never crop --- */

/* --- Slider mode control (prevents image + text showing together) --- */
.slider.mode-text  [data-image-slide] { display: none !important; }
.slider.mode-text  [data-text-slide]  { display: grid !important; }

.slider.mode-image [data-text-slide]  { display: none !important; }
.slider.mode-image [data-image-slide] { display: grid !important; }

/* --- Image caption: perfectly centered --- */
.caption{
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  font-size: 10px;
  line-height: 1.3;

  padding: 6px 12px;
  margin: 0;

  border-top: 1px solid var(--hairline);
  color: var(--muted);
  background: #fff;

  /* prevent width weirdness */
  width: 100%;
  box-sizing: border-box;
}

/* ===========================
   MOBILE: MENU + GALLERY UX
   paste at END of styles.css
   =========================== */

/* --- Hamburger menu button (hidden on desktop) --- */
.menu-toggle{
  display:none;
  border:1px solid var(--hairline);
  background:#fff;
  border-radius: 10px;
  height: 40px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
}

/* --- Touch devices: hide arrows until user interacts --- */
body.page-gallery .nav-btn{
  transition: opacity .2s ease;
}

@media (hover: none) {
  body.page-gallery .nav-btn{
    opacity: 0;
    pointer-events: none;
  }
  body.page-gallery.show-ui .nav-btn{
    opacity: 1;
    pointer-events: auto;
  }
}

/* --- Responsive: phones/tablets --- */
@media (max-width: 768px){

  /* Header: tighter + hamburger visible */
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .header-row{
    padding: 10px 0;
    gap: 10px;
  }

  /* Turn nav into dropdown on mobile */
  .site-nav{
    display: none;
    position: absolute;
    right: var(--pad);
    top: 58px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 10px 12px;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }

  body.nav-open .site-nav{
    display: flex;
  }

  /* Ensure header can anchor absolute nav */
  .site-header{ position: relative; }

  /* Gallery: remove footer ONLY on mobile gallery */
/*  body.page-gallery .site-footer{
    display:none;
  }*/

  /* Gallery: make image big BUT fully visible */
  body.page-gallery .slide-stage{
    height: calc(100vh - 110px); /* gives room for header + small spacing */
  }

  body.page-gallery .slide-image{
    height: 100%;
  }

  body.page-gallery .slide-img{
    width: 100%;
    height: 100%;
    object-fit: contain;    /* KEY: no cropping */
    display: block;
  }

  /* Caption: centered + compact */
  body.page-gallery .caption{
    text-align: center;
    padding: 6px 10px;
  }

  /* Optional: slightly smaller arrows on mobile */
  body.page-gallery .nav-btn{
    width: 44px;
    height: 44px;
  }
}


/* Tiny filename caption (under every image only) */

/* =========================================================
   FINAL OVERRIDES — keep at the VERY END of styles.css
   (mobile nav dropdown + gallery mobile sizing + footer hide)
   ========================================================= */

/* Keep header positioned for dropdown */
.site-header{ position: relative; }

/* Hamburger button (hidden on desktop) */
.menu-toggle{
  display: none;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 10px;
  height: 40px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Ensure slider is relative (for absolute arrows) */
.slider{ position: relative; }

/* Make caption always centered */
figcaption.caption,
.caption{
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;

  width: 100%;
  box-sizing: border-box;

  font-size: 10px;
  line-height: 1.3;
  padding: 6px 12px;
  margin: 0;

  border-top: 1px solid var(--hairline);
  color: var(--muted);
  background: #fff;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure image always fully fits (no cropping) */
.slide-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

/* MOBILE / TABLET */
@media (max-width: 768px){

  /* Show hamburger */
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Turn main nav into dropdown */
  .site-nav{
    display: none;
    position: absolute;
    right: var(--pad);
    top: 58px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 10px 12px;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }

  body.nav-open .site-nav{
    display: flex;
  }

  /* Gallery: remove footer on mobile gallery */
 /* body.page-gallery .site-footer{
    display: none !important;
  }*/

  /* Gallery: use most of the screen for the image */
  body.page-gallery .slider{
    height: calc(100vh - 120px);
    min-height: 0;
  }

  body.page-gallery .slide-image{
    height: 100%;
    min-height: 0;
    grid-template-rows: 1fr auto;
  }

  body.page-gallery .slide-stage{
    height: 100%;
  }

  /* Arrows: keep, but smaller */
  body.page-gallery .nav-btn{
    width: 44px;
    height: 44px;
  }
}

/* Touch devices: optionally auto-hide arrows until tap */
@media (hover: none) {
  body.page-gallery .nav-btn{
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.page-gallery.show-ui .nav-btn{
    opacity: 1;
    pointer-events: auto;
  }
}




	  

/* =========================================================
   OVERRIDES
   - Minimal landing page (index.html must have: <body class="landing">)
   - NAV typography (non-landing)
   Paste/keep these at the VERY END so they win the cascade.
   ========================================================= */

/* --- NAV: Helvetica + red (non-landing pages) --- */
/*body:not(.landing) .site-header .brand a,
body:not(.landing) .site-header .site-nav a{
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: red;
}*/

/* --- LANDING: hide header/footer completely --- */
body.landing .skip-link,
body.landing .site-header,
body.landing header,
body.landing nav,
body.landing .site-footer,
body.landing footer{
  display: none !important;
}

/* Landing base (white bg, black text) */
body.landing{
  background: #fff;
  color: #111;
}

/* Ensure landing fills viewport + centers content */
body.landing .landing{
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Main title: Urbana */


/* Language menu: Source Serif 4 */
body.landing .lang-switch,
body.landing .lang-switch a{
  
	
}

/* Social links: lower (adjust as needed) */
body.landing .social{
  margin-top: 48px;
}

/* LANDING — main title adjustment */
body.landing h1{
	font-family: "elizeth", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 48px;
  	color:#494949; !important;
}


/* LANDING — language selector */


body.landing .lang-actions{
  display: flex;
  gap: 24px;                 /* space between ES / EN / 中文 */
  justify-content: center;
}

body.landing .lang-actions .btn{
  font-family: "source-sans-3", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
	
	color:#494949;
  
}

body.landing .lang-actions .btn:hover{
  
	color: #21BCFF; 
	text-decoration: none;
 	transition: color 0.2s ease, opacity 0.2s ease;
  
}

/* LANDING — tighten space between title and language selector */
body.landing .lang-actions{
  margin-top: -36px;
}

/* LANDING — subtitle (very close to title) */
body.landing .landing-subtitle{
  font-family: "Source Sans 3", sans-serif;
  font-weight: 200;          /* ExtraLight */
  font-style: thin;
  font-size: 18px;
  color: #303030;
  text-align: center;
	margin-top: -50px;          /* pulls it close to the title */
  margin-bottom: 0;
}
/* LANDING — thin divider between title and subtitle */
body.landing h1::after{
  content: "";
  display: block;
  width: 290px;          /* adjust length */
  height: 1px;
  background: #303030; /* same tone as title */
  margin: 0 auto 6px auto; /* space above / below line */
  opacity: 0.4;        /* very subtle */
}

/* LANDING — push language buttons down slightly */
body.landing .lang-actions{
  margin-top: -20px; /* adjust */
}

/* LANDING — social links bottom-right */
body.landing .social-links{
  position: fixed;
  right: 24px;
  bottom: 60px;
  display: flex;
  flex-direction: column; /* ig on top, mail below */
  gap: 6px;
  font-family: "source-sans-3", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #303030;
}
body.landing .social-links a:hover{
  color: #21BCFF;
	text-decoration: none;
 	transition: color 0.2s ease, opacity 0.2s ease;
}

body.landing h1,
body.landing h2,
body.landing .lang-actions a,
body.landing .social-links a {
  transition: 
    opacity 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

/* GALLERY — TEXT SLIDE TITLE (Slide 01: "Desde Fuera") */
body.page-gallery .slide-text .text-title {
  font-family: "urbana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  color: #5E5E5E;

  text-align: center;
  margin: 0;
}

/* DESKTOP NAV — gallery + other non-landing pages */
body:not(.landing) .site-header .site-nav a{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;          /* thin */
  font-size: 14px;
  color: #494949;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hover state */
body:not(.landing) .site-header .site-nav a:hover{
  color: #21BCFF;
  text-decoration: none;
}

/* DESKTOP BRAND — match nav styling */
body:not(.landing) .site-header .brand a{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;          /* thin */
  font-size: 14px;
  color: #494949;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hover state */
body:not(.landing) .site-header .brand a:hover{
  color: #21BCFF;
  text-decoration: none;
}

/* =========================================================
   FOOTER — quiet links (instagram / mail / email text)
   ========================================================= */

body:not(.landing) .footer-links{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;              /* prevents break issues on small screens */
}

/* Separator dot */
body:not(.landing) .footer-sep{
  font-size: 12px;
  color: #9A9A9A;
  user-select: none;
}

/* Footer links (instagram / mail) */
body:not(.landing) .footer-links a{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #494949;
  text-decoration: none;
  transition: color .2s ease;
}

body:not(.landing) .footer-links a:hover{
  color: #21BCFF;
}

/* Plain email text (hola@desde-fuera.com) */
body:not(.landing) .footer-links .footer-text{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;          /* keep email readable */
  color: #494949 !important; /* Force the correct color */
  margin: 0;
	 text-transform: uppercase;
}



/* GALLERY — arrows: offset + fade-in on hover */
body.page-gallery .nav-btn{
  background: transparent;
  border: none;
  border-radius: 0;

  color: #6A6A6A;
  font-size: 32px;
  width: auto;
  height: auto;

  opacity: 0;
  transition: opacity 0.25s ease, color 0.2s ease;
}

/* Offset from edges */
body.page-gallery .nav-btn.prev{
  left: 32px;   /* adjust if needed */
}
body.page-gallery .nav-btn.next{
  right: 32px;  /* adjust if needed */
}

/* Show arrows when hovering the slider */
body.page-gallery .slider:hover .nav-btn{
  opacity: 1;
}

/* Hover color */
body.page-gallery .nav-btn:hover{
  /*color: #21BCFF;*/
}
/* GALLERY — arrows: slightly bigger + closer to edges */
body.page-gallery .nav-btn{
  font-size: 40px;   /* bigger arrow */
}

/* Move arrows 10px closer to the edges */
body.page-gallery .nav-btn.prev{
  left: 2px;        /* was 32px */
}
body.page-gallery .nav-btn.next{
  right: 2px;       /* was 32px */
}
/* GALLERY — image captions match top nav style */
body.page-gallery .caption{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;          /* thin */
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #494949;

  text-align: center;
}


body{
  margin: 0;
  background: #ffffff;
  color: #494949;
  font-family: "source-sans-3", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FORCE JS \n to render as line breaks 
body.page-gallery .text-body{
  white-space: pre-line !important;
}*/

/* TEXT SLIDE — transition (poetic) */
body.page-gallery .slide-text.is-transition .text-body{
  font-style: italic;
  text-align: center;
  line-height: 1.45;
}
body.page-gallery .slide-text.is-transition{
  padding-top: 48px;
}
body.page-gallery .slide-text.is-transition .text-title{
	font-size:30px;
  text-align: center;
  font-style: italic;
}

.slide-text.is-aphorism .text-body{
	font-family: "ltc-caslon-pro", serif;
font-weight: 400;
font-style: italic;
  text-align: center;
  font-size: 32px;
  line-height: 1.4;
  color: #494949;
  margin-top: 0px;
}

/* MOBILE NAV FIX: ensure dropdown sits above slider */
@media (max-width: 768px){
  .site-header{ position: relative; }

  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav{
    display: none;
    position: absolute;
    right: var(--pad);
    top: 58px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 10px 12px;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }

  body.nav-open .site-nav{
    display: flex;
  }
}
/* ===== MOBILE: stable stage + scroll INSIDE long text slides ===== */
@media (max-width: 768px){

  /* 1) Keep the slider height calm/stable */
  body.page-gallery .slider{
    height: calc(100svh - 120px); /* header allowance */
    min-height: 0;
  }

  /* 2) Ensure stage fills slider */
  body.page-gallery .slide-stage{
    height: 100%;
    min-height: 0;
  }

  /* 3) TEXT SLIDES: allow internal scrolling */
  body.page-gallery .slide-text{
    height: 100%;
    min-height: 0;
    overflow: hidden; /* prevents page scroll fights */
    padding: 16px;
  }

  body.page-gallery .text-card{
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;              /* <-- the key */
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }

  /* Optional: slightly smaller text on mobile to reduce scrolling */
  body.page-gallery .text-body{
    font-size: 18px;
    line-height: 1.35;
  }
}
@media (max-width: 768px){
  body.page-gallery .text-body{
    line-height: 1.22;
  }
}
body.page-gallery .caption{
  border-top: none;
}






/* =========================================================
   FOOTER — MOBILE (CENTERED + 2 LINES)
   ========================================================= */
@media (max-width: 480px){

  body:not(.landing) .footer-links{
    justify-content: center;
    text-align: center;
    gap: 10px;                 /* a bit more breathing room */
  }

  /* keep separators tight and consistent */
  body:not(.landing) .footer-sep{
    font-size: 11px;
    line-height: 1;
  }

  /* force the email onto its own centered line */
  body:not(.landing) .footer-links .footer-text{
    flex-basis: 100%;          /* NEW LINE */
    display: block;
    margin-top: 6px;
    text-align: center;
  }

}

/* =========================================================
   FOOTER — final (desktop + mobile)
   ========================================================= */

body:not(.landing) .footer-links{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body:not(.landing) .footer-sep{
  font-size: 12px;
  color: #9A9A9A;
  user-select: none;
}

body:not(.landing) .footer-links a,
body:not(.landing) .footer-links .footer-text{
  font-family: "source-sans-3", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #494949;
  text-decoration: none;
  opacity: .7;
  transition: color .2s ease, opacity .2s ease;
}

body:not(.landing) .footer-links a:hover{
  color: #21BCFF;
  opacity: 1;
}

/* MOBILE: center + email on its own line (no orphan dot) */
@media (max-width: 480px){

  body:not(.landing) .site-footer{
    padding: 12px 0;
  }

  body:not(.landing) .footer-links{
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  body:not(.landing) .footer-sep{
    font-size: 11px;
    line-height: 1;
  }

  body:not(.landing) .footer-links a,
  body:not(.landing) .footer-links .footer-text{
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  /* hide the last dot (the one right before the email) */
  body:not(.landing) .footer-links .footer-sep:last-of-type{
    display: none;
  }

  /* force email onto its own centered line */
  body:not(.landing) .footer-links .footer-text{
    flex-basis: 100%;
    display: block;
    margin-top: 6px;
    text-align: center;
	   color: #494949 !important; 
  }
}

/* FINALE slide only */
.slide-text.is-finale .text-body{
  font-size: 16px;
  text-align: center;
  line-height: 1.6;
  margin-top: 40px;
}

.slide-text.is-finale{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	color:red; !important;
}