/* ===== A Place for Me — Landing Page v2 ===== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;600;700;800;900&display=swap');

:root{
  --pink:        #F9B8C8;
  --pink-bold:   #f0879f;
  --yellow:      #FAE88A;
  --yellow-bold: #FAE88A;
  --teal:        #C3F0EA;
  --teal-bold:   #7DD4CC;
  --green:       #C9EAC1;
  --green-bold:  #7BC26A;
  --cream:       #FFFCF6;
  --paper:       #FFFEFB;
  --rule:        #F1EBDA;
  --margin-red:  #F0A9A9;
  --black:       #201C1A;
  --white:       #FFFFFF;

  --font-display: 'Archivo Black', 'Trebuchet MS', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;

  --space-4: 1rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --text-hero: clamp(3rem, 1.1rem + 7.5vw, 7.5rem);
  --text-2xl: clamp(2.4rem, 1.3rem + 3.6vw, 4.2rem);
  --text-xl: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  --text-lg: clamp(1.3rem, 1.05rem + 0.8vw, 1.6rem);
  --text-base: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  --text-sm: 1rem;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:none; }
body{
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--black);
  background: var(--cream);
  line-height: 1.55;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; text-wrap:balance; text-transform:uppercase; letter-spacing:-0.01em; }
p{ text-wrap:pretty; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

:focus-visible{ outline:3px solid var(--black); outline-offset:3px; border-radius:6px; }

.wrap{ max-width:1240px; margin:0 auto; padding-inline: clamp(1.5rem, 5vw, 4rem); }
section{ position:relative; overflow:hidden; padding-block: clamp(4.5rem, 9vw, 8rem); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ===== notebook paper texture ===== */
.notebook{
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule) 39px 40px),
    linear-gradient(to right, transparent 0 78px, var(--margin-red) 78px 80px, transparent 80px 100%);
  background-attachment: local;
}

/* ===== decorative stickers ===== */
.sticker{ position:absolute; pointer-events:none; z-index:2; }
.sticker svg{ width:100%; height:100%; }
.float{ animation: float 5s ease-in-out infinite; }
.float-slow{ animation: float 7s ease-in-out infinite; }
.spin-slow{ animation: spin 14s linear infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ===== tape ===== */
.tape{ position:absolute; height:32px; box-shadow:0 2px 4px rgba(0,0,0,0.12); opacity:.92; }
.tape.yellow{ background:rgba(250,232,138,0.92); }
.tape.pink{ background:rgba(255,143,187,0.75); }
.tape.teal{ background:rgba(47,194,180,0.7); }

/* ===== badge / pill ===== */
.badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
  letter-spacing:.02em; color:var(--black); text-transform:uppercase;
  background:var(--yellow-bold); padding:.6em 1.4em; border-radius:999px;
  transform:rotate(-2deg); box-shadow:3px 4px 0 rgba(0,0,0,0.15);
}
.tag-label{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:var(--text-sm);
  letter-spacing:.06em; text-transform:uppercase; color:var(--black); opacity:.55;
  border-bottom:3px solid var(--pink-bold); padding-bottom:.15em; margin-bottom:1rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); text-transform:uppercase; letter-spacing:.01em;
  padding:.85em 2.1em; border-radius:999px; color:var(--black);
  background:var(--yellow); box-shadow:0 7px 0 rgba(0,0,0,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 0 rgba(0,0,0,0.18); }
.btn.alt{ background:var(--yellow); color:var(--black); }
.btn.pink{ background:var(--yellow); color:var(--black); }

/* ===== highlight pull-quote (marker style) ===== */
.quote-card{
  background: var(--white);
  border-radius: 18px;
  padding: clamp(1.6rem,3vw,2.6rem);
  box-shadow: 4px 6px 0 rgba(0,0,0,0.08);
  position:relative;
}
.quote-card p{
  font-family:var(--font-display); font-weight:600; text-transform:none;
  font-size:var(--text-lg); line-height:1.35;
}
.quote-card .mark{ background:linear-gradient(100deg, transparent 0%, var(--yellow) 8%, var(--yellow) 92%, transparent 100%); padding:0 .1em; }
.quote-card cite{ display:block; margin-top:1rem; font-family:var(--font-body); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; opacity:.5; font-style:normal; }

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem clamp(1.25rem,5vw,4rem);
  background: rgba(255,254,251,0.9); backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--black);
}
.nav .logotype{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; white-space:nowrap; text-transform:uppercase; }
.nav .logotype span{ color:var(--teal-bold); }
.nav a.btn{ font-size:.85rem; padding:.6em 1.4em; white-space:nowrap; flex-shrink:0; }
@media (max-width:480px){
  .nav .logotype{ font-size:.85rem; }
  .nav a.btn{ font-size:.68rem; padding:.55em .9em; }
}

