/* Imba Page — Handcrafted Style */
:root {
    --ink-black: #2C1810;
    --saddle-brown: #8B4513;
    --kraft: #D4A574;
    --cream: #F5E6D3;
    --terracotta: #E07B53;
    --sage: #5D8A66;
    --sticky-yellow: #FFFACD;
    --sticky-pink: #FFD1DC;
    --sticky-green: #C1E1C1;
    --sticky-blue: #C1D8E1;
    --paper-white: #FAFAF8;
    --pencil-gray: #6B6B6B;
    --shadow-soft: 3px 3px 0 rgba(44, 24, 16, 0.1);
    --shadow-paper: 2px 2px 8px rgba(44, 24, 16, 0.15);
    --shadow-lift: 4px 4px 12px rgba(44, 24, 16, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--cream);
    color: var(--ink-black);
    line-height: 1.8;
    overflow-x: hidden;
}

/* Paper Texture */
.paper-texture {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* HERO */
.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem;
    position: relative;
}

.hero-content {
    text-align: center;
    position: relative;
    background: var(--paper-white);
    padding: 3rem 4rem;
    box-shadow: var(--shadow-paper);
    max-width: 560px;
    width: 100%;
}

/* Washi Tape */
.washi-tape {
    position: absolute;
    width: 120px;
    height: 28px;
    opacity: 0.75;
    z-index: 10;
}
.washi-tape.top-left {
    background: repeating-linear-gradient(45deg, var(--terracotta), var(--terracotta) 5px, transparent 5px, transparent 10px);
    top: -12px; left: 20px; transform: rotate(-4deg);
}
.washi-tape.top-right {
    background: repeating-linear-gradient(-45deg, var(--sage), var(--sage) 5px, transparent 5px, transparent 10px);
    top: -12px; right: 20px; transform: rotate(4deg);
}
.washi-tape.footer-tape {
    background: repeating-linear-gradient(45deg, var(--kraft), var(--kraft) 5px, transparent 5px, transparent 10px);
    top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
    width: 200px;
}

