/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;

  margin: 0;
  min-height: 100vh;

  padding: 40px 0;

  color: #191816;

  font-family: "Manrope", sans-serif;

  background-color: #3b251a;

  background-image:

    /* gentle ambient light */
    radial-gradient(
      ellipse at 45% 10%,
      rgba(255, 210, 160, 0.08),
      transparent 55%
    ),

    /* wood knots */
    radial-gradient(
      ellipse at 12% 42%,
      transparent 0 24px,
      rgba(20, 8, 3, 0.12) 25px 28px,
      transparent 30px
    ),

    radial-gradient(
      ellipse at 88% 72%,
      transparent 0 18px,
      rgba(20, 8, 3, 0.11) 19px 22px,
      transparent 24px
    ),

    /* wood grain */
    repeating-linear-gradient(
      2deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 2px,
      transparent 7px,
      rgba(0, 0, 0, 0.025) 8px,
      transparent 12px
    ),

    /* different plank tones */
    repeating-linear-gradient(
      90deg,

      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 235px,

      rgba(0, 0, 0, 0.08) 236px,
      rgba(0, 0, 0, 0.08) 470px,

      rgba(255, 255, 255, 0.015) 471px,
      rgba(255, 255, 255, 0.015) 705px
    ),

    linear-gradient(
      180deg,
      #563a29 0%,
      #493022 40%,
      #382419 100%
    );

  background-attachment: fixed;

  transition:
    color 0.3s ease;
}


/* =========================================================
   WOOD PLANK SEAMS
========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 0;

  background-image:
    repeating-linear-gradient(
      90deg,

      transparent 0,
      transparent 238px,

      rgba(15, 6, 2, 0.45) 239px,

      rgba(255, 220, 180, 0.055) 240px,

      transparent 242px,
      transparent 480px
    );

  opacity: 0.75;
}


/* =========================================================
   EXTRA WOOD GRAIN
========================================================= */

body::after {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 0;

  background-image:

    repeating-linear-gradient(
      1deg,
      transparent 0,
      transparent 15px,
      rgba(10, 3, 1, 0.035) 16px,
      transparent 18px,
      transparent 32px
    ),

    repeating-linear-gradient(
      -2deg,
      transparent 0,
      transparent 35px,
      rgba(255, 235, 210, 0.018) 36px,
      transparent 38px,
      transparent 65px
    );

  mix-blend-mode: multiply;
}


/* =========================================================
   BASIC ELEMENTS
========================================================= */

a {
  color: inherit;

  text-decoration: none;
}

img {
  display: block;

  max-width: 100%;
}


/* =========================================================
   PAPER
========================================================= */

.portfolio {
  position: relative;

  z-index: 2;

  width:
    min(
      1400px,
      calc(100% - 70px)
    );

  margin: 0 auto;

  min-height: 100vh;

  background-color: #faf7ee;

  background-image:

    /* subtle paper irregularity */
    radial-gradient(
      ellipse at 15% 20%,
      rgba(80, 60, 40, 0.015),
      transparent 38%
    ),

    radial-gradient(
      ellipse at 80% 70%,
      rgba(255, 255, 255, 0.7),
      transparent 35%
    ),

    /* slight wrinkle */
    linear-gradient(
      115deg,
      transparent 43%,
      rgba(70, 50, 30, 0.012) 48%,
      rgba(255, 255, 255, 0.30) 51%,
      transparent 57%
    ),

    /* notebook lines */
    repeating-linear-gradient(
      to bottom,

      transparent 0,
      transparent 31px,

      rgba(70, 105, 140, 0.075) 32px
    );

  border:
    1px solid rgba(0, 0, 0, 0.18);

  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.38),
    0 10px 20px rgba(0, 0, 0, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.12);

  overflow: hidden;

  transition:
    background-color 0.34s ease-out,
    box-shadow 0.34s ease-out;
}


/* =========================================================
   PAPER AT NIGHT
========================================================= */

