/* Fonts */
@font-face {
  font-family: PlayfairDisplay;
  src: url(/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf) format("truetype");
}
@font-face {
  font-family: Lato;
  src: url(/fonts/Lato/Lato-Regular.ttf) format("truetype");
}
@font-face {
  font-family: Lora;
  src: url(/fonts/Lora/Lora-VariableFont_wght.ttf) format("truetype");
}
@font-face {
  font-family: NunitoSans;
  src: url(/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf) format("truetype");
}
@font-face {
  font-family: WorkSans;
  src: url(/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
}

/* Body */

body {
   position: relative;
   overflow-x: hidden;
}

.bg-overlay {
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background:red;
   z-index: 1;
   opacity: 0.2;
}


/* Header */

header {
   position: fixed;
   top: 20px;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 100%;
   max-width: 550px;
   
   transition: all 0.4s ease;
   z-index: 10;
}

header:has(.compact) {
   justify-content: end;
   max-width: 80px;
   margin: 0;
   left: unset;
   right: 20px;
}

header nav#main-nav {
   box-sizing: border-box;
   background-color: #fff;
   border-radius: 40px;
   width: 500px;
   border: 1px solid black;
   
   overflow: hidden;
   max-height: 80px;
   transition: 
      right 0.6s ease,
      transform 0.7s ease,
      width 0.7s ease,
      height 0.7s ease,
      max-height 0.7s ease,
      opacity 0.5s ease;
   opacity: 1;
   transform: translateX(0%) scale(1);
}

header nav#main-nav .nav-links {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
   padding: 20px 40px;
   gap: 32px;
}

#main-nav.hidden {
   opacity: 0;
   pointer-events: none;
}

/* Compact state */
#main-nav.compact {
   width: auto;             /* allow auto‑width or adjust as needed */
   right: 20px;
   flex-direction: column;  /* vertical layout */
   gap: 24px;
   padding: 16px;
   justify-content: center;
   align-items: center;
   opacity: 1;
}

#main-nav.compact.open {
   padding: 32px 16px 24px;
}

/* Hide links initially in compact mode */
#main-nav.compact .nav-links {
   display: none;
}

/* Show links when menu is “open” */
#main-nav.compact.open .nav-links {
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: center;
   padding: 0;
}

/* Hamburger button */
#menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
}
#main-nav.compact #menu-toggle {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
#main-nav.compact.open #menu-toggle {
   margin-top: 24px;
}

/* Bars */
.bar {
   display: block;
   height: 2px;
   width: 100%;
   background: black;
   border-radius: 1px;
}

/* Hamburger → X animation */
#main-nav.compact.open .bar:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}
#main-nav.compact.open .bar:nth-child(2) {
   opacity: 0;
}
#main-nav.compact.open .bar:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
}
#main-nav.open {
  max-height: 500px;
}



header nav a {
   font-family: 'Instrument Serif';
   font-style: italic;
   font-size: 21px;
   font-weight: 500;
   color: black;
   text-decoration: none;
}

header nav a.current,
header nav a.current:hover {
   text-decoration: underline;
   text-decoration-thickness: 30%;
   text-underline-offset: 1px;
   text-decoration-color: rgba(221, 137, 156, 0.3);
}

header nav a:hover {
   text-decoration: underline;
}


/* Footer */

footer {
   background-color: #1a0c11;
   color: #fff3f3;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
   font-family: 'Instrument Serif';
   font-style: italic;
   letter-spacing: 5%;
   font-size: 18px;
}

@media (max-width: 530px) {
   footer {
      padding-bottom: 50px;
   }
}

.footer__socials {
   display: flex;
   gap: 20px;
   align-items: center;
}

.footer__socials a {
   text-decoration: none;
   vertical-align: middle;
}

.footer__socials a svg {
   width: 26px;
   height: 26px;
   vertical-align: middle;
   fill: #f8dce3;
}

/* Section */

section {
   min-height: 650px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center; 
   padding: 80px;
   background-color: #fdf8f5;
   color: black;
}

