@charset "UTF-8";

/* Ice-blue glass: a shared visual layer for the portfolio and every detail page. */
:root {
  --paper: #f4f7f8;
  --ink: #263742;
  --muted: #536975;
  --faint: #798b97;
  --accent: #236e99;
  --line: rgba(111, 143, 165, .17);
  --surface: rgba(255, 255, 255, .58);
  --glass: rgba(255, 255, 255, .65);
  --glass-border: rgba(255, 255, 255, .94);
  --glass-shadow: 0 12px 40px rgba(75, 110, 133, .055), inset 0 1px 0 #fff;
  --jelly-shadow: 0 7px 18px rgba(91, 150, 190, .13), inset 0 2px 3px rgba(255, 255, 255, .95), inset 0 -3px 5px rgba(94, 150, 187, .08);
  background: var(--paper);
  scroll-padding-top: 30px;
}

body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 7% 8%, #e0edf4 0, transparent 45%),
    radial-gradient(ellipse at 94% 30%, #e3f1ef 0, transparent 46%),
    #f4f7f8;
}
::selection { background: #cde6f7; color: #263d4d; }
:focus-visible { outline: 3px solid #257dac; outline-offset: 5px; border-radius: 8px; }
.shell { width: min(1180px, calc(100% - 96px)); }

/* Floating navigation and translucent page surfaces. */
.site-header {
  min-height: 80px;
  height: auto;
  margin-block: 24px 0;
  padding: 16px 24px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}
.wordmark img { border-radius: 13px; box-shadow: 0 4px 10px #72a9ce20; }
.wordmark small { color: #667783; }
.site-header nav { gap: 8px; }
.site-header nav a { padding: 9px 16px; border-radius: 13px; transition: background .2s, color .2s; }
.site-header nav a::after { display: none; }
.site-header nav a:hover { background: #e3f1fb; color: var(--accent); }
.site-header nav a[aria-current=page] { background: #e2f2fc; color: var(--accent); box-shadow: inset 0 1px 1px #fff; }
.section-rail { border-right: 0; padding-top: 12px; }
.section-rail .mono { color: #576b79; }
.section-rail h2 { color: #33434e; }
.rail-note { color: #586a76; }
.section-content { margin-left: 30px; }
.hero { margin-block: 40px 44px; }
.hero-content {
  position: relative;
  isolation: isolate;
  margin-left: 30px;
  padding: 42px;
  border: 1px solid var(--glass-border);
  border-radius: 36px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .43));
  box-shadow: 0 20px 55px #63859b0b, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  gap: 24px;
}
.hero-content::before {
  content: "";
  position: absolute;
  pointer-events: none;
  right: 30px;
  top: 26px;
  width: 190px;
  height: 190px;
  border: 1px solid #ffffff9e;
  border-radius: 45% 55% 60% 40%;
  transform: rotate(-18deg);
  background: radial-gradient(circle at 30% 23%, #fffffff0, #bcdbef7a 50%, #b2dce764);
  box-shadow: inset 3px 7px 14px #ffffffc9, inset -5px -8px 17px #a8c4d632, 0 16px 34px #7dabc91a;
  z-index: -1;
}
.hero-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 54px;
  height: 54px;
  right: 200px;
  bottom: 37px;
  border-radius: 20px;
  transform: rotate(20deg);
  background: linear-gradient(135deg, #ffffffe8, #bde8dcac);
  box-shadow: inset 2px 3px 5px #fff, inset -3px -4px 7px #76b8b330, 0 9px 16px #7fa3b416;
  z-index: -1;
}
.hero-eyebrow { color: var(--accent); font-size: .625rem; letter-spacing: .075em; }
.hero-eyebrow>span { background: #80b6da; box-shadow: 0 0 0 4px #e2f0fa; }
.hero h1 { font-size: clamp(3.8rem, 6.3vw, 5.15rem); color: #293f4e; }
.hero h1 .accent { color: #72a7cb; }
.hero-bio, .ai-intro, .support-feature p, .note { color: #5b6d79; }
.hero-bio { font-size: .9375rem; }
.hero-meta { color: #697c88; }
.hero-meta span { color: #9eb2c0; }
.hero .text-links { gap: 23px; }
.primary-link, .visit-link {
  color: #33566e;
  background: linear-gradient(135deg, #e3f4ff, #c8e3f5 70%, #bfd8e9);
  border: 1px solid #f9fdff;
  border-radius: 16px;
  box-shadow: var(--jelly-shadow);
  min-height: 48px;
  font-weight: 600;
  transition: transform .25s cubic-bezier(.2,.8,.3,1.3), box-shadow .25s, background .25s;
}
.primary-link:hover, .visit-link:hover, .visit-link:focus-visible {
  color: #304f63;
  background: linear-gradient(135deg, #e9f6ff, #c0dff3);
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 11px 23px #71a3c530, inset 0 2px 3px #fff, inset 0 -3px 5px #71a3c51a;
}
.primary-link:active, .visit-link:active { transform: translateY(1px) scale(.97); }
.text-link { border-color: #a1b1bc; }
.portrait-block { width: 140px; margin-top: 10px; transform: rotate(3deg); }
.portrait-block::before { display: none; }
.hero .portrait {
  width: 140px;
  height: 180px;
  border: 6px solid #ffffffdb;
  border-radius: 24px;
  box-shadow: 0 12px 25px #7493a71a;
}
.portrait-block figcaption { text-align: center; color: #5d6e7a; padding-top: 13px; }
.portrait-block .mono { font-size: .5625rem; }

/* Soft color accents repeat across metrics, experience, and project rows. */
.home-ai { margin-bottom: 44px; }
.home-ai>.section-content {
  padding: 28px 30px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.ai-tool-list { gap: 8px; }
.ai-tool-list span, .tag {
  border: 1px solid #ffffffdb;
  border-radius: 10px;
  padding: 5px 12px;
  background: #e7f4fc;
  color: #516e81;
  box-shadow: inset 0 1px 1px #fff, 0 2px 5px #62859c07;
}
.ai-tool-list span:nth-child(3n+2), .tag:nth-child(3n+2) { color: #3c6b65; background: #e0f1eb; }
.ai-tool-list span:nth-child(3n), .tag:nth-child(3n) { color: #4e6574; background: #e6edf1; }
.ai-summary { border: 0; background: transparent; box-shadow: none; padding: 0; gap: 16px; }
.ai-summary>div { border: 1px solid #ffffffd9; border-radius: 20px; padding: 16px 19px; background: linear-gradient(125deg, #e6f3fbad, #e6f3fc73); box-shadow: inset 0 1px 1px #fff; }
.ai-summary>div:nth-child(2) { background: linear-gradient(125deg, #dff2eba8, #e0edf7b0); }
.metric-value { color: #425f72; }
.ai-summary>div:nth-child(2) .metric-value { color: #3e6c69; }
.data-caption { color: #596c78; }
.home-projects { margin-bottom: 48px; }
.home-project-label { padding-inline: 6px; }
.section-count { color: #586a76; }
.project-list { border: 0; display: grid; gap: 12px; }
.project-row {
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 23px 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  min-height: 112px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.project-row::before { display: none; }
.project-row:hover, .project-row:focus-visible { background: #ffffffcf; transform: translateY(-3px); box-shadow: 0 12px 28px #79a3bf18, inset 0 1px 0 #fff; }
.project-row:hover h3, .project-row:focus-visible h3 { color: var(--accent); }
.project-row h3 { font-size: 1.125rem; }
.project-number { color: #526d7f; border-radius: 12px; width: 34px; min-width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: #e2eff8; align-self: center; box-shadow: inset 0 1px 1px #fff; }
.numbered-row:nth-child(3n+2) .project-number { background: #e0eeef; color: #446e75; }
.numbered-row:nth-child(3n) .project-number { background: #e5f2fa; color: #556c99; }
.project-category>span:first-child { color: #60727e; background: #e9f1f7c4; border: 1px solid #ffffffbf; border-radius: 9px; }
.project-category .row-arrow { color: #657e8e; background: #fafdff; border: 1px solid #fff; box-shadow: 0 3px 8px #6780910a; width: 32px; height: 32px; }
.list-footer { padding-left: 6px; }
.site-footer { margin-block: 15px 28px; padding: 24px 28px; border: 1px solid var(--glass-border); border-radius: 22px; background: #ffffff75; box-shadow: inset 0 1px 0 #fff; }

/* Detail pages keep their reading structure, with the same glass treatment. */
.page-heading { padding-top: 46px; }
.page-heading h1 { color: #30434f; }
.eyebrow { color: #596b77; }
.project-jump-nav a { border: 1px solid #fff; border-radius: 13px; background: #ffffff96; box-shadow: inset 0 1px 1px #fff, 0 3px 8px #74899708; }
.project-jump-nav a:hover { color: #416984; background: #dcedf9; border-color: #fff; }
.content-section { border-top-color: #c3d2dc73; }
.work-card { background: #ffffff91; border: 1px solid #fff; border-radius: 26px; box-shadow: var(--glass-shadow); padding: 10px 10px 24px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.work-card .image-frame { border: 1px solid #ffffffb3; border-radius: 18px; }
.work-card:hover, .work-card:focus-visible { border-color: #fff; box-shadow: 0 17px 35px #718c9e1c, inset 0 1px 0 #fff; transform: translateY(-5px); }
.work-card>.eyebrow, .work-card>h3, .work-card>p { margin-inline: 15px; }
.engineering-feature, .meta-grid, .experience-entry, .support-feature {
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.engineering-feature { background: linear-gradient(125deg, #f4fbffbc, #edfaf8a6); }
.engineering-feature:hover { border-color: #a4c5db; }
.engineering-methods .mono { background: #e1eef7; border-radius: 10px; padding: 6px; height: 30px; min-width: 30px; text-align: center; }
.support-feature { padding: 30px; }
.support-feature strong { color: #6a96b3; }
.experience-entry { padding: 30px; }
.detail-layout { gap: 34px; }
.detail-layout>.prose { padding: 32px; border: 1px solid var(--glass-border); border-radius: 26px; background: #ffffffa8; box-shadow: var(--glass-shadow); }
.detail-aside { padding: 22px 18px; border: 1px solid #ffffffa8; border-radius: 20px; background: #ffffff7d; }
.detail-aside a { border-color: #bdcdd7; padding-left: 12px; }
.flow-step { background: #eaf2f7; border: 1px solid #fff; border-radius: 14px; }
.flow-step:nth-of-type(2n) { background: #e6f1ef; }
.note { background: #e9f1f7; border-color: #8badc4; border-radius: 0 14px 14px 0; }
.screenshot img { border: 5px solid #ffffffb5; border-radius: 18px; box-shadow: 0 12px 28px #63768213; }
.about-top .portrait { border: 5px solid #fff; border-radius: 24px; box-shadow: 0 10px 24px #7f97a71a; }
.skill-group { background: #edf5fa; border: 1px solid #fff; border-radius: 16px; padding: 18px; }
.skill-group:nth-child(2n) { background: #eaf4f2; }
.usage-record { background: #f3f8fb; border: 1px solid #e2ebf1; border-radius: 18px; padding: 20px; }
.billing-reference { background: #edf4f8; border: 1px solid #e0e9ef; border-radius: 16px; padding: 18px; }
.related-link { background: #eaf3f9; border: 1px solid #deeaf2; border-radius: 16px; padding: 20px; }
.copy-email { padding: 5px 10px; border: 1px solid #d4e4ee; border-radius: 9px; background: #e9f3fa; color: #516878; }
.empty-route { margin-top: 40px; padding: 60px; background: var(--glass); border: 1px solid #fff; border-radius: 30px; }

@media (max-width: 1050px) {
  .shell { width: calc(100% - 56px); }
  .section-content { margin-left: 20px; }
  .section-rail { padding-right: 10px; }
  .rail-note { font-size: .625rem; letter-spacing: .02em; }
  .hero-content { margin-left: 20px; padding: 32px; gap: 22px; }
  .hero h1 { font-size: 4.1rem; }
  .hero-bio { font-size: .875rem; }
  .portrait-block { width: 112px; }
  .hero .portrait { width: 112px; height: 145px; }
  .hero-content::before { width: 150px; height: 150px; right: 16px; top: 38px; }
  .hero-content::after { right: 140px; bottom: 35px; width: 40px; height: 40px; }
  .home-ai>.section-content { padding: 24px; }
  .project-row { padding-inline: 20px; gap: 16px; }
  .detail-layout { gap: 24px; }
  .detail-layout>.prose { padding: 26px; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  .site-header { margin-top: 14px; padding: 13px 14px; min-height: 74px; border-radius: 22px; gap: 10px; }
  .site-header nav { gap: 2px; font-size: .75rem; }
  .site-header nav a { padding: 8px 10px; border-radius: 11px; }
  .wordmark { gap: 8px; }
  .wordmark img { width: 32px; height: 32px; border-radius: 11px; }
  .wordmark small { display: none; }
  .section-content { margin-left: 0; }
  .section-rail { padding: 0 7px; margin-bottom: 16px; }
  .hero { margin-block: 26px 32px; }
  .hero .section-rail { margin-bottom: 18px; }
  .hero-content { margin: 0; padding: 27px 24px; border-radius: 28px; }
  .hero-eyebrow { font-size: .5rem; letter-spacing: .025em; margin-bottom: 21px; }
  .hero h1 { font-size: 3.5rem; padding-right: 60px; line-height: 1.3; margin-bottom: 24px; }
  .hero-bio { font-size: .8125rem; line-height: 1.95; }
  .hero-meta { font-size: .625rem; }
  .hero-meta span { padding-inline: 3px; }
  .hero .text-links { gap: 20px; font-size: .75rem; margin-top: 25px; }
  .primary-link { gap: 18px; min-height: 46px; border-radius: 14px; padding: 10px 15px; }
  .portrait-block { position: absolute; top: 65px; right: 22px; width: 58px; margin: 0; }
  .hero .portrait { width: 58px; height: 75px; border-width: 3px; border-radius: 14px; }
  .hero-content::before { top: 47px; right: 13px; width: 86px; height: 86px; }
  .hero-content::after { display: none; }
  .home-ai { margin-bottom: 32px; }
  .home-ai>.section-content { padding: 22px 20px; border-radius: 24px; }
  .ai-intro { font-size: .8125rem; }
  .ai-tool-list { gap: 6px; }
  .ai-tool-list span { padding: 4px 9px; border-radius: 9px; font-size: .625rem; }
  .ai-summary { gap: 12px; }
  .ai-summary>div { padding: 14px 12px; border-radius: 16px; }
  .metric-label { font-size: .625rem; }
  .metric-value { font-size: 1.8rem; }
  .metric-value>span { margin-left: 4px; font-size: .75rem; }
  .home-projects { margin-bottom: 34px; }
  .project-list { gap: 10px; }
  .project-row { border-radius: 20px; padding: 21px 18px; gap: 9px; }
  .project-row.numbered-row { grid-template-columns: 28px minmax(0,1fr); column-gap: 12px; }
  .project-number { width: 28px; min-width: 28px; height: 28px; border-radius: 10px; align-self: start; padding: 0; margin-top: 1px; }
  .project-row h3 { font-size: 1rem; }
  .project-row p { font-size: .75rem; }
  .project-row>div { padding-right: 20px; }
  .project-category { font-size: .625rem; }
  .project-category>span:first-child { border-radius: 8px; padding: 3px 8px; }
  .project-category .row-arrow { right: 12px; top: 21px; width: 27px; height: 27px; }
  .home-project-label { padding-inline: 8px; }
  .site-footer { margin-block: 8px 20px; padding: 23px; border-radius: 22px; }
  .page-heading { padding: 30px 6px; }
  .page-heading h1 { font-size: 1.875rem; }
  .content-section { padding-top: 28px; }
  .project-jump-nav { padding-left: 5px; }
  .project-jump-nav a { padding: 8px 10px; font-size: .6875rem; }
  .work-card { border-radius: 23px; padding: 8px 8px 22px; }
  .work-card .image-frame { border-radius: 16px; }
  .work-card>.eyebrow, .work-card>h3, .work-card>p { margin-inline: 12px; }
  .engineering-feature { padding: 24px; border-radius: 23px; }
  .meta-grid { border-radius: 20px; padding: 20px; }
  .detail-layout>.prose { padding: 24px 22px; border-radius: 22px; }
  .experience-entry { padding: 24px; border-radius: 22px; }
  .support-feature { padding: 26px; }
  .screenshot img { border-width: 3px; border-radius: 14px; }
  .usage-record { padding: 16px; }
  .skill-group { padding: 16px; }
  .empty-route { padding: 35px 26px; }
}

@media (max-width: 390px) {
  .shell { width: calc(100% - 24px); }
  .site-header { padding: 12px; }
  .site-header nav { gap: 0; font-size: .6875rem; }
  .site-header nav a { padding-inline: 7px; }
  .wordmark { font-size: .8125rem; gap: 6px; }
  .wordmark img { width: 29px; height: 29px; }
  .hero-content { padding: 25px 20px; }
  .hero h1 { font-size: 3rem; padding-right: 48px; }
  .hero-eyebrow { font-size: .4375rem; }
  .portrait-block { right: 17px; top: 62px; width: 48px; }
  .hero .portrait { width: 48px; height: 63px; }
  .hero-content::before { width: 74px; height: 74px; right: 7px; }
  .hero .text-links { gap: 16px; }
  .primary-link { padding-inline: 12px; gap: 12px; }
  .home-ai>.section-content { padding: 20px 16px; }
  .ai-summary { gap: 9px; }
  .ai-summary>div { padding: 12px 10px; }
  .metric-value { font-size: 1.65rem; }
  .project-row { padding-inline: 14px; }
  .project-row.numbered-row { column-gap: 9px; }
  .project-row h3 { font-size: .9375rem; }
  .project-row p { font-size: .6875rem; }
  .detail-layout>.prose { padding: 22px 18px; }
}

/* Solid surfaces retain contrast on browsers without backdrop blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .hero-content, .home-ai>.section-content, .project-row, .work-card,
  .engineering-feature, .meta-grid, .experience-entry, .support-feature { background: #f9fcfe; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-link:hover, .visit-link:hover, .work-card:hover, .project-row:hover { transform: none; }
}
@media print {
  :root { --ink: #000; --muted: #444; background: #fff; }
  .shell { width: 100%; }
  body::before, .hero-content::before, .hero-content::after { display: none; }
  *, *::before, *::after { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hero-content, .home-ai>.section-content, .project-row, .work-card, .detail-layout>.prose,
  .engineering-feature, .experience-entry, .meta-grid, .support-feature { background: #fff; border: 1px solid #ddd; }
}