/*
 * "Onyx" (portfolio / personal): a dark one-page site. Your photo stays in a tall card on the left, with
 * "Hey, I'm ..." and your roles typing in turn; everything else scrolls beside it: a statement with highlighted
 * words, your story, numbers and awards, your path as a timeline, large project cards, services that open one
 * by one, what clients say and the contact form. A small menu runs down the right edge. One green accent.
 */
:root {
    --pf-aside: on;
    --pf-nav: on;
    --fo-bg: var(--pf-bg, #111214);
    --fo-ink: var(--pf-ink, #f2f2f2);
    --fo-text: #a7a9ad;
    --fo-mute: #9a9da2;
    --fo-line: rgba(255, 255, 255, .1);
    --fo-card: #1a1b1e;
    --fo-accent: var(--primary-color, #22c55e);
    --fo-on-accent: #07140b;
    --fo-dark: #0b0c0d;
    --fo-radius: 22px;
    --fo-head: "Figtree", "Helvetica Neue", Arial, sans-serif;
    --fo-wrap: 820px;
}
/* The platform's lines (the footer's top edge, card borders: clean.css) in Onyx's dark, not the light default. */
html body[data-pf-site] { --skin-line: var(--fo-line); }

body[data-pf-site] { font-family: "Figtree", "Helvetica Neue", Arial, sans-serif; background: var(--fo-bg) !important; color: var(--fo-text); }
html body[data-pf-site] h1, html body[data-pf-site] h2, html body[data-pf-site] h3, html body[data-pf-site] .sx-h1 { font-family: var(--fo-head) !important; }
html.pf-has-aside .header_wrap, html.pf-has-aside footer:not(.me-foot), html.pf-has-aside .top-header { display: none !important; }

/* The right-hand column. */
.pf-aside-main { padding: 0 90px 0 clamp(24px, 5vw, 80px); }
@media (min-width: 992px) {
    .pf-aside-layout { display: block; }
    .pf-aside { position: fixed; top: 0; left: 0; bottom: 0; z-index: 5; width: 380px; height: auto; }
    .pf-aside-main { margin-left: 380px; }
    .pf-aside .pf-hero-card { position: absolute; inset: 0; height: auto; }
    .pf-aside .pf-card { height: 100%; }
}
html.pf-has-aside .scrollup { display: none !important; }
.pf-aside-main .pf-wrap, .pf-aside-main .sx-wrap { width: 100%; max-width: var(--fo-wrap); margin-inline: 0; }
.pf-aside-main .pf-section, .pf-aside-main .me-section { padding: clamp(56px, 7vw, 100px) 0 0; background: transparent; }

/* A pill above each part. */
.pf-pill, .me-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 22px; padding: 5px 12px; border-radius: 999px; background: var(--fo-card); color: var(--fo-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pf-pill::before, .me-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fo-accent); }

/* The statement at the top, highlighted words in green. */
.pf-aside-main .pf-hero-statement { padding: clamp(56px, 8vh, 110px) 0 0; background: transparent; }
html body[data-pf-site] .pf-aside-main .pf-statement { text-align: left; font-size: clamp(36px, 4.2vw, 62px) !important; line-height: 1.1 !important; letter-spacing: -.03em; color: var(--fo-ink) !important; }
.pf-aside-main .pf-statement mark { padding: 0 .16em; border-radius: .3em; background: var(--fo-accent); color: var(--fo-on-accent); }
.pf-aside-main .pf-statement-note { display: flex; align-items: center; gap: 12px; max-width: none; padding: 0; border: 0; color: var(--fo-ink); font-weight: 600; }
.pf-aside-main .pf-statement-ways { display: none; }

/* Story, numbers, awards. */
html body[data-pf-site] .pf-plain-title { margin: 0 0 20px !important; color: var(--fo-ink) !important; font-size: clamp(28px, 2.8vw, 40px) !important; font-weight: 500 !important; line-height: 1.15 !important; }
.pf-plain-story { margin: 0; color: var(--fo-text); font-size: 15.5px; line-height: 1.65; }
.pf-numbers { margin-top: 40px !important; }
.pf-numbers strong { color: var(--fo-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 4vw, 60px); font-weight: 400; }
.pf-numbers span { color: var(--fo-text); font-size: 13.5px; }
.pf-award-rows { margin-top: 40px !important; border-top: 1px solid var(--fo-line); }
.pf-award-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--fo-line); }
.pf-award-rows strong { display: block; color: var(--fo-ink); font-size: 18px; font-weight: 500; }
.pf-award-rows em { color: var(--fo-mute); font-size: 13.5px; font-style: normal; }
.pf-award-rows b { color: var(--fo-ink); font-weight: 500; }

