/* ==================================================
   FuTuRisN / Mares P. W.
   Donde Nadie Compra el Cielo
   Main stylesheet

   TEACHING NOTE:
   This stylesheet is organized as a visual system.
   Each block has one job. Avoid repeating the same
   selector in many places unless the later rule is an
   intentional override.

   Cache note:
   After modifying this file, update the CSS version in
   index.html, for example:
   <link rel="stylesheet" href="styles.css?v=20260605-14" />
   ================================================== */


/* ==================================================
   1. DESIGN TOKENS
   Central variables for color, shadow, radius and rhythm.
   Changing these values modifies the whole visual system.
   ================================================== */

:root{
  --bg:#160f0a;
  --bg2:#24160d;
  --paper:#f3e2bf;
  --paper2:#fff5df;
  --ink:#2a1a0e;
  --text:#f4dfb7;
  --muted:#c9aa78;
  --gold:#d6a95c;
  --green:#60744c;
  --line:rgba(214,169,92,.34);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --radius:22px;
}


/* ==================================================
   2. GLOBAL RESET / BASE
   Gives the site its general background, typography and
   box model.
   ================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-bottom:20px!important;
  background:radial-gradient(circle at top,#3a2412 0,#160f0a 45%,#0d0906 100%);
  color:var(--text);
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.55;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

a:visited,
a:hover,
a:focus{
  text-decoration:none;
}


/* ==================================================
   3. CUSTOM CURSOR
   Site-specific gold cursor.

   Teaching note:
   Native browser controls, especially audio/video controls,
   may ignore custom cursor rules because they are rendered
   by the browser/operating system.
   ================================================== */

html,
body,
*{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M7 5 L31 22 L20 25 L16 37 L7 5 Z' fill='%23d6a95c'/%3E%3Cpath d='M13 14 L24 21 L18 22 L16 29 L13 14 Z' fill='%23fff5df' opacity='.9'/%3E%3C/svg%3E") 7 5,auto!important;
}

a,
button,
.button,
.tab-btn,
.menu-toggle,
.navlinks a,
.share-button,
.to-top-btn,
.animated-slot,
.song-media,
select,
[role='button']{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M8 5 L34 23 L22 27 L17 40 L8 5 Z' fill='%23f0d28e'/%3E%3Cpath d='M14 15 L26 22 L19 24 L17 31 L14 15 Z' fill='%232a1a0e' opacity='.72'/%3E%3C/svg%3E") 8 5,pointer!important;
}

input,
textarea,
.lyrics,
.analysis,
.tab-panel{
  cursor:text!important;
}


/* ==================================================
   4. TEXT SELECTION / HIGHLIGHT
   Replaces the default browser blue selection with the
   website palette: dark brown background + gold text.

   Teaching note:
   Keep this block only ONCE. Multiple ::selection blocks
   fight each other through the cascade.
   ================================================== */

*::selection{
  background:#24160d!important;
  color:#d6a95c!important;
  -webkit-text-fill-color:#d6a95c!important;
}

*::-moz-selection{
  background:#24160d!important;
  color:#d6a95c!important;
}

a::selection,
a *::selection{
  background:#24160d!important;
  color:#f0d28e!important;
  -webkit-text-fill-color:#f0d28e!important;
}

a::-moz-selection,
a *::-moz-selection{
  background:#24160d!important;
  color:#f0d28e!important;
}

.tab-panel::selection,
.tab-panel *::selection,
.annex-card::selection,
.annex-card *::selection{
  background:#24160d!important;
  color:#d6a95c!important;
  -webkit-text-fill-color:#d6a95c!important;
}

.tab-panel::-moz-selection,
.tab-panel *::-moz-selection,
.annex-card::-moz-selection,
.annex-card *::-moz-selection{
  background:#24160d!important;
  color:#d6a95c!important;
}

input::selection,
textarea::selection,
select::selection{
  background:#24160d!important;
  color:#d6a95c!important;
  -webkit-text-fill-color:#d6a95c!important;
}

input::-moz-selection,
textarea::-moz-selection,
select::-moz-selection{
  background:#24160d!important;
  color:#d6a95c!important;
}