section p {
   font-family: 'WorkSans';
   font-weight: 400;
   font-size: 18px;
   line-height: 160%;
}

section h2 {
   font-family: 'Instrument Serif';
   font-weight: 500;
   font-size: 52px;
   margin-bottom: 24px;
}

section#intro h2 + p {
   font-family: 'Instrument Serif';
   font-weight: 400;
   font-size: 20px;
   color: #433030;
   letter-spacing: 8%;
   line-height: 160%;
   margin-top: 0;
}

section#now {
   min-height: calc(100vh - 52px);
}

section.dark-bg {
   background-color: #1F1D24;
   color: #EBD8D8;
}

section.dark-bg h2 + p {
   color: #EBD8D8;
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0;
}

.row {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.justify-between {
   justify-content: space-between;
}

/* Columns */
[class^="col-"],
[class*=" col-"] {
   flex: 0 0 auto;
}

:root {
   --gap: 20px;
   --columns: 12;
}

@media (min-width: 768px) {
   .col-md-1  { width: calc((100% - (var(--gap) * 11)) / 12); }
   .col-md-2  { width: calc(((100% - (var(--gap) * 11)) / 12) * 2 + var(--gap)); }
   .col-md-3  { width: calc(((100% - (var(--gap) * 11)) / 12) * 3 + var(--gap) * 2); }
   .col-md-4  { width: calc(((100% - (var(--gap) * 11)) / 12) * 4 + var(--gap) * 3); }
   .col-md-5  { width: calc(((100% - (var(--gap) * 11)) / 12) * 5 + var(--gap) * 4); }
   .col-md-6  { width: calc(((100% - (var(--gap) * 11)) / 12) * 6 + var(--gap) * 5); }
   .col-md-7  { width: calc(((100% - (var(--gap) * 11)) / 12) * 7 + var(--gap) * 6); }
   .col-md-8  { width: calc(((100% - (var(--gap) * 11)) / 12) * 8 + var(--gap) * 7); }
   .col-md-9  { width: calc(((100% - (var(--gap) * 11)) / 12) * 9 + var(--gap) * 8); }
   .col-md-10 { width: calc(((100% - (var(--gap) * 11)) / 12) * 10 + var(--gap) * 9); }
   .col-md-11 { width: calc(((100% - (var(--gap) * 11)) / 12) * 11 + var(--gap) * 10); }
   .col-md-12 { width: 100%; }
}

.col-1  { width: calc((100% - 220px) / 12); }
.col-2  { width: calc(((100% - 220px) / 12) * 2 + 20px); }
.col-3  { width: calc(((100% - 220px) / 12) * 3 + 40px); }
.col-4  { width: calc(((100% - 220px) / 12) * 4 + 60px); }
.col-5  { width: calc(((100% - 220px) / 12) * 5 + 80px); }
.col-6  { width: calc(((100% - 220px) / 12) * 6 + 100px); }
.col-7  { width: calc(((100% - 220px) / 12) * 7 + 120px); }
.col-8  { width: calc(((100% - 220px) / 12) * 8 + 140px); }
.col-9  { width: calc(((100% - 220px) / 12) * 9 + 160px); }
.col-10 { width: calc(((100% - 220px) / 12) * 10 + 180px); }
.col-11 { width: calc(((100% - 220px) / 12) * 11 + 200px); }
.col-12 { width: 100%; }

/* Offsets (column skipping) */
.offset-1  { margin-left: calc((100% - 220px) / 12 + 20px); }
.offset-2  { margin-left: calc(((100% - 220px) / 12) * 2 + 40px); }
.offset-3  { margin-left: calc(((100% - 220px) / 12) * 3 + 60px); }
.offset-4  { margin-left: calc(((100% - 220px) / 12) * 4 + 80px); }
.offset-5  { margin-left: calc(((100% - 220px) / 12) * 5 + 100px); }
.offset-6  { margin-left: calc(((100% - 220px) / 12) * 6 + 120px); }
.offset-7  { margin-left: calc(((100% - 220px) / 12) * 7 + 140px); }
.offset-8  { margin-left: calc(((100% - 220px) / 12) * 8 + 160px); }
.offset-9  { margin-left: calc(((100% - 220px) / 12) * 9 + 180px); }
.offset-10 { margin-left: calc(((100% - 220px) / 12) * 10 + 200px); }
.offset-11 { margin-left: calc(((100% - 220px) / 12) * 11 + 220px); }


.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
   border: 0;
}

