:root {
    --background: oklch(0.975 0.004 240);
    --foreground: oklch(0.25 0.008 240);
    --card: oklch(1 0 0);
    --muted: oklch(0.955 0.005 240);
    --muted-foreground: oklch(0.49 0.015 240);
    --primary: oklch(0.85 0.165 88);
    --primary-foreground: oklch(0.23 0.01 240);
    --border: oklch(0.91 0.008 240);
    --ring: oklch(0.64 0.13 180);
    --shadow-soft: 0 8px 24px oklch(0.25 0.01 240 / 0.045);
}

body { background: var(--background); color: var(--foreground); }
p { color: var(--muted-foreground); font-size: 14px; line-height: 1.85; }
.wrapper.top_60 { margin-top: 36px; }
.profile, header nav, #content { background: var(--card); box-shadow: var(--shadow-soft); border: 1px solid var(--border); border-radius: 8px; }
.profile-name { padding: 24px 20px; line-height: 1.5; }
.profile .name { font-size: 19px; text-transform: none; }
.profile .job { color: var(--muted-foreground); }
.profile figure img { height: auto; }
.name-accent { color: var(--ring); }
.section-title span { height: 3px; opacity: 1; }
.section-title h2 { padding-bottom: 5px; }
header nav ul li a { color: var(--foreground); }
header nav .social-icons a { font-size: 14px; width: 26px; }
.social-icons a:hover { font-size: 14px; transform: translateY(-2px); }
.site-btn { transition: transform 180ms ease, box-shadow 180ms ease; }
.site-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.site-btn:focus-visible, a:focus-visible, .hamburger:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.freelancer-intro { padding: 4px 0 26px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.intro-eyebrow { color: var(--muted-foreground); font-size: 11px; font-weight: 700; margin: 0 0 16px; }
.intro-eyebrow i { color: var(--ring); margin-right: 8px; }
.freelancer-intro h1 { font-size: 36px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
.intro-summary { font-size: 17px; line-height: 1.65; }
.project-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; font-size: 12px; color: var(--muted-foreground); }
.project-facts strong { font-weight: 500; color: var(--foreground); }
.gif_img_style img { width: 100% !important; max-width: 360px; height: auto !important; aspect-ratio: 4 / 3; }
.project-invitation { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.project-invitation .intro-eyebrow { margin-bottom: 8px; }
.project-invitation h2 { font-size: 23px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
.project-invitation p { margin-bottom: 0; }
.project-invitation .site-btn { flex-shrink: 0; }
section.graybg { background: var(--muted); }
.service { border: 1px solid var(--border); box-shadow: none; transition: transform 180ms ease, border-color 180ms ease; }
.service:hover { background: var(--card) !important; color: var(--foreground); border-color: var(--ring); transform: translateY(-3px); }
.service .little-text { color: var(--muted-foreground); }
.project-thumbnail-unavailable { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; background: var(--muted); color: var(--muted-foreground); }
.project-thumbnail-unavailable i { font-size: 32px; }
.portfolio img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
    .wrapper.top_60 { margin-top: 16px; }
    .freelancer-intro h1 { font-size: 30px; }
    .project-invitation { flex-direction: column; align-items: flex-start; }
    .project-invitation .site-btn { align-self: stretch; }
    .gif_img_style { padding: 20px 0; }
    section { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.site-btn > i {
    opacity: 1;
}