:root{
  --peach: #F7D6C8;
  --dusty-pink: #D7A6B0;
  --muted-gold: #C9A15A;
  --warm-beige: #F3E8D8;
  --indigo: #4A5571;
  --text: #2f2a28;
  --accent-dark: rgba(44,34,28,0.85);
}

/* Subtle textured paper background */
html,body{height:100%;}
body{
  margin:0;
  font-family:'Noto Serif JP', serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(247,214,200,0.18), transparent 20%),
    linear-gradient(180deg, rgba(255,244,235,0.7), rgba(245,237,226,0.95));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-attachment: fixed;
}

/* faint vignette and grain overlay using repeating gradients */
body::before{
  content:"";
  pointer-events:none;
  position:fixed;inset:0;z-index:9999;opacity:0.17;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.10)),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 2px);
}

/* Layout and spacing */
.container{max-width:1100px;margin:0 auto;padding:80px 24px;}

/* HERO: cinematic, painterly */
header{position:relative;min-height:86vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;overflow:hidden;padding:6vh 20px}
.hero-figure{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-figure img{width:100%;height:100%;object-fit:cover;filter:contrast(.98) saturate(.95) brightness(.98);transform-origin:center}
.hero-silhouette{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:70%;max-width:1100px;opacity:0.12;filter:blur(1px) saturate(.9);z-index:1;pointer-events:none}
.petal-canvas{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}

/* Title styling: book-cover serif */
h1{font-family:'Playfair Display', serif;font-weight:700;font-size:clamp(2.4rem,5vw,4.8rem);margin:0;color:var(--muted-gold);letter-spacing:0.02em;text-shadow:0 6px 18px rgba(0,0,0,0.25), 0 0 10px rgba(201,161,90,0.08)}
.subtitle{font-family:'Noto Serif JP', serif;color:var(--dusty-pink);margin-top:8px;font-size:1.1rem;z-index:4}

/* CTA buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:14px;border:1px solid rgba(0,0,0,0.08);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--accent-dark);font-weight:600;margin:12px 8px;cursor:pointer;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,var(--muted-gold),rgba(201,161,90,0.88));color:#2b1f12;box-shadow:0 6px 20px rgba(201,161,90,0.12)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.03)}

/* Sections: layered, parchment cards */
.story-text{font-size:1.12rem;line-height:1.7;color:#322a28;background:linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15));padding:36px;border-radius:16px;box-shadow:0 12px 40px rgba(38,30,25,0.08);border:1px solid rgba(55,45,36,0.06)}
.dropcap{float:left;font-family:'Playfair Display', serif;font-weight:700;font-size:3.6rem;line-height:0.85;margin-right:12px;color:var(--muted-gold)}

.section-title{font-family:'Playfair Display', serif;color:var(--muted-gold);font-size:1.8rem;margin:18px 0;border-bottom:0;display:block}

.character-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:30px;margin-top:40px}

.character-card{background:linear-gradient(180deg,#fbf5ea,#f5eadd);border-radius:12px;padding:12px;box-shadow:0 8px 28px rgba(39,33,29,0.07);border:1px solid rgba(70,58,48,0.06);text-align:center}
.character-card img{width:100%;max-width:220px;height:auto;object-fit:contain;margin:0 auto;display:block}
.character-card h3{font-family:'Playfair Display', serif;color:var(--indigo);margin:10px 0 6px}

footer{padding:48px 20px;text-align:center;color:rgba(34,28,25,0.75)}

/* Petal styles and animation */
.petal{position:absolute;top:-10vh;left:0;will-change:transform;pointer-events:none;opacity:0.95}
.petal svg{width:28px;height:24px;display:block;transform-origin:center}

@keyframes petal-fall{0%{transform:translateY(-10vh) rotateZ(var(--rot,0deg)) translateX(0)}50%{opacity:1}100%{transform:translateY(110vh) rotateZ(calc(var(--rot,0deg) + 180deg)) translateX(var(--drift,20px))}}

@keyframes petal-sway{0%{transform:translateX(0)}50%{transform:translateX(var(--sway,20px))}100%{transform:translateX(0)}}

.petal{animation-name:petal-fall, petal-sway;animation-timing-function:linear, ease-in-out;animation-iteration-count:1, infinite;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .petal{animation:none;opacity:0.6}
}

/* Audio Player: Parchment/Lacquered Wood Style */
.audio-container{
  position:relative;
  z-index:4;
  background:linear-gradient(135deg, rgba(251,245,234,0.88) 0%, rgba(245,234,221,0.82) 100%);
  border-radius:18px;
  padding:20px 24px;
  margin:16px auto;
  max-width:420px;
  box-shadow:
    0 4px 16px rgba(47,42,40,0.12),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(139,115,95,0.08);
  border:1px solid rgba(201,161,90,0.25);
  overflow:hidden;
}

.audio-container::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.006) 0 1px, transparent 1px 2px),
    radial-gradient(ellipse 220px 120px at 90% 12%, rgba(247,214,200,0.10), transparent 52%);
  pointer-events:none;
  opacity:0.35;
}

