/* =======================================================
   YOUTH CLIMATE CONVENING
   Design System
======================================================= */

:root{

/* Background */

--paper:#FFF9F8;
--paper-soft:#FDF1F3;
--paper-warm:#FFF5F2;

/* Primary */

--plum:#442740;
--plum-dark:#2E1B2B;

/* Accent */

--pink:#EF5B89;
--pink-light:#F7A4BC;

--yellow:#D9C74B;

--green:#7D9439;

--blue:#8ECBE8;

/* Typography */

--text:#2F2A2D;
--muted:#6C6467;

/* Layout */

--container:1280px;

--radius-sm:12px;
--radius-md:22px;
--radius-lg:40px;

--shadow:

0 18px 45px rgba(60,35,50,.08);

}

/* =======================================================
RESET
======================================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:var(--paper);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

position:relative;

}

/* =======================================================
Watercolor Background
======================================================= */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

z-index:-2;

background:

radial-gradient(circle at 20% 15%,
rgba(255,180,205,.22),
transparent 35%),

radial-gradient(circle at 80% 10%,
rgba(145,215,255,.12),
transparent 40%),

radial-gradient(circle at 40% 80%,
rgba(255,230,170,.15),
transparent 45%),

radial-gradient(circle at 95% 70%,
rgba(190,230,170,.14),
transparent 40%);

}

/* subtle paper */

.page-texture{

position:fixed;

inset:0;

pointer-events:none;

opacity:.22;

background-image:

repeating-radial-gradient(circle at 20% 20%,
rgba(0,0,0,.02) 0 1px,
transparent 1px 6px);

z-index:-1;

}

/* =======================================================
Container
======================================================= */

.container{

width:min(92%,var(--container));

margin:auto;

}

/* =======================================================
Typography
======================================================= */

h1,h2,h3{

font-family:"Cormorant Garamond",serif;

font-weight:700;

line-height:1.05;

color:var(--plum);

}

h1{

font-size:clamp(3rem,7vw,6rem);

}

h2{

font-size:clamp(2.2rem,5vw,4rem);

margin-bottom:20px;

}

p{

color:var(--muted);

font-size:1.05rem;

}

.section-tag{

display:inline-block;

margin-bottom:16px;

padding:8px 18px;

border-radius:999px;

background:white;

color:var(--pink);

font-size:.8rem;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

}

/* =======================================================
Links
======================================================= */

a{

text-decoration:none;

color:inherit;

}

/* =======================================================
Header
======================================================= */

.site-header{

position:absolute;

top:0;

left:0;

width:100%;

padding:28px 0;

z-index:100;

}

.header-inner{

width:min(92%,var(--container));

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:46px;

}

.site-nav{

display:flex;

gap:40px;

font-weight:600;

}

.site-nav a{

position:relative;

transition:.25s;

}

.site-nav a:hover{

color:var(--pink);

}

.site-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--pink);

transition:.25s;

}

.site-nav a:hover::after{

width:100%;

}

/* =======================================================
Hero
======================================================= */

.hero{

position:relative;

min-height:min(110vh,900px);

display:flex;

align-items:center;

overflow:hidden;

padding:120px 0;

}

.hero-grid{

width:min(92%,var(--container));

margin:auto;

display:grid;

grid-template-columns:0.95fr 1.05fr;

gap:90px;

align-items:center;

}

.hero-copy{

position:relative;

z-index:5;

}

.hero h1 span{

display:block;

color:var(--pink);

}

.subtitle{

margin:18px 0 28px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.18em;

color:var(--green);

}

.hero-text{

max-width:620px;

font-size:1.15rem;

margin-bottom:42px;

}

.hero-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:32px;

place-content:start;

}

.hero-meta{

display:flex;

flex-wrap:wrap;

gap:14px;

align-items:center;

font-size:.95rem;

color:var(--muted);

}

.hero-meta .dot{

width:6px;

height:6px;

border-radius:50%;

background:var(--pink);

}

/* =======================================================
Book
======================================================= */

