/* ==========================================================================
   PERSONAL BLOGGER
   Warm paper with scattered stickers: playful hero, bento about, memory
   carousel, parallax showcase.
   ========================================================================== */

:root {
  --background: #f5f3f0;
  --card: #ffffff;
  --foreground: #1a1a1a;
  --primary-cta: #1a1a1a;
  --primary-cta-text: #f5f3f0;
  --secondary-cta: #f5f3f0;
  --secondary-cta-text: #1a1a1a;
  --accent: #4caf50;
  --background-accent: #ebe7e1;
  --radius: 1.5rem;
  --content-width: 75vw;
  --section-head-size: var(--text-6xl);
}

@media (width >= 1536px) { :root { --section-head-size: var(--text-7xl); } }


@media (width <= 768px) { :root { --content-width: 88vw; } }

/* --- Hero with scattered stickers ------------------------------------------ */

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 8rem 4rem; overflow: hidden; }

.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.hero__lede { max-width: 34ch; font-size: var(--text-2xl); line-height: 1.45; }
.hero__name { font-size: var(--text-8xl); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.hero__role { font-size: var(--text-2xl); opacity: 0.65; }
.hero__hint { font-size: var(--text-lg); color: var(--accent); }

.hero__photo { width: min(22rem, 60vw); margin-bottom: 1rem; border-radius: var(--radius); }

.sticker {
  position: absolute;
  z-index: 1;
  width: 7rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.sticker:hover { transform: scale(1.12) rotate(6deg); }
.sticker:nth-of-type(1) { top: 12%; left: 6%; transform: rotate(-12deg); }
.sticker:nth-of-type(2) { top: 22%; right: 8%; transform: rotate(9deg); }
.sticker:nth-of-type(3) { bottom: 18%; left: 12%; transform: rotate(7deg); }
.sticker:nth-of-type(4) { bottom: 12%; right: 14%; transform: rotate(-8deg); }
.sticker:nth-of-type(5) { top: 45%; left: 3%; transform: rotate(14deg); }
.sticker:nth-of-type(6) { top: 55%; right: 4%; transform: rotate(-15deg); }
.sticker:nth-of-type(7) { top: 6%; left: 42%; transform: rotate(5deg); }
.sticker:nth-of-type(8) { bottom: 5%; left: 45%; transform: rotate(-6deg); }

@media (width <= 900px) {
  .sticker { width: 4.25rem; }
  .hero__name { font-size: var(--text-7xl); }
}

/* --- Bento about ------------------------------------------------------------ */

.bento { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.bento__cell { border-radius: var(--radius); overflow: hidden; }
.bento__cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease-out; }
.bento__cell:hover img { transform: scale(1.04); }
.bento__body { padding: 1.5rem; }
.bento__body h3 { font-size: var(--text-3xl); margin-bottom: 0.4rem; }
.bento__body p { font-size: var(--text-lg); line-height: 1.5; opacity: 0.75; }

@media (width <= 768px) { .bento { grid-template-columns: minmax(0,1fr); } }

/* --- Memory carousel --------------------------------------------------------- */

.memory-marquee { --marquee-gap: 1rem; --marquee-duration: 50s; }
.memory { width: 20rem; flex: none; border-radius: var(--radius); overflow: hidden; }
.memory img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.memory p { padding: 1rem 1.15rem; font-size: var(--text-2xl); text-align: center; }

@media (width <= 768px) { .memory { width: 15rem; } }

/* --- Parallax showcase -------------------------------------------------------- */

.parallax {
  position: relative;
  min-height: 34rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}

.parallax__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parallax::after { content: ''; position: absolute; inset: 0; background: rgba(20,15,10,0.35); }
.parallax h2 { position: relative; z-index: 2; font-size: var(--text-8xl); color: #fff; letter-spacing: -0.02em; text-align: center; }
.parallax__float { position: absolute; z-index: 3; width: 8rem; }
.parallax__float--a { top: 12%; left: 8%; transform: rotate(-10deg); }
.parallax__float--b { bottom: 14%; right: 10%; transform: rotate(12deg); }

@media (width <= 768px) { .parallax h2 { font-size: var(--text-7xl); } .parallax__float { width: 5rem; } }

/* --- Footer -------------------------------------------------------------------- */

.site-footer { border-radius: var(--radius) var(--radius) 0 0; background: var(--foreground); color: #f5f3f0; padding-block: 4rem; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
.footer-brand { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2.5rem; }
.footer-nav h3 { font-size: var(--text-base); font-weight: 500; opacity: 0.55; margin-bottom: 1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a { font-size: var(--text-lg); transition: color 0.2s, opacity 0.2s; }
.footer-nav a:hover { color: var(--accent); }

.footer-legal-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-size: var(--text-base); opacity: 0.6;
}
.footer-legal-bar div { display: flex; gap: 1.25rem; }

@media (width <= 768px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}