@font-face {
  font-family: "JetBrains Mono";
  src: url("/sites/jackie/about/jetbrains-mono.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/sites/jackie/about/ibm-plex-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.portfolio-about {
  min-height: 100vh;
  background: #212121;
}

.portfolio-about .paper-noise {
  position: fixed;
  z-index: 1;
  mix-blend-mode: soft-light;
  background-size: 153px;
}

.about-page {
  --about-red: #e35342;
  --about-paper: #f2e3cf;
  --about-hand: "Gochi Hand", cursive;
  --about-serif: "Awesome Serif Semi Bold Extra Tall", Georgia, serif;
  --about-mono: "Departure Mono Regular", monospace;
  position: relative;
  overflow: clip;
  color: var(--about-red);
}

.about-page :is(h1, h2, p, ul, figure) {
  margin: 0;
}

.about-notebook {
  position: relative;
  left: 50%;
  width: 1190px;
  height: 1013px;
  transform: translateX(-50%);
}

.about-cover {
  position: absolute;
  inset: 63px auto auto 7.5px;
  width: 1175px;
  height: 824px;
  border-radius: 9px;
  border-top: 1px solid #ebebeb;
  background: var(--about-red);
  transform: rotate(-1deg);
}

.about-cover::after {
  position: absolute;
  inset: 16px 17px 17px;
  background: url('/sites/jackie/about/cover-grid.png') center / 87.5px auto repeat;
  content: '';
}

.about-paper {
  position: absolute;
  inset: 40px auto auto 40.5px;
  width: 1109px;
  height: 817px;
  background: var(--about-paper);
  transform: translateY(var(--about-paper-offset, 0px));
}

.about-paper-grid {
  position: absolute;
  inset: 0;
  background: url('/sites/jackie/about/paper-grid.png') center top / 46.5px auto repeat;
  opacity: 0.08;
  pointer-events: none;
}

.about-paper-tear {
  position: absolute;
  inset: -41px 0 auto;
  height: 41px;
  overflow: hidden;
  pointer-events: none;
}

.about-paper-tear img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  max-width: none;
}

.about-paper-tear img + img {
  left: 558px;
}

.about-paper h1 {
  position: absolute;
  inset: 58px auto auto 157px;
  color: #171717;
  font: 400 29px/1.2 var(--about-mono);
}

.about-intro {
  position: absolute;
  inset: 279px auto auto 157.72px;
  width: 727px;
  font: 600 29px/1.2 var(--about-serif);
}

.about-note {
  position: absolute;
  inset: 396.5px auto auto 134.5px;
  width: 355px;
  height: 349px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  border-radius: 1px;
  padding: 34px 10px 0;
  background: var(--about-paper);
  transform: rotate(-1deg);
  font: 400 26px/1.2 var(--about-hand);
}

.about-note h2 {
  font: inherit;
}

.about-note ul {
  padding: 0 0 0 20px;
  margin-top: 12px;
  list-style: none;
}

.about-note li,
.about-note button {
  font: 400 26px/36px var(--about-hand);
  color: inherit;
}

.about-note li {
  color: rgb(227 83 66 / 60%);
}

.about-note button {
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  text-align: start;
  cursor: pointer;
}

.about-note button:is(:hover, :focus-visible) {
  color: var(--about-red);
}

.about-tape {
  position: absolute;
  inset: 385px auto auto 245.5px;
  width: 114px;
  height: 31px;
  background: var(--about-red);
  pointer-events: none;
}

.about-polaroid {
  position: absolute;
  overflow: hidden;
  background: #f5ece3;
  border-radius: 11px;
  box-shadow: 1px 1px 1px rgb(0 0 0 / 22%);
}

.about-portrait {
  inset: 419px auto auto 654.5px;
  width: 201px;
  height: 248px;
  padding: 8px 10px;
}

.about-photo-window {
  position: relative;
  height: 194px;
  overflow: hidden;
}

.about-portrait .about-photo-window {
  height: 179px;
  border-radius: 3px;
}

.about-polaroid-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 8px;
}

.about-portrait .about-polaroid-caption {
  margin-top: 10px;
  height: 43px;
}

.about-landscape {
  inset: 393px auto auto 523.5px;
  width: 292px;
  height: 248px;
}

.about-landscape .about-polaroid-caption {
  font: 400 16px/1.2 "JetBrains Mono", monospace;
}

.about-vertical {
  inset: 515px auto auto 525.5px;
  width: 172px;
  height: 242px;
}

.about-vertical .about-polaroid-caption {
  height: 48px;
  font: 700 20px/1.2 "IBM Plex Sans", sans-serif;
  color: #171717;
}

.about-interests {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1097px;
  height: 657px;
}

.about-interest-card {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
}

.about-interest-card h2 {
  position: absolute;
  font: 400 22px/1.2 var(--about-hand);
}

.about-interest-card ul {
  position: absolute;
  padding: 0;
  white-space: nowrap;
  list-style: none;
  font-size: 18px;
  line-height: 1.2;
}

.about-interest-card li {
  position: relative;
  padding-left: 20px;
}

.about-interest-card li::before {
  position: absolute;
  left: 0;
  font: 18px/1.2 Arial, sans-serif;
  content: '•';
}

.about-fuel {
  inset: 81px auto auto 566px;
  width: 402px;
  height: 521px;
  background: var(--about-red);
  color: var(--about-paper);
  transform: rotate(2deg);
  font-family: var(--about-hand);
}

.about-fuel h2:first-child {
  inset: 106px auto auto 21px;
}

.about-fuel ul:first-of-type {
  inset: 157px auto auto 21px;
}

.about-fuel h2:nth-of-type(2) {
  inset: auto auto 216px 9px;
}

.about-fuel p {
  position: absolute;
  inset: auto auto 201px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
}

.about-fuel ul:last-child {
  inset: 326px auto auto 20px;
}

.about-energy {
  inset: 72px auto auto 171px;
  width: 398px;
  height: 525px;
  background: var(--about-paper);
  transform: rotate(-3deg);
  font-family: var(--about-serif);
  font-weight: 600;
}

.about-energy h2 {
  inset: auto auto 138px 49px;
  font-family: inherit;
  font-weight: inherit;
}

.about-energy ul {
  inset: auto auto 46px 57px;
}

.about-energy li {
  padding-left: 18px;
}

.about-energy-shapes i {
  position: absolute;
  background: var(--about-red);
}

.about-energy-shapes i:nth-child(1) {
  inset: 53px auto auto 42px;
  width: 144px;
  height: 152px;
}

.about-energy-shapes i:nth-child(2) {
  inset: 53px auto auto 199px;
  width: 148px;
  height: 105px;
}

.about-energy-shapes i:nth-child(3) {
  inset: 225px auto auto 42px;
  width: 147px;
  height: 90px;
  border-radius: 94px;
}

.about-energy-shapes i:nth-child(4) {
  inset: 171.5px auto auto 199px;
  width: 148px;
  height: 143px;
}