:root {
  --blue: #2388d8;
  --blue-dark: #075c9d;
  --lime: #8bcf19;
  --ink: #344557;
}

* { box-sizing: border-box; }
body, button { font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }
body { min-width: 320px; }
img { max-width: 100%; }
a { color: #1679b8; text-decoration: none; }
a:hover { color: #f07d00; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 0 0 8px 8px; background: #fff; color: #075c9d; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.skip-link:focus { top: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0 !important;
  background: #edf5f9 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQImWP4//8/AwMDAwMjI8MAAEsYAwPyFpkAAAAASUVORK5CYII=") repeat !important;
  color: var(--ink) !important;
}

.site-utility {
  border-bottom: 1px solid #c0d4df;
  background: linear-gradient(#fff, #eaf3f7);
  color: #708694;
  box-shadow: inset 0 1px #fff;
}
.site-utility__inner { width: min(1060px, calc(100% - 32px)); min-height: 34px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }
.site-utility p { margin: 0; }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #4b8d05; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #dcff83, #7fc514 65%); box-shadow: 0 0 4px rgba(114,190,12,.6); }
.utility-links { display: flex; gap: 8px; }

main { padding-bottom: 72px; }
.site-section { width: min(1060px, calc(100% - 32px)); margin: 70px auto 0; scroll-margin-top: 100px; }
.section-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid #bed2dc; }
.section-heading > div { padding-bottom: 13px; }
.eyebrow { margin: 0 0 3px; color: #7ea500; font: 800 10px/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.section-heading h2, .contact-card h2 { margin: 0; color: #2979ad; font: 800 28px/1.1 "Trebuchet MS", Arial, sans-serif; letter-spacing: -.7px; text-shadow: 0 1px #fff; }
.section-badge, .last-updated { margin-bottom: -1px; padding: 7px 12px; border: 1px solid #b8ccd7; border-radius: 8px 8px 0 0; background: linear-gradient(#fff, #e5eff4); color: #6b8290; font: 700 10px/1 Arial, sans-serif; text-transform: uppercase; box-shadow: inset 0 1px #fff; }

.site-panel { overflow: hidden; border: 1px solid #a9c3d0; border-radius: 11px; background: #fff; box-shadow: 0 2px 6px rgba(43,83,102,.16), inset 0 1px #fff; }
.panel-bar { min-height: 39px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0a659f; background: linear-gradient(#58b3eb, #2488cf 48%, #1478ba 52%, #0966a2); color: #fff; text-shadow: 0 1px #075481; box-shadow: inset 0 1px rgba(255,255,255,.55); }
.panel-bar--green { border-bottom-color: #568a09; background: linear-gradient(#a8dc42, #78b717 48%, #69a90b 52%, #568e06); text-shadow: 0 1px #477105; }
.panel-bar h3 { margin: 0; font: 700 13px/1 Arial, sans-serif; }
.panel-controls { opacity: .65; font: 11px/1 monospace; letter-spacing: .2em; }
.availability { font: 700 10px/1 Arial, sans-serif; text-transform: uppercase; }
.availability .status-dot { width: 7px; height: 7px; border-color: #fff; background: #eaffb3; box-shadow: 0 0 3px #fff; }
.panel-content { padding: 26px 28px; }
.panel-content p { margin: 0 0 14px; color: #607481; font: 14px/1.65 "Lucida Grande", Arial, sans-serif; }
.panel-content .lead { color: #344f60; font: 700 18px/1.4 Georgia, serif; }

.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: stretch; }
.profile-card__body { padding: 18px; display: grid; grid-template-columns: 122px 1fr; gap: 17px; }
.avatar-wrap { position: relative; width: 122px; height: 148px; padding: 5px; border: 1px solid #a8bdc7; border-radius: 6px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.generic-avatar { width:100%;height:100%;position:relative;overflow:hidden;border-radius:3px;background:radial-gradient(circle at 50% 28%,#f8fbfc,#d9e5ea 58%,#c5d4db); }
.generic-avatar__head { position:absolute;left:50%;top:18%;width:52px;height:52px;border-radius:50%;background:linear-gradient(#93a9b4,#667f8c);transform:translateX(-50%);box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 4px rgba(50,75,87,.2); }
.generic-avatar__body { position:absolute;left:50%;bottom:-20px;width:112px;height:85px;border-radius:58px 58px 18px 18px;background:linear-gradient(#8fa6b1,#5e7784);transform:translateX(-50%);box-shadow:inset 0 1px rgba(255,255,255,.32),0 -2px 6px rgba(50,75,87,.12); }
.online-badge { position: absolute; left: 12px; bottom: -8px; padding: 4px 9px 4px 19px; border: 2px solid #fff; border-radius: 10px; background: linear-gradient(#ace445,#6db108); color: #fff; font: 800 9px/1 Arial,sans-serif; text-transform: uppercase; text-shadow: 0 1px #4c7a07; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.online-badge::before { content: ""; position: absolute; left: 8px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.profile-facts { margin: 0; font-size: 11px; }
.profile-facts div { padding: 6px 0; border-bottom: 1px dotted #c8d7de; }
.profile-facts div:last-child { border: 0; }
.profile-facts dt { margin-bottom: 2px; color: #879ba6; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.profile-facts dd { margin: 0; color: #40596a; font-weight: 700; line-height: 1.25; }
.tag-cloud { margin-top: 20px; padding: 17px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 11px; border: 1px dashed #b8cad3; border-radius: 8px; background: #f4f8fa; }
.tag { color: #2582bc; font: 700 14px/1 Arial,sans-serif; }
.tag:nth-child(2n) { color: #79a70e; }
.tag:nth-child(3n) { color: #ec8a12; }
.tag--xl { font-size: 24px; }.tag--lg { font-size: 18px; }.tag--sm { font-size: 11px; }

.tiny-rss { margin-bottom: 8px; padding: 7px 10px; border: 1px solid #d77400; border-radius: 6px; background: linear-gradient(#ffa832, #ed7900); color: #fff; font: 700 10px/1 Arial,sans-serif; text-shadow: 0 1px #ac5600; box-shadow: inset 0 1px rgba(255,255,255,.65),0 1px 2px rgba(0,0,0,.14); }
.tiny-rss:hover { color: #fff; background: linear-gradient(#ffb74f,#f08309); }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project-grid--single { grid-template-columns:minmax(280px,520px);justify-content:center; }
.project-card { overflow: hidden; border: 1px solid #a8c2ce; border-radius: 13px; background: #fff; box-shadow: 0 3px 8px rgba(45,81,99,.17), inset 0 1px #fff; transition: transform .2s ease, box-shadow .2s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(39,77,97,.22); }
.project-card__image { height: 185px; position: relative; overflow: hidden; border-bottom: 1px solid #a5c0cd; }
.project-card__image--site { padding: 26px; background: radial-gradient(circle at 50% 30%,#fff7c5,#ffd054 55%,#f1a400); }
.mini-browser { height: 120px; padding: 10px; border: 3px solid #fff; border-radius: 9px; background: linear-gradient(#8fd1f0 0 22%,#f5fbfd 22%); box-shadow: 0 5px 12px rgba(145,83,0,.28); }
.mini-browser span { display:inline-block;width:8px;height:8px;margin-right:3px;border-radius:50%;background:#fff;opacity:.8; }
.mini-browser b { margin-top: 23px; display:block;color:#2783ba;font:800 16px "Trebuchet MS",sans-serif;text-align:center; }
.mini-bubble { position:absolute;right:12px;bottom:10px;padding:9px 12px;border:2px solid #fff;border-radius:18px 18px 2px 18px;background:linear-gradient(#a9dc40,#65a907);color:#fff;font:800 10px/1.15 Arial;text-align:center;text-shadow:0 1px #497506;box-shadow:0 2px 4px rgba(0,0,0,.22);transform:rotate(-5deg); }
.project-card__body { padding: 20px 20px 22px; }
.project-meta { display: flex; align-items:center; justify-content:space-between; color:#90a1aa; font:700 9px/1 Arial,sans-serif; text-transform:uppercase; }
.pill { padding:4px 8px;border:1px solid #a9c4d0;border-radius:9px;background:linear-gradient(#fff,#e8f1f5);color:#40748f;box-shadow:inset 0 1px #fff; }
.project-card h3 { margin: 13px 0 8px; color:#287bab; font:800 18px/1.15 "Trebuchet MS",Arial,sans-serif; }
.project-card p { min-height: 68px; margin:0 0 16px; color:#6d7f89; font:12px/1.55 Arial,sans-serif; }
.card-link { font:700 11px/1 Arial,sans-serif; }

.history-layout { display:grid;grid-template-columns:1fr 315px;gap:30px;align-items:start; }
.timeline { margin:0;padding:8px 0 0 57px;list-style:none;position:relative; }
.timeline::before { content:"";position:absolute;left:24px;top:28px;bottom:34px;width:3px;background:linear-gradient(#55a8dc,#9dce3c);border-left:1px solid #fff;box-shadow:0 0 0 1px #b7cbd5; }
.timeline li { position:relative;padding:0 0 30px 19px; }
.timeline-icon { position:absolute;left:-57px;top:0;width:49px;height:49px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:linear-gradient(#5bb2e7,#1476b7);color:#fff;font:800 14px Georgia,serif;text-shadow:0 1px #075482;box-shadow:0 1px 5px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.55); }
.timeline li:nth-child(even) .timeline-icon { background:linear-gradient(#a8d946,#66a80b);text-shadow:0 1px #487508; }
.timeline time { color:#f08a12;font:800 9px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em; }
.timeline h3 { margin:4px 0 4px;color:#38566a;font:800 15px/1.25 "Trebuchet MS",Arial,sans-serif; }
.timeline p { margin:0;color:#7a8d98;font:12px/1.4 Arial,sans-serif; }
.stats-card__body { padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.stats-card__body div { min-height:105px;padding:15px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #c5d5dd;border-radius:8px;background:linear-gradient(#fff,#edf4f7);text-align:center;box-shadow:inset 0 1px #fff; }
.stats-card strong { color:#2681b8;font:800 28px/1 "Trebuchet MS",Arial,sans-serif;letter-spacing:-2px; }
.stats-card span { max-width:86px;margin-top:6px;color:#7a8b94;font:700 9px/1.25 Arial,sans-serif;text-transform:uppercase; }

.star-rating { margin-bottom:10px;color:#ffad0a;font-size:18px;letter-spacing:2px;text-shadow:0 1px #fff,0 0 2px #d27400; }
.quote-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.speech-bubble { position:relative;margin:0;padding:27px 24px;border:1px solid #9bc6df;border-radius:18px;background:linear-gradient(#fff,#e9f6fc);box-shadow:0 2px 6px rgba(46,83,100,.14),inset 0 1px #fff; }
.speech-bubble::before,.speech-bubble::after { content:"";position:absolute;left:34px;bottom:-16px;border-style:solid;border-width:16px 17px 0 0;border-color:#9bc6df transparent transparent transparent; }
.speech-bubble::after { left:35px;bottom:-13px;border-top-color:#e9f6fc; }
.speech-bubble--green { border-color:#b6cf7e;background:linear-gradient(#fff,#f1f8e2); }.speech-bubble--green::before{border-top-color:#b6cf7e}.speech-bubble--green::after{border-top-color:#f1f8e2}
.speech-bubble--orange { border-color:#e3bd7b;background:linear-gradient(#fff,#fff4df); }.speech-bubble--orange::before{border-top-color:#e3bd7b}.speech-bubble--orange::after{border-top-color:#fff4df}
.speech-bubble blockquote { min-height:55px;margin:0;color:#456070;font:italic 700 16px/1.4 Georgia,serif; }
.speech-bubble figcaption { margin-top:13px;color:#84949e;font:700 9px/1.3 Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em; }

.contact-card { width:min(1060px,calc(100% - 32px));margin:75px auto 0;padding:32px 38px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px;border:1px solid #8db4ca;border-radius:17px;background:radial-gradient(circle at 20% 0,#fff,#e7f5fb 55%,#cce7f3);box-shadow:0 4px 12px rgba(40,82,102,.19),inset 0 1px #fff;scroll-margin-top:100px; }
.contact-card__icon { width:76px;height:76px;display:grid;place-items:center;border:4px solid #fff;border-radius:50%;background:linear-gradient(#5bb8ec,#167dc1);color:#fff;font:800 38px/1 "Trebuchet MS",Arial,sans-serif;text-shadow:0 2px #075686;box-shadow:0 2px 7px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.65); }
.contact-card p:not(.eyebrow) { margin:7px 0 0;color:#6b7f8b;font:13px/1.5 Arial,sans-serif; }

.site-footer { border-top:1px solid #064d80;background:linear-gradient(#177dbe,#075d9a 55%,#064f85);color:#b9d9ec;box-shadow:inset 0 1px rgba(255,255,255,.28); }
.site-footer__inner { width:min(1060px,calc(100% - 32px));min-height:170px;margin:0 auto;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:55px; }
.site-logo--footer { font-size:28px;letter-spacing:-2px; }
.site-footer p { max-width:340px;margin:9px 0 0;font:11px/1.5 Arial,sans-serif; }
.site-footer nav { display:flex;gap:18px; }
.site-footer nav a { color:#fff;font:700 11px/1 Arial,sans-serif;text-shadow:0 1px #064d7e; }
.site-footer nav a:hover { color:#d9ff78; }
.site-footer .copyright { text-align:right; }
.visitor-counter { display:inline-block;margin-top:6px;padding:4px 6px;border:1px inset #5d849a;border-radius:3px;background:#163d53;color:#bde7ff;font:10px/1 monospace;letter-spacing:.08em; }

.projects-intro { width:min(1060px,calc(100% - 32px));margin:45px auto 0;padding:38px 42px 32px;position:relative;border:1px solid #b1c9d5;border-radius:15px;background:radial-gradient(circle at 78% 15%,rgba(255,255,255,.95),rgba(255,255,255,0) 30%),linear-gradient(#fff,#eaf5fa);box-shadow:0 3px 9px rgba(42,82,101,.17),inset 0 1px #fff; }
.projects-intro h1 { margin:0 0 10px;color:#2381bc;font:800 clamp(38px,6vw,58px)/1 "Trebuchet MS",Arial,sans-serif;letter-spacing:-3px;text-shadow:0 2px #fff; }
.projects-intro > p:not(.site-kicker) { max-width:680px;margin:0;color:#687e8b;font:15px/1.6 Georgia,serif; }
.breadcrumb { margin-top:25px;padding-top:13px;display:flex;gap:8px;border-top:1px dotted #b8cbd4;color:#8497a2;font:11px/1 Arial,sans-serif; }
.breadcrumb strong { color:#5f7785; }
.project-feature { width:min(1060px,calc(100% - 32px));margin:38px auto 0;scroll-margin-top:100px; }
.feature-window { overflow:hidden;border:1px solid #a6c0cd;border-radius:13px;background:#fff;box-shadow:0 3px 10px rgba(43,80,98,.18),inset 0 1px #fff; }
.feature-window .panel-bar h2 { margin:0;font:700 13px/1 Arial,sans-serif; }
.feature-window__body { padding:36px;display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center;background:linear-gradient(110deg,#fff,#f3f8fa); }
.feature-window__body--reverse .feature-art { order:2; }.feature-window__body--reverse .feature-copy { order:1; }
.feature-art { height:330px;position:relative;overflow:hidden;border:8px solid #fff;border-radius:11px;box-shadow:0 5px 14px rgba(29,68,88,.25),0 0 0 1px #a9c1cc; }
.feature-art--site { padding:48px;background:radial-gradient(circle at 50% 30%,#fff7c5,#ffd054 55%,#f1a400); }
.feature-art--site .mini-browser { height:210px;padding:16px; }
.feature-art--site .mini-browser b { margin-top:55px;font-size:27px; }
.feature-art--site .mini-bubble { right:25px;bottom:25px;padding:13px 17px;font-size:13px; }
.feature-copy h3 { margin:15px 0 10px;color:#31576e;font:800 25px/1.15 "Trebuchet MS",Arial,sans-serif;letter-spacing:-.5px; }
.feature-copy p { color:#6b7e89;font:13px/1.65 Arial,sans-serif; }
.check-list { margin:18px 0 24px;padding:0;list-style:none;color:#536c7b;font:700 12px/1.5 Arial,sans-serif; }
.check-list li { margin:7px 0;padding-left:24px;position:relative; }.check-list li::before { content:"✓";position:absolute;left:0;top:-1px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#aee143,#6bae0b);color:#fff;font:800 10px Arial;text-shadow:0 1px #4a7608; }
.feature-copy .archive-note { margin:19px 0 0;padding:10px 12px;border:1px solid #e7cd8c;border-radius:7px;background:#fff8e5;color:#8d7540;font-size:10px; }
.idea-box { width:min(1060px,calc(100% - 32px));margin:48px auto 74px;padding:23px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border:1px solid #d3c174;border-radius:11px;background:linear-gradient(#fffdea,#fff4b9);box-shadow:0 2px 6px rgba(103,82,21,.14),inset 0 1px #fff; }
.idea-box__icon { width:42px;height:42px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:linear-gradient(#ffd75d,#ef9e00);color:#fff;font:italic 800 22px Georgia,serif;text-shadow:0 1px #b76c00;box-shadow:0 1px 4px rgba(0,0,0,.2); }
.idea-box h2 { margin:0;color:#76621c;font:800 17px/1.2 "Trebuchet MS",Arial,sans-serif; }.idea-box p { margin:4px 0 0;color:#9b8740;font:11px/1.4 Arial,sans-serif; }.idea-box a { font:700 11px/1 Arial,sans-serif; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.project-card { transition:none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #064e88;
  background: linear-gradient(#51ace9 0%, #2289d7 48%, #0b6cb7 51%, #075995 100%);
  box-shadow: 0 2px 7px rgba(0, 57, 96, .45), inset 0 1px rgba(255,255,255,.6);
}

.site-header__inner {
  width: min(1060px, calc(100% - 32px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  position: relative;
  color: #fff !important;
  font: 900 38px/1 "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -3px;
  text-shadow: 0 2px 0 #064b80, 0 0 8px rgba(255,255,255,.2);
}

.site-logo:hover { color: #fff !important; }
.site-logo strong { color: #c8f55b; }
.site-nav { display: flex; align-self: flex-end; gap: 4px; }
.site-nav a {
  min-width: 84px;
  padding: 15px 18px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  color: #fff !important;
  font: 700 14px/1 Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px #064c82;
}

.site-nav a:hover,
.site-nav a.is-active {
  border-color: #0a5c98;
  background: linear-gradient(#fff, #e9f4fa);
  color: #136da9 !important;
  text-shadow: none;
  box-shadow: inset 0 1px #fff;
}

.site-menu { display: none; }

.site-hero {
  width: min(1060px, calc(100% - 32px));
  min-height: 520px;
  margin: 28px auto 0;
  padding: 58px 60px 42px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 50px;
  overflow: hidden;
  border: 1px solid #b3cbd8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 68% 22%, rgba(255,255,255,.95), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #fff 0%, #edf7fb 55%, #d7ebf5 100%);
  box-shadow: 0 2px 9px rgba(52,91,110,.22), inset 0 1px #fff;
}

.site-kicker {
  margin: 0 0 14px;
  color: #768b99;
  font: 700 12px/1.4 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.site-kicker span {
  margin-right: 7px;
  padding: 4px 7px;
  border-radius: 10px;
  background: linear-gradient(#b8ed52, #73b80b);
  color: #fff;
  text-shadow: 0 1px #507f08;
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.18);
}

.site-hero h1 {
  margin: 0 0 14px !important;
  color: #197fc4 !important;
  font: 900 clamp(50px, 7vw, 78px)/.95 "Trebuchet MS", Arial, sans-serif !important;
  letter-spacing: -5px;
  text-shadow: 0 2px #fff;
}

.site-tagline {
  margin: 0 0 28px;
  color: #536b7b;
  font: 400 19px/1.55 Georgia, serif !important;
}

.site-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-button {
  display: inline-block;
  padding: 5px;
  border-radius: 22px;
  font: 700 15px/1 Arial, sans-serif;
  text-shadow: 0 1px rgba(0,0,0,.42);
  box-shadow: 0 2px 4px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.7);
}
.site-button span { display: block !important; padding: 12px 22px; border-radius: 17px; border: 1px solid rgba(255,255,255,.35); }
.site-button--primary { border: 1px solid #558f08; background: linear-gradient(#aadd46, #66ae08); color: #fff !important; }
.site-button--primary:hover { background: linear-gradient(#b9ec57, #74bc11); color: #fff !important; }
.site-button--secondary { border: 1px solid #0870b6; background: linear-gradient(#55b6ef, #1680c8); color: #fff !important; }
.site-button--secondary:hover { background: linear-gradient(#6ac4f4, #248dd0); color: #fff !important; }
.site-button--resume { border:1px solid #c06f00;background:linear-gradient(#ffc852,#ee8d06);color:#fff !important; }
.site-button--resume:hover { background:linear-gradient(#ffd267,#f49a10);color:#fff !important; }

.site-fineprint { margin: 14px 0 0; color: #8ba0ad; font: 11px/1.4 Arial, sans-serif !important; }
.site-photo-frame {
  position: relative;
  padding: 10px 10px 30px;
  border: 1px solid #9cb4c1;
  border-radius: 13px;
  background: #fff;
  transform: rotate(2deg);
  box-shadow: 0 12px 25px rgba(37,78,100,.28), inset 0 0 0 1px #fff;
}
.site-photo-frame img { display: block; width: 100%; border-radius: 7px; filter: saturate(1.08); }
.site-photo-frame::after { content: "my natural habitat"; position: absolute; right: 18px; bottom: 8px; color: #8797a0; font: italic 12px Georgia, serif; }
.site-sticker {
  position: absolute;
  right: -25px;
  top: -26px;
  width: 80px;
  height: 80px;
  display: grid !important;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffef6d, #ff9d00 64%, #e57300);
  color: #fff;
  font: 900 15px/1.05 "Trebuchet MS", sans-serif;
  text-align: center;
  text-shadow: 0 1px #b45800;
  transform: rotate(12deg);
  box-shadow: 0 3px 7px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.65);
}

@media (max-width: 760px) {
  .site-header__inner { min-height: 64px; }
  .site-logo { font-size: 31px; }
  .site-menu { display: block; border: 1px solid #075b96; border-radius: 14px; padding: 8px 14px; background: linear-gradient(#fff,#dcecf4); color: #156b9f; font-weight: 700; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 64px; padding: 8px 16px 15px; flex-direction: column; background: #0870b7; }
  .site-nav.is-open { display: flex; }
  .site-nav a { border-radius: 7px; border: 1px solid rgba(255,255,255,.18); }
  .site-hero { grid-template-columns: 1fr; padding: 42px 28px 34px; gap: 38px; }
  .site-hero h1 { letter-spacing: -3px; }
  .site-photo-frame { max-width: 480px; margin: 0 auto; }
  .site-utility__inner { padding: 8px 0; display: block; }
  .utility-links { margin-top: 4px !important; }
  .section-heading { align-items: center; }
  .section-heading h2, .contact-card h2 { font-size: 24px; }
  .section-badge, .last-updated { display: none; }
  .about-grid, .project-grid, .history-layout, .quote-grid { grid-template-columns: 1fr; }
  .project-card__image { height: 220px; }
  .project-card p { min-height: 0; }
  .history-layout { gap: 18px; }
  .contact-card { grid-template-columns: auto 1fr; padding: 26px; }
  .contact-card .site-button { grid-column: 1 / -1; justify-self: start; }
  .site-footer__inner { padding: 38px 0; grid-template-columns: 1fr; gap: 25px; }
  .site-footer .copyright { text-align: left; }
  .projects-intro { margin-top:20px;padding:30px 25px; }
  .feature-window__body { grid-template-columns:1fr;padding:24px;gap:28px; }
  .feature-window__body--reverse .feature-art,.feature-window__body--reverse .feature-copy { order:initial; }
  .feature-art { height:280px; }
  .idea-box { grid-template-columns:auto 1fr; }.idea-box > a { grid-column:1/-1; }
}

@media (max-width: 460px) {
  .site-header__inner, .site-utility__inner, .site-hero, .site-section, .contact-card, .site-footer__inner { width: min(100% - 22px, 1060px); }
  .site-hero { margin-top: 16px; padding: 34px 21px 28px; border-radius: 13px; }
  .site-hero h1 { font-size: 48px !important; }
  .site-actions { display: grid; }
  .site-button { text-align: center; }
  .site-section { margin-top: 52px; }
  .about-grid { gap: 16px; }
  .profile-card__body { grid-template-columns: 100px 1fr; padding: 14px; gap: 13px; }
  .avatar-wrap { width: 100px; height: 137px; }
  .panel-content { padding: 22px 20px; }
  .project-card__image { height: 185px; }
  .stats-card__body { gap: 8px; padding: 10px; }
  .contact-card { grid-template-columns: 1fr; text-align: center; }
  .contact-card__icon { margin: 0 auto; }
  .contact-card .site-button { justify-self: stretch; }
  .site-footer nav { flex-wrap: wrap; }
  .feature-art { height:230px; }.feature-art--site{padding:28px}.feature-art--site .mini-browser{height:160px}.feature-art--site .mini-browser b{margin-top:38px;font-size:21px}
  .idea-box { grid-template-columns:1fr;text-align:center; }.idea-box__icon { margin:0 auto; }
}