/*
 A Map to Nowhere — main CSS
*/
:root {
  /* Core brand from artwork */
  --ink:       #1e2531; /* text / icons on light */
  --paper:     #dfcdb1; /* paper backdrop from illustration */
  --navy:      #1e2531; /* deep night sky */
  --blue:      #323745; /* slate-blue */
  --purple:    #6e4aa8;
  --green:     #2f6c4e; /* forest/moss */
  --yellow:    #d6b85a; /* golden accent */
  --orange:    #865a34; /* clay/orange */
  --red:       #9d2a2a; /* rosehip */
  --brown:     #6b4f3a; /* bark */
  --slate:     #666e60; /* muted secondary text */

  /* UI tokens */
  --bg:        var(--paper);   /* page background */
  --card:      var(--paper);        /* surfaces/cards */
  --text:      var(--ink);     /* primary text */
  --muted:     var(--slate);   /* secondary text */
  --link:      var(--blue);    /* link color */
  --accent:    var(--green);   /* primary accent (buttons) */
  --radius:    1.25rem;
  --shadow:    0 10px 25px rgba(0,0,0,.08);
  --maxw:      72ch;
  --focus:     #1E88E5;        /* keep a high-contrast focus ring */
}

/* Optional dark mode tuned to artwork’s star field */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #10141b;       /* deep night */
    --card:     #141a20;
    --text:     #e8edf4;
    --muted:    #b8c0c6;
    --link:     #8bb9ff;       /* readable on dark */
    --shadow:   0 10px 25px rgba(0,0,0,.25);
  }
}
/*===========================  begin styles.css  ==========================
  Generated from src/styles/main.css
  Do not edit this file directly.
  Instead, edit the source file and recompile.
  ========================================================================*/
html, body {
  font-family: "Special Elite", Merriweather, Garamond, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 "Special Elite", Merriweather, Garamond, sans-serif;
  color: var(--text);
  background-color: var(--slate);
  background-image: url('../assets/Loowit2025_BG.jpg'); 
  background-size: cover; /* Makes the image cover the entire element */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center center; /* Centers the image */
  background-attachment: fixed; /* Keeps the image fixed when scrolling (optional) */
    }
/* Layout */
.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }
.stack > * + * { margin-top: var(--space, 1rem); }
.section { padding: 4rem 0; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 2vw, 2rem);
  opacity: 95%;
  text-align: justify;
}

/* Header / Nav */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width:auto; height:auto; background: var(--forest); color:#fff; padding:.5rem 1rem; border-radius:.5rem; z-index:999; }

.site-header { position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 50;background-color: var(--navy); opacity: 95%; }
.navbar {
  position: sticky; top:0; backdrop-filter: blur(6px); z-index: 1000; background-color: var(--card); opacity: 95%; display: flex; align-items: center; justify-content: space-between; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
  padding: .75rem 0; border-bottom: 2px solid rgba(0,0,0,.06);

}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
}

.nav-brand h1 {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: .3px;
}
.logo {
  width: 40px; height:40px; border-radius: 50%;
  background: conic-gradient(from 180deg at 50% 50%, var(--forest), var(--moss), var(--bark), var(--forest));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 10px rgba(0,0,0,.1);
}
.navlinks { display:flex; gap: clamp(.5rem, 2vw, 1rem); }
.navlinks a {
  text-decoration: none; color: inherit; padding: .4rem .7rem; border-radius: .6rem;
}
.navlinks a:focus, .navlinks a:hover { background: rgba(24,77,58,.12); outline: none; }

/* Hero */
.hero { display:grid; grid-template-columns: 1fr; gap: 1rem; align-items:center;}
.hero .title { font-size: clamp(1.8rem, 5vw, 3rem); line-height:1.2; margin:0 0 .5rem; }
.hero p { margin:0; color: var(--text); }
.badges { display:flex; flex-wrap: wrap; gap:.5rem; margin-top:1rem; }
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; color:#fff; background: var(--forest); border-radius: 999px; padding:.35rem .75rem;
}
.badge--alt { background: var(--bark); }

.cta-row { display:flex; flex-wrap: wrap; gap:.75rem; margin-top:1.25rem; align-items:center; justify-content: center; }
.button {
  appearance:none; border:none; cursor:pointer; text-decoration:none; font-weight:600;
  background: var(--forest); color:#fff; padding:.75rem 1rem; border-radius:.8rem;
  box-shadow: 0 6px 16px rgba(24,77,58,.25);
}
.button:hover, .button:focus { filter: brightness(1.07); outline: none; }
.button.secondary { background: transparent; color: var(--forest); border: 2px solid var(--forest); }

/* Sections */
.section h2 { font-size: clamp(1.3rem, 3.5vw, 2rem); margin: 0 0 1rem; }
.prose { max-width: var(--maxw); }
.prose p { margin: .6rem 0 1rem; }

.grid { display:grid; gap: 1rem; }
@media (min-width: 820px) { .grid.two { grid-template-columns: 1fr 1fr; } }

.embed { 
  aspect-ratio: 16/9; 
  background: #000; 
  border:0; width:100%; 
  border-radius: .8rem; 
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: .8rem; 
}


/* Lists */
.link-list { list-style: none; padding:0; margin:0; }
ul.link-list-subscribe { 
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;}
.link-list li + li { margin-top: .5rem; }
.link-list a { color: var(--link); text-decoration: none; }
.link-list a:hover, .link-list a:focus { text-decoration: underline; }

/* Contact form */
.form { display:grid; gap:.8rem; }
.input, .textarea {
  width:100%; padding:.75rem .9rem; border:1px solid rgba(0,0,0,.12); border-radius:.7rem; background: #fff0; color: inherit;
}
.textarea { min-height: 140px; resize: vertical; }
.input:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

.form .row { display:grid; gap:.8rem; }
@media (min-width: 720px) { .form .row { grid-template-columns: 1fr 1fr; } }
.helper { color: var(--muted); font-size: 1rem; }

/* Footer */
.footer { padding: 2rem 0; color: var(--muted); font-size: .95rem; }
.footer a { color: inherit; }

/* Utilities */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; }
.outline-card { border:1px solid rgba(0,0,0,.08); }

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/*===========================  end styles.css  ===========================
-->*/
/* =======================
   Mobile Navigation
   ======================= */

/* Hamburger toggle button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--radius);
}

.nav-toggle:focus,
.nav-toggle:hover {
  background: rgba(24, 77, 58, 0.12); /* matches your hover tone */
  outline: none;
}

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

  /* Navbar stacks on mobile */
  .navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Show the toggle button */
  .nav-toggle {
    display: block;
  }

  /* Hide navlinks until opened */
  .navlinks {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: .75rem;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  /* When active, show the menu */
  .navlinks.active {
    display: flex;
  }

  /* Mobile menu links look clean and full-width */
  .navlinks a {
    width: 100%;
    padding: .6rem .25rem;
    border-radius: .5rem;
  }

  .navlinks a:hover,
  .navlinks a:focus {
    background: rgba(24, 77, 58, 0.12);
  }
}