/* ==================================================
   5. TOP NAVIGATION
   Base navigation styling.
   Floating desktop/mobile behavior is defined later.
   ================================================== */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(18px,4vw,56px);
  background:rgba(22,15,10,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.brand{
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:none;
}

.brand small{
  display:block;
  font-size:.68rem;
  color:var(--muted);
  letter-spacing:.14em;
}

.navlinks{
  display:flex;
  gap:18px;
  align-items:center;
}

.navlinks a{
  color:var(--muted);
  font-size:1.2rem;
}

.navlinks a:hover{
  color:var(--paper);
}

.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
}


/* ==================================================
   6. HERO
   Opening section with album title and main image.
   ================================================== */

.hero{
  min-height:100vh;
  background:
    linear-gradient(rgba(22,15,10,.35),rgba(22,15,10,.88)),
    url('assets/images/album-inner-2.png') center/cover fixed;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,520px);
  gap:42px;
  align-items:center;
  padding:70px clamp(18px,6vw,90px) 90px;
}

.hero-copy{
  max-width:850px;
}

.eyebrow{
  display:inline-block;
  background:rgba(18,12,7,.82);
  padding:.35rem .65rem;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-size:.78rem;
  font-weight:700;
}

.hero h1{
  font-size:clamp(3rem,8vw,8rem);
  line-height:.92;
  margin:.15em 0;
  color:var(--paper2);
  text-shadow:0 4px 40px rgba(0,0,0,.55);
}

.lead{
  font-size:clamp(1.1rem,2vw,1.45rem);
  max-width:720px;
  color:#f9e9c8;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.hero-art{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  background:rgba(255,245,223,.08);
  box-shadow:var(--shadow);
}

.hero-art img{
  border-radius:16px;
}


/* ==================================================
   7. BUTTONS
   Shared button style used across the website.
   ================================================== */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,245,223,.08);
  color:var(--paper);
  transition:.2s;
}

.button:hover{
  transform:translateY(-1px);
  background:rgba(255,245,223,.14);
}

.button.primary{
  background:linear-gradient(135deg,#c9943f,#f0d28e);
  color:#211409;
  border:none;
  font-weight:700;
}


/* ==================================================
   8. GENERAL SECTIONS
   Shared structure for the main content sections.
   ================================================== */

.section{
  padding:72px clamp(18px,6vw,90px);
  border-top:1px solid var(--line);
}

.section-head{
  max-width:860px;
  margin-bottom:28px;
}

.section h2{
  font-size:clamp(2rem,4.5vw,4rem);
  line-height:1;
  margin:.1em 0;
  color:var(--paper2);
}

.text-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  font-size:1.1rem;
}

.text-columns,
.text-columns>*{
  min-width:0;
  max-width:100%;
}

.text-columns p,
.support-note,
.support-note a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.support-note a{
  display:inline;
}

.wide-art{
  margin:36px 0 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  background:rgba(255,245,223,.08);
  box-shadow:var(--shadow);
}

.wide-art img{
  border-radius:16px;
}

.annex-card{
  background:var(--paper2);
  color:var(--ink);
  border-radius:var(--radius);
  padding:clamp(24px,5vw,50px);
  box-shadow:var(--shadow);
  font-size:1.12rem;
}


/* ==================================================
   9. DOCUMENT SECTION WIDTH ALIGNMENT
   Makes the literary reading and RGPD cards align with
   the broader site rhythm instead of appearing too narrow.
   ================================================== */

.annex .section-head,
.privacy-section .section-head,
.annex .annex-card,
.privacy-section .annex-card{
  width:100%!important;
  max-width:none!important;
}

.annex .annex-card,
.privacy-section .annex-card{
  padding:clamp(28px,5vw,58px)!important;
}

.privacy-section .annex-card p{
  margin-top:0;
}

.privacy-section a{
  color:var(--gold);
  font-weight:700;
}


/* ==================================================
   10. SONG INDEX
   Compact grid linking directly to each song.
   ================================================== */

.song-index{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  margin-bottom:38px;
}

.song-index a{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  color:var(--paper);
  background:rgba(255,245,223,.06);
}

.song-index small{
  color:var(--gold);
  margin-right:8px;
}


/* ==================================================
   11. SONG CARDS
   Each song has visual media, audio, actions, tabs and text.
   ================================================== */

.songs{
  display:grid;
  gap:34px;
}