body.lamp-off .portfolio {
  /*
     Still white paper, but now reflecting
     a colder night light.
  */

  background-color: #f5faff;

  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 12px 32px rgba(0, 0, 0, 0.42),
    inset 70px 0 130px rgba(220, 238, 255, 0.15);
}


/* =========================================================
   NOTEBOOK RED MARGIN
========================================================= */

.portfolio::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: 72px;

  width: 1px;

  background:
    rgba(173, 67, 67, 0.20);

  pointer-events: none;

  z-index: 4;
}


/* =========================================================
   PAPER GRAIN
========================================================= */

.portfolio::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  z-index: 100;

  opacity: 0.022;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,

      rgba(0, 0, 0, 0.45) 0,
      rgba(0, 0, 0, 0.45) 1px,

      transparent 1px,
      transparent 4px
    );

  mix-blend-mode: multiply;
}


/* =========================================================
   HEADER
========================================================= */

.header {
  position: relative;

  z-index: 5;

  display: flex;

  justify-content: space-between;
  align-items: center;

  padding:
    25px
    42px
    25px
    105px;

  border-bottom:
    1px solid rgba(0, 0, 0, 0.48);
}


/* Same typographic language as footer */

.logo {
  font-family:
    "Space Mono",
    monospace;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
  display: flex;

  gap: 32px;

  font-family:
    "Space Mono",
    monospace;

  font-size: 11px;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.nav a {
  position: relative;
}

.nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0;
  height: 1px;

  background: currentColor;

  transition:
    width 0.18s ease-out;
}

.nav a:hover::after {
  width: 100%;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  z-index: 5;

  min-height: 75vh;

  display: grid;

  grid-template-columns:
    1fr
    220px;

  gap: 60px;

  padding:
    90px
    55px
    90px
    105px;

  border-bottom:
    1px solid rgba(0, 0, 0, 0.48);
}


.hero__content {
  max-width: 1000px;
}


/* technical little label */

.eyebrow {
  margin: 0;

  font-family:
    "Space Mono",
    monospace;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.10em;

  opacity: 0.77;
}


/* =========================================================
   HERO MAIN TYPE
========================================================= */

.hero h1 {
  max-width: 1000px;

  margin:
    46px
    0
    42px;

  font-family:
    "Syne",
    sans-serif;

  font-size:
    clamp(
      64px,
      8.5vw,
      132px
    );

  line-height: 0.88;

  letter-spacing: -0.065em;

  font-weight: 600;
}


/*
   Deliberately different typeface.
   Gives the page the editorial / analog contrast.
*/

