/* ==========================================================
   Mimi&Charm - Common Stylesheet
   ========================================================== */
:root{
  --cream: #FFFBF3;
  --pink-soft: #FFE4EE;
  --pink-mid: #FFC3D8;
  --pink-deep: #FF8FAE;
  --blue-soft: #E1F4FB;
  --blue-mid: #BFE9F7;
  --blue-deep: #7FC8E8;
  --text-main: #5B4A4F;
  --text-light: #9C8A8E;
  --white: #FFFFFF;
  --shadow: 0 8px 24px rgba(91,74,79,0.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Zen Maru Gothic', sans-serif;
  color:var(--text-main);
  background:var(--cream);
  line-height:1.8;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
.font-hand{font-family:'Yomogi', cursive;}

/* ===== TOP page full-page background photo ===== */
body.page-top{position:relative;}
body.page-top::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('../assets/top-bg.png') center 22% / cover no-repeat;
  z-index:-2;
}
body.page-top::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,251,243,0.72);
  z-index:-1;
}

/* ===== ABOUT page full-page background photo ===== */
body.page-about{position:relative;}
body.page-about::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('../assets/story-bg.png') center 20% / cover no-repeat;
  z-index:-2;
}
body.page-about::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,251,243,0.75);
  z-index:-1;
}

/* ===== Header / Nav (common) ===== */
header{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:rgba(255,251,243,0.9);
  backdrop-filter:blur(8px);
  padding:16px 24px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px dashed var(--pink-mid);
}
.logo{
  font-family:'Yomogi', cursive;
  font-size:1.6rem;
  color:var(--pink-deep);
  letter-spacing:0.03em;
}
nav ul{display:flex;gap:28px;}
nav a{
  font-size:0.92rem;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
}
nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0;height:2px;
  background:var(--blue-deep);
  transition:width 0.25s ease;
}
nav a:hover::after, nav a:focus-visible::after, nav a.current::after{width:100%;}
nav a.current{color:var(--pink-deep);}
nav a:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px;border-radius:2px;}

/* ===== Page header (for sub pages) ===== */
.page-hero{
  min-height:46vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:150px 20px 60px;
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, var(--pink-soft) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, var(--blue-soft) 0%, transparent 45%);
}
body.page-about .page-hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,228,238,0.5) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(225,244,251,0.5) 0%, transparent 45%);
}
.page-hero .hero-eyebrow{
  font-size:0.85rem;letter-spacing:0.25em;color:var(--pink-deep);
  margin-bottom:14px;font-weight:700;
}
.page-hero h1{
  font-family:'Yomogi', cursive;
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  margin-bottom:16px;
}
.page-hero p{color:var(--text-light);max-width:480px;margin:0 auto;}

/* ===== Home Hero (top page only) ===== */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 20px 80px;
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,228,238,0.6) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(225,244,251,0.6) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,228,238,0.6) 0%, transparent 50%);
}
.hero-eyebrow{font-size:0.85rem;letter-spacing:0.25em;color:var(--pink-deep);margin-bottom:18px;font-weight:700;}
.hero h1{font-family:'Yomogi', cursive;font-size:clamp(2.6rem, 8vw, 5.2rem);line-height:1.15;margin-bottom:20px;}
.hero h1 .amp{color:var(--pink-deep);}
.hero p{font-size:1.05rem;color:var(--text-light);max-width:420px;margin:0 auto 36px;}
.scroll-hint{margin-top:50px;font-size:0.8rem;color:var(--text-light);display:flex;flex-direction:column;align-items:center;gap:6px;}
.scroll-hint span{width:1px;height:34px;background:var(--pink-mid);animation:scrollMove 1.8s ease-in-out infinite;}
@keyframes scrollMove{0%,100%{transform:scaleY(1);opacity:0.5;}50%{transform:scaleY(1.3);opacity:1;}}

/* ===== Scallop divider ===== */
.scallop{width:100%;height:28px;background-repeat:repeat-x;background-size:36px 28px;}
.scallop-pink{background-image: radial-gradient(circle at 18px 0, var(--pink-soft) 16px, transparent 17px);}
.scallop-blue{background-image: radial-gradient(circle at 18px 28px, var(--blue-soft) 16px, transparent 17px);}

