:root {
--background: #f6f7f4;
--surface: #ecefed;
--text: #202423;
--muted: #66706c;
--border: #d8ddd8;
--accent: #2f6f68;

--max-width: 1200px;
--content-width: 760px;

--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 7rem;

--transition: 180ms ease;
}

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

html {
scroll-behavior: smooth;
}

body {
background: var(--background);
color: var(--text);

font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

line-height: 1.6;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
}

img {
max-width: 100%;
display: block;
}

.container {
width: min(
    calc(100% - 3rem),
    var(--max-width)
);

margin-inline: auto;
}

.section {
padding-block: var(--spacing-xl);
border-top: 1px solid var(--border);
}

.section-header {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}

.section-number {
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.08em;
}

.section-title {
font-size: clamp(
    2rem,
    5vw,
    4.5rem
);

line-height: 0.95;
letter-spacing: -0.05em;
max-width: 900px;
}

.eyebrow {
color: var(--muted);

font-size: 0.75rem;
font-weight: 600;

letter-spacing: 0.12em;
text-transform: uppercase;
}

.muted {
color: var(--muted);
}

[hidden] {
display: none !important;
}

@keyframes panel-reveal {
from {
    opacity: 0;
    transform: translateY(12px);
}

to {
    opacity: 1;
    transform: translateY(0);
}
}

/* ==============================
Navigation
============================== */

.site-header {
position: sticky;
top: 0;
z-index: 100;

background:
    color-mix(
        in srgb,
        var(--background) 92%,
        transparent
    );

backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}

.navigation {
min-height: 72px;

display: flex;
align-items: center;
justify-content: space-between;

gap: var(--spacing-md);
}

.brand {
font-weight: 700;
letter-spacing: -0.02em;
}

.brand span {
display: block;

color: var(--muted);
font-size: 0.7rem;
font-weight: 400;
}

.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;

list-style: none;
}

.nav-links a {
color: var(--muted);
font-size: 0.9rem;

transition:
    color var(--transition),
    transform var(--transition);
}

.nav-links a:hover {
color: var(--text);
transform: translateY(-1px);
}

.resume-link {
color: var(--text) !important;

border-bottom:
    1px solid var(--text);

padding-bottom: 0.15rem;
}

/* ==============================
Hero
============================== */

.hero {
min-height:
    calc(100vh - 72px);

display: flex;
align-items: center;
padding: 10px;
padding-block:
    clamp(
        5rem,
        8vw,
        8rem
    );
}

.hero-layout {
width: 100%;

display: grid;

grid-template-columns:
    minmax(0, 1.6fr)
    minmax(260px, 0.7fr);

gap: var(--spacing-lg);
align-items: end;
}

.hero-name {
margin-top: 1rem;

font-size: clamp(
    4rem,
    11vw,
    9.5rem
);

font-weight: 700;
line-height: 0.82;

letter-spacing: -0.075em;
}

.hero-role {
margin-top: var(--spacing-md);

max-width: 780px;

font-size: clamp(
    1.8rem,
    4vw,
    4rem
);

line-height: 1;
letter-spacing: -0.045em;
}

.hero-description {
max-width: 620px;
margin-top: var(--spacing-md);

color: var(--muted);

font-size: clamp(
    1rem,
    1.5vw,
    1.2rem
);
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;

margin-top: var(--spacing-md);
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 48px;

padding:
    0.8rem
    1.2rem;

border:
    1px solid var(--text);

font-size: 0.85rem;
font-weight: 600;

transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.button-primary {
background: var(--text);
color: var(--background);
}

.button-primary:hover {
background: transparent;
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(32, 36, 35, 0.07);
}

.button-secondary:hover {
background: var(--text);
color: var(--background);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(32, 36, 35, 0.07);
}

.hero-side {
border-left:
    1px solid var(--border);

padding-left:
    var(--spacing-md);
}

.hero-side p {
margin-top: 0.6rem;
color: var(--muted);
}

.capability-list {
margin-top:
    var(--spacing-md);

list-style: none;
}

.capability-list li {
padding-block: 0.65rem;

border-top:
    1px solid var(--border);

font-size: 0.9rem;
}

/* ==============================
Tabs
============================== */

.tabbed-content {
padding-top: var(--spacing-lg);
}

.tabs-header {
display: grid;
grid-template-columns:
    minmax(240px, 0.65fr)
    minmax(0, 1fr);

gap: var(--spacing-lg);
align-items: end;

margin-bottom: var(--spacing-lg);
}

.tabs {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.6rem;
}

.tab {
appearance: none;
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
cursor: pointer;

min-height: 42px;

padding:
    0.65rem
    0.9rem;

font-size: 0.78rem;
font-weight: 600;

transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.tab:hover {
border-color: var(--text);
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(32, 36, 35, 0.06);
}

.tab:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.contact-links a:focus-visible,
.nav-links a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}

.tab[aria-selected="true"] {
background: var(--text);
border-color: var(--text);
color: var(--background);
}

.tab-panel.is-active {
animation: panel-reveal 260ms ease both;
}

/* ==============================
What I Do
============================== */

.intro-copy {
max-width: 880px;

margin-left: 152px;

font-size: clamp(
    1.5rem,
    3vw,
    2.8rem
);

line-height: 1.2;
letter-spacing: -0.035em;
}

.capability-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);

