/* Thundercloud Creative — coming soon */
:root {
  --lavender: #ebdff8;      /* logo background */
  --periwinkle: #a9adf5;    /* logo cloud */
  --violet: #564ac0;        /* text accent */
  --ink: #241a3d;
  --muted: #5a5470;
  --lime: #d8ee48;          /* logo ring */
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--lavender);
  -webkit-font-smoothing: antialiased;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Left: photo */
.photo { position: relative; overflow: hidden; background: var(--periwinkle); }
.photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* Right: content */
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(2rem, 6vw, 5rem);
  max-width: 38rem;
}

.logo {
  width: clamp(130px, 14vw, 200px);
  height: auto;
  margin-bottom: .5rem;
}

h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 650;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--violet);
}

.content > p:not(.foot) {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 32rem;
}

/* Social + Etsy */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }

.links svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.links svg .dot { fill: currentColor; stroke: none; }

.icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--violet);
  transition: background-color .2s, transform .2s;
}

.etsy {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 48px; padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}

.icon:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.etsy:hover { background: var(--violet); color: var(--white); transform: translateY(-2px); }

.links a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.foot { font-size: .8125rem; color: var(--muted); margin-top: 1.5rem; }

/* Mobile: photo on top, content below */
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .photo { height: 55vh; }
  .content { align-items: center; text-align: center; margin: 0 auto; }
  .links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}