body {
  margin: 20px;
  height: 97vh;
  font-size: 1.4em;
  /* border: 1px solid aqua; */
}

h1 {
    border: 1px solid white;
    box-shadow: 0px 0px 8px 1px white inset;
    margin-bottom: 0px;
    font-size: 3.3vh;

}

p {
   margin: 0;
   padding: 0;
   font-size: 1.5em;
}

a {
    color: white;
    transition: transform 240ms ease;
    text-decoration: none;
   }

   

  a:hover {
      color: red;
      transform: scale(1.03);

    }


  a:visited {
      color: white;
    }


  #itty-flower {
      position: absolute;
      width: 75vw;
      top: -27vh;
      left: 7vw;
      opacity: .85;
      border: none;
      z-index: -1;
  }


  


  #main {
      position: relative;
  }

 .title {
    /* color: rgb(255, 69, 0); */
    text-align: right;
    padding-right: 100px;
    font-size: 5.5em;
    font-weight: normal;
    margin: 0 0 30px;
    /* border: 1px solid red; */
 }

#title-lessons {
    position: absolute;
    top: -2vh;
    left:50.3vw;
    font-size:8.7em;
    box-shadow: none;
    /* border: 1px solid orange; */
    border: none;
}

#in-the-area-ojai {
  font-size: .22em;
  /* border: 1px solid aqua; */
}

#ojai-area-of {
  /* border: 1px solid aqua; */
  font-size: .17em;
  position: relative;
  
}



#home {
    position:absolute;
    top: -4.7vh;
    left: 72.6vw;
    font-size:1.4em;
    /* border: 1px solid orange; */
}





#camera {
    top: 3vw;
    left: 7vw;
    /* border: 1px solid red; */
}

#tudor {
    top: 22vh;
    left: 67vw;
     /* border: 1px solid orange; */
}

#music {
    top: 48vh;
    left: 11vw;
    /* border: 1px solid yellow; */
}

#skool {
    top: 53vh;
    left: 74vw;
    /* border: 1px solid green; */
}

#rates {
    top: 76vh;
    left: 40vw;
     /* border: 1px solid blue */
}




.category-container {
    position: absolute;
    padding: 20px;
    text-align: center;
    /* border: 1px solid red; */
}

.lessons-links{
  display: inline-block;   /* ✅ makes padding/bg behave like a button */
  color:white;
  padding: 15px;
  /* border: 1px solid aqua; */
}
.lessons-links:hover{
  background-color: aqua;
  color: black;
}


.button-sequence {
  width: 20vw;
}

.button-sequence > a.lessons-links {
  display: block;
  width: 100%;
  padding: 15px; /* keep your padding here */
}

.zoom { transition: transform 1.4s; }
.zoom:hover { transform: scale(1.06); } /* slightly lower feels less jumpy */







#camera-lesson-link {
 /* border: 2px solid red; */
  opacity: 1;
}
#camera-lesson-link:hover {
  /* border: 1px solid red; */
  color: black;
}

#music-lesson-link {
  border: 1px solid green;
} 

#music-lessons-links:hover {
  background-color: aqua;
  color: black;
} 


#tudor-lesson-link {
  opacity: 1;
  /* color: red; */
  /* border: 1px solid blue; */

}
#tudor-lesson-link:hover {
  opacity: 1;
  /* background-color: aqua; */
}


#under-construction {
  position: absolute;
  top: 85vh;
  left: 2vw;
  border: none;
  padding: 5px;
  font-size: 2.2em;
  box-shadow: none;
}

#contact-container {
  position: fixed;
  top: 3vh;
  right: 7vw;
  z-index: 9999;
}

















/* Media */
/* Media */
/* Media */
/* Media */
/* Media */

/* =========================
   MasCasa/Lessons — PHONE
   ========================= */
