:root { --section-padding: 112px; }

body { font-size: 16px; line-height: 1.5; overflow-x: hidden; }

.page-section { padding-block: var(--section-padding); }
.page-section--white { background: #fff; }
.page-section--canvas { background: var(--color-canvas); }
.page-section--muted { background: var(--color-muted); }

.page-title,
.section-title,
.card-title,
.lead,
.body-copy,
.meta-copy { margin: 0; }

.page-title {
  max-width: 1100px;
  font-size: 64px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -1.5px;
}

.section-title {
  max-width: 980px;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -.5px;
}

.card-title { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.2px; }
.body-copy { color: var(--color-secondary); font-size: 16px; line-height: 24px; }
.meta-copy { color: var(--color-supporting); font-size: 14px; line-height: 20px; }

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
}
.text-link:hover { opacity: .7; }
.text-link:focus-visible { border-radius: 3px; outline: 3px solid var(--color-positive); outline-offset: 4px; }

.home-hero { padding-block: 88px 96px; }
.home-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.home-hero .page-title { font-size: 72px; line-height: 76px; letter-spacing: -1.4px; }
.home-hero__specialization { margin: 0; font-size: 18px; font-weight: 500; line-height: 28px; }
.home-hero__lead { max-width: 900px; margin: 0; color: var(--color-secondary); font-size: 28px; line-height: 40px; }
.home-hero__actions { display: flex; align-items: center; gap: 32px; }
.home-hero__cv { color: var(--color-text); font-weight: 600; }

.method-layout {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(320px, 460px);
  grid-template-areas:
    "copy steps"
    "cta steps";
  grid-template-rows: auto 1fr;
  column-gap: 120px;
  row-gap: 24px;
}
.method-copy { grid-area: copy; display: flex; flex-direction: column; gap: 24px; }
.method-cta { grid-area: cta; align-self: start; justify-self: start; }
.method-copy .body-copy { font-size: 18px; line-height: 29px; }
.steps { display: flex; flex-direction: column; gap: 40px; }
.method-layout > .steps { grid-area: steps; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step h3 { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin: 0; font-size: 26.4px; font-weight: 600; line-height: 36px; }
.step__number { color: var(--color-secondary); }
.step .body-copy { padding-left: 44px; font-size: 16px; line-height: 25px; }

.section-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.projects-stack { gap: 64px; }
.section-intro { max-width: 900px; }
.section-intro .body-copy { max-width: 820px; margin-top: 16px; font-size: 18px; line-height: 28px; }

.project-card { background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: 16px; }
.project-card--featured { display: grid; grid-template-columns: minmax(0, 700px) minmax(320px, 1fr); gap: 48px; padding: 32px; border: 0; border-radius: 24px; box-shadow: var(--shadow-card); }
.project-card__cover-link { display: block; min-height: 44px; border-radius: 16px; overflow: hidden; }
.project-card__cover { width: 100%; height: 496px; border-radius: 16px; object-fit: cover; }
.project-card__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.project-card__copy h3 { margin: 0; font-size: 36px; line-height: 44px; }
.project-card__title-link { display: inline-flex; min-height: 44px; align-items: center; color: inherit; text-decoration: none; }
.project-card__cover-link:hover .project-card__cover,
.project-card__title-link:hover { opacity: .78; }
.project-card__cover-link:focus-visible,
.project-card__title-link:focus-visible { outline: 3px solid var(--color-positive); outline-offset: 4px; }
.project-card__thesis { margin: -12px 0 0; font-size: 21px; font-weight: 600; line-height: 30px; }
.project-card__outcome { margin: 0; color: var(--color-text); font-size: 16px; line-height: 24px; }
.project-card__result { color: var(--color-supporting); font-size: 13px; line-height: 20px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; width: 100%; }
.project-card--secondary { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.project-card--secondary > .text-link { margin-top: auto; }
.project-card--disabled { cursor: not-allowed; }
.project-preview { position: relative; height: 296px; overflow: hidden; border: 1px solid #d1d9d4; border-radius: 12px; background: #fff; }
.project-preview > img:first-child { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); opacity: .7; transform: scale(1.035); }
.project-preview--link { display: block; min-height: 44px; }
.project-preview--link > img:first-child { filter: none; opacity: 1; transform: none; }
.project-preview--link:hover > img:first-child { opacity: .78; }
.project-preview--link:focus-visible { outline: 3px solid var(--color-positive); outline-offset: 4px; }
.project-preview--dark { background: rgb(0 0 0 / 60%); }
.project-preview--dark > img:first-child { opacity: .3; filter: blur(4px); }
.project-preview__status { position: absolute; top: 50%; left: 50%; width: 174px; height: auto; transform: translate(-50%, -50%); }
.project-status { color: var(--color-supporting); font-size: 12px; font-weight: 500; line-height: 18px; }
.project-category { margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; }
.project-summary { color: var(--color-secondary); font-size: 17px; line-height: 27px; }
.project-detail { color: var(--color-supporting); font-size: 14px; line-height: 22px; }

.profile-narrative { max-width: 980px; }
.profile-narrative .body-copy { margin-top: 20px; font-size: 18px; line-height: 28px; }
.principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; width: 100%; margin-top: 32px; }
.principle { padding-top: 20px; border-top: 1px solid var(--color-line); }
.principle .body-copy { margin-top: 10px; }

.cv-block { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cv-block__copy { display: flex; flex-direction: column; gap: 8px; }
.cv-action { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-text); text-decoration: none; }
.cv-action:hover { opacity: .7; }
.cv-action:focus-visible { border-radius: 3px; outline: 3px solid var(--color-positive); outline-offset: 4px; }
.cv-block__hint { margin: 0; color: var(--color-secondary); font-size: 14px; line-height: 28px; }
.cv-block__availability { font-size: 18px; line-height: 22px; }

.about-hero__content { display: flex; flex-direction: column; gap: 24px; }
.about-hero__eyebrow { color: var(--color-secondary); font-size: 14px; font-weight: 500; line-height: 20px; }
.about-hero__lead { max-width: 1020px; margin: 0; font-size: 24px; line-height: 32px; }
.about-hero__support { max-width: 860px; }
.about-hero__note { max-width: 820px; }
.about-intro { max-width: 860px; }
.about-personal { max-width: 900px; font-size: 18px; line-height: 29px; }

#main-content,
#projects,
#method,
#contact,
#availability { scroll-margin-top: 24px; }

#main-content[tabindex="-1"]:focus,
section[tabindex="-1"]:focus,
div[tabindex="-1"]:focus { outline: none; }

.contribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; width: 100%; }
.contribution-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.contribution-item { display: flex; flex-direction: column; gap: 8px; }