.song-card{
  display:grid;
  grid-template-columns:minmax(280px,42%) 1fr;
  gap:28px;
  background:linear-gradient(135deg,rgba(255,245,223,.1),rgba(255,245,223,.045));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.song-media{
  position:sticky;
  top:92px;
  align-self:start;
}

.song-media figure{
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#000;
  border:1px solid var(--line);
}

.song-media img{
  width:100%;
  height:auto;
  animation:slowWindow 18s ease-in-out infinite alternate;
  transform-origin:center;
}

.song-media video{
  width:100%;
  border-radius:18px;
  display:block;
}

.song-number{
  color:var(--gold);
  letter-spacing:.16em;
  font-size:1.1rem;
  font-weight:700;
}

.song-card h3{
  font-size:clamp(1.7rem,3.5vw,3.4rem);
  line-height:1;
  margin:.2em 0 .15em;
  color:var(--paper2);
}

.song-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}


/* ==================================================
   12. ANIMATED VISUALS
   Static image first; MP4 appears on hover or viewport.
   ================================================== */

.animated-slot{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#000;
}

.animated-slot .song-static,
.animated-slot .song-animation{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

.animated-slot .song-static{
  position:relative;
  z-index:1;
  opacity:1;
  transition:opacity .32s ease;
}

.animated-slot .song-animation{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  transition:opacity .32s ease;
  pointer-events:none;
}

.animated-slot.is-playing .song-static{
  opacity:0;
}

.animated-slot.is-playing .song-animation{
  opacity:1;
}

.song-media video.song-animation{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  display:block;
  background:#000;
}

.motion-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  padding:6px 10px;
  border:1px solid rgba(245,221,164,.45);
  border-radius:999px;
  background:rgba(22,15,10,.62);
  color:#f8e7c0;
  font-size:.95rem;
  letter-spacing:.06em;
  opacity:.82;
  backdrop-filter:blur(8px);
  transition:opacity .25s ease;
}

.animated-slot.is-playing .motion-hint{
  opacity:0;
}

@media (hover:hover) and (pointer:fine){
  .animated-slot:hover .motion-hint{
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .animated-slot .song-static{
    transition:none;
  }

  .animated-slot .song-animation{
    display:none;
  }

  .motion-hint{
    display:none;
  }
}


/* ==================================================
   13. AUDIO PLAYER
   The audio controls remain native for usability, but the
   surrounding area is styled to match the album.
   ================================================== */

.audio-box{
  margin:18px 0;
  padding:18px!important;
  border:1px solid rgba(214,169,92,.42)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(255,245,223,.08),rgba(0,0,0,.18))!important;
  box-shadow:inset 0 0 0 1px rgba(255,245,223,.035)!important;
}

.audio-box strong{
  display:block!important;
  margin-bottom:12px!important;
  color:#fff5df!important;
  font-size:1.08rem!important;
  letter-spacing:.02em!important;
}

.audio-box audio{
  width:100%!important;
  display:block!important;
  margin:0!important;
  border-radius:999px!important;
  background:#f3e2bf!important;
  accent-color:#d6a95c!important;
}

