/* Shared layout and components. Motion enhancements follow the responsive rules. */
html { line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4 }
body { margin:0 }
h1, h2, h3, h4, p { margin:0 }
h1, h2, h3, h4 { font-size:inherit;font-weight:inherit }
button, input, textarea { font:inherit;color:inherit;margin:0 }
button { background:none }
img, svg { display:block;vertical-align:middle }
img { max-width:100%;height:auto }
a { text-decoration:none;color:inherit }
ul { margin:0;padding:0 }
button { border-radius:0 }
abbr[title] { text-decoration:underline dotted }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:105px }
body { margin:0;background:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased }
::selection { background:#b8a5ef;color:#09090b }
a { color:inherit;text-decoration:none }
button { font:inherit;cursor:pointer }
button, a { -webkit-tap-highlight-color:transparent }
button:focus-visible, a:focus-visible { outline:2px solid #c5b4ed;outline-offset:6px }
button:disabled { cursor:wait }
svg { width:18px;height:18px;flex-shrink:0 }
.shell { width:min(1240px,calc(100% - 112px));margin:auto }
.mono, .eyebrow, .tags { font-family:var(--font-mono) }
.mono, .eyebrow { font-size:10px;letter-spacing:1.4px }
.eyebrow { color:var(--text-muted);margin:0 0 22px;line-height:1.7 }
.site-header { position:sticky;top:0;z-index:30;background:rgba(9,9,11,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-hairline) }
.nav-inner { height:92px;display:flex;align-items:center;justify-content:space-between }
.wordmark { display:flex;gap:16px;align-items:center }
.monogram { font-size:33px;font-weight:750;letter-spacing:-3px }
.monogram>span { font-size:10px;vertical-align:top;letter-spacing:0;margin-left:3px }
.wordmark-name { font-size:12px;font-weight:550;line-height:1.6 }
.wordmark-name>span { display:block;font-size:10px;color:var(--text-muted);font-weight:400 }
.site-header nav { display:flex;gap:32px;height:100%;align-items:center }
.site-header nav a { font-size:12px;color:var(--text-secondary);height:100%;display:flex;align-items:center;position:relative;transition:color .2s }
.site-header nav a:hover, .site-header nav a[aria-current] { color:var(--text-primary) }
.site-header nav a[aria-current]:after { content:"";position:absolute;bottom:-1px;height:2px;background:var(--text-primary);left:0;right:0 }
.nav-contact { display:flex;align-items:center;gap:20px;font-size:12px }
.nav-contact svg { width:15px }
.hero { padding-top:34px }
.hero-layout { display:grid;grid-template-columns:1.8fr 1fr;align-items:center;gap:24px;min-height:476px;padding:65px 0 58px }
.hero h1 { font-size:clamp(44px,5.1vw,70px);font-weight:500;line-height:1.11;letter-spacing:-3.6px;margin:0 0 26px }
.hero h1>span { color:var(--text-muted) }
.hero-description { font-size:14px;color:var(--text-secondary);line-height:1.85;margin:0 }
.hero-actions { display:flex;align-items:center;gap:30px;margin-top:32px }
.button { border:1px solid transparent;min-height:44px;display:inline-flex;justify-content:center;align-items:center;gap:16px;padding:12px 18px;font-size:11px;font-weight:550;border-radius:3px;transition:background .2s,transform .2s,border-color .2s }
.button:hover { transform:translateY(-2px) }
.button-light { background:var(--text-primary);color:var(--bg-main) }
.button-light:hover { background:#fff }
.button-outline { border-color:var(--border-hover);background:transparent;color:var(--text-primary) }
.button-outline:hover { background:var(--bg-surface-hover) }
.button svg { width:15px;height:15px }
.text-link { font-size:11px;display:inline-flex;align-items:center;gap:25px;color:var(--text-secondary);transition:color .2s }
.text-link:hover { color:#fff }
.text-link span { font-size:20px;transition:transform .2s }
.text-link:hover span { transform:translate(2px,-2px) }
.hero-object { height:305px;position:relative;display:grid;place-items:center;perspective:700px }
.orbital { position:absolute;width:236px;height:236px;border:1px solid #76767d;border-radius:50%;box-shadow:inset 0 0 22px #fff1,0 0 15px #fff1 }
.orbital-one { transform:rotate(-35deg) rotateY(64deg);border-color:#b0b0b6 }
.orbital-two { transform:rotate(30deg) rotateY(63deg) }
.orbital-three { transform:rotate(88deg) rotateY(65deg);border-color:#53535d }
.orbital-core { font-size:102px;color:#d8d8dc;line-height:1;transform:rotate(-14deg);text-shadow:0 0 65px #fff3 }
.hero-bottom { border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px }
.hero-bottom>.mono { color:var(--text-muted);font-size:8px }
.social-badges { display:flex;gap:8px }
.social-badges>a { display:flex;align-items:center;gap:7px;border:1px solid var(--border-hairline);padding:8px 11px;font-size:10px;border-radius:3px;transition:background .2s,border-color .2s }
.social-badges>a:hover { background:var(--bg-surface);border-color:var(--border-hover) }
.social-badges svg { width:12px;height:12px }
.work-section { padding:70px 0 0 }
.section-heading { display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px }
.section-heading .eyebrow { font-size:9px;margin-bottom:13px }
.section-heading h2 { font-size:30px;letter-spacing:-1.1px;font-weight:500;margin:0 }
.count { font-family:var(--font-mono);font-size:11px;color:var(--text-muted);vertical-align:top;margin:5px 0 0 13px;display:inline-block;letter-spacing:0 }
.projects-grid { display:grid;grid-template-columns:1fr 1fr;gap:45px 24px }
.project-card { min-width:0 }
.project-link { display:block }
.project-visual { height:300px;border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;position:relative;display:grid;place-items:center;background:var(--bg-surface) }
.project-link:hover .project-visual { border-color:var(--border-hover) }
.preview-open { position:absolute;right:15px;top:15px;border:1px solid #ffffff30;background:#09090b80;border-radius:50%;height:32px;width:32px;display:grid;place-items:center;opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s }
.project-link:hover .preview-open, .project-link:focus-visible .preview-open { opacity:1;transform:translate(0) }
.card-meta { display:flex;justify-content:space-between;margin:20px 0 10px;font-size:8px;color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase }
.card-title { display:flex;align-items:center;justify-content:space-between }
.card-title h3 { font-size:23px;font-weight:500;letter-spacing:-.6px;margin:0 }
.card-title>span { font-size:23px;color:var(--text-muted);transition:transform .2s,color .2s }
.project-link:hover .card-title>span { color:#fff;transform:translate(2px,-2px) }
.card-description { font-size:12px;color:var(--text-muted);line-height:1.8;margin:0 0 17px;max-width:92% }
.tags { display:flex;flex-wrap:wrap;gap:6px }
.tags span { font-size:9px;color:var(--text-secondary);border:1px solid var(--border-hairline);border-radius:3px;padding:6px 8px }
.closing { margin-top:85px;padding:55px 0 65px;border-top:1px solid var(--border-hairline) }
.closing .eyebrow { font-size:9px;margin-bottom:14px }
.closing>a { font-size:clamp(27px,3.5vw,45px);letter-spacing:-1.7px;display:flex;justify-content:space-between;gap:20px;line-height:1.3 }
.closing>a>span { color:var(--text-muted);transition:transform .25s }
.closing>a:hover>span { transform:translate(5px,-5px);color:var(--text-primary) }
.closing>p:last-child:not(.eyebrow) { font-size:12px;color:var(--text-muted);margin:16px 0 0 }
.site-footer { border-top:1px solid var(--border-hairline);padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--text-muted) }
.footer-mark { font-size:26px;font-weight:600;letter-spacing:-2px;color:var(--text-primary) }
.site-footer p { font-size:10px;margin:0;flex:1 }
.site-footer .mono, .site-footer>a:last-child { font-family:var(--font-mono);font-size:8px;letter-spacing:.7px }
.site-footer>a:last-child { margin-left:30px }
.page-intro { padding:85px 0 50px;border-bottom:1px solid var(--border-hairline) }
.page-intro h1 { font-size:clamp(40px,5vw,67px);font-weight:500;letter-spacing:-3px;line-height:1.15;margin:0 0 28px }
.period { color:var(--text-muted) }
.intro-bottom { display:flex;justify-content:space-between;align-items:end;gap:25px }
.intro-bottom p { margin:0;font-size:13px;line-height:1.9;color:var(--text-secondary) }
.intro-bottom>.mono { font-size:8px;color:var(--text-muted) }
.catalog { padding-top:30px }
.catalog-toolbar { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:32px }
.filters { display:flex;gap:5px;flex-wrap:wrap }
.filter { background:none;border:1px solid transparent;border-radius:4px;font-size:10px;color:var(--text-muted);padding:11px 12px;transition:color .2s,background .2s }
.filter:hover { color:var(--text-primary) }
.filter.active { color:var(--text-primary);background:var(--bg-surface);border-color:var(--border-hairline) }
.filter span { font:8px var(--font-mono);margin-left:8px;color:var(--text-muted) }
[hidden] { display:none!important }
.bento-grid .project-card:first-child { grid-column:1/-1 }
.bento-grid .project-card:first-child .project-visual { height:390px }
.bento-grid .project-card:last-child { grid-column:1/-1 }
.bento-grid:has(.project-card[hidden]) .project-card { grid-column:auto }
.bento-grid:has(.project-card[hidden]) .project-visual { height:300px }
.resume-title { display:flex;align-items:center;justify-content:space-between;gap:30px }
.resume-title .button { margin-bottom:28px;white-space:nowrap }
.resume-section { display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:55px 0;border-bottom:1px solid var(--border-hairline) }
.resume-label h2 { font-size:24px;font-weight:500;letter-spacing:-.7px;margin:14px 0 }
.timeline { border-left:1px solid var(--border-hairline);margin-left:4px }
.timeline-item { position:relative;padding:0 0 40px 30px }
.timeline-item:last-child { padding-bottom:0 }
.timeline-dot { position:absolute;left:-4px;top:8px;width:7px;height:7px;border:1px solid #777;background:var(--bg-main);border-radius:50% }
.timeline-item:first-child .timeline-dot { background:#ccc;border-color:#ccc }
.timeline-top { display:flex;align-items:center;justify-content:space-between;gap:20px }
.company-badge { font:9px var(--font-mono);color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-hairline);padding:6px 8px;border-radius:3px }
.timeline-top .mono, .education>.mono { font-size:9px;color:var(--text-muted) }
.timeline h3, .skills-grid h3, .education h3 { font-size:19px;font-weight:500;letter-spacing:-.4px;margin:20px 0 10px }
.timeline p, .timeline li, .skills-grid p, .education p { font-size:12px;line-height:1.9;color:var(--text-secondary) }
.timeline ul { padding-left:16px;margin:14px 0 0 }
.timeline li { padding-left:3px }
.skills-grid { display:grid;grid-template-columns:1fr 1fr;gap:30px }
.skills-grid h3 { margin-top:0 }
.skills-grid .tags { margin-top:20px }
.education p:last-child { color:var(--text-muted) }
.contact-intro { padding:85px 0 50px }
.contact-intro h1 { font-size:clamp(54px,7.5vw,100px);font-weight:500;line-height:1.06;letter-spacing:-5px;margin:0 0 28px }
.contact-intro h1>span { color:var(--text-muted) }
.email-block { margin-top:60px;border-top:1px solid var(--border-hairline);padding-top:30px }
.email-block>.mono { font-size:9px;color:var(--text-muted) }
.email-address { display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(25px,5vw,65px);letter-spacing:-2.5px;line-height:1.4;margin:14px 0 25px;overflow-wrap:anywhere }
.email-address>span { color:var(--text-muted);transition:transform .2s }
.email-address:hover>span { transform:translate(4px,-4px) }
.email-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.elsewhere { padding:28px 0 60px }
.elsewhere .section-heading h2 { font-size:26px }
.elsewhere .section-heading>.mono { font-size:8px;color:var(--text-muted) }
.social-matrix { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border-hairline);border-radius:4px;overflow:hidden }
.social-matrix>a { padding:28px;display:flex;align-items:center;gap:20px;transition:background .2s;border-right:1px solid var(--border-hairline) }
.social-matrix>a:last-child { border-right:none }
.social-matrix>a:hover { background:var(--bg-surface) }
.social-matrix strong { font-size:14px;font-weight:500;display:block }
.social-matrix small { font-size:10px;color:var(--text-muted);display:block;margin-top:7px }
.social-arrow { margin-left:auto;color:var(--text-muted);transition:transform .2s }
.social-matrix>a:hover .social-arrow { transform:translate(2px,-2px) }
.toast { position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);z-index:60;pointer-events:none;opacity:0;max-width:calc(100% - 32px);background:var(--text-primary);color:var(--bg-main);font-size:12px;padding:15px 22px;border-radius:5px;box-shadow:0 8px 40px #0008;transition:opacity .25s,transform .25s }
.toast.visible { transform:translate(-50%,0);opacity:1 }
.skip-link { position:fixed;top:-80px;left:20px;z-index:100;background:#fff;color:#111;padding:12px;font-size:13px }
.skip-link:focus { top:15px }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
@media(min-width:1500px) {
  .hero-layout { min-height:525px }
  .hero h1 { font-size:76px }
}
@media(max-width:1000px) {
  .shell { width:calc(100% - 64px) }
  .nav-inner { height:80px }
  .wordmark-name { display:none }
  .site-header nav { gap:24px }
  .hero h1 { letter-spacing:-2.7px }
  .hero-layout { grid-template-columns:1.7fr 1fr;min-height:440px }
  .orbital { width:190px;height:190px }
  .orbital-core { font-size:85px }
  .project-visual { height:260px }
  .social-matrix>a { padding:22px 16px;gap:13px }
  .social-matrix small { font-size:9px }
  .resume-title { align-items:start }
  .resume-title h1 { max-width:60% }
  .resume-title .button { margin-top:8px }
}
@media(max-width:700px) {
  .shell { width:calc(100% - 40px) }
  .nav-inner { height:74px;flex-wrap:wrap;gap:10px }
  .monogram { font-size:28px }
  .site-header nav { gap:19px }
  .site-header nav a { font-size:10px }
  .nav-contact { display:none }
  .hero { padding-top:24px }
  .hero-layout { display:block;position:relative;padding:62px 0 42px;min-height:auto }
  .hero h1 { font-size:clamp(37px,8.7vw,60px);letter-spacing:-2px;position:relative;z-index:1 }
  .hero .eyebrow { font-size:8px }
  .hero-description { font-size:12px }
  .hero-actions { gap:20px;margin-top:25px }
  .hero-object { display:none }
  .hero-bottom { align-items:start;flex-direction:column;padding:20px 0;gap:17px }
  .hero-bottom>.mono { font-size:7px;letter-spacing:1px }
  .social-badges>a { font-size:9px }
  .work-section { padding-top:45px }
  .section-heading { gap:16px;margin-bottom:25px }
  .section-heading .eyebrow { font-size:7px;letter-spacing:1px }
  .section-heading h2 { font-size:26px }
  .text-link { font-size:10px;gap:15px }
  .projects-grid { grid-template-columns:1fr;gap:35px }
  .project-visual { height:280px }
  .card-title h3 { font-size:22px }
  .card-meta { font-size:7px }
  .card-description { max-width:100% }
  .closing { margin-top:55px;padding:35px 0 45px }
  .closing>a { font-size:28px;letter-spacing:-1px }
  .closing .eyebrow { font-size:7px }
  .site-footer { flex-wrap:wrap;gap:14px;padding:25px 0 }
  .site-footer p { font-size:9px;flex-basis:70% }
  .site-footer>a:last-child { margin-left:auto }
  .page-intro { padding:55px 0 30px }
  .page-intro h1 { font-size:43px;letter-spacing:-2px }
  .intro-bottom { align-items:start;flex-direction:column;gap:20px }
  .intro-bottom p { font-size:12px }
  .catalog { padding-top:20px }
  .catalog-toolbar { margin-bottom:25px }
  .filter { font-size:9px;padding:10px 8px }
  .filter span { margin-left:4px }
  .bento-grid .project-card:first-child, .bento-grid .project-card:last-child { grid-column:auto }
  .bento-grid .project-card:first-child .project-visual { height:280px }
  .resume-title { flex-direction:column;gap:0 }
  .resume-title h1 { max-width:100% }
  .resume-title .button { margin:0 0 25px }
  .resume-section { grid-template-columns:1fr;gap:20px;padding:35px 0 }
  .resume-label h2 { font-size:24px;margin-top:8px }
  .timeline-top { flex-wrap:wrap;gap:10px }
  .timeline-item { padding-left:22px }
  .timeline h3 { font-size:19px }
  .skills-grid { grid-template-columns:1fr;gap:28px }
  .contact-intro { padding-top:55px }
  .contact-intro h1 { font-size:clamp(51px,11vw,75px);letter-spacing:-3px }
  .email-block { margin-top:40px;padding-top:24px }
  .email-address { font-size:clamp(23px,6.4vw,44px);letter-spacing:-1px;gap:10px }
  .email-actions { gap:9px }
  .email-actions .button { font-size:10px;padding:11px 13px;gap:9px }
  .elsewhere { padding-top:0;padding-bottom:35px }
  .elsewhere .section-heading>.mono { display:none }
  .social-matrix { grid-template-columns:1fr }
  .social-matrix>a { padding:24px;border-right:none;border-bottom:1px solid var(--border-hairline) }
  .social-matrix>a:last-child { border-bottom:none }
  .social-matrix small { font-size:10px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *, *:before, *:after { transition:none!important;animation:none!important }
}
.timeline-top { align-items:flex-start }
.timeline-top>.mono { text-align:right;line-height:1.8;flex-shrink:0 }
.education-list { display:grid;gap:32px }
.education-list .education h3 { line-height:1.4 }
.education-list .education p { color:var(--text-secondary) }
@media(max-width:700px) {
  .timeline-top>.mono { text-align:left }
  .timeline-top { gap:10px 16px }
}
.timeline ul { list-style:disc }
.timeline li+li { margin-top:6px }
.mero-visual { background:radial-gradient(ellipse at center,#fff04,transparent 65%);border-style:dashed }
.mero-emblem { font-size:110px;letter-spacing:-10px;font-weight:500;color:#66666f;position:relative;line-height:1 }
.mero-emblem>span { font-size:28px;position:absolute;right:-27px;top:-3px;color:#9696a0;letter-spacing:0 }
.mero-placeholder .card-title>span { color:var(--text-muted) }
.resume-projects .project-card:first-child .project-visual { height:330px }
.resume-projects .project-card:last-child .project-visual { height:240px }
.card-title h3 { line-height:1.35 }
.timeline-item[id] { scroll-margin-top:120px }
@media(max-width:700px) {
  .resume-projects .project-card:first-child .project-visual { height:280px }
}
.hero-bottom { justify-content:flex-end }
.site-footer { justify-content:space-between }
.site-footer>.mono { margin-left:auto }
.project-artwork { height:auto;aspect-ratio:8/5;background:var(--bg-surface) }
.project-artwork>img { width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1) }
.project-link:hover .project-artwork>img { transform:scale(1.045) }
.card-description { margin-top:12px }
.resume-projects .project-card:first-child .project-artwork { height:auto;aspect-ratio:2.4 }
.resume-projects .project-card:first-child .project-artwork img { object-fit:cover;object-position:50% 45% }
.social-matrix { grid-template-columns:repeat(2,1fr) }
.contact-intro { padding-bottom:45px }
.elsewhere { padding-bottom:70px }
.hero h1 { font-size:clamp(40px,4.6vw,64px) }
.closing { padding:40px 0 50px }
.card-meta>span:last-child { white-space:nowrap }
.card-meta { gap:12px }
.email-address { font-size:clamp(24px,4.4vw,60px) }
@media(max-width:700px) {
  .hero h1 { font-size:clamp(33px,8.4vw,58px);letter-spacing:-1.8px }
  .hero-bottom { align-items:flex-start }
  .project-artwork { height:auto!important;aspect-ratio:8/5!important }
  .social-matrix { grid-template-columns:1fr }
  .site-footer { gap:18px }
  .site-footer>.mono { font-size:7px }
  .site-footer>a:last-child { margin-left:0;font-size:7px }
  .card-meta { font-size:7px;letter-spacing:.3px }
  .email-address { font-size:clamp(22px,5.8vw,40px) }
}

/* Interaction feedback: fast entry, clear focus, and larger touch targets. */
:root { --ease-out: cubic-bezier(.2,.75,.25,1); --duration-fast: 160ms; }
main:focus { outline: none; }
.site-header { transition: background var(--duration-fast), box-shadow var(--duration-fast); }
.site-header.is-scrolled { background: rgba(9,9,11,.97); box-shadow: 0 8px 24px #0002; }
.site-header nav { gap: 30px; }
.site-header nav a { min-height: 44px; }
.site-header nav a::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header nav .nav-contact { margin-left: 22px; gap: 12px; color: var(--text-primary); }
.nav-contact svg, .button svg, .social-arrow, .email-address>span { transition: transform 180ms var(--ease-out); }
.nav-contact:is(:hover,:focus-visible) svg { transform: translate(2px,-2px); }
.button { transition: background var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast); }
.button:active { transform: translateY(1px) scale(.98); }
.button:focus-visible { box-shadow: 0 0 0 5px #c5b4ed15; }
.button-light:hover svg { transform: translateY(1px); }
.text-link, .social-badges>a, .footer-mark, .site-footer>a:last-child { min-height: 44px; display: inline-flex; align-items: center; }
.social-badges>a { transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.social-badges>a:active { transform: scale(.97); }
.project-link { border-radius: var(--radius-card); transition: transform 240ms var(--ease-out); }
.project-visual { transition: border-color 200ms, box-shadow 250ms; }
.project-link:focus-visible .project-visual { border-color: var(--border-hover); box-shadow: 0 12px 40px #0003; }
.project-link:focus-visible .project-artwork>img { transform: scale(1.025); }
.project-link:focus-visible .card-title>span { color: var(--text-primary); transform: translate(2px,-2px); }
.project-link:active { transform: scale(.993); }
.project-artwork>img { transition-duration: 400ms; }
.filter { min-height: 44px; transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), transform 100ms; }
.filter:active { transform: scale(.96); }
.filters { align-items: center; }
.filters:focus-within { isolation: isolate; }
.social-matrix>a:is(:hover,:focus-visible) { background: var(--bg-surface); }
.social-matrix>a:is(:hover,:focus-visible) .social-arrow { transform: translate(3px,-3px); }
.social-matrix>a:focus-visible { outline-offset: -4px; }
.email-address:focus-visible>span { transform: translate(3px,-3px); }
[data-copy-email] { min-width: 132px; }
.copy-success { display: none; }
[data-copy-email][data-state="copied"] .copy-default { display: none; }
[data-copy-email][data-state="copied"] .copy-success { display: block; }
[data-copy-email][data-state="copied"] { background: #deeddf; }
[data-copy-email][aria-busy="true"] { opacity: .75; }
@media (hover:hover) and (pointer:fine) {
  .project-link:hover { transform: translateY(-3px); }
  .project-link:hover .project-visual { box-shadow: 0 14px 36px #0003; }
}
@media (hover:none) {
  .preview-open { opacity: 1; transform: none; }
  .button:hover { transform: none; }
}
@media (max-width:700px) {
  .nav-inner { flex-wrap: nowrap; gap: 16px; height: 74px; }
  .site-header nav { gap: 17px; }
  .site-header nav a { font-size: 10px; white-space: nowrap; }
  .site-header nav .nav-contact { display: flex; margin-left: 0; gap: 5px; }
  .nav-contact svg { width: 12px; height: 12px; }
  .hero-actions { gap: 20px; flex-wrap: wrap; }
  .filters { gap: 4px; }
  .filter { padding: 11px 9px; }
}
@media (max-width:360px) {
  .shell { width: calc(100% - 32px); }
  .nav-inner { gap: 12px; }
  .site-header nav { gap: 12px; }
  .site-header nav a { font-size: 9px; }
  .nav-contact svg { display: none; }
  .site-footer { gap: 12px; }
}
@keyframes page-enter { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:no-preference) {
  main { animation: page-enter 260ms var(--ease-out) both; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .project-link:is(:hover,:active), .button:is(:hover,:active), .project-link .project-artwork>img { transform: none !important; }
}
.resume-projects.is-filtered .project-card:first-child .project-artwork { aspect-ratio: 8/5; }
.bento-grid.is-filtered .project-card { grid-column: auto; }
.site-header nav a { min-width: 44px; justify-content: center; }
.catalog-toolbar { min-height: 44px; }
@media (hover:none) {
  .project-link:hover .project-artwork>img { transform: none; }
}