/* ===== HERO ===== */
.hero{ padding-block: clamp(2.5rem,6vw,5rem) clamp(7rem,11vw,10rem); }
.hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; margin-bottom: clamp(1.5rem,3vw,2.5rem); flex-wrap:wrap; }
.ginger-card{
  position:relative; width: 150px; flex-shrink:0; transform:rotate(-3deg);
}
.ginger-card img{ border-radius:14px; box-shadow:4px 6px 0 rgba(0,0,0,0.12); border:6px solid var(--white); }
.ginger-card .tape{ top:-14px; left:50%; transform:translateX(-50%) rotate(-4deg); width:70px; }
.ginger-card .cap{
  position:absolute; bottom:-14px; right:-18px; background:var(--white); font-family:var(--font-display);
  font-weight:700; font-size:.72rem; text-transform:uppercase; padding:.4em .7em; border-radius:999px;
  box-shadow:2px 3px 0 rgba(0,0,0,0.1); transform:rotate(4deg);
}
.hero-headline{
  background: var(--paper);
  display:inline-block;
  padding: clamp(1rem,2.5vw,2rem) clamp(1.2rem,3vw,2.4rem);
  border-radius: 20px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.03);
  margin-bottom: 1.1em;
  max-width: 100%;
}
.hero h1{ font-size: var(--text-hero); margin-block: 0 .15em; letter-spacing:-0.01em; }
.hero .shout{
  display:flex; flex-wrap:wrap; gap:.35em .5em; margin-bottom:1.2em;
}
.hero .shout span{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:var(--text-xl);
  padding:.05em .1em;
}
.hero .shout .c1{ color:var(--pink-bold); }
.hero .shout .c2{ color:var(--teal-bold); }
.hero .shout .c3{ color:var(--yellow-bold); -webkit-text-stroke:1.5px var(--black); }
.hero .shout .c4{ color:var(--black); }
.hero p.hook{ font-size:var(--text-lg); max-width:42ch; margin-bottom:1.6em; font-weight:700; text-transform:none; font-family:var(--font-body); }
.hero-cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.hero-art{ position:relative; text-align:center; margin-top: clamp(2rem,5vw,3.5rem); }
.hero-art .dance{
  width:min(560px, 62%); margin:0 auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,0.18));
}

