/* MAIN, HEADER, SECTION, FOOTER */

body { 
  background: repeating-linear-gradient(180deg, transparent 0 2.3rem, var(--clr240) 2.3rem 2.4rem);
}

main {
  width: 48rem;
  margin: 0 0 0 50vw;
}

header,
section,
footer {
  width: 48rem;
  grid-template-columns: 48rem;
  grid-template-rows: auto;
}

header {
  padding: 19.2rem 0 9.6rem 0; /* t8 b4 */
}

section:has(h2) {
  padding: 2.4rem 0 9.6rem 0; /* t1 b4 */
}

section {
  padding: 0 0 9.6rem 0; /* b4 */
}

footer {
  contain-intrinsic-size: 19.2rem; /* 8 lines */
  height: 19.2rem; /* 8 lines */
  padding: 9.6rem 0 2.4rem 0; /* t4 b1 */
}





/* TEXT */

h1 {
  font-family: "EB Garamond", serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3rem;
  margin: .04rem 0 -.64rem 0;
}

h3 {
  color: var(--clr62);
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: .616rem 0 -.616rem 0;
}

h2 {
  font-size: 1.2rem;
  line-height: 2rem;
  margin: .964rem 0 -.564rem 0;
}

p {
  font-family: "PTSerifWebRegular", serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  margin: .606rem 0 -.606rem 0;
  padding: 2.4rem 0 0 0;
}

footer > p {
  font-family: "InterVariable", -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 2rem;
  margin: .964rem 0 -.564rem 0;
  padding: 0;
}

em {
  color: inherit;
}

i {
  font-family: "PTSerifWebItalic", serif;
}

mark {
  padding: .4rem 0 1rem 0;
}

span {
  font-size: 1.6rem;
  line-height: 1.6rem;
  width: 4.8rem;
  margin-left: -4.8rem;
}





/* NAVIGATION */

nav {
  color: var(--clr38);
  position: fixed;
  display: block;
  left: 3.6rem;
  width: 28.4rem;
  height: auto;
  margin: 0;
  padding: 0;
}

nav:focus,
nav:hover {
  color: var(--clr15);
}

nav.n1 {
  top: 2.8rem;
}

nav.n2 {
  bottom: 3.2rem;
}

li {
  font-size: 1.2rem;
  line-height: 2rem;
  height: 2rem;
  margin: .564rem 0 -.564rem 0;
  padding: 0 0 0 2.4rem;
}





/* IMAGES */

.img1,
.img2,
.img3 {
  position: relative;
  display: block;
  width: 48rem;
  margin: 0;
}

.img1 {
  height: 36rem;
  padding: 0 0 12rem 0;
}

.img2 {
  height: 24rem;
  padding: 12rem 0 0 0;
}

.img3 {
  height: 24rem;
  padding: 0;
}

.img3 > circle {
  fill: var(--clrb5);
}

.img3 > line {
  fill: none;
  stroke: var(--clrb5);
  stroke-width: 2.25px;
}





/* IPHONE */

@media all and (max-width: 960px) {
  body {
    background: repeating-linear-gradient(180deg, transparent 0 4.9vw, var(--clr240) 4.9vw 5vw);
  }

  main {
    width: 90vw;
    margin: 0 5vw 0 5vw;
  }
  
  header,
  section,
  footer {
    width: 90vw;
    grid-template-columns: 90vw;
  }

  header {
    padding: 0 0 20vw 0;
  }

  section:has(h2) {
    padding: 5vw 0 20vw 0;
  }

  section {
    padding: 0 0 20vw 0;
  }

  footer {
    contain-intrinsic-size: 40vw;
    height: 40vw;
    padding: 20vw 0 5vw 0;
  }

  h1 {
    font-size: 5vw;
    line-height: 6.25vw;
    margin: .11vw 0 -1.41vw 0;
  }

  h2, h3, li, p, footer > p {
    font-size: 3vw;
    line-height: 5vw;
    margin: 1.41vw 0 -1.41vw 0;
  }

  mark {
    padding: 1vw 0 2.5vw 0;
  }

  p {
    padding: 5vw 0 0 0;
  }

  span {
    display: none;
  }

  nav {
    position: relative;
    left: 0;
    width: 90vw;
    margin: 0;
  }

  nav.n1 {
    display: none;
  }
  
  nav.n2 {
    bottom: auto;
    padding: 5vw 0 40vw 0;
  }

  li {
    height: 5vw;
    padding: 0 0 0 5vw;
  }

  .img1,
  .img2,
  .img3 {
    width: 90vw;
  }
  
  .img1 {
    height: 60vw;
    padding: 0 0 15vw 0;
  }
  
  .img2 {
    height: 50vw;
    padding: 25vw 0 0 0;
  }

  .img3 {
    height: 45vw;
  }
}

mark {
  background: linear-gradient(
    -100deg,
    hsla(48,92%,75%,.3),
    hsla(48,92%,75%,.5) 95%,
    hsla(48,92%,75%,.1)
  );
  color: var(--clr15);
}

@media (prefers-color-scheme:dark) {
  mark {
    background: linear-gradient(
      -100deg,
      hsla(48,92%,15%,.3),
      hsla(48,92%,15%,.5) 95%,
      hsla(48,92%,15%,.1)
    );
    color: var(--clr15);
  }
}

@font-face {
  font-display: swap;
  font-family: "EB Garamond";
  font-kerning: normal;
  font-style: normal;
  font-weight: 500;
  src: url("g.woff2") format("woff2");
  unicode-range:U+0020,U+0026,U+002C-002E,U+0030-0039,U+0040-005A,U+0061-007A;
}

@font-face {
  font-display: swap;
	font-family: "PTSerifWebRegular";
  font-kerning: normal;
  font-style: normal;
  font-weight: 400;
	src: url("pr.woff2") format("woff2");
  unicode-range:U+0020,U+0026,U+002C-002E,U+0030-0039,U+0040-005A,U+0061-007A;
}

@font-face {
  font-display: swap;
	font-family: "PTSerifWebItalic";
  font-kerning: normal;
  font-style: normal;
  font-weight: 400;
	src: url("pi.woff2") format("woff2");
  unicode-range:U+0020,U+0026,U+002C-002E,U+0030-0039,U+0040-005A,U+0061-007A;
}

html {
  scrollbar-width: auto;
}

body::-webkit-scrollbar {
  display: auto;
}