/* Shared accessibility and a quieter, consistent portfolio presentation. */
:root{--portal-ink:#17233e;--portal-accent:#5145cd;--portal-muted:#58657a}
.portal-skip{position:fixed;left:16px;top:-80px;z-index:99999;background:#17233e;color:#fff;padding:14px 22px;border-radius:10px;font-weight:700}
.portal-skip:focus{top:12px;color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #7c70ee!important;outline-offset:4px}
#main-content:focus{outline:none}
.auth-page input:not([type=checkbox]):not([type=radio]),.auth-page select{min-height:48px;font-size:16px}
.auth-page button:disabled{cursor:not-allowed;opacity:.6}
.auth-page .auth-form-panel{box-shadow:0 20px 65px -40px #17233e60}
.portfolio-page{background:#f7f8fc;color:var(--portal-ink)}
.portfolio-intro{background:linear-gradient(115deg,#f2f1fc 0%,#fff 65%);border-bottom:1px solid #e3e6ef;padding:76px 24px 36px}
.portfolio-intro-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.45fr 1fr;gap:80px;align-items:center}
.portfolio-eyebrow{display:block;font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--portal-accent);margin-bottom:24px}
.portfolio-intro h1{font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:-.045em;font-weight:800;margin:0 0 24px}
.portfolio-intro h1 span{color:var(--portal-accent)}
.portfolio-intro-inner>div>p{font-size:17px;line-height:1.8;color:var(--portal-muted);max-width:570px}
.portfolio-contact{display:inline-flex;align-items:center;gap:30px;background:var(--portal-accent);color:white!important;font-weight:700;font-size:14px;padding:15px 21px;border-radius:10px;margin-top:28px;transition:background .2s}
.portfolio-contact:hover{background:#4034b0}
.portfolio-note{background:var(--portal-ink);border-radius:22px;padding:36px;color:#fff;box-shadow:0 22px 45px -25px #17233e80}
.portfolio-note-number{font-size:12px;letter-spacing:.12em;color:#b9b4ff}
.portfolio-note h2{font-weight:700;font-size:29px;line-height:1.25;letter-spacing:-.025em;max-width:290px;margin:32px 0 17px}
.portfolio-note p{color:#c6cedd;font-size:14px;line-height:1.8}
.portfolio-note>div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #ffffff25;padding-top:22px;margin-top:28px;font-size:11px;color:#e7e9f0}
.portfolio-note>div span{color:#a69dff}
.portfolio-search-wrap{max-width:1200px;margin:56px auto 0;border-top:1px solid #dfe3ee;padding-top:28px}
.portfolio-search-wrap label{display:block;font-weight:700;font-size:13px;margin-bottom:10px}
.portfolio-search-field{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #ccd2e0;border-radius:12px;max-width:670px;padding:4px 16px;box-shadow:0 3px 8px #17233e05}
.portfolio-search-field svg{color:#737e93;flex-shrink:0}
.portfolio-search-field input{background:transparent;width:100%;border:0;box-shadow:none;padding:12px 0;font-size:16px;min-width:0;color:#17233e}
.portfolio-search-field:focus-within{outline:3px solid #7c70ee;outline-offset:3px}
.portfolio-search-field input:focus{outline:none!important;box-shadow:none}
.portfolio-search-wrap>p{font-size:12px;color:var(--portal-muted);margin-top:10px}
.portfolio-projects{padding:44px 0 64px;min-height:400px}
.portfolio-projects [data-title]{box-shadow:0 3px 15px #17233e05}
.portfolio-projects [data-title]:focus-within{border-color:#7c70ee}
.portfolio-projects [data-title]:focus-within .opacity-0{opacity:1}
.portfolio-projects [data-title]:focus-within .translate-y-4{transform:translateY(0)}
@media(max-width:760px){.portfolio-intro{padding:40px 20px 28px}.portfolio-intro-inner{grid-template-columns:1fr;gap:32px}.portfolio-note{padding:26px}.portfolio-note h2{max-width:none;font-size:24px;margin-top:20px}.portfolio-search-wrap{margin-top:32px}.portfolio-projects{padding-top:32px}.portfolio-contact{min-height:48px}.portfolio-intro-inner>div>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.portfolio-note h2{color:#fff}

.portfolio-page{margin-top:-80px}