/* ========================================
   PETER PUTROS — Personal Portfolio
   Sidebar layout / Light editorial / Warm accent
   ======================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --accent: #E8622C;
    --accent-soft: rgba(232, 98, 44, 0.08);
    --accent-glow: rgba(232, 98, 44, 0.12);
    --dark: #171717;
    --dark-2: #2A2A2A;
    --bg: #FAFAF8;
    --bg-warm: #F4F2ED;
    --card: #FFFFFF;
    --border: #E8E5DE;
    --border-hover: #D0CCC3;
    --t1: #171717;
    --t2: #555;
    --t3: #999;
    --sidebar-w: 280px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sans: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --serif: 'DM Serif Display', Georgia, serif;
    --mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--sans); background: var(--bg); color: var(--t1);
    line-height: 1.6; -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* Touch active states */
@media (hover: none) {
    .bento-card:active { transform: scale(0.98); }
    .contact-link:active { transform: translateX(4px); }
    .btn:active { transform: scale(0.97); }
    .sidebar-link:active { background: rgba(0,0,0,0.05); }
    .tags span:active { color: var(--accent); border-color: var(--accent); }
}

/* Spotlight */
.spotlight {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(650px circle at var(--mx, 50%) var(--my, 50%),
        var(--accent-glow), transparent 50%);
    opacity: 0; transition: opacity 0.5s;
}
.spotlight.active { opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ========================================
   LAYOUT
   ======================================== */
.layout {
    display: flex; min-height: 100vh;
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w); padding: 40px 28px;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg);
    z-index: 100;
}

.sidebar-top { margin-bottom: 40px; }

.sidebar-photo {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--border); margin-bottom: 16px;
    transition: border-color 0.3s, transform 0.3s var(--ease);
}
.sidebar-photo:hover { border-color: var(--accent); transform: scale(1.05); }
.sidebar-photo img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-name {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
    color: var(--dark); margin-bottom: 4px;
}
.sidebar-title { font-size: 0.8rem; color: var(--t3); line-height: 1.5; margin-bottom: 10px; }
.sidebar-location {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.75rem; color: var(--t3);
}

/* Nav */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: auto; }
.sidebar-link {
    position: relative; padding: 10px 14px;
    font-size: 0.85rem; font-weight: 500; color: var(--t3);
    border-radius: 8px; transition: all 0.25s var(--ease);
    display: flex; align-items: center; gap: 10px;
}
.sidebar-link::before {
    content: ''; width: 2px; height: 0; background: var(--accent);
    border-radius: 2px; transition: height 0.25s var(--ease);
}
.sidebar-link:hover { color: var(--t1); background: rgba(0,0,0,0.03); }
.sidebar-link.active { color: var(--t1); font-weight: 600; }
.sidebar-link.active::before { height: 16px; }

/* Bottom */
.sidebar-bottom { margin-top: auto; }
.sidebar-socials { display: flex; gap: 6px; margin-bottom: 16px; }
.sidebar-socials a {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--t3); transition: all 0.25s var(--ease);
}
.sidebar-socials a svg { width: 15px; height: 15px; }
.sidebar-socials a:hover { color: var(--accent); background: var(--accent-soft); }
.sidebar-copy { font-size: 0.68rem; color: var(--t3); }

/* Mobile header */
.mobile-header {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(250,250,248,0.92); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    padding-top: max(14px, env(safe-area-inset-top));
}
.mobile-header-inner { display: flex; align-items: center; justify-content: space-between; }
.mobile-header-name { font-family: var(--serif); font-size: 1rem; color: var(--dark); }
.mobile-burger {
    display: flex; flex-direction: column; gap: 5px; padding: 8px;
    background: none; border: none; cursor: pointer;
}
.mobile-burger span { width: 20px; height: 1.5px; background: var(--dark); border-radius: 2px; transition: all 0.3s var(--ease); transform-origin: center; }
.mobile-burger.active span:first-child { transform: rotate(45deg) translate(3px,3px); }
.mobile-burger.active span:last-child { transform: rotate(-45deg) translate(3px,-3px); }

/* ========================================
   MAIN
   ======================================== */
.main {
    margin-left: var(--sidebar-w);
    flex: 1; min-width: 0;
    padding: 80px clamp(40px, 6vw, 100px);
    max-width: 900px;
    position: relative; z-index: 1;
}

.section { padding-bottom: 100px; }
.section:last-child { padding-bottom: 60px; }

.section-label {
    font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: 24px;
}

/* ========================================
   HERO / ABOUT
   ======================================== */
.hero-block { margin-bottom: 40px; }

.hero-intro {
    font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: 16px;
}

.hero-heading {
    font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400; color: var(--dark); line-height: 1.25;
    letter-spacing: -0.01em;
}
.hero-heading em { font-style: italic; color: var(--accent); }
.hero-heading span { display: block; }