.hero-book{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-book img{

display: block;
width: 100%;
max-width: 440px;
height: auto;
border-radius: 18px;
position: relative;
z-index: 2;
box-shadow: 0 35px 60px rgba(70, 40, 60, 0.16);
transition: transform .45s ease;

}

.hero-book img:hover{

transform:

translateY(-8px)

rotate(-2deg);

}

.book-shadow{

position:absolute;

width:70%;

height:40px;

background:

rgba(0,0,0,.15);

filter:blur(22px);

bottom:-10px;

border-radius:50%;

}

/* =======================================================
Buttons
======================================================= */

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:999px;

font-weight:700;

transition:.3s;

}

.button.primary{

background:var(--pink);

color:white;

}

.button.primary:hover{

transform:translateY(-3px);

box-shadow:

0 14px 30px rgba(239,91,137,.25);

}

.button.secondary{

background:white;

border:2px solid var(--plum);

}

.button.secondary:hover{

background:var(--plum);

color:white;

}

/* =======================================================
Decorations
======================================================= */

.floating-leaf{

position:absolute;

bottom:100px;

right:120px;

width:110px;

animation:floatLeaf 7s ease-in-out infinite;

}

/* =======================================================
Hero Flowers — two heads at bottom-right of the hero,
cropped at the hero's bottom edge so each is ~50% visible
======================================================= */

.hero-flower{

position:absolute;

width:1000px;

bottom:-351px;

pointer-events:none;

user-select:none;

display:block;

}

/* Centered wrapper: follows the same centered path as the
   download section, anchored to the hero's bottom edge */
.hero-flowers{

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:0;

width:min(92%,var(--container));

height:0;

pointer-events:none;

z-index:1;

}

.flower-left{

right:130px;

z-index:1;

opacity:0.95;

}

.flower-right{

right:0;

z-index:2;

opacity:0.98;

}

/* =======================================================
Animations
======================================================= */