/* Content */

section.content {
   align-items: start;
   padding: 40px 20%;
   line-height: 160%;
}

@media (max-width: 600px) {
   section.content {
      padding: 40px;
   }
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
   font-family: 'Instrument Serif';
   font-weight: 700;
   line-height: 150%;
   margin-top: 32px;
   margin-bottom: 24px;
}

.content h1 {
   font-size: 3em;
}

.content h2 {
   font-size: 2.6em;
}

.content h3 {
   font-size: 2.25em;
}

.content h4 {
   font-size: 1.75em;
}

.content h5 {
   font-size: 1.5em;
}

.content h6 {
   font-size: 1.25em;
}

.content p {
   line-height: 180%;
   font-size: 17px;
   font-weight: 400;
   font-family: 'WorkSans';
}

.content figure {
   text-align: center;
   margin: 40px auto;
}

.content figure img {
   width: 100%;
}

.content figure figcaption {
   text-align: center;
   width: 100%;
   color: rgb(102, 100, 101);
   margin-top: 8px;
   font-family: 'Anonymous Pro';
   font-weight: 600;
   letter-spacing: 3%;
   font-size: 15px;
}


/* Homepage - Intro Section */

#intro {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   
   height: 100vh;
   max-height: 800px;
   min-height: 650px;
   padding-top: 92px;
   padding-bottom: 20px;
   
   background-color: #fff3f3;
   background-image:
   linear-gradient(to right, rgba(243, 219, 222, 0.6) 1px, transparent 1px),
   linear-gradient(to bottom, rgba(243, 219, 222,0.6) 1px, transparent 1px);
   background-size: 26px 26px;
}

@media (max-width: 979px) {
   #intro {
      height: unset;
      max-height: unset;
   }

   #intro .row.justify-between {
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
}

@media (max-width: 600px) {
   section {
      padding-left: 40px;
      padding-right: 40px;
   }
}

@media (max-width: 460px) {
   section {
      padding-left: 24px;
      padding-right: 24px;
   }
}

.intro__content {
   font-family: 'Instrument Serif';
   font-weight: 400;
   display: flex;
   flex-direction: column;
   justify-content: start;
   margin: 0 0 20px;
   padding-top: 32px;
}

.intro__name {
   font-size: 80px;
   margin: 0;
}

.intro__socials {
   display: flex;
   gap: 20px;
   padding: 24px 12px;
   align-items: center;
}

.intro__socials a {
   text-decoration: none;
   vertical-align: middle;
}

.intro__socials a svg {
   width: 28px;
   height: 28px;
   vertical-align: middle;
}

.intro__job-title {
   font-size: 36px;
   font-style: italic;
   color: #433030;
   margin-bottom: 20px;
}

.intro__location {
   font-size: 20px;
   color: #433030;
   letter-spacing: 8%;
}

.intro__skills .tag {
   padding: 12px 26px;
   background: #FFFEFD;
   border: 1px solid black;
   border-radius: 40px;
   font-family: 'Anonymous Pro';
   font-size: 22px;
   letter-spacing: 2%;
}

.intro__skills .tag.current {
   background: #F6D8DF;
}