.about-body { margin-bottom: 48px; }
.about-body p {
    color: var(--t2); line-height: 1.8; margin-bottom: 16px; font-size: 0.95rem;
    max-width: 600px;
}
.about-body strong { color: var(--dark); font-weight: 600; }
.about-body em { color: var(--accent); font-style: italic; }

/* Stats */
.stats-row { display: flex; gap: 40px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-num {
    font-family: var(--serif); font-size: 2.2rem; font-weight: 400;
    color: var(--dark); line-height: 1;
}
.stat-plus { font-family: var(--serif); font-size: 2.2rem; color: var(--accent); }
.stat-label { font-size: 0.75rem; color: var(--t3); margin-top: 6px; font-weight: 500; }

/* ========================================
   VENTURES — BENTO GRID
   ======================================== */
.bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bento-card {
    position: relative; padding: 28px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; display: flex; flex-direction: column;
    transition: all 0.4s var(--ease); overflow: hidden;
}

/* Dim siblings on hover */
.bento:hover .bento-card { opacity: 0.5; }
.bento .bento-card:hover { opacity: 1; }

.bento-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.bento-card--large {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    padding: 36px;
}
.bento-card--large::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 60%);
}

.bento-card__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 16px; grid-column: 1 / -1;
}
.live-dot {
    width: 7px; height: 7px; background: #22C55E; border-radius: 50%;
    animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }

.bento-card__name {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--dark);
    margin-bottom: 4px;
}
.bento-card--large .bento-card__name { font-size: 1.6rem; }

.bento-card__role { font-size: 0.75rem; color: var(--t3); margin-bottom: 10px; }
.bento-card__desc { font-size: 0.88rem; color: var(--t2); line-height: 1.65; margin-bottom: 16px; }

.bento-card__metrics { display: flex; gap: 20px; margin-bottom: 14px; }
.bento-card__metrics div { font-size: 0.75rem; color: var(--t3); }
.bento-card__metrics strong { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--accent); font-weight: 400; }

.bento-card__tech { display: flex; flex-wrap: wrap; gap: 5px; }
.bento-card__tech span {
    font-family: var(--mono); font-size: 0.65rem; font-weight: 500; color: var(--t3);
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px;
}

.bento-card__arrow {
    position: absolute; top: 20px; right: 20px; color: var(--t3);
    transition: all 0.3s var(--ease);
}
.bento-card:hover .bento-card__arrow { color: var(--accent); transform: translate(3px,-3px); }

/* Mini Mockup (in large card) */
.mini-mockup {
    background: var(--dark); border-radius: 12px; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    transition: transform 0.5s var(--ease);
}
.mini-mockup:hover { transform: translateY(-3px); }