margin-top:
    var(--spacing-lg);

border-top:
    1px solid var(--border);
}

.capability-card {
min-height: 330px;

padding:
    var(--spacing-md);

border-right:
    1px solid var(--border);

transition:
    background var(--transition),
    transform var(--transition);
}

.capability-card:last-child {
border-right: none;
}

.capability-card:hover {
background:
    color-mix(
        in srgb,
        var(--surface) 62%,
        transparent
    );

transform: translateY(-3px);
}

.capability-card h3 {
margin-top:
    var(--spacing-lg);

font-size: 1.8rem;
letter-spacing: -0.03em;
}

.capability-card p {
margin-top: 1rem;
color: var(--muted);
}

/* ==============================
Projects
============================== */

.project {
display: grid;

grid-template-columns:
    120px
    minmax(0, 1.3fr)
    minmax(220px, 0.6fr);

gap: var(--spacing-md);

padding-block:
    var(--spacing-lg);

border-top:
    1px solid var(--border);

transition:
    background var(--transition),
    transform var(--transition);
}

.project:last-child {
border-bottom:
    1px solid var(--border);
}

.project-number {
color: var(--muted);
}

.project:hover {
background:
    color-mix(
        in srgb,
        var(--surface) 48%,
        transparent
    );

transform: translateX(6px);
}

.project h3 {
font-size: clamp(
    2rem,
    4vw,
    4rem
);

line-height: 0.98;
letter-spacing: -0.05em;
}

.project-summary {
margin-top:
    var(--spacing-md);

max-width: 620px;

color: var(--muted);
}

.project-side {
display: flex;
flex-direction: column;
justify-content: space-between;

gap: var(--spacing-md);
}

.project-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}

.tag {
padding:
    0.35rem
    0.55rem;

border:
    1px solid var(--border);

color: var(--muted);

font-size: 0.72rem;

transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.tag:hover {
background: var(--text);
border-color: var(--text);
color: var(--background);
transform: translateY(-2px);
}

.text-link {
display: inline-block;

font-size: 0.85rem;
font-weight: 600;

border-bottom:
    1px solid var(--text);

width: fit-content;

padding-bottom:
    0.2rem;

transition:
    color var(--transition),
    transform var(--transition);
}

.text-link:hover {
color: var(--accent);
transform: translateX(4px);
}

/* ==============================
Experience
============================== */

.experience-list {
max-width: 1000px;
margin-left: 152px;
}

.experience-item {
display: grid;

grid-template-columns:
    190px
    minmax(0, 1fr);

gap: var(--spacing-md);

padding-block:
    var(--spacing-lg);

border-top:
    1px solid var(--border);

transition:
    background var(--transition),
    transform var(--transition);
}

.experience-item:last-child {
border-bottom:
    1px solid var(--border);
}

.experience-date {
color: var(--muted);
font-size: 0.85rem;
}

.experience-item:hover {
background:
    color-mix(
        in srgb,
        var(--surface) 46%,
        transparent
    );

transform: translateX(6px);
}

.experience-role {
font-size: clamp(
    1.8rem,
    3vw,
    3rem
);

line-height: 1;
letter-spacing: -0.04em;
}

.experience-company {
margin-top: 0.5rem;

color: var(--muted);
font-size: 1rem;
}

.experience-description {
max-width: 650px;

margin-top:
    var(--spacing-md);

color: var(--muted);
}

/* ==============================
Skills
============================== */

.skills-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);

margin-left: 152px;

border-top:
    1px solid var(--border);
}

.skill-group {
padding:
    var(--spacing-md);

border-right:
    1px solid var(--border);

transition:
    background var(--transition),
    transform var(--transition);
}

.skill-group:last-child {
border-right: none;
}

.skill-group:hover {
background:
    color-mix(
        in srgb,
        var(--surface) 54%,
        transparent
    );

transform: translateY(-3px);
}

