@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --rp-base: #232136;
  --rp-surface: #2a273f;
  --rp-overlay: #393552;
  --rp-muted: #6e6a86;
  --rp-subtle: #908caa;
  --rp-text: #e0def4;
  --rp-love: #eb6f92;
  --rp-gold: #f6c177;
  --rp-rose: #ea9a97;
  --rp-pine: #3e8fb0;
  --rp-foam: #9ccfd8;
  --rp-iris: #c4a7e7;
  --rp-highlight-low: #2a283e;
  --rp-highlight-med: #44415a;
  --rp-highlight-high: #56526e;

  --sky: hsl(from var(--rp-foam) calc(h + 25) s l);
  --hill: hsl(from var(--rp-foam) calc(h - 85) s l);
  --trunk: hsl(from var(--rp-gold) calc(h - 8) calc(s - 58) calc(l - 38));
  --leaves: var(--rp-rose);
}

body {
  margin: 0;
  padding: calc(5vh + 2rem) 1rem 2rem;
  background: var(--rp-pine);
  color: var(--rp-text);
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  isolation: isolate;
}

h1 {
  font-size: 2.2em;
  text-align: center;
}

h2 { font-size: 1.65em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5vh;
  z-index: 255;
  overflow: hidden;
  background: var(--rp-base);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-nav .header-child {
  margin: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-nav a,
.site-nav a:visited {
  font-size: 3vh;
  color: var(--rp-rose);
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav img {
  height: 4vh;
  width: auto;
}

.animated-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.animated-bg .landscape,
.animated-bg .tree {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
}

.animated-bg .landscape { z-index: 1; }
.animated-bg .tree { z-index: 3; }

.animated-bg .petal {
  position: absolute;
  top: -40px;
  width: 30px;
  height: 30px;
  opacity: 0.8;
  z-index: 2;
  animation: petal-fall 7s linear infinite;
}

.animated-bg .petal-shape {
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg"><ellipse cx="15" cy="20" rx="10" ry="14" fill="%23ea9a97" /></svg>') no-repeat center / contain;
}

@keyframes petal-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(-10deg) scale(1);
    opacity: 0.85;
  }
  30% {
    transform: translateY(30vh) translateX(-8vw) rotate(15deg) scale(1.05);
    opacity: 0.9;
  }
  60% {
    transform: translateY(60vh) translateX(-16vw) rotate(-20deg) scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(-30vw) rotate(25deg) scale(1);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-bg .petal { display: none; }
}

main {
  max-width: 940px;
  margin: 0 auto;
}

.content-box,
footer {
  box-sizing: border-box;
  max-width: 780px;
  margin: 0 auto 2rem;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  background: var(--rp-base);
  border-radius: 32px;
  box-shadow: 0 8px 40px rgb(0 0 0 / 18%);
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.post-header {
  max-width: 940px;
  text-align: center;
}

.post-header h1 {
  margin-top: 0;
  color: var(--rp-rose);
}

.post-subtitle {
  font-size: 1.3em;
  color: var(--rp-subtle);
}

.post-author {
  color: var(--rp-subtle);
}

.author-link,
.author-link:visited,
.author-link:hover,
.author-link:active {
  color: inherit;
  text-decoration: none;
}

.post-date {
  color: var(--rp-iris);
}

.post-header > :last-child {
  margin-bottom: 0;
}

.post-index {
  display: grid;
  gap: 0.85rem;
  max-width: 780px;
  margin: 0 auto 2rem;
}

.art-card {
  text-align: center;
}

.art-card h3 {
  margin-top: 0;
}

.art-card img,
.art-card canvas {
  display: block;
  width: 80%;
  margin: 0 auto;
}

.post-card {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.5rem;
  border-radius: 18px;
  font-size: 1.05rem;
  transition: background-color 0.15s;
}

.post-card:hover,
.post-card:focus-within {
  background: var(--rp-overlay);
}

.post-card-title {
  margin: 0;
  font-size: 1.35em;
}

.post-card-title a,
.post-card-title a:visited {
  color: var(--rp-rose);
  text-decoration: none;
}

.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.post-card p a {
  position: relative;
  z-index: 1;
}

.post-card-subtitle {
  margin: 0.35rem 0 0;
}

.post-card-meta {
  margin: 0.5rem 0 0;
  color: var(--rp-subtle);
  font-size: 0.9em;
}

.post-card-description {
  margin: 0.6rem 0 0;
  line-height: 1.45;
}

.post-card-links {
  margin: 0.65rem 0 0;
  font-size: 0.9em;
}

footer {
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vh;
}

.footer-links img {
  image-rendering: pixelated;
  border-radius: 6px;
  border: 4px outset var(--rp-rose);
}

.footer-links a:hover img,
.footer-links a:focus-visible img {
  border-color: var(--rp-iris);
}

#socials a {
  color: var(--rp-rose);
  transition: color 0.2s;
}

#socials a:hover {
  color: var(--rp-iris);
}

.contact {
  margin: 0 0 1.5rem;
  text-align: center;
}

.contact h1 {
  margin: 1.25rem 0 0.65rem;
  font-size: 1.5em;
}

.contact > p {
  margin: 0 0 1rem;
}

#message-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  text-align: left;
}

#message-form > span {
  display: none;
}

#message-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rp-highlight-med);
  border-radius: 0.6rem;
  background: var(--rp-base);
  color: var(--rp-text);
  font: inherit;
  resize: vertical;
  overflow-y: hidden;
}

#message-form button {
  align-self: flex-start;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rp-rose);
  border-radius: 0.6rem;
  background: var(--rp-rose);
  color: var(--rp-base);
  font: inherit;
  cursor: pointer;
}

#message-form button:hover,
#message-form button:focus-visible {
  border-color: var(--rp-iris);
  background: var(--rp-iris);
}

#message-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

#message-status {
  margin: 0;
  color: var(--rp-subtle);
  font-size: 0.9em;
}

#message-status:empty {
  display: none;
}

.social-icon {
  display: block;
  width: 74px;
  height: 74px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

main img,
main canvas {
  max-width: 100%;
  height: auto;
}

main img.post-image {
  display: block;
  width: auto;
  max-height: 700px;
  margin: 1.25rem auto;
}

.time-chart {
  margin: 1.5rem auto;
  text-align: center;
}

.time-chart img {
  display: block;
  width: 100%;
  height: auto;
}

.time-chart figcaption {
  margin-top: 0.5rem;
  color: var(--rp-subtle);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--rp-surface);
  border-radius: 8px;
}

a {
  color: var(--rp-rose);
}

a:visited {
  color: var(--rp-iris);
}