@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=EB+Garamond:ital@0;1&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }



/* ===== PAGE BACKGROUND — branded glow ===== */
body {
  background-color: #0d0308;
  background-image:
    radial-gradient(55% 45% at 18% 2%,   rgba(199, 21, 133, 0.28), transparent 70%),
    radial-gradient(50% 40% at 88% 12%,  rgba(227, 178, 76, 0.16), transparent 70%),
    radial-gradient(70% 55% at 50% 108%, rgba(122, 43, 94, 0.34), transparent 70%);
  background-attachment: fixed;
  margin: 0;
  padding: 24px 20px 100px;
}
.hero, section { scroll-margin-top: 20px; }

/* ===== TOP BAR: logo left, menu right, same line ===== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 80px;   /* was 30px — more space below the top bar */
}
.hero-logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.site-nav a {
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  line-height: 1;
  color: #F2A6CE;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: #FFD801;
  border-color: #F2A6CE;
}
/* on phones: stack logo above a centered menu */
@media (max-width: 600px) {
  .top-bar { flex-direction: column; gap: 14px; }
  .site-nav { justify-content: center; gap: 20px; }
}

/* ===== DIVIDER between sections ===== */
.divider {
  width: 130px;
  height: 1px;
  border: 0;
  margin: 80px auto;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.28), transparent);
}

/* ===== HERO ===== */
.hero {
  --title-color:    #C71585;
  --becoming-color: #FFD801;
  --poem-color:     #ffffff;
  --photo-dim:      0.75;
}
.title-block { text-align: center; }
.title-block h1 {
  font-family: 'Caveat', cursive;
  font-size: 5rem;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  color: var(--title-color);
}
.title-block .becoming {
  display: inline-block;
  color: var(--becoming-color);
  opacity: 0;
  animation: becoming-in 2.6s ease-out 0.6s forwards;
}
@keyframes becoming-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.poem-photo {
  position: relative;
  max-width: 640px;
  margin: 34px auto 0;
  padding: 60px 40px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #2a2a2a;
  background-image: url('https://codecraftworks.dev/web/06woprbS0a6R8uJLrVAm/assets/Picture.jpeg');
  background-size: cover;
  background-position: center;
  box-shadow:
    -60px 10px 130px 6px rgba(199, 21, 133, 0.48),
     60px 10px 130px 6px rgba(242, 196, 54, 0.42);
}
.poem-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--photo-dim)) 0%,
    rgba(0, 0, 0, var(--photo-dim)) 45%,
    rgba(0, 0, 0, 0) 95%
  );
}
.poem-photo .poem {
  position: relative;
  z-index: 1;
  color: var(--poem-color);
  text-align: left;
  max-width: 58%;
  font-family: 'EB Garamond', Georgia, serif;
  line-height: 1.9;
  font-size: 1.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.poem-photo .poem h2 {
  font-family: 'Caveat', cursive;
  font-size: 2.6rem;
  margin: 0 0 20px;
  font-weight: 700;
}
.poem-photo .poem p { margin: 0 0 18px; }
.poem-photo .poem p:last-child { margin-bottom: 0; }

/* tagline under the photo, in Caveat */
.tagline {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 2.3rem;
  color: #FFD801;
  margin: 24px auto 0;
  max-width: 640px;
}

/* ===== section headings ===== */
.values-heading, .assets-heading {
  font-family: 'Caveat', cursive;
  font-size: 3.2rem;
  text-align: center;
  color: #FFFFFF;
  margin: 0 0 40px;
}

/* ===== VALUES — row ===== */
.values-section {
  --step-front-bg:   #7A2B5E;
  --step-back-bg:    #241019;
  --step-title:      #FBF7F2;
  --step-num:        #E0A9C9;
  --step-front-text: #F3E8EF;
  --step-back-text:  #F3E8EF;
  --step-accent:     #C71585;
  --step-photo:      #4a2038;
}
.staircase {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.step-card {
  position: relative;
  display: block;
  width: 200px;
  height: 300px;
  flex: 0 0 auto;
  perspective: 1000px;
  cursor: pointer;
}
.step-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.step-card-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}
.step-toggle:checked ~ .step-card-inner { transform: rotateY(180deg); }
.step-toggle:focus-visible ~ .step-card-inner {
  outline: 3px solid var(--step-accent);
  outline-offset: 4px;
  border-radius: 16px;
}
.step-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  border: 2px solid var(--step-accent);
}
.step-front { background: var(--step-front-bg); }
.step-photo {
  display: block;
  height: 150px;
  background-color: var(--step-photo);
  background-size: cover;
  background-position: center;
}
.step-front-body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; }
.step-num { font-family: 'EB Garamond', Georgia, serif; font-size: 0.95rem; letter-spacing: 0.15em; color: var(--step-num); }
.step-title { font-family: 'Caveat', cursive; font-size: 1.9rem; line-height: 1.1; color: var(--step-title); margin: 4px 0 0; }
.step-hint { margin-top: auto; font-family: 'EB Garamond', Georgia, serif; font-size: 0.8rem; font-style: italic; color: var(--step-front-text); opacity: 0.75; }
.step-back { background: var(--step-back-bg); transform: rotateY(180deg); padding: 22px 20px; justify-content: center; }
.step-back .step-back-text { font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; line-height: 1.6; color: var(--step-back-text); margin: 0; }
@media (max-width: 900px) {
  .staircase { flex-direction: column; align-items: center; }
  .step-card { width: 260px; }
}

