/* theselfrule.org — single stylesheet.
   The whole composition scales with the viewport exactly like the original
   Readymag canvas zoom: 1 design unit = var(--u). Desktop canvas is 1024
   units wide, phone canvas (<= 640px) is 320 units wide. */

:root {
  --u: calc(100vw / 1024);
  --yellow: #ece44c;
  --panel-yellow: #ede95b;
  --grey: #d4d4d4;
  --grey-dim: rgba(212, 212, 212, 0.4);
  --ink: #232233;
  --ink-soft: #333333;
  --glow: 0 0 calc(6 * var(--u)) var(--yellow);
}

@font-face {
  font-family: "display-serif";
  src: url("../fonts/display-serif.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "display-condensed";
  src: url("../fonts/display-condensed.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "text-sans";
  src: url("../fonts/text-sans.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

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

html { background: #000; }

body {
  font-family: "text-sans", sans-serif;
  color: var(--grey);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------- small "web text" style (nav, footer, popup, tagline) ---------- */

.small,
.small a,
.small button {
  font-size: calc(9 * var(--u));
  line-height: calc(13 * var(--u));
  letter-spacing: calc(0.1 * var(--u));
  text-transform: uppercase;
}

/* ---------- home page ---------- */

.home {
  height: 100dvh;
  overflow: hidden;
}

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}

.home > main {
  position: relative;
  z-index: 1;
}

.nav-projects,
.nav-blog,
.nav-contact,
.btn-contribute,
.copyright,
.legal-links a {
  z-index: 2;
}

/* headline */
.home main {
  padding-top: calc(-2 * var(--u) + 0px);
  text-align: center;
}

.home h1 {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--yellow);
}

.home h1 .line-serif {
  display: block;
  margin-top: calc(-2 * var(--u));
  font-family: "display-serif", serif;
  font-size: calc(80 * var(--u));
  line-height: calc(80 * var(--u));
  letter-spacing: calc(-3.3 * var(--u));
  text-shadow: var(--glow);
}

.home h1 .line-cond {
  display: block;
  margin-top: calc(-14 * var(--u));
  font-family: "display-condensed", sans-serif;
  font-weight: 700;
  font-size: calc(80 * var(--u));
  line-height: calc(80 * var(--u));
  letter-spacing: calc(1 * var(--u));
  text-shadow: var(--glow);
}

.home .tagline {
  margin: calc(20 * var(--u)) auto 0;
  width: calc(433 * var(--u));
  color: var(--yellow);
}

/* fixed nav / footer */
.nav-projects {
  position: fixed;
  top: calc(10 * var(--u));
  left: calc(14 * var(--u));
  background: none;
  border: 0;
  color: var(--yellow);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.5s ease;
}
.nav-projects:hover { color: rgba(236, 228, 76, 0.6); }

.nav-blog {
  position: fixed;
  top: calc(10 * var(--u));
  right: calc(13 * var(--u));
  color: var(--yellow);
  transition: color 0.5s ease;
}
.nav-blog:hover { color: rgba(236, 228, 76, 0.6); }

.nav-contact {
  position: fixed;
  top: calc(50% + 18 * var(--u));
  right: calc(13 * var(--u));
  color: var(--yellow);
  transition: color 0.5s ease;
}
.nav-contact:hover { color: rgba(236, 228, 76, 0.6); }

.home .btn-contribute {
  position: fixed;
  bottom: calc(15 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(174 * var(--u));
  height: calc(50 * var(--u));
  border: 1px solid var(--yellow);
  border-radius: calc(100 * var(--u));
  font-family: "display-serif", serif;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(0.1 * var(--u));
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 calc(6 * var(--u)) rgba(236, 228, 76, 0.5);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(236, 228, 76, 0.5);
  transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease,
    text-shadow 0.5s ease;
}
.home .btn-contribute:hover {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  text-shadow: none;
  box-shadow: none;
}

/* the original text boxes carry 6u bottom padding, so visible text sits
   12u above the viewport edge */
.copyright {
  position: fixed;
  bottom: calc(12 * var(--u));
  left: calc(14 * var(--u));
  color: var(--grey-dim);
}

.legal-links a {
  position: fixed;
  bottom: calc(12 * var(--u));
  color: var(--grey-dim);
  transition: color 0.5s ease;
}
.legal-links a:hover { color: var(--grey); }
.legal-links .to-terms { right: calc(89 * var(--u)); }
.legal-links .to-privacy { right: calc(12 * var(--u)); }

/* ---------- projects popup ---------- */

.projects-popup {
  position: fixed;
  top: calc(4 * var(--u));
  left: calc(4 * var(--u));
  width: calc(332 * var(--u));
  height: calc(240 * var(--u));
  background: var(--panel-yellow);
  border-radius: calc(4 * var(--u));
  box-shadow: var(--glow);
  z-index: 10;
}

.projects-popup[hidden] { display: none; }

/* offsets below are panel-relative: the original anchors popup children to
   the viewport (panel is at 4u,4u), hence the -4u */
.popup-close {
  position: absolute;
  top: calc(6 * var(--u));
  left: calc(10 * var(--u));
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.5s ease;
}
.popup-close:hover { color: rgba(51, 51, 51, 0.6); }

.projects-popup ul { list-style: none; }

.projects-popup li {
  position: absolute;
  left: calc(10 * var(--u));
  width: calc(310 * var(--u));
}
.projects-popup li:nth-child(1) { top: calc(38 * var(--u)); }
.projects-popup li:nth-child(2) { top: calc(103 * var(--u)); }
.projects-popup li:nth-child(3) { top: calc(168 * var(--u)); }

.projects-popup li a {
  color: var(--ink);
  transition: color 0.5s ease;
}
.projects-popup li a:hover { color: rgba(35, 34, 51, 0.6); }

.projects-popup li p {
  margin-top: calc(4 * var(--u));
  color: var(--ink-soft);
}

/* ---------- blink-in load animation ---------- */

@keyframes blink-in {
  0% { opacity: 0; }
  33% { opacity: 1; }
  66% { opacity: 0; }
  100% { opacity: 1; }
}

.blink-1, .blink-2, .blink-3, .blink-4, .blink-5 {
  animation: blink-in 0.3s steps(1, end) backwards;
}
.blink-2 { animation-delay: 0.2s; }
.blink-3 { animation-delay: 0.4s; }
.blink-4 { animation-delay: 0.6s; }
.blink-5 { animation-delay: 0.8s; }

.projects-popup.is-open { animation: blink-in 0.3s steps(1, end) backwards; }

@media (prefers-reduced-motion: reduce) {
  .blink-1, .blink-2, .blink-3, .blink-4, .blink-5, .projects-popup.is-open {
    animation: none;
  }
}

/* ---------- legal pages (terms / privacy) ---------- */

.legal {
  background: #000;
}

.legal .close {
  position: fixed;
  top: calc(11 * var(--u));
  left: calc(50% + 7 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.1 * var(--u));
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.5s ease;
  z-index: 2;
}
.legal .close:hover { color: rgba(35, 34, 51, 0.6); }

.legal article {
  margin: 0 0 0 calc(14 * var(--u));
  padding-bottom: calc(60 * var(--u));
  width: calc(491 * var(--u));
  color: var(--ink-soft);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}

.legal h1 {
  font-family: "display-condensed", sans-serif;
  font-weight: 700;
  font-size: calc(80 * var(--u));
  line-height: calc(66 * var(--u));
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
  text-shadow: 0 0 calc(6 * var(--u)) var(--ink-soft);
  margin: 0;
}

.legal h1 .amp { font-family: "display-serif", serif; }

.legal h2 {
  font-family: "text-sans", sans-serif;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
  text-transform: uppercase;
  margin: 0;
}

.legal h3 {
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  text-transform: uppercase;
  margin: 0;
}

.legal p { margin: 0; }

.legal ul { margin: 0; padding-left: calc(9 * var(--u)); list-style-position: outside; }

.legal.privacy article { margin-left: calc(13 * var(--u)); }

.legal li { margin: 0; }

/* ---------- phone layout (matches the designed 320-unit canvas) ---------- */

@media (max-width: 640px) {
  :root { --u: calc(100vw / 320); }

  .home h1 .line-serif {
    margin-top: calc(12 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .home h1 .line-cond {
    margin-top: calc(-4 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .home .tagline {
    margin-top: calc(17 * var(--u));
    width: calc(296 * var(--u));
  }

  /* nav row sits in the page flow at y 470 of the 650-unit canvas */
  .nav-contact {
    top: calc(470 * var(--u));
    left: calc(12 * var(--u));
    right: auto;
  }
  .nav-projects {
    top: calc(470 * var(--u));
    left: calc(110 * var(--u));
    width: calc(100 * var(--u));
    text-align: center;
  }
  .nav-blog {
    top: calc(470 * var(--u));
    right: calc(11 * var(--u));
  }

  .legal-links .to-terms {
    left: calc(12 * var(--u));
    right: auto;
    bottom: auto;
    top: calc(540 * var(--u));
  }
  .legal-links .to-privacy {
    right: calc(12 * var(--u));
    bottom: auto;
    top: calc(540 * var(--u));
  }
  .copyright {
    left: 50%;
    transform: translateX(-50%);
    bottom: auto;
    top: calc(580 * var(--u));
  }

  .home .btn-contribute { bottom: calc(13 * var(--u)); }

  .projects-popup {
    top: auto;
    bottom: calc(11 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    width: calc(296 * var(--u));
    height: calc(280 * var(--u));
  }
  .popup-close {
    left: auto;
    right: 0;
    top: calc(13 * var(--u));
    width: calc(100 * var(--u));
    text-align: center;
  }
  .projects-popup li { width: calc(276 * var(--u)); }
  .projects-popup li:nth-child(1) { top: calc(56 * var(--u)); }
  .projects-popup li:nth-child(2) { top: calc(126 * var(--u)); }
  .projects-popup li:nth-child(3) { top: calc(196 * var(--u)); }
  .projects-popup li p { margin-top: calc(6 * var(--u)); }

  .legal .close {
    left: auto;
    right: calc(12 * var(--u));
    margin-left: 0;
    text-align: right;
    width: auto;
  }
  .legal article {
    margin-left: calc(12 * var(--u));
    width: calc(296 * var(--u));
  }
  .legal h1 {
    font-size: calc(40 * var(--u));
    line-height: calc(36 * var(--u));
  }
}