:root {
  --black:#171916;
  --white:#f9f8f1;
  --line:#17191633;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  font-family:var(--body);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  background:var(--white);
  color:var(--black);
}

h1, h2, h3, p {
  margin:0;
}

h1, h2, h3 {
  font-family:var(--display);
  line-height:.94;
  letter-spacing:-.055em;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button, a {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:3px solid #236dff;
  outline-offset:6px;
}

button:disabled {
  cursor:default;
}

::selection {
  color:var(--white);
  background:var(--black);
}

.shell {
  width:min(1440px,calc(100% - 100px));
  margin-inline:auto;
}

.skip {
  position:absolute;
  top:-100px;
  left:15px;
  z-index:30;
  background:white;
  color:black;
  padding:12px;
}

.skip:focus {
  top:10px;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.site-header {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  position:relative;
  z-index:5;
}

.brand {
  font-family:var(--display);
  font-size:var(--type-brand);
  letter-spacing:-.08em;
  font-weight:800;
  line-height:1;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:var(--type-control);
  line-height:var(--leading-label);
}

.site-header nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px;
}

.status {
  font-size:var(--type-small);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.status:before {
  content:'';
  width:7px;
  height:7px;
  background:currentColor;
  border-radius:50%;
}

.launch {
  display:inline-flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  min-height:49px;
  padding:12px 21px;
  border:1px solid currentColor;
  border-radius:100px;
  font-weight:600;
  font-size:var(--type-control);
  transition:transform .2s,background .2s;
}

.launch:hover {
  transform:translateY(-3px);
}

.launch .arr {
  font-size:1.4rem;
  line-height:1;
}

.arrow-link {
  font-size:var(--type-control);
  line-height:var(--leading-label);
  display:inline-flex;
  gap:22px;
  align-items:center;
  border-bottom:1px solid currentColor;
  padding:7px 0;
  font-weight:600;
}

.site-footer {
  border-top:1px solid var(--line);
  padding:25px 0 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font-size:var(--type-small);
}

.site-footer nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}

.site-footer a:hover {
  text-decoration:underline;
}

.links-line {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 24px;
  font-size:var(--type-small);
}

.unreleased {
  font-size:var(--type-small);
  opacity:.7;
}

.drawing-board {
  margin-top:0;
  border-top:1px solid var(--line);
  padding:clamp(80px,7vw,112px) 0 0;
}

.drawing-board-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:80px;
  margin-bottom:72px;
}

.drawing-board-heading .section-label {
  margin-bottom:28px;
}

.drawing-board-heading h3 {
  font-size:var(--type-subsection);
  font-weight:400;
  line-height:1.04;
}

.drawing-board-heading > p {
  max-width:39ch;
  color:#a8b5b9;
  line-height:1.8;
  padding-top:4px;
}

.idea-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding:0;
  margin:0;
  list-style:none;
}

.idea-list li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 116px;
  align-items:start;
  gap:28px;
  padding:48px 0;
  border-top:1px solid #ffffff20;
}

.idea-copy {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  column-gap:clamp(40px,5vw,80px);
  align-content:start;
}

.idea-number {
  padding-top:3px;
  color:#879ba5;
  font:400 var(--type-small)/var(--leading-label) var(--body);
  font-variant-numeric:tabular-nums;
}

.idea-copy h4 {
  grid-column:1;
  grid-row:1 / span 3;
  margin:0;
  max-width:19ch;
  font-family:var(--display);
  font-size:var(--type-card);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.idea-copy p {
  grid-column:2;
  max-width:46ch;
  color:#a8b5b9;
  line-height:1.8;
  margin-bottom:22px;
}

.idea-territory {
  grid-column:2;
  display:block;
  font-size:var(--type-small);
  line-height:1.5;
  color:#9bb6c1;
}

.idea-stage {
  font-size:var(--type-small);
  line-height:1.5;
  padding-top:4px;
  color:#a8b5b9;
}

.idea-planned .idea-stage {
  color:#c7dedc;
}

.worlds {
  --black:#e9edf2;
  --white:#0b1014;
  --line:#ffffff30;
  --muted:#a8b5b9;
  background:#0b1014;
  color:#e9edf2;
}

.worlds ::selection {
  color:#0b1014;
  background:#eef4fa;
}

.worlds .site-header {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  color:white;
}

.worlds-hero {
  position:relative;
  isolation:isolate;
  min-height:820px;
  min-height:100svh;
  overflow:hidden;
  background:#091626;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding-top:150px;
  padding-bottom:43px;
}

.worlds-landscape {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
}

.portal-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.8s ease;
}

