/* ===========================
   Google Fonts (fallbacks)
   =========================== */
   @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@300;400;600&family=Roboto:wght@300;400;500&display=swap');

   /* ===========================
      Custom Fonts (preferred)
      =========================== */
   @font-face {
     font-family: 'La Luxes Script';
     src: url('assets/fonts/la-luxes-script.woff2') format('woff2');
     font-weight: 300;   /* force thin feel */
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'La Luxes Serif';
     src: url('assets/fonts/la-luxes-serif.woff2') format('woff2');
     font-weight: 300;   /* thin */
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'TT Norms';
     src: url('assets/fonts/tt-norms.woff2') format('woff2');
     font-weight: 300;   /* thin body */
     font-style: normal;
     font-display: swap;
   }
   
   /* ===========================
      Reset & Base
      =========================== */
   * { margin: 0; padding: 0; box-sizing: border-box; }
   
   html, body {
     height: 100%;
     font-family: 'TT Norms', 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
   
     /* Smoothing for crisper edges */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     font-smooth: always;
   }
   
   body {
     background: url('assets/background.jpg') no-repeat center center / cover;
     position: relative;
   }
   
   /* Optional: subtle dark overlay to improve contrast on text */
   .overlay {
     background: rgba(0, 0, 0, 0.30);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 2rem;
   }
   
   /* ===========================
      Logo
      =========================== */
   .logo {
     width: 100px;
     margin-bottom: 2rem;
   }
   
   /* ===========================
      Typography
      =========================== */
   /* Global reset: no outlines; micro-shadow to cancel halo on textured bg */
   .subtitle, .main-title, .description {
     -webkit-text-stroke: 0 !important;
     text-stroke: 0 !important;
     text-shadow: 0 0 0.5px rgba(0,0,0,0.22);
     color: #fff;
   }
   
   /* Script line: thin, airy, close to the serif below */
   .subtitle {
     font-family: 'La Luxes Script', 'Great Vibes', cursive;
     font-weight: 300;              /* enforce thin */
     font-size: 3rem;
     line-height: 1.02;             /* very tight vertical rhythm */
     letter-spacing: 0.2px;         /* tiny tracking for elegance */
     margin-bottom: 0.15rem;        /* bring closer to the main title */
   }
   
   /* Main headline: thin serif, wide, uppercase */
   .main-title {
     font-family: 'La Luxes Serif', 'Playfair Display', serif;
     font-weight: 300;              /* thin */
     font-size: 3rem;               /* base mobile size */
     line-height: 0.98;             /* tight */
     text-transform: uppercase;
     letter-spacing: 0.8px;         /* refined spacing */
     margin-top: 0;
     margin-bottom: 0.9rem;         /* gap before description */
   }
   
   /* Tagline */
   .description {
     font-family: 'TT Norms', 'Roboto', sans-serif;
     font-weight: 300;              /* thin */
     font-size: 1.1rem;
     letter-spacing: 1px;
     line-height: 1.35;
   }
   
   /* ===========================
      Responsive (tablet/desktop)
      =========================== */
   @media (min-width: 768px) {
     .logo       { width: 140px; margin-bottom: 1.35rem; }
     .subtitle   { font-size: 4rem;  margin-bottom: 0.2rem; }
     .main-title { font-size: 4rem;  letter-spacing: 1px; margin-bottom: 1.1rem; }
     .description{ font-size: 1.5rem; }
   }
   
   /* Very large displays */
   @media (min-width: 1280px) {
     .subtitle   { font-size: 4.4rem; }
     .main-title { font-size: 4.5rem; }
   }
   
   /* ===========================
      Mobile-specific adjustment
      =========================== */
   @media (max-width: 767px) {
     .main-title {
       font-size: 2.2rem;      /* smaller so it fits in one line */
       white-space: nowrap;    /* prevent wrapping */
       letter-spacing: 0.5px;  /* tighter tracking for balance */
     }
   }