:root {
  --color-bg: #fefefe;
  --spacing-sm: clamp(0.5rem, 2vw, 1rem);
  --spacing-md: clamp(1rem, 3vw, 2rem);
  --spacing-lg: clamp(2rem, 5vw, 3.5rem);
}

.features {
  background-color: var(--color-bg);
  padding: var(--spacing-lg);
    border-radius: 12px;
  max-width: 100%;
}

.features__header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.features__header h2 {
  /* font-family: var(--font-display); */
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-title, var(--color-text));
}

.features__header p {
  /* font-family: var(--font-body); */
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.6;
}

.features__body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.features__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative;
}

.features__column--left {
  text-align: right;
}

.features__column--right {
  text-align: left;
}

.features__column--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.features__item h2 {
  /* font-family: var(--font-display); */
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--color-title, var(--color-text));
}

.features__item p {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

.features__image {
  width: 100%;
  height: auto;
  aspect-ratio: 296/662;
  object-fit: cover;
  border-radius: 0.5rem;
  transform: translatey(-4vw);
  mix-blend-mode: multiply;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .features__body {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .features__column--left,
.features__column--right {
    text-align: center;
  }

  .features__header {
    margin-bottom: var(--spacing-md);
  }
}



.about-hero {
    position: relative;
    width: 100vw;
    height: 50svh;
    overflow: hidden
}

.about-hero .about-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.about-hero .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-end
}

.about-hero .about-header {
    text-align: left;
    color: var(--base-100)
}

.about-header h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    font-size: clamp(2.4rem, 7vw, 6rem);
    text-align: left
}

.anime-text-container {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden
}

.anime-text-container .copy-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.anime-text-container .anime-text {
    width: 60%
}

.anime-text-container .anime-text p {
    color: var(--base-300);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1
}

.anime-text-container .anime-text .word {
    display: inline-block;
    position: relative;
    margin-right: .2rem;
    margin-bottom: .2rem;
    padding: .1rem .2rem;
    border-radius: 8px;
    will-change: background-color,opacity
}

.anime-text-container .anime-text .word.keyword-wrapper {
    margin: 0 .4rem .2rem .2rem
}

.anime-text-container .anime-text .word span {
    position: relative
}

.anime-text-container .anime-text .word span.keyword {
    border-radius: 2rem;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: .1rem 0;
    color: var(--base-300)
}

.anime-text-container .anime-text .word span.keyword::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + 1rem);
    height: calc(100% + 0.1rem);
    background-color: var(--base-300);
    border-radius: 8px;
    z-index: -1;
    border: 1px dashed var(--base-300)
}

.anime-text-container .anime-text .word span.keyword.corner::before,.anime-text-container .anime-text .word span.keyword.learnings::before,.anime-text-container .anime-text .word span.keyword.deploy::before {
    background-color: var(--accent-1)
}

.anime-text-container .anime-text .word span.keyword.scroll::before,.anime-text-container .anime-text .word span.keyword.rhythm::before,.anime-text-container .anime-text .word span.keyword.caffeine::before {
    background-color: var(--accent-2)
}

.anime-text-container .anime-text .word span.keyword.archive::before,.anime-text-container .anime-text .word span.keyword.detail::before,.anime-text-container .anime-text .word span.keyword.messing::before {
    background-color: var(--accent-3)
}

.anime-text-container .anime-text .word,.anime-text-container .anime-text .word span {
    opacity: 0
}

.about-skills {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    background-color: var(--base-300);
    color: var(--base-100)
}

.about-skills .container {
    display: flex;
    gap: 2rem
}

.about-skills .about-skills-col {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    border-radius: 16px
}

.about-skills .about-skills-col:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.about-skills .about-skills-col:nth-child(1) h3 {
    width: 80%
}

.about-skills .about-skills-col .object-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #101010;
    border: 1px dashed var(--base-secondary-fade);
    border-radius: 16px
}

.about-skills .object-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.about-skills .object-container .object {
    position: absolute;
    width: max-content;
    font-size: 2rem;
    font-weight: 500;
    background-color: var(--base-100);
    color: var(--base-300);
    padding: 2rem 4rem;
    border-radius: 10px;
    user-select: none;
    pointer-events: auto;
    z-index: 2;
    border: 2px solid #101010
}

.about-skills .object-container .os-1 {
    background-color: var(--accent-1)
}

.about-skills .object-container .os-2 {
    background-color: var(--accent-2)
}

.about-skills .object-container .os-3 {
    background-color: var(--accent-3)
}

.about-skills-copy-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.about-sticky-cards {
    position: relative;
    width: 100vw;
    overflow: hidden;
    background-color: var(--base-100);
    color: var(--base-300);
    /* border-bottom: 1px dotted var(--base-300); */
}