/* Avatar */
.avatar-frame {
    width: 110px;
    height: 110px;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--ink-black);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    position: relative;
    box-shadow: 4px 4px 0 var(--ink-black);
}
.avatar-inner { font-size: 3rem; line-height: 1; }
.avatar-label {
    position: absolute;
    bottom: -14px;
    background: var(--terracotta);
    color: white;
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: 'Be Vietnam Pro', sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Hero Title */
.hero-title {
    margin: 1rem 0 0.5rem;
}
.handwritten {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 5rem);
    color: var(--ink-black);
    line-height: 1;
}
.hero-tagline {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    color: var(--pencil-gray);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Stamp */
.stamp-badge {
    position: absolute;
    top: 1.5rem;
    right: -1.5rem;
    width: 70px;
    height: 70px;
    border: 3px solid var(--terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', cursive;
    font-size: 0.75rem;
    text-align: center;
    color: var(--terracotta);
    transform: rotate(15deg);
    opacity: 0.85;
    line-height: 1.2;
}

/* Doodles */
.hero-doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle { position: absolute; color: var(--kraft); opacity: 0.5; }
.doodle.star { width: 40px; top: 15%; left: 8%; animation: wobble 3s ease-in-out infinite; }
.doodle.heart { width: 35px; bottom: 20%; right: 8%; animation: wobble 4s ease-in-out infinite reverse; }
.doodle.squiggle { width: 70px; bottom: 10%; left: 5%; animation: wobble 5s ease-in-out infinite; }

@keyframes wobble {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* SECTIONS */
.section {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.section-header { margin-bottom: 2rem; }
.section-title {
    font-family: 'Baloo 2', cursive;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ink-black);
}
.underline-doodle {
    height: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M0 6 Q25 2 50 6 Q75 10 100 6 Q125 2 150 6 Q175 10 200 6' fill='none' stroke='%23E07B53' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x;
    width: 200px;
    margin-top: 0.5rem;
}

/* NOTEBOOK CARD */
.notebook-card {
    background: var(--paper-white);
    border: 2px solid var(--ink-black);
    padding: 2rem 2rem 2rem 3.5rem;
    position: relative;
    box-shadow: var(--shadow-paper);
}
.notebook-card.wide { max-width: 700px; }
.notebook-holes {
    position: absolute;
    left: 1rem;
    top: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1.5rem 0;
}
.notebook-holes span {
    width: 20px; height: 20px;
    border: 2px solid var(--kraft);
    border-radius: 50%;
    background: var(--cream);
    display: block;
}
.card-text {
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
    line-height: 1.9;
}
.card-note {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    color: var(--pencil-gray);
    font-style: italic;
    margin-top: 1rem;
}

/* STICKY NOTES */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.sticky-note {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    box-shadow: var(--shadow-lift);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sticky-note:hover {
    transform: translateY(-4px) rotate(1deg);
    box-shadow: 6px 8px 16px rgba(44,24,16,0.2);
}
.sticky-note.yellow { background: var(--sticky-yellow); transform: rotate(-1deg); }
.sticky-note.pink { background: var(--sticky-pink); transform: rotate(1.5deg); }
.sticky-note.green { background: var(--sticky-green); transform: rotate(-0.5deg); }
.sticky-note.blue { background: var(--sticky-blue); transform: rotate(1deg); }

.sticky-fold {
    position: absolute;
    top: 0; right: 0;
    width: 20px; height: 20px;
    background: linear-gradient(225deg, rgba(0,0,0,0.1) 50%, transparent 50%);
}
.sticky-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.sticky-note h3 {
    font-family: 'Baloo 2', cursive;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
    color: var(--ink-black);
}
.sticky-note p { font-size: 0.9rem; color: var(--pencil-gray); line-height: 1.6; }

/* POSTCARDS */
.postcard-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
}
.postcard {
    background: var(--paper-white);
    border: 1px solid var(--kraft);
    padding: 1.5rem;
    position: relative;
    box-shadow: var(--shadow-paper);
    transition: transform 0.2s ease;
}
.postcard:hover { transform: rotate(1deg) translateY(-3px); }
.postcard-stamp {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 45px; height: 45px;
    border: 2px solid var(--terracotta);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    color: var(--terracotta);
}
.postcard-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--saddle-brown);
}
.postcard-content p { font-size: 0.95rem; line-height: 1.7; }
.postcard-lines {
    margin-top: 1rem;
    display: flex; flex-direction: column; gap: 4px;
}
.postcard-lines span {
    display: block;
    height: 1px;
    background: var(--kraft);
    opacity: 0.6;
}

/* LANGUAGES */
.lang-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.lang-card.notebook-paper {
    background: linear-gradient(to bottom, var(--paper-white) 0%, var(--paper-white) 100%);
    background-image: repeating-linear-gradient(
        transparent, transparent 29px, var(--kraft) 29px, var(--kraft) 30px
    );
    border: 2px solid var(--ink-black);
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    position: relative;
    min-width: 260px;
    box-shadow: var(--shadow-paper);
}
.lang-card .notebook-holes {
    left: 0.8rem;
    flex-direction: column;
    gap: 0;
    justify-content: space-around;
}
.lang-item { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; }
.lang-flag { font-size: 2rem; }
.lang-item strong { font-family: 'Baloo 2', cursive; font-size: 1.3rem; display: block; }
.lang-divider { height: 1px; background: var(--kraft); margin: 0.5rem 0; opacity: 0.5; }
.lang-note {
    max-width: 220px;
    transform: rotate(-2deg) !important;
    font-size: 1rem;
}
.lang-note p { font-size: 1.1rem; line-height: 1.6; }

/* FOOTER */
.footer {
    background: var(--ink-black);
    color: var(--cream);
    text-align: center;
    padding: 3rem 1.5rem;
    margin-top: 3rem;
    position: relative;
}
.footer-content { position: relative; }
.footer-name {
    font-size: 3rem;
    color: var(--kraft);
}
.footer-sub {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 0.3rem;
}
.footer-note {
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    opacity: 0.5;
    margin-top: 0.8rem;
    font-style: italic;
}

/* CARDS GRID */
.cards-grid {
    display: flex;
    justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .hero-content { padding: 2.5rem 1.5rem; }
    .stamp-badge { right: -0.5rem; top: 1rem; width: 55px; height: 55px; font-size: 0.65rem; }
    .skills-grid { grid-template-columns: 1fr 1fr; }
    .lang-container { flex-direction: column; }
    .lang-note { max-width: 100%; transform: rotate(-1deg) !important; }
}