:root {
  color-scheme: light;
  --paper: #f7f5f1;
  --white: #fffefd;
  --beige: #eee9e1;
  --ink: #272725;
  --muted: #686861;
  --line: #ddd8cf;
  --red: #bd4338;
  --nav: #575752;
  --soft-ink: #62625c;
  --hero-em: #6d665f;
  --section-em: #70685e;
  --section-label: #68665f;
  --aside-border: #ded6ca;
  --aside-rule: #cbc3b7;
  --aside-muted: #79746c;
  --hero-foot: #77776f;
  --card-line: #d6cec2;
  --certificate-preview: #f0eee9;
  --certificate-meta: #74746e;
  --skill-icon: #3a3a36;
  --on-ink: #fffefd;
  --on-red: #fffefd;
  --selection: #e8bbb5;
  --intro-backdrop: rgba(247, 245, 241, .52);
  --serif: "Iowan Old Style", "Baskerville", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17191a;
  --white: #202223;
  --beige: #292b2c;
  --ink: #f1eee8;
  --muted: #b8b2aa;
  --line: #3e4141;
  --red: #e4786d;
  --nav: #d0cbc3;
  --soft-ink: #c6c0b8;
  --hero-em: #c8beb2;
  --section-em: #c8beb2;
  --section-label: #bcb5ac;
  --aside-border: #444747;
  --aside-rule: #4b4d4c;
  --aside-muted: #b3aca3;
  --hero-foot: #b8b1a8;
  --card-line: #444747;
  --certificate-preview: #303232;
  --certificate-meta: #b6afa7;
  --skill-icon: #e6e2dc;
  --on-ink: #17191a;
  --on-red: #17191a;
  --selection: #723d38;
  --intro-backdrop: rgba(23, 25, 26, .56);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.container { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 11px 14px; background: var(--ink); color: var(--on-ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.intro-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--intro-backdrop); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .32s ease-in-out; }
.intro-overlay[hidden] { display: none; }
.intro-overlay.is-visible { opacity: 1; }
.intro-wordmark { width: min(780px, 88vw); height: auto; max-height: 40vh; overflow: visible; color: var(--muted); }
.intro-wordmark-accent { stroke: var(--red); }

.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 30px; }
.wordmark { white-space: nowrap; font-size: 20px; font-weight: 700; letter-spacing: -.045em; }
.wordmark span { color: var(--red); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 37px); }
.main-nav a, .header-contact { font-size: 12px; font-weight: 650; }
.main-nav a { color: var(--nav); }
.main-nav a:hover, .footer-inner a:hover { color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle { display: none; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.has-js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-scene { position: relative; display: block; width: 19px; height: 20px; overflow: hidden; }
.theme-scene::after { content: ""; position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; background: var(--red); }
.theme-scene svg { position: absolute; top: 0; left: 0; }
.theme-icon-sun { opacity: 1; transform: translateY(0); }
.theme-icon-moon { opacity: 0; transform: translateY(19px); }
:root[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: translateY(19px); }
:root[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: translateY(0); }
.theme-action-light { display: none; }
:root[data-theme="dark"] .theme-action-dark { display: none; }
:root[data-theme="dark"] .theme-action-light { display: block; }
.header-contact { display: inline-flex; align-items: center; gap: 25px; padding: 13px 0 13px 15px; border-left: 1px solid var(--line); color: var(--ink); }
.header-contact span { color: var(--red); font-size: 18px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: center; gap: clamp(50px, 8vw, 125px); min-height: 690px; padding-block: 95px 80px; }
.eyebrow, .section-label, .aside-index, .certificate-meta, .certificate-link, .collab-card-bottom, .hero-foot, .aside-details span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 29px; color: var(--muted); }
.red-line { display: inline-block; width: 26px; height: 2px; background: var(--red); }
.hero h1 { font-size: clamp(68px, 8.3vw, 118px); font-weight: 550; letter-spacing: -.075em; line-height: .98; }
.hero h1 em { color: var(--hero-em); font-family: var(--serif); font-weight: 400; letter-spacing: -.07em; }
.hero-lead { max-width: 540px; margin-top: 30px; color: var(--soft-ink); font-size: clamp(17px, 1.65vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 17px 29px; margin-top: 38px; }
.button-primary, .button-text { display: inline-flex; align-items: center; justify-content: space-between; min-height: 50px; gap: 28px; font-size: 13px; font-weight: 700; }
.button-primary { padding: 0 19px; background: var(--ink); color: var(--on-ink); }
.button-primary:hover { background: var(--red); color: var(--on-red); }
.button-primary span, .button-text span { font-size: 19px; }
.button-text { border-bottom: 1px solid var(--ink); }
.button-text:hover { color: var(--red); border-color: var(--red); }
.hero-aside { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; min-height: 470px; padding: 25px 28px 27px; border: 1px solid var(--aside-border); background: var(--beige); }
.aside-index { color: var(--red); }
.aside-monogram { align-self: center; width: clamp(150px, 14vw, 190px); aspect-ratio: 10 / 11; color: var(--ink); }
.aside-monogram svg { width: 100%; height: 100%; }
.aside-monogram-accent { stroke: var(--red); }
.aside-details { border-top: 1px solid var(--aside-rule); }
.aside-details > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--aside-rule); }
.aside-details span { color: var(--aside-muted); font-size: 9px; }
.aside-details strong { color: var(--ink); font-size: 12px; font-weight: 650; text-align: right; }
.hero-foot { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid var(--line); color: var(--hero-foot); }
.hero-foot a { color: var(--ink); }
.hero-foot a span { margin-left: 12px; color: var(--red); }