@keyframes floatLeaf{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes fly{

0%,100%{

transform:
translate(0,0)
rotate(0deg);

}

50%{

transform:
translate(-30px,15px)
rotate(-8deg);

}

}

/* =======================================================
DOWNLOAD SECTION
======================================================= */

.download-section{

position:relative;

padding:80px 0 40px;

overflow:hidden;

}

.download-section::before{

content:"";

position:absolute;

inset:8% 6%;

background:rgba(255,255,255,.65);

backdrop-filter:blur(10px);

border-radius:48px;

z-index:-1;

}

.download-card{

display:grid;

grid-template-columns:280px 1fr;

gap:40px;

align-items:center;

margin-top:40px;

padding:36px;

background:white;

border-radius:32px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.download-card::after{

content:"";

position:absolute;

right:-60px;

top:-60px;

width:220px;

height:220px;

background:rgba(239,91,137,.06);

border-radius:50%;

}

.download-cover{

display:flex;

justify-content:center;

align-items:center;

}

.download-cover img{

width:100%;

max-width:280px;

border-radius:18px;

box-shadow:

0 24px 45px rgba(0,0,0,.12);

transition:.35s;

}

.download-cover img:hover{

transform:rotate(-3deg) scale(1.02);

}

.download-content{

display:flex;

flex-direction:column;

gap:24px;

align-items:flex-start;

}

.download-content ul{

list-style:none;

display:grid;

gap:18px;

margin:0;

}

.download-content li{

position:relative;

padding-left:34px;

font-size:1.05rem;

}

.download-content li::before{

content:"🌸";

position:absolute;

left:0;

top:0;

}

.download-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/* =======================================================
PREVIEW SECTION
======================================================= */

.preview-section{

position:relative;

padding:120px 0 60px;

overflow:hidden;

}

.preview-frame{

margin-top:60px;

background:white;

border-radius:34px;

padding:28px;

box-shadow:var(--shadow);

}

.preview-toolbar{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-bottom:28px;

flex-wrap:nowrap;

white-space:nowrap;

}

.pdf-btn{

appearance:none;

border:none;

cursor:pointer;

padding:12px 24px;

border-radius:999px;

font-size:clamp(.8rem,2vw,1rem);

white-space:nowrap;

background:var(--paper);

color:var(--plum);

font-weight:700;

transition:.25s;

border:2px solid rgba(68,39,64,.08);

}

.pdf-btn:hover:not(:disabled){

background:var(--pink);

color:white;

transform:translateY(-2px);

}

.pdf-btn:disabled{

cursor:not-allowed;

opacity:.4;

transform:none;

}

.page-number{

font-weight:700;

color:var(--muted);

min-width:clamp(110px,22vw,140px);

white-space:nowrap;

text-align:center;

}

.pdf-viewer{

border-radius:24px;

overflow:hidden;

background:#fff;

}

.pdf-spread{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

background:#f8f8f8;

padding:18px;

min-height:640px;

position:relative;

}

.pdf-page{

width:100%;

height:auto;

background:white;

border-radius:12px;

box-shadow:

0 10px 24px rgba(0,0,0,.08);

}

.pdf-loading{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.75);

backdrop-filter:blur(4px);

transition:opacity .45s ease;

}

.pdf-loading-cover{

max-width:min(76%,420px);

max-height:64%;

object-fit:contain;

border-radius:14px;

box-shadow:0 12px 32px rgba(0,0,0,.18);

}

.pdf-loading-note{

margin-top:20px;

font-weight:600;

font-size:.95rem;

color:var(--muted);

letter-spacing:.02em;

}

.pdf-loading.is-done{

opacity:0;

pointer-events:none;

}

.preview-note{

margin-top:30px;

text-align:center;

}

.preview-note a{

color:var(--pink);

font-weight:700;

}

.preview-note a:hover{

text-decoration:underline;

}

/* =======================================================
 HIGHLIGHTS
 ======================================================= */

.highlights{

position:relative;

padding:80px 0 40px;

}

.highlight-grid{

display:grid;

grid-template-columns:1fr;

gap:24px;

margin-top:40px;

}

.highlight-card{

position:relative;

padding:32px 24px;

background:white;

border-radius:28px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

text-align:center;

}

.highlight-card::before{

content:"";

position:absolute;

right:-30px;

top:-30px;

width:120px;

height:120px;

background:rgba(239,91,137,.05);

border-radius:50%;

}

.highlight-card:hover{

transform:translateY(-8px);

}

.highlight-icon{

width:140px;

height:140px;

margin:0 auto 20px;

border-radius:50%;

background:var(--paper-soft);

display:flex;

align-items:center;

justify-content:flex-end;

padding-right:50px;

overflow:hidden;

transition:transform .35s ease, background .35s ease;

}

.highlight-card:hover .highlight-icon{

transform:scale(1.08);

background:var(--pink-light);

}

.highlight-icon img{

width:90px;

height:90px;

object-fit:contain;

}

.highlight-card h3{

margin-bottom:12px;

font-size:1.5rem;

color:var(--plum);

}

.highlight-card p{

max-width:36ch;

margin:0 auto;

color:var(--muted);

font-size:1rem;

line-height:1.6;

}

@media(min-width:640px){

.highlight-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(min-width:1024px){

.highlight-grid{

grid-template-columns:repeat(3,1fr);

gap:32px;

}

.highlight-icon{

width:160px;

height:160px;

padding-right:50px;

}

.highlight-icon img{

width:110px;

height:110px;

}

.highlight-card h3{

font-size:1.65rem;

}

}

@media(min-width:640px) and (max-width:1023px){

.highlight-grid .highlight-card:last-child{

grid-column:1 / -1;

justify-self:center;

width:min(100%,420px);

}

}

/* =======================================================
SECTION DECORATIONS
======================================================= */

.decor{

position:absolute;

pointer-events:none;

user-select:none;

z-index:2;

}

.decor-top-left{

top: 20px;

left: 150px;

width:200px;

transform: scaleX(-1);

}

.decor-bottom-right{

bottom: 85px;

right: 50px;

width: 500px;

height: auto;
}


/* =======================================================
SECTION HEADINGS
======================================================= */

.section-heading{

max-width:760px;

margin:0 auto 40px;

text-align:center;

}

.section-heading h2{

margin-bottom:20px;

}

.section-heading p{

font-size:1.1rem;

color:var(--muted);

}

/* =======================================================
ABOUT SECTION
======================================================= */

.about-section{

position:relative;

padding:80px 0 40px;

overflow:hidden;

}

.about-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:40px;

align-items:center;

}

.about-copy{

max-width:620px;

}

.about-head{
    max-width:900px;
    margin:0 auto 40px;
    text-align:center;
}

.about-copy p{

margin-bottom:24px;

}

.about-art{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.about-art img{

width:min(100%,420px);

transition:.4s;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.08));

}

.about-art img:hover{

transform:translateY(-10px);

}