.portal-ready .portal-canvas {
  opacity:1;
}

.portal-controls {
  display:flex;
  align-items:center;
  flex-shrink:0;
  color:#c8dfe9;
}

.portal-controls[hidden] {
  display:none;
}

.portal-toggle {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1rem;
  min-height:42px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#dcebf2;
  font-size:.75rem;
  line-height:1.3;
}

.portal-toggle:hover {
  color:#fff;
}

.portal-toggle:after {
  content:'';
  position:absolute;
  inset:0 -13px;
}

.portal-toggle-icon {
  display:block;
  width:1rem;
  font-size:var(--type-body);
}

.worlds-hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#02091255 0%,#02091208 35%,#02091244 64%,#020912d9 100%);
  z-index:-2;
}

.worlds-hero h1 {
  font-family:var(--body);
  font-size:var(--type-hero);
  font-weight:400;
  line-height:.91;
  letter-spacing:-.075em;
  margin:22px 0 40px;
  text-shadow:0 3px 30px #0002;
}

.worlds-hero h1 em {
  font-family:var(--editorial);
  font-weight:400;
  letter-spacing:-.06em;
}

.worlds-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}

.worlds-intro p {
  font-size:var(--type-lead);
  max-width:37ch;
  color:#d2dce5;
}

.estonia-word {
  display:inline-block;
}

@supports (background-clip:text) or (-webkit-background-clip:text) {
  .estonia-word {
    background-image:linear-gradient(90deg,
      #d2dce5 0% 32%,
      #4c97db 36% 42%,
      #38434e 46% 50%,
      #f8fbff 54% 60%,
      #d2dce5 64% 100%);
    background-size:500% 100%;
    background-position:0% 50%;
    background-repeat:no-repeat;
    background-clip:text;
    -webkit-background-clip:text;
    animation:estonia-colors 10s linear infinite;
    animation-play-state:paused;
  }

  .portal-animating .estonia-word {
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation-play-state:running;
  }
}

@keyframes estonia-colors {
  0%, 78% { background-position:0% 50%; }
  96%, 100% { background-position:100% 50%; }
}

@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  .worlds-hero .estonia-word {
    animation:none;
    background:none;
    color:inherit;
    -webkit-text-fill-color:currentColor;
  }
}

.worlds-intro .launch {
  background:#eef4f5;
  color:#0c141b;
  border-color:#eef4f5;
}

.worlds-intro .meta {
  color:#bcced9;
  max-width:14ch;
}

.worlds-section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  padding:82px 0 40px;
}

.worlds-section-heading h2 {
  font-size:var(--type-section);
  line-height:var(--leading-heading);
  font-weight:400;
  max-width:12ch;
}

.worlds-section-heading p {
  max-width:31ch;
  color:#9eabb6;
  font-size:var(--type-body);
}

.world-chapter {
  display:grid;
  grid-template-columns:1fr 1.22fr;
  gap:60px;
  min-height:650px;
  align-items:center;
  padding:30px 0 75px;
  border-bottom:1px solid var(--line);
}

.chapter-number {
  display:flex;
  align-items:center;
  gap:18px;
}

.chapter-number:after {
  content:'';
  height:1px;
  flex:1;
  background:var(--line);
}

.chapter-copy h3 {
  font-family:var(--editorial);
  font-weight:400;
  font-size:var(--type-project);
  margin:38px 0 27px;
  letter-spacing:-.06em;
}

.chapter-copy p {
  font-size:var(--type-lead);
  color:#a8b5b9;
  max-width:30ch;
  margin-bottom:30px;
}

.chapter-copy .status {
  font-size:var(--type-small);
  color:#c4d0d3;
  margin-bottom:27px;
}