/* The path: a green timeline (education and experience from the resume). */
.me-head { margin-bottom: 30px; text-align: left; }
html body[data-pf-site] .me-head h2 { color: var(--fo-ink) !important; font-size: clamp(28px, 2.8vw, 40px) !important; font-weight: 500 !important; }
.me-head h2 b { font-weight: 500; }
.me-timeline { display: grid; gap: 0; }
.me-timeline > div { position: relative; }
.me-sub { margin: 24px 0 8px !important; color: var(--fo-mute) !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; }
.me-step { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 34px; padding: 18px 0; background: transparent !important; border: 0 !important; }
.me-step::before { content: ""; position: absolute; left: 145px; top: 0; bottom: 0; width: 1px; background: var(--fo-line); }
.me-step::after { content: ""; position: absolute; left: 140px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background: var(--fo-accent); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.me-step .me-icon { display: none; }
.me-step > div { display: contents; }
.me-date { grid-column: 1; grid-row: 1; padding-top: 2px; color: var(--fo-text); background: none !important; font-size: 14px; }
html body[data-pf-site] .me-step h4 { grid-column: 2; margin: 0 !important; color: var(--fo-ink) !important; font-size: 16px !important; font-weight: 600 !important; }
.me-step small { grid-column: 2; margin-top: -8px; color: var(--fo-mute); font-size: 13px; }
.me-step p { grid-column: 2; margin: 4px 0 0; color: var(--fo-text); font-size: 14px; }
.me-skills { display: grid; gap: 14px; margin-top: 20px; }
.me-skill { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 14px; background: var(--fo-card); }
.me-skill > div { display: flex; justify-content: space-between; color: var(--fo-ink); font-size: 15px; }
.me-skill em { display: none; }
.me-skill i { position: relative; display: block; height: 30px; border-radius: 999px; background: #0d0e10; }
.me-skill i::after { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(var(--level) - 6px); border-radius: 999px; background: var(--fo-accent, #22c55e); }
.me-counters { display: none; }

/* Work: large rounded cards. */
.pf-works-highlights .pf-head-rule { display: none; }
.pf-works-highlights .pf-head::before { content: "Work highlights"; display: inline-flex; margin-bottom: 22px; padding: 5px 12px; border-radius: 999px; background: var(--fo-card); color: var(--fo-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pf-highlight { border: 1px solid var(--fo-line); }
.pf-btn { border-color: var(--fo-ink); background: var(--fo-ink); color: var(--fo-bg) !important; border-radius: 999px; }
.pf-btn:hover { color: var(--fo-ink) !important; }
.pf-center { text-align: left; }

/* Services that open one by one. */
.pf-services-accordion .pf-head-rule { display: none; }
.pf-services-accordion .pf-head::before { content: "Services"; display: inline-flex; margin-bottom: 22px; padding: 5px 12px; border-radius: 999px; background: var(--fo-card); color: var(--fo-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pf-accordion summary { color: var(--fo-ink); font-size: clamp(24px, 2.4vw, 32px); }
.pf-accordion summary::after { border-color: var(--fo-line); color: var(--fo-ink); }
.pf-accordion-pic { border-radius: 14px; }
.pf-tags li { border-color: var(--fo-line); color: var(--fo-text); }

/* What clients say, the contact form. */
.me-quotes .me-cards { display: grid; gap: 16px; }
.me-quote { margin: 0; padding: 26px; border-radius: 18px; background: var(--fo-card); }
.me-quote blockquote { margin: 0 0 18px; padding: 0; border: 0; color: var(--fo-ink); font-size: 20px; line-height: 1.4; }
.me-quote blockquote::before { content: "\201C"; display: block; color: var(--fo-accent); font-size: 40px; line-height: .8; }
.me-quote strong { display: block; color: var(--fo-ink); }
.me-quote em { color: var(--fo-mute); font-style: normal; font-size: 13px; }
.me-quote figcaption { display: flex; align-items: center; gap: 12px; }
.me-quote figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.me-contact-grid { display: grid; gap: 24px; }
.me-contact-card { padding: 0 !important; background: transparent !important; }
.me-avatar { display: none; }
.me-way { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--fo-line); }
.me-way .me-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fo-card); color: var(--fo-accent); }
.me-way strong { display: block; color: var(--fo-mute); font-size: 12px; text-transform: uppercase; }
.me-way a, .me-way em { color: var(--fo-ink); font-style: normal; text-decoration: none; }
.me-form .pf-contact-info, .me-form .heading_s1, .me-form .form-label { display: none !important; }
.me-form .section, .me-form .container, .me-form .field_form { margin: 0 !important; padding: 0 !important; max-width: none !important; background: transparent !important; border: 0 !important; }
html body .me-form .form-control { min-height: 50px; border: 1px solid var(--fo-line) !important; border-radius: 12px !important; background: var(--fo-card) !important; color: var(--fo-ink) !important; }
html body .me-form button[type=submit] { min-height: 48px; padding: 0 26px; border: 0 !important; border-radius: 999px !important; background: var(--fo-accent) !important; color: var(--fo-on-accent) !important; font-weight: 600; }
html body .me-form p, html body .me-form label { color: var(--fo-text) !important; }

/* The menu down the right edge (me.js builds it), the closing line. */
.me-nav { position: fixed !important; top: 50% !important; right: 18px; left: auto; z-index: 1000; display: block; width: auto !important; padding: 10px !important; border-radius: 999px; background: var(--fo-card) !important; box-shadow: none !important; transform: translateY(-50%); }
.me-nav-name, .me-toggle { display: none !important; }
.me-nav ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.me-nav ul a { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; color: var(--fo-text); font-size: 0; line-height: 40px; text-align: center; text-decoration: none; }
.me-nav ul a::first-letter { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.me-nav ul a:hover, .me-nav ul a.is-on { background: var(--fo-accent); color: #0b0c0e; } /* dark words on the green: white on it is too faint */
.me-nav ul a.is-on::after { display: none; }
.me-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 80px; padding: 28px 0 40px; border-top: 1px solid var(--fo-line); color: var(--fo-mute); font-size: 13px; }
.me-foot .me-social { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.me-foot a { color: var(--fo-text); text-decoration: none; }

@media (max-width: 991.98px) {
    .pf-aside-main { padding: 0 20px; }
    .me-nav { top: auto !important; bottom: 14px; right: 50%; transform: translateX(50%); border-radius: 999px; }
    .me-nav ul { grid-auto-flow: column; }
    .me-step { grid-template-columns: 90px minmax(0, 1fr); gap: 26px; }
    .me-step::before { left: 103px; }
    .me-step::after { left: 98px; }
}
.pf-btn.pf-btn-accent { border-color: var(--fo-accent); background: var(--fo-accent); color: var(--fo-on-accent) !important; }