@font-face {
  font-family: Lora;
  src: url("assets/fonts/Lora-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: Mulish;
  src: url("assets/fonts/Mulish-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #181121;
  --plum: #36203f;
  --paper: #fbf2e9;
  --muted: #ddcad9;
  --gold: #e6bf8b;
  --rule: #61475d;
  --display: Lora, Georgia, serif;
  --body: Mulish, system-ui, sans-serif;
  --gutter: clamp(1.125rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(ellipse at 76% 16%, #402045 0, transparent 43%),
    linear-gradient(164deg, #1c142a 0%, var(--night) 60%, #241429 100%);
  font: 1rem/1.6 var(--body);
}

img { display: block; max-inline-size: 100%; }
a { color: inherit; }
p, h1, h2, figure { margin: 0; }

a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  border-radius: 4px;
}

.frame {
  inline-size: min(calc(100% - var(--gutter) * 2), 78rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset: 0 auto auto 1rem;
  z-index: 4;
  transform: translateY(-160%);
  padding: .55rem .9rem;
  background: var(--paper);
  color: var(--night);
}

.skip-link:focus { transform: translateY(.8rem); }

.site-header {
  min-block-size: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}

.wordmark {
  display: inline-grid;
  justify-items: center;
  inline-size: clamp(5.75rem, 10vw, 7.25rem);
  text-decoration: none;
}

.wordmark img { inline-size: 100%; block-size: auto; }

.wordmark span {
  margin-block-start: -.16rem;
  color: var(--gold);
  font-size: .56rem;
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 1;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: clamp(.75rem, 3vw, 1.6rem);
}

.header-link, .site-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--muted);
  font-size: .94rem;
  text-underline-offset: .32em;
  text-decoration-color: transparent;
}

.header-link:hover, .header-link[aria-current="page"], .site-footer a:hover {
  color: var(--paper);
  text-decoration-color: var(--gold);
}

.hero {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 6vw, 5rem);
}

.hero-copy { position: relative; z-index: 1; }

h1, h2 { font-family: var(--display); font-weight: 400; }

.hero-message {
  color: var(--gold);
  font-size: clamp(2.15rem, calc(3.35vw + .7rem), 4.25rem);
  letter-spacing: -.045em;
  line-height: 1.07;
}

.hero-app-subtitle {
  max-inline-size: 33ch;
  margin-block-start: .9rem;
  font: 400 clamp(1.25rem, calc(1.1vw + .95rem), 1.85rem)/1.25 var(--display);
  text-wrap: balance;
}

.hero-description {
  max-inline-size: 43ch;
  margin-block-start: clamp(1.15rem, 2vw, 1.7rem);
  color: var(--muted);
  font-size: clamp(1rem, calc(.52vw + .83rem), 1.2rem);
  line-height: 1.65;
}

.store-downloads {
  container-type: inline-size;
  margin-block-start: clamp(1.7rem, 3vw, 2.25rem);
  scroll-margin-block-start: 1.5rem;
}

.store-label {
  position: relative;
  z-index: 1;
  margin-block-end: .7rem;
  color: var(--gold);
  font-size: clamp(1rem, calc(.55vw + .9rem), 1.15rem);
  font-weight: 700;
}

.stores {
  --badge-height: clamp(2.625rem, 14.5cqi, 3.6rem);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(.55rem, 2cqi, 1rem);
  inline-size: fit-content;
  max-inline-size: 100%;
}

.stores::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.15rem -.9rem -.55rem;
  background: radial-gradient(ellipse, #b86b9166 0%, #93507d33 40%, transparent 72%);
  pointer-events: none;
}

.store-link { display: inline-flex; align-items: center; min-block-size: var(--badge-height); }
.store-link img { block-size: var(--badge-height); inline-size: auto; }
.store-play-badge { display: flex; align-items: center; block-size: var(--badge-height); overflow: hidden; }
.store-play-badge img { block-size: calc(var(--badge-height) * 250 / 192); inline-size: auto; max-inline-size: none; }

.hero-media {
  inline-size: 100%;
  max-inline-size: 37rem;
  justify-self: center;
}

.hero-scene {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.075;
}

.hero-scene::before {
  content: "";
  position: absolute;
  inset: 4% 0 0 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 61% 44%, #c6608b84, #74357361 46%, transparent 72%);
  pointer-events: none;
}

.scene-halo {
  position: absolute;
  inset: 0 0 auto 10%;
  inline-size: 90%;
  block-size: auto;
  opacity: .58;
}

.scene-portrait-layer {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.scene-portrait {
  position: absolute;
  inset: auto -6% -13% auto;
  block-size: 124.5%;
  aspect-ratio: 1362 / 2047;
  mask: url("assets/elzbieta-strzyga-maska.svg") center / 100% 100% no-repeat;
}

.scene-portrait-original {
  inline-size: 100%;
  block-size: 100%;
}

.scene-portrait-legs {
  /* Place the crop in the same 1280 × 1923 coordinate space as the portrait mask. */
  position: absolute;
  inset-inline-start: calc(100% * 840 / 1280);
  inset-block-start: calc(100% * 1116 / 1923);
  inline-size: calc(100% * 344 / 1280);
  block-size: auto;
  mask-image: linear-gradient(to right, transparent, #000 11%),
              linear-gradient(to bottom, transparent, #000 7%);
  mask-composite: intersect;
}

.phone {
  position: absolute;
  container-type: inline-size;
  overflow: hidden;
  padding: clamp(2px, .36vw, 5px);
  border: 1px solid #a181a2;
  border-radius: clamp(.62rem, 1.45vw, 1.45rem);
  background: #160f1d;
  box-shadow: 0 .55rem 1.45rem #100a1bb3;
  aspect-ratio: 9 / 19.45;
}

.phone-screen {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: clamp(.47rem, 1.1vw, 1.1rem);
  color: #fff6fa;
  background: linear-gradient(167deg, #491449 26%, #8f1747 61%, #e82046 100%);
  font-size: 3.6cqw;
  line-height: 1.18;
}

.phone-screen--home {
  background: url("assets/space-halo.png") center 12cqw / 100% auto no-repeat,
              linear-gradient(167deg, #491449 27%, #8f1747 61%, #e82046 100%);
}

.phone-screen::before {
  content: "";
  position: absolute;
  inset: 2cqw 35% auto;
  block-size: 4cqw;
  border-radius: 3cqw;
  background: #1b1120;
}

.screen-status { padding: 3cqw 7cqw 2cqw; font-size: 3.3cqw; }
.screen-title { margin: 7cqw 0 7cqw; font: 400 9cqw/1 var(--display); text-align: center; }
.screen-content { padding-inline: 5cqw; }
.screen-logo { block-size: 14cqw; inline-size: auto; margin: 6cqw auto 15cqw; }
.screen-greeting { font: 400 10cqw/.98 var(--display); }
.screen-greeting-note { margin-block: 2cqw 5cqw; }

.screen-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: 3cqw;
  border-radius: 3cqw;
  background: #681d71;
  text-align: center;
  font-size: 2.65cqw;
}

.screen-stats span + span { border-inline-start: 1px solid #4b164f; }
.screen-stats b { display: block; font: 400 7cqw/1.1 var(--display); }

.screen-category, .screen-guide { margin: 6cqw 0 3cqw; font: 400 5.8cqw/1.05 var(--display); }
.screen-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }

.screen-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: .82;
  border-radius: 3cqw;
  background: #683655;
}

.screen-card img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.screen-card p {
  position: absolute;
  inset: auto 0 0;
  padding: 7cqw 3cqw 3cqw;
  background: linear-gradient(transparent, #190d20d9);
  font-weight: 700;
  font-size: 3.65cqw;
}

.screen-card small {
  display: table;
  margin-block-end: 1.1cqw;
  padding: .4cqw 1cqw;
  border-radius: .6cqw;
  color: #531954;
  background: #fbe0d2;
  font-weight: 400;
}

.screen-tabs {
  position: absolute;
  inset: auto 6% 4%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  block-size: 15cqw;
  border-radius: 5cqw;
  background: #491449;
}

.screen-tabs img { inline-size: 8cqw; block-size: 8cqw; object-fit: contain; }

.phone--rear {
  inset: auto auto 11% 7%;
  inline-size: 22%;
  transform: rotate(-10deg);
}

.phone--front {
  inset: auto auto 3% 24%;
  inline-size: 23.5%;
  transform: rotate(7deg);
}

.hero-caption {
  position: relative;
  display: grid;
  justify-items: end;
  gap: .55rem;
  margin-block-start: .5rem;
  color: var(--muted);
  font-size: .81rem;
  text-align: end;
}

.hero-experience {
  inline-size: min(100%, 17rem);
  padding: .8rem 1rem .9rem;
  border: 1px solid #937154;
  border-radius: .95rem;
  background: linear-gradient(150deg, #36203f, #21152b);
  color: var(--paper);
  text-align: center;
}

.hero-experience .lotus-icon { inline-size: 1.55rem; block-size: 1.55rem; margin: 0 auto .25rem; }
.hero-experience strong { display: block; color: var(--gold); font: 400 1.27rem/1.2 var(--display); }
.hero-experience p + p { margin-block-start: .55rem; padding-block-start: .55rem; border-block-start: 1px solid var(--rule); }

.founder, .spaces, .approach, .mission {
  padding-block: clamp(2.2rem, 6vw, 4.7rem);
  border-block-end: 1px solid var(--rule);
  scroll-margin-block-start: 1.25rem;
}

.founder h2, .spaces h2, .approach h2, .mission h2, .newsletter h2 {
  font-size: clamp(1.8rem, calc(1.5vw + 1.32rem), 2.9rem);
  letter-spacing: -.035em;
  line-height: 1.15;
}

.lotus-icon {
  display: block;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--gold);
  background-color: currentColor;
  mask: url("assets/lotus.svg") center / contain no-repeat;
}

.founder {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

.hero + .founder { border-block-start: 1px solid var(--rule); }

.founder-heading > .lotus-icon { margin-block-end: .75rem; }

.founder-copy p, .mission-copy p {
  max-inline-size: 66ch;
  color: var(--muted);
}

.founder-copy p + p, .mission-copy p { margin-block-start: 1rem; }
.founder-copy .founder-intro {
  color: var(--gold);
  font-size: clamp(1.02rem, calc(.6vw + .85rem), 1.2rem);
}

.spaces h2 { max-inline-size: 24ch; text-wrap: balance; }

.spaces-grid {
  display: grid;
  gap: clamp(.85rem, 2vw, 1.4rem);
  margin-block-start: clamp(1.35rem, 3vw, 2.4rem);
}

.space-card {
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: linear-gradient(150deg, #312039, #24172b);
  scroll-margin-block-start: 1.25rem;
}

.space-card--app {
  border-color: #937154;
  background: radial-gradient(ellipse at 20% 0%, #502d4d, #302038 58%, #25192c);
}

.space-card-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-block-end: 1px solid var(--rule);
  border-start-start-radius: calc(1rem - 1px);
  border-start-end-radius: calc(1rem - 1px);
  background: var(--plum);
}

.space-program-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.space-app-visual {
  background: radial-gradient(ellipse at 50% 60%, #883c73 0%, #482449 52%, #21152b 95%);
}

.space-app-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("assets/wave.svg") center / 100% auto no-repeat;
  opacity: .22;
}

.space-app-phone { inline-size: min(33%, 8rem); }
.space-app-phone--library { inset: 15% auto auto 21%; transform: rotate(-12deg); }
.space-app-phone--home { inset: 9% 21% auto auto; transform: rotate(11deg); }

.space-brand-visual {
  background: radial-gradient(ellipse at 50% 40%, #8b687d 0%, #4c344d 46%, #25192e 90%);
}

.space-brand-visual img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: min(76%, 13.3rem);
  block-size: 100%;
  object-fit: cover;
  object-position: center 8%;
  transform: translateX(-50%);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}

.space-card-copy { padding: clamp(1.2rem, 2.65vw, 2rem); }

.space-card h3 {
  margin: 0;
  font: 400 clamp(1.32rem, calc(.9vw + 1.1rem), 1.8rem)/1.18 var(--display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.space-card-copy > p { margin-block-start: .9rem; color: var(--muted); }
.space-card-copy > .space-card-lead { margin-block-start: .65rem; color: var(--gold); }

.space-app-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 0;
  padding: .75rem 0;
  border-block: 1px solid var(--rule);
  list-style: none;
}

.space-app-stats li { padding-inline: .55rem; text-align: center; }
.space-app-stats li + li { border-inline-start: 1px solid var(--rule); }
.space-app-stats strong {
  display: block;
  color: var(--gold);
  font: 400 clamp(1.05rem, calc(1vw + .85rem), 1.55rem)/1.2 var(--display);
}
.space-app-stats span { display: block; margin-block-start: .2rem; color: var(--muted); font-size: .82rem; }

.space-card-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin-block-start: .65rem;
  color: var(--gold);
  text-underline-offset: .24em;
}

.approach {
  display: grid;
  gap: clamp(1.65rem, 4vw, 3.2rem);
}

.method-steps {
  --step-size: 3rem;
  --step-gap: 1.35rem;
  --step-line: #98775d;
  position: relative;
  display: grid;
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.method-steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-size) minmax(0, 1fr);
  align-items: start;
  gap: clamp(.85rem, 3vw, 1.35rem);
}

.method-step-number {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--step-size);
  block-size: var(--step-size);
  border: 1px solid var(--step-line);
  border-radius: 50%;
  background: #2c1b35;
  color: var(--gold);
  font: 400 1rem/1 var(--display);
}

.method-steps h3 {
  margin: .1rem 0 .35rem;
  font: 400 clamp(1.2rem, calc(.8vw + 1rem), 1.65rem)/1.2 var(--display);
  color: var(--paper);
}

.method-steps p { max-inline-size: 32ch; color: var(--muted); }

@media (width < 56rem) {
  .method-steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block: var(--step-size) calc(-1 * var(--step-gap));
    inset-inline-start: calc((var(--step-size) - 1px) / 2);
    inline-size: 1px;
    background: var(--step-line);
  }
}

.mission {
  display: grid;
  align-items: center;
  gap: clamp(1.25rem, 5vw, 4.25rem);
}

.mission-note {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .9rem;
  inline-size: min(100%, 29rem);
  min-block-size: clamp(13rem, 29vw, 20rem);
  align-self: center;
  justify-self: center;
  padding: clamp(1rem, 3vw, 2rem) .65rem;
  text-align: center;
}

.mission-note::before, .mission-note::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.mission-note::before {
  background:
    radial-gradient(ellipse at 50% 35%, #76516b66 0%, transparent 48%),
    radial-gradient(ellipse, #62385c 0%, #502b4f80 40%, transparent 73%);
  filter: blur(6px);
}

.mission-note::after {
  background: url("assets/wave.svg") center / 85% auto no-repeat;
  mask-image: radial-gradient(ellipse, #000 0%, #000b 34%, transparent 73%);
  opacity: .28;
  filter: blur(1.2px);
}

.mission-note .lotus-icon {
  inline-size: clamp(2.2rem, 4.5vw, 3.3rem);
  block-size: clamp(2.2rem, 4.5vw, 3.3rem);
}

.mission-note span:not(.lotus-icon) {
  display: block;
  color: var(--gold);
  font: 400 clamp(1.35rem, calc(1.05vw + 1rem), 2rem)/1.25 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.mission-note p > span + span { margin-block-start: .45rem; }

.newsletter {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-block: clamp(2.2rem, 6vw, 4.7rem);
  border-block-end: 1px solid var(--rule);
  text-align: center;
}

.newsletter iframe {
  display: block;
  inline-size: min(100%, 72rem);
  block-size: clamp(75rem, calc(70rem + 30cqi), 84rem);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: var(--plum);
}

.newsletter-link {
  color: var(--gold);
  font-size: .9rem;
  text-underline-offset: .25em;
}

@container (width >= 64.25rem) {
  .newsletter iframe { block-size: 49rem; }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .3rem 1.25rem;
  padding-block: .95rem;
  color: var(--muted);
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
.site-footer a { gap: .37rem; }

.legal-document {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 5vw, 3.6rem) clamp(3rem, 7vw, 5rem);
  color: var(--muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.legal-document h1 {
  color: var(--paper);
  font-size: clamp(2.15rem, calc(3vw + 1rem), 3.65rem);
  letter-spacing: -.04em;
  line-height: 1.14;
}

.legal-document h2 {
  margin: 2.15rem 0 .65rem;
  color: var(--paper);
  font-size: clamp(1.25rem, calc(1vw + 1.02rem), 1.7rem);
  line-height: 1.28;
}

.legal-number { color: var(--gold); white-space: nowrap; }
.legal-section p + p { margin-block-start: .6rem; }
.legal-subpoint { padding-inline-start: 1.2rem; }
.legal-document ul { padding-inline-start: 1.4rem; }
.legal-page .site-footer { border-block-start: 1px solid var(--rule); }
.legal-page [aria-current="page"] { text-decoration-color: var(--gold); }

@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .founder { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); }
  .spaces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .approach h2 { text-align: center; }
  .method-steps { --step-size: 3.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .method-steps::before {
    content: "";
    position: absolute;
    inset-block-start: calc((var(--step-size) - 1px) / 2);
    inset-inline: 12.5%;
    block-size: 1px;
    background: var(--step-line);
  }
  .method-steps li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--step-size) auto;
    align-content: start;
    justify-items: center;
    gap: .95rem;
    padding-inline: clamp(.5rem, 1.5vw, 1.3rem);
    text-align: center;
  }
  .mission { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}