:root {
  --cream: #f9ecd9;
  --paper: #fffdf9;
  --ink: #2d1f14;
  --muted: #6b5e52;
  --terracotta: #c26e45;
  --terracotta-dark: #8b4730;
  --sage: #7b9e6b;
  --sage-soft: #dbe8d3;
  --gold: #d4a84b;
  --line: rgba(82, 41, 28, 0.12);
  --shadow: 0 28px 80px rgba(82, 41, 28, 0.1);
  --display: Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cream); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }

.page-shell { min-height: 100vh; overflow: hidden; background: linear-gradient(180deg, #f9ecd9 0%, #fffdf9 61%, #fff 100%); }
.site-header, main, .site-footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; }
.wordmark { text-decoration: none; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.wordmark i { color: var(--terracotta); font-style: normal; }
.header-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-dot, .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px rgba(123, 158, 107, .14); }

.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); align-items: center; gap: clamp(48px, 8vw, 112px); min-height: 690px; padding: 52px 0 92px; }
.hero-copy { position: relative; z-index: 2; max-width: 560px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--terracotta-dark); font-size: 12px; font-weight: 800; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.hero h1 { max-width: 640px; margin: 24px 0 25px; font-family: var(--display); font-size: clamp(56px, 6.4vw, 92px); font-weight: 500; letter-spacing: -.075em; line-height: .98; }
.hero h1 em, .card-title em { color: var(--terracotta); font-style: italic; font-weight: 400; }
.hero-lede { max-width: 470px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.hero-note { margin: 27px 0 0; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .02em; }

.visual-stage { position: relative; min-height: 550px; isolation: isolate; }
.visual-stage::before { position: absolute; inset: 7% 3% 7% 7%; z-index: -2; border: 1px solid rgba(194, 110, 69, .18); border-radius: 46% 54% 48% 52% / 55% 44% 56% 45%; background: rgba(255, 253, 249, .42); content: ""; transform: rotate(-7deg); }
.visual-stage::after { position: absolute; top: 12%; right: 5%; z-index: -1; width: 54%; height: 72%; border-radius: 48%; background: radial-gradient(circle, rgba(212, 168, 75, .2), transparent 69%); content: ""; filter: blur(8px); }
.stage-glow { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .85; }
.stage-glow-one { top: 5%; left: 9%; width: 125px; height: 125px; background: rgba(216, 160, 153, .28); }
.stage-glow-two { right: 1%; bottom: 7%; width: 170px; height: 170px; background: rgba(123, 158, 107, .18); }
.paper-card { position: absolute; border: 1px solid rgba(82, 41, 28, .1); border-radius: 25px; box-shadow: var(--shadow); }
.paper-card-back { top: 13%; left: 7%; width: 56%; height: 60%; padding: 28px; background: #f5e6d3; transform: rotate(-12deg); }
.tiny-label { color: rgba(111, 56, 38, .7); font-family: var(--display); font-size: 13px; font-style: italic; }
.scribble { display: block; height: 60%; margin-top: 20%; border-top: 1px solid rgba(194, 110, 69, .28); border-bottom: 1px solid rgba(194, 110, 69, .18); transform: rotate(-8deg); }
.scribble::after { display: block; width: 42%; height: 1px; margin: 28% 0 0 28%; background: rgba(123, 158, 107, .45); content: ""; transform: rotate(20deg); }
.paper-card-main { top: 17%; right: 7%; width: 62%; min-height: 390px; padding: 27px 30px 24px; background: rgba(255, 253, 249, .94); transform: rotate(6deg); animation: float-card 9s ease-in-out infinite; }
.card-topline, .card-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mini-mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--terracotta); color: #fff8f0; font-family: var(--display); font-size: 15px; letter-spacing: -.1em; }
.card-orbit { position: relative; display: grid; width: 150px; height: 150px; margin: 48px auto 34px; place-items: center; border: 1px solid rgba(194, 110, 69, .24); border-radius: 50%; }
.card-orbit::before, .card-orbit::after { position: absolute; border: 1px solid rgba(123, 158, 107, .3); border-radius: 50%; content: ""; }
.card-orbit::before { inset: 16px -12px; transform: rotate(32deg); }
.card-orbit::after { inset: -11px 17px; transform: rotate(-40deg); }
.card-orbit span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); }
.card-orbit span:nth-child(1) { top: 12px; right: 25px; }
.card-orbit span:nth-child(2) { bottom: 14px; left: 20px; width: 9px; height: 9px; background: var(--sage); }
.card-orbit span:nth-child(3) { right: 11px; bottom: 42px; width: 7px; height: 7px; background: var(--terracotta); }
.card-kicker { margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.card-title { margin: 0; font-family: var(--display); font-size: clamp(34px, 3.3vw, 49px); letter-spacing: -.07em; line-height: .95; }
.card-footer { margin-top: 35px; padding-top: 15px; border-top: 1px solid var(--line); }
.card-heart { color: var(--terracotta); font-size: 18px; }
.floating-note { position: absolute; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(82, 41, 28, .1); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 16px 42px rgba(82, 41, 28, .08); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(10px); }
.note-one { top: 8%; right: 1%; transform: rotate(7deg); animation: float-note 8s ease-in-out 1s infinite; }
.note-two { right: 0; bottom: 13%; transform: rotate(-5deg); animation: float-note 8s ease-in-out 2.2s infinite; }
.note-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 8px; background: #f5e6d3; color: var(--terracotta); }
.note-icon-green { background: var(--sage-soft); color: var(--sage); }
.soft-shape { position: absolute; border-radius: 50%; opacity: .65; }
.shape-one { bottom: 5%; left: 10%; width: 70px; height: 70px; border: 1px solid rgba(194, 110, 69, .28); }
.shape-two { top: 28%; left: -2%; width: 23px; height: 23px; background: var(--gold); opacity: .8; }

.meaning-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 10vw, 150px); padding: 110px 0 125px; border-top: 1px solid var(--line); }
.section-intro h2, .development-status h2 { max-width: 440px; margin: 17px 0 16px; font-family: var(--display); font-size: clamp(36px, 4vw, 55px); font-weight: 500; letter-spacing: -.065em; line-height: 1; }
.section-intro > p:last-child, .development-status > div > p:last-child { max-width: 390px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); align-self: end; gap: 18px; }
.principle { min-height: 198px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 253, 249, .62); }
.principle:nth-child(2) { transform: translateY(24px); background: rgba(245, 230, 211, .55); }
.principle:nth-child(3) { background: rgba(219, 232, 211, .42); }
.principle-number { color: var(--terracotta); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.principle h3 { margin: 47px 0 8px; font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.principle p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.development-status { position: relative; display: grid; grid-template-columns: 85px 1fr; gap: 28px; align-items: center; margin: 0 0 120px; padding: 48px 54px; border: 1px solid rgba(194, 110, 69, .2); border-radius: 28px; background: linear-gradient(110deg, rgba(245, 230, 211, .8), rgba(255, 253, 249, .65)); overflow: hidden; }
.status-orb { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 14px 35px rgba(82, 41, 28, .08); }
.status-orb span { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--terracotta), var(--gold)); box-shadow: 12px -8px 0 -5px var(--sage); }
.development-status h2 { max-width: 580px; margin-bottom: 12px; font-size: clamp(28px, 3.2vw, 43px); }
.status-line { position: absolute; right: -45px; bottom: -60px; width: 190px; height: 190px; border: 1px solid rgba(123, 158, 107, .25); border-radius: 50%; }
.status-line::before, .status-line::after { position: absolute; inset: 16px; border: inherit; border-radius: inherit; content: ""; }
.status-line::after { inset: 34px; }
.site-footer { display: flex; justify-content: space-between; padding: 26px 0 33px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@keyframes float-card { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-10px); } }
@keyframes float-note { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@media (prefers-reduced-motion: reduce) { .paper-card-main, .floating-note { animation: none; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 25px; min-height: 0; padding-top: 42px; }
  .hero-copy { max-width: 640px; }
  .visual-stage { min-height: 540px; width: min(100%, 620px); margin: 0 auto; }
  .meaning-section { grid-template-columns: 1fr; gap: 45px; }
  .section-intro h2 { max-width: 550px; }
}
@media (max-width: 560px) {
  .site-header, main, .site-footer { width: min(100% - 36px, 1180px); }
  .site-header { padding: 24px 0; }
  .wordmark { font-size: 27px; }
  .header-status { font-size: 10px; letter-spacing: .06em; }
  .hero { padding: 48px 0 62px; }
  .hero h1 { margin-top: 20px; font-size: clamp(51px, 16vw, 72px); }
  .visual-stage { min-height: 390px; margin-top: 15px; transform: scale(.91); transform-origin: top center; width: 110%; margin-left: -5%; margin-bottom: -30px; }
  .paper-card-main { min-height: 300px; padding: 20px; }
  .paper-card-back { padding: 20px; }
  .card-orbit { width: 110px; height: 110px; margin: 30px auto 24px; }
  .card-title { font-size: 32px; }
  .card-footer { margin-top: 22px; }
  .floating-note { padding: 10px 12px; font-size: 10px; }
  .note-two { right: -3%; bottom: 8%; }
  .meaning-section { padding: 78px 0 90px; }
  .principles { grid-template-columns: 1fr; gap: 12px; }
  .principle, .principle:nth-child(2) { min-height: 0; padding: 19px; transform: none; }
  .principle h3 { margin: 17px 0 5px; }
  .development-status { grid-template-columns: 1fr; gap: 22px; margin-bottom: 78px; padding: 28px 24px; }
  .status-orb { width: 58px; height: 58px; }
  .status-orb span { width: 19px; height: 19px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 26px; }
}