.skill-group h3 {
margin-bottom:
    var(--spacing-md);

font-size: 1.1rem;
}

.skill-group ul {
list-style: none;
}

.skill-group li {
padding-block: 0.3rem;

color: var(--muted);
font-size: 0.88rem;
}

/* ==============================
Writing
============================== */

.writing-list {
margin-left: 152px;
}

.writing-item {
display: grid;

grid-template-columns:
    minmax(0, 1fr)
    180px;

gap: var(--spacing-md);

padding-block:
    var(--spacing-md);

border-top:
    1px solid var(--border);

transition:
    background var(--transition),
    transform var(--transition);
}

.writing-item:last-child {
border-bottom:
    1px solid var(--border);
}

.writing-item:hover {
background:
    color-mix(
        in srgb,
        var(--surface) 46%,
        transparent
    );

transform: translateX(6px);
}

.writing-item h3 {
font-size: clamp(
    1.4rem,
    3vw,
    2.4rem
);

letter-spacing: -0.035em;
}

.writing-description {
margin-top: 0.7rem;

color: var(--muted);
max-width: 700px;
}

.writing-meta {
color: var(--muted);

font-size: 0.8rem;
text-align: right;
}

/* ==============================
Personal
============================== */

.personal-layout {
display: grid;

grid-template-columns:
    152px
    minmax(0, 1fr);

gap: 0;
}

.personal-content {
max-width: 820px;
}

.personal-content p {
font-size: clamp(
    1.5rem,
    3vw,
    2.8rem
);

line-height: 1.2;
letter-spacing: -0.035em;
}

.personal-interests {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;

margin-top:
    var(--spacing-md);
}

/* ==============================
Contact
============================== */

.contact {
padding-block:
    var(--spacing-xl);
}

.contact-heading {
max-width: 1000px;

font-size: clamp(
    3rem,
    8vw,
    8rem
);

line-height: 0.88;
letter-spacing: -0.07em;
}

.contact-links {
display: flex;
flex-wrap: wrap;

gap:
    1rem
    2rem;

margin-top:
    var(--spacing-lg);

padding-top:
    var(--spacing-md);

border-top:
    1px solid var(--border);
}

.contact-links a {
border-bottom:
    1px solid var(--text);

transition:
    color var(--transition),
    transform var(--transition);
}

.contact-links a:hover {
color: var(--accent);
transform: translateY(-2px);
}

/* ==============================
Footer
============================== */

footer {
padding-block:
    var(--spacing-md);

border-top:
    1px solid var(--border);
}

.footer-layout {
display: flex;
justify-content: space-between;
gap: var(--spacing-md);

color: var(--muted);
font-size: 0.75rem;
}

/* ==============================
Responsive
============================== */

@media (max-width: 900px) {
.hero-layout,
.project {
    grid-template-columns: 1fr;
}

.tabs-header {
    grid-template-columns: 1fr;
}

.tabs {
    justify-content: flex-start;
}

.hero-side {
    border-left: none;
    border-top:
        1px solid var(--border);

    padding-left: 0;
    padding-top:
        var(--spacing-md);
}

.section-header {
    grid-template-columns: 1fr;
}

.intro-copy,
.experience-list,
.skills-grid,
.writing-list {
    margin-left: 0;
}

.capability-grid {
    grid-template-columns: 1fr;
}

.capability-card {
    min-height: auto;

    border-right: none;
    border-bottom:
        1px solid var(--border);
}

.capability-card h3 {
    margin-top:
        var(--spacing-md);
}

.skills-grid {
    grid-template-columns:
        repeat(2, 1fr);
}

.skill-group {
    border-bottom:
        1px solid var(--border);
}

.experience-item {
    grid-template-columns: 1fr;
}

.personal-layout {
    grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
:root {
    --spacing-xl: 5rem;
}

.container {
    width:
        min(
            calc(100% - 2rem),
            var(--max-width)
        );
}

.nav-links li:not(:last-child) {
    display: none;
}

.tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.tab {
    width: 100%;
}

.hero {
    min-height: auto;

    padding-block:
        var(--spacing-xl);
}

.hero-name {
    font-size:
        clamp(
            4.2rem,
            23vw,
            7rem
        );
}

.skills-grid {
    grid-template-columns: 1fr;
}

.skill-group {
    border-right: none;
}

.writing-item {
    grid-template-columns: 1fr;
}

.writing-meta {
    text-align: left;
}

.footer-layout {
    flex-direction: column;
}
}

@media (
prefers-reduced-motion:
reduce
) {
html {
    scroll-behavior: auto;
}

* {
    transition: none !important;
}

.tab-panel.is-active {
    animation: none;
}
}