@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');

:root {
  --orange: #315cff;
  --serif: 'Source Serif 4', 'Times New Roman', serif;
  --site-paper: #f8f7f2;
  --site-ink: #111111;
  --site-blue: #315cff;
  --site-pink: #ef63b5;
  --site-yellow: #e6ef54;
  --site-green: #40b985;
  --site-lilac: #9f8cf3;
}

em,
i,
.card-note,
.tip .scribble,
.landing-footer p {
  font-style: normal !important;
}

.site-loading { min-height: 100dvh; display: grid; place-items: center; color: var(--muted); }
.landing-header { max-width: none; height: 88px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--site-ink); background: var(--site-paper); }
.landing-logo { display: flex; width: 210px; }
.landing-logo img, .landing-footer img { width: 100%; height: auto; object-fit: contain; }
.landing-header nav, .landing-actions { display: flex; align-items: center; gap: 30px; }
.landing-actions { justify-content: flex-end; }
.landing-header nav a, .landing-header .text-action, .landing-footer a { color: var(--site-ink); font-size: 13px; text-decoration: none; }
.button-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--site-ink); background: var(--site-ink); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.button-action:hover, .button-action:focus-visible { background: var(--site-blue); border-color: var(--site-blue); }
.button-action.large { min-height: 54px; padding: 0 28px; }
.text-action { color: var(--site-ink); text-underline-offset: 5px; }
.text-action:hover { text-decoration: underline; }
.landing-main { max-width: none; min-height: auto; padding: 0; }

.landing-hero { min-height: calc(100dvh - 88px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr); border-bottom: 1px solid var(--site-ink); background: var(--site-paper); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vw 7vw 8vw 4vw; }
.hero-copy h1 { max-width: 800px; margin: 0 0 34px; font: 600 clamp(68px, 7.8vw, 126px)/.86 var(--serif); letter-spacing: -.065em; text-wrap: balance; }
.hero-copy h1 span { display: block; }
.hero-copy h1 img { display: block; width: min(100%, 780px); height: auto; margin-top: .08em; mix-blend-mode: multiply; }
.hero-lede { max-width: 560px; margin: 0; color: var(--site-ink); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }

