@font-face {
  font-family: 'Degular Display';
  src: url('assets/fonts/DegularDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f6f0;
  --surface: #fffef9;
  --ink: #243b37;
  --muted: #596b64;
  --accent: #1b685b;
  --line: #d8dfd5;
}

body {
  font-family: 'Degular Display', Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: .2px;
}

::selection { background: #c7e2d5; color: #183d32; }
a { color: var(--accent); text-decoration-color: #1b685b55; }
a:hover { color: #104c40; text-decoration-color: currentColor; }
button:focus-visible, a:focus-visible { outline-color: var(--accent); }
.portfolio { background: transparent; border: 0; }
.avatar { width: 54px; height: 54px; border-radius: 17px; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.avatar span { background: var(--ink); color: #d8ebbd; }

.bio h1 {
  font-family: 'Degular Display', Arial, sans-serif;
  font-size: clamp(25px, 3vw, 31px);
  line-height: 1.4;
  letter-spacing: -.5px;
}
.bio h1 strong { color: var(--accent); font-weight: 400; }
.bio { margin-bottom: 0; }
.bio-details { color: var(--muted); }
.bio-details { line-height: 1.9; }
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 24px; }
.contact-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; min-height: 32px; font-size: 14px; line-height: 1.4; color: var(--ink); background: transparent; border: 0; text-decoration: none; white-space: nowrap; }
.contact-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.chip.sticky-mail { background: transparent; border: 0; border-radius: 0; padding: 6px 0; font-size: 14px; }
.chip.sticky-mail:hover { background: transparent; transform: none; text-decoration: underline; text-underline-offset: 4px; }
.availability { color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.availability::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chip { background: #edf1e7; border-color: #d9e1d4; color: var(--ink); border-radius: 7px; padding: 6px 10px; }
.chip:hover { background: #dfe9d9; }
.mail-icon { color: var(--accent); }

.section-divider { height: 1px; background: var(--line); margin: 40px 0 12px; }
.filter-bar { background: #f7f6f0f5; }
.filter-bar nav, .is-sticky nav { gap: 6px; }
.filter-bar nav button, .is-sticky nav button { font-size: 13px; color: var(--muted); padding: 7px 11px; border-radius: 7px; }
.filter-bar nav button:hover { color: var(--accent); background: #e8ede3; }
.filter-bar nav button[aria-pressed=true] { color: #fffef9; background: var(--accent); }
.mini-avatar { border-radius: 9px; }

.project-card { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface); padding: 8px 8px 20px; height: 100%; }
.project-art { border-radius: 7px; margin-bottom: 17px; }
.project-info { padding-inline: 10px; }
.project-info h2 { font-size: 16px; font-weight: 700; color: var(--ink); }
.project-info h2 span { opacity: 1; color: var(--accent); }
.project-info p { color: var(--muted); font-size: 13px; }

.experience { border-color: var(--line); }
.experience h2 { font-family: 'Degular Display', Arial, sans-serif; font-size: 26px; font-weight: 400; }
.experience article { position: relative; margin: 0 0 0 5px; padding: 0 0 28px 23px; border-left: 1px solid var(--line); }
.experience article::before { content: ''; position: absolute; top: 7px; left: -4px; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--accent); border-radius: 50%; }
.experience article:first-of-type::before { background: var(--accent); }
.experience h3 { font-weight: 700; }
.experience h3 span, .experience article p, .experience article .experience-dates, .skills-summary { color: var(--muted); }
footer { border-color: var(--line); color: var(--muted); }
footer button:hover { color: var(--accent); }

dialog { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 16px; }
dialog::backdrop { background: #152b2699; }
.dialog-copy h2 { font-family: 'Degular Display', Arial, sans-serif; font-size: 30px; }
.dialog-copy p { color: var(--muted); }
.close-button { background: var(--surface); color: var(--ink); border-color: var(--line); }
#toast { background: var(--ink); }
.skip-link { background: var(--surface); }
.icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.experience-link { display: inline-flex; align-items: center; gap: 6px; }
.experience-link .icon { width: 13px; height: 13px; }
.project-info h2 .icon { width: 19px; height: 19px; color: var(--accent); }

@media (max-width: 480px) {
  .filter-bar nav, .is-sticky nav { gap: 4px; }
  .filter-bar nav button, .is-sticky nav button { font-size: 12px; padding: 7px 9px; }
  .bio h1 { font-size: 26px; }
}