/* Decorative accents in project cards. */
.case{position:relative;isolation:isolate}
.case::before{content:"";position:absolute;right:22px;top:85px;width:126px;height:126px;background:url('assets/identity/star-gradient.png') center/contain no-repeat;opacity:.22;transform:rotate(12deg);z-index:-1;pointer-events:none}
.case:nth-child(even)::before{left:18px;right:auto;transform:rotate(-18deg)}
@media(max-width:600px){.case::before{width:98px;height:98px;top:80px;right:12px}.case:nth-child(even)::before{left:12px}}
.portrait-frame{position:relative;overflow:visible}
.portrait-frame>img:not(.portrait-outline){border-radius:24px}
.portrait-frame>.portrait-outline{position:absolute;left:-10.7%;top:-3.75%;width:126.2%;height:105.5%;max-width:none;object-fit:fill;pointer-events:none}
.about-collage{display:block;width:250px;height:auto;margin:54px 0 0 20px;pointer-events:none}
.contact .wrap{position:relative;isolation:isolate}
.contact-orbit{position:absolute;width:490px;height:auto;right:3%;top:-10px;z-index:-1;pointer-events:none}
@media(max-width:1100px){.contact-orbit{width:350px;right:2%;top:10px}}
@media(max-width:850px){.about-collage{width:220px;margin:35px 0 25px 12px}.contact{overflow:hidden}.contact h2{max-width:78%}.contact-orbit{width:240px;top:65px;bottom:auto;right:-35px}}
@media(max-width:600px){.about-collage{width:190px;margin:30px 0 25px 8px}.contact-orbit{width:190px;top:95px;bottom:auto;right:-45px}}

/* Handwritten typography across the portfolio. */
.brand,.hero h1 em,.about .big em,.contact h2 em,.case-graphic{font-family:'Marck Script',cursive;font-style:normal;font-weight:400;letter-spacing:-.02em}
.brand{font-size:1.8rem;line-height:1.4;font-weight:400;word-spacing:-.12em}
@media(max-width:600px){.brand{font-size:1.25rem}}

.hero h1 em,.about .big em,.contact h2 em{font-size:1.16em}
.case-graphic{font-size:clamp(2.5rem,5vw,5rem)}

.hero h1 em,.about .big em,.contact h2 em{line-height:1.35}

.hero h1 em,.contact h2 em{font-size:1.3em;line-height:0}

/* Keep narrow screens readable without cutting text or controls. */
.hero-copy,.hero-aside,.case,.about>div,.notes .wrap>div{min-width:0}
.case-graphic{line-height:1.1;white-space:normal;padding:8px 0;height:auto;min-height:150px;overflow-wrap:break-word}
@media(max-width:850px){
 header{gap:14px}.header-actions{flex:none;gap:10px}
 .menu-toggle{display:flex;width:40px;height:38px;padding:9px 8px;flex-direction:column;justify-content:space-between;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--wine);cursor:pointer}
 .menu-toggle span{height:2px;background:currentColor;border-radius:2px}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;padding:18px 6% 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(36,27,34,.1)}
 header.menu-open .nav{display:flex;flex-direction:column;gap:0}header.menu-open .nav a{display:block;padding:12px 0;font-size:1rem}
 .brand{font-size:clamp(1.05rem,3.1vw,1.5rem)}
}
@media(max-width:600px){
 header{gap:8px}.header-actions{gap:8px}.brand{font-size:clamp(1rem,4.4vw,1.25rem)}
 .hero h1{font-size:clamp(2.5rem,11.5vw,4rem);line-height:1.12}
 .hero h1 em,.contact h2 em{font-size:1.3em;line-height:0}
 .case-graphic{min-height:130px}
 .about .big{font-size:clamp(2rem,8.5vw,2.6rem);line-height:1.25}
 .contact h2{font-size:clamp(2rem,8.8vw,3.3rem);line-height:1.2}
 .contact h2 em{font-size:1.3em;line-height:0}
 .contact-orbit{width:clamp(140px,43vw,190px);right:-40px;top:80px}
 .aside-bottom{gap:14px}.aside-bottom span{max-width:55%;min-width:0}
 .contact-links{gap:12px}.contact-links a{min-width:0;padding:12px 16px}
 footer span{overflow-wrap:break-word}
}

/* One consistent title scale and more legible mobile signature. */
.hero h1,.section h2,.about .big,.contact h2{font-size:clamp(2.5rem,5vw,5.5rem);line-height:1.15;letter-spacing:-.05em}
.hero h1 em,.about .big em,.contact h2 em{font-size:1.3em;line-height:0}
@media(max-width:850px){.brand{font-size:1.8rem}}
@media(max-width:600px){
 .brand{font-size:1.6rem}
 .hero h1,.section h2,.about .big,.contact h2{font-size:clamp(2.25rem,10vw,3.5rem);line-height:1.15}
}

/* Align the number with the first line of each card category. */
.case-top{align-items:baseline}
.case-num{flex-shrink:0;line-height:1.2}
.case-category{min-width:0;line-height:1.4}

/* Keep the contact headline beside its illustration in every language. */
.contact h2{max-width:calc(100% - 520px)}
.contact h2 em{display:inline;line-height:0;white-space:nowrap}
@media(max-width:1100px){.contact h2{max-width:calc(100% - 380px)}}
@media(max-width:850px){.contact h2{max-width:65%}}