.hero h1 span {
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 1.15em;

  font-style: italic;

  font-weight: 500;

  letter-spacing: -0.035em;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero__description {
  max-width: 590px;

  margin-bottom: 38px;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 18px;

  line-height: 1.65;

  letter-spacing: -0.015em;
}


/* =========================================================
   PRIMARY LINK
========================================================= */

.button {
  display: inline-block;

  padding:
    10px
    0;

  border-bottom:
    1px solid currentColor;

  font-family:
    "Space Mono",
    monospace;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  transition:
    transform 0.18s ease-out,
    opacity 0.18s ease-out;
}

.button:hover {
  transform:
    translateX(5px);

  opacity: 0.62;
}


/* =========================================================
   HERO NOTE
========================================================= */

.hero__note {
  align-self: end;

  padding:
    22px
    20px;

  background:
    #eee3c9;

  border:
    1px solid rgba(0, 0, 0, 0.18);

  box-shadow:
    3px 6px 12px rgba(0, 0, 0, 0.08);

  transform:
    rotate(2deg);

  font-family:
    "Space Mono",
    monospace;

  font-size: 12px;

  line-height: 1.8;

  transition:
    background-color 0.3s ease-out;
}


body.lamp-off .hero__note {
  background:
    #e5edf2;
}


/* =========================================================
   GENERIC SECTIONS
========================================================= */

.work,
.about,
.contact {
  position: relative;

  z-index: 5;

  padding:
    90px
    55px
    90px
    105px;

  border-bottom:
    1px solid rgba(0, 0, 0, 0.48);
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {
  display: flex;

  align-items: baseline;

  gap: 20px;

  margin-bottom: 60px;
}


.section-title span {
  font-family:
    "Space Mono",
    monospace;

  font-size: 11px;

  opacity: 0.7;
}


.section-title h2 {
  margin: 0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 52px;

  font-style: italic;

  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.03em;
}


/* =========================================================
   PROJECTS
========================================================= */

.projects {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


.project {
  position: relative;
}


.project:nth-child(1) {
  transform:
    rotate(-0.5deg);
}


.project:nth-child(2) {
  transform:
    rotate(0.7deg);
}


.project:nth-child(3) {
  transform:
    rotate(-0.3deg);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.project__image {
  position: relative;

  aspect-ratio: 4 / 3;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      145deg,
      #e5ddcd,
      #f3ede0
    );

  border:
    1px solid rgba(0, 0, 0, 0.42);

  font-family:
    "Space Mono",
    monospace;

  font-size: 11px;

  overflow: hidden;

  transition:
    transform 0.20s ease-out,
    box-shadow 0.20s ease-out,
    background-color 0.3s ease-out;
}


body.lamp-off .project__image {
  background:
    linear-gradient(
      145deg,
      #e0e9ef,
      #f3f8fb
    );
}


.project__image:hover {
  transform:
    translateY(-5px);

  box-shadow:
    6px 9px 0
    rgba(0, 0, 0, 0.09);
}


/* =========================================================
   PROJECT INFO
========================================================= */

.project__info {
  padding:
    18px
    4px;
}


.project__info span {
  font-family:
    "Space Mono",
    monospace;

  font-size: 10px;

  opacity: 0.65;
}


.project__info h3 {
  margin:
    10px
    0
    6px;

  font-family:
    "Syne",
    sans-serif;

  font-size: 23px;

  font-weight: 600;

  letter-spacing: -0.035em;
}


.project__info p {
  margin: 0;

  font-family:
    "Space Mono",
    monospace;

  font-size: 10px;

  line-height: 1.6;

  opacity: 0.63;
}


/* =========================================================
   ABOUT
========================================================= */

.about__content {
  max-width: 900px;
}


.about__lead {
  margin-top: 0;

  max-width: 850px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(
      40px,
      5vw,
      68px
    );

  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -0.035em;
}


.about__content > p:not(.about__lead) {
  max-width: 650px;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.contact__title {
  max-width: 1050px;

  margin: 0;

  font-family:
    "Syne",
    sans-serif;

  font-size:
    clamp(
      55px,
      8vw,
      115px
    );

  font-weight: 600;

  line-height: 0.90;

  letter-spacing: -0.065em;
}


.contact__links {
  display: flex;

  flex-wrap: wrap;

  gap: 35px;

  margin-top: 65px;
}


.contact__links a {
  padding-bottom: 5px;

  border-bottom:
    1px solid currentColor;

  font-family:
    "Space Mono",
    monospace;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  transition:
    transform 0.18s ease-out,
    opacity 0.18s ease-out;
}


.contact__links a:hover {
  transform:
    translateY(-3px);

  opacity: 0.60;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;

  z-index: 5;

  display: flex;

  justify-content: space-between;

  padding:
    26px
    55px
    26px
    105px;

  font-family:
    "Space Mono",
    monospace;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  opacity: 0.75;
}


/* =========================================================
   WARM DESK LAMP
========================================================= */

.lamp-glow {
  position: fixed;

  top: -250px;
  right: -180px;

  width: 1100px;
  height: 1100px;

  pointer-events: none;

  z-index: 4;

  background:
    radial-gradient(
      ellipse at 78% 18%,

      rgba(255, 247, 215, 0.72) 0%,

      rgba(255, 222, 145, 0.38) 20%,

      rgba(255, 190, 90, 0.13) 42%,

      transparent 68%
    );

  mix-blend-mode:
    screen;

  opacity: 1;

  transform:
    scale(1);

  transition:
    opacity 0.28s ease-out,
    transform 0.28s ease-out;
}


body.lamp-off .lamp-glow {
  opacity: 0;

  transform:
    scale(0.97);
}


/* =========================================================
   NIGHT DARKNESS
========================================================= */

.room-darkness {
  position: fixed;

  inset: 0;

  pointer-events: none;

  /*
     Sits behind the paper.
     It darkens the room / wooden desk,
     not the text.
  */

  z-index: 1;

  background:
    rgba(4, 7, 13, 0.58);

  opacity: 0;

  transition:
    opacity 0.28s ease-out;
}


body.lamp-off .room-darkness {
  opacity: 1;
}


/* =========================================================
   MOONLIGHT
========================================================= */

.moon-glow {
  position: fixed;

  top: -130px;
  left: -180px;

  width: 1250px;
  height: 1100px;

  pointer-events: none;

  z-index: 4;

  background:
    radial-gradient(
      ellipse at 18% 22%,

      rgba(248, 252, 255, 0.75) 0%,

      rgba(220, 237, 255, 0.43) 18%,

      rgba(170, 207, 248, 0.20) 38%,

      rgba(110, 150, 205, 0.075) 55%,

      transparent 74%
    );

  mix-blend-mode:
    screen;

  opacity: 0;

  transform:
    scale(0.97)
    translateX(-10px);

  transition:
    opacity 0.38s ease-out,
    transform 0.38s ease-out;
}


body.lamp-off .moon-glow {
  opacity: 1;

  transform:
    scale(1)
    translateX(0);
}


/* =========================================================
   WINDOW SHADOW
========================================================= */

.window-shadow {
  position: absolute;

  /*
     It belongs to the sheet itself.
     Therefore it scrolls together with the paper.
  */

  top: 30px;
  left: -100px;

  width: 720px;
  height: 900px;

  pointer-events: none;

  z-index: 3;

  opacity: 0;

  transform:
    rotate(-8deg)
    skewY(-4deg)
    translateX(-15px);

  filter:
    blur(7px);

  background:

    /* vertical window frame */
    linear-gradient(
      90deg,

      transparent 0,
      transparent 46%,

      rgba(18, 31, 48, 0.27) 47%,
      rgba(18, 31, 48, 0.27) 51%,

      transparent 52%,
      transparent 100%
    ),

    /* horizontal window frame */
    linear-gradient(
      0deg,

      transparent 0,
      transparent 47%,

      rgba(18, 31, 48, 0.24) 48%,
      rgba(18, 31, 48, 0.24) 52%,

      transparent 53%,
      transparent 100%
    );

  transition:
    opacity 0.40s ease-out,
    transform 0.40s ease-out;
}


body.lamp-off .window-shadow {
  opacity: 0.48;

  transform:
    rotate(-8deg)
    skewY(-4deg)
    translateX(5px);
}


/* =========================================================
   NIGHT TEXT
========================================================= */

body.lamp-off {
  color:
    #18212b;
}


/* =========================================================
   PHYSICAL LIGHT SWITCH
========================================================= */

.light-switch {
  position: fixed;

  right: 32px;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(1deg);

  width: 78px;
  height: 130px;

  z-index: 200;

  border:
    1px solid #1f1712;

  border-radius: 5px;

  background:
    linear-gradient(
      145deg,
      #d7c7aa,
      #a99676
    );

  box-shadow:
    4px 7px 14px rgba(0, 0, 0, 0.35),

    inset
    1px
    1px
    1px
    rgba(255, 255, 255, 0.45),

    inset
    -2px
    -2px
    4px
    rgba(0, 0, 0, 0.18);

  cursor: pointer;

  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out;
}


.light-switch:hover {
  transform:
    translateY(-50%)
    rotate(1deg)
    scale(1.03);
}


/* =========================================================
   SWITCH LABEL
========================================================= */

.switch-label {
  position: absolute;

  top: 28px;
  left: 0;

  width: 100%;

  text-align: center;

  font-family:
    "Space Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.14em;

  color:
    rgba(30, 20, 15, 0.65);
}


/* =========================================================
   ROCKER
========================================================= */

.switch-rocker {
  position: absolute;

  width: 40px;
  height: 54px;

  top: 48px;
  left: 50%;

  transform:
    translateX(-50%)
    perspective(100px)
    rotateX(-8deg);

  border-radius: 3px;

  background:
    linear-gradient(
      to bottom,

      #35302a 0%,
      #201c18 48%,
      #151210 100%
    );

  border:
    1px solid #0b0907;

  box-shadow:
    0 5px 7px rgba(0, 0, 0, 0.35),

    inset
    0
    2px
    2px
    rgba(255, 255, 255, 0.08);

  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out;
}


body.lamp-off .switch-rocker {
  transform:
    translateX(-50%)
    perspective(100px)
    rotateX(8deg);

  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.40),

    inset
    0
    -2px
    3px
    rgba(255, 255, 255, 0.06);
}


/* =========================================================
   SWITCH INDICATOR
========================================================= */

.switch-indicator {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  left: 50%;
  top: 10px;

  transform:
    translateX(-50%);

  background:
    #ffd76b;

  box-shadow:
    0 0 4px #ffd76b,
    0 0 10px rgba(255, 215, 107, 0.80);

  transition:
    background 0.14s ease-out,
    box-shadow 0.14s ease-out,
    opacity 0.14s ease-out;
}


body.lamp-off .switch-indicator {
  background:
    #302d28;

  box-shadow:
    none;

  opacity: 0.5;
}


/* =========================================================
   SWITCH SCREWS
========================================================= */

.switch-screw {
  position: absolute;

  left: 50%;

  width: 8px;
  height: 8px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 35%,

      #ddd,
      #777 45%,
      #353535 70%
    );

  box-shadow:
    0 1px 2px
    rgba(0, 0, 0, 0.40);
}


.switch-screw::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 1px;

  left: 1px;
  top: 3px;

  background:
    rgba(0, 0, 0, 0.70);

  transform:
    rotate(-12deg);
}


.switch-screw--top {
  top: 10px;
}


.switch-screw--bottom {
  bottom: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  body {
    padding: 0;
  }


  .portfolio {
    width: 100%;

    border-left: none;
    border-right: none;
  }


  .portfolio::before {
    left: 35px;
  }


  .header {
    padding:
      20px
      25px
      20px
      55px;
  }


  .logo {
    font-size: 10px;
  }


  .nav {
    gap: 18px;
  }


  .hero {
    grid-template-columns: 1fr;

    padding:
      70px
      25px
      70px
      55px;
  }


  .hero h1 {
    font-size:
      clamp(
        55px,
        15vw,
        95px
      );
  }


  .hero__note {
    width: 180px;

    margin-top: 30px;
  }


  .work,
  .about,
  .contact {
    padding:
      70px
      25px
      70px
      55px;
  }


  .projects {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .footer {
    flex-direction: column;

    gap: 8px;

    padding:
      25px
      25px
      25px
      55px;
  }


  .light-switch {
    right: 12px;

    width: 58px;
    height: 100px;
  }


  .switch-label {
    top: 20px;

    font-size: 6px;
  }


  .switch-rocker {
    width: 30px;
    height: 42px;

    top: 37px;
  }


  .lamp-glow {
    width: 650px;
    height: 650px;

    right: -280px;
    top: -180px;
  }


  .moon-glow {
    width: 750px;
    height: 720px;

    left: -300px;
    top: -100px;
  }


  .window-shadow {
    width: 500px;
    height: 650px;

    left: -180px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 550px) {

  .header {
    align-items: flex-start;
  }


  .logo {
    max-width: 130px;

    line-height: 1.5;
  }


  .nav {
    flex-direction: column;

    gap: 6px;
  }


  .hero h1 {
    font-size: 52px;
  }


  .hero__description {
    font-size: 16px;
  }


  .section-title h2 {
    font-size: 42px;
  }


  .about__lead {
    font-size: 38px;
  }


  .contact__links {
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
  }


  body.lamp-off .window-shadow {
    opacity: 0.27;
  }

}