.decor-right{

right: 30px;

top:40px;

width:180px;

height: auto

}


/* =======================================================
CREDITS
======================================================= */

/* =======================================================
FOOTER
======================================================= */

.site-footer{

padding:70px 0;

background:var(--plum);

color:white;

position:relative;

overflow:hidden;

}

.footer-grid{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.footer-logo{

height:60px;

filter:brightness(0) invert(1);

}

.site-footer p{

color:rgba(255,255,255,.8);

margin:4px 0;

}


/* =======================================================
UTILITY
======================================================= */

img{

display:block;

max-width:100%;

height:auto;

}

section{

position:relative;

}

.section-heading{

position:relative;

z-index:3;

}

.button{

cursor:pointer;

}

.button:focus{

outline:3px solid rgba(242,91,137,.25);

outline-offset:4px;

}


/* =======================================================
SCROLL REVEAL
======================================================= */

.reveal{

opacity:0;

transform:translateY(50px);

transition:

opacity .8s ease,

transform .8s ease;

}

.reveal.visible{

opacity:1;

transform:none;

}

/* .decor{

animation-name:float3;

} */

.decor-top-left {
    animation: decorTopLeft 8s ease-in-out infinite;
}

.decor-bottom-right {
    animation: decorBottomRight 8s ease-in-out infinite;
}

@keyframes float1{

0%,100%{

transform: translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes float2{

0%,100%{

transform:translateY(0) rotate(0);

}

50%{

transform:translateY(-14px) rotate(3deg);

}

}

@keyframes float3{

0%,100%{

transform:scaleX(-1) translateY(0);

}

50%{

transform:scaleX(-1) translateY(10px);

}

}

@keyframes decorTopLeft {
    0%,100% {
        transform: scaleX(-1) translateY(0);
    }

    50% {
        transform: scaleX(-1) translateY(10px);
    }
}

@keyframes decorBottomRight {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}


/* =======================================================
RESPONSIVE
======================================================= */

@media(max-width:1100px){

.hero-grid{

grid-template-columns:0.95fr 1.05fr;

gap:40px;

}

.about-grid{

grid-template-columns:1.1fr .9fr;

}

.hero{

text-align:center;

}

.hero-copy{

margin:auto;

}

.hero-book{

margin-top:50px;

}

.hero-actions{

place-content:center;

}

.download-card{

grid-template-columns:1fr;

text-align:center;

}

.download-content{

align-items:center;

}

.download-content ul{

justify-items:start;

}

.download-content li{

text-align:left;

}

.pdf-spread{

grid-template-columns:1fr;

min-height:500px;

}

.pdf-page:last-child{

display:none;

}

.footer-grid{

justify-content:center;

text-align:center;

}

.hero-flower,
.flower-left,
.flower-right {
    display: none;
}

.about-art {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

}

@media(max-width:768px){

.hero{

padding:120px 0 80px;
overflow: hidden;

}

.preview-section{

padding:80px 0 40px;

}

/* ==========================
   HERO BACKGROUND
========================== */

.hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-branch {
    width: 380px;
    bottom: -120px;
    right: -100px;
    opacity: .9;
}

.site-nav{

display:none;

}

.hero h1{

font-size:3rem;

}

.hero-actions{

place-content:center;

}

.hero-meta{

justify-content:center;

}

.download-card{

padding:30px;

}

.preview-frame{

padding:18px;

border-radius:20px;

}

.pdf-spread{

min-height:0;

padding:12px;

gap:8px;

}

.pdf-page:last-child{

display:none;

}

.section-heading h2{

font-size:2.8rem;

}

.about-art img{

width:min(100%,260px);

}

}

@media(max-width:560px){

.button{

width:100%;

}


.hero-actions{

flex-direction:column;

}

.hero-book img{

width:90%;

}

.download-actions{

flex-direction:column;

}

.download-actions .button{

width:100%;

}

.preview-toolbar{

gap:8px;

}

.preview-toolbar .pdf-btn{

padding:10px 14px;

}

.preview-frame{

padding:12px;

border-radius:16px;

}

.preview-section{

padding:60px 0 30px;

}

.pdf-spread{

padding:8px;

gap:6px;

}

.decor{

opacity:.6;

}

.about-art img{

width:min(100%,180px);

}

}


/* =======================================================
REDUCED MOTION
======================================================= */

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}