/* ===== Section common ===== */
section{padding:90px 24px;}
.section-inner{max-width:1080px;margin:0 auto;}
.ribbon-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Yomogi', cursive;font-size:1.1rem;color:var(--pink-deep);
  background:var(--white);padding:6px 22px;border-radius:999px;
  box-shadow:var(--shadow);margin-bottom:22px;
}
.section-title{font-family:'Yomogi', cursive;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px;}
.section-lead{color:var(--text-light);max-width:540px;margin-bottom:48px;}
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;border-radius:999px;font-weight:700;font-size:0.92rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  cursor:pointer;border:none;font-family:'Zen Maru Gothic',sans-serif;
}
.btn-primary{background:var(--pink-deep);color:var(--white);box-shadow:0 6px 16px rgba(255,143,174,0.4);}
.btn-primary:hover, .btn-primary:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,143,174,0.5);}
.btn-outline{background:transparent;border:2px solid var(--blue-deep);color:var(--text-main);}
.btn-outline:hover, .btn-outline:focus-visible{background:var(--blue-deep);color:var(--white);}
.btn:focus-visible{outline:3px solid var(--text-main);outline-offset:3px;}

/* ===== About ===== */
.about{background:rgba(255,228,238,0.55);}
body.page-about .about{background:transparent;}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;}
.about-photo{
  aspect-ratio:4/5;border-radius:20px;
  background:linear-gradient(155deg, var(--blue-mid), var(--white) 60%);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  color:var(--text-light);font-size:0.85rem;border:3px solid var(--white);
}
.about-text p{margin-bottom:18px;color:var(--text-main);}

/* ===== Works grid (shared: top preview + works page) ===== */
.works{background:var(--cream);}
body.page-top .works{background:rgba(255,251,243,0.55);}
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:48px;}
.polaroid{background:var(--white);padding:12px 12px 22px;border-radius:6px;box-shadow:var(--shadow);transition:transform 0.25s ease;}
.polaroid:nth-child(odd){transform:rotate(-3deg);}
.polaroid:nth-child(even){transform:rotate(3deg);}
.polaroid:hover, .polaroid:focus-within{transform:scale(1.05) rotate(0deg);}
.polaroid-img{aspect-ratio:1/1;border-radius:2px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--text-light);}
.polaroid-img.c1{background:linear-gradient(160deg,var(--pink-soft),var(--pink-mid));}
.polaroid-img.c2{background:linear-gradient(160deg,var(--blue-soft),var(--blue-mid));}
.polaroid-img.c3{background:linear-gradient(160deg,var(--pink-mid),var(--blue-soft));}
.polaroid-img.c4{background:linear-gradient(160deg,var(--blue-mid),var(--pink-soft));}
.polaroid-caption{font-family:'Yomogi',cursive;font-size:0.95rem;color:var(--text-main);}
.polaroid-tag{font-size:0.72rem;color:var(--text-light);margin-top:2px;}