.mm-bar {
    display: flex; gap: 5px; padding: 8px 12px; background: #222;
}
.mm-bar span { width: 7px; height: 7px; border-radius: 50%; }
.mm-bar span:nth-child(1) { background: #FF5F57; }
.mm-bar span:nth-child(2) { background: #FEBC2E; }
.mm-bar span:nth-child(3) { background: #28C840; }

.mm-body { display: flex; gap: 6px; padding: 10px; }
.mm-side { width: 32px; display: flex; flex-direction: column; gap: 5px; padding: 6px 4px; background: rgba(255,255,255,0.03); border-radius: 6px; }
.mm-s-item { height: 18px; background: rgba(255,255,255,0.05); border-radius: 3px; }
.mm-s-item.on { background: var(--accent); opacity: 0.7; }

.mm-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mm-row-cards { display: flex; gap: 4px; }
.mm-c { flex: 1; height: 36px; background: rgba(255,255,255,0.04); border-radius: 4px; }
.mm-c.accent { border: 1px solid rgba(232,98,44,0.2); }
.mm-chart { height: 32px; }
.mm-chart svg { width: 100%; height: 100%; }
.mm-rows { display: flex; flex-direction: column; gap: 2px; }
.mm-r { height: 14px; background: rgba(255,255,255,0.03); border-radius: 2px; }
.mm-r.hl { border: 1px solid rgba(232,98,44,0.15); }

/* ========================================
   SKILLS
   ======================================== */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.skill-box {
    padding: 24px; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; transition: border-color 0.3s;
}
.skill-box:hover { border-color: var(--border-hover); }
.skill-box h4 {
    font-family: var(--serif); font-size: 0.95rem; font-weight: 400; color: var(--dark);
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span {
    font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--t2);
    padding: 5px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 100px; transition: all 0.25s var(--ease);
}
.tags span:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ========================================
   CONTACT
   ======================================== */
.contact-heading {
    font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400; color: var(--dark); line-height: 1.3; margin-bottom: 32px;
}
.contact-heading em { font-style: italic; color: var(--accent); }

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

.contact-link {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; transition: all 0.3s var(--ease);
}
.contact-link:hover {
    border-color: var(--accent); transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(232,98,44,0.06);
}
.contact-link__label {
    font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
    color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em;
}
.contact-link__value { font-size: 0.9rem; font-weight: 600; color: var(--dark); display: block; }
.contact-link svg { margin-left: auto; color: var(--t3); transition: all 0.3s var(--ease); flex-shrink: 0; }
.contact-link:hover svg { color: var(--accent); transform: translate(3px,-3px); }

/* Main Footer (shows in main area, especially on mobile) */
.main-footer {
    margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--border); text-align: center;
}
.main-footer p { font-size: 0.75rem; color: var(--t3); }

/* ========================================
   ANIMATIONS
   ======================================== */
.anim-word, .anim-fade {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.anim-word.visible, .anim-fade.visible {
    opacity: 1; transform: translateY(0);
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet */
@media (max-width: 900px) {
    .sidebar { display: none; }
    .mobile-header { display: block; }
    .main { margin-left: 0; padding: 88px 24px 40px; max-width: 100%; }

    /* Mobile sidebar overlay */
    .sidebar.mobile-open {
        display: flex;
        position: fixed; inset: 0; width: 100%;
        z-index: 300;
        background: var(--bg);
        padding: 80px 32px 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: slideIn 0.35s var(--ease);
    }
    .sidebar.mobile-open .sidebar-photo { width: 80px; height: 80px; margin-bottom: 20px; }
    .sidebar.mobile-open .sidebar-name { font-size: 1.5rem; margin-bottom: 6px; }
    .sidebar.mobile-open .sidebar-title { font-size: 0.9rem; margin-bottom: 12px; }
    .sidebar.mobile-open .sidebar-nav { margin-bottom: 32px; }
    .sidebar.mobile-open .sidebar-link {
        font-size: 1.15rem; padding: 14px 16px;
    }
    .sidebar.mobile-open .sidebar-socials a { width: 44px; height: 44px; }
    .sidebar.mobile-open .sidebar-socials a svg { width: 18px; height: 18px; }

    @keyframes slideIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .bento-card--large { grid-template-columns: 1fr; }
    .bento-card--large .bento-card__visual { order: -1; }

    .section { padding-bottom: 72px; }
    .hero-block { margin-bottom: 32px; }
    .about-body { margin-bottom: 36px; }

    .contact-heading { font-size: 1.6rem; }
}

/* Mobile */
@media (max-width: 600px) {
    .main { padding: 80px 18px 32px; }

    .bento { grid-template-columns: 1fr; gap: 12px; }
    .bento-card { padding: 22px; }
    .bento-card--large { padding: 24px; }
    .bento-card--large .bento-card__name { font-size: 1.3rem; }
    .bento-card__metrics { gap: 16px; flex-wrap: wrap; }
    .bento-card__tech { gap: 4px; }
    .bento-card__tech span { font-size: 0.62rem; padding: 3px 7px; }
    .bento-card__desc { font-size: 0.84rem; }

    /* Disable dim-siblings on touch — always full opacity */
    .bento:hover .bento-card { opacity: 1; }

    .skills-grid { grid-template-columns: 1fr; gap: 12px; }
    .skill-box { padding: 20px; }

    .stats-row { gap: 20px; }
    .stat-num, .stat-plus { font-size: 1.8rem; }

    .hero-heading { font-size: 1.7rem; }
    .hero-intro { font-size: 0.9rem; }
    .hero-block { margin-bottom: 28px; }

    .about-body p { font-size: 0.9rem; }

    .contact-link { padding: 14px 16px; gap: 12px; }
    .contact-link__value { font-size: 0.82rem; }

    .section-label { font-size: 0.68rem; margin-bottom: 18px; }

    /* Better touch targets */
    .btn { padding: 14px 24px; font-size: 0.88rem; min-height: 48px; }

    /* Mini mockup smaller */
    .mini-mockup { border-radius: 10px; }
    .mm-bar { padding: 6px 10px; }
    .mm-bar span { width: 6px; height: 6px; }
    .mm-body { padding: 8px; gap: 5px; }
    .mm-side { width: 26px; padding: 4px 3px; gap: 4px; }
    .mm-s-item { height: 14px; }
    .mm-row-cards { gap: 3px; }
    .mm-c { height: 28px; }
    .mm-r { height: 10px; }

    .footer { padding: 20px 18px; }
}

/* Small phones */
@media (max-width: 380px) {
    .main { padding: 76px 14px 28px; }
    .hero-heading { font-size: 1.5rem; }
    .stat-num, .stat-plus { font-size: 1.5rem; }
    .bento-card { padding: 18px; }
    .contact-heading { font-size: 1.35rem; }
}