.audio-box audio::-webkit-media-controls-panel{
  background:linear-gradient(135deg,#fff5df,#e7c982)!important;
  border-radius:999px!important;
}

.audio-box audio::-webkit-media-controls-play-button,
.audio-box audio::-webkit-media-controls-mute-button{
  filter:sepia(1) saturate(1.2) brightness(.75)!important;
}

.audio-box .missing-note{
  margin-top:12px!important;
  color:var(--muted)!important;
  font-size:.94rem!important;
}


/* ==================================================
   14. TABS / LYRICS / ANALYSIS
   Switches between lyrics and literary reading.
   ================================================== */

.tabs{
  display:flex;
  gap:10px!important;
  margin:18px 0 10px!important;
  padding:8px!important;
  width:max-content!important;
  max-width:100%!important;
  border:1px solid rgba(214,169,92,.28)!important;
  border-radius:999px!important;
  background:rgba(255,245,223,.045)!important;
}

.tab-btn{
  border:1px solid var(--line);
  background:rgba(255,245,223,.08);
  color:var(--text);
  padding:8px 14px;
  min-width:104px!important;
  border-radius:999px!important;
  font-size:.92rem!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}

.tab-btn.active{
  background:linear-gradient(135deg,#fff5df,#e7c982)!important;
  color:#2a1a0e!important;
  box-shadow:0 4px 16px rgba(0,0,0,.22)!important;
}

.tab-panel{
  display:none;
  background:var(--paper2);
  color:var(--ink);
  border-radius:18px;
  padding:24px;
  margin-top:12px;
  max-height:680px;
  overflow:auto;
  scrollbar-color:#8c6a35 #fff5df;
  scrollbar-width:thin;
}

.tab-panel.active{
  display:block;
}

.lyrics{
  white-space:pre-wrap;
  font-size:1.02rem;
}

.analysis{
  font-size:1.03rem;
}

.analysis p{
  margin-top:0;
}

.tab-panel::-webkit-scrollbar{
  width:12px;
}

.tab-panel::-webkit-scrollbar-track{
  background:#fff5df;
  border-radius:999px;
}

.tab-panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d6a95c,#8c6a35);
  border-radius:999px;
  border:3px solid #fff5df;
}

.tab-panel::-webkit-scrollbar-thumb:hover{
  background:#d6a95c;
}


/* ==================================================
   15. FULL ALBUM PLAYER
   One complete MP3 player for simple continuous listening.
   ================================================== */

.full-album-player{
  margin:34px 0 0;
  padding:clamp(18px,3vw,30px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,245,223,.12),rgba(255,245,223,.045));
  box-shadow:var(--shadow);
}

.full-album-player h3{
  margin:.1em 0 .25em;
  color:var(--paper2);
  font-size:clamp(1.6rem,3vw,2.8rem);
  line-height:1;
}

.full-album-player p{
  max-width:920px;
  color:#f7e6c4;
}

.full-album-player audio{
  width:100%;
  margin:14px 0 12px;
}

.full-player-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0;
}

.download-help,
.section-note{
  color:var(--muted);
  font-size:1rem;
}

.download-help strong,
.section-note strong{
  color:var(--paper);
}


/* ==================================================
   16. VISUAL ARCHIVE
   Additional album visuals and mockups.
   ================================================== */

.visual-archive{
  margin-top:34px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  background:rgba(255,245,223,.06);
}

.visual-archive h3{
  margin:.1em 0;
  color:var(--paper2);
  font-size:clamp(1.4rem,2.5vw,2.4rem);
}

.visual-archive p{
  color:var(--muted);
  margin:.2em 0 18px;
}

.archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}

.archive-grid a{
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
}

.archive-grid img{
  width:100%;
  height:190px;
  object-fit:cover;
  transition:.2s;
}

.archive-grid a:hover img{
  transform:scale(1.03);
}


/* ==================================================
   17. FEEDBACK FORM
   The feedback section is an action form, not a document
   page. It stays centered and proportional.
   ================================================== */

.feedback-section .section-head,
.feedback-section .feedback-form{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.feedback-section .section-head{
  text-align:center!important;
}

.feedback-form{
  display:grid;
  gap:14px;
  width:100%!important;
  max-width:760px;
  padding:clamp(18px,3vw,28px)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  background:linear-gradient(135deg,rgba(255,245,223,.1),rgba(255,245,223,.045))!important;
  box-shadow:var(--shadow)!important;
}

.feedback-form label{
  display:grid;
  gap:6px;
  color:var(--paper);
}

.feedback-form input,
.feedback-form textarea,
.feedback-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,245,223,.96);
  color:#2a1a0e;
  font:inherit;
}

.feedback-form textarea{
  resize:vertical;
}

.feedback-form select option{
  background:#fff5df;
  color:#2a1a0e;
}

.feedback-submit{
  font-size:1.08rem;
  font-weight:700;
  padding:14px 24px;
}


/* ==================================================
   18. FLOATING SHARE BAR
   Fixed bottom share symbols.
   ================================================== */

.share-box{
  position:fixed!important;
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  z-index:99999!important;
  width:auto!important;
  max-width:calc(100vw - 20px)!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:rgba(22,15,10,.92)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.45)!important;
}

.share-box .share-title,
.share-box .share-help{
  display:none!important;
}

.share-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
}

.share-actions .share-button{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  font-size:1.05rem!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
}


/* ==================================================
   19. TO TOP BUTTON
   Floating button to return to top.
   ================================================== */