.audio-petal-accent{
  position:absolute;
  top:8px;
  right:12px;
  width:32px;
  height:28px;
  opacity:0.08;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30"><path fill="%23D7A6B0" d="M20 2c5 1 9 5 10 9c-3 1-6 5-10 8c-4-3-7-7-10-8c1-4 5-8 10-9z"/></svg>');
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  animation:gentle-sway 6s ease-in-out infinite;
}

@keyframes gentle-sway{
  0%, 100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
}

.audio-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.audio-icon{
  color:var(--muted-gold);
  flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.audio-title{
  font-family:'Playfair Display', serif;
  font-size:0.95rem;
  font-weight:600;
  color:rgba(74,85,113,0.95);
  letter-spacing:0.02em;
  text-shadow:0 1px 1px rgba(255,255,255,0.7);
}

.audio-meta{
  font-family:'Noto Serif JP', serif;
  font-size:0.78rem;
  color:rgba(47,42,40,0.7);
  letter-spacing:0.04em;
  margin-top:-4px;
  margin-bottom:8px;
}

.audio-container audio{
  width:100%;
  height:42px;
  position:relative;
  z-index:1;
  border-radius:12px;
  filter:drop-shadow(0 2px 6px rgba(47,42,40,0.08));
}

/* Custom Audio Controls Styling */
.audio-container audio::-webkit-media-controls-panel{
  background:linear-gradient(180deg, rgba(243,232,216,0.78), rgba(239,226,208,0.8));
  border-radius:12px;
  border:1px solid rgba(139,115,95,0.12);
}

.audio-container audio::-webkit-media-controls-play-button,
.audio-container audio::-webkit-media-controls-pause-button{
  background:radial-gradient(circle, rgba(201,161,90,0.15), transparent 70%);
  border-radius:50%;
  filter:drop-shadow(0 1px 3px rgba(74,85,113,0.2));
  transition:transform 0.2s ease, filter 0.2s ease;
}

.audio-container audio::-webkit-media-controls-play-button:hover,
.audio-container audio::-webkit-media-controls-pause-button:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 2px 6px rgba(201,161,90,0.35));
}

.audio-container audio::-webkit-media-controls-timeline{
  background:linear-gradient(90deg, rgba(201,161,90,0.35), rgba(215,166,176,0.28));
  border-radius:4px;
  height:6px;
  margin:0 8px;
}

.audio-container audio::-webkit-media-controls-current-time-display,
.audio-container audio::-webkit-media-controls-time-remaining-display{
  color:rgba(74,85,113,0.75);
  text-shadow:0 1px 1px rgba(255,255,255,0.6);
  font-size:0.8rem;
  font-family:'Noto Serif JP', serif;
}

/* Firefox */
.audio-container audio::-moz-range-track{
  background:linear-gradient(90deg, rgba(201,161,90,0.38), rgba(215,166,176,0.3));
  border-radius:4px;
  height:6px;
}

.audio-container audio::-moz-range-thumb{
  background:radial-gradient(circle, var(--muted-gold), rgba(201,161,90,0.85));
  border:2px solid rgba(255,255,255,0.6);
  border-radius:50%;
  width:14px;
  height:14px;
  box-shadow:0 2px 4px rgba(47,42,40,0.2), inset 0 1px 2px rgba(255,255,255,0.4);
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.audio-container audio::-moz-range-thumb:hover{
  transform:scale(1.15);
  box-shadow:0 3px 8px rgba(201,161,90,0.45), inset 0 1px 2px rgba(255,255,255,0.6);
}

/* Webkit progress */
.audio-container audio::-webkit-media-controls-timeline::-webkit-slider-thumb{
  background:radial-gradient(circle, var(--muted-gold), rgba(201,161,90,0.85));
  border:2px solid rgba(255,255,255,0.6);
  border-radius:50%;
  width:14px;
  height:14px;
  box-shadow:0 2px 4px rgba(47,42,40,0.2), inset 0 1px 2px rgba(255,255,255,0.4);
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.audio-container audio::-webkit-media-controls-timeline::-webkit-slider-thumb:hover{
  transform:scale(1.15);
  box-shadow:0 3px 8px rgba(201,161,90,0.45), inset 0 1px 2px rgba(255,255,255,0.6);
}

@media (prefers-reduced-motion: reduce){
  .audio-petal-accent{animation:none}
}