.section { padding-block: clamp(86px, 10vw, 145px); }
.section-grid { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(0, 3fr); gap: 6%; }
.section-label { padding-top: 8px; color: var(--section-label); white-space: nowrap; }
.section-label span { color: var(--red); margin-right: 14px; }
.section h2 { font-size: clamp(42px, 5vw, 72px); font-weight: 550; letter-spacing: -.063em; line-height: 1.1; }
.section h2 em { color: var(--section-em); font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; }
.section-about { background: var(--white); }
.about-copy { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 45px; max-width: 890px; margin-top: 43px; }
.about-copy p { color: var(--soft-ink); font-size: 16px; line-height: 1.75; }
.section-skills { background: var(--paper); }
.section-heading-row { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(0, 3fr); gap: 6%; align-items: start; }
.skill-carousel { overflow-x: auto; margin-top: 58px; scrollbar-width: thin; }
.skill-carousel.is-ready { overflow: hidden; }
.skill-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.skill-card[aria-hidden="true"] { display: none; }
.skill-carousel.is-ready .skill-card[aria-hidden="true"] { display: flex; }
.skill-carousel.is-ready .skill-track { animation: skills-scroll 42s linear infinite; animation-play-state: paused; }
.skill-carousel.is-ready[data-in-view="true"] .skill-track { animation-play-state: running; }
.skill-carousel.is-ready:focus-visible .skill-track { animation-play-state: paused; }
@media (hover: hover) { .skill-carousel.is-ready:hover .skill-track { animation-play-state: paused; } }
@keyframes skills-scroll { to { transform: translateX(-50%); } }
.skill-card { display: flex; flex: 0 0 190px; width: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 180px; margin-right: 12px; padding: 22px 10px; border: 1px solid var(--line); background: var(--white); }
.skill-card img, .skill-card svg { width: 52px; height: 52px; object-fit: contain; color: var(--skill-icon); }
.skill-card img { filter: grayscale(1) brightness(.35); }
:root[data-theme="dark"] .skill-card img { filter: grayscale(1) brightness(0) invert(.9); }
.skill-card img.brand-icon, :root[data-theme="dark"] .skill-card img.brand-icon { filter: grayscale(1) contrast(1.15); }
.skill-card span { font-size: 13px; font-weight: 700; }
.skill-card::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

