:root {
  --mint: #E8FFDB;
  --lavender: #F2E4F5;
  --wine: #4A2222;
  --wine-soft: #6b3e45;
  --bg: #0f080b;
  --bg-elevated: #181015;
  --text: #E8FFDB;
  --text-dim: rgba(232,255,219,.72);
  --line: rgba(232,255,219,.18);
  --shadow: rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 20%, rgba(232,255,219,.07), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(242,228,245,.09), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(74,34,34,.65), transparent 36%),
    linear-gradient(180deg, #130a0d 0%, #0c0608 100%);
  -webkit-font-smoothing: antialiased;
}
body, button, a { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; }
a { color: inherit; }
.site-shell {
  min-height: 100svh;
  width: min(100%, 1600px);
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: 34px clamp(24px, 5.2vw, 88px) 28px;
  overflow: hidden;
}
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header { min-height: 44px; position: relative; z-index: 3; }
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: clamp(220px, 24vw, 300px);
  height: auto;
}
.top-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font: 600 10px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 1.9px;
  color: var(--text-dim);
}
.status-dot { width: 7px; height: 7px; flex: none; border-radius: 100%; background: var(--mint); box-shadow: 0 0 0 5px rgba(232,255,219,.08); }
.hero {
  flex: 1;
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(380px, .93fr);
  align-items: center;
  gap: 40px;
  padding: 72px 0 60px;
}
.hero-copy { padding-bottom: 14px; position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  font: 600 10px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 2.1px;
  color: var(--text-dim);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.015);
}
.eyebrow-rule { display: block; width: 33px; height: 1px; background: var(--mint); }
h1 { margin: 0; font-size: clamp(64px, 6.9vw, 116px); letter-spacing: -.085em; line-height: .99; font-weight: 400; }
h1 em { color: var(--lavender); font-weight: 400; }
.hero-description {
  font: 17px/1.7 Arial, Helvetica, sans-serif;
  letter-spacing: -.18px;
  color: var(--text-dim);
  margin: 34px 0 30px;
  max-width: 640px;
}
.launch-notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px 12px 12px;
  background: linear-gradient(135deg, rgba(232,255,219,.14), rgba(242,228,245,.17));
  color: var(--text);
  border: 1px solid rgba(242,228,245,.25);
  border-radius: 100px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font: bold 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1.6px;
}
.starburst { font: 22px/1 Georgia, serif; transform: rotate(-10deg); color: var(--lavender); }
.art { height: 535px; position: relative; isolation: isolate; }
.photo {
  position: absolute;
  background: rgba(16,10,14,.82);
  padding: 13px 13px 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .34), 0 2px 10px rgba(0, 0, 0, .20);
  border-radius: 3px;
  border: 1px solid rgba(232,255,219,.1);
}
.photo-back { width: 268px; height: 345px; top: 65px; left: 4%; transform: rotate(-19deg); background: rgba(242,228,245,.07); }
.photo-middle { width: 278px; height: 357px; top: 38px; left: 23%; transform: rotate(13deg); background: rgba(232,255,219,.07); }
.photo-front { width: 305px; height: 404px; top: 80px; left: 21%; transform: rotate(-3.5deg); z-index: 2; padding: 15px 15px 19px; }
.image-fill { position: relative; overflow: hidden; height: 84%; border-radius: 1px; }
.image-fill-back { background: radial-gradient(circle at 25% 35%, rgba(232,255,219,.65) 0 11%, transparent 38%), linear-gradient(128deg,#8f6d7f 6%,#503748 55%,#261823 100%); }
.image-fill-middle { background: radial-gradient(circle at 72% 32%,rgba(242,228,245,.85) 0 5%, transparent 38%), linear-gradient(165deg,#97a68f,#5d5b7f 48%,#27222f); }
.image-fill-front { height: 320px; background: radial-gradient(ellipse at 45% 25%,#9f7ba1 2%,#5e4364 43%, #1f1627 100%); display: flex; align-items: center; justify-content: center; }
.glow { position: absolute; display: block; width: 75%; height: 46%; left: -7%; top: 48%; border-radius: 50%; background: rgba(232,255,219,.22); filter: blur(40px); transform: rotate(-30deg); }
.glow-two { width: 43%; height: 54%; left: 59%; top: -10%; background: rgba(242,228,245,.28); filter: blur(31px); }
.photo-grain { position: absolute; inset: 0; opacity: .23; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.photo-center-copy { position: relative; z-index: 1; color: #f7f9ef; text-align: center; font-size: 35px; font-style: italic; line-height: 1.13; letter-spacing: -.9px; transform: rotate(3.5deg); text-shadow: 0 1px 20px rgba(255,255,255,.12); }
.photo-caption { padding: 10px 0 0 5px; font-size: 17px; font-style: italic; color: var(--text); }
.photo-bottom { display: flex; justify-content: space-between; align-items: center; padding: 15px 6px 0; }
.handwritten { font-size: 23px; font-style: italic; letter-spacing: -1px; }
.photo-index { font: 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 1px; color: var(--text-dim); }
.round-sticker {
  position: absolute;
  z-index: 3;
  right: -1%;
  bottom: 28px;
  width: 127px;
  height: 127px;
  display: grid;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--wine);
  transform: rotate(17deg);
  font: 700 15px/1.12 Arial, Helvetica, sans-serif;
  letter-spacing: .5px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.26);
}
.round-sticker span { position: absolute; top: 16px; right: 25px; font: 25px Georgia, serif; }
.art-spark { position: absolute; font-size: 45px; color: var(--lavender); }
.art-spark-1 { top: 2px; right: 6%; }
.art-spark-2 { bottom: 0; left: 3%; font-size: 27px; }
.site-footer {
  border-top: 1px solid var(--line);
  min-height: 57px;
  padding-top: 21px;
  color: var(--text-dim);
  font: 12px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .2px;
}
.site-footer nav { display: flex; gap: clamp(18px, 2.5vw, 38px); align-items: center; }
.site-footer a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); border-color: currentColor; }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; border-radius: 2px; }
/* Placeholder policy pages: replace content with the actual policies before publishing the app. */
.policy-shell { max-width: 1050px; }
.policy-main { flex: 1; padding: clamp(100px, 17vh, 170px) 0 130px; }
.policy-kicker { font: 700 11px/1.5 Arial, Helvetica, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim); }
.policy-main h1 { margin: 24px 0 25px; font-size: clamp(56px, 9vw, 100px); }
.policy-main p { max-width: 550px; font: 17px/1.8 Arial, Helvetica, sans-serif; color: var(--text-dim); }
.policy-back { display: inline-block; margin-top: 28px; font: bold 12px/1.5 Arial, Helvetica, sans-serif; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.inline-mail { color: var(--mint); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.site-footer nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 9px; }

@media (max-width: 1020px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 10px; }
  h1 { font-size: clamp(57px, 7.4vw, 78px); }
  .photo-back { left: -3%; }
  .photo-middle { left: 16%; }
  .photo-front { left: 14%; }
  .round-sticker { right: -6%; }
}
@media (max-width: 760px) {
  .site-shell { padding: 24px 25px 20px; }
  .brand-logo { width: min(62vw, 245px); }
  .top-note { font-size: 9px; letter-spacing: 1px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 82px 0 20px; gap: 35px; }
  .hero-copy { padding: 0; }
  .eyebrow { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 28px; }
  h1 { font-size: clamp(58px, 10.5vw, 84px); }
  .hero-description { font-size: 15px; line-height: 1.6; margin: 23px 0 23px; }
  .desktop-break { display: none; }
  .art { width: min(100%, 430px); height: 445px; margin: auto; }
  .photo-back { width: 209px; height: 276px; top: 62px; left: 4%; }
  .photo-middle { width: 218px; height: 287px; top: 28px; left: 22%; }
  .photo-front { width: 235px; height: 317px; top: 86px; left: 21%; padding: 11px; }
  .image-fill-front { height: 250px; }
  .photo-center-copy { font-size: 27px; }
  .photo-bottom { padding: 10px 6px 0; }
  .handwritten { font-size: 18px; }
  .photo-index { font-size: 9px; }
  .photo-caption { font-size: 14px; }
  .round-sticker { right: 0; bottom: 13px; width: 98px; height: 98px; font-size: 12px; }
  .round-sticker span { top: 12px; right: 19px; font-size: 20px; }
  .art-spark-1 { right: 1%; }
  .site-footer { gap: 15px; flex-wrap: wrap; padding-top: 19px; }
  .site-footer nav { gap: 20px; justify-content: flex-start; column-gap: 15px; }
  .policy-main { padding: 100px 0 120px; }
}
@media (max-width: 380px) {
  .site-shell { padding-inline: 20px; }
  .top-note { font-size: 8px; }
  .art { height: 397px; }
  .photo-front { left: 18%; top: 70px; }
  .photo-middle { left: 18%; }
  .round-sticker { right: -5%; bottom: 0; }
  .site-footer { font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .photo-front { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3.5deg); } 50% { transform: translateY(-7px) rotate(-2.5deg); } }
}