/*
Theme Name: Ray Blueprint
Description: Ray Kwok portfolio
Version: 1.0
*/

*{box-sizing:border-box}body{margin:0;background:#faf9f4;color:#101d30;font:17px/1.48 -apple-system,BlinkMacSystemFont,Arial,sans-serif}header,main,footer{max-width:1024px;margin:auto;padding:0 22px}header{height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cbd4db}header b{font-size:21px}button,summary,a{font:inherit;color:inherit}button{cursor:pointer}header details{position:relative}header summary{padding:12px;list-style:none}nav{position:absolute;right:0;background:white;padding:16px;z-index:3}nav a{display:block;padding:9px}.hero{padding-top:35px}.k{color:#26518a;font:600 12px/1.5 monospace;letter-spacing:.11em;text-transform:uppercase}h1{font-size:clamp(48px,11vw,76px);letter-spacing:-.06em;line-height:1.04;margin:10px 0 15px}h1 span{color:#1454ae}.intro{font-size:20px;line-height:1.38;max-width:480px;margin:0 0 18px}.actions{display:flex;align-items:center;gap:16px}.btn{border:0;background:#114fa4;color:white;font-weight:600;border-radius:8px;padding:13px 18px}.actions a{color:#17497d;padding:12px 0}.art{aspect-ratio:2.5;background-image:url(illustrations.png);background-size:100% 500%;background-position:center var(--y);mix-blend-mode:multiply}.hero .art{margin:16px 0 0}section{padding:30px 0 12px}h2{font-size:32px;letter-spacing:-.045em;margin:4px 0 16px;line-height:1.12}.services{border-top:1px solid #bdc9d4}.services details{border-bottom:1px solid #bdc9d4}.services summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:17px 0;font-weight:600}.services summary:after{content:'+';margin-left:auto;color:#184f99}.services details[open] summary:after{content:'−'}summary::-webkit-details-marker{display:none}.n{font:13px monospace;color:#275689}.services p{margin:0 0 17px 28px}.projects{display:grid;gap:20px}.card{border:1px solid #cad4df;padding:16px;border-radius:12px;background:#fffefa}.card h3{font-size:23px;margin:12px 0 3px;letter-spacing:-.03em}.card p{margin:0}footer{padding:32px 22px;margin-top:24px;background:#15283e;color:white}dialog{max-width:340px;border:1px solid #aebfcc;border-radius:12px;padding:22px}dialog button{min-height:44px}@media(min-width:720px){.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.services,.projects{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.services details{align-self:start}}

a{color:#1454ae}.card a{text-decoration:none;color:inherit}.card img,.detail img{max-width:100%;height:auto}.detail{padding-block:40px}.detail h1{font-size:clamp(36px,6vw,60px)}.project-link{display:inline-block;padding:14px 0}footer{max-width:none}footer>div{max-width:980px;margin:auto}
@media(min-width:850px){header,main{max-width:1180px}.services{grid-template-columns:repeat(3,1fr)}.services details{padding:15px 0}.services p{display:block}.hero{min-height:360px}.hero .art{aspect-ratio:2.5}.card{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center}.card .art{aspect-ratio:2.5}}
@media(min-width:850px){
.services{gap:24px}.services details{border:0;position:relative;padding-bottom:58%}.services details::after{content:'';position:absolute;bottom:0;width:100%;aspect-ratio:1.66;background:url(blueprints.png) var(--x) var(--row)/325% auto no-repeat;pointer-events:none}.services details:nth-child(3n+1){--x:2%}.services details:nth-child(3n+2){--x:50%}.services details:nth-child(3n){--x:98%}.services details:nth-child(-n+3){--row:40.5%}.services details:nth-child(n+4){--row:58.3%}
}

.rk.rk-about-nav { container-type:inline-size; max-width:1280px; margin:auto; background:#faf8ef; color:#0c1621; font-family:Arial,Helvetica,sans-serif }
.rk .rk-nav {height:5.6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3.5cqw 0 4.5cqw}
.rk-nav a {color:inherit;text-decoration:none}
.rk-nav .brand {display:block;width:clamp(100px,12cqw,150px);aspect-ratio:686/169;background:url(wordmark.jpg) left center/contain no-repeat;font-size:0}
.rk-nav .links {display:flex;gap:3.6cqw}
.rk-nav .links a,.rk-nav .navchat {font-size:1.34cqw;font-weight:600}
.rk .rk-nav .links a:not([aria-current]) {border-bottom:0}
.rk .rk-nav .links a[aria-current] {border-bottom:2px solid #104ea0}
.rk-nav .navchat {background:#084ca7;color:white;border-radius:.6cqw;padding:.95cqw 2.2cqw}
.rk-nav .mobmenu {display:none}
@media(max-width:760px){
 .rk .rk-nav {height:60px;padding:0 20px}
 .rk .rk-nav .links,.rk .rk-nav .navchat {display:none}
 .rk-nav .mobmenu {display:block;position:relative;z-index:5}
 .rk-nav summary {padding:10px}
 .rk-nav .mobmenu[open] {align-self:flex-start;background:#faf8ef}
 .rk-nav .mobmenu a {display:block;padding:8px 16px}
 .rk-nav .mobmenu a[aria-current] {text-decoration:underline}
}

body.post-type-archive-ray_project{background:#faf8ef;color:#112334}
main.rk-gallery{max-width:1280px;margin:auto;padding:clamp(40px,5vw,75px) clamp(22px,4.5vw,64px) 80px}
.rk-gallery small{color:#1552a1;font:700 12px/1.4 monospace;text-transform:uppercase;letter-spacing:.1em}
.rk-gallery h1{font-size:clamp(52px,6vw,80px);margin:18px 0}.rk-gallery>p{font-size:20px}
.gallery-tools,.gallery-tools form,.gallery-tags,.gallery-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gallery-tools{gap:20px;margin:36px 0 24px}.gallery-tools input,.gallery-tools button{border:1px solid #bfc9cc;border-radius:5px;padding:9px 12px;background:transparent;font:inherit}.gallery-tags a{padding:6px 13px;border-radius:24px;text-decoration:none;font-size:15px}.gallery-tags [aria-current]{background:#124fa2;color:white}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gallery-card{padding:18px;border:1px solid #c7cfcf;border-radius:8px;text-decoration:none;color:inherit}.gallery-card:hover,.gallery-card:focus-visible{border-color:#1552a1}.gallery-art{height:145px;display:grid;place-items:center;margin-bottom:16px}.gallery-art img{max-width:100%;height:100%;max-height:145px;object-fit:contain}.gallery-art span{font-size:60px;color:#1552a1}.gallery-card h2{font-size:22px;letter-spacing:-.04em;margin:6px 0}.gallery-card div>span{color:#1552a1}.gallery-pages{margin-top:24px}
@media(max-width:760px){.gallery-grid{grid-template-columns:1fr}.gallery-card{display:grid;grid-template-columns:30% 1fr;gap:16px;align-items:center}.gallery-art{height:98px;margin:0}.gallery-art img{max-height:98px}.gallery-tags a{padding:5px 8px}.gallery-tools form{flex-wrap:nowrap;width:100%}.gallery-tools input[type=search]{min-width:0;flex:1}}

.rk .client-notes {margin:32px 4.5%;padding:clamp(24px,4vw,56px) 0;border-top:1px solid #c5cdd0}
.rk .client-notes small {color:#1454a5}
.rk .client-notes h2 {margin:12px 0 18px;font-size:clamp(32px,4vw,54px)}
.client-notes>p {color:#495969}
.quote-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:24px}
.quote-grid figure {margin:0;padding:0 20px;border-left:2px solid #1552a1}
.quote-grid blockquote {margin:0;font:20px/1.5 Georgia,serif}
.quote-grid figcaption {margin-top:14px;color:#355374}
.rk .footer-wordmark {display:inline-flex;background:#faf8ef;padding:5px 8px;border-radius:4px}
.rk .footer-wordmark img {display:block;width:clamp(100px,12cqw,150px);height:auto}

/* Homepage contact footer */
#contact.base{min-height:0;padding-block:clamp(32px,4vw,58px);align-items:start}#contact .footer-wordmark{background:transparent;padding:0;mix-blend-mode:screen}#contact .footer-wordmark img{width:136px;filter:grayscale(1) invert(1) contrast(1.3)}#contact.base h3{margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.14}#contact.base p{font-size:16px;line-height:1.5;color:#d3deea;margin:10px 0;max-width:40ch}#contact .footnav{gap:6px 18px;margin-top:22px}#contact .footnav a{font-size:14px;padding:3px 0}#contact .blue{margin-top:8px;font-size:16px;padding:11px 22px;border-radius:8px}@media(min-width:761px){body:has(#ray-conversation) #contact.base{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}}@media(max-width:760px){#contact.base>div{margin:0}#contact.base>div+div{margin-top:28px}}