.about-method { display: grid; grid-template-columns: minmax(0, 700px) minmax(360px, 500px); gap: 80px; }
.about-method__copy { display: flex; flex-direction: column; gap: 24px; }
.about-method .steps { gap: 40px; }
.about-method .step { padding: 0; border: 0; }
.about-method .step .card-title { margin-bottom: 8px; }

.experience-list { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.experience { display: grid; grid-template-columns: 130px 300px minmax(0, 1fr); align-items: baseline; gap: 24px; }
.experience__period { color: var(--color-secondary); font-size: 14px; font-weight: 500; line-height: 20px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; }
.focus-item { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1199px) {
  :root { --section-padding: 96px; }
  .home-hero { padding-block: 80px; }
  .home-hero .page-title { font-size: 56px; line-height: 64px; }
  .method-layout { grid-template-columns: minmax(0, 560px) minmax(280px, 336px); column-gap: 64px; }
  .project-card--featured { grid-template-columns: 1fr; gap: 32px; }
  .project-card__cover { height: 480px; }
  .project-grid { gap: 24px; }
  .project-preview { height: 233px; }
  .project-card--secondary { padding: 32px; }
  .profile-narrative .body-copy { font-size: 18px; line-height: 28px; }
  .cv-block { gap: 24px; }
  .about-method { grid-template-columns: minmax(0, 560px) minmax(280px, 336px); gap: 64px; }
  .experience { grid-template-columns: 130px 240px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  :root { --section-padding: 72px; }
  .page-title { font-size: 44px; line-height: 52px; letter-spacing: -.8px; }
  .section-title { font-size: 32px; line-height: 40px; }
  .home-hero { padding-block: 48px; }
  .home-hero__content { gap: 20px; }
  .home-hero .page-title { font-size: 44px; line-height: 52px; letter-spacing: -.8px; }
  .home-hero__lead { font-size: 21px; line-height: 30px; }
  .home-hero__actions { width: 100%; align-items: flex-start; flex-direction: column; gap: 4px; }
  .about-method { grid-template-columns: 1fr; gap: 40px; }
  .method-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "steps" "cta"; grid-template-rows: auto; }
  .method-copy .body-copy { font-size: 16px; line-height: 24px; }
  .step h3 { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 24px; line-height: 34px; }
  .step .body-copy { padding-left: 40px; }
  .projects-stack { gap: 48px; }
  .project-card--featured { gap: 28px; padding: 20px; border-radius: 20px; }
  .project-card__cover { height: auto; aspect-ratio: 1 / 1; }
  .project-card__copy h3 { font-size: 28px; line-height: 36px; }
  .project-card__thesis { font-size: 20px; line-height: 28px; }
  .project-grid,
  .principles-grid,
  .contribution-grid,
  .focus-grid { grid-template-columns: 1fr; }
  .project-card--secondary { padding: 20px; }
  .project-preview { height: auto; aspect-ratio: 1.55 / 1; }
  .principles-grid { gap: 32px; }
  .cv-block { gap: 32px; }
  .about-hero__lead { font-size: 22px; line-height: 30px; }
  .experience { grid-template-columns: 1fr; align-items: start; gap: 8px; padding-top: 24px; border-top: 1px solid var(--color-line); }
}

@media (max-width: 359px) {
  .section-title { font-size: 27px; line-height: 35px; letter-spacing: -.4px; }
}