/* Roboto (Latin + Cyrillic) — self-hosted */
@font-face{font-family:"Roboto";font-weight:300;font-style:normal;font-display:swap;
  src:url("../fonts/roboto-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Roboto";font-weight:300;font-style:normal;font-display:swap;
  src:url("../fonts/roboto-cyrillic-300-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/roboto-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

:root{
  --pink:#b81673;
  --grey:#a9a8a8;
  --ink:#100f0d;
  --bg:#f4f3f4;
  /* 1 design pixel of the 1366×768 desktop artboard */
  --u:min(calc(100vw / 1366), calc(100vh / 768));
}

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

html,body{height:100%}

body{
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--bg) url("../img/bg-desktop-2560.webp") center / cover no-repeat;
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

@media (min-width:2561px){
  body{background-image:url("../img/bg-desktop-3840.webp")}
}

.stage{
  position:fixed;
  inset:0;
}

/* every block is centred on the vertical axis, top = block centre */
.divider,.title,.subtitle,.logo{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
}

/* ---------- divider: line — gear — line ---------- */
.divider{
  top:20%;
  display:flex;
  align-items:center;
  gap:calc(var(--u) * 18.3);
}
.divider__line{
  display:block;
  width:calc(var(--u) * 86.4);
  height:max(1px, calc(var(--u) * 1.3));
  background:var(--grey);
}
.divider__gear{
  display:block;
  width:calc(var(--u) * 25.2);
  height:auto;
}

/* ---------- headline ---------- */
.title{
  top:36.46%;
  font-weight:300;
  font-size:calc(var(--u) * 50);
  line-height:1.318;
  color:var(--grey);
  white-space:nowrap;
  text-align:center;
}
.title__main,.title__accent{display:inline}
.title__accent{font-weight:400;color:var(--pink)}

/* ---------- sub-headline ---------- */
.subtitle{
  top:42.03%;
  font-weight:300;
  font-size:calc(var(--u) * 25);
  line-height:1.318;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
}
.subtitle span:first-child::after{content:" "}

/* ---------- logo ---------- */
/* the wordmark is centred; the “kids” badge overhangs to the right */
.logo{
  top:58.1%;
  transform:translate(calc(-50% + var(--u) * 14.4),-50%);
  width:calc(var(--u) * 142.3);
  height:auto;
  display:block;
}

/* ---------- mobile / portrait artboard 1125×2436 ---------- */
@media (max-aspect-ratio:1/1){
  :root{ --u:min(calc(100vw / 1125), calc(100vh / 2436)); }
  body{background-image:url("../img/bg-mobile-1125.webp")}

  .divider{top:23.4%;gap:calc(var(--u) * 44)}
  .divider__line{width:calc(var(--u) * 184);height:max(1px, calc(var(--u) * 2.8))}
  .divider__gear{width:calc(var(--u) * 55.4)}

  .title{top:42.09%;font-size:calc(var(--u) * 110);line-height:1.2}
  .title__main,.title__accent{display:block}

  .subtitle{top:53.48%;font-size:calc(var(--u) * 55);line-height:1.4}
  .subtitle span{display:block}
  .subtitle span:first-child::after{content:none}

  .logo{top:71%;width:calc(var(--u) * 311);transform:translate(calc(-50% + var(--u) * 31.7),-50%)}
}

@media (prefers-reduced-motion:no-preference){
  .stage{animation:fade .8s ease-out both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}