.intro__about,
.intro__ticket {
   /* width: 40%; */
   margin: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.intro__right {
   min-width: 35%;
}

.intro__ticket {
   position: relative;
}














.intro__skills {
   margin-top: 1rem;
   margin-bottom: .5rem;
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   max-width: 400px;
}

.tag {
   background-color: #ffe5ec;
   border: none;
   border-radius: 2rem;
   padding: 0.5rem 1.2rem;
   margin: 0.25rem;
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.2s;
}

.tag:hover,
.tag:focus {
   background-color: #ffccd9;
}

/* Swiper */
.swiper {
   position: relative;
   max-width: 700px;
   width: 362px;
   max-width: 100%;
   height: 600px;
   background: url(img/ticket.png);
   background-size: cover;
   border-bottom: 1px solid black;
}

@media (max-width: 440px) {
   .swiper {
      width: 320px;
      height: auto;
      background: url(img/ticket-long.png);
      background-repeat: no-repeat;
      background-size: 100%;
      border-bottom: 1px solid black;
   }
}

.swiper-wrapper {
   display: flex;
}

.swiper-slide {
   padding: 64px 56px 40px;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: start;
   gap: 28px;
}

.swiper-slide:hover {
   cursor: grab;
}

.intro__ticket--title {
   font-size: 32px;
   font-weight: 600;
   color: #444;
   text-align: center;
   font-family: 'Instrument Serif';
   font-style: italic;
}

.intro__ticket--list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.intro__ticket--list li {
   font-family: 'Anonymous Pro';
   font-size: 16px;
   letter-spacing: 1%;
   margin-bottom: 12px;
   line-height: 26px;
}

.skill-tag {
   display: inline-block;
   background-color: #e6f3ff;
   border-radius: 1.5rem;
   padding: 0.4rem 0.8rem;
   margin: 0.3rem;
   font-size: 0.95rem;
   color: #1F1D24;
}

/* Highlighter span */
.highlighter {
   background-color: rgba(246, 216, 223, 0.6);
   padding: 2px 6px;
   border-radius: 2px;
}

.dark-bg .highlighter {
   background-color: rgba(246, 216, 223, 0.2);
}

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
   color: #999;
   position: absolute;
   top: 80px;
}
.swiper-button-prev {
   left: 40px;
}
.swiper-button-next {
   right: 40px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
   font-size: 20px;
   font-weight: 900;
   right: 0;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
   transform: scale(1.1);
   transition: ease-in-out 0.2s;
}

.swiper-button-next svg,
.swiper-button-prev svg {
   height: 60%;
}
















/* Homepage - Purpose Section */

#purpose {
   background: #1F1D24;
   display: flex;
   flex-direction: column;
   justify-content: center;
   justify-content: center;
   gap: 40px;
   padding: 120px 180px;
}

@media (max-width: 1023px) {
   #purpose {
      padding: 120px;
   }
}

@media (max-width: 860px) {
   #purpose {
      padding: 60px;
   }
}

#purpose > h2 {
   font-family: 'Roundhand';
   font-weight: 700;
   font-size: 80px;
   line-height: 150%;
   color: #EBD8D8;
   margin: 0;
}

.purpose__cards {
   display: flex;
   gap: 32px;
   justify-content: center;
}

.purpose__work,
.purpose__fun {
   max-width: 40%;
   aspect-ratio: 2/3;
   padding: 80px 40px;
   position: relative;
   
   display: flex;
   border-radius: 4px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 20px;
   text-decoration: none;
   
   background-color: rgb(240, 239, 238);
   background: linear-gradient(rgba(240, 239, 238, 0.6), rgba(240, 239, 238, 0.6)), url(img/wall-texture-cropped.jpg);
   background-size: 600px;

   transition: transform 0.1s ease-in;
}

@media (max-width: 768px) {
   #purpose > h2 {
      font-size: 60px;
      line-height: 140%;
   }

   .purpose__cards {
      flex-direction: column;
      gap: 48px;
   }
   
   .purpose__work,
   .purpose__fun {
      max-width: 320px;
   }
}

.purpose__work {
   transform: rotate(-2deg);
}

.purpose__work:hover,
.purpose__work:focus-visible {
   transform: translateY(-16px) rotate(-4deg);
}

.purpose__work::before,
.purpose__work::after {
   content: url('/img/card-spades-letter.svg');
   position: absolute;
}

.purpose__fun::before,
.purpose__fun::after {
   content: url('/img/card-heart-letter.svg');
   position: absolute;
}

.purpose__work::before,
.purpose__fun::before {
   left: 24px;
   top: 24px;
}