.chapter-visual {
  position:relative;
  min-height:545px;
  overflow:hidden;
  background:#1e3934;
  border-radius:50% 50% 0 0;
  align-self:stretch;
}

.chapter-visual .phone {
  position:absolute;
  top:90px;
  left:15%;
  width:42%;
  border:6px solid #17231d;
  border-radius:26px;
  transform:rotate(-9deg);
  box-shadow:0 30px 40px #0003;
}

.chapter-visual .phone.second {
  top:180px;
  left:55%;
  width:39%;
  transform:rotate(9deg);
}

.chapter-cosmic {
  padding-top:75px;
  grid-template-columns:1.22fr 1fr;
}

.chapter-cosmic .chapter-visual {
  background:#102235;
  border-radius:0 0 50% 50%;
  order:-1;
}

.chapter-cosmic .chapter-visual img {
  position:absolute;
  top:-7%;
  width:105%;
  height:115%;
  object-fit:contain;
  mix-blend-mode:screen;
  transform:rotate(20deg);
}

.worlds-tools {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(60px,7vw,112px);
  padding:clamp(96px,8vw,128px) 0;
}

.worlds-tool {
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:25px;
}

.worlds-tool img {
  width:52px;
  border-radius:12px;
}

.worlds-tool h3 {
  font-size:var(--type-title);
  line-height:1.12;
  font-weight:500;
  margin:20px 0 24px;
}

.worlds-tool p:not(.meta) {
  font-size:var(--type-body);
  color:#a8b5b9;
  line-height:1.8;
  margin-bottom:28px;
  max-width:35ch;
}

.worlds-tool .meta {
  color:var(--muted);
  margin-bottom:32px;
  line-height:1.7;
}

.worlds-tool .links-line {
  gap:22px 32px;
}

.worlds-about {
  padding:clamp(128px,11vw,176px) 0 120px;
  display:grid;
  grid-template-columns:.75fr 1.5fr;
  gap:60px;
}

.worlds-about h2 {
  font-size:var(--type-section);
  line-height:var(--leading-heading);
  font-weight:400;
  max-width:18ch;
  margin-bottom:40px;
}

.worlds-about > div > p {
  color:#a8b5b9;
  max-width:48ch;
  font-size:var(--type-lead);
  margin-bottom:40px;
  line-height:1.8;
}

.worlds-about h2 em {
  font-family:var(--editorial);
  font-weight:400;
}

.founder-note {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:60px;
  padding:96px 0 104px;
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 65% 100%,#23495726,transparent 65%);
}

.founder-note-copy {
  display:flex;
  flex-direction:column;
  align-items:start;
  min-width:0;
  gap:36px;
}

.founder-orbit {
  position:relative;
  display:block;
  width:min(460px,100%);
  justify-self:end;
  aspect-ratio:1.7;
  isolation:isolate;
}

.founder-orbit-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .8s ease;
}

.founder-orbit-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:4rem/1 var(--editorial);
  color:#b6d1d9;
}

.black-hole-ready .founder-orbit-canvas {
  opacity:1;
}

.black-hole-ready .founder-orbit-fallback {
  visibility:hidden;
}

.founder-orbit-toggle {
  position:absolute;
  right:0;
  bottom:-8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  min-width:44px;
  padding:6px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#a8b5b9;
  font-size:var(--type-small);
}

.founder-orbit-toggle[hidden] {
  display:none;
}

.founder-orbit-toggle:hover {
  color:#fff;
  background:transparent;
}

.founder-orbit-toggle-icon {
  width:1rem;
  font-size:var(--type-body);
}

.founder-note-message, .founder-note blockquote {
  margin:0;
  min-width:0;
}

.founder-note blockquote {
  font-family:var(--display);
  font-size:var(--type-quote);
  font-weight:400;
  line-height:1.17;
  letter-spacing:-.045em;
  overflow-wrap:break-word;
}

.founder-note blockquote em {
  font-family:var(--editorial);
  font-weight:400;
  color:#b6d1d9;
}

.founder-note figcaption {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:3px;
  margin-top:40px;
  padding-left:36px;
  font-size:var(--type-small);
  color:#a8b5b9;
}

.founder-note figcaption:before {
  content:'';
  position:absolute;
  left:0;
  top:.75em;
  width:22px;
  height:1px;
  background:#9fbbc4;
}

