:root {
  --blue: #0757B3;
  --red: #D6342A;      /* brightened red for better harmony */
  --navy: #0A3570;     /* deeper anchor blue */
  --white: #FFFFFF;
  --light-bg: #FAFBFD;
  --ink: #1B1B1B;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --radius: 18px;
}

    *{box-sizing:border-box}
    html,body{margin:0;background:var(--light-bg);color:var(--ink);font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(1200px,92%);margin-inline:auto}
    /* Header */
    .nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:4px solid var(--red)}
    .nav__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
    .brand{display:flex;align-items:center;gap:10px}
    .brand__logo{
      width:55px;
      height:44px;
      background-image:url("images/StarLogo_NoText.png");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    .brand__name{font-family:Fredoka,sans-serif;font-weight:800;font-size:1.25rem;color:var(--navy)}
    .menu{display:flex;gap:18px;align-items:center}
    .menu a{padding:10px 14px;border-radius:999px;font-weight:700;color:var(--navy)}
    .menu a:hover{background:rgba(42,92,171,0.1)}
    .cta{
      background:var(--red);
      color:#fff !important;
      border: 2px solid var(--red);
    } 

    /* Force navy text on hover for the Shop on Etsy button */
    .menu a.cta:hover {
      filter:brightness(.9);
      color: var(--navy) !important;
      background: var(--white) !important;
      border: 2px solid var(--navy);
    }


    /* Hero */
    .hero{isolation:isolate;position:relative;overflow:hidden}
    .hero__bg{
      position:absolute;inset:0;
      background:
        radial-gradient(1000px 400px at -10% 0%, rgba(42,92,171,.25), transparent 70%),
        radial-gradient(1000px 420px at 110% -10%, rgba(200,51,45,.20), transparent 70%),
        linear-gradient(#f5f8ff,#ffffff);
      z-index:-1;
    }
    .hero__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;padding:48px 0}
    .badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px dashed var(--blue);
      padding:8px 14px;border-radius:999px;font-weight:800;color:#333}
    .h1{font-family:Fredoka,sans-serif;color:var(--navy);font-weight:800;font-size:clamp(2rem,6vw,3.25rem);margin:.25em 0 .35em}
    .lead{font-size:1.125rem;line-height:1.55;color:#333;max-width:50ch}
    .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;font-weight:800;box-shadow:var(--shadow)}
    .btn--blue{background:var(--blue);color:#fff}
    .btn--red{background:var(--red);color:#fff}
    .btn--outline{border:3px solid var(--navy);background:#fff;color:var(--navy)}
    .hero__cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
    .card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;border:2px solid rgba(15,45,99,0.1);text-decoration: none;transition: transform 0.15s ease;}
    .card h3{font-family:Fredoka,sans-serif;color:var(--navy);margin:.25em 0}
    .card:hover{transform:scale(1.02);cursor:pointer}
    
    /* Sections */
    .section{padding:56px 0}
    .title{font-family:Fredoka,sans-serif;font-size:clamp(1.6rem,3.3vw,2.2rem);margin:0 0 14px;color:var(--navy)}
    .subtitle{color:#444;margin:0 0 26px}
    .grid{display:grid;gap:22px}
    .grid--3{grid-template-columns:repeat(3,1fr)}
    .grid--2{grid-template-columns:repeat(2,1fr)}
    .book{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border:2px solid rgba(42,92,171,0.1)}
    .book__body{padding:14px 16px}
    .book__title{font-family:Fredoka,sans-serif;font-size:1.25rem;margin:.2em 0;color:var(--navy)}
    .book__desc{margin:0 0 10px;color:#333}
    .pill{display:inline-flex;background:#f5f8ff;border:2px solid var(--blue);color:var(--blue);border-radius:999px;padding:6px 10px;font-weight:800}
    /* Etsy */
    .etsy__item{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:2px solid rgba(42,92,171,0.08)}
    .etsy__cap{padding:12px}
    /* IG */
    .ig{background:linear-gradient(135deg,#fdfbfb 0%, #ebedee 100%)}
    .ig__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
    .ig__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .ig__gallery img {
  border-radius: 14px;
  aspect-ratio: 8.5 / 11; /* portrait / letter format */
  object-fit: contain; /* show full image with white space instead of cropping */
  border: 2px solid rgba(42,92,171,0.1);
  background: #fff; /* optional – gives a clean white frame if image doesn’t fill area */
}
    /* About */
    .about{background:linear-gradient(180deg,#fff 0%, #f7f9fd 100%)}
    .about__box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:2px solid rgba(42,92,171,0.08)}
    /* Footer */
    footer{padding:28px 0;background:var(--navy);color:#e9f7fb;border-top:5px solid var(--red)}
    footer a{color:#e9f7fb}
    .foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
    .foot__links{display:flex;gap:16px;flex-wrap:wrap}
    /* Responsive */
    @media (max-width: 960px){
      .hero__wrap{grid-template-columns:1fr}
      .hero__cards{grid-template-columns:1fr 1fr}
      .grid--3{grid-template-columns:1fr 1fr}
      .ig__wrap{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      .grid--3,.grid--2,.hero__cards{grid-template-columns:1fr}
    }

    /* Anchor offset so sticky header doesn't cover section titles */
:root {
  --header-h: 60px; /* adjust if your header height changes */
}

.section,
.hero {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Optional: smooth scrolling for nicer feel */
html {
  scroll-behavior: smooth;
}

/* Fallback for older browsers (in case scroll-margin-top isn't applied) */
section[id]::before {
  content: "";
  display: block;
  height: var(--header-h);
  margin-top: calc(-1 * var(--header-h));
  visibility: hidden;
}

/* Hide hero cards on tablets and phones */
@media (max-width: 960px) {
  .hero__cards {
    display: none;
  }
}

/* ----------- Mobile navigation layout fix ----------- */
@media (max-width: 640px) {
  .nav__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0;
  }

  /* Brand (logo + text) stays on one line */
  .brand {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .brand__logo {
    flex-shrink: 0;
    width: 48px;
    height: 38px;
  }

  .brand__name {
    font-size: 1.1rem;
    white-space: nowrap;
  }

  /* Make nav links wrap into multiple rows */
  .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: flex-start;
    width: 100%;
  }

  /* Each link takes just enough space */
  .menu a {
    font-size: 0.95rem;
    padding: 8px 12px;
  }

  /* Shop on Etsy on its own line */
  .menu a.cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .nav { border-bottom-width: 3px; }
  .brand__logo { margin-left: 4px; }
}