.purpose__work::after,
.purpose__fun::after {
   right: 24px;
   bottom: 24px;
   transform: rotate(180deg);
}

.purpose__fun {
   transform: rotate(2deg);
}

.purpose__fun:hover,
.purpose__fun:focus-visible {
   transform: translateY(-16px) rotate(4deg);
}

.purpose__work img,
.purpose__fun img {
   width: 100px;
   height: 100px;
   mix-blend-mode: multiply;
}

.purpose__work--title,
.purpose__fun--title {
   font-family: 'Roundhand';
   /* font-style: italic; */
   font-style: normal;
   font-weight: 700;
   font-size: 72px;
   line-height: 80%;
   color: #4a4950;
   mix-blend-mode: multiply;
}

.purpose__work--text,
.purpose__fun--text {
   font-size: 18px;
   font-family: 'Anonymous Pro';
   text-transform: uppercase;
   font-weight: 600;
   color: #49484e;
   mix-blend-mode: multiply;
}

/* Homepage - About Section */

#about {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 80px 0px;
   gap: 40px;
   
   /* background: linear-gradient(rgba(214, 208, 204, 0.7), rgba(224, 218, 211, 0.7)), url(img/wall-texture-cropped.jpg); */
   /* background-size: 100%; */
   background-color: #f7dde0;
   width: 100%;
}

.about__content {
   order: 2;
   width: 40%;
   min-width: 400px;
   color: #2A2020;
   font-family: 'WorkSans';
   line-height: 150%;
}

@media (max-width: 600px) {
   .about__content {
      width: 100%;
      padding: 0 40px;
   }
}

.about__content h2 {
   font-size: 32px;
   font-weight: 700;
}

.about__content p {
   font-size: 18px;
   font-weight: 400;
   letter-spacing: .2%;
   line-height: 160%;
}

#about .about__content p {
   line-height: 180%;
}

.about__content a {
   font-weight: 600;
   color: #9f5a62;
}

.about__content p.about__italic {
   font-family: 'Caveat';
   font-size: 26px;
   letter-spacing: .2%;
}

.about__images-left {
   order: 1;
   max-width: 250px;
}

.about__images-right {
   order: 3;
}

.about__images-left,
.about__images-right {
   flex-shrink: 1;
   flex-grow: 0;
   padding: 40px;
}

.about__images-left img,
.about__images-right img {
   width: 100%;
}

/* About Page */

.image-gallery {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
   justify-content: center;
}

.image-gallery img {
   max-height: 300px;
   max-width: 100%;
}

@media (max-width: 600px) {
   .image-gallery img {
      max-height: unset;
      object-fit: cover;
      width: 100%;
   }
}

.fun-content > p {
   line-height: 180%;
   font-size: 18px;
   margin-bottom: 24px;
   margin-top: 0;
   font-family: WorkSans;
   font-weight: 400;
   color: #302727;
}

.fun-content > h2 {
   color: #3f3636;
   text-align: center;
}

.games-gallery {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
   justify-content: center;
   padding-top: 40px;
}

section#game-jams {
   padding: 60px;
   background-color: #ffefea;
   color: #2b2424;
}

section#game-jams div#game-jams-inside {
   max-width: 1380px;
   border-radius: 12px;
   width: 100%;
   height: 100%;
   padding: 40px;
   background-color: #71504c;
}

section#game-jams .fun-content {
   border-radius: 8px;
   padding: 40px 80px;
   background-color: #fadfdc;
   color: #2b2424;
}

.game-card {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 350px;
   height: 450px;
   position: relative;
}

.game-card img {
   width: 300px;
   height: 200px;
   object-fit: cover;
   position: absolute;
   transform: rotate(-5deg);
   outline: 24px solid white;
   border-bottom: 20px solid white;
}

.game-card p {
   margin: 0;
   font-family: Caveat;
   font-weight: 500;
   color: #302727;
   font-size: 20px;
   line-height: 140%;
}