.about-sticky-cards .symbols-container .symbol {
    filter: none
}

.about-sticky-cards .sticky-cards-header {
    width: 100%;
    text-align: center;
    margin: 8rem auto
}

.about-sticky-cards .sticky-cards-header h2 {
    margin-bottom: 50px
}

.about-sticky-cards .sticky-cards-header p {
    max-width: 700px;
    margin: 0 auto 1rem
}
blockquote.xxlp {
    font-size: clamp(1.2rem, 2.06rem + 0.45vw, 1.65rem);
    margin-bottom: 1rem;
}

blockquote {
    padding: 45px 0 30px 25px;
    max-width: 700px;
    margin: 0 auto 1rem;
    border-top: 2px dotted #858585;
    border-bottom: 2px dotted #858585;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg)
}
@media (min-width: 1000px) {    
.about-sticky-cards .sticky-cards-header {
    margin-top: 12rem;
    margin-bottom: 12rem;
}
}
@media (max-width: 1000px) {
    blockquote {
        text-align: left;
        border-top: none;
        border-bottom: none;
        -webkit-transform: none;
        -moz-transform: none;
        padding: 0;
        margin: 0 !important;
}

}

.about-sticky-cards .gallery-card {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    border-radius: 12px;
    background-color: var(--base-300);
    color: var(--base-100);
    flex: 1;
    position: relative;
    display: grid;
    gap: var(--s-2);
    grid-template-rows: auto 30px
}

.about-sticky-cards .gallery-card-img {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden
}

.about-sticky-cards .gallery-card-content {
    flex: 0 0 12px;
    display: flex;
    align-items: center
}

.about-sticky-cards .gallery-card-content p.mono {
    font-size: .8rem
}

.home-about {
    position: relative;
    width: 100%;
    height: 100svh;
    background-color: var(--base-300);
    color: var(--base-100);
    overflow: hidden
}

.home-about .container {
    display: flex;
    gap: 2rem
}

.home-about .home-about-col:nth-child(1) {
    flex: 4
}

.home-about .home-about-col:nth-child(1) .home-about-header {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
    padding-bottom: 1rem
}

.home-about .home-about-col:nth-child(2) {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
    width: 100%
}

.home-about .home-about-col-row {
    display: flex;
    flex: 1;
    gap: 2rem;
    width: 100%
}

.home-about .home-about-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px dashed var(--base-secondary-fade);
    border-radius: 16px;
    padding: 1.5rem
}

.home-about .home-about-card p.mono {
    color: var(--base-200);
}

@media (max-width: 1000px) {
    .about-sticky-cards .gallery-card {
        width:75%
    }
}

@media (max-width: 1000px) {
    .anime-text-container .copy-container h1 {
        width:90%;
        font-size: 2rem
    }

    .anime-text-container .anime-text {
        width: 100%
    }

    .anime-text-container .anime-text p {
        font-size: 1.3rem
    }

    .anime-text-container .anime-text .word {
        margin-right: .1rem;
        margin-bottom: .15rem;
        padding: .05rem .125rem
    }

    .anime-text-container .anime-text .word.keyword-wrapper {
        margin: 0 .2rem .1rem .1rem
    }

    .anime-text-container .anime-text .word span.keyword::before {
        width: calc(100% + 0.35rem);
        height: calc(100% + 0.075rem)
    }
.about-hero {
    height: 60svh;
}
    .about-hero .about-header {
        /* width: 90%; */
        /* top: 50%; */
        /* bottom: unset; */
        transform: translate(0px, 0px);
    }

    .about-skills {
        height: 100svh
    }

    .about-skills .about-skills-col:nth-child(1) h3 {
        width: 100%
    }

    .about-skills .container {
        flex-direction: column
    }

    .about-skills .about-skills-col:nth-child(1) {
        justify-content: flex-start;
        gap: 4rem
    }

    .skills-playground {
        flex: 2!important
    }

    .about-skills .object-container .object {
        font-size: .75rem;
        font-weight: 500;
        padding: .75rem 1.5rem;
        border-radius: 8px;
        user-select: none;
        pointer-events: auto;
        z-index: 2;
        border: 2px solid #101010
    }

    .about-sticky-cards .gallery-card {
        top: 50%
    }

    .about-sticky-cards .gallery-card {
        width: 50%;
        height: 25svh
    }

    .about-sticky-cards .sticky-cards-header {
        padding: var(--space-4);
        margin-bottom: 0 !important;
    }
}

.gallery-card-container {
    display: flex;
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto
}

.map__legend {
    border-top: none!important
}

.contact {
    padding-top: 50px!important
}