.mission-thumb{display:none;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);border-radius:5px}.project-peek{position:fixed;left:0;top:0;width:330px;pointer-events:none;z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px;box-shadow:0 20px 70px #0005;opacity:0;visibility:hidden;transition:opacity .15s}.project-peek.visible{opacity:1;visibility:visible}.project-peek img{display:block;aspect-ratio:16/10;width:100%;object-fit:cover;border-radius:3px}.project-peek span{display:flex;justify-content:space-between;padding:13px 8px 8px;font:10px var(--mono);color:var(--text)}
.contact-form-shell{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.35fr;gap:70px;margin-top:65px;padding-top:44px;border-top:1px solid #33251b50}.contact-form-intro>span{font:10px var(--mono);letter-spacing:1px}.contact-form-intro h3{font-size:34px;line-height:1.13;letter-spacing:-1.4px;margin:20px 0 15px;font-weight:500}.contact-form-intro p{font-size:14px;line-height:1.8;max-width:300px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px}.contact-field{display:flex;flex-direction:column;gap:9px;min-width:0}.contact-field.full,.contact-form-footer,.contact-form-status{grid-column:1/-1}.contact-field label{font:10px var(--mono);letter-spacing:.6px}.contact-field input,.contact-field textarea{width:100%;background:#fff3;border:1px solid #33251b65;border-radius:4px;color:#211c16;padding:15px;font:15px/1.5 var(--sans, sans-serif);outline-offset:4px}.contact-field textarea{resize:vertical;min-height:130px}.contact-field input::placeholder,.contact-field textarea::placeholder{color:#5c3c30}.contact-field input:focus,.contact-field textarea:focus{outline:2px solid #29231d}.contact-field input[aria-invalid=true],.contact-field textarea[aria-invalid=true]{border:2px solid #7b1919}.field-error{font-size:12px;line-height:1.5;color:#601717}.field-error:empty{display:none}.contact-form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-submit{display:flex;justify-content:space-between;gap:40px;align-items:center;min-height:52px;padding:16px 23px;border-radius:3px;background:#211c16;color:#fff5e9;border:1px solid #211c16;font:11px var(--mono);cursor:pointer;white-space:nowrap}.contact-submit:disabled{opacity:.65;cursor:wait}.contact-form-footer small{max-width:230px;font-size:11px;line-height:1.7}.contact-form-status{font-size:13px;line-height:1.7;min-height:24px;margin:0}.contact-form-status a{text-decoration:underline}.contact-honeypot{display:none}.contact-form .contact-clear{padding:4px 0;text-decoration:underline;background:none;border:0;color:inherit;cursor:pointer;font:inherit}.portrait-frame img{width:100%;height:100%;object-fit:cover}.contact :focus-visible{outline:2px solid #211c16;outline-offset:5px}
@media(hover:none),(max-width:820px){.project-peek{display:none}.mission-thumb{display:block;grid-column:1/-1;margin-bottom:8px}.mission-row{padding-top:23px;padding-bottom:23px}.mission-name strong{font-size:24px}.mission-type,.mission-year{display:none}.mission-row{grid-template-columns:30px 1fr 34px}.mission-arrow{grid-column:3}}
@media(max-width:850px){.contact-form-shell{gap:30px;grid-template-columns:1fr 1.5fr}.contact-form-intro h3{font-size:29px}.contact-form-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.contact-form-shell{display:block;margin-top:35px;padding-top:32px}.contact-form-intro{margin-bottom:25px}.contact-form-intro h3{font-size:32px}.contact-form-intro p{max-width:none}.contact-form{grid-template-columns:1fr;gap:19px}.contact-form-footer{gap:15px}.contact-submit{width:100%}.contact-field input,.contact-field textarea{font-size:16px}.contact-form-footer small{max-width:none}.mission-thumb{aspect-ratio:16/10}.mission-name strong{font-size:23px}}
.mission-number{color:var(--muted)}.contact-field input,.contact-field textarea{font-family:Inter,Arial,sans-serif}
@media(prefers-reduced-motion:reduce){.project-peek{transition:none}}
/* live facts from the main site (live.js) */
.operator-facts b a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.operator-facts b a:hover{text-decoration-color:var(--accent)}
.operator-facts b small{color:var(--muted);font-size:inherit}
.latest-notes{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.latest-notes li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.latest-notes a{color:var(--text);text-decoration:none}
.latest-notes a:hover{color:var(--accent)}
.latest-notes time{flex:none;font:10px var(--mono);letter-spacing:.6px;color:var(--muted)}
/* phones: a calmer, shorter layout */
@media (max-width:620px){
  /* the thumbnails carry width/height attributes; without height:auto the 400px attribute wins and crops them */
  .mission-thumb{height:auto}
  /* projects: a small thumbnail beside the name instead of a full-width image per project */
  .mission-row{grid-template-columns:92px 1fr 30px;gap:14px;padding-top:16px;padding-bottom:16px}
  .mission-thumb{grid-column:auto;grid-row:1;width:92px;margin:0;object-position:top center}
  .mission-number{display:none}
  .mission-name strong{font-size:19px}
  /* skills: a small orbit, then the skills as a tidy row of chips instead of bubbles that collide */
  .orbital-stage{height:auto;max-width:none}
  .orbital-stage canvas{display:block;height:190px}
  .orbital-center{top:95px}
  .skill-nodes{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:16px 0 6px;pointer-events:auto}
  .skill-node{position:static;transform:none;min-height:36px;padding:8px 12px;font-size:12px}
  .orbit-legend,.drag-hint{display:none}
  .orbit-tools{top:150px;bottom:auto}
  /* expertise: the decorative drawings made each card a full screen */
  .capability .mini-visual{display:none}
  .capability h3{font-size:24px}
  /* a commit message needs the full width, not half a column */
  #live-shipped{grid-column:1/-1}
}
/* GitHub's last 16 weeks, in the site's accent instead of GitHub green */
.gh-mini{display:grid;grid-template-rows:repeat(7,10px);grid-auto-flow:column;grid-auto-columns:10px;gap:3px;margin:2px 0 12px}
.gh-mini i{border-radius:2px;background:var(--line)}
.gh-mini i[data-level="1"]{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.gh-mini i[data-level="2"]{background:color-mix(in srgb,var(--accent) 52%,transparent)}
.gh-mini i[data-level="3"]{background:color-mix(in srgb,var(--accent) 76%,transparent)}
.gh-mini i[data-level="4"]{background:var(--accent)}
.gh-mini i:not([data-level]){background:none}
@media (max-width:620px){#live-github{grid-column:1/-1}.gh-mini{grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:4px}}

/* ---- hero proof: what I've done, visible without scrolling ---- */
.hero-proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 6px;padding:0}
.hero-proof li{border:1px solid var(--line);border-radius:30px;padding:8px 13px;font-size:12px;color:var(--muted);line-height:1.3}
.hero-proof b{color:var(--text);font-weight:600}

/* ---- experience and achievements ---- */
.journey{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;align-items:start}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline>li{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
.timeline .when{font:11px var(--mono);letter-spacing:.8px;color:var(--muted);padding-top:5px}
.timeline h3{font-size:19px;font-weight:500;letter-spacing:-.4px;line-height:1.35}
.timeline h3 .muted{color:var(--muted);font-weight:400}
.timeline p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:8px;max-width:640px}
.proof-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.proof-list li{font-size:12px;border:1px solid var(--line);border-radius:4px;padding:6px 10px;color:var(--muted)}
.proof-list b{color:var(--text);font-weight:600}
.awards{border:1px solid var(--line);background:var(--soft);padding:26px 26px 10px}
.awards-title{font:11px var(--mono);letter-spacing:1px;color:var(--accent)}
.awards ul{list-style:none;margin:16px 0 0;padding:0}
.awards li{display:grid;gap:3px;padding:16px 0;border-top:1px solid var(--line)}
.awards li b{font-size:17px;font-weight:600;letter-spacing:-.3px}
.awards li span{font-size:13px;color:var(--text)}
.awards li small{font-size:12px;color:var(--muted)}

/* ---- project rows: the result under the tagline ---- */
.mission-proof{display:block;margin-top:6px;font:11px var(--mono);letter-spacing:.4px;color:var(--accent)}

/* ---- playground: the real request ---- */
.demo-live{margin:22px 0 4px;padding:18px 0 0;border-top:1px solid var(--line)}
.demo-live>span{font:11px var(--mono);letter-spacing:.8px;color:var(--accent)}
.demo-live p{font-size:12px;line-height:1.7;color:var(--muted);margin:6px 0 12px}
.demo-live .button{font-size:11px}

/* ---- contact: GitHub and LinkedIn where the repeated line was ---- */
.contact-bottom .contact-links{display:flex;gap:22px;font-size:13px;margin-left:auto}
.contact-links a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- readability: nothing a visitor needs to read below 11px ---- */
.identity-sub,.command-trigger kbd,.telemetry-strip,.telemetry-strip span,.telemetry-strip time,.eyebrow,.hero-buttons .button,
.panel-top,.panel-top span,.model-readout span,.skill-detail-top span,.skill-proof>span,.hero-bottom a,.hero-bottom button,
.section-kicker,.section-kicker span,.section-kicker a,.section-kicker i,.card-index,.tech-tags span,.operator-label>span,
.portrait-caption span,.demo-tag,.demo-panel-title,.demo-panel-title span,.demo-input-footer span,.demo-input-footer button,
.demo-saved span,.demo-saved b,.flow-stage small,.flow-explanation span,.demo-code-header span,.mission-toolbar span,
.mission-filters button,.mission-number,.mission-type,.mission-year,.transmission .button,.transmission>div>span,.latest-notes time,
.contact-content>p,.contact-form-intro span,.contact-field label,.footer span,.footer a,.operator-facts span,.contact-bottom button{font-size:11px}

/* keyboard focus on everything that can take it, not only links and buttons */
textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .timeline>li{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .timeline h3{font-size:17px}
  .hero-proof li{font-size:12px;padding:7px 11px}
  /* a shorter phone page: the decorative orbit goes, the skill chips and details stay */
  .orbital-stage canvas,.orbital-center,.orbit-tools{display:none}
  .skill-nodes{padding-top:4px}
  .flow-explanation p{display:none}
  .demo-code{max-height:220px;overflow:auto}
  .contact-bottom{flex-wrap:wrap}
  .contact-bottom .contact-links{margin-left:0;width:100%}
}
/* the original mobile rules are more specific; these labels still need the 11px floor */
.eyebrow.eyebrow,.panel-top .muted.muted,.orbit-legend span.orbit-legend-text,.model-readout #layer-title,.portrait-placeholder .portrait-coming,.demo-flow-panel .demo-panel-title.demo-panel-title,.demo-input-panel .demo-panel-title.demo-panel-title{font-size:11px}
.orbit-legend span{font-size:11px}

/* the hero headline is artwork as much as text: dragging across it should not paint it orange */
.hero h1,.contact-content h2{-webkit-user-select:none;user-select:none}