:root {
  --ground:    #d8ccbc;
  --red:       #e30b19;
  --box-fill:  #d3c7b7;
  --ink:       #000000;

  --grid-line: rgba(201, 0, 0, 0.5);

  --link-ink:    #7f1010;
  --link-hover:  #3a67ed;
  --ink-inverse: #ffffff;

  --stroke-alpha: 100%;
  --stroke: color-mix(in srgb, var(--red) var(--stroke-alpha), transparent);

  --font-display: "Bungee Shade", cursive;
  --font-mono:    "Major Mono Display", monospace;
}

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

html {
  font-size: calc(100vw / 380);
  background: var(--ground);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
}

.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
}

.stage {
  position: relative;
  flex: none;
  width: 380rem;
  height: 946rem;
  transform: translateX(-5rem);
  z-index: 1;
}

.stage > * { position: absolute; }

.i { position: absolute; left: var(--x); top: var(--y); display: block; }
.flip { transform: scaleY(-1); }

.d-only { display: none; }

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("assets/borders/border-title-m.svg"),
    url("assets/borders/border-runners-m.svg"),
    url("assets/borders/border-exercises-m.svg"),
    url("assets/borders/border-panel-m.svg"),
    url("assets/borders/border-link-m.svg");
  background-position:
    10rem 212rem,
    11rem 384rem,
    11rem 707rem,
    10rem 467rem,
    10rem 790rem;
  background-size:
    370rem 175rem,
    368rem  86rem,
    368rem  86rem,
    370rem 243rem,
    370rem 132rem;
}

.box--title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: normal;
  color: var(--red);
  text-align: center;
}

.box--title {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box--runners   { overflow: hidden; }
.box--exercises { overflow: visible; }

.box--link {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 20.064rem;
  text-decoration: none;
}

.box--link span {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--link-ink);
}

.box--link:hover,
.box--link:focus-visible { background-color: var(--link-hover); }

.box--link:hover span,
.box--link:focus-visible span { color: var(--ink-inverse); }

.panel {
  overflow: hidden;
}

.panel::before,
.panel::after { content: ""; position: absolute; pointer-events: none; }

.panel::before {
  height: 215rem;
  background-image: repeating-linear-gradient(
    to right, var(--grid-line) 0 1px, transparent 1px 8rem);
}

.panel::after {
  left: 0;
  width: 100%;
  background-image: repeating-linear-gradient(
    to bottom, var(--grid-line) 0 1px, transparent 1px 8rem);
}

.tagline {
  position: absolute;
  background-color: var(--box-fill);
  background-image:
    linear-gradient(color-mix(in srgb, var(--box-fill) 80%, transparent) 0 100%),
    url("assets/film-grain.webp");
  background-size: max(100vw, 140.625vh) auto;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.tagline p {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: normal;
  color: var(--ink);
  text-align: center;
}

.logo { left: 12rem; top: 54rem; width: 366rem; height: 148rem; display: block; }

.box--title {
  left: 12rem; top: 214rem; width: 366rem; height: 171rem;
}
.box--title h1 { font-size: 38rem; width: 342rem; }

.box--runners {
  left: 12rem; top: 385rem; width: 366rem; height: 84rem;
}
.run-l { width: 70.36rem; height: 68.09rem; }
.run-s { width: 39.3rem;  height: 38.03rem; }
.r1 { --x: 10rem;     --y: 15.77rem; }
.r2 { --x: 88.6rem;   --y: 45.83rem; }
.r3 { --x: 136.14rem; --y: 15.77rem; }
.r4 { --x: 202.7rem;  --y: 45.83rem; }
.r5 { --x: 250rem;    --y: 15.77rem; }
.r6 { --x: 316.56rem; --y: 45.83rem; }

.panel         { left: 12rem; top: 469rem; width: 366rem; height: 239rem; }
.panel::before { left: 7rem; top: 0; width: 100%; }
.panel::after  { top: 8rem; height: 216.5rem; }

.tagline   { left: 19rem; top: 31rem; width: 328rem; height: 164rem;
             padding: 12rem 9.5rem; }
.tagline p { font-size: 27rem; width: 309rem; }

.box--exercises {
  left: 12rem; top: 708rem; width: 366rem; height: 84rem;
}

.box--link      { left: 12rem; top: 792rem; width: 366rem; height: 128rem; }
.box--link span { font-size: 24rem; }
.rope   { width: 36.73rem; height: 44.16rem; }
.lifter { width: 57.15rem; height: 56.58rem; --x: 154.85rem; --y: 26rem; }
.j1 { --x: 18rem;  --y: 37rem; }
.j2 { --x: 82rem;  --y: 4rem;  }
.j3 { --x: 248rem; --y: 4rem;  }
.j4 { --x: 312rem; --y: 37rem; }

@media (min-width: 768px) {

  html { font-size: min(1px, calc(100vw / 1440), calc(100vh / 1024)); }
  html { font-size: min(1px, calc(100vw / 1440), calc(100svh / 1024)); }

  .stage { width: 1440rem; height: 1024rem; transform: none; }

  .stage::before {
    background-image:
      url("assets/borders/border-title-d.svg"),
      url("assets/borders/border-runners-d.svg"),
      url("assets/borders/border-exercises-d.svg"),
      url("assets/borders/border-panel-d.svg"),
      url("assets/borders/border-link-d.svg");
    background-position:
      322rem 284rem,
      322rem 466rem,
      669rem 466rem,
      322rem 597.5rem,
      321rem 837rem;
    background-size:
      795rem 182rem,
      351rem 135rem,
      447rem 135rem,
      795rem 244rem,
      351rem 132rem;
  }

  .d-only { display: block; }
  .m-only { display: none; }

  .logo { left: 537rem; top: 129rem; width: 366rem; height: 148rem; }

  .i--diet { --x: 1046rem; --y: 218rem; width: 69rem; height: 66.95rem; }

  .box--title {
    left: 324rem; top: 286rem; width: 791rem; height: 178rem;
  }
  .box--title h1 { font-size: 46rem; width: auto; white-space: nowrap; }

  .box--runners {
    left: 324rem; top: 468rem; width: 347rem; height: 131rem;
  }
  .run-l { width: 111rem; height: 107.419rem; }
  .run-s { width: 62rem;  height: 60rem; }
  .r1 { --x: -25rem; --y: 19rem; }
  .r2 { --x: 99rem;  --y: 66rem; }
  .r3 { --x: 174rem; --y: 19rem; }
  .r4 { --x: 279rem; --y: 66rem; }

  .panel         { left: 324rem; top: 600rem; width: 791rem; height: 239rem; }
  .panel::before { left: 7rem; top: 0; width: 785rem; }
  .panel::after  { top: 7rem; height: 217rem; }

  .tagline   { left: 143rem; top: 48rem; width: 506rem; height: 122rem;
               padding: 12rem 8rem;
               border: 1px solid var(--stroke); }
  .tagline p { font-size: 32rem; width: 488rem; }

  .box--exercises {
    left: 671rem; top: 468rem; width: 443rem; height: 131rem;
  }

  .box--link { left: 323rem; top: 839rem; width: 347rem; height: 128rem; }
  .rope   { width: 62.376rem; height: 75rem; }
  .lifter { width: 71rem; height: 70.298rem; --x: 186rem; --y: 59rem; }
  .j1 { --x: 18rem;  --y: 56rem; }
  .j2 { --x: 99rem;  --y: 0;     }
  .j3 { --x: 283rem; --y: 0;     }
  .j4 { --x: 369rem; --y: 56rem; }
}