/* Keshia — a warm, playful holding page. No external assets or frameworks. */
:root {
  color-scheme: light;
  --paper: #fcf8f1;
  --ink: #303b45;
  --muted: #747a7b;
  --coral: #db927b;
  --sage: #7b9588;
  --line: rgba(65, 74, 79, .17);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--paper) url('/assets/images/paper-pattern.svg') repeat center center / 600px 500px;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Avenir Next', Avenir, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(252,248,241,.95) 0%, rgba(252,248,241,.78) 37%, rgba(252,248,241,.08) 92%);
}
.page-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow-x: clip;
  padding: 34px clamp(24px, 4.4vw, 76px) 25px;
}
.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.wordmark { display: inline-flex; align-items: center; gap: 13px; }
.wordmark-symbol {
  display: grid;
  place-content: center;
  position: relative;
  height: 46px;
  width: 46px;
  border: 1.6px solid var(--ink);
  border-radius: 51% 44% 48% 44%;
  font: italic 700 32px/.9 Georgia, 'Times New Roman', serif;
  transform: rotate(-10deg);
  padding-bottom: 5px;
}
.wordmark-dot { position: absolute; color: var(--coral); right: 7px; bottom: 8px; font: 700 27px/.6 Georgia,serif; }
.wordmark-label { font-size: 12px; letter-spacing: .045em; color: #70777b; }
.header-note { color: #777e7d; font-size: 12px; letter-spacing: .02em; }
.header-note-spark { display: inline-block; margin-right: 6px; color: var(--coral); font-size: 19px; vertical-align: -2px; }
.site-main { display: grid; place-items: center; min-height: 0; }
.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1120px);
  min-height: 560px;
  isolation: isolate;
  padding: 70px 10px 56px;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(83%, 760px);
  height: 69%;
  left: 50%; top: 51%;
  transform: translate(-50%, -50%) rotate(-3deg);
  background: #fffdf9;
  border: 1px solid rgba(185, 162, 141, .17);
  border-radius: 49% 53% 47% 49% / 50% 43% 56% 48%;
  box-shadow: 0 21px 95px rgba(116, 95, 70, .045);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #8b8c85;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .21em;
}
.eyebrow-line { width: 26px; height: 1px; background: #baaf9f; transform: rotate(-7deg); }
.eyebrow-line:last-child { transform: rotate(7deg); }
.name-wrap { position: relative; width: fit-content; margin: 10px auto 31px; padding: 0 19px 9px 1px; }
h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(92px, 12.4vw, 180px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: 1.1;
}
.name-full-stop { color: var(--coral); padding-left: .01em; }
.name-underline { position: absolute; left: 8%; bottom: -3%; width: 89%; height: 30px; transform: rotate(-1.5deg); }
.hero-lead {
  margin: 0;
  color: #46525a;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: clamp(23px, 2.5vw, 33px);
  font-style: italic;
  line-height: 1.35;
}
.hero-description {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.85;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  padding: 11px 17px;
  color: #6b716e;
  background: #f3f0e9;
  border: 1px solid rgba(99, 103, 92, .13);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
}
.status-dot { display: inline-block; width: 7px; height: 7px; background: #92b29b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(146,178,155,.15); }
.doodle { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.doodle-flower { width: clamp(105px, 13vw, 150px); left: 2%; top: 19%; transform: rotate(-15deg); }
.doodle-pencil { width: clamp(145px, 19vw, 230px); right: 0%; top: 10%; transform: rotate(4deg); }
.doodle-loop { width: clamp(118px, 16vw, 175px); left: 7%; bottom: 13%; transform: rotate(-12deg); }
.doodle-spark { width: clamp(67px, 8vw, 93px); right: 13%; bottom: 15%; transform: rotate(7deg); }
.site-footer { color: #83847f; font-size: 11px; letter-spacing: .02em; }
.site-footer span[aria-hidden] { color: var(--coral); font-size: 15px; vertical-align: -1px; }
.footer-right { white-space: nowrap; }
@media (min-width: 1400px) { .hero { min-height: 660px; } }
@media (max-width: 900px) {
  .hero { min-height: 540px; }
  .hero::before { width: 97%; height: 74%; }
  .doodle-flower { left: -2%; top: 6%; width: 102px; }
  .doodle-pencil { right: -4%; top: 3%; width: 155px; }
  .doodle-loop { left: 0%; bottom: 4%; width: 135px; }
  .doodle-spark { right: 1%; bottom: 4%; width: 75px; }
}
@media (max-width: 640px) {
  .page-shell { padding: 21px 22px 23px; }
  .wordmark-symbol { width: 41px; height: 41px; font-size: 29px; }
  .wordmark-label, .header-note { display: none; }
  .hero { min-height: 630px; padding: 110px 0; }
  .hero::before { width: 118%; height: 66%; border-radius: 49% 50% 52% 51% / 42% 47% 56% 49%; }
  .eyebrow { gap: 8px; font-size: 9px; letter-spacing: .17em; }
  .eyebrow-line { width: 15px; }
  h1 { font-size: clamp(82px, 19vw, 127px); }
  .name-wrap { margin-top: 11px; margin-bottom: 30px; }
  .name-underline { height: 21px; }
  .hero-lead { font-size: clamp(22px, 5.6vw, 29px); }
  .hero-description { font-size: 13px; max-width: 320px; margin: 16px auto 0; }
  .desktop-break { display: none; }
  .status-pill { margin-top: 29px; font-size: 10px; }
  .doodle-flower { left: -5%; top: 5%; width: 83px; }
  .doodle-pencil { right: -8%; top: 7%; width: 115px; }
  .doodle-loop { left: -6%; bottom: 6%; width: 103px; }
  .doodle-spark { right: -5%; bottom: 8%; width: 69px; }
  .site-footer { font-size: 10px; gap: 16px; }
  .site-footer > span:first-child { max-width: 255px; line-height: 1.5; }
}
@media (max-width: 360px) {
  .page-shell { padding-inline: 17px; }
  h1 { font-size: 79px; }
  .hero { min-height: 550px; }
  .hero-lead { font-size: 21px; }
  .doodle-pencil { width: 98px; }
  .doodle-flower { width: 74px; }
}
@media (prefers-reduced-motion: no-preference) {
  .doodle-flower { animation: float-a 8s ease-in-out infinite; }
  .doodle-pencil { animation: float-b 9s ease-in-out infinite; }
  .doodle-spark { animation: float-c 7s ease-in-out infinite; }
  @keyframes float-a { 0%, 100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-8px) rotate(-12deg); } }
  @keyframes float-b { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(9px) rotate(1deg); } }
  @keyframes float-c { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-6px) rotate(14deg); } }
}