.founder-signature {
  color:#e9edf2;
  font-family:var(--display);
  font-size:var(--type-lead);
}

.worlds .site-footer {
  padding-block:38px 44px;
}

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px);
  }

  .world-chapter {
    gap:35px;
  }

  .chapter-visual {
    min-height:500px;
  }

  .worlds-tools {
    gap:35px;
  }

  .idea-copy {
    column-gap:32px;
  }

  .worlds-about, .founder-note {
    gap:35px;
  }
}

@media(max-width:900px) {
  .idea-list li {
    grid-template-columns:24px minmax(0,1fr);
    gap:20px;
  }

  .idea-copy {
    display:block;
  }

  .idea-copy h4 {
    max-width:none;
    margin-bottom:20px;
  }

  .idea-stage {
    grid-column:2;
    padding:0;
  }
}

@media(max-width:760px) {
  .shell {
    width:calc(100% - 36px);
  }

  .site-header {
    min-height:86px;
    gap:12px;
  }

  .site-header nav {
    gap:12px;
    font-size:var(--type-small);
  }

  .site-header .nav-about {
    display:none;
  }

  .drawing-board {
    margin-top:0;
    padding-top:64px;
  }

  .drawing-board-heading {
    flex-direction:column;
    align-items:start;
    gap:32px;
    margin-bottom:48px;
  }

  .idea-list {
    grid-template-columns:minmax(0,1fr);
  }

  .idea-list li {
    grid-template-columns:22px minmax(0,1fr);
    gap:16px;
    padding:36px 0;
  }

  .idea-stage {
    grid-column:2;
    padding:0;
  }

  .idea-copy p {
    margin-bottom:20px;
  }

  .site-footer {
    flex-direction:column;
    align-items:start;
    gap:16px;
  }

  .site-footer nav {
    gap:18px;
  }

  .worlds .site-header {
    top:0;
  }

  .worlds-hero {
    min-height:760px;
    min-height:100svh;
    padding-top:180px;
    padding-bottom:35px;
  }

  .worlds-landscape {
    object-position:62% center;
  }

  .worlds-hero h1 {
    margin:25px 0 32px;
    max-width:12ch;
  }

  .worlds-intro {
    align-items:start;
    flex-direction:column;
    gap:23px;
  }

  .worlds-intro p {
    max-width:35ch;
  }

  .worlds-intro .meta {
    display:none;
  }

  .worlds-section-heading {
    padding:50px 0 35px;
    align-items:start;
    flex-direction:column;
    gap:25px;
  }

  .worlds-section-heading h2 {
    max-width:13ch;
  }

  .world-chapter {
    grid-template-columns:1fr;
    gap:28px;
    padding:0 0 45px;
    min-height:0;
  }

  .chapter-copy h3 {
    margin:30px 0 20px;
  }

  .chapter-copy p {
    max-width:35ch;
    margin-bottom:20px;
  }

  .chapter-copy .status {
    margin-bottom:22px;
  }

  .chapter-visual {
    min-height:460px;
    border-radius:45% 45% 0 0;
  }

  .chapter-visual .phone {
    top:50px;
  }

  .chapter-visual .phone.second {
    top:130px;
  }

  .chapter-cosmic {
    padding-top:38px;
  }

  .chapter-cosmic .chapter-visual {
    order:0;
  }

  .worlds-tools {
    grid-template-columns:1fr;
    gap:72px;
    padding:72px 0;
  }

  .worlds-tool {
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }

  .worlds-tool img {
    width:47px;
  }

  .worlds-about {
    grid-template-columns:1fr;
    gap:36px;
    padding:96px 0 80px;
  }

  .founder-note {
    grid-template-columns:minmax(0,1fr);
    gap:48px;
    padding:64px 0 72px;
  }

  .founder-orbit {
    width:min(380px,100%);
  }

}

@media(max-width:380px) {
  .shell {
    width:calc(100% - 28px);
  }

  .site-header nav {
    gap:10px;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *, *:before, *:after {
    animation:none!important;
    transition:none!important;
  }
}

.worlds .worlds-hero .site-header {
  top:0;
}