/* ===== ASSETS (suns) ===== */
.assets-section {
  --sun-face-bg:    #E3B24C;
  --sun-ray:        #E3B24C;
  --sun-title:      #FBF7F2;
  --sun-back-bg:    #2E1526;
  --sun-back-title: #F6D98B;
  --sun-back-text:  #F0E6DE;
  --sun-accent:     #C71585;
}
.constellation { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; max-width: 1400px; margin: 0 auto; }
.sun-card { position: relative; display: block; width: 360px; height: 360px; flex: 0 0 auto; perspective: 1200px; cursor: pointer; }
.sun-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sun-rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--sun-ray) 0deg 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 58%, transparent 82%);
  mask: radial-gradient(circle, #000 58%, transparent 82%);
  z-index: 0;
}
.sun-inner {
  position: absolute; top: 50%; left: 50%; width: 288px; height: 288px;
  transform: translate(-50%, -50%); transform-style: preserve-3d; transition: transform 0.7s; z-index: 1;
}
.sun-toggle:checked ~ .sun-inner { transform: translate(-50%, -50%) rotateY(180deg); }
.sun-toggle:focus-visible ~ .sun-inner .sun-face { box-shadow: 0 0 0 4px var(--sun-accent), 0 10px 24px rgba(0, 0, 0, 0.3); }
.sun-face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 30px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.sun-front { background-color: var(--sun-face-bg); background-size: cover; background-position: center; }
.sun-title { font-family: 'Caveat', cursive; font-size: 2.3rem; line-height: 1.05; color: var(--sun-title); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75); }
.sun-back { background: var(--sun-back-bg); transform: rotateY(180deg); }
.sun-back .sun-back-title { font-family: 'Caveat', cursive; font-size: 1.9rem; line-height: 1.05; color: var(--sun-back-title); margin: 0 0 8px; }
.sun-back .sun-back-text { font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; line-height: 1.5; color: var(--sun-back-text); margin: 0; }

/* ================= STORY GALLERY (replaces mountains) ================= */
/* Clean / polished — no borders. Fonts: Fraunces (title) + Nunito Sans (captions). */
/* Transparent bg so the page's branded glow shows through (no dark seam). */

.gallery{
  padding: clamp(2rem, 6vw, 4rem) 1rem;    /* SPACING: top-bottom / sides */
  background: transparent;                 /* lets body glow show through */
}

.gallery-title{
  font-family: 'Caveat', cursive;   /* FONT — matches Values/Assets */
  font-size: 3.2rem;                /* SIZE — matches Values/Assets */
  text-align: center;
  color: #FFFFFF;                   /* COLOR — matches Values/Assets */
  margin: 0 0 40px;                 /* SPACING below — matches Values/Assets */
}

/* container caps how wide the strip gets on big screens */
.comic-page{
  max-width: 1100px;                        /* SIZE max strip width */
  margin: 0 auto;
}

/* the strip — flex-wrap = responsive, NO media query needed */
.comic-strip{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);             /* SPACING between panels */
}