.to-top-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 16px;
  background:linear-gradient(135deg,#c9943f,#f0d28e);
  color:#211409;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.22s ease;
}

.to-top-btn.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}


/* ==================================================
   20. FOOTER
   Extra bottom padding prevents floating share bar from
   hiding footer content.
   ================================================== */

.footer{
  padding:42px clamp(18px,6vw,90px);
  padding-bottom:110px!important;
  color:var(--muted);
  border-top:1px solid var(--line);
  text-align:center;
}

.footer a{
  color:var(--paper);
}


/* ==================================================
   21. NOSCRIPT WARNING
   Appears only if JavaScript is disabled.
   ================================================== */

.noscript-warning{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:#160f0a;
  color:#fff5df;
  text-align:center;
  font-size:1.25rem;
  line-height:1.5;
}


/* ==================================================
   22. ANIMATIONS
   Gentle image movement for the living-window effect.
   ================================================== */

@keyframes slowWindow{
  from{
    transform:scale(1);
  }

  to{
    transform:scale(1.045);
  }
}


/* ==================================================
   23. MOBILE LAYOUT
   Up to 900px:
   - song cards become single-column
   - menu becomes a compact floating panel
   ================================================== */

@media(max-width:900px){
  .hero-grid,
  .song-card,
  .text-columns{
    grid-template-columns:1fr;
  }

  .song-media{
    position:static;
  }

  .hero{
    background-attachment:scroll;
    padding-top:76px!important;
  }

  .topbar{
    position:fixed!important;
    top:10px!important;
    left:10px!important;
    right:10px!important;
    z-index:99990!important;
    border-radius:999px!important;
    padding:10px 12px!important;
    box-shadow:0 12px 36px rgba(0,0,0,.42)!important;
  }

  .menu-toggle{
    display:block;
  }

  .navlinks{
    position:fixed!important;
    top:70px!important;
    left:10px!important;
    right:10px!important;
    max-height:58vh!important;
    overflow:auto!important;
    display:none;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:12px!important;
    border-radius:18px!important;
    background:rgba(22,15,10,.94)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.45)!important;
  }

  .navlinks.open{
    display:grid!important;
  }

  .navlinks a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:8px 10px!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    background:rgba(255,245,223,.07)!important;
    text-align:center!important;
    font-size:.88rem!important;
  }
}


/* ==================================================
   24. DESKTOP FLOATING MENU
   From 901px upward:
   - topbar becomes a floating capsule
   ================================================== */

@media(min-width:901px){
  .topbar{
    position:fixed!important;
    top:16px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(1120px,calc(100vw - 48px))!important;
    z-index:99990!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    padding:12px 28px!important;
    background:rgba(22,15,10,.86)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:0 14px 42px rgba(0,0,0,.42)!important;
  }

  .hero{
    padding-top:86px!important;
  }

  .navlinks{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }

  .navlinks a{
    padding:8px 22px!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
  }

  .navlinks a:hover{
    border-color:var(--line)!important;
    background:rgba(255,245,223,.08)!important;
  }
}


/* ==================================================
   25. SMALL MOBILE ADJUSTMENTS
   Up to 700px:
   - share bar becomes tighter
   - feedback form keeps breathing room
   ================================================== */

@media(max-width:700px){
  body{
    padding-bottom:60px!important;
  }

  .footer{
    padding-bottom:60px!important;
  }

  .share-box{
    bottom:10px!important;
    max-width:calc(100vw - 14px)!important;
    padding:8px!important;
  }

  .share-actions{
    gap:5px!important;
  }

  .share-actions .share-button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    font-size:.92rem!important;
  }

  .to-top-btn{
    right:12px;
    bottom:68px!important;
    font-size:.88rem;
    padding:11px 14px;
  }

  .to-top-btn.visible-mobile{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .annex .annex-card,
  .privacy-section .annex-card,
  .feedback-form{
    padding:22px!important;
  }

  .feedback-section .section-head{
    text-align:left!important;
  }
}


/* ==================================================
   26. VERY SMALL SCREENS
   Up to 390px:
   - prevents share buttons from crowding tiny phones.
   ================================================== */

@media(max-width:390px){
  .share-actions .share-button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    font-size:.86rem!important;
  }

  .share-actions{
    gap:4px!important;
  }
}