/* Zariya Design Studio: shared UI (burger menu, philosophy, tools, read, outsourcing, blog) */
header.sh{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;pointer-events:none;flex-wrap:nowrap}
header.sh>*{pointer-events:auto}
.sh .bk{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:#151412;color:#E7E4DC;border:1.5px solid #E7E4DC;text-decoration:none;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.sh .bg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:#151412;color:#E7E4DC;border:1.5px solid #DA8F0E;cursor:pointer;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.sh .bg i{display:block;width:20px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.sh .bg i:after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.sh .bg[aria-expanded=true] i{border:0}.sh .bg[aria-expanded=true] i:before,.sh .bg[aria-expanded=true] i:after{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px solid currentColor;transform:rotate(45deg)}.sh .bg[aria-expanded=true] i:after{transform:rotate(-45deg)}
.mn{position:fixed;inset:0;z-index:35;background:#151412;color:#E7E4DC;display:none;overflow:auto;padding:84px 24px 40px}.mn.open{display:block}
.mn nav{max-width:760px;margin:0 auto;display:grid;gap:0}.mn nav a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid #3A3833;text-decoration:none;font:800 clamp(28px,6vw,44px)/1.05 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em}.mn nav a span{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#DA8F0E}
.mn nav a:hover,.mn nav a:focus-visible{color:#DA8F0E}.mn .sub{max-width:760px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 13px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#9A968C}.mn .sub a{color:#E7E4DC}
body.lock{overflow:hidden}
/* philosophy */
.athens{display:grid;grid-template-columns:5fr 7fr;gap:40px;margin:34px 0 10px;align-items:start}@media(max-width:860px){.athens{grid-template-columns:1fr;gap:22px}}
.af{margin:0;position:sticky;top:90px}@media(max-width:860px){.af{position:static}}
.afi{position:relative;background:#E7E4DC;border:1.5px solid #151412;padding:10px}.afi img,.afi svg{display:block;width:100%;height:auto;filter:grayscale(1) sepia(.3) contrast(1.08);mix-blend-mode:multiply}.afi svg{filter:none;mix-blend-mode:normal}
.afi:before{content:"FIG. 1";position:absolute;left:14px;top:-9px;background:#E7E4DC;padding:0 8px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#BE2E14}
.af figcaption{font:500 12px/1.5 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#55524A;margin-top:10px}.af figcaption b{color:#151412}
.at p{max-width:62ch}.at .q{font:italic 600 clamp(24px,3vw,32px)/1.15 'Cormorant Garamond',Georgia,serif;border-left:6px solid #BE2E14;padding-left:18px;margin:26px 0;max-width:30ch;color:#151412}
.pa{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}@media(max-width:560px){.pa{grid-template-columns:1fr}}.pa div{border:1.5px solid #151412;padding:14px 16px;background:#FBF8EF}.pa b{display:block;font:800 17px 'Bricolage Grotesque'}.pa .m{display:block;margin-bottom:4px}
/* tools */
.tt{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}.tt button{font:700 15px 'Bricolage Grotesque',sans-serif;padding:11px 16px;border:1.5px solid #151412;background:#FBF8EF;color:#151412;cursor:pointer;min-height:46px}.tt button[aria-selected=true]{background:#151412;color:#E7E4DC}
.tp{border:1.5px solid #151412;background:#FBF8EF;padding:20px;margin:-1.5px 0 0}.tp[hidden]{display:none}.tp h3{margin:0 0 4px;font:800 24px/1.1 'Bricolage Grotesque'}.tp .lede{margin:0 0 16px;color:#55524A;max-width:60ch}
.tp label{display:block;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#55524A;margin:0 0 12px}.tp input,.tp select,.tp textarea{display:block;width:100%;margin-top:5px;font:17px 'Bricolage Grotesque',sans-serif;padding:10px;border:1.5px solid #151412;background:#fff;color:#151412;border-radius:0;min-height:46px}
.tp .r2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.tp .r3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}@media(max-width:640px){.tp .r2,.tp .r3{grid-template-columns:1fr}}
.tp .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}.tp .cd{border:1.5px solid #151412;background:#fff;padding:12px 14px}.tp .cd .m{display:block}.tp .cd b{display:block;font:800 28px/1.1 'Bricolage Grotesque';margin-top:4px}.tp .cd small{display:block;color:#55524A;font-size:13px}
.tp .gb{height:14px;background:#E7E4DC;border:1px solid #151412;margin:6px 0}.tp .gb i{display:block;height:100%;background:#151412}.tp .gb i.r{background:#BE2E14}.tp .gb i.a{background:#DA8F0E}
.tp .note{font-size:14px;color:#55524A;margin:10px 0}.tp .conf{display:inline-block;font:500 11px 'IBM Plex Mono';padding:2px 8px;border:1px solid #151412;text-transform:uppercase;margin-left:6px}
.tp .ly{display:grid;grid-template-columns:1fr 1.2fr 40px;gap:8px;align-items:center;margin-bottom:8px}.tp .ly select{margin:0;min-height:42px}.tp .ly input[type=range]{margin:0;min-height:30px;padding:0;border:0}.tp .ly b{font:500 13px 'IBM Plex Mono'}@media(max-width:640px){.tp .ly{grid-template-columns:1fr 1fr}}
.tp .x{min-width:40px;min-height:40px;border:1.5px solid #151412;background:none;cursor:pointer;font-size:18px}.tp .stripe{display:flex;height:46px;border:1.5px solid #151412;margin:12px 0}.tp .stripe span{display:block;border-right:1px solid #151412;min-width:2px}
.tp .tl{margin:10px 0}.tp .tl .row{display:flex;align-items:center;gap:8px;margin:8px 0}.tp .tl .lab{width:130px;flex:none;font:500 12px 'IBM Plex Mono';text-transform:uppercase;color:#55524A}.tp .tl .bar{display:flex;height:34px;flex:1;border:1.5px solid #151412;background:#fff;overflow:hidden}.tp .tl .bar span{display:flex;align-items:center;justify-content:center;font:500 11px 'IBM Plex Mono';color:#fff;overflow:hidden;white-space:nowrap}@media(max-width:560px){.tp .tl .lab{width:76px;font-size:10px}}
.tp .ok{color:#2F7A3E;font-weight:800}.tp .bad{color:#BE2E14;font-weight:800}.tp .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.tp .go a,.tp .go button{display:inline-block;background:#BE2E14;color:#E7E4DC;padding:13px 22px;border:0;font:800 16px 'Bricolage Grotesque';cursor:pointer;text-decoration:none;min-height:46px}.tp .go .o{background:none;color:#151412;border:1.5px solid #151412}
/* services, read, subscribe */
.sv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}.sv div{border:1.5px solid #E7E4DC;padding:16px}.sv h3{margin:0 0 6px;font:800 19px 'Bricolage Grotesque';color:#E7E4DC}.sv p{margin:0;font-size:16px;color:#C9C5BA}
.rd3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:22px 0}.rc{border:1.5px solid #151412;background:#FBF8EF;text-decoration:none;color:#151412;display:flex;flex-direction:column}.rc img{display:block;width:100%;height:auto;border-bottom:1.5px solid #151412}.rc div{padding:14px 16px 16px}.rc h3{font:800 19px/1.15 'Bricolage Grotesque';margin:4px 0 0}.rc:hover{background:#fff}
.sb{display:grid;gap:10px;max-width:520px;margin-top:14px}.sb .row2{display:flex;gap:8px;flex-wrap:wrap}.sb input[type=email]{flex:1;min-width:220px;font:17px 'Bricolage Grotesque';padding:12px;border:1.5px solid currentColor;background:#fff;color:#151412;border-radius:0;min-height:48px}.sb button{background:#BE2E14;color:#E7E4DC;border:0;padding:12px 22px;font:800 16px 'Bricolage Grotesque';cursor:pointer;min-height:48px}.sb label.ck{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4}.sb .zc-st{font-size:14px;min-height:20px}.sb input[name=hp]{position:absolute;left:-9999px}
.wk a{color:inherit}.wk img{display:block;width:100%;height:auto;border:1.5px solid #151412;margin-bottom:10px}.wk .fl{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.wk .fl a{font:500 12px 'IBM Plex Mono';text-decoration:underline}
/* blog (studio) */
body.blog{background:#E7E4DC;color:#151412}.blog main{padding-top:76px}.ba{max-width:760px;margin:0 auto;padding:0 24px 40px}.blog .m{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#55524A}.blog .k{color:#BE2E14}
.blog h1{font:800 clamp(30px,5vw,50px)/1.05 'Bricolage Grotesque';letter-spacing:-.02em;margin:8px 0 12px}.blog h2{font:800 clamp(23px,3vw,30px)/1.1 'Bricolage Grotesque';margin:38px 0 10px}.blog h3{font:800 19px 'Bricolage Grotesque'}.blog .dek{font:italic 600 24px/1.25 'Cormorant Garamond',Georgia,serif;margin:0 0 16px}
.blog .hero-img{width:100%;height:auto;display:block;border:1.5px solid #151412;margin:14px 0 20px}.blog .short{border:1.5px solid #151412;border-left:8px solid #BE2E14;background:#FBF8EF;padding:14px 18px;margin:16px 0}.blog .short p{margin:0}.blog .meta{display:flex;flex-wrap:wrap;gap:6px 16px}
.blog .ba ul,.blog .ba ol{padding-left:22px}.blog .ba table{display:block;overflow-x:auto;border-collapse:collapse;margin:14px 0;font-size:15px}.blog .ba th,.blog .ba td{border:1px solid #9A968C;padding:9px 11px;text-align:left}.blog .ba th{background:#D8D4C9;font:500 12px 'IBM Plex Mono';text-transform:uppercase}
.blog details{border-top:1.5px solid #151412;padding:12px 0}.blog summary{font-weight:800;font-size:18px;cursor:pointer}.blog .cta{background:#151412;color:#E7E4DC;padding:22px 24px;margin:32px 0}.blog .cta h3{color:#E7E4DC;font-size:22px}.blog .cta .btn{background:#BE2E14}.blog .cta .btn.o{background:none;color:#E7E4DC;border:1.5px solid #E7E4DC}
.blog .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.blog .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin:22px 0 40px}.blog .crumb a{color:#55524A;text-decoration:none}
.blog footer{border-top:1.5px solid #151412;color:#55524A;text-align:center}.blog .pagehead{padding:30px 24px 0;max-width:1040px;margin:0 auto}.blog .wrap{max-width:1040px;margin:0 auto;padding:0 24px}