/* ===== Works filter (works.html) ===== */
.filter-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;}
.filter-btn{
  padding:9px 22px;border-radius:999px;font-size:0.85rem;font-weight:700;
  background:var(--white);color:var(--text-light);box-shadow:var(--shadow);
  border:2px solid transparent;cursor:pointer;font-family:'Zen Maru Gothic',sans-serif;
  transition:all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover, .filter-btn:focus-visible{
  background:var(--pink-deep);color:var(--white);
}
.filter-btn:focus-visible{outline:3px solid var(--text-main);outline-offset:2px;}

/* ===== Events ===== */
.events{background:var(--blue-soft);}
body.page-top .events{background:rgba(225,244,251,0.55);}
.event-card{
  background:var(--white);border-radius:18px;box-shadow:var(--shadow);
  padding:32px 36px;display:flex;gap:28px;align-items:center;
  max-width:680px;margin:0 auto 24px;
}
.event-card.is-past{opacity:0.7;}
.event-date{
  font-family:'Yomogi',cursive;font-size:1.4rem;color:var(--blue-deep);
  background:var(--blue-soft);padding:14px 18px;border-radius:14px;
  text-align:center;min-width:90px;flex-shrink:0;
}
.event-date.past{color:var(--text-light);background:var(--pink-soft);}
.event-date small{display:block;font-size:0.7rem;color:var(--text-light);font-family:'Zen Maru Gothic',sans-serif;}
.event-info h3{font-family:'Yomogi',cursive;font-size:1.2rem;margin-bottom:6px;}
.event-info p{font-size:0.9rem;color:var(--text-light);}
.event-info .event-tag{
  display:inline-block;font-size:0.7rem;color:var(--pink-deep);background:var(--pink-soft);
  padding:3px 12px;border-radius:999px;margin-bottom:8px;font-weight:700;
}
.subsection-title{font-family:'Yomogi',cursive;font-size:1.4rem;margin:56px 0 24px;text-align:center;}

/* ===== Links (Instagram / Shop) ===== */
.links{background:var(--cream);}
body.page-top .links{background:rgba(255,251,243,0.55);}
.link-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.link-card{background:var(--white);border-radius:18px;box-shadow:var(--shadow);padding:28px 34px;width:240px;transition:transform 0.2s ease;}
.link-card:hover, .link-card:focus-visible{transform:translateY(-4px);}
.link-card .icon{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Yomogi',cursive;font-size:1.3rem;color:var(--white);}
.icon-ig{background:linear-gradient(135deg, var(--pink-deep), var(--blue-deep));}
.icon-shop{background:var(--blue-deep);}
.link-card h4{font-family:'Yomogi',cursive;font-size:1.1rem;margin-bottom:6px;}
.link-card p{font-size:0.82rem;color:var(--text-light);}

/* ===== About page extras ===== */
.story{background:rgba(255,251,243,0.55);}
.story-inner{max-width:720px;margin:0 auto;}
.story p{margin-bottom:20px;color:var(--text-main);}
.quote{
  font-family:'Yomogi',cursive;font-size:1.4rem;color:var(--pink-deep);
  text-align:center;padding:36px 20px;margin:8px 0;position:relative;
}
.timeline{background:var(--blue-soft);}
body.page-about .timeline{background:rgba(225,244,251,0.55);}
.timeline-list{max-width:640px;margin:0 auto;}
.timeline-item{
  display:flex;gap:24px;padding:20px 0;border-bottom:1px dashed var(--blue-deep);
}
.timeline-item:last-child{border-bottom:none;}
.timeline-year{font-family:'Yomogi',cursive;font-size:1.15rem;color:var(--blue-deep);min-width:80px;}
.timeline-text{color:var(--text-main);}
.materials{background:var(--pink-soft);}
body.page-about .materials{background:rgba(255,228,238,0.55);}
.materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.material-card{background:var(--white);border-radius:16px;padding:28px 24px;box-shadow:var(--shadow);text-align:center;}
.material-card .emoji{font-size:1.8rem;margin-bottom:10px;}
.material-card h4{font-family:'Yomogi',cursive;font-size:1.05rem;margin-bottom:8px;}
.material-card p{font-size:0.85rem;color:var(--text-light);}

/* ===== Contact page ===== */
.contact-section{background:var(--pink-soft);}
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;max-width:960px;margin:0 auto;}
.contact-info{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:36px 32px;}
.contact-info h3{font-family:'Yomogi',cursive;font-size:1.3rem;margin-bottom:16px;}
.contact-info p{font-size:0.9rem;color:var(--text-light);margin-bottom:20px;}
.contact-info .mini-links a{
  display:flex;align-items:center;gap:10px;font-size:0.88rem;color:var(--text-main);padding:10px 0;border-top:1px dashed var(--pink-mid);
}
.contact-form{background:var(--white);border-radius:20px;box-shadow:var(--shadow);padding:36px 32px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:0.85rem;font-weight:700;margin-bottom:8px;color:var(--text-main);}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:12px 16px;border-radius:12px;border:2px solid var(--blue-soft);
  font-family:'Zen Maru Gothic',sans-serif;font-size:0.92rem;color:var(--text-main);
  background:var(--cream);transition:border-color 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;border-color:var(--pink-deep);
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-note{font-size:0.75rem;color:var(--text-light);margin-top:10px;}

/* ===== Footer ===== */
footer{background:var(--text-main);color:var(--pink-soft);padding:56px 24px 32px;text-align:center;}
footer .logo{color:var(--pink-soft);font-size:1.8rem;margin-bottom:12px;}
footer p{color:#D8C4C9;font-size:0.85rem;margin-bottom:22px;}
.footer-links{display:flex;justify-content:center;gap:22px;margin-bottom:28px;flex-wrap:wrap;}
.footer-links a{font-size:0.85rem;color:#D8C4C9;}
.footer-links a:hover{color:var(--pink-soft);}
.copyright{font-size:0.75rem;color:#A78D92;}

/* ===== Responsive ===== */
@media (max-width: 860px){
  nav ul{display:none;}
  .about-grid{grid-template-columns:1fr;}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .event-card{flex-direction:column;text-align:center;}
  .contact-wrap{grid-template-columns:1fr;}
  .materials-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .scroll-hint span{animation:none;}
  .polaroid, .btn, .link-card, .filter-btn{transition:none;}
}