@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/prata-400.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/golos-400.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/golos-500.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/golos-600.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/golos-700.ttf") format("truetype");
}

:root {
  --font-text: "Golos Text", Arial, sans-serif;
  --font-display: "Prata", Georgia, serif;
  --bg: #f7f6f3;
  --ink: #242622;
  --muted: #737570;
  --blue: #345b89;
  --radius: 9px;
}

body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

.site-header {
  background: rgba(247, 246, 243, .95);
}

.brand { font-weight: 500; letter-spacing: -.025em; }
.brand small { font-size: 9px; font-weight: 400; letter-spacing: .11em; }
.brand-symbol { border-radius: 5px; font-family: var(--font-display); font-weight: 400; }
.nav-links { font-weight: 400; font-size: 14px; }
.nav-resume, .button { font-weight: 500; border-radius: 5px; font-size: 13px; }
.text-link { font-size: 13px; font-weight: 400; }
.availability { font-size: 12px; font-weight: 400; }
.intro { font-size: 19px; font-weight: 400; letter-spacing: -.01em; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(50px, 4.95vw, 70px);
  line-height: 1.17;
  letter-spacing: -.047em;
}

.hero-description { font-size: 17px; line-height: 1.65; max-width: 465px; }
.hero-role { font-size: 12px; line-height: 1.6; color: var(--blue); margin: 22px 0 -12px; }
.hero-location { font-size: 12px; color: #81837e; }
.hero-canvas { border-radius: 9px; background: #e9ecec; }
.canvas-stamp { display: none; }
.product-window { transform: rotate(-2deg); border-radius: 7px; }
.floating-note { border-radius: 5px; }
.note-top { transform: rotate(2deg); }
.note-bottom { transform: rotate(-1deg); }
.summary-strip b { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -.035em; }
.summary-strip span, .summary-strip .summary-role { font-size: 12px; line-height: 1.55; }
.eyebrow { font-weight: 400; font-size: 10px; letter-spacing: .11em; }

.section-heading h2, .about-title h2, .contact h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(33px, 3.2vw, 45px);
  line-height: 1.22;
  letter-spacing: -.042em;
}

.section-heading > p { font-size: 15px; line-height: 1.65; }
.project-meta, .tag { font-weight: 400; font-size: 10px; }
.tag { border-radius: 2px; }
.project-title h3 { font-family: var(--font-text); font-size: 28px; font-weight: 500; letter-spacing: -.04em; line-height: 1.22; }
.project-info > p { font-size: 15px; line-height: 1.65; }
.tech-line { font-size: 11px; color: #818783; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -25px #30445d30; }
.round-arrow { border-radius: 4px; font-size: 16px; }
.project-open:hover .round-arrow { transform: none; }
.workspace-preview, .finance-preview, .training-card { border-radius: 5px; }
.workspace-preview { transform: rotate(-2deg); }
.finance-preview { transform: rotate(2deg); }
.workspace-visual { background: #e9e1d6; }
.finance-visual { background: #e5e3ec; }
.trainer-card { background: #e5ebe7; }
.trainer-card .project-title h3 { font-family: var(--font-display); font-weight: 400; font-size: 45px; line-height: 1.2; letter-spacing: -.04em; }
.project-info .project-overline { font-size: 9px; font-weight: 400; letter-spacing: .04em; }
.privacy-note { font-size: 12px; line-height: 1.6; }
.about-band { background: #292e2a; }
.about-title h2 > span { color: #b4bfb5; }
.about-lead { font-size: 18px; line-height: 1.7; font-weight: 400; }
.experience-row > b { font-size: 13px; font-weight: 500; }
.experience-row > p { font-size: 14px; line-height: 1.65; color: #a1aaa1; }
.personal-label b { font-weight: 500; font-size: 14px; }
.personal-label div > span { font-size: 11px; }
.process-grid h3 { font-weight: 500; font-size: 21px; letter-spacing: -.035em; }
.process-grid p { font-size: 14px; line-height: 1.65; }
.skills-line { font-size: 12px; }
.contact { background: #e6eae7; border-color: #dde2de; border-radius: 9px; }
.contact h2 { font-size: clamp(43px, 4.4vw, 63px); }
.email-link { font-size: 25px; font-weight: 400; letter-spacing: -.035em; border-color: #b5c2b8; }
.contact-links > a { font-size: 13px; font-weight: 400; color: #627269; }
.contact .eyebrow { color: #738278; }
.footer { font-size: 11px; }

.case-dialog { border-radius: 9px; background: #fcfcfa; }
.dialog-shell h2 { font-family: var(--font-display); font-size: 37px; font-weight: 400; letter-spacing: -.03em; line-height: 1.25; }
.dialog-status { font-size: 13px; line-height: 1.6; }
.dialog-section h3 { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.dialog-section p, .dialog-section li { font-size: 15px; line-height: 1.65; }
.dialog-section.note p { font-size: 12px; line-height: 1.6; }
.dialog-bottom { font-size: 12px; }

@media (max-width: 1100px) {
  .hero h1 { font-size: 54px; }
  .hero-description { font-size: 16px; }
  .section-heading > p { font-size: 14px; }
  .project-title h3 { font-size: 25px; }
  .project-meta, .tag { font-size: 9px; }
}

@media (max-width: 800px) {
  .hero h1 { font-size: 66px; }
  .brand small { font-size: 8px; }
  .nav-links { font-size: 12px; }
  .section-heading h2, .about-title h2 { font-size: 38px; }
  .project-title h3 { font-size: 23px; }
  .project-info > p { font-size: 14px; }
  .project-meta { flex-wrap: wrap; gap: 7px; }
  .trainer-card .project-title h3 { font-size: 38px; }
  .contact h2 { font-size: 51px; }
}

@media (max-width: 540px) {
  .hero h1 { font-size: clamp(34px, 10.2vw, 52px); line-height: 1.2; letter-spacing: -.048em; }
  .intro { font-size: 17px; }
  .hero-description { font-size: 15px; line-height: 1.65; }
  .hero-location { font-size: 11px; }
  .availability { font-size: 11px; }
  .nav-resume, .button { font-size: 11px; }
  .text-link { font-size: 11px; }
  .brand { font-size: 15px; }
  .brand small { font-size: 7px; }
  .hero-canvas { border-radius: 7px; }
  .summary-strip b { font-size: 22px; }
  .summary-strip span { font-size: 11px; }
  .summary-strip .summary-role { font-size: 10px; }
  .section-heading h2, .about-title h2 { font-size: 32px; line-height: 1.25; }
  .section-heading > p { font-size: 14px; }
  .project-info > p { font-size: 14px; }
  .project-title h3 { font-size: 25px; font-weight: 500; }
  .project-meta, .tag { font-size: 9px; }
  .trainer-card .project-title h3 { font-size: 33px; }
  .tech-line, .privacy-note { font-size: 11px; }
  .about-lead { font-size: 16px; }
  .experience-row > p { font-size: 14px; }
  .process-grid h3 { font-size: 19px; }
  .process-grid p { font-size: 13px; }
  .skills-line { font-size: 11px; }
  .contact { border-radius: 7px; }
  .contact h2 { font-size: 37px; }
  .email-link { font-size: 23px; }
  .contact-links > a { font-size: 11px; }
  .footer { font-size: 10px; }
  .dialog-shell h2 { font-size: 30px; }
  .dialog-status { font-size: 12px; }
  .dialog-section h3 { font-size: 15px; }
  .dialog-section p, .dialog-section li { font-size: 14px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 34px; }
  .hero-actions { flex-wrap: wrap; gap: 13px; }
  .project-title h3 { font-size: 23px; }
  .trainer-card .project-title h3 { font-size: 30px; }
  .email-link { font-size: 20px; }
  .contact-links { flex-direction: column; gap: 12px; }
}