/* ===== STORY ===== */
.story h2{ text-align:center; font-size:var(--text-2xl); margin-bottom: var(--space-16); max-width:20ch; margin-inline:auto; }
.story-row{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.story-row .cover-frame{ position:relative; }
.story-row .cover-frame img{ border-radius:14px; box-shadow:0 25px 45px rgba(0,0,0,0.2); transform:rotate(3deg); }
.story-row .cover-frame .tape{ top:-16px; left:50%; transform:translateX(-50%) rotate(-3deg); width:100px; }
.story-row p.body-copy{ font-size:var(--text-base); margin-top:1.4em; max-width:52ch; }
@media (max-width:860px){ .story-row{ grid-template-columns:1fr; text-align:center; } .story-row p.body-copy{ margin-inline:auto; } }

/* ===== FOR YOU ===== */
.for-you h2{ text-align:center; font-size:var(--text-2xl); margin-bottom: var(--space-16); max-width:26ch; margin-inline:auto; }
.for-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(2rem,3vw,3rem); }
.for-card{ text-align:left; border-top:5px solid var(--black); padding-top:1.4rem; }
.for-card .num{ font-family:var(--font-display); font-weight:700; font-size:2.2rem; display:block; margin-bottom:.3rem; }
.for-card:nth-child(1) .num{ color:var(--pink-bold); }
.for-card:nth-child(2) .num{ color:var(--teal-bold); }
.for-card:nth-child(3) .num{ color:var(--yellow-bold); -webkit-text-stroke:1px var(--black); }
.for-card h3{ font-size:var(--text-xl); margin-bottom:.4em; }
.for-card p{ font-size:1.02rem; opacity:.85; text-transform:none; }
.for-card strong{ background:var(--yellow); padding:0 .15em; }
@media (max-width:760px){ .for-grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* ===== CREW ===== */
.characters{ background:var(--cream); }
.characters h2{ text-align:center; font-size:var(--text-2xl); margin-bottom: var(--space-12); }
.char-scene{ position:relative; max-width:640px; margin:0 auto var(--space-12); }
.char-scene img{ width:100%; filter: drop-shadow(0 22px 34px rgba(0,0,0,0.16)); }
.tag{
  position:absolute; background:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:var(--text-sm); padding:.5em 1.1em; border-radius:999px; box-shadow:3px 4px 0 rgba(0,0,0,0.14);
}
.tag.reese{ top:2%; right:-4%; transform:rotate(-4deg); }
.tag.jordan{ bottom:6%; left:-6%; transform:rotate(4deg); }
.crew-quote{ max-width:640px; margin:0 auto; text-align:center; }
@media (max-width:760px){ .char-scene{ max-width:90%; } }

/* ===== COMPANION KIT ===== */
.kit{ background:var(--white); }
.kit-row{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.kit h2{ font-size:var(--text-2xl); margin-bottom:.6em; max-width:14ch; }
.kit .lead{ font-size:var(--text-lg); font-weight:700; margin-bottom:1.6em; max-width:34ch; text-transform:none; font-family:var(--font-body); }
.kit-list{ list-style:none; display:flex; flex-direction:column; gap:1.4rem; }
.kit-list li{ display:flex; gap:1rem; align-items:flex-start; font-size:1.05rem; font-weight:700; }
.kit-list li::before{ content:"✓"; flex-shrink:0; width:2rem; height:2rem; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.kit-badge{ display:inline-block; margin-top:2rem; background:var(--black); color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; padding:.7em 1.6em; border-radius:999px; font-size:.9rem; }
@media (max-width:860px){ .kit-row{ grid-template-columns:1fr; } }

/* ===== TEACHER NOTE ===== */
.author{ background:var(--white); }
.author-row{ display:grid; grid-template-columns:0.75fr 1.25fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.author-row .photo-frame{ position:relative; }
.author-row img{ border-radius:20px; box-shadow:0 25px 45px rgba(0,0,0,0.2); transform:rotate(-3deg); }
.author-row h2{ font-size:var(--text-2xl); margin-bottom:.6em; max-width:16ch; }
.author-row .ask{ margin-top:1.4em; font-family:var(--font-display); font-weight:700; font-size:var(--text-xl); text-transform:uppercase; }
.author-row .bio{ margin-top:1.4em; font-size:.98rem; opacity:.75; text-transform:none; font-weight:400; }
.author-row .signature{ margin-top:1rem; font-family:var(--font-display); font-weight:700; font-size:1.1rem; text-transform:none; }
@media (max-width:860px){ .author-row{ grid-template-columns:1fr; text-align:center; } }

/* ===== SIGNUP ===== */
.signup{ text-align:center; }
.signup h2{ font-size:var(--text-2xl); margin-bottom:.4em; max-width:22ch; margin-inline:auto; }
.signup p.sub{ max-width:44ch; margin:0 auto var(--space-8); font-size:var(--text-lg); font-weight:700; text-transform:none; font-family:var(--font-body); }
.signup-form{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.signup-form input{
  font-family:var(--font-body); font-size:var(--text-base); font-weight:700; padding: .9em 1.4em; width:300px;
  border:3px solid var(--black); border-radius:999px; background:var(--white); color:var(--black);
}
.signup-form input::placeholder{ color: rgba(32,28,26,0.45); font-weight:600; }
.signup .disclaimer{ font-size:.85rem; opacity:.55; margin-top:1.2rem; text-transform:none; }

/* ===== FOOTER ===== */
footer{ background:var(--white); padding: 2.5rem clamp(1.5rem,5vw,4rem); text-align:center; position:relative; border-top:3px solid var(--black); }
footer p{ font-size:.85rem; opacity:.6; }
footer .corner{ position:absolute; left: clamp(1rem,4vw,3rem); bottom:0; width:110px; }

/* ===== color utility classes ===== */
.c-teal{ color: var(--teal-bold); }
.c-pink{ color: var(--pink-bold); }
.me-gold{ color: var(--yellow); }