:root {
  --ink: #ece6e1;
  --accent: #e2506b;
  --muted: #b2a5ad;
  --bg1: #161318;
  --bg2: #2b1f24;
  --paper: #231c25; /* warm plum sheet, one step above the page background */
  --paper-line: 242 169 188; /* soft sakura pink, matches the petal palette */
  --paper-alpha: 0.2;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg1);
  color: var(--ink);
  font-family: 'Kiwi Maru', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* cherry blossom petals — z-0: in front of the paper sheet (z:-1),
   behind the card's content (z:1) */
.petals {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.petal {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  animation: petal-fall var(--fall) linear infinite;
  animation-delay: var(--d);
  will-change: transform;
}

.petal::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c);
  border-radius: 100% 0 100% 0;
  opacity: var(--o, 0.75);
  animation: petal-sway var(--sway) ease-in-out infinite alternate;
  animation-delay: var(--sd);
  will-change: transform;
}

@keyframes petal-fall {
  from { transform: translate3d(0, -12vh, 0); }
  to   { transform: translate3d(var(--drift, 4vw), 112vh, 0); }
}

@keyframes petal-sway {
  from {
    transform: translateX(calc(var(--amp, 4vw) * -1))
               rotate(var(--tilt, 60deg))
               scaleY(1);
  }
  to {
    transform: translateX(var(--amp, 4vw))
               rotate(calc(var(--tilt, 60deg) * -1))
               scaleY(0.6);
  }
}

h1, h2, h3 {
  font-family: 'Hachi Maru Pop', cursive;
  letter-spacing: 0.03em;
}

p, .description {
  font-family: 'Kiwi Maru', serif;
}

footer {
  font-family: 'Kosugi Maru', sans-serif;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: 980px;
  padding: clamp(2rem, 3.5vw, 3rem);
  /* the paper sheet is painted on ::before (z:-1) so petals can drift
     between the sheet and the content (z:1) */
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgb(var(--paper-line) / calc(var(--paper-alpha) * 0.7));
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05), /* top edge catches the light */
    0 0 30px rgb(var(--paper-line) / 0.07),  /* soft pink halo, melts the edge in */
    0 2px 5px rgba(0, 0, 0, 0.35),            /* tight contact shadow */
    0 32px 80px -18px rgba(0, 0, 0, 0.6);     /* wide ambient drop shadow */
  background-color: var(--paper);
  /* paper sheet, top to bottom: rules, edge vignette, lamp light, grain, mottle */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 30px,
      rgb(var(--paper-line) / var(--paper-alpha)) 30px,
      rgb(var(--paper-line) / var(--paper-alpha)) 31px
    ),
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(90% 70% at 50% 38%, rgb(var(--paper-line) / 0.05), transparent 75%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%200.97%20%200%200%200%200%200.94%20%200%200%200%200.05%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27480%27%20height%3D%27480%27%3E%3Cfilter%20id%3D%27m%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%200.016%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%200.95%20%200%200%200%200%200.92%20%200%200%200%200.03%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27480%27%20height%3D%27480%27%20filter%3D%27url%28%23m%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:
    auto,
    auto,
    auto,
    160px 160px,
    480px 480px;
}

/* keep the card's content above the falling petal layer */
.intro,
.hero-wrap,
footer {
  position: relative;
  z-index: 1;
}

.tag {
  margin: 0 0 1rem;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
}

.role {
  margin: 1.4rem 0 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent);
}

.blurb {
  margin: 0.9rem 0 0;
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(3rem, 6.5vw, 4.8rem);
  line-height: 1.15;
}

footer {
  grid-column: 1 / -1;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hero-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1000 / 1431;
  justify-self: center;
}

.hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.hero-hover {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.hero-wrap:hover .hero-hover {
  opacity: 1;
}

@media (max-width: 720px) {
  body {
    place-items: start center;
  }

  .card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    text-align: center;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2.75rem 1.25rem 1.5rem;
    gap: 2.25rem;
  }

  .card::before {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .blurb {
    margin-left: auto;
    margin-right: auto;
  }

  footer {
    margin-top: 0;
  }
}