@media (max-width: 600px) {

  /* Base */
  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    font-size: 1rem;
    background: #000;
    color: #fff;
  }

  /* Root main becomes a vertical layout */
 #main {
    position: static;
    padding: 18px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    min-height: 100vh;
  }

  /* NAV: put home at top-right, keep it out of the way */
  nav {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
  }

  #primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
  }

  #home {
    position: static;          /* kill your relative vh/vw positioning */
    font-size: 1.4rem;
  }

  /* Turn off absolute positioning for all flyer elements */
 .category-container,
  #title-lessons,
  #itty-flower,
  #camera,
  #tudor,
  #skool,
  #rates {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Title */
  #title-lessons {
    margin: 6px 0 2px;
    font-size: 3rem;           /* tweak to taste */
    line-height: 0.95;
    text-align: right;
    border: none;
    box-shadow: none;
  }

  /* Flower image becomes a centered hero graphic */
  #itty-flower {
    width: min(92vw, 440px);
    height: auto;
    margin: 0 auto 6px;
    display: block;
    opacity: 0.95;
    z-index: 0
  }

  /* Cards (the sections) */
  .categories {
    text-align: center;
    padding: 14px 12px 16px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    background: rgba(0,0,0,0.55);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
  }

  /* Section headings */
  .categories h1 {
    font-size: 1.25rem;
    margin: 0 0 10px;
    padding: 10px 10px;
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 0 10px 1px rgba(255,255,255,0.35) inset;
    background: #000;
  }

  /* Body text */
  .categories p {
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  /* Rates: make it stand out */
  #rates {
    border-color: rgba(255, 69, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 69, 0, 0.10) inset;
  }

  /* Disable hover zoom on touch devices */
  .zoom,
  .zoom-1-1 {
    transition: none !important;
    scale: 1 !important;
  }
}


/* Classes */
/* Classes */
/* Classes */
/* Classes */
/* Classes */




/* =========================
   MasCasa/Lessons — PRINT
   ========================= */

@media print {

  /* Tell browser what we want */
  @page {
    size: Letter;
    margin: 0.5in; /* safe margin for most printers */
  }

  /* Remove browser page styling quirks */
  html, body {
    background: #fff !important;
  }

  /* Hide nav/hamburger (printing doesn't need it) */
  .no-print,
  nav,
  .hamburger {
    display: none !important;
  }

  /* Make colors/black backgrounds actually print */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Turn main into a real page */
  #main {
    position: static;
    padding: 18px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    min-height: 100vh;
  }

  /* Stop vw/vh-based absolute layout for print */
  .category-container,
  #title-lessons,
  #itty-flower,
  #camera,
  #tudor,
  #skool,
  #rates {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Print layout: a clean flyer structure */
  .print-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.25in 0.25in;
    align-items: start;
  }

  /* Title across the top */
  #title-lessons {
    grid-column: 1 / -1;
    font-size: 44pt !important;
    margin: 0 0 0.1in 0 !important;
    line-height: 1;
    text-align: right;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #000 !important;
  }

  /* Flower image: keep it sharp + controlled */
  #itty-flower {
    grid-column: 1 / -1;
    width: 6.5in !important;
    max-width: 100%;
    height: auto !important;
    margin: -0.15in auto 0 auto;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  /* Cards: look like “flyer panels” */
  .categories {
    text-align: center;
    z-index: 1;
  }

  /* Put each block into grid nicely */
  #camera { grid-column: 1; }
  #tudor { grid-column: 2; }
  #construction { grid-column: 1; }
  #skool { grid-column: 2; }
  #rates { grid-column: 1 / -1; }

  /* Headings: print-friendly */
  h1 {
    font-size: 18pt !important;
    margin: 0 0 8pt 0 !important;
    border: 2pt solid #000 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
    padding: 8pt 10pt !important;
  }

  /* Body text: readable */
  p {
    font-size: 12pt !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25;
    color: #000 !important;
  }

  /* Kill hover zoom in print */
  .zoom,
  .zoom-1-1 {
    transition: none !important;
    transform: none !important;
    scale: 1 !important;
  }

  /* Optional: avoid splitting blocks across pages */
  .categories {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}