.game-card-content {
   padding: 28px;
   padding-top: 20px;
   position: absolute;
   transform: rotate(4deg);
   background-color: #fff1e9;
   top: 180px;
   left: 60px;
   width: 300px;
   height: 240px;

   border: 1px solid #d9b2b2;
   border-top: 1px solid #f9eeee;
   border-left: 1px solid #f9eeee;
}

.game-card-content a {
   font-family: Caveat;
   font-weight: 800;
   font-size: 22px;
   line-height: 140%;
   color: #883f37;
}

.game-card-content p a {
   font-weight: 500;
   font-size: 20px;
}

@media (max-width: 1000px) {
   .game-card {
      width: 300px;
   }
}

@media (max-width: 700px) {
   section#game-jams {
      padding: 0;
   }

   section#game-jams div#game-jams-inside {
      max-width: 1380px;
      border-radius: 12px;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: #71504c;
   }
   
   section#game-jams .fun-content {
      padding: 40px 32px;
   }

   .game-card img {
      width: 260px;
      left: 15px;
   }

   .game-card-content {
      left: -6px;
   }
}

/* Work Experience // Education "Cards" */
/* 
section#work-experience,
section#education {
   gap: 24px;
} */

section#work-experience h2,
section#education h2 {
   margin: 0;
   margin-bottom: 24px;
   width: 100%;
   max-width: 600px;
}

section#work-experience .experience-card,
section#education .experience-card {
   width: 100%;
   max-width: 600px;
   line-height: 160%;
   display: flex;
   flex-direction: row;
   gap: 20px;
   justify-content: start;
   border-top: 2px solid rgb(255, 221, 221);
}

section#work-experience .experience-card.last,
section#education .experience-card.last {
   border-bottom: 2px solid rgb(255, 221, 221);
}

.experience-card__content--title {
   position: relative;
   margin: 0;
}

section#work-experience .experience-card .experience-card__date,
section#work-experience .experience-card .experience-card__content,
section#education .experience-card .experience-card__date,
section#education .experience-card .experience-card__content {
   padding: 16px 0;
}

section#work-experience .experience-card .experience-card__date,
section#education .experience-card .experience-card__date {
   padding-left: 16px;
   min-width: 112px;
}

@media (max-width: 600px) {
   section#work-experience .experience-card .experience-card__date,
   section#education .experience-card .experience-card__date {
      min-width: unset;
   }
}

section#work-experience .experience-card .experience-card__content,
section#education .experience-card .experience-card__content {
   padding-right: 16px;
   overflow: hidden;
}

section#work-experience .experience-card .experience-card__content a,
section#education .experience-card .experience-card__content a {
   color: #ffbed4;
   text-decoration: none;
   font-weight: 600;
}

.experience-card__content--title,
.experience-card__content--tasks {
   padding-left: 20px;
   margin: 0;
}


.experience-card__content--tasks.accordion {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
}

.experience-card__content--tasks.accordion.open {
   max-height: 1200px;
}

.experience-card__button {
   margin-left: auto;
   cursor: pointer;
   display: flex;
   align-items: center;
   padding-right: 8px;
   height: 82px;
}

.experience-card__button svg {
   transition: transform 0.3s ease;
}

.experience-card__button.open .vertical {
   transform: rotate(90deg);
}
/* 
.experience-card__button.open .vertical {
   display: none;
} */

/* Work - Projects Section */

.projects-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
   margin-top: 28px;
}

.project {
   position: relative;
   overflow: hidden;
}

.project .overlay {
   position: absolute;
   inset: -1px;
   background-color: rgba(240, 208, 219, 1); /* pick your color */
   transition: transform 0.4s ease;
   transform: translateY(0%);
   z-index: 2;
   background-image: 
   linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
   linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
   background-size: 24px 24px; /* adjust to match your grid spacing */
}

.project:hover .overlay,
.project:focus-within .overlay {
   transform: translateY(-100%);
}  

.project img {
   width: 300px;
   height: 260px;
   object-fit: cover;
}

.project span {
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   width: 100%;
   text-align: center;
   margin: 0 auto;
   color: white;
   z-index: 3;
   
   font-family: 'Instrument Serif';
   font-weight: 500;
   font-size: 26px;
   font-style: italic;
   letter-spacing: 2%;
   color: #1a0c11;
   transition: opacity 0.3s ease;
}

