* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #000;
background: #fff;
}
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 80px;
} .page-transition-overlay {
position: fixed;
inset: 0;
background: #fff;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 99999;
}
html.page-transition-in .page-transition-overlay {
opacity: 1;
pointer-events: auto;
}.site-header {
padding: 2rem 0;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 1rem;
padding: 0.7rem 1rem;
background-color: #f0f0f0;
}
.site-title {
color: #000;
leading-trim: both;
text-edge: cap;
font-family: "Josefin Sans", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.site-title-description {
color: #000;
leading-trim: both;
text-edge: cap;
font-family: "Josefin Slab", serif;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
} .primary-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}
.primary-menu a {
color: #000;
text-decoration: none;
leading-trim: both;
text-edge: cap;
font-family: "Josefin Slab", serif;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding: 0.7rem 1rem;
background-color: #f0f0f0;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
display: inline-block;
text-transform: lowercase;
}
.primary-menu a:hover {
background-color: #80AC6C;
color: #fff;
transform: translateY(-3px) scale(1.02);
} .primary-menu .current-menu-item {
display: none;
}.hero {
min-height: calc(100vh - 120px);
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 0;
background: #fff;
}
.hero-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: fit-content;
margin: 0 auto;
padding: 0 120px;
}
.hero-intro {
color: #000;
font-family: "Josefin Sans", sans-serif;
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin: 0 0 0.5rem 0;
padding-left: 7px;
}
.hero-title {
color: #80AC6C;
font-family: "Josefin Slab", serif;
font-size: 6rem;
font-style: normal;
font-weight: 300;
line-height: normal;
margin: 0;
white-space: pre-wrap;
padding-bottom: 10rem;
}
.hero-title-text {
display: inline-block;
}
.hero-title-cursor {
display: inline-block;
margin-left: 0.25rem;
opacity: 1;
animation: blink 0.5s infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}.projects-bento {
padding: 4rem 0;
} .bento-container {
background: #EFEFEF;
padding: 10px;
} .bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 10px;
width: 100%;
margin-bottom: 10px; 
} .bento-card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
background: #f0f0f0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
} .bento-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
} .bento-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.4s ease;
} .bento-card:hover .bento-image {
transform: scale(1.05);
filter: blur(3px);
} .bento-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 1.5rem;
background: linear-gradient(180deg, rgba(128, 172, 108, 0.00) 0.1%, rgba(0, 0, 0, 0.368) 99.9%);
opacity: 0;
transition: opacity 0.3s ease;
} .bento-card:hover .bento-overlay {
opacity: 1;
} .bento-title {
color: #fff;
font-family: "Josefin Slab", serif;
font-size: 24px;
font-weight: 400;
line-height: 1.2;
margin: 0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
} .bento-large {
grid-column: span 2;
grid-row: span 2;
}
.bento-wide {
grid-column: span 2;
grid-row: span 1;
}
.bento-tall {
grid-column: span 1;
grid-row: span 2;
} .bento-footer {
display: flex;
justify-content: space-between;
align-items: center;
} .bento-footer-text {
color: #000;
leading-trim: both;
text-edge: cap;
font-family: "Josefin Sans", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: normal;
margin: 0;
text-decoration: none;
} @media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 180px;
}
.bento-large {
grid-column: span 2;
grid-row: span 2;
}
.bento-wide {
grid-column: span 2;
}
.bento-tall {
grid-column: span 1;
grid-row: span 2;
}
}
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
gap: 0.75rem;
}
.bento-large,
.bento-wide,
.bento-tall {
grid-column: span 1;
grid-row: span 1;
}
.bento-title {
font-size: 18px;
}
}.profile {
padding: 4rem 0;
background: #fff;
}
.profile .container {
display: grid;
grid-template-columns: 1.2fr 1.8fr;
gap: 2rem 3rem;
align-items: flex-start;
} .profile-title {
grid-column: 1 / -1;
margin: 0 0 1rem;
color: #80AC6C;
font-family: "Josefin Slab", serif;
font-size: 2.5rem;
font-weight: 300;
line-height: normal;
}
.profile-column h3 {
margin: 0 0 0.5rem;
color: #000;
font-family: "Josefin Sans", sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.profile-column p {
margin: 0;
color: #333;
font-family: "Josefin Slab", serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
} .profile-column--left {
}
.profile-column--right {
} @media (max-width: 1024px) {
.profile .container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.profile {
padding: 3rem 0;
}
.profile .container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.profile-title {
font-size: 2rem;
}
}@media screen and (max-width: 1024px) {
.container {
padding: 0 40px;
} .header-inner {
gap: 1.5rem;
}
.header-title {
padding: 0.6rem 0.9rem;
}
.site-title,
.site-title-description,
.primary-menu a {
font-size: 20px;
} .hero {
min-height: calc(100vh - 110px);
padding: 3rem 0;
}
.hero-container {
padding: 0 80px;
}
.hero-intro {
font-size: 40px;
}
.hero-title {
font-size: 4rem;
padding-bottom: 6rem;
}
} @media screen and (max-width: 768px) {
.container {
padding: 0 20px;
} .header-inner {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.header-title {
width: 100%;
}
.primary-menu {
width: 100%;
flex-wrap: wrap;
gap: 0.75rem;
}
.primary-menu a {
display: inline-block;
padding: 0.5rem 0.75rem;
font-size: 18px;
} .hero {
min-height: auto;
padding: 3rem 0 2.5rem;
}
.hero-container {
padding: 0 0.5rem;
width: 100%;
align-items: center;
text-align: center;
}
.hero-intro {
font-size: 24px;
padding-left: 0;
}
.hero-title {
font-size: 2.5rem;
padding-bottom: 3.5rem;
word-break: break-word;
}
}:root {
--animate-duration: 0.6s;
--animate-ease: cubic-bezier(0.22, 1, 0.36, 1);
} .js-animate-in.animate-ready {
opacity: 0;
transition-property: opacity, transform;
transition-duration: var(--animate-duration);
transition-timing-function: var(--animate-ease);
} .js-animate-in.in-view {
opacity: 1;
} .js-animate-in[data-animate="fadeUp"].animate-ready {
transform: translateY(28px);
}
.js-animate-in[data-animate="fadeUp"].in-view {
transform: translateY(0);
} .js-animate-in[data-animate="fadeIn"].animate-ready {
transform: none;
}
.js-animate-in[data-animate="fadeIn"].in-view {
transform: none;
} .js-animate-in[data-animate="fadeLeft"].animate-ready {
transform: translateX(32px);
}
.js-animate-in[data-animate="fadeLeft"].in-view {
transform: translateX(0);
} .js-animate-in[data-animate="fadeRight"].animate-ready {
transform: translateX(-32px);
}
.js-animate-in[data-animate="fadeRight"].in-view {
transform: translateX(0);
} .js-animate-in[data-animate="scale"].animate-ready {
transform: scale(0.92);
}
.js-animate-in[data-animate="scale"].in-view {
transform: scale(1);
} .js-animate-in[data-animate="scaleUp"].animate-ready {
transform: scale(0.94) translateY(16px);
}
.js-animate-in[data-animate="scaleUp"].in-view {
transform: scale(1) translateY(0);
}