:root{
    --bg:#f5f6f7;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#0f172a;
    --max:70ch;
    --radius:10px;
    --padding:28px;
    --tab:#eef2ff;
}
html,body{height:100%}
body{
    margin:0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
    background:var(--bg);
    color:var(--accent);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:start;
    justify-content:center;
    padding:36px 16px;
}

.sheet{
    width:100%;
    max-width:var(--max);
    background:var(--card);
    border-radius:var(--radius);
    padding:var(--padding);
    box-shadow:0 6px 24px rgba(12,13,14,0.08);
    box-sizing:border-box;
}

header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.sheet > header > div:first-child{flex:1 1 auto}
.contact-block{flex:0 0 auto;margin-left:auto;align-self:flex-start}
.title{margin:0;font-size:1.25rem;letter-spacing:-0.02em;font-weight:600}
.lead{margin:8px 0;color:var(--muted);font-size:0.98rem;line-height:1.45}
.meta{color:var(--muted);font-size:0.875rem}

.tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.tabs{position:relative;z-index:5}
    .sheet{position:relative}
    .tabs{position:relative;z-index:999}
    .tab{background:#fff;border:1px solid #eef2f8;padding:8px 12px;border-radius:10px;cursor:pointer;color:var(--accent);font-weight:600;position:relative;z-index:1000;cursor:pointer!important;pointer-events:auto!important}
    .tab:hover{filter:brightness(0.98);transform:translateY(-1px)}
.tab.active{background:var(--tab);box-shadow:inset 0 -4px 0 rgba(99,102,241,0.06)}

main h2{margin-top:18px;font-size:1rem;font-weight:600}
p{margin:0 0 12px 0;line-height:1.5;color:#111827}
ul{margin:8px 0 12px 18px}
footer{margin-top:18px;border-top:1px solid #eef0f2;padding-top:12px;color:var(--muted);font-size:0.875rem}

.row{display:flex;gap:16px}
.col{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:#f3f4f6;padding:6px 8px;border-radius:999px;font-size:13px}

@media (max-width:520px){body{padding:18px}.sheet{padding:18px;border-radius:8px}.row{flex-direction:column}}

/* Projects fragment: floated buttons and content area */
.projects-buttons{overflow:hidden;margin:8px 0 0 0;padding-bottom:8px}
.projects-buttons .tab{float:left;margin-right:8px;margin-bottom:8px}
.project-content{clear:both;padding-top:12px;border-top:1px solid #eef0f2;margin-top:12px}
.project-content[hidden]{display:none}