.project:hover span {
   opacity: 0;
}

figcaption {
   text-align: center;
   width: 100%;
   color: rgb(49, 45, 46);
}


/* Contact Me - Envelope */

.envelope {
   position: relative;
   width: 500px;
   height: 300px;
   cursor: pointer;
   margin-top: 48px;
   background-color: linen;
}

/* Base of the envelope */
.base {
   height: 100%;
   width: 100%;
   z-index: 2;
   position: relative;
}

.base-cover {
   z-index: 3;
   position: absolute;
   left: -2px;
   top: 0;
}

/* Paper inside */
.paper {
   position: absolute;
   top: 20px;
   left: 0;
   width: 100%;
   height: 80%;
   opacity: 0;
   transform: translateY(20px);
   z-index: 2;
   padding: 0 80px;
   box-sizing: border-box;
   transition: all 0.4s ease, z-index 0.4s ease;
}

.paper-center {
   width: 100%;
   background:#f3f3f3;
   border: 1px solid #aaa;
   height: 100%;
   padding: 20px;
}

.paper__intro {
   font-family: 'Instrument Serif';
   color: black;
   font-style: italic;
   font-size: 20px;
   font-weight: 500;
   letter-spacing: 4%;
   line-height: 160%;
}

.paper__email {
   font-family: 'Anonymous Pro';
   color: black;
   font-size: 20px;
   text-align: center;
   font-weight: 500;
   letter-spacing: 4%;
   position: absolute;
   bottom: 120px;
   left: 0;
   right: 0;
   z-index: 5;
   text-align: center;
   width: 150px;
   margin: 0 auto;
   border-radius: 8px;
   padding: 12px;
   background-color: #f5dfe6;
   border: 1px solid rgba(75, 12, 12, 0.4);
   border-bottom-width: 2px;
   text-decoration: none;
}

.paper__email:hover {
   border-bottom-width: 1px;
   background-color: #eebecd;
}

.flap {
   width: 504px;
   position: absolute;
   top: -1px;
   left: -3px;
   transform-origin: center 2px;
   transform: rotateX(0deg);
   z-index: 4;
   filter: drop-shadow(rgba(151, 120, 120, 0.4) 0 2px 2px);
   transition: transform 0.3s ease, z-index 0.3s ease, filter 0.3s ease;
}

.hearts {
   position: absolute;
   bottom: 80px;
   z-index: 8;
   left: 40%;
   transition: transform 0.2s ease-out, z-index 0.1s ease-out;
}

/* When open */
.envelope.open .flap {
   z-index: 2;
   transform: rotateX(-160deg);
   filter: drop-shadow(rgba(151, 120, 120, 0) 0 0 0);
   transition: transform 0.3s ease, z-index 0.3s ease, filter 0.3s ease;
}

.envelope.open .hearts {
   z-index: 1;
   transform: translateY(-340px) rotateX(180deg);
   transition: transform 0.2s ease-in, z-index 0.1s ease-in;
}

.envelope.open .paper {
   opacity: 1;
   /* transform: translateY(-60px); */
   transform: translateY(-100px);
   transition: transform 0.4s ease, z-index 0.4s ease;
}

@media (max-width: 560px) {

   .envelope {
      transform: scale(0.8);
   }

   .envelope.open .paper {
      padding: 0 40px;
      height: 100%;
      transform: translateY(-140px);
   }

   .paper-center,
   .envelope.open .paper-center {
      padding: 40px 60px;
      text-align: center;
   }

   .paper__intro,
   .envelope.open .paper__intro {
      margin-top: 0;
      font-size: 26px;
   }

   .flap {
      transform: rotateX(0deg) scaleY(1.1);
   }

   .paper__email {
      transform: scale(1.2);
   }
}

@media (max-width: 430px) {

   .envelope {
      transform: scale(0.7);
      margin-top: 0;
   }

   .paper__email {
      bottom: 110px;
   }
}

/* Now */