.color-field { position: relative; min-height: 640px; overflow: hidden; border-left: 1px solid var(--site-ink); background: #fff4f0; isolation: isolate; }
.color-orb { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; filter: blur(9px); opacity: .98; transform: translateZ(0); }
.orb-one { width: 26%; left: 3%; top: 2%; background: radial-gradient(circle at 50% 48%, #735cff 0 14%, #2477c5 20%, #ec477e 40%, #ffd75c 63%, #ffd75c44 71%, transparent 76%); }
.orb-two { width: 31%; right: 2%; top: 5%; background: radial-gradient(circle at 51% 47%, #b8dc3e 0 28%, #dff04c 42%, #ffd561 59%, #ffd5613d 70%, transparent 76%); }
.orb-three { width: 27%; left: 1%; top: 38%; background: radial-gradient(circle at 50% 50%, #16517c 0 30%, #238bc6 43%, #8ddcf6 57%, #f19ae2 68%, transparent 76%); }
.orb-four { width: 25%; right: 25%; top: 35%; background: radial-gradient(ellipse at 56% 48%, #ff8ee0 0 12%, #68aaf3 26%, #4e8bd9 42%, #f17bd6 61%, #f17bd63d 70%, transparent 76%); }
.orb-five { width: 36%; left: 2%; bottom: -7%; background: radial-gradient(circle at 50% 50%, #8e003f 0 33%, #b0004e 46%, #e73b72 60%, #ff9ea2 69%, transparent 77%); }
.orb-six { width: 28%; left: 40%; bottom: -3%; background: radial-gradient(circle at 48% 49%, #144886 0 26%, #335fd9 42%, #9167f2 58%, #ef73dc 69%, transparent 77%); }
.orb-seven { width: 28%; right: -2%; bottom: 3%; background: radial-gradient(circle at 48% 49%, #63d895 0 27%, #7eeeb8 43%, #9af0cf 56%, #f3dd65 68%, transparent 77%); }
.field-word { position: absolute; z-index: 2; color: var(--site-ink); font: 500 clamp(24px, 3vw, 48px)/1 var(--serif); letter-spacing: -.04em; }
.field-word-one { top: 30%; left: 34%; }
.field-word-two { right: 7%; bottom: 35%; }

.studio-story { padding: 120px 4vw; background: var(--site-ink); color: #fff; }
.story-intro { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 8vw; margin-bottom: 92px; }
.story-intro h2, .product-window h2, .quiet-values h2, .membership h2 { margin: 0; font: 600 clamp(52px, 6.2vw, 96px)/.95 var(--serif); letter-spacing: -.055em; }
.story-intro p { max-width: 320px; margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.story-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 1px solid #fff; list-style: none; }
.story-steps li { min-height: 260px; padding: 24px 9% 10px 0; border-right: 1px solid #fff; }
.story-steps li + li { padding-left: 9%; }
.story-steps li:last-child { border-right: 0; }
.story-steps span { font-size: 12px; }
.story-steps h3 { margin: 56px 0 14px; font: 600 38px var(--serif); letter-spacing: -.035em; }
.story-steps p { max-width: 320px; margin: 0; color: #d7d7d7; line-height: 1.5; }

.product-window { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 7vw; padding: 130px 4vw; border-bottom: 1px solid var(--site-ink); background: #dbe2ff; }
.window-copy h2 { font-size: clamp(48px, 5.5vw, 84px); }
.window-copy > p { max-width: 460px; margin: 32px 0 0; font-size: 18px; line-height: 1.55; }
.window-frame { border: 1px solid var(--site-ink); background: var(--site-paper); }
.window-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--site-ink); }
.window-bar span { width: 9px; height: 9px; border: 1px solid var(--site-ink); border-radius: 50%; }
.window-bar small { margin-left: auto; font-size: 9px; }
.window-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px; }
.window-grid img, .window-add { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.window-add { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; border: 1px solid var(--site-ink); text-align: center; }
.window-add small { margin-top: 8px; }

.quiet-values { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 5vw; padding: 110px 4vw; border-bottom: 1px solid var(--site-ink); background: var(--site-paper); }
.quiet-values h2 { max-width: 450px; font-size: clamp(48px, 5vw, 74px); }
.quiet-values h3 { margin: 6px 0 16px; font: 600 26px var(--serif); letter-spacing: -.03em; }
.quiet-values p { margin: 0; color: #4e4e4e; font-size: 14px; line-height: 1.55; }

.membership { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; align-items: center; padding: 120px 8vw; border-bottom: 1px solid var(--site-ink); background: #dff26b; }
.membership h2 { max-width: 800px; }
.membership > div > p { max-width: 600px; margin: 30px 0 0; font-size: 18px; line-height: 1.55; }
.membership-card { padding: 38px; border: 1px solid var(--site-ink); background: var(--site-paper); }
.membership-card strong { display: block; margin: 0 0 18px; font: 600 64px var(--serif); letter-spacing: -.05em; }
.membership-card p { font-size: 14px; line-height: 1.75; }
.membership-card .button-action { width: 100%; margin: 18px 0; }
.membership-card small { display: block; line-height: 1.5; }

.landing-footer { max-width: none; display: flex; align-items: center; justify-content: space-between; padding: 34px 4vw; border: 0; background: var(--site-paper); }
.landing-footer > a:first-child { width: 180px; }
.auth-dialog { width: min(500px, calc(100% - 24px)); padding: 52px; border: 1px solid var(--site-ink); border-radius: 0; background: var(--site-paper); box-shadow: none; }
.auth-dialog::backdrop { background: #315cffd9; }
.auth-dialog h2 { margin: 0 0 14px; font: 600 48px/.98 var(--serif); letter-spacing: -.045em; }
.auth-dialog > button { position: absolute; top: 12px; right: 15px; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 27px; }
.auth-dialog form { display: grid; margin-top: 28px; }
.auth-dialog label { margin: 14px 0 6px; }
.auth-dialog label span { color: var(--muted); font-weight: 400; }
.auth-dialog input { font-size: 16px; }
.auth-dialog form .button-action { width: 100%; margin-top: 18px; }
.auth-message { display: none; margin: 15px 0 0; padding: 11px; background: #dbe2ff; font-size: 12px; }
.auth-message.visible { display: block; }
.auth-message.error { background: #f4d7e8; color: #72043f; }
.auth-switch { margin: 20px 0 0; font-size: 12px; }
.auth-switch a { text-underline-offset: 4px; }
.studio-header .account-actions { display: flex; align-items: center; gap: 8px; }
.account-email { max-width: 170px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.studio-header + .landing-main { display: none; }
footer > div { display: flex; gap: 15px; }

@media (max-width: 900px) {
  .landing-header { grid-template-columns: 1fr auto; }
  .landing-header nav { display: none; }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 620px; }
  .color-field { min-height: 620px; border-top: 1px solid var(--site-ink); border-left: 0; }
  .story-intro, .product-window, .membership { grid-template-columns: 1fr; }
  .quiet-values { grid-template-columns: 1fr 1fr; }
  .quiet-values h2 { grid-column: 1/-1; margin-bottom: 30px; }
  .membership-card { max-width: 530px; }
  .account-email { display: none; }
}

@media (max-width: 600px) {
  .landing-header { height: 76px; padding: 0 5vw; }
  .landing-logo { width: 170px; }
  .landing-actions { gap: 12px; }
  .landing-actions .text-action { display: none; }
  .landing-actions .button-action { min-height: 42px; padding: 0 14px; }
  .hero-copy { min-height: 560px; padding: 70px 5vw; }
  .hero-copy h1 { margin-bottom: 26px; font-size: clamp(58px, 18vw, 78px); }
  .hero-lede { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .color-field { min-height: 500px; }
  .studio-story, .product-window, .quiet-values, .membership { padding: 78px 5vw; }
  .story-intro { gap: 28px; margin-bottom: 58px; }
  .story-intro h2, .product-window h2, .quiet-values h2, .membership h2 { font-size: 50px; }
  .story-steps { grid-template-columns: 1fr; }
  .story-steps li, .story-steps li + li { min-height: 0; padding: 25px 0 34px; border-right: 0; border-bottom: 1px solid #fff; }
  .story-steps h3 { margin-top: 25px; }
  .window-grid { grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .quiet-values { grid-template-columns: 1fr; }
  .quiet-values h2 { grid-column: auto; }
  .membership-card { padding: 26px; }
  .landing-footer { padding: 28px 5vw; }
  .auth-dialog { padding: 52px 24px 40px; }
  .auth-dialog h2 { font-size: 40px; }
  .studio-header .account-actions { position: absolute; top: 17px; right: 5%; }
  .studio-header .account-actions #account { display: none; }
}