/* typography-and-preferences.css */
/* typography-and-preferences.css — ordered rules; responsive variants stay with their components. */
:root {
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --type-display: 2.5rem;
  --type-title: 1.25rem;
  --type-body: 1rem;
  --type-meta: 0.875rem;
  --type-label: 0.75rem;
  --type-action: 0.875rem;
  --line-display: 1.05;
  --line-title: 1.25;
  --line-body: 1.6;
  --line-meta: 1.45;
  --line-label: 1.25;
  --line-action: 1.3;
}

html[data-text-size="large"] {
  --type-display: 3rem;
  --type-title: 1.5rem;
  --type-body: 1.1875rem;
  --type-meta: 1.0625rem;
  --type-label: 0.875rem;
  --type-action: 1.0625rem;
}

body, button, input, textarea, select {
  font-family: var(--font-sans);
}

body {
  font-size: var(--type-body);
  line-height: var(--line-body);
}

h1, h2, .project-modal-title {
  font-size: var(--type-display);
  font-weight: 700;
  line-height: var(--line-display);
}

.identity-card h1, .about-layout h2, .project-modal-title {
  font-size: var(--type-display);
}

h3, h4, .lead, .role, .profile-context strong {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: var(--line-title);
}

.capabilities-heading-subtitle {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: var(--line-title);
}

p, li, input, textarea, .recommendation-card blockquote, .project-modal-description {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--line-body);
}

.identity-footnote, .profile-context, .timeline-date, .education-grid small,
.project-subproject p, .capability-grid p, .capability-grid li, .language-card p,
.recommender-role, .form-intro, .form-fallback, .form-summary, .field-error,
.form-status, .form-recipient strong, .site-footer, .collection-loading,
.collection-error {
  font-size: var(--type-meta);
  line-height: var(--line-meta);
}

.section-kicker, .focus-label, .education-grid span, .project-kind, .project-status,
.capability-number, .recommendation-heading span, .project-modal-kicker,
.language-conversation .language-card-title, .resume-download small,
.settings-action-label, .form-route > label, .form-route > span,
.technology-list li {
  font-size: var(--type-label);
  font-weight: 800;
  line-height: var(--line-label);
}

a, button, .inline-link, .linkedin-action, .button, .project-link, .subproject-link,
.project-details-button, .project-carousel-controls button, .recommender strong,
.resume-download strong, .settings-action-value, .mobile-brand,
.section-navigation a, .menu-toggle, .settings-toggle, .ai-strip strong {
  font-size: var(--type-action);
  font-weight: 700;
  line-height: var(--line-action);
}

.settings-language-code {
  font-family: var(--font-sans);
  font-weight: 500;
}

@media (min-width: 768px) {
.identity-card {
  max-height: none;
  overflow: hidden;
}
}

.capability-grid p {
  min-height: 0;
}

.project-card.coming-soon, .recommendation-card {
  min-height: 0;
}

.section-navigation a, .settings-action, .button, .project-details-button,
.project-carousel-controls button, .contact-actions .button, .resume-download {
  min-height: max-content;
}

.button, .project-details-button, .project-carousel-controls button {
  min-height: 2.75rem;
  padding-block: 0.55rem;
}

.contact-form, .project-group, .project-card, .project-subproject, .capability-grid article,
.education-grid article, .recommendation-card {
  min-width: 0;
}

@container portfolio-content (max-width: 880px) {
.profile-layout, .about-layout {
  grid-template-columns: minmax(0, 1fr);
}
.profile-context {
  max-width: none;
}
.section-heading-row {
  align-items: flex-start;
  flex-direction: column;
}
}

@container portfolio-content (max-width: 640px) {
.project-group-header {
  grid-template-columns: minmax(0, 1fr);
}
.project-group-header .project-link {
  justify-self: start;
}
.form-route {
  gap: 0.25rem;
}
}

@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
html[data-text-size="large"] .focus-type {
  align-items: flex-start;
  display: block;
}
html[data-text-size="large"] .focus-label {
  display: block;
  margin-bottom: 0.25rem;
}
html[data-text-size="large"] #focus-rotator {
  display: block;
  min-height: calc(var(--type-action) * var(--line-action));
  white-space: nowrap;
}
}

@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
.settings-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-action {
  min-height: 3.5rem;
}
.settings-action[data-text-size-toggle] {
  border-right: 0;
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
}
}

@media (max-width: 359px) {
html[data-text-size="large"] .mobile-header {
  align-items: flex-start;
}
html[data-text-size="large"] .mobile-brand {
  padding-block: 0.3rem;
}
html[data-text-size="large"] .content-section {
  padding-inline: 1rem;
}
}

.education-grid strong {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: var(--line-title);
}

.form-field label, .recommender-initials {
  font-size: var(--type-label);
  font-weight: 800;
  line-height: var(--line-label);
}

.ai-strip div span, .language-conversation .language-bubble span {
  font-size: var(--type-meta);
  line-height: var(--line-meta);
}

.language-conversation .language-bubble strong {
  font-size: var(--type-action);
  font-weight: 700;
  line-height: var(--line-action);
}

.focus-type, #focus-rotator {
  font-size: var(--type-action);
  font-weight: 700;
  line-height: var(--line-action);
}

.timeline h3, .project-group h3, .project-card h3, .project-subproject h4,
.capability-grid h3, .recommendation-heading h3 {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: var(--line-title);
}

.timeline p, .project-group-header p, .project-card p,
.form-field input, .form-field textarea, .form-route input {
  font-size: var(--type-body);
  line-height: var(--line-body);
}

.recommender {
  font-size: var(--type-meta);
  line-height: var(--line-meta);
}

.section-navigation a {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: var(--line-label);
  overflow-wrap: anywhere;
}

.settings-action-label {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: var(--line-label);
  text-transform: none;
}

@media (min-width: 1200px) {
html[data-text-size="large"] .site-frame {
  grid-template-columns: 104px 360px minmax(0, 1fr);
}
}

@media (min-width: 981px) and (max-width: 1240px) {
html[data-text-size="large"] .site-frame {
  grid-template-columns: 92px 310px minmax(0, 1fr);
}
}

@media (min-width: 768px) and (max-width: 980px) and (orientation: landscape) {
html[data-text-size="large"] .site-frame {
  grid-template-columns: 84px minmax(250px, 300px) minmax(0, 1fr);
}
}

@media (min-width: 1200px) {
html[data-text-size="large"] .about-section .about-layout {
  grid-template-columns: minmax(0, 1fr) 14rem;
}
html[data-text-size="large"] .about-section .about-introduction {
  grid-column: 1 / -1;
}
html[data-text-size="large"] .about-section .about-introduction h2 {
  max-width: none;
}
html[data-text-size="large"] .about-section .language-conversation {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  position: static;
  width: 14rem;
}
html[data-text-size="large"] .about-section .about-summary {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
}