.sticky-note-bg {
   background-color: #ffe9e9;
   background-image:
   linear-gradient(to right, rgba(233, 200, 205, 0.6) 1px, transparent 1px),
   linear-gradient(to bottom, rgba(233, 200, 205,0.6) 1px, transparent 1px);
   background-size: 26px 26px;
   padding: 24px 48px;
   border: 1px solid rgba(90, 34, 44, 0.2);
   border-bottom-width: 2px;
   box-shadow: 3px 3px 4px rgba(129, 16, 16, 0.1);
}

section#now {
   padding-top: 120px;
}

section#now p {
   line-height: 180%;
   font-family: 'Anonymous Pro';
   color: #1F1D24;
}

section#now .last-updated {
   text-align: center;
   font-weight: 700;
   font-size: 18px;
   text-decoration-style: dotted;
   text-decoration-line: underline;
   text-decoration-color: rgb(116, 32, 46);
   text-decoration-thickness: 4px;
   text-underline-offset: 6px;
   margin-bottom: 24px;
}

section#now .sticky-note-bg + a {
   margin-top: 16px;
   font-family: 'Anonymous Pro';
   color: #1F1D24;
}

/* section#now .now__entry {
   color: #1F1D24;
} */

section#now .now__entry span{
   color: rgb(150, 68, 82);
   font-weight: 700;
   margin-right: 4px;
   font-size: 16px;
}

/* Achievements */

.discovery-widget {
   position: fixed;
   bottom: -2px;
   right: 16px;
   width: 320px;
   font-family: monospace;
   background: #fcdde1;
   border: 1px solid #9c5b5b;
   border-radius: 12px 12px 0 0;
   overflow: hidden;
   transition: transform 0.4s ease;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   z-index: 100;
}

.discovery-widget.closed {
   transform: translateY(calc(100% - 40px)); /* Only show header */
}

.widget-header {
   padding: 12px 16px 20px;
   /* text-align: center; */
   font-weight: bold;
   background: #f7cdd5;
   border-bottom: 1px solid #a27878;
   cursor: pointer;
}

.progress-percent {
   position: absolute;
   top: 8px;
   right: 12px;
   font-weight: bold;
   background: #fff0f0;
   padding: 4px 8px;
   border-radius: 6px;
}

.widget-body {
   padding: 16px;
}

.rank-line {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
   font-weight: 800;
   color: #5b3a3a;
   margin-bottom: 12px;
}

.progress-bar {
   width: 100%;
   height: 12px;
   background: #fff0f3;
   border-radius: 999px;
   margin: 8px 0 12px;
   overflow: hidden;
   border: 1px solid #804c50;
}

.progress-fill {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, #f7cdd5, #eca9af);
   border-radius: 999px;
   transition: width 0.5s ease-in-out;
}

.rank-line span.active {
   color: #ac545c;
   transition: color 0.3s ease;
}

.stamp-grid {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.stamp-row {
   display: flex;
   justify-content: space-between;
}

.circle {
   width: 40px;
   height: 40px;
   background: #fff0f3;
   border-radius: 50%;
   border: 2px dashed #d3989c;
   display: flex;
   justify-content: center;
   align-items: center;
}

.circle svg {
   fill: #c8818e;
}

.circle.earned {
   background: #e695a8;
   border: 2px solid #7c3f4a;
}

.circle.earned svg {
   fill: #652f39;
}

/* Stamp Notifications */

#achievement-container {
   position: fixed;
   top: 20px;
   right: 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 9999;
}

.achievement {
   background: #fff;
   border: 1px solid #000;
   border-radius: 12px;
   padding: 16px 20px;
   min-width: 260px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
   
   opacity: 0;
   transform: translateX(120%);
   transition: transform 0.5s ease, opacity 0.5s ease;

   font-family: 'Anonymous Pro';
   font-weight: 600;
   letter-spacing: 3%;
   font-size: 15px;
   color: #3c3333;
}

.achievement.show {
   opacity: 1;
   transform: translateX(0);
}

.achievement.hide {
   opacity: 0;
   transform: translateX(120%);
}