/* one panel/card — shared FRAME styling (not an image, safe to share) */
.gallery-card{
  position: relative;                       /* anchors the number badge */
  flex: 1 1 260px;                          /* SIZE: grow/shrink, ideal 260px */
  max-width: 340px;                         /* SIZE cap per card */
  margin: 0;
  background: #1c0d16;                      /* COLOR card bg (lighter plum) */
  border-radius: 14px;                      /* SIZE corner round */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);  /* soft depth */
}

/* number badge — decorative (aria-hidden) */
.panel-num{
  position: absolute;
  top: 0.6rem; left: 0.6rem;                /* POSITION */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;                /* SIZE badge */
  background: #FFD801;                      /* COLOR gold */
  color: #0d0308;                           /* COLOR dark number */
  font-family: "Fraunces", serif;
  font-weight: 700;
  border-radius: 50%;
}

/* caption — shared TEXT styling (not an image, safe to share) */
.panel-caption{
  font-family: 'EB Garamond', Georgia, serif;   /* FONT */
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);      /* SIZE — bumped up from 0.95–1.05 */
  line-height: 1.5;                              /* SPACING */
  color: #FBF7F2;                                /* COLOR off-white */
  padding: 1rem 1.1rem 1.2rem;                   /* SPACING inside card */
  margin: 0;
}
/* ---- IMAGES: each panel has its OWN class. Edit any one freely — */
/*      changing one will NOT affect the others. Values start identical. ---- */
.gallery-photo-1{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-2{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-3{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-4{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-5{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-6{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */
.gallery-photo-7{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } /* SIZE */

/* ===== PURPOSE (comic bubble) ===== */
.purpose-section {
  margin: 0 auto 40px;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  --bubble-bg:     #FFF;
  --bubble-border: #C71585;
  --bubble-title:  #C71585;
  --bubble-text:   #000;
}
.comic-bubble {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--bubble-bg);
  border: 4px solid var(--bubble-border);
  border-radius: 34px;
  padding: 34px 44px 40px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}
.bubble-title { font-family: 'Caveat', cursive; font-size: 2.8rem; line-height: 1.05; color: var(--bubble-title); margin: 0 0 10px; }
.bubble-text { font-family: 'EB Garamond', Georgia, serif; font-size: 1.3rem; line-height: 1.55; color: var(--bubble-text); margin: 0; }
.bubble-tail {
  position: absolute; bottom: -28px; left: 64px; width: 0; height: 0;
  border-left: 26px solid transparent; border-right: 26px solid transparent; border-top: 30px solid var(--bubble-border);
}
.bubble-tail::before {
  content: ""; position: absolute; left: -19px; bottom: 6px; width: 0; height: 0;
  border-left: 19px solid transparent; border-right: 19px solid transparent; border-top: 23px solid var(--bubble-bg);
}

/* respect visitors who turn off animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .title-block .becoming { animation: none; opacity: 1; }
  .step-card-inner, .sun-inner { transition: none; }
}

/* ===== image conversion: makes card photos real <img> tags ===== */
.step-photo { display: block; width: 100%; height: 150px; object-fit: cover; background: none; }

.sun-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); z-index: 0; }
.sun-img[src=""], .sun-img:not([src]) { display: none; }
.sun-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: 'Caveat', cursive;
  font-size: 2.3rem;
  line-height: 1.05;
  color: #FBF7F2;
  background: rgba(30, 12, 20, 0.6);
  border-radius: 50%;
}
.sun-back .sun-back-title, .sun-back .sun-back-text { position: relative; z-index: 1; }

.poem-photo { background-image: none; }
.poem-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: 0; }
.poem-photo::before { z-index: 1; }
.poem-photo .poem { z-index: 2; }

/* ===== MINDSET SECTIONS ===== */

/* Life in Shambles Text */
.mindset-section {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.mindset-heading {
  font-family: 'Caveat', cursive;
  font-size: 3.2rem;
  color: #FFFFFF;
  margin: 0 0 18px;
}
/* "Life in Shambles" image — Let Go section */
.shambles-img {
  display: block;
  width: 800px;              /* SIZE of THIS image — change just this */
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 12px;
  box-shadow: -40px 8px 90px rgba(199, 21, 133, 0.4), 40px 8px 90px rgba(242, 196, 54, 0.35);
}

/* "I'm thriving" image — Embrace section */
.thriving-img {
  display: block;
  width: 500px;              /* SIZE of THIS image — change just this */
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 12px;
  box-shadow: -40px 8px 90px rgba(199, 21, 133, 0.4), 40px 8px 90px rgba(242, 196, 54, 0.35);
}
.mindset-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: #FFFFFF;
  margin: 0 0 8px;  
}

/* 3 things I'm letting go of header */

.mindset-subhead {
  font-family: 'Caveat', cursive;
  font-size: 3.0rem;
  color: #FFD801;
  margin: 34px 0 16px;
}

/* ===== cute yellow notepad list ===== */
.looking-forward {
  list-style: none;
  margin: 0 auto;
  max-width: 360px;                 /* keep the original width */
  padding: 26px 30px 30px 58px;     /* keep the original padding */
  background-color: #FFF59D;
  background-image:
    repeating-linear-gradient(transparent, transparent 37px, #E4D77E 37px, #E4D77E 38px),
    linear-gradient(90deg, transparent 46px, #F3A9BC 46px, #F3A9BC 48px, transparent 48px);
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  text-align: left;
  position: relative;

  transform: rotate(-8deg) scale(1.25);   /* ← SIZE: scale bigger/smaller, keeps proportions + tilt */
}
.looking-forward li {
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  color: #4a3b1e;
  line-height: 38px;
  position: relative;
  padding-left: 6px;
}
.looking-forward li::before {
  content: "\2665";        /* heart */
  color: #E8547C;
  position: absolute;
  left: -30px;
  top: 1px;
  font-size: 1.25rem;
}

/* ===== HABITS FOR LAUNCH ===== */
.launch-section {
  max-width: 960px;
  margin: 6vw auto;      /* external margin — vw */
  padding: 2vw 5%;       /* internal padding — vw + % */
  text-align: center;
}
.launch-rocket {
  display: block;
  width: 100%;
  max-width: 900px;   /* SIZE — change this to make it bigger/smaller */
  height: auto;
  margin: 0 auto 2vw; 
}

.launch-heading {
  font-family: 'Caveat', cursive;
  font-size: 3.4rem;
  color: #FFD801;         /* was gold */
  margin: 0 0 6px;
  text-align: center;
}

.launch-intro {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: #F3E8EF;
  margin: 0 0 24px;
}

.habits-list {
  list-style: none;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
.habits-list li {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: #FBF7F2;
  line-height: 1.5;
  padding: 12px 0 12px 40px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.habits-list li::before {
  content: "\2605";      /* gold star bullet */
  color: #FFD801;         /* was gold — now matches the heading */
  position: absolute;
  left: 8px;
  top: 12px;
  font-size: 1.2rem;
}

.skip-link {
  position: absolute;
  left: -9999px;      /* this pushes it off-screen so it's hidden */
  top: 0;
  background: #C71585;
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;   /* it slides into view only when tabbed to */
}

.sun-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: rgba(30, 12, 20, 0.6);
  color: #FBF7F2 !important;
  border-radius: 50%;
}

/* ===== PANEL — box model boxes for each YNC section ===== */
.panel {
  border: 3px solid #C71585;   /* visible pink border */
  border-radius: 20px;
  padding: 40px 30px;          /* INTERNAL space */
  margin: 50px auto;           /* EXTERNAL space */
  max-width: 1250px;
}

.site-footer {
  text-align: center;
  color: #B7A7AE;                 /* light gray so it shows on dark */
  font-family: 'EB Garamond', Georgia, serif;
  padding: 100px 0;
}

/* ===== MOBILE RESPONSIVE — only applies on phones (≤600px) ===== */
@media (max-width: 600px) {

  /* title shrinks and wraps instead of running off screen */
  .title-block h1 {
    font-size: 2.6rem;
    white-space: normal;
  }

  /* suns fit the screen */
  .sun-card { width: 280px; height: 280px; }
  .sun-inner { width: 224px; height: 224px; }

  /* images fit the screen width */
  .shambles-img,
  .thriving-img,
  .launch-rocket { width: 100%; }

  /* notepad doesn't spill off the side */
  .looking-forward { transform: rotate(-8deg) scale(1.05); }

  /* poem text uses full width */
  .poem-photo .poem { max-width: 100%; }
}