.hero { padding-block: clamp(var(--space-20), 12vw, var(--space-32)); border-bottom: 1px solid var(--color-border);}.hero__content { max-width: 900px;}.hero__eyebrow { margin-bottom: var(--space-5);}.hero__title { max-width: 900px; margin-bottom: var(--space-6); font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: 1.02; letter-spacing: -0.045em;}.hero__title-accent { color: var(--color-accent);}.hero__description { max-width: 680px; margin-bottom: var(--space-8); color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1.75;}.section--introduction { background: var(--color-bg-soft);}.introduction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-8), 8vw, var(--space-16));}.introduction__heading { max-width: 480px;}.introduction__content { max-width: 680px;}.introduction__content p { color: var(--color-text-muted); font-size: var(--font-size-lg);}.introduction__content .text-link { margin-top: var(--space-2);}.expertise-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--color-border); background: var(--color-border);}.expertise-list__item { padding: var(--space-8); background: rgba(255, 255, 255, 0.5); transition: background-color var(--transition-fast);}.expertise-list__item:hover { background: rgba(255, 255, 255, 0.8);}.expertise-list__title { margin-bottom: var(--space-3);}.expertise-list__description { margin-bottom: 0; color: var(--color-text-muted);}.section--experience { background: var(--color-bg-soft);}.experience-list { max-width: 900px; margin: 0; border-top: 1px solid var(--color-border);}.experience-list__item { display: grid; grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8); border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-fast);}.experience-list__item:hover { background: rgba(255, 255, 255, 0.5);}.experience-list__period { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--font-size-sm);}.experience-list__content { max-width: 650px;}.experience-list__role { margin-bottom: var(--space-2);}.experience-list__company { margin-bottom: var(--space-4); color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 700;}.experience-list__description { margin-bottom: 0; color: var(--color-text-muted);}.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);}.project-card { min-height: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);}.project-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(15, 26, 21, 0.08);}.project-card__content { display: flex; min-height: 100%; flex-direction: column; padding: var(--space-8);}.project-card__category { margin-bottom: var(--space-4);}.project-card__title { margin-bottom: var(--space-4);}.project-card__description { margin-bottom: var(--space-6); color: var(--color-text-muted);}.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; margin-bottom: var(--space-6);}.project-card__tags li { padding: 0.3rem 0.6rem; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs);}@media (max-width: 900px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .introduction { display: block; } .introduction__content { max-width: 760px; } .expertise-list { grid-template-columns: 1fr; }}@media (max-width: 720px) { .hero { padding-block: var(--space-16); } .hero__title { font-size: clamp(2.5rem, 12vw, 4rem); } .hero__description { font-size: var(--font-size-md); } .introduction { grid-template-columns: 1fr; gap: var(--space-8); } .introduction__heading, .introduction__content { max-width: 760px; } .section-heading--split { align-items: flex-start; flex-direction: column; } .experience-list__item { grid-template-columns: 1fr; gap: var(--space-3); } .project-grid { grid-template-columns: 1fr; }}@media (max-width: 480px) { .hero__actions { align-items: stretch; flex-direction: column; row-gap: var(--space-3); } .button { width: 100%; }}