/* Readable public pages share the studio palette without loading its runtime. */
body:has(.portfolio-page){height:auto;min-height:100svh;overflow:auto}
.portfolio-page{--portfolio-ink:#eee9df;--portfolio-muted:#b0bbc2;--portfolio-line:#e6e1d326;background:#0b1219;color:var(--portfolio-ink);min-height:100svh;font:16px/1.75 Outfit,system-ui,sans-serif}
.portfolio-page a{color:#e3b17c;text-underline-offset:5px;text-decoration:underline;overflow-wrap:anywhere}
.portfolio-page a:hover{color:#f6d4af}
.portfolio-page a:focus-visible{outline:2px solid #e3b17c;outline-offset:4px}
.portfolio-page .portfolio-header{position:static;height:auto;max-width:1120px;margin:auto;padding:32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;pointer-events:auto;border-bottom:1px solid var(--portfolio-line)}
.portfolio-page .portfolio-name{color:var(--portfolio-ink);font-size:18px;font-weight:500;text-decoration:none}
.portfolio-name span{display:block;color:var(--portfolio-muted);font-size:12px;font-weight:400}
.portfolio-header nav,.portfolio-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.portfolio-header nav a{font-size:14px;padding:8px 0}
.portfolio-page .portfolio-content{max-width:880px;margin:auto;padding:64px 32px 80px}
.portfolio-page h1{font-size:clamp(36px,6vw,64px);line-height:1.1;letter-spacing:-1.5px;font-weight:500;margin:16px 0 24px}
.portfolio-page h2{font-size:26px;line-height:1.3;font-weight:500;letter-spacing:-.5px;margin:0 0 16px}
.portfolio-page h3{font-size:18px;line-height:1.5;font-weight:500;margin:24px 0 8px}
.portfolio-page p{margin:0 0 16px}
.portfolio-page section{border-top:1px solid var(--portfolio-line);padding-top:32px;margin-top:40px}
.portfolio-page section p,.portfolio-page li{color:var(--portfolio-muted)}
.portfolio-page .portfolio-lead{font-size:20px;line-height:1.7;color:var(--portfolio-muted);max-width:720px;margin-bottom:40px}
.portfolio-page .portfolio-kicker{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#e3b17c}
.portfolio-page .portfolio-meta{color:var(--portfolio-muted);font-size:14px}
.portfolio-page ul,.portfolio-page ol{padding-left:24px;margin:0 0 24px}
.portfolio-page li{padding-left:4px;margin-bottom:8px}
.portfolio-projects article{display:grid;grid-template-columns:40px minmax(0,1fr);gap:24px;padding:32px 0;border-top:1px solid var(--portfolio-line)}
.portfolio-projects h2 a{text-decoration:none}
.portfolio-number{font-size:14px;color:#e3b17c;padding-top:4px}
.portfolio-skills{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;padding-left:0!important}
.portfolio-flow li::marker{color:#e3b17c}
.portfolio-breadcrumbs{display:flex;gap:12px;font-size:14px;margin-bottom:32px;flex-wrap:wrap}
.portfolio-figure{margin:40px 0}
.portfolio-figure img{display:block;width:100%;height:auto;border-radius:4px}
.portfolio-figure figcaption{font-size:13px;color:var(--portfolio-muted);margin-top:12px}
.portfolio-email{font-size:clamp(18px,4vw,28px)}
.portfolio-faq-index{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.portfolio-faq-index a{padding:8px 0}
.portfolio-faq-list article{padding:24px 0;scroll-margin-top:24px}
.portfolio-faq-list article+article{border-top:1px solid var(--portfolio-line)}
.portfolio-faq-list article h3{margin:0 0 12px;font-size:20px;line-height:1.5}
.portfolio-page .portfolio-faq-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0;margin:0;font-size:14px}
.portfolio-page .portfolio-faq-links li{padding:0;margin:0}
.portfolio-page .portfolio-footer{position:static;max-width:1120px;margin:auto;padding:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-top:1px solid var(--portfolio-line);font-size:13px}
.portfolio-page .portfolio-footer nav{background:none;border:0;border-radius:0;backdrop-filter:none;padding:0}
.portfolio-skip{position:absolute;left:16px;top:-100px;background:#0b1219;padding:12px 16px;z-index:10}
.portfolio-skip:focus{top:8px}
#welcome .portfolio-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:12px;line-height:1.5}
#welcome .portfolio-links a{color:#d5c7b6;padding:4px 0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.portfolio-page .portfolio-header{padding:24px}.portfolio-page .portfolio-content{padding:40px 24px 56px}.portfolio-page .portfolio-lead{font-size:18px}.portfolio-page .portfolio-footer{padding:24px}.portfolio-projects article{grid-template-columns:24px minmax(0,1fr);gap:16px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){#welcome .portfolio-links{gap:4px 16px;font-size:11px;margin-top:8px}}