.section-collab { background: var(--beige); }
.section-intro { margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.collab-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 58px; }
.collab-card { min-width: 0; border: 1px solid var(--card-line); background: var(--white); }
.collab-logo { display: grid; place-items: center; min-height: 230px; padding: 40px; background: #fffefd; }
.collab-logo img { width: min(75%, 330px); height: auto; max-height: 115px; object-fit: contain; }
.collab-logo .bulldock-logo { width: min(72%, 270px); }
.collab-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px 25px; border-top: 1px solid var(--line); }
.collab-card-bottom span:last-child { color: var(--red); font-size: 20px; }
.collab-card:hover .collab-card-bottom { color: var(--red); }
.project-dialog { width: min(1100px, calc(100% - 32px)); max-width: none; max-height: min(92dvh, 940px); padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); }
.project-dialog::backdrop { background: rgba(18, 18, 17, .75); }
.project-dialog-inner { padding: clamp(18px, 3vw, 36px); }
.project-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.project-dialog-kicker, .project-dialog-close, .project-preview-bar { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-dialog-kicker { color: var(--red); }
.project-dialog-close { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.project-dialog-close span { color: var(--red); font-size: 24px; font-weight: 400; line-height: .6; }
.project-dialog-close:hover, .project-dialog-link:hover { color: var(--red); }
.project-dialog-info { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-block: 32px 34px; }
.project-dialog-copy { min-width: 0; max-width: 710px; }
.project-dialog-info h2 { font-size: clamp(42px, 5vw, 68px); font-weight: 550; letter-spacing: -.063em; line-height: 1; }
.project-dialog-info h2 span { color: var(--red); }
.project-dialog-info p { margin-top: 17px; color: var(--soft-ink); font-size: 16px; line-height: 1.6; }
.project-dialog-tech { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--line); }
.project-dialog-tech span:first-child { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-dialog-tech span:last-child { font-size: 13px; font-weight: 650; }
.project-dialog-info .project-dialog-note { margin-top: 15px; color: var(--muted); font-size: 12px; }
.project-dialog-link { display: inline-flex; align-items: center; gap: 20px; flex-shrink: 0; padding-bottom: 7px; border-bottom: 1px solid var(--red); font-size: 12px; font-weight: 700; }
.project-dialog-link span { color: var(--red); font-size: 18px; }
.project-preview { overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.project-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.project-preview-bar span:first-child { color: var(--red); }
.project-preview iframe { display: block; width: 100%; height: clamp(360px, 55dvh, 620px); border: 0; background: #fff; }

.section-education { background: var(--white); }
.education-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 50px; padding-block: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.education-row span { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.education-row h3 { margin-top: 12px; font-size: clamp(22px, 2.3vw, 32px); font-weight: 560; letter-spacing: -.04em; }
.education-row strong { font-size: 13px; font-weight: 650; white-space: nowrap; }

.section-certificates { background: var(--paper); }
.certificate-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px; margin-top: 58px; }
.certificate-card { display: block; min-width: 0; padding-bottom: 22px; border: 1px solid var(--line); background: var(--white); }
.certificate-image { display: grid; place-items: center; aspect-ratio: 1.58; overflow: hidden; padding: 25px; border-bottom: 1px solid var(--line); background: var(--certificate-preview); }
.certificate-image img { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 6px 20px rgba(38,38,34,.08); }
.certificate-meta { display: flex; justify-content: space-between; gap: 15px; padding: 20px 23px 0; color: var(--certificate-meta); }
.certificate-meta span:last-child { color: var(--red); font-size: 20px; line-height: .6; }
.certificate-card h3 { padding: 10px 23px 0; font-size: clamp(19px, 2.1vw, 27px); font-weight: 570; letter-spacing: -.035em; line-height: 1.3; }
.certificate-link { display: inline-block; margin: 25px 23px 0; padding-bottom: 5px; border-bottom: 1px solid var(--red); color: var(--red); font-size: 10px; }
.certificate-card:hover h3 { color: var(--red); }

.section-contact { background: var(--beige); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr); gap: 9%; align-items: end; }
.contact-grid h2 { margin-top: 35px; }
.contact-grid p { max-width: 480px; margin-top: 25px; color: var(--soft-ink); font-size: 16px; line-height: 1.7; }
.contact-links { border-top: 1px solid var(--aside-rule); }
.contact-links a { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-block: 24px; border-bottom: 1px solid var(--aside-rule); font-size: 24px; font-weight: 560; letter-spacing: -.04em; }
.contact-email span:first-child { min-width: 0; overflow-wrap: anywhere; }
.contact-links a span:last-child { color: var(--red); }
.contact-links a:hover { color: var(--red); }
.site-footer { background: var(--white); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px; color: var(--muted); font-size: 11px; }
.footer-inner a { color: var(--ink); }

@media (max-width: 980px) {
  .container { width: min(1280px, calc(100% - 64px)); }
  .main-nav { gap: 15px; }
  .header-inner { gap: 18px; }
  .header-actions { gap: 10px; }
  .hero { grid-template-columns: minmax(0,1.4fr) minmax(235px,.6fr); gap: 30px; }
  .hero-aside { padding-inline: 18px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 30px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 73px; gap: 15px; }
  .main-nav { display: none; }
  .theme-toggle { width: 38px; padding: 0; }
  .theme-toggle-text { display: none; }
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 78px 60px; }
  .hero h1 { font-size: clamp(57px, 12vw, 82px); }
  .hero-aside { min-height: 320px; }
  .aside-monogram { width: 150px; }
  .section { padding-block: 75px; }
  .section-grid, .section-heading-row { grid-template-columns: 1fr; gap: 25px; }
  .section h2 { font-size: clamp(41px, 8vw, 60px); }
  .about-copy { gap: 22px; }
  .collab-grid, .certificate-grid { margin-top: 36px; }
  .project-dialog-info { align-items: start; flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; gap: 45px; }
}
@media (max-width: 520px) {
  .wordmark { font-size: 18px; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: clamp(50px, 11vw, 63px); }
  .hero-lead { font-size: 17px; }
  .hero-aside { min-height: 300px; }
  .hero-foot { font-size: 9px; }
  .hero-foot > span { max-width: 145px; line-height: 1.6; }
  .section h2 { font-size: clamp(39px, 9vw, 49px); }
  .about-copy { grid-template-columns: 1fr; }
  .about-copy p { font-size: 15px; }
  .skill-carousel { margin-top: 35px; }
  .skill-card { flex-basis: 150px; width: 150px; min-height: 150px; gap: 17px; margin-right: 9px; }
  .skill-card img, .skill-card svg { width: 44px; height: 44px; }
  .collab-grid, .certificate-grid { grid-template-columns: 1fr; gap: 13px; }
  .collab-logo { min-height: 190px; }
  .project-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .project-dialog-info { gap: 24px; padding-block: 24px 28px; }
  .project-dialog-info p { font-size: 15px; }
  .project-preview iframe { height: 52dvh; min-height: 300px; }
  .intro-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .intro-wordmark { width: 92vw; }
  .education-row { align-items: start; flex-direction: column; gap: 15px; }
  .education-row h3 { font-size: 23px; }
  .certificate-image { padding: 14px; }
  .footer-inner { flex-wrap: wrap; line-height: 1.5; }
  .footer-inner span:nth-child(2) { display: none; }
}
@media (max-width: 370px) {
  .header-contact { gap: 0; font-size: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :root.theme-animating :is(body, .site-header, .theme-toggle, .button-primary, .hero-aside, .section-about, .section-skills, .section-collab, .section-education, .section-certificates, .section-contact, .site-footer, .skill-card, .collab-card, .certificate-card, .certificate-image) {
    transition: background-color 1.35s cubic-bezier(.45, 0, .2, 1), border-color 1.35s cubic-bezier(.45, 0, .2, 1), color 1.35s cubic-bezier(.45, 0, .2, 1);
  }
  :root.theme-animating :is(.wordmark span, .main-nav a, .header-contact, .header-contact span, .eyebrow, .hero h1 em, .hero-lead, .button-text, .aside-index, .aside-details span, .aside-details strong, .hero-foot, .hero-foot a, .hero-foot a span, .section-label, .section-label span, .section h2 em, .about-copy p, .skill-card svg, .section-intro, .collab-card-bottom, .collab-card-bottom span:last-child, .education-row, .education-row span, .certificate-meta, .certificate-meta span:last-child, .certificate-card h3, .certificate-link, .contact-grid p, .contact-links, .contact-links a, .contact-links a span:last-child, .footer-inner, .footer-inner a) {
    transition: color 1.35s cubic-bezier(.45, 0, .2, 1), border-color 1.35s cubic-bezier(.45, 0, .2, 1);
  }
  :root.theme-animating :is(.aside-details, .aside-details > div) { transition: border-color 1.35s cubic-bezier(.45, 0, .2, 1); }
  :root.theme-animating .red-line,
  :root.theme-animating .skill-card::after,
  :root.theme-animating .theme-scene::after {
    transition: background-color 1.35s cubic-bezier(.45, 0, .2, 1);
  }
  :root.theme-animating .aside-monogram { transition: color 1.35s ease-in-out; }
  :root.theme-animating .aside-monogram-accent { transition: stroke 1.35s ease-in-out; }
  :root.theme-animating .theme-scene svg {
    transition: transform 1.35s cubic-bezier(.45, 0, .2, 1), opacity 1.35s cubic-bezier(.45, 0, .2, 1);
    will-change: transform, opacity;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-overlay { transition: none; }
  .skill-carousel.is-ready { overflow-x: auto; }
  .skill-carousel.is-ready .skill-track { animation: none; transform: none; }
  .skill-carousel.is-ready .skill-card[aria-hidden="true"] { display: none; }
}